Browse DevX
Sign up for e-mail newsletters from DevX


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

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.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Step 2: Create a Live Preview
It can be time consuming to test your movie every time you want to see the results of changing a parameter. Fortunately, Flash provides a mechanism for seeing the update right on the stage. It is called Live Preview and, essentially, it is a duplicate of your component, stored inside the component itself (ultimately) and, once configured, it automatically receives the updated information from the parameters pane, displaying changes as you make them.

To create a Live Preview, you will be creating an entirely new Flash file with the same dimensions of your component (72 x 72). Next, copy or drag the component you created in Step 1 from its library into the new movie stage. Break it apart (Modify > Break Apart) so you have access to the component's individual parts. (It should not remain a duplicate of the component.)

At this point, the copyright symbol is still a MovieClip with an assigned color effect alpha value of 50, and the background white square is still a MovieClip with an instance name of "stampBack." All you need to do is add some ActionScript to update the alpha of the background square when the Live Preview is told to do so. This communication between the component parameter dialog and the Live Preview is automatic, but you'll need to understand two things.

First, that the information used to update the preview is transferred through a built-in mechanism called "xch," short for "exchange." This allows Live Previews to receive parameter changes and act on that information, and it also allows custom parameter interfaces (which I'll discuss later) to send the same information. You don't have to do anything to use this mechanism other than reference it in your ActionScript.

Second, there is a built-in function, appropriately named "onUpdate()," that will react to xch info when it comes in. So, all you have to do is add the following script to the first frame of your new Live Preview movie:

function onUpdate() { stampBack._alpha = xch.sBackAlpha; }

Now save your movie into the same directory as your component movie (this is not necessary, just convenient) and test your movie to quickly publish an SWF version of the file (you'll need it for the next operation).

Finally, you have to add the Live Preview to the component itself. Go back to your main component movie, select the component you're working on in your library, and open the same "Component Definition..." window you used earlier. Next to the Live Preview option, hit the Set button and choose the "Live Preview in external .swf file" option. Then browse to the Live Preview SWF that you just created. Linking to this external file will allow you to test often by simply replacing the SWF if you make changes to the Live Preview. (In part 2 of this article, I'll show you how to "embed" this operation so that you don't have to distribute additional SWF files, which can get lost or damaged, with your component.) When you are done, dismiss the dialog.

Figure 4. Matching Icon: The 'FCustomIcons' folder and the component must be in the same relative directory of your Library for your component to display a custom icon.
Now, for certainty, delete the copy of the component that you have on stage and drag another copy in. This time, when you make changes in the parameters pane, they will be reflected on stage immediately. (Make sure the Enable Live Preview option is active in Flash's Control menu. This is a performance option that allows you to enable or disable Live Previews to speed up authoring, if you desire.)

Step 3: Add a Description
Now that you have a component with a Live Preview, it's time to add some text describing your component in the Reference pane. In the same "Component Definition..." window you used before (see Figure 2), click on the "Description" Set button and choose "Description is plain text." The text you provide here will be seen when the Properties Help button is clicked (while the Component is selected) and you choose "Help On This component."

Step 4: Add a Custom Icon
Adding a custom icon to your component is an extra step you can take to help you easily identify it, or even brand it, within the components dialog. If you decide not to create a custom icon, you can use the default components icon (or choose from any preset icons that may be appropriate). But creating your own is easy and a nice "extra" touch.

To do it, create a 24 x 20 graphic, in a file format supported by Flash. (I used PNG because that format does not require a square background; I have the freedom to make whatever shape I want.) Go to the Library and create a new folder called "FCustomIcons." Import the graphic into the Library, and place it in this folder. Double-click the graphic file to change its name and match the name of your component exactly. If these names match, and the file is in the properly named folder, the component will have a custom icon. If it doesn't update immediately, close and reopen the library to see the change.

Figure 4 shows the "FCustomIcons" folder, relative to your component.

Thanks for your registration, follow us on our social networks to keep up-to-date