Interactive Animator » Flash CS4 3D Tutorial Part I

Flash CS4 3D Tutorial Part I

Get Adobe Flash player

Prior to CS4, if you wanted simple plane rotation in Adobe Flash, it likely had to be done by incorporating an open source project called PaperVision3D. This often left talented designers standing behind developers with their hands on their hips. Now simple 3D transformations can be created in the time line of Flash CS4. You don’t need to write any code what-so-ever to achieve stunning, smooth 3D rotations.

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

Prerequisites :
None.

Level:
Beginner.

Flash CS4 3D Tutorial Part I – 3D Plane rotation
Creating Simple Plane Rotations using the 3D Transformation Tool

    1. Open Adobe CS4.
    2. Import a bitmap or vector of your choice to the stage.
    3. Click on the object and hit F8 (convert to symbol) and create a movie clip.
    4. Name it logo and make sure the registration is centered and close the convert to symbol window.
    5. Hit F8 once again and this time name the clip Item. Close the symbol window.
    6. Navigate back to the stage level and click on the Item movie clip so that it is selected.
Fig 1

Fig 1

    7. In the time line go to frame 31 and right click to check activate the 3D tween option.

Fig 2

    8. In the Motion Editor click on the Rotation Y property and change it to 360 degrees.
    9. Preview the tween by scrubbing the frame indicator and dragging it from frames 1 – 31. You should see your logo rotating completely around.
    10. Click on the stage. Go to Properties. Set the FPS to 31 for a smoother animation.
    11. Publish your swf.

Easing
If you go to the bottom of the Motion Editor you will see Eases available for time line animation. This is a simple way of easing your spinning logo so it appears more fluid or natural.

Add Easing to your rotating plane

    1. Make sure you are on the main time line.
    2. Go to frame 31.
    3. In the Motion Editor, under Eases, change the value of your simple ease from 0 to +100 or -100 depending on whether you want to ease in or out of your spin.

Mess around with the settings to see the difference in your rotation. Choose the setting that works best for you.

Flash CS4 Camera
Flash now incorporates a hidden camera to handle z depth much the way PaperVision3D does. This does not mean there is no need for PaperVision3D anymore, because I’m sure there is. I doubt that Flash CS4 has the ability to import .DAE files exported from Maya or Blender 3D rendering packages, for example.

The 3D tool is still a really huge addition to Flash because it now has the ability to build 3D objects much like you would in After Effects. Now this is easily incorporated into your interactive animation giving Flash animators and developers another trick up their proverbial sleeve.

One thing you should realize is that Flash CS4 is not really authoring in 3D space like Maya or Blender, but in fact a 2D space and the camera added in CS4 is creating the Z depth.

There are ways for example to move your object in 3D space despite the fact that we are indeed sitting on a 2D plane much the way After Effects handles 3D.

Global 3D tranformation tool

When you select your 3D object tool, there is a pop down called the Global 3D tranformation tool. If you select your Object on the stage, you will be able to move the object in 3D space even though you have 3D animations already going on inside the movie clip you are transforming.

Fig 3

Fig 3

Try messing around with that on your own and see how it effects the Motion Editor.

Well, that about wraps it up for this brief (and late) tutorial on Flash CS4 3D Plane Rotation. In future tutorials I will cover creating perceived 3D objects in Flash CS4 and rotating them as well.

Posted on April 2, 2010 at 1:26 am by Runtime · Permalink
In: ActionScript 3, CS4, Flash, animation, design · Tagged with: , , , , ,

2 Responses

Subscribe to comments via RSS

  1. [...] : The sample file provided is from Flash CS4 3D Tutorial Part I. You may want to start that tutorial prior to this one, but it is not necessary if you are just [...]

  2. Written by Interactive Animator » Flash CS4 3D Tutorial Part II
    on April 26, 2010 at 2:45 pm
    Permalink

    [...] 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 [...]

Subscribe to comments via RSS

Leave a Reply

You must be logged in to post a comment.