Presentation is loading. Please wait.

Presentation is loading. Please wait.

Dm11 – Flash Creating Animations Animations CREATING.

Published byLynn Baker Modified over 8 years ago

Similar presentations

Presentation on theme: "Dm11 – Flash Creating Animations Animations CREATING."— Presentation transcript:

1 Dm11 – Flash Creating Animations Animations CREATING

2 Chapter D Getting Started with PhotoShop 7.02 Create frame animations Create frame animations Create motion-tweened animation Create motion-tweened animation Work with motion guides Work with motion guides Create motion animation effects Create motion animation effects Animate text Animate text Chapter Lessons

3 Chapter D Getting Started with PhotoShop 7.03 Animation can be an important part of a Web site, CD-ROM, Demo, or game Animation can be an important part of a Web site, CD-ROM, Demo, or game The perception of motion is an illusion made up from a series of still images The perception of motion is an illusion made up from a series of still images “Persistence of Vision” is the basis for frame rates in animations “Persistence of Vision” is the basis for frame rates in animations Frames rates of 10-12 fps generally provide smooth computer-based animation Frames rates of 10-12 fps generally provide smooth computer-based animation Introduction

4 Chapter D Getting Started with PhotoShop 7.04 Frame rates lower than 10-12 fps often result in jerky images, while higher frame rates result in a blurred image Frame rates lower than 10-12 fps often result in jerky images, while higher frame rates result in a blurred image Flash uses a default frame rate of 12 fps Flash uses a default frame rate of 12 fps Intro to Animation

5 Chapter D Getting Started with PhotoShop 7.05 Animation is one of the most powerful features of Flash Animation is one of the most powerful features of Flash Basic animation is a simple process 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 Two Animation Methods: Frame Animation, and Tweened Animation Two Animation Methods: Frame Animation, and Tweened Animation Macromedia Flash Animation

6 Chapter D Getting Started with PhotoShop 7.06 Understanding Frame Animations Also called frame-by-frame animations Also called frame-by-frame animations Created by specifying an object that is to appear in each frame of a sequence of frames 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 Useful when you want to change individual parts of an image Depending on the complexity of the animation, can require a lot of time Depending on the complexity of the animation, can require a lot of time

7 Chapter D Getting Started with PhotoShop 7.07 Understanding Frame Animations Three images used in a Frame Animation

8 Chapter D Getting Started with PhotoShop 7.08 Understanding Frame Animations A greater number of images generally suggests less change needed between each image — creating more realistic animation A greater number of images generally suggests less change needed between each image — creating more realistic animation Consider the number of frames in which an image will appear Consider the number of frames in which an image will appear –Fewer frames and the animation may appear jerky Consider the frame rate (10-12 fps) Consider the frame rate (10-12 fps)

9 Chapter D Getting Started with PhotoShop 7.09 Creating a Frame Animation Insert a keyframe on the layer Insert a keyframe on the layer Place your first drawing on the stage Place your first drawing on the stage Insert your next keyframe, and change the drawing Insert your next keyframe, and change the drawing “Onion skinning” may help you placing a series of images “Onion skinning” may help you placing a series of images

10 Chapter D Getting Started with PhotoShop 7.010 Creating a Frame Animation In each Frame, the car is in a different position

11 Chapter D Getting Started with PhotoShop 7.011 Understanding Motion Tweening Motion tweening is far less tedious than Frame Animation Motion tweening is far 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 Flash only stores the attributes that change from frame to frame, thus creating smaller file sizes than Frame Animation

12 Chapter D Getting Started with PhotoShop 7.012 Understanding Motion Tweening Two types of tweening: Two types of tweening: –Shape tweening - a “morphing” effect –Motion tweening is used to animate objects which are moved, resized, re- colored, or rotated

13 Chapter D Getting Started with PhotoShop 7.013 Motion Tweening requires only a Start and End Frame Light Blue Background represents a Motion Tween

14 Chapter D Getting Started with PhotoShop 7.014 Creating a Motion Tween Insert a starting frame Insert a starting frame Insert an ending frame Insert an ending frame Make alterations to the ending frame Make alterations to the ending frame Go back to the starting frame and choose Insert>Create Motion Tween Go back to the starting frame and choose Insert>Create Motion Tween Make adjustments through the Properties Panel Make adjustments through the Properties Panel

