The Flash Anthology: Cool Effects & Practical ActionScript - Chapter 3: Animation Effects

Creating a Lightning Flash

That storm we just created looks pretty good, but it could do with some sheet lightning to add that finishing touch.

We'll pick up where we left off in the previous section. To jump straight to the end of this example, locate Duplication_Modification_Clouds_And_Flash.fla from the code archive.

1. Create a new movie clip named LightningFlash and add a rectangle that fills the stage (350x400 pixels). Give it a white gradient fill, fading from 100% opacity at the center of the rectangle to 0% opacity at the bottom edge of the rectangle.
2. Back in the main timeline, create a new layer named Flash above the Clouds layer and drag an instance of the new movie clip into it. Name the instance flash. You can lock and hide the layer—we won't need to edit it again.

Now that we've created the movie clip, we can add the control code:

3. Once again, add the following code to the end of frame 1 of the Actions layer:

Example 3.19. Duplication_Modification_Clouds_And_Flash.fla Actions : 1 (excerpt)

flash._alpha = 0;    
flash.onEnterFrame = function ()    
{    
 var flashControl = random (10);    
 if (flashControl >= 9 ||    
     flash._alpha > 0 && flashControl >= 5)    
 {    
   flash._alpha += random (65);    
   if (flash._alpha > 65)    
   {    
     flash._alpha = 0;    
   }    
 }    
};

We start by setting the flash movie clip's opacity to zero, so that the lightning doesn't appear until we want it to.

Next, we tackle the onEnterFrame event handler, which will control the opacity of the lightning for each frame of the movie.

Even in the worst storms, lightning is an intermittent thing. After some fiddling, I've decided I want a 10% chance that a flash of lightning will occur in any given frame. So I use random to generate a number (flashControl) between zero and nine and write my code so that it initiates a lightning flash whenever that number is nine.

