Colorful Explosion in AS3 - Page 1
       by kirupa  |  21 September 2009

I am a huge fan of circles, and I am an even bigger fan of making things move. In this tutorial, I will combine them both into one example that I call the Colorful Explosion. Mouse over on the Mouse Over button in the following movie to see why I call it that:

[ click on the Click Me text and move your mouse around ]

The colorful explosion is nothing more than dynamically generated circles adopting a random color, zooming in, and fading out. In this and the next couple of pages, you will learn how to create this effect on your own using Flash CS4 (or Flash CS3) using ActionScript 3.

Let's Get Started
First, you will need to create a movie clip. For this tutorial, simply create a solid blue circle movie clip and, in the Library, give it the class name ColorfulCircle. If you don't know how to do that, feel free to read the detailed instructions below. Otherwise, jump on over to the next page!

Creating the ColorfulCircle MovieClip:
The following instructions explain how to setup your movie and create the blue circle movie clip:

  1. First, create a new animation in Flash CS3, and be sure to set your document type to be Flash File (ActionScript 3.0). From the Properties panel, click the button next to the Size text and set the animation's width and height to 450 pixels by 300 pixels respectively:

[ set your animation's width/height to 300 by 200 ]

  1. While you are at the Properties panel, set the frame rate to 25.
  2. Now that our stage's width and height have been setup just the way we want, let's draw a circle. Using the Circle tool, draw a circle with a blue solid-fill color:

[ draw a blue, solid, filled circle ]

  1. Make sure your circle has been selected and press F8 or go to Modify | Convert to Symbol. The Convert to Symbol window will appear. For name, enter circle and make sure the Movie Clip option has been selected:

[ give your symbol the name circle and make sure it is also set to be a movie clip ]

Do not hit OK just yet. Let's make some more modifications.

  1. From the same Convert to Symbol window, find the area marked Linkage. If you do not see the Linkage area, press the Advanced button to display it. Check the box that says Export for Actionscript. A few lines above that, in the Class field, replace whatever text is displayed (probably circle) with the text BlueCircle:


[ check 'Export for ActionScript and enter BlueCircle for your class ]

The Base class field will automatically be populated for you, but if it hasn't, make sure to enter flash.display.MovieClip as shown in the above image.

  1. Press OK to close the Convert to Symbol window. After you have pressed OK, you will see your Library display your newly created symbol:

[ your circle in your Library ]

If you do not see your Library, press Ctrl + L to display it.

  1. Right now. your circle movie clip is stored in the Library, and you have a copy (also known as an instance) of that same clip on your stage right now. Great.
  2. Ok, things should be calm now, so go ahead this file as colorfulExplosion.fla.

At this point, you should see a blank stage with your Library displaying the circle movie clip with the class name ColorfulCircle. Right now, nothing is really being done. Let's fix that...on the next page!

Onwards to the next page.

1 | 2 | 3 | 4

SUPPORTERS:'s fast and reliable hosting provided by Media Temple.