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

Understanding Objects

Flash bases its framework on a model involving classes, instances, and objects. In this section, you take a look at what these things are and how they affect you when you create your documents. A class is a collection of methods and properties that you use to describe an object. For example, you might have a Soda class. This particular class might have some methods and properties that help describe the Soda class. A property might be isDiet, packageType, or hasCaffeine. Methods of this class might be doDrink(), setFlavor(), getVolume(), or getBrand(). The class is like a blueprint that describes soda, and you might have several different kinds of carbonated beverages described by this single class.

Chapter 7.

When you create an instance of a class using ActionScript, you use the class' constructor function. To create a new instance using ActionScript, you might write some code like this:

var myDate:Date = new Date();

In this code, you construct a new instance of the Date class and store an instance in a variable called myDate. You use the instance of the Date class to return specific parts of the date (such as year, month, minutes, or seconds). Or you could create two date instances to find the difference in seconds between two dates that you specify.

Just like the Soda class described previously, a built-in class in Flash (or a custom class that you write yourself) contains methods and properties. Methods are functions that associate with the objects class (such as the Date class above) and you use them to do something with the object. A method is just like a function might work in your SWF file. For example, the Color class has a setRGB() built-in method. The method sets the hexadecimal color value for a specified instance.

Properties are built into the class, too. Properties are similar to variables or data that you use to define an instance, such as the dimensions or transparency of the instance. For example, a property in the MovieClip class is _visible, which sets the visibility of an instance. The property can be set to true (visible) or false (invisible).

An easy way to see what methods and properties belong to classes is to use the Actions toolbox in the Actions panel (Figure 6.12). For example, to view the methods and properties of the MovieClip class you can navigate through several folders. Find the MovieClip class by expanding Built-in Classes > Movie > MovieClip in the Actions toolbox.

The MovieClip class contains four subfolders: Methods, Properties, Drawing Methods, and Events.

Resizing and fading movie clips

A common technique in Flash is to modify the size of instances on the Stage. This technique can be useful for scaling instances using code or for building progress bars that let you display the loading progress of a SWF file. There are several properties you can use to resize an instance on the Stage, such as the _width and _height properties in the MovieClip and Button classes. These properties let you set the number of pixels that a particular instance is, either vertically or horizontally. Two other properties that can be useful for resizing objects are the _xscale and _yscale properties. Similar to the _width and _height properties, the _xscale and _yscale resize a particular instance, although they let you easily change the dimensions based on the current width and height. The default values for _xscale and _yscale are 100; thus, the current scale for each property is 100% wide and 100% high. Create a movie clip on the Stage in any FLA file, and give the movie clip an instance name of ball_mc. Set the _xscale property to 200 to double the width of an instance, as shown in the following code:

ball_mc._xscale = 200;

If you test your SWF file now, you see that ball_mc is twice as wide as it was originally. Set the _xscale property back to 100 to reset the instance back to its original size.

A particularly useful capability of Flash is that you can change the amount of an instance's transparency. You set the _alpha property to modify the transparency level. By default, instances are at 100% visible (_alpha is 100). If you want to change an instance so it's 50% transparent, set the _alpha property to 50 as shown in the following code:

ball_mc._alpha = 50;

There are a few important things you need to know about using _alpha and how performance can be compromised in your SWF files when you use it.

It can be processor-intensive to have several transparent instances on your Stage.
If you have complex animations with lots of objects on the Stage, slower computers might slow down and cause your animations to play back jerkily and slowly.

If you set an instance to an_alpha level of 0, it's still on the Stage and active .
So, if you have a clickable movie clip and you set its _alpha property to 0, the user cannot see the instance in your SWF file, except the instance can react to events and could be clickable. If you have instances on the Stage that you no longer need, you should always try unloading them from your SWF file by using ActionScript, or set the _visible property to false to hide the instance on the Stage (similar to setting _alpha to 0). Setting visibility to false causes that instance to stop handling events (so it is unclickable).

Despite these concerns, you will find that changing alpha levels can create interesting effects that you either want or need to use in a SWF file. Remember to test your SWF files before you put them online, and (if possible) test the file on a variety of computers (for example, on older Windows computers, a newer computer, a Macintosh computer, and so on). If the performance is unacceptable, try reducing the number of transparent objects in your file.

Exercise 2: Changing color using code

There are two main ways to change color in a SWF file: setRGB() and setTransform() methods. In this exercise, you create new instances and use setRGB() to change the color of several instances on the Stage.

1. Click Insert Layer on the Timeline to create a new layer, and rename the layer board. Click and drag the layer below the shapes layer.

2. Open the Library (Window > Library). Select the circle symbol and drag an instance of it to the board layer on the Stage. Repeat this step to add a second instance of the other two shapes. You have six shapes on the Stage when you finish: two instances of each shape you created in Exercise 1.

3. Open the Property inspector (Window > Properties). Give each of the three new shapes an instance name: circleHole_mc,squareHole_mc, and triangleHole_mc.

4. Select frame 1 of the actions layer. Type in the following code into the Script pane, following the ActionScript you added in Exercise 1:

var circleHole_color:Color = new Color(circleHole_mc);
circleHole_color.setRGB(0x000000);
var squareHole_color:Color = new Color(squareHole_mc);
squareHole_color.setRGB(0x000000);
var triangleHole_color:Color = new
Color(triangleHole_mc);
triangleHole_color.setRGB(0x000000);

This code creates three Color instances in ActionScript (such as circleHole_color) and applies an RGB color value to a specific instance. Each line in this example is a Color constructor and it takes a single parameter (such as circleHole_mc in line 1), which is an instance name to apply the color value to. The setRGB() method also takes a single parameter (0x000000), which is the color that you want to apply. A parameter is a value (in this case, a color) that's passed into your code that affects it in some way.

5. Then add the following code after the ActionScript you added in step 4:

triangleHole_mc.gotoAndStop("on");
squareHole_mc.gotoAndStop("on");
circleHole_mc.gotoAndStop("on");

This ActionScript will move the playhead of three shapes to the on playhead as soon as the SWF file plays. You need this code if your shapes have depth added to them. You do not want to see this part of the instance on the Stage for the holes the shapes are placed in. You will add this frame label and content for the "on" frames later in the project.

6. Select the Rectangle tool and create a square on the board layer (press Shift to constrain the proportions). Select the rectangle and press F8 to convert it into a graphic symbol. Arrange the circleHole_mc, squareHole_mc, and TRiangleHole_mc instances on the layer (similar to the layout in the final project file).

7. Create a folder in the Library (click the New Folder button at the bottom of the panel to create a folder). Name the folder graphics. Move any existing and future graphics into this folder; such as the rectangle you created in step 6. Optionally, you can also create a folder for your movie clip symbols as well.

Save the changes you made to the file. In the next exercise, you begin to add some interactivity to the document, so the user can move some of the instances around the Stage when you play it in Flash Player.