Component Live Previews

In Chapter 4, you encountered the topic of live previews with the PixelButton component set. A live preview is simply a Flash movie that plays in place of the component movie clip on the stage, and only in the authoring environment. Live previews show you how your changes to the component's parameters affect the look of the component. Live previews are purely optional because they are meant only to aid you in using a component, so they can be turned off by clicking the Control menu and deselecting the Enable Live Preview option. The reason you might turn them off is because live previews can sometimes cause Flash or your computer to run slowly, since you may be running many SWFs at once.

The process to create a live preview is similar to that of creating a custom UI, but with fewer steps. The most important aspect of the procedure is to create a Flash movie that will take the values the user has entered for the component's parameters and render something useful to the stage from that information. No matter what frame rate the Flash movie is set to, Flash will force it to run at only one frame per second during a live preview so as not to take up too much of the computer's resources.

The live preview movie consists primarily of two things: an Object variable named xch and a function named onUpdate. The xch object serves the same purpose as before; it simply holds the values of each parameter of the component. The only difference is that you cannot change the values of the parameters. The onUpdate function is called every frame by Flash and should be used to create a graphical representation of the component from the values of the parameters. For example, the PixelButton component from Chapter 4 colored the buttons differently depending on what colors you chose in the parameters. The size of the stage of the live preview movie should be exactly the size of the component with its default parameter values.

Once you have made the live preview movie, you should publish its SWF and open the FLA that holds your component. There is only one more thing you have to do to your component before you can plug in the live preview. Create a movie clip of an invisible rectangle with the exact dimensions of the stage used in the live preview, and then position the rectangle such that its top-right corner is at the center of the component. This movie clip defines the default dimensions of the component, and it is imperative for the live preview to work properly.

Finally, you can set the component's live preview to the SWF you created. Open the library, right-click the component, and select Component Definition. In the middle of the Component Definition dialog box, click the Set button to the right of the Live Preview box, as shown in Figure 11.9. In the Live Preview dialog box that opens, simply set the text field to the file path of the SWF you want to use and make sure that the live preview is embedded into the component.

click to expand
Figure 11.9: Add the live preview SWF to the component through the Component Definition dialog box.

That is the basic outline of how to create a live preview. Unfortunately, live previews are generally quite complicated, and the worst part is that most users will turn off the live preview option. Only consider creating a live preview if it is a very simple component to do so, and if the rendering of the live preview uses only the simplest commands. Usually, if users sense their authoring environment is being slowed down by something unnecessary, they will simply disable it.

The Hidden Power of Flash Components
The Hidden Power of Flash Components
ISBN: 0782142109
EAN: 2147483647
Year: 2002
Pages: 111 © 2008-2017.
If you may any questions please contact us: