Flash CS4 3D Tutorial Part II

Get Adobe Flash player

Defy the Gods and create a 3D object in Flash CS4. This tutorial is the sequel to Flash CS4 3D Tutorial Part I where we learned how to work with planes in 3D space. If you are already familiar with working with planes and you’re here to make a cube, then read on.

You can either download the completed example , or start from scratch. Its up to you.

Prerequisites :


Flash CS4 3D Tutorial Part II – 3D Object Creation & Rotation

    1.Open Flash CS4 and create a new Flash File with Actionscript 3.
    2. Using the rectangle tool, create a square on the stage. Fill it with a gradient and use the properties window to make it 180 pixels by 180 pixels. Then, on a new layer, create a text box in the center of the gradient. type FRONT in the text box. Select all and align center to stage using the align window.
    3. Hit F8 to create a symbol and name it front.
    4. With front still selected, press F8 again and name the new movie clip front_panel.
    5. With front_panel selected, press F8 again and name the new movie clip cube.

Convert to symbol and use center registration.

    6. Double click cube on the stage and create a new layer inside. Name the new layer, rear. name the first layer front.
    7. Copy the contents of layer front and from the menu select Edit > Paste in Place (command – shift – v) to the new layer named rear. Make sure rear layer is beneath front layer.
    8. In the Library window duplicate the front_panel movie clip.
    9. Rename the movie clip front_panel copy by selecting rename from the Library options and name it rear_panel.
    10. Double click on rear_panel movie clip inside the Library so you are editing the contents.
    11. Click on the movie clip named front in the Library and duplicate it. Rename the duplicated clip rear and double click on it in order to edit its contents.
    12. Change the text in movie clip rear to say REAR.
    13. Double click on the movie clip named cube inside the Library so that you are editing its contents. Click on the movie clip on the rear layer and using the swap button in the properties window, swap the movie clip with the movie clip named rear_panel.

    PRESTO – nothing! Well seemingly nothing. Now just double click on the rear_panel on the stage – so that you are editing its contents. Click on the front movie clip and again using the swap button in the properties window, swap the front clip with the rear movie clip you had created earlier.

    10. Navigate to the cube time line by clicking on the cube link in the navigation menu under the time line.

Fig 2.

Double click on a movie clip to edit its time line.

    12. Click on the front_panel movie clip and in the properties window set the x, y and z positions accordingly (0, 0, -90).
    13. Hide the front layer and then click on the rear_panel movie clip on the rear layer. In the properties window set the x, y, and z positions accordingly (0,0,90). Also scale the Horizonal scale of the rear_panel to -100% in the transform window. Make sure Cosntrain is off.
Fig 3

Change the Scale to -100% to verticaly flip a clip.

Tip: This keeps the “virtual” center point our 3D object in the middle of all sides.

    14. Click on Scene 1 button below the timeline to navigate back to the main time line. name the layer with cube on it, cube and delete any extra layers with no content.
    15. Hold your mouse over the cube layer and in the time line – on Frame 36 – right click and choose add frames.
    16. Right click again on the front layer and choose motion tween.
    17. Right click again on the front layer and choose 3D tween.
    15. Select the Cube. In the MOTION EDITOR panel change the rotation Y to 360 degrees. It is important that your frame indicator be at the last frame of your tween (frame 36).

    16. Preview the movie.

Our cube should have a front and a back. Even though we’ve changed the Z depth of these objects they still fail to swap depths when the parent object rotates. This is because Flash is really not able to create 3D objects but rather a series of 3D planes. While the geometry is correct on each plane in terms of its angles in relation to proportion, it is up to us make the sides actually swap depths in z space. This is a bit tedious on the timeline but the fact that it is indeed do-able is quite remarkable.

Fig 4.

Flip the back movie clip so that it appears correctly on the rotation.

Adobe Flash CS4 now features the split motion feature to split the frames of a 360 degree animation. You can then move the split animation into new layers prior to swapping their depth. I prefer to do it manually by creating the panels in an object movie clip and then changing the depths of the panels inside the parent movie clip.

