of 66/66
  • date post

  • Category


  • view

  • download


Embed Size (px)

Transcript of Adobe Flash CS3 Revealed CHAPTER 4: CREATING ANIMATION.


  • Create frame-by-frame animationsCreate motion-tweened animationWork with motion guidesCreate animation effectsAnimate textChapter 4 LessonsChapter 4

  • Animation is an important part of a Web site inE-commerceEducationEntertainmentIntroductionChapter 4

  • How Animation WorksAnimation is made up of a series of still imagesPersistence of Vision is the basis for frame rates in animationsFrames rates of 10-12 fps generally provide smooth computer-based animationFrame rates lower than 10-12 fps often result in jerky imagesHigher frame rates may result in blurred imagesFlash uses default frame rate of 12 fpsChapter 4

  • Flash AnimationAnimation is one of the most powerful features of FlashBasic animation is a simple processMove an object around the stageChange an objects size, shape, colorApply Special Effects, such as zooming, fading, or a combination of effects

    Chapter 4

  • Flash AnimationTwo animation methodsFrame-by-frame animationTweened animationChapter 4

  • Understanding Frame-by-Frame AnimationsCreated by specifying an object that is to appear in each frame of a sequence of framesUseful when you want to change individual parts of an imageDepending on complexity, animation can require a lot of time to produce

    Chapter 4

  • Understanding Frame-by-Frame AnimationsChapter 4

  • Understanding Frame-by-Frame AnimationsWhen creating frame by frame animation, consider the following:The number of different imagesThe number of frames in which each image will appearThe movie frame rateChapter 4

  • Creating Frame-by-Frame AnimationsSelect the beginning frame of the animationInsert a keyframe on the layer in frameA keyframe signifies a change in an objectPlace the object on the stageChapter 4

  • Creating Frame-by-Frame AnimationsInsert keyframe where you want change to occurChange the objectOnion skinning helps placement of image seriesChapter 4

  • Fig. 2: The First Six Frames of an AnimationIn each frame, the front end of the car is in a different positionChapter 4

  • Fig. 4: Timeline with KeyframesChapter 4

  • Fig. 9: Changing the Frame RateChapter 4

  • Create Motion-Tweened AnimationMotion tweening is less tedious than frame animationCreate 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 animationChapter 4

  • Create Motion-Tweened AnimationTwo types of tweeningShape tweeningA morphing effectOne object slowly turns into anotherMotion tweening Used to animate objects which are moved, resized, re-colored, or rotatedChapter 4

  • Fig. 10: Motion-tweened AnimationChapter 4

  • Create Motion-Tweened AnimationSelect the starting frameInsert a keyframe, if necessaryPosition the object on the stage Verify that it is selectedChoose the Create Motion Tween commandFrom the Timeline option on the Insert menuChapter 4

  • Create Motion-Tweened AnimationInsert a keyframe in the ending frame of the animationMove the object and/or make changes to the objectChange the objects sizeRotate the objectChapter 4

  • Things to RememberIf you change the position of the object, it will move in a direct line from start position to the end positionIf you reshape an object in the ending keyframe, the object will slowly change from the starting keyframe to the endingChapter 4

  • Things to RememberWhen you select an object and create a motion tween, Flash automatically creates a symbolYou can remove a motion tween animation by selecting a frame within the tween and using the Remove Tween commandChapter 4

  • Fig. 11: Final Position of First Motion Tween Starting frameEnding frameChapter 4

  • Fig. 12: Final Position of Combined Motion Tweens Chapter 4

  • Work with Motion GuidesCreates a path that will guide moving objects around the stage in any directionWithout Motion Guides, animations always travel in straight linesAnimations are placed on their own layer beneath a motion guide layerChapter 4

  • Creating Animation with Motion GuidesTwo ways to work with motion guidesInsert a guide layer, draw a path, then create an animation and attach the animated object to the pathCreate an animation, insert a motion guide layer and draw a path, then attach animated object to the pathChapter 4

  • Creating Animation with Motion GuidesSecond method describedCreate a motion-tweened animationSelect the layer the animation is on and insert a motion guide layerDraw a path using the Pen, Pencil, Line, Circle, Rectangle, or Brush toolsAttach 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

    Chapter 4

  • Fig. 17: Motion Guide LayerMotion guide layerIndented layer containing animation that will follow the path created on the guide layerChapter 4

  • Working with PropertiesTween Specifies motion, shape, or noneScale Tweens the size of an objectEase Specifies the rate of change between tweened framesEase values are between -100 (slow) and 100 (fast)Chapter 4

  • Working with PropertiesRotateSpecifies the number of times an object rotates clockwise (CW) or counter clockwise (CCW)Orient to path Orients the baseline of the object to the pathChapter 4

  • Working with PropertiesSync Ensures that the object loops properlySnap Attaches the object to the path by its registration point Chapter 4

  • Transformation PointEach symbol has a transformation point in the form of a circle (O) that is used to orient the object when it is being animatedThe transformation point is also the point that snaps to a motion guideWhen attaching an object to a path, you can drag the transformation point to the pathThe default position for a transformation point is the center of the objectYou can reposition the transformation point while in the symbol edit mode by dragging the transformation point to a different location in the object

    Chapter 4

  • Fig. 16: Motion Guide with Object AttachedTransformation pointChapter 4

  • Registration PointObjects also have a registration point (+) that is used to position the object on the stage using ActionScript codeThe transformation and registration points can overlapthis is displayed as a plus sign within a circle

    Chapter 4

  • Fig. 19: Completed Motion PathChapter 4

  • Fig. 20: Snapping an Object to the PathThe transformation point of the object attaches to the pathChapter 4

  • Fig. 22: Setting the Ease ValueChapter 4

  • Create Motion Animation EffectsResizing an objectRotating an objectChanging the color of an objectChapter 4

  • Resizing an Object Using a Motion TweenThe simplest process for resizing an object during a motion tween:select a frame as the starting framedraw or place an object on the stageand then create a motion tweenYou can select an ending frame and resize the object using the resize handles that are displayed when you select the Free Transform tool and the Scale option on the Tools panel

    Chapter 4

  • Fig. 23: Snapping an Object to the PathChapter 4

  • Rotating an Object Using a Motion TweenSelect the object in the start or end frame, then rotate with optionsRotate Tool option of Free Transform toolRotate clockwise or counter clockwise a specified number of turns or degrees through Properties panelStipulate an Ease value to cause the rotation to accelerate or decelerate

    Chapter 4

  • Changing an Objects Color with Motion TweenThe most basic change involves starting with one color for the object and ending with another color The tweening process slowly changes the color across the specified framesWhen the movie is played, the colors are blended as the object moves across the stage

    Chapter 4

  • Changing an Objects Color with Motion TweenMore sophisticated changes using the Property inspectorChange the Tint of the object Change the Alpha of the object Change the Brightness of the object Apply Advanced Effects

    Chapter 4

  • Using the Onion Skin FeatureAllows you to view an outline of objects in any number of framesHelps in positioning animated objects on the stageThe Edit Multiple Frames feature is also turned on, allowing you to view the objects in the Keyframes in a non-outline form

    Chapter 4

  • Fig. 24: Onion Skin Feature Turned OnChapter 4

  • Combining Various Animation EffectsCombine motion-tween effects so they occur simultaneously during an animation Example: airplane objectEnter from offstage and perform a loopRotate the plane horizontally to create a barrel roll effectGrow smaller as it moves across the screen to simulate the effect of plane speeding awayChapter 4

  • Creating Timeline EffectsYou can apply Timeline effects to the following objects:Text Graphics, including shapes, groups, and graphic symbols Bitmap images Button symbolsChapter 4

  • Adding an Effect to an ObjectTo add an effect to an object, you select the object and then choose Timeline Effects from the Insert menuThe Timeline Effects menu has three options that name categories of effects available for the type of object youve selected

    Chapter 4

  • Fig. 25: Timeline Effects Options on the Insert MenuChapter 4

  • Default Settings for Transition EffectThese settings specify the duration of the effect in:Number of framesSpecify the direction (In or Out)Specify a motion ease

    Chapter 4

  • Fig. 26: Default Settings for Transition Effect Fade InChapter 4

  • Editing a Timeline EffectTo edit a Timeline effect, you select the object associated with the effect on the Stage and click Edit in the Property inspectorThis displays the appropriate Effects Setting dialog box

    Chapter 4

  • Deleting a Timeline EffectWhen you right-click (Win) or control click (Mac) an object, a menu opens with options specific to the object you clicked This menu is used to delete Timeline effectson the Stage, right-click (Win) or control click (Mac) the objectselect Timeline Effects from the context menuselect Remove Effect

    Chapter 4

  • Fig. 29: Specifying the Rotate SettingsRotation will be counter clockwise 1 timeChapter 4

  • Fig. 31: Changing the Color SettingsColor is determined by mixing RGB values and percentagesChapter 4

  • Fig. 32: Using the Onion Skin FeatureOnion skin iconEdit multiple frames iconStart Onion Skin sliderDrag End Onion Slider to Frame 22Chapter 4

  • Fig. 35: The Library Panel Displaying the Transition EffectPlay buttonChapter 4

  • Fig. 36: The Completed Transition Dialog BoxFadeDirectionMotion ease sliderChapter 4

  • Fig. 37: The Completed Transform Dialog BoxChapter 4

  • Animate TextText can be animated like other objectsResize, rotate, reposition, and change the colorsCreate a motion-tween to move text as you would an objectSpecify a rotationChapter 4

  • Animate TextOnce you create a motion animation using a text block, the text block becomes a symbolCannot edit individual charactersCan edit the symbol as a wholeChapter 4

  • Fig. 38: Examples of Animated TextText scrolls from off the stage to the stageText zoomsText rotatesChapter 4

  • Fig. 41: Examples of Animated TextThis will be the position of the text block at the end of the animationChapter 4

  • Fig. 45: Setting the Alpha Amount to 0The alpha amountChapter 4

  • Fig. 46: Adding a ButtonChapter 4

  • Fig. 48: Adding a Play ActionChapter 4

  • Create frame-by-frame animationsCreate motion-tweened animationWork with motion guidesCreate animation effectsAnimate textChapter 4 TasksChapter 4