Within the body of the if statement, the code goes on to add a random value between 0 and 64 to the opacity of the flash movie clip. Once this takes place, we want the lightning to continue to grow in brightness until it hits the maximum brightness for a flash of lightning (which, after some experimentation, I've decided is 65% opacity. At that point, we set the opacity back to zero and wait for the next flash of lightning.

When a lightning flash occurs, we don't want to wait for that one-in-ten chance of lightning to make the existing flash brighter. And, at the same time, we can add some variety to our lightning flashes by not having them grow brighter with every frame. That's why the condition in the if statement is so complex—if a lightning flash is in progress (which we detect by checking if flash._alpha is greater than zero), then we allow the flash to grow brighter 50% of the time (whenever flashControl is five or greater).

4. Save the movie and preview it in Flash.

The conditions we've employed here, including the use of random values, cause the _alpha value of the flash movie clip to flash in and out, producing quite a stormy scene. Feel free to experiment with the probabilities I've put in place to make the storm more or less severe.

Creating User-driven Motion

In this example, we'll create motion based on user input. When the user clicks one button, objects slide into place; when another button is clicked, the objects slide back to their starting points (see Figure 3.9). This example builds upon previous animation examples and is fully scripted—there's not a motion tween in sight!

Figure 3.9. This effect is driven by user input.

If you don't feel like creating this effect from scratch, locate User_Drive_Motion.fla in the code archive.

Setting the Scene

1. Start by creating a new movie that's 400 pixels wide and 185 pixels high, and has the folder and layer structure shown in Figure 3.10.


Figure 3.10. Create the folder structure for the user-driven motion effect.

2. Create a new movie clip named Animation_Base. In it, place a 190x10 pixel rectangle. Feel free to replace this rectangle with whatever you wish, as we'll be using it only to illustrate the effect of this animation.
3. Drag four instances of the Animation_Base movie clip into the Movie Clips layer, naming them line1, line2, line3, and line4, and positioning them at (10, 10), (10, 20), (10, 30), and (10, 40) respectively.
4. Set the Color for each Animation_Base instance to an Alpha value of 0%, so that the clips start off invisible.
5. Create two new button symbols called Trigger_Show and Trigger_Hide, and create instances of them in the Buttons layer called trigger_show and trigger_hide, respectively. Don't be too concerned about the way they look—you can redesign them later when you modify the effect for your own use.

Adding the ActionScript

Now, we'll create a function that will take care of all the movement in this effect, including the speed at which the objects move into and out of position:

6. Select the first frame of the Actions layer, and add the following code within the Actions Panel:

Example 3.20. User_Drive_Motion.fla Actions : 1 (excerpt)

function MoveTo (clip, fadeType, xTo, yTo, speed)    
{    
 clip.onEnterFrame = function ()    
 {    
   this._x += (xTo - this._x) * speed;    
   this._y += (yTo - this._y) * speed;    
   if (fadeType == "in" && this._alpha < 100)    
   {    
     this._alpha += 5;    
   }    
   else if (fadeType == "out" && this._alpha > 0)    
   {    
     this._alpha -= 5;    
   }    
 };    
}

The MoveTo function accepts the following parameters:

clip - The clip we're animating
fadeType - The type of fade effect to display ("in" or "out")
xTo - The final horizontal position for the animation
yTo - The final vertical position for the animation
speed - The speed of the clip's movement (between 0 and 1 for smooth animation)

Looking over the code, it should be pretty obvious what MoveTo does. It sets up an onEnterFrame event handler for the specified movie that will ease the clip to the specified coordinates while fading its opacity in or out.

The effect will be triggered by the trigger_show button, and reversed by the trigger_hide button. So all we really need to do is call MoveTo with the proper parameter values whenever one of these buttons is clicked.

Adding the Button Trigger Code

Now, we'll add the button trigger code that will make the function work.

7. Add the following code beneath the function declaration we created in the previous section:

trigger_show.onPress = function ()    
{    
 MoveTo (line1, "in", 50, 10, 0.3);    
 MoveTo (line2, "in", 100, 20, 0.3);    
 MoveTo (line3, "in", 150, 30, 0.3);    
 MoveTo (line4, "in", 200, 40, 0.3);    
};

When the trigger_show button is pressed, the MoveTo function will be called, moving the clips to their new positions. In this example, we move the movie clips horizontally, as the vertical coordinate matches their starting positions on the stage.

Let's now add the code that will be called when the trigger_hide button is pressed, returning the clips to their resting states:

8. Add the following code:

trigger_hide.onPress = function()    
{    
 MoveFromTo(line1, "out", 10, 10, 0.3);    
 MoveFromTo(line2, "out", 10, 20, 0.3);    
 MoveFromTo(line3, "out", 10, 30, 0.3);    
 MoveFromTo(line4, "out", 10, 40, 0.3);    
};

9. Save and preview your work.

The effect you see is smooth and crisp. Clicking the first button moves the objects into place, while clicking the second option tucks them away.

Looks like a menu to me!
You could easily build this effect into a navigation element by nesting buttons within the movie clips and altering the passed parameters to suit your needs.

Subtle Flame Animation

With the right balance of subtle animation, you can create effects that are both interesting and visually appealing. In this example, we'll create a realistic flame animation for our hot-rod server (Figure 3.11).

Figure 3.11. Use random movement to create subtle animation effects.

You can grab the finished version of this example and edit it for your own needs by locating Flaming_Server.fla in the code archive.

1. Create a new movie that's 600 pixels wide and 300 pixels high; set the frame rate to 24 fps.
2. Create the layer and folder structure shown in Figure 3.12.


Figure 3.12. Use this folder and layer structure.

3. Create a background graphic that will serve as the backdrop for the effect within the background layer. In Figure 3.11, I've used a Grand Canyon background.
4. Create a new movie clip named Flame, and create three keyframes. Using the pen tool, create three different flames, one on each keyframe, as shown in Figure 3.13. We'll use these to create the random flame effect.


Figure 3.13. Create three different flames for a subtle animation effect.

5. Drag three instances into the first frame of the Server Animation layer, naming them flame1, flame2, and flame3.
6. Add the following code to the first frame of the Actions layer on the root of the timeline:

function randomBetween (a, b)    
{    
 return Math.min (a, b) + random (Math.abs (a - b) + 1);    
};

What we have here is a useful function that will provide a random integer between the two given numbers (inclusive). Work through the math if you like—Math.min returns the smaller of two numbers, while Math.abs returns the absolute (positive) value of a number. We'll be using this function throughout this example to create additional subtlety and randomness.

7. Add the following code:

Flame1.gotoAndPlay (randomBetween (1, 3));    
Flame2.gotoAndPlay (randomBetween (1, 3));    
Flame3.gotoAndPlay (randomBetween (1, 3));

This randomly starts the animation of each flame between frames one and three.

Now, we have a subtly alternating effect. The next section of code adds a little more randomness—in the real world, flames aren't always the same length. Let's make the size of each flame change at random.

8. Add the following code:

Flame1.onEnterFrame = function ()    
{    
 this._yscale = randomBetween (100, 140);    
 this._alpha = randomBetween (60, 100);    
};    
Flame2.onEnterFrame = function ()    
{    
 this._yscale = randomBetween (100, 180);    
 this._alpha = randomBetween (60, 100);    
};    
Flame3.onEnterFrame = function ()    
{    
 this._yscale = randomBetween (100, 200);    
 this._alpha = randomBetween (60, 100);    
};

This assigns an onEnterFrame event handler to each of the flames. These handlers randomly modify the opacity and vertical scale of the clips for each frame of the animation. Feeding different values to randomBetween gives a different quality to each of the flames.

9. You're done! Preview the movie in Flash.

In the completed example that I've created for you, I've put the flame movie clips behind three exhaust pipe graphics and rotated them to make them look realistic when bolted onto the side of a server box, which is a simple graphic symbol.

Conclusion

This chapter has been an adventure in ActionScript animation techniques, and we've covered a lot of ground—from simple animation, to scripted masking and complex duplication techniques. I hope you'll grab the source files from the code archive and rip them apart! Use the techniques that you've learned here to improve your own projects and create new effects.

In Chapter 4, Text Effects, we'll apply these same techniques to create some truly intriguing text effects—effects that really harness the new powers of Flash MX 2004!

If you can't wait for the next installment, download all three free chapters now.