Dm11 – Flash Creating Animations Animations CREATING

Dm11 – Flash Creating Dm11 – Flash Creating AnimationsAnimations

AnimationsAnimations

CREATING

Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 22Chapter D

Create frame animationsCreate frame animations Create motion-tweened animationCreate motion-tweened animation Work with motion guidesWork with motion guides Create motion animation effectsCreate motion animation effects Animate textAnimate text

Chapter LessonsChapter Lessons


Animation can be an important part of Animation can be an important part of a Web site, CD-ROM, Demo, or gamea Web site, CD-ROM, Demo, or game

The perception of motion is an illusion The perception of motion is an illusion made up from a series of still imagesmade up from a series of still images

““Persistence of Vision” is the basis for Persistence of Vision” is the basis for frame rates in animationsframe rates in animations

Frames rates of 10-12 fps generally Frames rates of 10-12 fps generally provide smooth computer-based provide smooth computer-based animationanimation

IntroductionIntroduction


Frame rates lower than 10-12 fps Frame rates lower than 10-12 fps often result in jerky images, while often result in jerky images, while higher frame rates result in a higher frame rates result in a blurred imageblurred image

Flash uses a default frame rate of Flash uses a default frame rate of 12 fps12 fps

Intro to AnimationIntro to Animation


Animation is one of the most powerful Animation is one of the most powerful features of Flashfeatures of Flash

Basic animation is a simple processBasic animation is a simple process– Move an object around the stageMove an object around the stage– Change an object’s size, shape, colorChange an object’s size, shape, color– Apply Special Effects, such as zooming, Apply Special Effects, such as zooming,

fading, or a combination of effectsfading, or a combination of effects Two Animation Methods: Frame Two Animation Methods: Frame

Animation, and Tweened AnimationAnimation, and Tweened Animation

Macromedia Flash Macromedia Flash AnimationAnimation


Understanding Frame Understanding Frame AnimationsAnimations

Also called frame-by-frame Also called frame-by-frame animationsanimations

Created by specifying an object that is Created by specifying an object that is to appear in each frame of a to appear in each frame of a sequence of framessequence of frames

Useful when you want to change Useful when you want to change individual parts of an imageindividual parts of an image

Depending on the complexity of the Depending on the complexity of the animation, can require a lot of timeanimation, can require a lot of time



Three images used in a Frame Animation



A greater number of images A greater number of images generally suggests less change generally suggests less change needed between each image — needed between each image — creating more realistic animationcreating more realistic animation

Consider the number of frames in Consider the number of frames in which an image will appearwhich an image will appear

– Fewer frames and the animation may Fewer frames and the animation may appear jerkyappear jerky

Consider the frame rate (10-12 fps)Consider the frame rate (10-12 fps)


Creating a Frame Creating a Frame AnimationAnimation

Insert a keyframe on the layerInsert a keyframe on the layer Place your first drawing on the Place your first drawing on the

stagestage Insert your next keyframe, and Insert your next keyframe, and

change the drawingchange the drawing ““Onion skinning” may help you Onion skinning” may help you

placing a series of imagesplacing a series of images


Creating a Frame Creating a Frame AnimationAnimation

In eachFrame, thecar is in adifferentposition


Understanding Motion Understanding Motion TweeningTweening

Motion tweening is far less tedious Motion tweening is far less tedious than Frame Animationthan Frame Animation– Create a Start and End frame Create a Start and End frame – Flash creates the “in-between” frames Flash creates the “in-between” frames

Flash only stores the attributes that Flash only stores the attributes that change from frame to frame, thus change from frame to frame, thus creating smaller file sizes than creating smaller file sizes than Frame AnimationFrame Animation


Understanding Motion Understanding Motion TweeningTweening

Two types of tweening:Two types of tweening:– Shape tweening - a “morphing” Shape tweening - a “morphing”

effecteffect– Motion tweening is used to Motion tweening is used to

animate objects which are animate objects which are moved, resized, re-colored, or moved, resized, re-colored, or rotatedrotated


Motion Tweening requires only a Start and End Frame

Light Blue Backgroundrepresents a Motion Tween


Creating a Motion TweenCreating a Motion Tween Insert a starting frameInsert a starting frame Insert an ending frameInsert an ending frame Make alterations to the ending Make alterations to the ending

frameframe Go back to the starting frame and Go back to the starting frame and

choose Insert>Create Motion choose Insert>Create Motion TweenTween

Make adjustments through the Make adjustments through the Properties PanelProperties Panel


Understanding Motion Understanding Motion GuidesGuides

A path that will guide moving A path that will guide moving objects around the stage in any objects around the stage in any directiondirection

Without Motion Guides, animations Without Motion Guides, animations would always travel in straight would always travel in straight lineslines

Animations are placed on their own Animations are placed on their own layer beneath a motion guide layerlayer beneath a motion guide layer


Creating Animation with Creating Animation with Motion GuidesMotion Guides

Two ways to create this relationshipTwo ways to create this relationship– Create a guide layer with a path, then Create a guide layer with a path, then

create a layer of animation an attachcreate a layer of animation an attach– Or, create an animation. Then create a Or, create an animation. Then create a

motion guide layer with a path, and motion guide layer with a path, and attachattach

Depending on the type of object Depending on the type of object you’re animating, you may need to you’re animating, you may need to orient the object to the path orient the object to the path


Creating Animation with Creating Animation with Motion GuidesMotion Guides

A motion guide layerand its associated

animation

Object oriented to path

Object not oriented to path


Working with PropertiesWorking with Properties Tween - specifies Motion, Shape,or noneTween - specifies Motion, Shape,or none Scale - tweens the size of an objectScale - tweens the size of an object Ease - specifies the rate of change Ease - specifies the rate of change

between tweened framesbetween tweened frames– Ease values are between -100(slow) and Ease values are between -100(slow) and

100(fast)100(fast) Rotate - specifies the number of times Rotate - specifies the number of times

an object rotates clockwise(CW) or an object rotates clockwise(CW) or counter clockwise(CCW) counter clockwise(CCW)


Working with PropertiesWorking with Properties Orient to path - orients the Orient to path - orients the

baseline of the object to the pathbaseline of the object to the path Sync - ensures that the object Sync - ensures that the object

loops properlyloops properly Snap - attaches the object to the Snap - attaches the object to the

path by its registration point path by its registration point Orient to PathFeature enabledin the PropertiesPanel


Resizing an Object using Resizing an Object using a Motion Tweena Motion Tween

Select the object in the ending Select the object in the ending frame and then use the Scale Tool frame and then use the Scale Tool options from the Free Transform tooloptions from the Free Transform tool


Rotating an Object using Rotating an Object using a Motion Tweena Motion Tween

Select the object in the start or end frame rotate with different Select the object in the start or end frame rotate with different optionsoptions– Rotate with the Rotate Tool option of the Free Transform toolRotate with the Rotate Tool option of the Free Transform tool– Rotate Clockwise or Counter Clockwise a specified number of turns or Rotate Clockwise or Counter Clockwise a specified number of turns or

degrees through the Properties paneldegrees through the Properties panel– Use Modify > Transform to specify rotation Use Modify > Transform to specify rotation


Rotating an Object using Rotating an Object using a Motion Tweena Motion Tween

Specifying the rotate settings via the Properties Panel


Changing an Object’s Changing an Object’s Color with Motion TweenColor with Motion Tween

Numerous ways to change an object’s color over an animation’s timeNumerous ways to change an object’s color over an animation’s time– Change the Tint of the object in the last frameChange the Tint of the object in the last frame– Change the Alpha of the object in the last frameChange the Alpha of the object in the last frame– Change the Brightness of the object in the last frameChange the Brightness of the object in the last frame– Apply Advanced EffectsApply Advanced Effects


The Advanced Effect Panel

Onion Skin


Onion Skin FeatureOnion Skin Feature A feature that allows you to view an A feature that allows you to view an

outline of objects in any number of outline of objects in any number of framesframes

Helps in positioning animated Helps in positioning animated objects on the stageobjects on the stage– Turn Onion Skin feature on via the Icon Turn Onion Skin feature on via the Icon

in the timelinein the timeline– Use The sliders to determine the range Use The sliders to determine the range

of Onion Skin displayof Onion Skin display


Timeline EffectsTimeline Effects Macromedia Flash allows you to combine Macromedia Flash allows you to combine

various animation effects and provides various animation effects and provides several prebuilt Timeline effectsseveral prebuilt Timeline effects

You can apply Timeline effects to the You can apply Timeline effects to the following objects:following objects:

TextText

GraphicsGraphics

Bitmap imagesBitmap images

Button symbolsButton symbols


Apply a Timeline EffectApply a Timeline Effect


Animating TextAnimating Text Like other objects, Text can Like other objects, Text can

be animatedbe animated– The entire text block is The entire text block is

animated unless “Broken Apart”animated unless “Broken Apart”– Text can be rotated, skewed, Text can be rotated, skewed,

scaled, or re-coloredscaled, or re-colored– Motion Tweened Text blocks are Motion Tweened Text blocks are

automatically saved as Symbolsautomatically saved as Symbols


Chapter D TasksChapter D Tasks

Create frame animationsCreate frame animations Create motion-tweened animationCreate motion-tweened animation Work with motion guidesWork with motion guides Create motion animation effectsCreate motion animation effects Animate textAnimate text

Documents

Dm11 – Flash Creating Animations Animations CREATING