For those of you new to this concept, interactivity allows the user to interact with your banners and content.
What is interactivity? For those of you new to this concept, interactivity allows the user to interact with your banners and content.
Many web creators enjoy using Toon Boom Animate's excellent drawing and animation tools to create a banner. But how do you add interactivity to it?
When creating animated web banners or online games, the designer will generally have to add interactivity. This article demonstrates how to create a banner in Toon Boom Animate and then add interactivity to either the entire banner or part of it using Adobe Flash. That same concept of interactivity can be applied to any type of animation created with Toon Boom Animate.
We will use Toon Boom Animate 2 and Adobe Flash CS5.
Some users may wonder why they would create a banner with Animate. There are several reasons:
Size is the first thing to establish when creating a web banner with any software. Web banners come in many shapes and sizes. In this example, we created a 700 x 90 pixel banner.
Before starting your work in Animate, we recommended that you set your scene resolution. You can always change it afterwards, but if you change the format ratio, you may have to reposition some of your elements.
This concept may be different if you are creating an online game. Many users create individual animations that are exported and then composited in a software where the final programming is done. We will use Adobe Flash for this purpose. Once again, it is best to set your resolution before you start working. However, that resolution may not necessarily be the size of your game interface, it may be smaller or larger depending on what you are creating.
To change your scene resolution:
Once your scene resolution is set, the next step is to create your content.
At this point, you have a world of possibilities! Animate allows you to do several types of animation such as Cut-out, Tradigital (traditional digital) and Traditional.
A commonly used technique for the web is Cut-out animation augmented by tradigital animation.
To learn more about creating content with Toon Boom Animate refer to these resources:
The export process is really important when transferring your content from Toon Boom Animate to Adobe Flash.
Depending on where you want to add interactivity in your banner, you will need to decide what to export:
Exporting in this way will make it easy to reconstruct once you move on to Flash.
Note: Adobe Flash does not support True Space (Multiplane). If you export an independent layer that was interacting with other layer in the True Space’s depth, you may encounter some issues when reassembling your banner or game in Flash. If you export a full banner that is animated in the True Space, there will not be any issues once in Flash. This warning is only if you have an independent layer to export.
There is no need to embed fonts in your SWF file. Fonts are automatically turned to out outline.
Exporting your content to Flash:
In Adobe Flash, you will have to create a new project and set its resolution to the values which you defined earlier. For the purpose of this article, we recommend you to create an ActionScript 3.0 document. Once the document is created, you will need to set the resolution.
To set the project resolution:
Once the size is set, it is time to import your SWF files exported from Toon Boom Animate.
To import SWF files:
Once the files are imported, you will notice that a lot of files were added to your library. You may want to organize them by placing them into folders.
When a SWF file is imported in Flash, the objects are conserved, but they are all placed into one single Timeline layer. Therefore it is a good idea to export your layers separately when you want to add interactivity on an independent layer.
Adding Your Animation on the Stage:
Using ActionScript, you can add interactivity to your banners, games and animation. For those who are new to this concept, interactivity allows the user to interact with your banners and content. For example, a Flash banner can contain a button that replays the animation or goes to another web page. The action of that button is programmed with ActionScript. The programmer writes few lines of code telling the button what to do.
You will find some basic ActionScript 3.0 examples that you could apply to your banners explained in this section.
Note: interactivity can only be added on Symbols.
One of the most popular actions on a web banner is the Stop action. By default, a Flash animation will loop. A lot of programmers do not want their banner to loop. This action is also used on Symbols within a banner or a game, and can be placed anywhere you want an animation to stop.
You can place the Stop action on the first frame, last frame or anywhere between. You can also add a Play button to restart the animation.
Adding a Stop action at the end of an animation:
Another popular action is to stop the animation at the start and add a Play button to let the user decide when he wants to play the animation.
To create this new action, make sure to do the previous Stop action first.
Adding a Play button to start the animation:
Our final example shows how to click on an object and open a new web page. This is one of the main functions used when creating a web banner.
Opening a new web page:Click to view demo
banner.buttonMode = true;
var url:URLRequest = new URLRequest("http://www.toonboom.com");
You are now ready to explore the exciting world of Toon Boom Animate and ActionScript with Adobe Flash.