Random Movement Organic Flash Template

Flash^R CS5.5 has many time saving templates that supply the code most frequently used in Flash projects and the code is easily customized. In this tutorial, we will examine the Random Movement Organic Template which I recently used to create an animation of spiders swarming over the stage. You will find this template when you start a new project.

From the Welcome screen, choose Animation from the Create from Template list on the left.
From the list of Animation templates choose Random Movement Organic.
The bare bones template has three layers.

On the top layer are some instructions.

On the next layer are eight particles (movie clips), which are our bugs, in a row across the bottom of the stage.

On the bottom layer we have the solid colored rectangle which turns our stage charcoal black.

The instructions tell us to double-click on a bug and check out the ActionScript that will run the animation. Let's do that.

Once you double-click a bug, you will be on the Particle timeline. We are now inside the workings of one particle or bug. With the first frame of the Actions layer selected, open the Actions panel.
As you can see, we have four variables.

var speed:Number = 6;

var myRotation:Number = 0;
var ychange:Number;
var xchange:Number;

The speed variable controls the speed of the bugs moving over the stage. By default it is set to 6 and when we preview the animation the bugs move fairly fast. But let's up the number to 16 and preview. Now the bugs are really running around.

The other three variables work together within a function, along with some random math calculations, to make the bugs run all over the stage instead of together as a unit. Let's take a look at the fl_moveParticle function.

First, we get a random number for how much to rotate the bug from its current position. This will not move the bug but only rotate it in place.

Next we get random numbers for moving the bug to a new X and Y location on the stage.

But we have to make sure that the bug doesn't go off the stage. So we use a few if statements to confirm that the bug is within the width and height boundaries of the stage. If not, then we move the bug back onto the stage. Of course, you will want to customize the maximum width and height to match the dimension of your own stage.

Finally, we add the new random numbers to the bug's current x and y positions and we change the bug's current degree of rotation to the new random myRotation.

Once you get the animation fine tuned, you can replace the default bugs with your own bug movie clip. Each bug on the stage is an instance of the same Particle movie clip. The default bug does not move it's legs but you can add this secondary animation to your own bug.

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|