Animation and Effects with Macromedia Flash MX 1002004 [Electronic resources] نسخه متنی

Animating Shapes Using the Built-in Tween Classes

Although you can animate objects and shapes quite easily using onEnterFrame or setInterval(), you can leverage Flash's built-in tweening equations to easily create professional and fun animations and effects. For example, by adding one line of code, you can make the text field created in the previous exercise animate across the Stage. Add the following line of code to the bottom of the Actions panel:

[View full width]
new mx.transitions.Tween(my_txt, "_x", mx.transitions.easing.Regular.easeInOut, 0, 550, 3,
 true);

The Tween class' constructor method takes seven parameters: an instance to animate, the property to modify, the easing method you want to use, a beginning and end value for the specified property, the number of seconds or frames that the tween will last, and whether seconds or frames will be used.

The previous snippet causes the text field created in the earlier exercises to animate left to right across the Stage for three seconds until it finally stops just off to the right of the Stage. If you view the animation in the authoring environment, it might be helpful to draw a rectangle around the perimeter of the Stage so you can see where the borders of the Stage are.

The Tween class is useful for your projects because you can easily add movement with many different forms of easing. You need to add only a small amount of code, and you can fully control the advanced effect. The Tween class does all the hard work for you!

Exercise 2: Attaching and duplicating movie clips

The background behind the text effect consists of many rectangles that move randomly on the Stage. First, you need to create a rectangle to use. Many instances of this single rectangle are attached from the Library. Each instance has the dimensions and color modified using ActionScript, and then they animate in a random fashion. In this exercise, you create the rectangle and attach it to the Stage. In the following exercise, you add movement for each rectangle using the Tween class.

1. Select the Rectangle Tool from the Tools panel, and make sure that there is no stroke color (select the Stroke color control and click the No Color button). Draw a medium-sized rectangle on the Stage with any fill color.

2. After you draw the rectangle on the Stage, double-click it again to select the shape and resize the shape's dimensions to 550 pixels wide by 60 pixels high.

3. With the shape still selected, press F8 to convert it to a movie clip symbol. In the Symbol Properties window, enter a symbol name of rectangle_mc and make sure that you select the movie clip behavior.

4. If the Symbol Properties dialog box is in Basic mode, click the Advanced button in the lower-right corner of the dialog box.

5. In the Linkage section, check the Export for ActionScript checkbox and type an identifier value of rectangle_id.

6. Click the OK button to apply the changes and return to the Stage.

7. Now that the rectangle_mc symbol is in the Library, you can delete it from the Stage. The movie clip will be attached into the movie on the fly, and eventually a bit of random movement effect will be to help make the SWF file more unpredictable and less "scripted."

8. Add the following code into the Actions panel:

for (var i = 0; i<13; i++) {
var thisMC:MovieClip =
this.attachMovie("rectangle_id", "rect"+i+"_mc",
this.getNextHighestDepth(), {_x:0, _y:i*30, _alpha:40});
}

The previous code loops over the block of code 13 times and attaches the rectangle movie clip to the Stage 13 times. Each time the symbol attaches from the Library, the instance gets a unique instance name on the Stage (such as rect0_mc, rect1_mc, rect2_mc, and so on), given a unique depth (this.getNextHighestDepth()), and the _y coordinate of the attached movie clip is adjusted each time so that the rectanglesCreating a random number generator" at the beginning of this chapter.

9. When you create an array of different colors, you can assign each attached rectangle instance a random color thanks to the randRange() function (added in the following ActionScript).

Add the following ActionScript at the beginning of the existing ActionScript on frame 1 of the actions layer:

var color_array:Array = new Array(0xBDDBD7, 0x9AC9C2,
0x78B6AD, 0x5CA79D);
function randRange(min:Number, max:Number):Number {
var randNum:Number = Math.round(Math.abs(max-min)*Math.random())+Math.min(min, max);
return randNum;
}

Choose different hexadecimal values to customize the color of your project.

This code creates an array with four different predefined colors, and then adds the randRange() function, described at the beginning of this project.

Using Arrays

An array is a sequential group of values. Each item in an array consists of two parts: an index and a value. Arrays in ActionScript are zero-based, so the first index in an array is always 0. For example, consider the 12 months of the year. The first month is January, the second month is February, and so on. In ActionScript terms, the first item in the month array would have an array index of 0 and a value of January. The second month would have an array index of 1 and a corresponding value of February. If you were creating an array of month names in ActionScript, the code would be the following:

var month_array:Array = new Array("January", "February",
"March");
trace(month_array[0]); // output: January

When you refer to specific items within the array, you use square brackets ([]) to denote which index you want to set or retrieve.

[View full width]

for (var i = 0; i<13; i++) {
var thisMC:MovieClip =
this.attachMovie("rectangle_id", "rect"+i+"_mc", this.getNextHighestDepth(), {_x:0, _y
:i*30, _alpha:40});
var randomIndex:Number = randRange(0,
color_array.length-1);
var mc_color:Color = new Color(thisMC);
mc_color.setRGB(color_array[randomIndex]);
}

