Learning Center
Plans & pricing Sign in
Sign Out

Animations in Flash


									Animations in Flash

1. To learn different kinds of animations in Flash
2. To be familiar with tweening production in Flash
3. To learn the usage of masks
4. To grasp other concepts: group (群組), library (元件庫), importing (匯入) external
   objects, and layers

As we have learnt from last lecture, Flash can generate in-between frames between two
keyframes, so that when the series of frames are played, the animation effect is produced.
There are three main types of animation in Flash:
        Motion tweening
        Shape tweening (color, size, or shape)
        Tweening with a motion path

In general, we follow the procedures below to achieve animations:
1. Insert a keyframe on the time line where the animation starts
2. Draw the object which it looks like at first
3. Insert a keyframe on the time line where the animation ends
4. Draw the object which it looks like after the animation, which may include a change in:
        Position (either following a moving path or not)
         Any one or a combination of the followings:
5. Create the tweening from the property window of the begining frame
Let’s go through the following activities to learn each of the above types of animation. We
will also learn how to use mask layers in Flash to produce special animation effects.

Activity Two A: Tweening Motion
In this activity, we learn how to creating motion tweens in Flash. Motion tweenings require
the corresponding objects to be grouped. This is also covered in this activity.

Insert the First Keyframe
1. Open a new document in Flash.
2. Draw a square on the stage as
(this automatically adds a keyframe to
frame one)

Insert the Last Keyframe
1. Click on frame 15.
2. Select 插入時間軸關鍵影格.
3. Use 選取工具 to move the square
    to the right hand side of the stage.
[Now press Enter to play the scene. You
will notice that the square stay at the
original place as frame 1 through out
the first 14 frames, but “jump” to its
new position in frame 15.]
Grouping the Shapes
1. Go to frame 1.
2. Use 選取工具 to double click on
   the square (this select both the
   stroke and fill).
3. Select 修改群組. The square is
   now enclosed by a blue rectangle.
4. Go to frame 15 and repeat the Step 1
   to 3.
Create Motion Tween
1. Go to frame 1.
2. On 屬性視窗 (if it is not on the
   workspace, click 視窗屬性),
   select 移動 for 補間動畫)
3. You can notice that the time line
   now becomes:

4. On 屬性視窗, 旋轉: choose 順時針
   and 1 次.
5. Play the movie by pressing Enter.

[Note: If the shapes are not grouped, motion tweening is not possible.]

Activity Two B: Tweening Size, Color and Effects (Shape Tweening)
In this activity, we learn how to perform tweening on size, color and effects with shape
tweening. Unlike motion tweenings, shape tweenings require all the objects involved to be
broken apart (or ungrouped).
                                                 Insert the First Keyframe
                                                 1. Open a new document in Flash.
                                                 2. On frame 1, draw an orange circle.

                                                 Insert the Final Keyframe
                                                 1. Insert a keyframe in frame 15.
                                                 2. Delete the circle and draw a green
                                                    rectangle on frame 15.
                                                 3. You can also apply other effect on the
                                                 Create Shape Tween
                                                 1. Go to frame 1.
                                                 2. On 屬性視窗 (if it is not on the
                                                    workspace, click 視窗屬性), select 形
                                                    狀 for 補間動畫).
                                                 3. You can see that the time line now
                                                    becomes what is shown on the figure.
Now play the movie to see what happens. You can also add more shapes to frame 15 to
observe the effect.
[Note: If the objects are grouped, or are texts themselves, you must break them apart before
shape tweening is applied. This can be done by 修改打散 (for objects that are broken
apart, there will be no blue rectangle enclosing them)]

Activity Two C: Tweening with Motion Path (Optional)
Go through Activity One B on last lecture to revise tweenings with motion path.
[Note: For this type of tweening, an object is placed at one end of the motion path at the first
frame, and placed at another end at the last frame.]

Activity Two D: Creating Spotlight Effect with Masks
The mask layer reveals the area of linked layers beneath the filled shape. To create a

mask, you specify that a layer is a mask layer, and either draw or place a filled shape on that
layer. You can use any filled shape, including groups, text, and symbols, as a mask.
      In this activity, we also learn how to import external objects into the Flash library.
External objects refer to the files that are not created inside Flash, such as image files, sound
files and video files. They need to be imported (匯入) before they become part of the Flash
movie. You can think of the library (元件庫) as a depository where a copy of the objects can
be withdrawn from it and can be used at any part of the current Flash movie.
                                                            Importing External Objects
                                                            1. Download 2d.jpg from the
                                                               course homepage and save it on
                                                               your local computer.
                                                            2. Open Flash MX 2004
                                                               Professional. Select 檔案匯
                                                            3. Now 2d.jpg has been imported
                                                               into the library (元件庫).
                                                               [Select 視窗元件庫 to view
                                                                the library if it is not there]
                                                            Add the Image and the Mask
                                                            1. Drag the image of 2d.jpg from
                                                               元件庫 to the stage.
                                                            2. Name the current layer as
                                                            3. Insert a new layer and name it
                                                               as “mask”. Right click on it and
                                                               select 遮色片.

                                                            Drawing the Mask (1)
                                                            1. On the mask layer, draw a
                                                               circle at the upper left hand
                                                            2. An alert message as shown will
                                                               pop up. Click 是 to proceed.

        3. Draw the circle. And group the
        Drawing the Mask (2)
        1. On the image layer, insert a
           frame (choose 插入時間軸
           影格) in frame 20.
        2. On the mask layer, insert a key
           frame in frame 20.
        3. Move the circle on frame 20 of
           the mask layer to the right hand
           side. And group the circle.

        Add Motion to the Mask
        1. On frame 1 of the mask layer,
           on 屬性視窗 (if it is not on
           the workspace, click 視窗屬
           性), select 移動 for 補間動畫).
        2. Preview the movie from a
           browser by choosing 檔案

        Add a Dark Background
        1. Insert a new layer under the
wrong      image layer. Name it
           “darkness” (Make sure this
           layer is placed as the position
           shown in the “right” figure)
right   2. On frame 1 of darkness layer,
           draw a rectangle (with dark
           stroke and dark fill. Hint: You
           need to set up the fill and
           stroke color before you draw
           the rectangle) which exactly
           enclose the image.

Layer Concepts in Flash
After the above activities, you will start to notice about the layer concept in Flash. Layers are
used on the timeline to organize objects. Placing objects on their own layer makes them
easier to work with. The layers are viewed from top to down, which is illustrated in the
following figure (Rectangle is at the topmost layer and Circle is at the bottommost):

You can also perform the followings on layers:

Through the previous activities, you can experience that there are different types of layers. In
Flash, there are six types of layers:
1. Normal-default layer: All objects on these layers appear in the movie
2. Guide (Standard and Motion): Standard guide layers serve as a reference point for
   positioning objects on the stage; while Motion guide layers are used to create a path for

     animated objects to follow
3.   Guided: a layer that contains an animated object, linked to a Motion Guide layer
4.   Mask: a layer that contains and reveals portions of another layer
5.   Masked: a layer that contains the objects that are hidden and revealed by a Mask layer
6.   Folder: a layer that can contain other layers

Exercise: Simulation using mask, guided motion and tweened animation
Study the two Flash files: earth0.fla and earth1.fla to analyze the technique that have been
covered in this lecture.
[Note: For both files, you need to double click on the earth to open its details (because the
contents are converted to symbols, which will be covered in next lecture)]


To top