Experimenting with Values

First let's review the parameters we've already looked at in this Zoom component sample by looking at its Component Parameters panel, shown in Figure 2.17.

Figure 2.17: The Component Parameters panel for the Zoom component

Transition Allows you to specify either Back_And_Forth or Jump. The Back_And_Forth value tells the component to zoom the object back and forth between the minimum and maximum sizes for the object; the Jump setting tells the component to zoom the object from the minimum size to the maximum size and then back to the minimum size to start the process over again.

Zoom_Percentage Determines how the object within the component will zoom. Values below 100 will make the component start at the original size of the object and then zoom down. So if you enter a value of 1, the component will begin at its original size and then zoom down to 1 percent of the original size. A value of 200 will tell the component to zoom the object to 200 percent of its original size. If you enter a value of 100, nothing will appear to happen, because you will be telling the object to zoom to 100 percent of its original size.

Starting_Alpha and Ending_Alpha Specify the beginning and ending transparency of the object.

Random_Position Specifies whether the object will be randomly positioned on the stage.

Stage_X and Stage_Y Work with Random_Position to tell the component the dimensions of the stage. Stage_X is the width and Stage_Y is the height.

Pause Sets a time in milliseconds that the zooming process will pause. The component will only utilize Pause if the Transition parameter is set to Jump.

Zoom_Speed Specifies how fast the zooming animation will go. This value is used to increment the zoom percentage. So, if you enter a value of 5, then 5 will be added to the zoom percentage on every frame. Therefore, small numbers for Zoom_Speed cause the zoom animation to progress slowly, while larger numbers cause the zoom animation to progress very fast.

Now let's try entering a few values for these parameters and see what happens.

Start entering different values for the various parameters to get a feel for how they work. Select any instance of the Zoom component on the stage, open the Component Parameters panel, and experiment with editing the parameters. For instance, try setting the Zoom_Percentage to a large number, and then close the Component Parameters window and test the movie. Edit the component's parameters again and set the Zoom_Percentage parameter to a small number.

It's very important to close the Component Parameters panel each time before you test the movie. Closing the panel sets the values for the variables in the component's code. When you have the panel open, the variables are essentially in flux. When you close the Component Parameters panel, Flash populates the variables in the code with the values that you specified. If you do not close the panel, Flash may crash, or the component may not work properly.

Remember, there are actually multiple instances of the two components. Therefore, when you test the movie, you will see lots of motion, and the majority of the motion will not be from any given component that you are editing. When you test the movie, it should look similar to Figure 2.18. Let's create a new file so see you can see the results of your changes more easily. Follow these steps:

1. Before opening a new file, open the library for the Chapter2_A_Modified.fla file. Copy an instance of the Zoom component. Now open a blank file (File ➔ New). Paste the component instance into the new file. Save the new file with the name Component Test. Notice that the library for the Component Test file now contains an instance of the Zoom component. Notice also that all of the resources that are linked to or used by the Zoom component are also included in the Component Test file's library (see Figure 2.19).

2. Now when you test the movie, you can more clearly see the results of any changes you make in the Component Parameters panel. Try entering different values for the parameters. Remember to close the panel each time and test to view the results. Although it's easier to see the results, one instance of the Zoom component, by itself, doesn't make for a very interesting animation. After you've had an opportunity to view the results of various changes to the Zoom components parameters, let's add a few more instances of the component so that we have a more interesting animation effect.

3. Select the red circle on the stage (which is the Zoom component). Hold down the Ctrl key or Command key and press the D key three times to make three duplicates. Drag the duplicates around the stage so that they are each in different locations, similar to the example shown in Figure 2.20.

4. Now edit the Component Parameters panel of each instance of the Zoom component. Give each component different values. For example, set the Transition parameter of one instance of the Zoom component to Jump and set another to Back_And_Forth. Try setting the Zoom_Percentage parameter of one instance of the Zoom component to a small number and the Zoom_Percentage of a different instance to a large number. After you have edited the parameters of each component, test the movie to view the results.

   You don't need to close the Component Parameters panel when going from component to component. When you've finished editing the parameters for one component, simply click another one, and the Component Parameters panel will automatically reflect the values of the selected component.

5. Test the movie and notice that each instance of the component acts independently according to the values you specified for their respective component parameters. Flash remembers the values for each component. If you save the file, close it, and reopen it, Flash will still remember the component parameter values for each instance of each component.

Figure 2.18: When you test the movie, you will see the combined effect of multiple instances of the two different components.

Figure 2.19: The Zoom Component and its related resources are now in the Component Test file's library.

Figure 2.20: Duplicates of the Zoom component instance are positioned on the stage so that they are some distance apart from each other.

This example demonstrates that components work similarly to other resources you should already be familiar with in Flash-namely movie clips. Like movie clips, components can be copied and duplicated. You drag them from the library and create multiple instances of them. You can adjust the effects of each instance of a movie clip (such as the alpha or tint) without affecting the other instances of the same movie clip. Similarly, you can edit the parameters of each instance of a component without affecting the other instances of the same component.

Editing a Movie Clip to Make Global Changes

This particular component is also similar to movie clips (as well as other Flash symbols) in that we can easily make global changes to the imagery used by the Zoom component. Let's try a few examples:

1. Click any one of the Zoom component instances on the stage and then choose Edit ➔ Edit Selected.

2. Select the red shape on the stage again and then choose Edit ➔ Edit Selected once more.

3. Now select the red circle on the stage and change its color to blue (see Figure 2.21). Return to scene 1 and notice that all instances of the Zoom component have been changed to blue.

   
   Figure 2.21: Editing the movie clip within any instance of the Zoom component changes all of the other Zoom component instances.

4. Test the movie.

On the CD 

All of the zooming circles are now blue. Like any other Flash symbol, we edited the movie clip that the Zoom component utilizes, and those changes were reflected in all of the instances of the Zoom component. This means that the Zoom component can actually work with any kind of Flash resource. In fact, you can even place a movie clip within the component. Follow these steps:

1. Open the loop.fla file from the Chapter 2 folder on the CD and copy the movie clip on the stage from that file.

2. Return to the Component Test file. Click any one of the Zoom component instances on the stage and choose Edit → Edit Selected.

3. Select the blue shape on the stage again and choose Edit → Edit Selected once more.

4. Delete the blue circle; then paste in the movie clip that you copied from the loop.fla file.

5. Now return to scene 1 and test the movie. Notice that the Zoom component works in the same way with an animated movie clip as it did with a movie clip containing a static image (see Figure 2.22).

   
   Figure 2.22: The Zoom component works the same with an animation as it did with a static image.

This example begins to demonstrate the power and versatility of components. This relatively simple component can be set to operate in many ways. Further, you can duplicate the component and vary the parameters to create a more interesting combined effect. Finally, you can use the component with any graphic or movie clip. You can do all of this without having to know a single line of ActionScript and without doing loads of tedious tweens.