Bonus Tutorial 5: Three-Dimensional Product Display, by Joyce J. Evans

< Day Day Up >

Overview

This tutorial presents a great technique for displaying merchandise from different viewpoints. In this project, you view a fishing lure by passing your cursor over it. As the cursor moves, the lure turns 360 degrees.

The photos of the lure and the background were provided by Todd McPhetridge of Cobalt Graphics, Inc (www.cobaltgraphics.com). The finished project can be seen in the following figure (the lure-done.swf file on the CD-ROM). To complete this project, follow these steps:

The finished lure project

Open a new movie. Double–click Layer 1 and name it background. Choose File ® Open as Library, and choose lure.fla from the Bonus Tutorials\FLA_360 folder. You now have a library open with the assets you need for this project.

Drag a copy of the background symbol from the Library and position the image over the Stage.

You use a lot of symbols in this demonstration; briefly review how they are made. A copy of the original .gif is opened on the Stage. Make any necessary changes. (I changed sizes.) Choose Insert®Convert to Symbol (F8). The background and lure images use a Graphic behavior.

Note

You can use any background you want; this one was prepared and sized in Fireworks. The photos of the lure were cropped and sized in Fireworks as well. If you are using this technique for a project display, you may want to think about using a plain colored background and possibly a small movie to display in a pop–up window.

Lock the Background layer, and click the plus sign to add a new layer. Name this layer lure Next you make a Movie Clip for the lure.
Choose Insert ® New Symbol, name it Lure, and choose the Movie Clip behavior. You are now in Symbol Editing mode.
Double–click Layer 1 and name it pictures. From the Library, drag the symbol named lure1.
Open the Align panel (Window ® Panels ® Align) and select To Stage. Click Align Horizontal Center and Align Vertical Center.
Select Frame 2, and choose Insert ® Blank Keyframe. Drag a copy of lure 2 from the Library. This symbol needs to be flipped. Choose Modify ® Transform ® Flip Horizontal. Align as in Step 5.
Repeat Step 6 (except for the transform command) for all eight lure symbols, placing each one on a new frame. (Lure 3 should go on Frame 3 and so on.) When you are done, move the play- head to see the lure's movement.
You need to add some simple actions now. You are still working on the lure Movie Clip. Add a new layer and name it actions Select Frame 1 and open the Actions panel (F9). In the Actions panel, open the Movie Control category and double–click Stop.
Select Frame 2. Insert a new keyframe, and double–click Stop. Repeat this step for Frames 3-8.

You might wonder why you have added all these stop actions. A Movie Clip plays independently of the timeline. By placing a stop action into each frame that also contains a graphic, you can control exactly when each graphic in the Movie Clip appears. The following figure shows the Movie Clip's timeline.

The timeline of the lure Movie Clip
Save your file and click Scene 1 to return to the stage.
Close the imported Library and open the Library for this movie (F11). Drag a copy of the lure movie symbol from the Library onto the Stage, and align it to the center of the Stage.
With the Movie Clip still selected, you need to give it an instance name so you can talk to it later with ActionScript. In the Property inspector, click <instance name> and type lure. Press Enter (Return).

< Day Day Up >