Internet Commerce

Partners & Affiliates

Developer Channel


Featured Flash FLA
Gallery Downloads 11401 Flash Movies | 5 New Flash Movies Added
What's New | Top 100

Featured FLA

»  Author: Nick Kouvaris
»  Title: Znax
»  Description: Znax is a board game. Click 4 tiles of the same color and form squares as big as you can. You will erase all the tiles inside the square and collect points. Get maximum score if you make a square with game edges.
»  More by: Nick Kouvaris


Random FLAs | Add Flash Movie
Featured Flash Site
Gallery Downloads 4941 Flash Sites | 1 New Flash Links
What's New | Top 100 Flash Site

Featured Site

»  Author Agence WOP Digital Agency
»  Title: Electricdrum
»  Description: French WOP Agency, 3D websites, Flash (Papervision, Away 3D), event or institutional projects. The agency operates on all digital projects: consulting, design, graphic design, development, online communication. The WOP agency follows you on the implementation of original, creative and optimized digital projects.


Random Links | Add your own Flash Related Links
Flash Tutorials 1481 Tutorials 7 New Tutorials Added!
What's New | Top100

» How To Make A Simple Animation Using Christmas Clips
» Simple Step by step flash game tutorial Spot the diffrence
» How To Make A Moving Text Slide
» Create Flash Banner With Text Float Effect
» How To Make Zoo Photos Slideshow
» How To Make A Dolphin Photos Slideshow
» How To Make A Fathers Day Slideshow
» How To Make A Transparent Background of Your Flash File
» Create Flash Banner With Text Disco Light Effect Today we will introduce you a Text Disco Light eff
» Unknown Tag: Title10
Random Tutorial | Add Site


Tutorials Home What's New Top Rated Submit myTutes Random!

Search Tutorials


Tutorials Tutorials » Getting_Started

Categories Flash MX 2004 Layers and Animation Explained
Author: Oleg Lazarenko | Website: http://www.metamorphozis.com |

 
Page 1
1

Flash MX 2004 Layers and Animation Explained

This tutorial is for people who want to know the basic techniques of layers manipulation and animation creating.

a. Launch Flash MX 2004

b. Create new Flash file. Click File> New...
Screenshot

c. Select Flash Document in a new window
Screenshot

d. Now let's take closer look at the panels you get by default in your Flash program window. The "Timeline" (at the top of the window) and "Properties" (at the bottom) panels are most important in this tutorial.
Screenshot
Screenshot

e. e. Basic operations with layers: add a layer and rename it.
To add a new layer click the "Insert Layer" icon
Screenshot
To rename a layer, double click a default layer name (for example "Layer 1" label) and when it changes to the text input field type in your new name. Name Layer 1 to "Shape" and Layer 2 to "Motion". There are two types of animation available in Macromedia Flash MX 2004: Shape and Motion. Inside the "Shape" layer we will make Shape animation and inside "Motion" layer – Motion animation.
When you use Shape animation you change one shape to another and Motion animation allows you to change the place and size of single object. You will see what I mean after we complete the tutorial.
Screenshot Screenshot

f. We start with the Motion animation. Select "Motion" layer and draw a simple rectangle shape in it, then count 10 blank frames from the first keyframe and right click on the 10th blank frame. Select "Insert Keyframe" option (picture A). Now you have 2 keyframes and 8 frames in the "Motion" layer (picture B).
Screenshot
Picture A.
Screenshot
Picture B.

g. Click on the shape, drag and drop it on the other place anywhere on the working area.
Screenshot

h. Click on the "Motion" layer in the right "Timeline" panel to select all frames in that layer. Then right click selected frames and press "Create Motion Tween" option (picture C). If everything was done correctly you will see the blue arrow from the first keyframe to the last keyframe, like we have on the picture D.
Screenshot
Picture C.
Screenshot
Picture D.

i. Press "Ctrl + Enter" and enjoy your motion animation. You may observe how your shape travels from first starting point of the first keyframe to the last point, which is the last keyframe.

j. Now select the first frame of "Shape" layer and draw a rectangle shape (note: place the second shape so that it was not hidden under the motion animation)

k. Count 10 blank frames from the first keyframe and right click on the 10th blank frame. Select "Insert Keyframe" option. Just like we did for motion animation.
Screenshot

l. Click on the last keyframe to select rectangle shape, press "Delete" to get rid of the rectangle shape from the last keyframe.
Screenshot

m. Select the last blank keyframe from the "Shape" and draw an oval shape with the Screenshot "Oval Tool"
Screenshot

n. Click on the "Shape" layer to select the whole objects within the layer. Press "Ctrl+F3" to open "Properties" panel.
Screenshot
Screenshot

o. Click on the selection box called "Tween" and select "Shape" option. The green arrow must appear between the first and last keyframe.
Screenshot
Screenshot


Press "Ctrl+Enter" and enjoy your animation. Congratulations! You have created Shaped and Motion animation.

Click here to download source fla file.

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

You may reprint this tutorial for free as long as the content, About the Author sections and all links remain unchanged.

1

» Level Basic

Added: : 2004-12-13
Rating: 8.97 Votes: 96
Hits: 631
» Author

About the Author: Oleg Lazarenko
Production manager of
Metamorphosis Website Design Studio -
Custom design, Website Templates,
Web design Articles and Tutorials.

» Download
Download the files used in this tutorial.
Download (0 kb)
Get conversion and unzipping tools for PC and Mac here!

» Forums
More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.
10 9 8 7 6 5 4 3 2 1
Read or Post Comments