Swapping Depths of Panels inside 3D objects
Our challenge is for every 90 degrees the side that should be in front is still behind. A 360 rotation can be broken down into 4 equal parts of 90 degree angles each. In essence you have to swap depths 4 times, once for each angle or face of the cube you show. Subsequently showing the top and bottom of the cube, in an X rotation would be that much more complicated to create in the time line.

Simple math tells us 360 / 4 = 90. So for each 90 degrees I need to split the animation. Where would 90 degrees fall in a 36 frame animation? 36/4 = 9. So we need to swap depths every 9 frames. First we’ll set the FPS at 18 so that each 90 degrees will take 1/2 second and the entire animation will take 2 seconds.

17. Click on the stage and change the FPS to 18 in the properties window or on the bottom of the time line.
17. Double click on our cube movie clip inside the Library so that we are now editing inside.
18. Add 9 frames to the two layers inside the cube movie clip, front and rear.
19. Create two new layers, and option-drag the contents of the first two layers onto the two new layers
20. Name them accordingly from top to bottom: front 0, rear 0, front 180 and rear 180 from top to bottom and their contents should match their names if you dragged the top two layers into the bottom two layers.
21. Now swap the levels of layers front 180 and rear 180 so that rear 180 is on top of front 180 but beneath rear 0.
21. option-drag the contents of the first two frames unto itself at exactly frame 26. Then select frames 10-25 and clear frames.
22. Push the contents of rear 180 and front 180 to frame 10. Fig 5
23. Preview the movie.

Now you should have the front and the back seeming to swap depths when they rotate.

For now I’ll just show you how to create one side and you can duplicate the process to create the other side on your own.

    24. In the Library, duplicate the front movie clip.
    25. Rename the clip side. Double click on the side movie clip in the Library so that you are editing its contents and edit the text inside the text box to read SIDE.
    26. In the Library duplicate the front_panel movie clip. Name the copy side_panel.
    27. Double click the side_panel movie clip in the Library to edit its contents on the stage.
    28. Click on the front movie clip on the stage (if it is not already selected) and using the swap button in the properties window, swap the front movie clip with the newly created side movie clip.
    29. Navigate to the cube time line by double clicking on the cube movie clip in the Library window.
    30. Inside the cube timeline create a new layer named side 0. Move the layer above the rear 0 layer.
    31. Drag an instance of the side_panel onto the stage and using the transform window, change the Y rotation to 90 degrees and the Horizontal Scale to -100%. in the properties window position the movie clip 90 pixels to the right or x: 90 y:0 z:0.
    32. Preview the movie.

Now you have three sides that rotate. All looks good until you get past 90 degrees. As you can see the illusion is broken immediately the side is obstructed by the front at about frame 9.

Figure 6.

Create a side.

The solution to this is to put 4 copies of each side to represent its turn in the spotlight and order the layers for those 9 frames in the z depth that you want them to be. Basically you need to stagger and repeat this process until you have something that looks like Figure 7 below.

Figure 7

Stack the sides according to the number of frames.

Try this on your own until you have 4 sides rotating and depth swapping.

Taking it further you can create a top and a bottom as well. However if you are just going to rotate on the Y axis, then you don’t have to show the top and bottom.

IMPORTANT: When using a time line solution for depth swapping you take a risk of slower computers frame rates dropping below desired levels due to the intensity of the cpu to make the perspective. In other words your sides may not appear to swap depths correctly after wa while, or even right away on slower computers.

The computer’s processing speed (CPU) has a lot to do with how fast this animation is rendered and played back. A better solution would be code based depth swapping – perhaps a line of code that swaps the depths of the sides (or removes and adds a child) based on a conditional that looks for rotation.

CS4 definitely can make some product pages on major retail sites appear to have a bit more depth and perspective without having to get involved in complex third party class structures, like PaperVision 3D. However, if you are thinking about working with .dae files exported from Blender or Maya, PaperVision 3D is still your best option based on the sheer limitations of the way Flash and Flash Player 10 handle z-depth.

I hope you have enjoyed this tutorial and I look forward to your feedback.

Posted on April 26, 2010 at 2:45 pm by Runtime · Permalink
In: CS4, Flash, Tutorial, animation, design · Tagged with: , , , , ,

Leave a Reply

You must be logged in to post a comment.