Adding Interactivity Using Adobe Flash

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.

Why Create Your Banners and Game Animation in Toon Boom Animate?

Some users may wonder why they would create a banner with Animate. There are several reasons:

  • Sophisticated drawing tools, including highly responsive pressure sensitivity with the Brush tool.
  • Virtual camera, no need to animate each layer individually to simulate camera motion.
  • Efficient animation tools such as the Transform tool with its temporary pivot and the Inverse Kinematics.
  • Advanced Timeline allowing you to create hierarchies between your layers without encapsulating them one into the other.
  • Colour palette concept allowing you to modify your colours at any time without having to repaint anything.
  • A True [PC1]Space, allowing you to create amazing depth and perspective effects when moving the camera.
  • State-of –the-art lip-sync feature
  • Export multiple vector effects to SWF including Blur, Glow and Shadow.
  • A powerful Text tool.
  • No need to embed any fonts. Text automatically transformed to outlines when exported to SWF.
  • Animate allows you to create Graphic Symbols.

Setting the Scene Resolution

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:

  1. Go to Scene > Scene Settings.
  2. In the Resolution tab, go to the Resolution section.
  3. Set the width in pixels.
  4. Set the height in pixels.
  5. Click on the OK button.

Creating your Content

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:

Exporting Your Content to Adobe Flash

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:

  • If you plan to add interactivity on the entire banner or animation you are working on, then a simple export to SWF will do.
  • If you plan to add interactivity on a specific layer, you will need to export that layer independently.
  • If you want to export an independent layer that is found between other layers, you will need to export 3 different SWF files. The 3 SWF files will consist of:
    • The back layers together,
    • your independent layer that is sandwiched in the middle,
    • and the top layers.

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:

  1. Go to File > Export > SWF.
  2. Browse to the location where you want to save the file.
  3. DO NOT enable the Protect from Import option as it will prevent you from importing your SWF into Adobe Flash.
  4. If there are some effects which you do not want to export because they make your banner too heavy, you can switch them off in the Disable Effects section.
  5. Click on the OK button.

Importing Your Content into Adobe 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:

  1. In the Properties panel, go to the Properties section.
  2. In the Size section, click on the Edit button.
  3. Set the Dimensions in pixels.
  4. Click on the OK button.

Once the size is set, it is time to import your SWF files exported from Toon Boom Animate.

To import SWF files:

  1. Go to File > Import > Import to Library.
  2. Browse for your SWF files.
  3. Click on the Open button.

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:

  1. From the Library, drag the MovieClip Symbols that were created onto the Stage. Place each one of them on a separate layer.
  2. In the Properties panel, in the Position and Size section, set the X and Y properties to 0,00 to align the animation properly.

Adding Interactivity to Your Animation

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.

Stopping the Animation Once Completed

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:

  1. In the Tools toolbar, click on the Select tool.
  2. Open the Actions window.
  3. On the Stage, double-click on the Symbol you want to add interactivity to. You will enter the Symbol to edit it.
  4. In the Timeline view, add a new Layer and name it Action.
  5. On the last frame of your animation, right-click (Windows) or [Ctrl] +click (Mac) and select Add Blank keyframe.
  6. Select your new keyframe.
  7. In the Action window, type: stop();
  8. To check that this works correctly go to Control > Test Movie > Test.

Adding a Play button to Start 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:

  1. In the Tools toolbar, click on the Select tool.
  2. Go to the Root Timeline.
  3. On the Stage select the object you want to stop the animation for.

  4. In the Properties window, type an instance name for your symbol.
  5. In the Timeline view, add a new layer and name it Action.
  6. In the Timeline view, select the first frame in the Action layer.
  7. In the Action window, type: yourInstanceName.stop(); For example, in our case, we typed: banner.stop();
  8. Open the Components window.
  9. Drag a Button component to the stage.
  10. In the Properties panel, name the Button instance as: btn
  11. In the Properties panel, in the Components Parameters section, change the label name to something like Play.

  12. In the Timeline view, select the first frame in the Action layer.
  13. In the Action window, on the second line, type the following:
    btn.addEventListener(MouseEvent.CLICK, playAnimation);
    function playAnimation(event:MouseEvent){;
  14. To check that this works correctly go to Control > Test Movie > Test.

Opening a New Web Page

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
  1. In the Tools toolbar, click on the Select tool.
  2. On the Stage, select the object that the user will click on to open a new web page.
  3. In the Properties window, make sure that object has an instance name.
  4. In the Timeline view, click on the first frame of your Action layer. Create one if you do not have one.
  5. In the Action window, type the following (In our example, our object is called "banner"):
    banner.buttonMode = true;
    banner.addEventListener(MouseEvent.CLICK, goToPage);
    function goToPage(event:MouseEvent){
        var url:URLRequest = new URLRequest("");
        navigateToURL(url, "_blank");
  6. Replace the URL between the quotes with your own URL. You can also change the target page "_blank" to self if you want your new page to open in the same window.
  7. To check that this works correctly go to Control > Test Movie > Test.

You are now ready to explore the exciting world of Toon Boom Animate and ActionScript with Adobe Flash.