Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Flash Tutorials & Resources > 3D Animation in Flash CS5   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

3D Animation in Flash CS5

This is a tutorial on how to rotate objects in a 3D motion using the 3D Rotation Tool in Flash CS5.

Please note:
1. You need to have
Flash Player 10.0 installed to view the Flash animation.
2. Adobe Flash CS5 must be installed in your system to work with the downloaded *.fla file.

Before starting with the actual rotation of an object in 3D, follow the following steps to understand the concept and the basic tools and utilities in Flash CS5 that will be used to go through the tutorial.

  1. Start Flash CS5 using the shortcut icon from your systems desktop.

  2. Choose ActionScript 3.0 under the Create New area to load a new file that uses Actionscript 3.0 as its basics.

  3. Choose SMALL SCREEN from the interface type drop down list. The interface type drop-down is available on the right of the menubar area, refer Figure.     figure_1.jpg
  4. Invoke the Rectangle Tool from the Tools panel and create a rectangle in the stage area ( the stage area is the white area in flash where we do all of our artwork). Make sure that the Height of the rectangle is more than its width.

  5. Select the rectangle from the stage area and choose Window > Transform from the main menubar; the TRANSFORM options dialog box is displayed, refer Figure.

    figure_2.jpg

    The TRANSFORM dialog box is used to transform the selected shape in the stage area. In this case, the options in this dialog box are not highlighted. To make them work we need to transform the selected shape into a movie clip.

  6. Double-click on the rectangle created in the stage area and choose Modify > New Symbol from the main menubar; the Create New Symbol dialog box is displayed, refer Figure.

    figure_3.jpg

  7. Name the symbol as Box1_mc and choose the OK button; the selected shape is converted into a movie clip.

    The name Box1_mc is followed by mc which means that it is a movieclip. To name a movieclip follow it with ‘mc’, in case of button use ‘btn’. This naming convention help;s a lot while doing actionscripting in flash.

  8. Select the Box1_mc movieclip from the stage. Press and hold the ALT key and make a duplicate copy of it. Align them together as shown in Figure.
    figure_4.jpg
  9. Select the left box and in the TRANSFORM dialog box set Y = -40 under the 3D Rotation area and for the right box set Y = 40 and align them, refer Figure.

    figure_5.jpg
  10. Press CTRL + a to select both the objects in the stage area. Next, try playing with the x, y, and z values under the 3D Rotation area. On doing so, the objects rotate in the 3D world, refer Figure.

    figure_6.jpg
  11. Select the first keyframe in the timeline, right click on the selected frame a flyout is displayed. Next, choose Create Motion Tween from the flyout.

  12. Move to the last frame and drag it to frame 55 and choose Window > Transform from the main menubar; the TRANSFORM window is displayed. Try changing the values in this window; the result is displayed on the stage area.

  13. To test the animated movie, hold down the CTRL key and press ENTER; a new window is displayed showing the published flash animation.

Using this concept and the traditional timeline animation you can animate any shape in 3D by just setting the keyframes.


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Looking for high-quality Flash Website Design? Choose from over 6000 templates!

Gorgeous Page Roll Image Transition Effect in Flash

Creating Page Curl Transition

Creating a Rotating 3D Planet in Flash

Creating Realistic 3D Planet

Best Flash Photo Gallery Website Templates

Best Flash Photo Gallery Website Templates

Burning Image Effect in Flash

maskmn_image055

Realistic Rippling Water Animation in Flash

r_water

Awesome 3D Flash Website Templates

Awesome 3D Flash Website Templates

 

Featured Template
Template # 58574
Type: Bootstrap
Price: $59

Flash Photo Galleries