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

Animating With Code

Scripted animation is the technique of animating items on the Stage or from the Library at runtime using ActionScript. You do this instead of, or in addition to, using motion or shape tweens that you add to the Timeline. In many cases, using scripting for your animation has benefits, such as better performance in the SWF file or a lower file size. In some cases, scripted animation might be the only way to achieve a particular effect. For example, if you want to use a custom mouse pointer, you need to use ActionScript to animate the pointer around the Stage. Or, if you base an animation on some kind of user interaction (such as a mouse click), you should use ActionScript. Other forms of user interaction include waiting for a click to occur, and then writing code that executes only when the click occurs. Or,Understanding Events and Interactivity."

Another way to animate objects is to use a function in Flash called setInterval(). The setInterval() function calls a function or method at a specified interval. For example, you could write your own function that moves a movie clip five pixels to the right. Then you call the setInterval() function and tell it to call your custom function every 100 milliseconds (1/10th of a second). When you want to clear the interval and stop the movie clip from moving, you call the clearInterval() function, which stops the function from constantly being called.

onEnterFrame can be very resource intensive if you're trying to do simple things. Both onEnterFrame and setInterval need to be cleared or deleted after you are finished using them for this reason. If you only need to call/execute code less frequently, you should use setInterval because you can specify how often the code executes (thus saving resources).

Benefits of Animating with Code

Using ActionScript to animate objects on the Stage has many benefits over traditional animation methods. One of the greatest advantages is that you can easily reuse code throughout your FLA, and even in different projects. Your code is a lot more maintainable, because changing code in one place might affect several different instances. For example, if you have a dynamically created menu in your SWF file that animates using Flash, you might need to write the code to animate menu items only one time and make each submenu use the same code. Building a file this way lets you modify code in one place and have the changes apply throughout your document. If you animate objects using shape or motion tweens manually and then need to change the way the animation behaves, you might need to change any number of symbols that use a similar effect. If you animate objects using ActionScript, you can make a change to the code in one place, and have that change reflect throughout your document automatically.

Another benefit is that using code can cut down on mistakes or inconsistencies in your animation. If you need to set up keyframes and motion tweens that fade menus in and out, you can make sure that each animation is identical. Having to manually add tweens, keyframes and animations usually increases the chance of small mistakes in the animationsuch as misaligned symbols, neglecting to hit test text (add a clickable area for a text button using the Hit frame inside a Button symbol), or adding keyframes on the wrong frame. Using scripted animation ultimately leads to a simpler and more consistent end result. However, remember that not all kinds of effects can be accomplished by using code: Sometimes you need to draw or shape tween graphics to achieve the result you require.

How ActionScript manipulates instances

You have a lot of control over movie clips, buttons, or components that you want to manipulate when you use code. You can change the X and Y coordinates of an instance, set the number of degrees rotation, set the level or transparency (alpha), width, height, or even horizontal and vertical scaling. To manipulate these objects, though, you first need to assign an instance name to objects on the Stage.

Using dot notation" for more information).

For example, if you have a circle on the Stage with the instance name circle_mc and you want to set the level of transparency to 50% you can use the following ActionScript code on the main Timeline:

circle_mc._alpha = 50;

Exercise 1.

In this example, circle_mc is referred to as the target path as it tells Flash how to find the target instance. If circle_mc was nested within a different movie clip called container_mc, you need to use the following code to properly target the movie clip:

container_mc.circle_mc._alpha = 50;

In this case, the target path would be container_mc.circle_mc.

Animating a ball with code

If you plan to add instances dynamically to the Stage using ActionScript or want to target an instance using ActionScript and change its properties, you need to make sure that the instance you want to target on the Stage has an instance name. Remember: This means you select the instance and type a name into the <Instance Name> text field in the Property inspector.

Moving an instance on the Stage using ActionScript is almost as easy as setting an X and Y coordinate in the Actions panel. To move a movie clip with the instance name ball_mc, you need to set an X and Y coordinate (the location on the Stage), as shown in the following code snippet:

ball_mc._x = 15;
ball_mc._y = 20;

This snippet moves ball_mc to an X coordinate of 15 and Y coordinate of 20, respectively. If you want to move the instance to a position that's relative to its current position, you need to increment (increase) or decrement (decrease) the coordinates. For example, if you want to move the ball_mc instance 15 pixels along the X-axis, use the following code:

ball_mc._x = ball_mc._x + 15;

If you want to use simpler syntax, Flash has what it calls the addition assignment operator, which combines addition and variable assignment in one simple step using +. (You learn more about operators later in this chapter.) For now, you can rewrite the previous code by using the addition assignment operator, as shown in the following code:

ball_mc += 15;

Both of the previous code snippets perform the same task: Each snippet increments ball_mc's position on the X-axis by 15 pixels. If you want to move the ball to the left instead, use either of the following snippets:

ball_mc._x = ball_mc._x15;

or

ball_mc._x = 15;

Each of the previous two lines of code do exactly the same thing; however, the second snippet is commonly used because it is easier to read after you're familiar with ActionScript.

Projects 6 and 7.

A simple interactive script

You've already seen bits and pieces of ActionScript code throughout this book. A particularly useful piece of ActionScript is the trace statement, which displays values in the Output panel when a SWF file plays within the Flash authoring environment. Using the trace statement lets you see when certain events happen, or you can use it to display values or debug code (discover and pinpoint problems with problematic or complicated code). You see an example of the trace statement in the following code:

ball_mc.onRelease = function() {
trace("ball_mc clicked");
};

If you test the SWF file (Control > Test Movie), you can tell when (or even if) a user clicks ball_mc because ball_mc clicked displays in the Output panel (Figure 6.8).

If you click ball_mc and nothing displays in the Output panel, it might mean that you didn't enter an instance name for the instance on the Stage, or perhaps there's a typo in your code or the instance name. Therefore, a TRace statement helps you see whether a function works, and it can also help you display values or data that return from a server. For example, suppose that you have the following code on the Timeline:

var x = 15;
trace(x)

Project 7.

When you test the SWF file this time, the Output panel immediately opens and displays 15. As you can probably tell, the TRace statement is very useful when you write ActionScript.

So now that you know about certain parts of the ActionScript language and have a bit of terminology under your belt, it's time to start building this chapter's project. In this project, you will use some ActionScript you learned earlier, as well as new pieces of syntax. Additionally, you will learn new parts of the language and what they do, such as functions and events.