Keyframes in Flash CS3

[This is Step 15 of the Flash CS3 Animation Tutorial]

Keyframes in Flash CS3 is an important concept to understand.

The Timeline, Frames and Keyframes

The timeline consists fo many layers and many frames within each layer. In the picture of the timeline below the 10th frame of the layer "Train" is selected.

The first frames of all the layers are keyframes and are indicated by a gray background and black dot. The remaining frames are all blank.

Continuing with the tutorial let us begin to animate the wheel in the "wheel animation" movie clip by creating new keyframes within the movie clip's timeline.

Getting into the "Wheel Animation" Symbol

Let’s begin by getting into the symbol “wheel animation”. To do this:

• Double click the wheel on the stage.
  
  
• You will see the main stage elements fade out slightly and only the wheel remains clear.
  
  
• Also, you will see the movie clip symbol name “wheel animation” appear next to “Scene 1”.
  
  
  
  
• You can always click on “Scene 1” to go back to the main stage area.

Animating the Wheel - Part 1

Now let’s make the wheel go round.

• Click on the 5th frame in the timeline of the movie clip "wheel animation".
  
• Insert a key frame (right click + “Insert Key Frame”)
  
  
• Now rotate it 90 degrees counter clock wise
  
  Modify > Transform > Rotate 90 degrees CSW
  
  
• Though it might look like the wheel is the same, Flash knows that the wheel has rotated and you will be able to see the results in the animation later.
  
  
• Insert another key frame at the 10th,15th and 20th frames rotating each time.
  
  
• Take a look at the wheel animation.
  Control > Test Movie
  
  
• You will notice that the wheel is turning but the movement is rather jerky.

Go to Step 16 >>

---

 

WEBSITE DESIGN TUTORIALS

Website Building Tutorial
Photoshop CS3 Tutorial
Fireworks CS3 Tutorial
Fireworks CS4 Tutorial
Fireworks CS5 Tutorial
Dreamweaver CS3 Tutorial
Dreamweaver CS4 Tutorial
Dreamweaver CS5 Tutorial
Flash CS6 Tutorial NEW!
Flash CS3 Animation Tutorial
Flash CS3 Website Tutorial (ActionScript 3.0)
Flash Catalyst Tutorial
Web Course Design Tutorial

Best Website Building Software
Website Templates Tutorial
All-in-one Website Tools
Web Design
Website Check Up
Blogging with Wordpress

Website Traffic
Website Traffic Tactics
Making Friends with the Search Engines
Article Marketing
Web 2.0 Business Networking
Successful Email Marketing