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 > Creating a Simple Animation in Flash CS5   

Flash Tutorials

Basics

Animation & Effects

Actionscript

Creating a Website

Miscellaneous

Flash Articles

Free Flash Resources

Other Flash Resources

Creating a Simple Animation in Flash CS5

In this tutorial, you will learn how to create a simple biker animation in Flash CS5 with a snowfall effect in the background. This tutorial will teach how to create frames, keyframes, blank frames & motion tweens. You will also learn how to use the deco tool to create a simple snow fall effect.

We will learn how to create tha nimation you see above. Let's get started!

Open the FLA File

1. Download & Unzip the tut_files.rar.

2. Choose File > Open from the main menubar; the Open window is displayed.

3. Choose the start.fla file from the Open window and choose the Open button; the file to be used in this tutorial is opened.

By default, a biker is placed in the stage area, as shown below.

2.JPG

4. Next, choose File > Import > Import to Stage from the main menubar; the Import window is displayed. Navigate to the folder that you downloaded and select the background.psd file. Choose Open to import; the Import “background.psd” to stage window is displayed, as shown in the figure below.

*.psd is the file extension for a photoshop file. In Flash CS5, you can import a photoshop file directly to stage.

5. Select the left_tree from the top left of this window; its corresponding parameters are displayed on the right.

6. Next, select the Loseless option from the Compression drop-down list in the Publish Settings area.

Tip! The Loseless option maintains the quality while publishing the final animation.

3.JPG

6. Similarly, set the same parameters for front_tree and background icon. Now, choose the OK button; the images are imported to the stage area as shown in the Figure below.

4.JPG

On importing the images on the stage, the existing biker movie clip is hidden behind.

7. Choose Window > Timeline from the main menubar if the TIMELINE panel is not displayed.

The layer named biker is at the bottom of all the layers in the TIMELINE panel.

8. Select the biker layer and drag it above the layer named background; the biker will bevisible in the stage area, as shown in the figure below.

5.JPG

Adding Motion Tween to the Biker

1. Select the biker movie clip from the stage area and move it to the left, out of the stage area; as shown the figure below.

6.JPG

The biker movie clip is moved on the left, out of the stage area, so that while publishing the final animation the biker appears to enter into the stage after an interval of 2-3 secs.

2. Select the keyframe in front of the biker layer in the TIMELINE panel. Make sure the keyframe is selected and right click over it; a flyout is displayed. Choose Create Motion Tween from the flyout; the motion tween is added to the Timeline in the biker layer, as shown the figure below.

7.JPG

You can identify that a particular layer is having a motion tween added to it by the box shaped symbol  at the front of the layer name and the blue background colour of that particular layer in the timeline.

Everytime you add motion tween to a layer, the number of frames added in the timeline will play the animation for 1 second. For e.g, if the frame rate is set to 24fps (frames per second), the number of frames added willl be 24 in number. You can view the default frame rate or change it from the bottom of the timeline, as shown in the figure below.

9.JPG

3. Choose the Selection Tool from the Tools panel and select the rightmost frame of the biker layer. Press and hold the left mouse button over it and drag it to frame 160.

4. Next, select the biker movie clip from the stage area. Press and hold the SHIFT key and drag the movie clip to the right, out of the stage area, as shown in the figure below.

10.JPG

The green colored line created represents the motion tween path for the biker movie clip. The color of the motion tween path is similar to the outline color of the layer in the TIMELINE panel.

5. Press and hold the CTRL key and select the blank frames for the left_tree, front_tree, and the background layer on frame 160, as shown the figure below. Next, press the F5 key from the keyboard to add blank keyframes in the timeline for the selected layers.

11.JPG

The playhead in the TIMELINE panel at frame 160 shows only the biker movie clip in the stage area. It is so, as the other layers except the biker layer did not have any frames till frame 160. F5 key adds blank keyframes having the same content as of the first layer of the respective layer.

6. Press ENTER to preview the motion tween in the stage area. If the animation works press CTRL + ENTER to publish the animation; a new window displaying the motion is displayed, as shown the figure below.

12.JPG

Adjusting the Motion Tween Speed

1. Choose the Selection Tool from the Tools panel and select the green colored motion tween path for the biker movie clip.

2. Choose Window > Properties from the main menubar to display the PROPERTIES panel, if it is not already displayed.

3. Set the Ease value in the EASE area to -100.

Tip! Easing is a process for controlling motion tween in flash. Easing can be further classified into Ease In and Ease Out. In Ease In, the motion begins slowly, before gaining speed as time progresses with a positive value and in Ease Out, it happens exactly opposite with a negative value.

4. Choose CTRL + ENTER from the keyboard to publish the easing effect in the motion tweened animation.

The biker starts slowly and gradually speeds up as it progresses to the end, you can also do the opposite by entering a positive ease value.

Adding Snow Particles in the Scene

1. Select the biker layer from the TIMELINE panel and choose the New Layer icon at the bottom left of the panel. Rename the new layer as snow_1.

2. Choose View > Rulers from the main menubar to display the ruler marker on the edges of the flash area.

3. Next, choose the Deco Tool from the Tools panel and then expand the PROPERTIES panel.

4. Now, select the Particle System option from the drop-down list labeled Vine Fill in the DRAWING EFFECT area; the Particle System options are displayed in the PROPERTIES panel, as shown in figure below.

5. Set the color of Particle 1 and Particle 2 to white by choosing the black colored box below the Edit button in the DRAWING EFFECT area, refer the below figure for you reference.

13.JPG

3. Next, expand the ADVANCED OPTIONS area if it is not by default. Set the following values in this area:

Total Length =160                    Particle Generation = 160

Rate per frame = 3                     Rotation rate = 180

4. Press CTRL + - to zoom out of the current view and click above the stage area near the horizontal slider marked 200; the particles are generated till frame 160.

5. Choose CTRL + ENTER from the keyboard; a new window is displayed showing the particle generation, as shown in the below figure.

14.JPG

The particles are generated only on the left of the scene area. To allow the generation of the particle on the entire scene we need to create one more particle system

6. Select the front_tree layer from the TIMELINE panel and choose the New Layer icon at the bottom left of the panel; a new layer is created. Rename this layer to snow_2.

7. Choose the Deco Tool from the Tools panel and set the properties in the PROPERTIES panel as discussed in step 3.

8. Create a particle system on the right of the stage area where no particles were generated earlier.

9. Choose CTRL + ENTER from the keyboard to view the final motion tween animation, as shown in the below figure.


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 # 57719
Type: Muse Templates
Price: $44

Flash Photo Galleries