Docstoc

Chapter 4

Document Sample
Chapter 4 Powered By Docstoc
					Macromedia Flash 8
Revealed


CREATING
       ANIMATIONS
     Chapter Lessons
          Create frame-by-frame animations
          Create motion-tweened animation
          Work with motion guides
          Create animation effects
          Animate text



Creating Animations     Chapter 4            2
     Introduction
          Animation is an important part of a
          Web site in
            – E-commerce
            – Education
            – Entertainment
          Animation is made up of a series of still
          images
          “Persistence of Vision” is the basis for
          frame rates in animations
Creating Animations           Chapter 4          3
     Introduction
          Frames rates of 10-12 fps generally
          provide smooth computer-based
          animation
            – Frame rates lower than 10-12 fps often
              result in jerky images
            – Higher frame rates may result in blurred
              images
          Flash uses default frame rate of 12 fps

Creating Animations          Chapter 4                   4
    Macromedia Flash
    Animation
          Animation is one of the most powerful
          features of Flash
          Basic animation is a simple process
            – Move an object around the stage
            – Change an object’s size, shape, color
            – Apply Special Effects, such as zooming,
              fading, or a combination of effects

Creating Animations         Chapter 4                   5
    Macromedia Flash
    Animation
          Two animation methods
            – Frame-by-frame animation
            – Tweened Animation




Creating Animations        Chapter 4     6
    Understanding Frame-by-
    Frame Animations
         Created by specifying an object that is
         to appear in each frame of a
         sequence of frames
         Useful when you want to change
         individual parts of an image
         Depending on complexity, animation
         can require a lot of time to produce

Creating Animations      Chapter 4             7
     Understanding Frame-by-
     Frame Animations




                      FIGURE 1: Three images used in an animation




Creating Animations                     Chapter 4                   8
    Understanding Frame-by-
    Frame Animations
         The greater the number of images, the
         less change needed in each image
           – Creating more realistic animation
         Number of frames creates varied
         results
           – Fewer frames, jerky animation



Creating Animations         Chapter 4            9
     Creating Frame-by-Frame
     Animations
          Select the beginning frame of the
          animation
          Insert a keyframe on the layer in
          frame
           – A keyframe signifies a change in an
             object
          Place the object on the stage

Creating Animations        Chapter 4               10
     Creating Frame-by-Frame
     Animations
          Insert keyframe where you want
          change to occur
          Change the object
          “Onion skinning” helps placement of
          image series



Creating Animations      Chapter 4              11
     Creating Frame-by-Frame
     Animations



     In each
     Frame, the
     car is in a
     different
     position




                      Figure 2: The first six frames of an animation



Creating Animations                       Chapter 4                    12
     Create Motion-Tweened
     Animation
          Motion tweening is less tedious than
          frame animation
            – Create a Start and End frame
            – Flash creates the “in-between” frames
          Flash only stores the attributes that
          change from frame to frame, thus
          creating smaller file sizes than frame
          animation
Creating Animations         Chapter 4                 13
     Create Motion-Tweened
     Animation
         Two types of tweening
           – Shape tweening
                 • A “morphing” effect
                 • One object slowly turns into another
           – Motion tweening
                 • Used to animate objects which are
                   moved, resized, re-colored, or rotated



Creating Animations              Chapter 4                  14
                                                  Keyframe for where
                                                  the car ends




Keyframe
for where
the car
starts




                      Figure 10: Sample motion-tweened animation



Creating Animations                   Chapter 4                        15
     Create Motion-Tweened
     Animation
        Select the starting frame
          – Insert a keyframe, if necessary
        Position the object on the stage
          – Verify that it is selected
        Choose the Create Motion Tween
        command
          – From the Timeline option on the
            Insert menu
Creating Animations          Chapter 4        16
    Create Motion-Tweened
    Animation
        Insert a keyframe in the ending
        frame of the animation
        Move the object and/or make
        changes to the object
          – Change the object’s size
          – Rotate the object



Creating Animations        Chapter 4      17
     Things to Remember
         If you change the position of the
         object, it will move in a direct line
         from start position to the end
         position
         If you reshape an object in the
         ending keyframe, the object will
         slowly change from the starting
         keyframe to the ending

Creating Animations        Chapter 4             18
     Things to Remember
          When you select an object and
          create a motion tween, Flash
          automatically creates a symbol
          You can remove a motion tween
          animation by selecting a frame
          within the tween and using the
          Remove Tween command


Creating Animations     Chapter 4          19
     Work with Motion Guides
         Creates a path that will guide moving
         objects around the stage in any
         direction
         Without Motion Guides, animations
         always travel in straight lines
         Animations are placed on their own
         layer beneath a motion guide layer


Creating Animations      Chapter 4               20
     Creating Animation with
     Motion Guides
         Two ways to work with motion guides
           – Insert a guide layer, draw a path, then
             create an animation and attach the
             animated object to the path
           – Create an animation, insert a motion
             guide layer and draw a path, then attach
             animated object to the path


Creating Animations         Chapter 4               21
     Creating Animation with
     Motion Guides
         Second method described
           – Create a motion-tweened animation
           – Select the layer the animation is on and
             insert a motion guide layer
           – Draw a path using the Pen, Pencil, Line,
             Circle, Rectangle, or Brush tools



Creating Animations         Chapter 4               22
    Creating Animation with
    Motion Guides
           – Attach the object to the path by dragging
             the object by its registration point to the
             beginning of the path in the first frame,
             and to the end of the path in the last frame




Creating Animations          Chapter 4                23
     Creating Animation with
     Motion Guides




Creating Animations   Chapter 4   24
     Working with Properties
         Tween
           – Specifies Motion, Shape, or None
         Scale
           – Tweens the size of an object
         Ease
           – Specifies the rate of change between
             tweened frames
                 • Ease values are between -100 (slow) and
                   100 (fast)
Creating Animations             Chapter 4                    25
     Working with Properties
         Rotate
           – Specifies the number of times an object
             rotates clockwise (CW) or counter
             clockwise (CCW)
         Orient to path
           – Orients the baseline of the object to the
             path




Creating Animations          Chapter 4                   26
     Working with Properties
         Sync
           – Ensures that the object loops properly
         Snap
           – Attaches the object to the path by its
             registration point




Creating Animations          Chapter 4                27
     Create Animation Effects
         Resizing an object
         Rotating an object
         Changing the color of an object




Creating Animations     Chapter 4          28
    Resizing an Object Using a
    Motion Tween




Creating Animations   Chapter 4   29
     Rotating an Object Using a
     Motion Tween
          Select the object in the start or end
          frame, then rotate with options
            – Rotate Tool option of Free Transform
              tool
            – Rotate clockwise or counter clockwise a
              specified number of turns or degrees
              through Properties panel
            – Stipulate an Ease value to cause the
              rotation to accelerate or decelerate
Creating Animations         Chapter 4               30
     Changing an Object’s Color
     with Motion Tween
          Numerous ways to change an object’s
          color over an animation’s time
            – Change the Tint of the object
            – Change the Alpha of the object
            – Change the Brightness of the object
            – Apply Advanced Effects



Creating Animations         Chapter 4               31
     Using the Onion Skin
     Feature
         Allows you to view an outline of
         objects in any number of frames
         Helps in positioning animated objects
         on the stage
           – Turn Onion Skin feature on via the Icon
             in the timeline
           – Use sliders to determine the range of
             Onion Skin display

Creating Animations         Chapter 4                  32
    Combining Various
    Animation Effects
         Combine motion-tween effects so they
         occur simultaneously during an
         animation
          – Example: airplane object
                • Enter from offstage and perform a loop
                • Rotate the plane horizontally to create a
                  barrel roll effect
                • Grow smaller as it moves across the screen
                  to simulate the effect of plane speeding
                  away
Creating Animations             Chapter 4                  33
     Creating Timeline Effects
         You can apply Timeline effects to the
         following objects:
           – Text
           – Graphics, including shapes, groups, and
             graphic symbols
           – Bitmap images
           – Button symbols


Creating Animations        Chapter 4               34
     Apply a Timeline Effect




Creating Animations   Chapter 4   35
     Animate Text
          Text can be animated like other
          objects
            – Resize, rotate, reposition, and change
              the colors
            – Create a motion-tween to move text as
              you would an object
            – Specify a rotation



Creating Animations         Chapter 4                  36
     Animate Text
          Once you create a motion animation
          using a text block, the text block
          becomes a symbol
            – Cannot edit individual characters
            – Can edit the symbol as a whole




Creating Animations          Chapter 4            37
     Chapter 4 Tasks
          Create frame-by-frame animations
          Create motion-tweened animation
          Work with motion guides
          Create animation effects
          Animate text



Creating Animations     Chapter 4            38