15 Chapter D Getting Started with PhotoShop 7.015 Understanding Motion Guides A path that will guide moving objects around the stage in any direction A path that will guide moving objects around the stage in any direction Without Motion Guides, animations would always travel in straight lines Without Motion Guides, animations would always travel in straight lines Animations are placed on their own layer beneath a motion guide layer Animations are placed on their own layer beneath a motion guide layer

16 Chapter D Getting Started with PhotoShop 7.016 Creating Animation with Motion Guides Two ways to create this relationship Two ways to create this relationship –Create a guide layer with a path, then create a layer of animation an attach –Or, create an animation. Then create a motion guide layer with a path, and attach Depending on the type of object you’re animating, you may need to orient the object to the path Depending on the type of object you’re animating, you may need to orient the object to the path

17 Chapter D Getting Started with PhotoShop 7.017 Creating Animation with Motion Guides A motion guide layer and its associated animation Object oriented to path Object not oriented to path

18 Chapter D Getting Started with PhotoShop 7.018 Working with Properties Tween - specifies Motion, Shape,or none Tween - specifies Motion, Shape,or none Scale - tweens the size of an object Scale - tweens the size of an object Ease - specifies the rate of change between tweened frames Ease - specifies the rate of change between tweened frames –Ease values are between -100(slow) and 100(fast) Rotate - specifies the number of times an object rotates clockwise(CW) or counter clockwise(CCW) Rotate - specifies the number of times an object rotates clockwise(CW) or counter clockwise(CCW)

19 Chapter D Getting Started with PhotoShop 7.019 Working with Properties Orient to path - orients the baseline of the object to the path Orient to path - orients the baseline of the object to the path Sync - ensures that the object loops properly Sync - ensures that the object loops properly Snap - attaches the object to the path by its registration point Snap - attaches the object to the path by its registration point Orient to Path Feature enabled in the Properties Panel

20 Chapter D Getting Started with PhotoShop 7.020 Resizing an Object using a Motion Tween Select the object in the ending frame and then use the Scale Tool options from the Free Transform tool Select the object in the ending frame and then use the Scale Tool options from the Free Transform tool

21 Chapter D Getting Started with PhotoShop 7.021 Rotating an Object using a Motion Tween Select the object in the start or end frame rotate with different options Select the object in the start or end frame rotate with different options –Rotate with the Rotate Tool option of the Free Transform tool –Rotate Clockwise or Counter Clockwise a specified number of turns or degrees through the Properties panel –Use Modify > Transform to specify rotation

22 Chapter D Getting Started with PhotoShop 7.022 Rotating an Object using a Motion Tween Specifying the rotate settings via the Properties Panel

23 Chapter D Getting Started with PhotoShop 7.023 Changing an Object’s Color with Motion Tween Numerous ways to change an object’s color over an animation’s time Numerous ways to change an object’s color over an animation’s time –Change the Tint of the object in the last frame –Change the Alpha of the object in the last frame – Change the Brightness of the object in the last frame –Apply Advanced Effects

24 Chapter D Getting Started with PhotoShop 7.024 The Advanced Effect Panel Onion Skin

25 Chapter D Getting Started with PhotoShop 7.025 Onion Skin Feature A feature that allows you to view an outline of objects in any number of frames A feature that allows you to view an outline of objects in any number of frames Helps in positioning animated objects on the stage Helps in positioning animated objects on the stage –Turn Onion Skin feature on via the Icon in the timeline –Use The sliders to determine the range of Onion Skin display

26 Chapter D Getting Started with PhotoShop 7.026 Timeline Effects Macromedia Flash allows you to combine various animation effects and provides several prebuilt Timeline effects Macromedia Flash allows you to combine various animation effects and provides several prebuilt Timeline effects You can apply Timeline effects to the following objects: You can apply Timeline effects to the following objects:TextGraphics Bitmap images Button symbols

27 Chapter D Getting Started with PhotoShop 7.027 Apply a Timeline Effect

