Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Master the Time-saving Power of Flash Components, Part 1 : Page 3

In Flash, components—drag-and-drop modules of assets and code—are frequently used to promote code reuse and conserve file size, but they're not always cross-version compatible. Find out how to build components that work across several versions of Flash.


advertisement
Step 0: Starting with a MovieClip
I'll start by making a simple 72 x 72 pixel MovieClip that has two MovieClips within it. The first is a solid white square background and the second is a black copyright symbol. Using the color effect symbol properties menu, I'll give the copyright symbol an alpha value of 50 percent, which will remain fixed. Then, I'll instantiate the white background square with the name "stampBack." This allows me to control its alpha value through ActionScript. Finally, I'll add the following ActionScript to frame the background MovieClip:

this.swapDepths(1000); this.stampBack._alpha = 50 this._x = Stage.width - 20; this._y = Stage.height - 20;

This script does three simple things. The first line ensures the copyright "stamp" appears, arbitrarily, above the first 999 levels of content of any file. The second line will give the "stampBack" MC (our white square background) an opacity of 50 percent. This is the hard-coded value that I'll change later. Finally, the third and fourth lines will position the parent MovieClip (containing both the white background and the copyright symbol) in the lower right corner of your movie, 20 pixels from the right and bottom edges.

In the Library, name the MovieClip "Stamper." Test your movie. You now have a functioning asset in a familiar format (MovieClip). (I've called this "step 0" because what I've created is not yet a component but rather a familiar hard-coded example to work with.)



Step 1: Define Parameters

Figure 2. Setting Definitions: This shot demonstrates setting a variable type in the Component Definition dialog. This value will be interpreted as a number.
Next, I'll turn the MovieClip into the first stages of a component by defining parameters that can be changed by the user. From a scripting standpoint, I need to change a hard-coded value to a variable. Because I'm working only with the background alpha at this point, I only need to change one line of the above code—to replace the value of 50 with the variable "sBackAlpha" (localized to the MovieClip by using the "this" self-reference):

this.stampBack._alpha = this.sBackAlpha

Next, I need to use the Library to turn the MC into a component and define this parameter as user-modifiable. Select the MovieClip in the Library and use the Library's pull-down menu to choose the "Component Definition..." option. Here, I'll add a parameter and configure its attributes (see Figure 2).

Figure 3. Changing Parameters: Once your component parameters have been defined, set their value in the Component Parameters tab of the Property Inspector.
You should use the "+" symbol at the top of the window to add a parameter. Give it a short name that will still be clear in the parameters pane. This is more of a descriptive string to tell the user what the parameter is. Then assign a variable that will be populated. I used "sBackAlpha" when I replaced the hard-coding, so I'll use the same value here. Then assign the type of the variable.

To specify an opacity value, you need a number. This prevents errors due to data type translation. If you type in a string of "50" into the parameters pane, you want it to be thought of as the number 50, not the letters "50." This type attribute feature of the Components Definition dialog will cast the type of the variable to 'number.' Finally, use a default value of 50. (The "Parameters are locked in instances" option should be left on to prevent users from adding or deleting parameters from component instances.)

You now have a functioning component! Drag the component to the stage and make sure it is selected. The Properties panel has changed to show the Component Parameters tab. You can change the default value of 50 to 20, or 100; then test your movie and you will see the effect of the updated value (see Figure 3).

Author's Note: Once you've changed a MovieClip into a component, you can't double-click the component on the stage to edit it any longer. This is to prevent you from making accidental changes to the component. However, editing remains a simple task. All you need to do is select the component in the library and choose "Edit" from the library menu.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap