1. Code
  2. Effects

Create a Whimsical Animated Flash Background


Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in May, 2009.

Using ActionScript 3.0, we'll create a cool Animated Background that we can use in Menu Screens or as a Music Visualizer.

Final Result Preview

Let's take a look at what we'll be working towards:

Step 1: Brief Overview

We'll create a Class that will take care of the whole effect. When you call the class, you'll be able to change the number of lights, color, alpha, size, direction, speed and the quality of the Blur filter. In this way it's possible to achieve many different results when using it. Also, you can use any background you want.

Step 2: The .fla Document

Create a new ActionScript 3.0 document (File > New...). Set the Stage size to your desired dimensions, I've used 600 x 300 px.

Step 3: Your Background

Add or draw an image to use as the background, I've used a simple blue gradient (#02C7FB, #1F63B4).

Step 4: Layers

Rename the first layer to "Background" then create another one and name it "Code". You can lock the "Code" layer to avoid placement of unwanted drawings in there.

Step 5: ActionScript

Save your work and let's get into the code!

I'm assuming you already have a basic understanding of ActionScript 3.0, if you have any keyword specific doubts please refer to the Flash Help (F1).

Create a new ActionScript file (File > New...).

Step 6: Importing Required Classes

Here we import the Classes that we'll use, remember that the word next to "package" is the name of the folder where our Class is located.

Step 7: Extending the Class

Extending the MovieClip class will allow our class to inherit all of the methods, properties and functions that the MovieClip has, in this case we use it to get access to the addChild() method.

Step 8: The Variables

Although they have pretty much self explanatory names I'll add short comments on each var to make sure it's clear. They get their values from the parameters of the Main function.

Step 9: Main Function

This is the function that we need to start the effect, we also set the variable values in this code.

Step 10: Creating the Lights

In this code we use a "For" statement to create the number of Lights the user sets in the parameter and calculate a semi-random speed for every Light.

Step 11: Position

This sets a random start position for the Lights based on the Area parameters.

Step 12: Blur Filter

The above code applies the Blur. Remember that this code is still part of the For, so the Lights get different Blurs.

Step 13: Alpha

An easy one; this sets the alpha property between 0.1 and 0.6.

Step 14: Scale

This sets the scale of the Lights between the original size and the minimum scale parameter. We use a round method to save processor.

Step 15: Adding the Lights to the Stage

This adds the Lights to the Stage, then we save them in an Array to use them later. It also the checkDirection function to see in which direction the Lights will go.

Step 16: Check Direction Function

Here we use a for to get access to all the Lights in the Array, then check the direction variable to determine where to move the Lights. Depending on the direction we add the listener to the corresponding function.

Step 17: Move Functions

This next section may seem a little complicated, but it's easier than you think. Basically, it moves the Light depending on the speed calculated in the Main function, then checks if the Light has "left" the Area of the effect. If that is the case, it sets a random position contrary to the direction the Light is heading.

Step 18: Calling the Function

Save your class (remember that the file has to have the same name as the Class) and let's get back to the Fla. Open the Actions Panel and write:

That's it! Test your movie to see your nice animated background!


Playing with the parameters in the class will result in a lot of different effects, try changing the background, set slower or faster speeds, use more Lights, less Blur and so on!

I hope you learned something you can use, thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.