Post on 11-Jan-2016
transcript
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 33Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 44Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 55Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 66Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 77Chapter D
Understanding Frame Understanding Frame AnimationsAnimations
Three images used in a Frame Animation
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 88Chapter D
Understanding Frame Understanding Frame AnimationsAnimations
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)
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 99Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1010Chapter D
Creating a Frame Creating a Frame AnimationAnimation
In eachFrame, thecar is in adifferentposition
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1111Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1212Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1313Chapter D
Motion Tweening requires only a Start and End Frame
Light Blue Backgroundrepresents a Motion Tween
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1414Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1515Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1616Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1717Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1818Chapter D
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)
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 1919Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2020Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2121Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2222Chapter D
Rotating an Object using Rotating an Object using a Motion Tweena Motion Tween
Specifying the rotate settings via the Properties Panel
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2323Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2424Chapter D
The Advanced Effect Panel
Onion Skin
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2525Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2626Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2727Chapter D
Apply a Timeline EffectApply a Timeline Effect
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2828Chapter D
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
Getting Started with PhotoShop 7.0Getting Started with PhotoShop 7.0 2929Chapter D
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