Animation Basics
_______________________________________________________________________
Basics are explained here based on Macromedia Flash MX 2004. The options may have slight variations with lower/higher versions.Iam not trying to explain about history of animation before Disney. But Iam going to share the principles of animation and all other aspects which required to animate objects using Flash. Animation is nothing but adding meaningful movement to an object to convey a message.
Flash is well known for its Intros that are required to express Concepts/themes of the websites and industries.Static Graphics sometimes may not play an important role to convey the exact concepts of the subject. An animated graphics can speak volumes. Hence Flash is a strong platform to be used for animation purpose. It is a vector based animation software. We can animate anything. Graphics like Icons, logos, banners, buttons and webpages can be created with Flash. It is very user friendly and the tools and options are very easy to understand.
Animation Priniciple
When we link together series of drawings with slight difference and all the drawings registration points are fixed, if all the drawings are moved at the rate of 24 frames per second (fps) it simulates a smooth movement. This is because of human eye’s persistance of Vision. Eye when exposed to series of drawings one by one at prescribed speed, it retains previous images hence the any movement of difference in subsequent drawings will follow the previous images.
Flash Mx 20004 - Introduction to Timeline
|
When you start Flash Mx 20004, the Playhead (small red vertical rectangle box) rests at frame number 1 and the fps (frame rate per seconds) box indicates 12fps rate and 0.0s box is the time taken by play head to reach any destination frame. The defaul canvas size is width = 550 pixel and height = 400 pixel and the background color will be white. These settings can be changed in Document Propety Dialogue box any time during animation process.
Tip: You can access the Document Property Dialogue box by double clicking on Frame Rate box.
The Playhead can freely be moved from begining to last frames. If no frames are existing the Playhead can’t be moved. Open Flash and Click on Playhead (small read rectangle) hold and try to drag. It won’t move.
Give a Try
Right click on Frame number thirteen and chose insert frame from dropdown menu. You can see small white rectangle is inserted in frame No.13. The Playhead also moves to frame 13 and rests there. Now you can drag the Playhead from 1 to 13 and 13 to 1. By moving Playhead forward and reverse you can see the animation changes on stage.
Drag and place the Playhead at last frame (Frame 13). Observe the elapsed time (small box beside fps box). It will show 1.0s. That means the Playhead took 1second to play 12 frames. Sicne it is resting on Frame No.13, the played frames are 12fps. You can change the Animation frame rate as per the speed required for the animation.
The Small blank (white in color) circle on first frame indicates Blank Key Frame. If no objects are drawn on stage for that particular frame, than the key frame will be called as Blank Key Frame. If objects exists on stage for that particular frame the circle will appear as black spot (filled with black color).
There are only three types of Frames:
1. Key Frame (appears as black dot in the Timeline)
2. Blank Key Frame (appears as white dot in the Timeline)
3. Frame. (appears as small vertical rectangle in the Timeline)
That’s all about animation frames in Flash. No more frame names to remember. Simple and easy to learn and remember.
Frames in Flash
(1) Key Frames : The first position of any object to be moved in subsequent frames can be called as First Key Frame. The displacement and action of objects occurs when the play head reach the end Key Frame. To create a Motion to any object you need two key frames. One at first position and another at last which is last key frame. To insert a Key Frame, right click in the layer frame number and chose “Insert Key Frame” from the dropdown options. If any Key Frame is left without drawing object on the stage than the Frame Can be Called as Blank Key Frame. Key Frames appears as black dot indicating that some graphic is drawn on stage for that particular frame. Keyboard short cut key for inserting Key Frame is F6.
(2) Blank Key Frames : Blank Key Frames are those which do not have any Graphics or Objects in it. Blank Key Frames are useful to block certain objects disappearing from the scence which are not required further to show in subsequent animation. Blank Key Frame appears as small white circle which indicates that it does not contain any object drawn in it. To insert a Blank Key Frame follow the same procedure as of inserting key frame but select Insert Blank Key Frame from the drop down options. Action Scripts are attached to Blank Key Frames. If you see a small “a” over a Blank Key Frame, it indicates that some actions are written for the subsequent animations. To see what actions written on that particular Blank Key Frame, Clcik on the frame and open the Actions Panel (Window >> Development Panels >> Actions or Keyboard shortcut F9). Blank Key Frames are useful when you create some flashing effects. A blank Key Frame between Two Key frames swith offs the object visibility for a second hence certain effects can be designed in animation with Blank Key Frames. Keyboard short cut key for inserting Blank Key Frame is F7.
(3) Frames : To enable the visibility of the object drawn in the Key Frames upto certain frames in the Timeline you need to insert a frame. Example: If Frame N0.1 holds a Car graphic and the Car graphic is to be seen till Frame No.15, than insert a Frame at Frame No.15. Frame appears as small vertical rectangle in the Timeline. To insert a Frame the dropdown menu optiong is insert Frame. Keyboard shortcut is F5. Objects drawn on the stage can’t be seen if a Frame is missing at the end to that particular Layer.
Above all briefly Explained with the help of Image Below.
Image 1 & II : Explanation:
The Car animation done in two frames. Top Layer Named as Car and bottom layer Named as Path which is a black line underneath car. When the Playhead kept at Frame No.1, Car Graphic reamains extremly left of the Canvas. The Next Keyframe inserted at Frame No.15 and Car Position shifted to extreme right of the Canvas (see Image-2). The arrow between Frame No.1 and Frame No.15 indicates Motion Tween. When you move Playhead the Car Graphic also moves on stage.
Image-I
Car Layer :Car Graphic positioned at Frame No.1 and end Keyframe is at Frame No.15.
Path Layer:Path is Drawn on Key Frame No.1 and a Frame inserted at 15.
Image-II
Car Layer :Car Graphic shifted to Frame No.15 and Motion tween created between 1 and 15.
|