Creating Components > Creating a Live Preview movie |  |

Creating a Live Preview movie

A Live Preview movie provides an onstage representation of the component in the authoring environment. It provides a way for you to see how the component looks with other movie elements without testing the movie. The representation does not mirror the runtime functionality of the associated component but rather provides a graphical placeholder in the Flash authoring environment. A Live Preview file also allows you to update instances on the Stage in the authoring environment as you adjust properties in the custom user interface. For more information, see Working with components in Live Preview.

To create a Live Preview movie for a component, you can either make a copy of the component FLA file or create a new FLA file. You then make it look and behave exactly like the component itself, eliminating any background graphics and adding ActionScript to pass the parameter values to the Live Preview movie during playback. From this FLA, you create a SWF movie. The SWF movie displays the component when it is placed on the Stage during authoring, showing all of its properties. When the user updates the component's properties, they are also updated in the Live Preview SWF.

To create a Live Preview movie:

1 | Create a new document and import the library from the document that contains your component.
2 | Drag an instance of the component from the Library panel to the Stage.
3 | Resize the Stage so it is the same size as the component.
4 | Create a new layer and name it Actions. Add ActionScript as needed to update the component when a user updates the component parameters.
| For example, in the "Creating components in Macromedia Flash MX" tutorial on the Flash Support Center, the following code is written to update the color and font of the button label when a user updates the parameters for the component:
    myTextFormat = new TextFormat();
    function onUpdate (){
    	buttonLabel.textColor = xch.labelColor;
    	myTextFormat.font = xch.labelFont;
    	buttonLabel.setTextFormat (myTextFormat);
    }
| The label content is updated using an`xch.label v`ariable that was assigned to the text box in the Property inspector.
5 | Save the file.
6 | Choose Control > Test Movie to create a SWF file for the preview movie.