The second line of code attaches the rectangle_mc symbol from the Library and assigns it an instance name of rect0_mc through rect12_mc. As each symbol is added to the Stage, the code also creates an alias named thisMC to the current movie clip. This way, you can target the proper movie clip without having to use a combination of square brackets and complex paths. The third line of code creates a numeric variable named randomIndex that calls the randRange() function. The randRange() function returns a random number between 0 and the number of items in the color_array, which allows you to retrieve a random color from the array. A new color object named mc_color is created and is passed a reference to the newly attached rectangle movie clip. Using the setRGB() method of the Color class, you can set the color for each newly attached instance of the rectangle_mc. Remember that each rectangle instance is set to an _alpha value of 40, so the colors will be rather transparent. This lets you see each rectangle overlap slightly (Figure 7.9).

11. If you test the Flash document at this point you will see a series of horizontal lines covering the Stage. Each rectangle has its alpha set to 40%, so it is somewhat transparent. Each time you reload the SWF file, the colors should be in different positions and slightly different colors.

There is really no end to how far you can take this example and which modifications you can take. From randomizing amounts of _alpha or how many colors you define, each time you view the document it can look almost completely different.

Exercise 3: Adding random movement

Because the rectangle symbol in the Library is 60 pixels and the value of _y increments (adds) only 30 pixels each time, a new instance of rectangle_mc attaches to the Stage. The design looks fairly square and predictable. By adding one line of code, it's possible to change the _height of each row to a random integer to give the animation a slightly "random" look to it. You use the randRange() function (using the random method of the Math class) that you wrote earlier in this project.

Creating a random number generator" near the beginning of this chapter for information on the randRange() function and adding random movement in Flash. You added this function to the project in Exercise 2.

1. Add the following boldface line of ActionScript to the bottom of the for loop on frame 1 of the actions layer.

[View full width]
for (var i = 0; i<13; i++) {
var thisMC:MovieClip =
this.attachMovie("rectangle_id", "rect"+i+"_mc", this.getNextHighestDepth(), {_x:0, _y
:i*30, _alpha:40});
var randomIndex:Number = randRange(0,
color_array.length-1);
var mc_color:Color = new Color(thisMC);
mc_color.setRGB(color_array[randomIndex]);
thisMC._height = randRange(35, 45);
}

[View full width]

for (var i = 0; i<13; i++) {
var thisMC:MovieClip =
this.attachMovie("rectangle_id", "rect"+i+"_mc", this.getNextHighestDepth(), {_x:0, _y
:i*30, _alpha:40});
var randomIndex:Number = randRange(0,
color_array.length-1);
var mc_color:Color = new Color(thisMC);
mc_color.setRGB(color_array[randomIndex]);
thisMC._height = randRange(35, 45);
var rectTween:Object = new
mx.transitions.Tween(thisMC, "_y", mx.transitions.easing.Regular.easeInOut, thisMC._y,
thisMC._y+randRange(-5, 5), randRange(1, 3), true);
rectTween.onMotionFinished = function() {
this.yoyo();
};
}

Instead of using a series of onEnterFrame event handlers or working with a large number of setInterval() calls, the animation is completed this time by using the easing classes in Flash MX 2004.

Instead of animating some embedded text as in previous examples, this code animates each rectangle instance in a random direction over a random period of time. In this example, you set the animation to start at the current Y coordinate of the rectangle, and animate anywhere from -5 to 5 pixels from its current Y coordinate. If the randRange() function returns a negative integer, the rectangle animates upward. However, if the randRange() function returns a positive integer, the rectangle animates downward. You use the randRange() function again in the next parameter, which is the number of seconds that the animation should last. Not only is each rectangle a random color, height, and range of movement, but they also animate at different speeds. In this example, the rectangle instance animates anywhere from 13 seconds.

You need to use the Tween class again, but it's unlike the previous time you saw and used the Tween classes. This time you're creating a reference to the actual tween object. By storing a reference to the tween, you can add an event handler that detects when the animation is finished. The animation wouldn't be very exciting if each rectangle moved a few pixels and then stopped, so in this example an event handler is added that will wait for the onMotionFinished event to trigger and then call the Tween class' yoyo method, which tells Flash to reverse the animation back to the properties starting position. For example, imagine that you had a rectangle at a Y coordinate of 30 pixels. This particular rectangle instance will move 3 pixels down to a Y coordinate of 33 pixels. After the rectangle has finished moving, the onMotionFinished event handler triggers, and the animation reverses and returns to its original position. After the rectangle has tweened back to its original position, the onMotionFinished event handler triggers again, sending it back to its previous Y coordinate of 33 pixels. This endless loop causes the rectangles to continually tween for as long as the SWF file plays.

4. Preview the animation in the Flash authoring environment (Control > Test Movie) a few times. If you think that the animation is moving too quickly or too slowly you can modify the values being passed to the randRange() function and increase or decrease the number of seconds accordingly. If you find that the rectangles are moving too much or too little for your liking, just change the values of -5 and 5 in the previous snippet.

The best part of this animation is that it is so easy to configure and modify to make it fit the style that you want.