Using advanced live preview

The most powerful feature of the 3DPlane is the "advanced live preview". It allows you to see the final picture of the 3D component directly in the Flash editor. Let's see how useful it is.

1. Start a new Flash MX movie. Save it as 'butterfly.fla'.

2. If you are using Flash MX, please skip to step 3. If you are using Flash MX 2004: Copy the file called '3D PlaneLive.swf', that was included with your download, and paste it in the same folder where you just saved 'butterfly.fla'. This file is necessary for the advanced live preview to work in Flash MX 2004. You do not need to upload the '3D PlaneLive.swf' file when you publish your site. It is used for the design process only.

3. Change the FPS to 30 to see smooth 3D motion (advisable for all movies in this tutorial).

4. Create a new MovieClip. Give it a name and linkage name 'mc1' as shown below.

5. Add any content into the 'mc1' movieclip. Let it be a bitmap of a butterfly in this case.

6. Go back to your main timeline and drag an instance of the 3DPlane from the Components Panel and drop it onto the stage.

After you add the 3DPlane component in your movie but before you enter the target movieclip name in the 3DPlane properties, you need to compile your movie (create an swf file). This is necessary in order to share your library objects for the live preview. You can do this simply by testing your movie inside of Flash (Ctrl-Enter on Windows or Alt-Enter on Mac).

7. Click on the 'content' text field and enter the movieclip linkage name ('mc1').

You should now see the content of your 'mc1' movieclip on the stage.

Test your movie again to check that the final movie looks the same. Try drag and spin the butterfly with your mouse to check that the 3D engine is working correctly.

You can change the location of the "advanced live preview" files on the third page of the 3DPlane properties (button '3' on the left side of the the 3DPlane properties window)

The following parameters can be set:

Library: This is the full path and name of the swf file for the current movie.
Refresh live preview: Press this button after there has been a change in the target movieclip (for example, if you changed the picture in 'mc1'). After making such changes, create a new swf (by testing the movie) and then press this button to load the updated advanced live preview.
Get last compiled swf file name: Press this button if the source of the linked movieclip has been changed. For example, if you download the butterfly.fla source, the swf file located at 'file:///C|/Work/Components/Plane/documentation/butterfly.swf', does not exist. In this case, first test the movie and then press this button. The library property will be automatically updated with the correct file name and path and the live preview will be refreshed.

Note: Although the 3D component in this example looks like butterfly on the stage, it is still rectangular in shape (the actual shape is defined by a dashed blue line). You can change the dimensions of the component preview area by using the Free Transform Tool, however this does not change the dimensions of the 3D object itself. To change the dimensions of the 3D object, use the 'scale' property in the 3DPlane properties panel.