28 Chapter D Getting Started with PhotoShop 7.028 Animating Text Like other objects, Text can be animated Like other objects, Text can be animated –The entire text block is animated unless “Broken Apart” –Text can be rotated, skewed, scaled, or re-colored –Motion Tweened Text blocks are automatically saved as Symbols

29 Chapter D Getting Started with PhotoShop 7.029 Chapter D Tasks Create frame animations Create frame animations Create motion-tweened animation Create motion-tweened animation Work with motion guides Work with motion guides Create motion animation effects Create motion animation effects Animate text Animate text

Download ppt "Dm11 – Flash Creating Animations Animations CREATING."

Similar presentations

INTRODUCTION TO ADOBE FLASH CS4

INTRODUCTION TO ADOBE FLASH CS4
© 2011 Delmar, Cengage Learning Chapter 7 Importing and Modifying Graphics.

© 2011 Delmar, Cengage Learning Chapter 7 Importing and Modifying Graphics.
Importing and Modifying Graphics

Importing and Modifying Graphics
Animation effects Adds motion to a piece Draws attention to what you want user to notice As simple as a transition effect, such as a fade, dissolve or.

Animation effects Adds motion to a piece Draws attention to what you want user to notice As simple as a transition effect, such as a fade, dissolve or.
Understand the Macromedia Flash environment Open a document and play a movie Create and save a movie Work with layers and the timeline Plan a Web site.

Understand the Macromedia Flash environment Open a document and play a movie Create and save a movie Work with layers and the timeline Plan a Web site.
Tutorial 4 Creating Special Animations. XP Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text.

Tutorial 4 Creating Special Animations. XP Objectives Create an animation using a motion guide layer Create an animation using a mask layer Animate text.
Create shape-tweened animation Create a mask effect Add sound Add scenes Create a slide show presentation Unit Lessons.

Create shape-tweened animation Create a mask effect Add sound Add scenes Create a slide show presentation Unit Lessons.
Macromedia Flash MX 2004 – Design Professional and Interactivity WORKING WITH SYMBOLS.

Macromedia Flash MX 2004 – Design Professional and Interactivity WORKING WITH SYMBOLS.
© Anselm Spoerri Lecture 10 Flash –Recap –Key Components & Tools –Animating Bitmaps –How to modify Color and Transparency of Bitmap –Animating along Motion.

© Anselm Spoerri Lecture 10 Flash –Recap –Key Components & Tools –Animating Bitmaps –How to modify Color and Transparency of Bitmap –Animating along Motion.
Macromedia Flash 5 Intermediate Level Course. Animation Basics Playhead In-Between Frames Keyframe Current Frame Number Framerate Current Time Frames.

Macromedia Flash 5 Intermediate Level Course. Animation Basics Playhead In-Between Frames Keyframe Current Frame Number Framerate Current Time Frames.
Use the Macromedia Flash drawing tools Edit drawings Work with objects Work with text Work with layers Unit Lessons.

Use the Macromedia Flash drawing tools Edit drawings Work with objects Work with text Work with layers Unit Lessons.
Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX DRAWING IN.

Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX DRAWING IN.
Macromedia Flash MX 2004 – Design Professional Animations CREATING.

Macromedia Flash MX 2004 – Design Professional Animations CREATING.
Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX GETTING STARTED WITH.

Macromedia Flash MX 2004 – Design Professional Macromedia Flash MX GETTING STARTED WITH.
Introduction to Macromedia Flash 8

Introduction to Macromedia Flash 8
Create frame animations Create motion-tweened animation Work with motion guides Create motion animation effects Animate text Unit Lessons.

Create frame animations Create motion-tweened animation Work with motion guides Create motion animation effects Animate text Unit Lessons.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.

© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
CIS 205—Web Design & Development Flash Chapter 4 Creating Animations.

CIS 205—Web Design & Development Flash Chapter 4 Creating Animations.
Digital Graphics & Animation

Digital Graphics & Animation
1 © Netskills Quality Internet Training, University of Newcastle Flash 8: Animation Techniques © Netskills, Quality Internet Training, University of Newcastle.

1 © Netskills Quality Internet Training, University of Newcastle Flash 8: Animation Techniques © Netskills, Quality Internet Training, University of Newcastle.

Similar presentations

Ads by Google