This chapter is from the book
This chapter is from the book
This chapter is from the book
Using Instances
Each instance of a symbol has its own properties. By using various panels, you can change the appearance of individual instances. The best thing about this capability is that you can change the original symbol (the one that lives in the library) and affect all instances on the stage.
1) Select the Main Page Bitmaps layer and add a new layer named Logo above it.
You can add a new layer by clicking the Insert Layer button at the bottom left side of the timeline, or by choosing Insert > Layer from the main menu.
)
If you don't have the Main Page Bitmaps layer selected when you add this new layer, it will be added above the layer you have selected. You can move the new layer to the top of the layer list, where it needs to be, by clicking its name and dragging it to the top. Drop the Logo layer above all of the other layers.
2) Locate the Logo symbol in the zoo10.fla library. Make sure you have the new Logo layer selected and add an instance of the symbol to the stage by selecting its name and dragging it onto the stage.
You added the Logo symbol in the last exercise—if you don't see it in the zoo10.fla library, all is not lost! Just open assets.fla as a library again, and drag the instance onto the stage from that library.
)
When you are ready to add an asset from the library to the movie, you can drag it by its name, or by the graphic at the top of the Library panel. Make sure you have selected the layer you want before you start dragging the asset. Remember you will see a pencil icon to the right of the layer's name indicating that it's selected. If there's a line through the pencil icon, the selected layer is either locked or hidden. You can't add assets from the library to locked or hidden layers, you have to unlock or unhide the layer first.
Each copy of the symbol you add to the stage is called an instance. Every instance of a symbol has its own properties, such as Width, Height, and Alpha. You can use the Property inspector and several panels to modify the properties of each instance. Although each instance has its own properties, it is linked to the original symbol in the library. Any changes that you make in the original symbol affect all instances on the stage and instances inside other symbols.
3) Select the instance of the Logo symbol on the stage. Use the Property inspector to set the X and Y to 460 and 350.
)
When you select the instance of the Logo symbol, the Property inspector indicates that you currently have a Movie Clip selected. Use the Symbol Behavior drop-down if you need to set an instance to a different behavior (i.e. graphic or button).
Below the Symbol Behavior is the Instance Name setting. The instance name for a movie clip is very important when you're working with ActionScript—you'll use this setting later in the book.
The Swap button in the Property inspector lets you swap this instance of the Logo symbol with any other symbol in the library. You can only swap with another movie clip, graphic, or button symbol—not with a font symbol, bitmap, sound, or video. If you do swap the symbol, it will keep all of the properties of the original symbol, except the dimensions (if the swapped symbol has different dimensions).
The Color Styles property, labeled Color, sits at the right side of the Property inspector. You can choose None, Brightness, Tint, Alpha, or Advanced from this drop-down menu. None removes all color styles from an instance. Brightness modifies the relative lightness or darkness of the image, measured on a scale from black (-100%) to white (100%). Tint colors the instance a percentage of the tint color on a scale from 0% to 100% saturation Alpha adjusts the transparency of the instance, from completely transparent (0%) to completely opaque (100%). Advanced adjusts the red, green, blue, and transparency values of an instance separately.
)
As you choose most of the Color Styles options, additional properties are available in the Property inspector. When you select the Brightness and Alpha options, a slider and text box appear on the right side of the panel. You can drag the slider up and down to modify the Brightness and Alpha settings, or you can type a value from –100 to 100 in the text box to modify the Brightness or 0 to 100 to modify the alpha.
)
When you choose the Tint option a slider will appear. The Tint slider allows you to set the saturation of the hue. The R (Red), G (Green), and B (Blue) settings determine the hue. You can set the R, G, and B in several ways: by dragging the R, G, and B sliders up and down; by typing a number between 0 and 255 in each of the text boxes; or by clicking the color box in the Property inspector and choosing a color from the resulting pop-up color palette.
)
)
The Advanced option is, to put it mildly, much more advanced. You can use this option to modify the color and the transparency of the instance in relation to the original symbol. When you choose the Advanced option, a Settings button appears. Click that Settings button to open the Advanced Effect dialog box. Typing a number in, or dragging a slider next to, the percentage boxes multiplies the color or transparency value by a percentage of the original. If the instance was pure red, for example, changing the Blue percentage value would not cause a change, but changing the Red percentage would reduce the intensity of the red. Typing a number in the offset box (or dragging the slider) adds or subtracts the relevant saturation or transparency from the entire instance. Using the same pure-red instance and typing a positive number in the Blue offset box results in a shade of purple, for example. The equation used to determine the new color is (a * y + b)= x where a is the percentage specified in the percentage boxes, y is the color of the original instance, and b is the value in the offset boxes. Take some time to play with the Advanced option—it's a lot of fun and more obvious in action than in explanation.
4) Insert a new layer named Panda above the Logo layer. Add an instance of the Panda symbol to this layer. Position the instance to the left of the Logo.
)
You are going to animate the instances of the Panda and Logo symbols in the next lesson. As you'll learn when you go through the next lesson, each instance that you animate must be on its own layer.
5) Use the Transform panel to set the instance of the Panda symbol to 75% of its original size. Set its rotation to –15.
)
You can open the Transform panel by choosing Window > Transform. You looked at this panel in the previous lesson, so it should be somewhat familiar. In order to scale both the width and height at the same time, you should select the Constrain option. Otherwise you have to type 75% in both the Width and Height settings.
TIP
Remember to press Enter or Return after you type a value into a panel to apply any changed setting.
6) Save the file as zoo11.fla.
)
The movie is starting to shape up rather nicely! Let's keep moving—keep the file open while you continue to the next exercise.