Adobe Flash CS4 – Illustrated Unit D: Creating Animation.

Slides:



Advertisements
Similar presentations
INTRODUCTION TO ADOBE FLASH CS4
Advertisements

Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
© 2011 Delmar, Cengage Learning Chapter 7 Importing and Modifying Graphics.
Importing and Modifying Graphics
© 2010 Delmar, Cengage Learning Chapter 7: Importing and Modifying Graphics.
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 slices and hotspots Create links in Web pages Create rollovers from slices Create basic animation Add tweening symbol instances to create animation.
Macromedia Flash MX 2004 – Design Professional Animations CREATING.
Create frame animations Create motion-tweened animation Work with motion guides Create motion animation effects Animate text Unit Lessons.
Creating Animation Pertemuan Matakuliah: L0182 / Web & Animation Design Tahun: 2008.
Chapter 8 – Part I Interactive Multimedia Authoring with Flash: Animation “Computers and Creativity” Richard D. Webster, COSC 109 Instructor Office: 7800.
© 2010 Delmar, Cengage Learning Chapter 4: Creating Animation.
© 2011 Delmar, Cengage Learning Chapter 8 Building Complex Animations.
1 © Netskills Quality Internet Training, University of Newcastle Flash 8: Animation Techniques © Netskills, Quality Internet Training, University of Newcastle.
Adobe FlashProfessional CS5 – Illustrated
FLASH LESSON 2: MOTION TWEEN EFFECTS MOTION GUIDE TEXT ANIMATION
Macromedia Flash Design Professional Animations CREATING.
Dm11 – Flash Creating Animations Animations CREATING.
WMD Creating Animations Flash-5 Zhou Hong. Contents Review 1 Frame Types 2 Frame-by-Frame Animation 3 Action & Shape Tweening 4.
1 Flash Basics by Dr SC Li. 2 File Types  In general, Flash 5.0 generates 3 types of files:  ???.fla  Flash ’ s working file  ???.swf  Flash movie.
Chapter 4 Creating Animations.
Tutorial 2 Drawing Text, Adding Shapes, and Creating Symbols.
4-1 OBJ Copyright 2003, Paradigm Publishing Inc. Creating Animation and Guidelines for Flash Project Design Macromedia Flash Design & Application.
Chapter Lessons Create frame-by-frame animations
CT1514.  What is Motion Guide Layer?  Controls the movement of objects in a Motion tween animation  How to create a Motion Guide Layer?  Click on.
Adobe Flash CS4 – Illustrated Unit C: Using Symbols and the Library Panel.
© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® INTRODUCTION TO FLASH ANIMATION.
Copyright © 2003 Pearson Education, Inc. Chapter 3, Slide 1 by Michael Kay The Web Wizard’s Guide to Flash.
® Copyright 2008 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH CS3.
® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® ® 1 INTRODUCTION TO ADOBE FLASH PROFESSIONAL CS5.
Flash Adobe Flash Introduction Kyungeun Park. Bitmap vs. Vector based  Bitmap –Bitmaps are made up of single pixels  Vector based –Vector graphics are.
XP Tutorial 4 Special Animations. XP New Perspectives on Macromedia Flash MX Special Layers for Animation Animation Using a Motion Guide Layer.
Adobe Flash CS3 Revealed
© 2011 Delmar, Cengage Learning Chapter 4 Creating Animations.
Chapter 4 Creating Animations. Chapter 4 Lessons 1.Create motion tween animations 2.Create classic tween animations 3.Create frame-by-frame animations.
2006 Adobe Systems Incorporated. All Rights Reserved. 1 INTRODUCTION TO ADOBE FLASH CS3.
Flash CS3 Pro HOT CH 5 Shape Tweening. Shape tweening requirements: Vector-based objects No grouped objects No bitmaps No symbols No type, type must be.
Motion Tweening – Lesson 81 Motion Tweening Lesson 8.
I MPORTING AND M ODIFYING G RAPHICS. 1. Understand and import graphics 2. Break apart bitmaps and use bitmap fills 3. Trace bitmap graphics Objectives.
Flash CS 5 Interface BY NSCHEWCZYK | ©2012. MENU BAR A bar at the top of the window. It lists menu options including: File, Edit, View, Insert, Modify,
Dm 11 - Flash Special Effects Special Effects CREATING.
Macromedia Flash MX 2004 – Design Professional Special Effects CREATING.
Agenda Sketchbook DUE next Tues - assignment dates listed on next page 1 - Get out your sketchbook and note these terms: Symbols (reusable object):
Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation.
Distributed Multimedia Programming Week - 3 Shape Tweening Symbols and Instances.
Tutorial 3 Creating Animations. XP Objectives Learn the different elements of animation Create frames and layers Organize frames and layers using the.
Flash Develop Rich Internet Content and Applications –Design motion graphics or build data-driven applications Flash Document = “.fla” filename extension.
XP Tutorial 3 Creating Animations. XP New Perspectives on Macromedia Flash MX Elements of Animation Layers are used to organize the content of.
Workplace THE. Men u Performs basic tasks like opening, saving, and printing your Flash files Cutting and pasting artwork or text Viewing your project.
Introduction to Animation In animation, a series of images are rapidly changed to create an illusion of movement.
Animation in flash. Frame-by-Frame Animation An animation is made from a series of framed images displayed one after the other to create the motion. Flash.
Adobe Flash Professional CS5 – Illustrated Unit D: Creating Animation.
To play, start slide show and click on circle Lesson 3 Lesson 3 Lesson 3 Lesson 4 Lesson Lesson 4.
Adobe Flash Professional CS5 – Illustrated Unit C: Using Symbols and the Library Panel.
Tutorial 3 Creating Animations.
Creating Special Animations
Tutorial 3 Creating Animations.
Flash Interface, Commands and Functions
Adobe Flash Professional CS5 – Illustrated
Creating Complex Animations
Animation Part III: Interactive Multimedia Authoring with Flash
Unit Lessons Create frame animations Create motion-tweened animation
Exercise 63 Use a Flash movie clip symbol to store an animation that you need to use more than once in an application. This is very important for keeping.
INTRODUCTION TO ADOBE FLASH CS4
Animate Workspace. Objective % Utilize appropriate tools and methods to produce digital animation.
Chapter Lessons Create shape-tweened animations Create a mask effect
INTRODUCTION TO FLASH ANIMATION
Develop Rich Internet Content and Applications
ANIMATE WORKSPACE Stage Timeline Properties Panel Library Panel
Presentation transcript:

Adobe Flash CS4 – Illustrated Unit D: Creating Animation

Adobe Flash CS4 – Illustrated Objectives Understand animation Use frames Create a motion tween Create and copy a motion path Use easing Add nested symbols to a movie clip

Adobe Flash CS4 – Illustrated Objectives (cont’d) Animate nested symbols Create frame-by-frame animation Create a shape tween Use shape hints

Adobe Flash CS4 – Illustrated Understanding Animation Create and adjust frames and artwork that appears in then Determine length of the animation Set a frame rate to control the speed Animate shape, size, color, position

Adobe Flash CS4 – Illustrated Specifying Frames Change over time is represented by frames in the Timeline   Blank keyframe Single frame in the Timeline when a new document is opened   Keyframe Special frame that signals a change in a movie or animation   Frame span A group of frames

Adobe Flash CS4 – Illustrated Selecting Animation Methods Frame-by-frame animation Tweened animation Flash animates object gradually over several consecutive frames You can control action in every frame Can be time-consuming and result in large file size Flash automatically creates animation between two keyframes You define starting and ending keyframes, then modify object/symbol Types of tweens  Motion tweens  Shape tweens

Adobe Flash CS4 – Illustrated Selecting Animation Methods Sample frame-by-frame animation

Adobe Flash CS4 – Illustrated Selecting Animation Methods Sample motion tween

Adobe Flash CS4 – Illustrated Understanding Tweens in the Timeline Motion tween spans   Blue   Symbols show movement   Property keyframe Contains specific property values that change in that frame: position, scale, skew, rotation, color, or filter Shape tween spans   Green   Use morphing

Adobe Flash CS4 – Illustrated Using Frames Frame types

Adobe Flash CS4 – Illustrated Using Frames Viewing a frame span

Adobe Flash CS4 – Illustrated Planning Movies with Storyboards Storyboard   Is a visual script that contains captions to describe the action in a movie   Uses panels to map out sequence and major action points of the animation   Allows you to do your tweaking before you work your animation in Flash

Adobe Flash CS4 – Illustrated Planning Movies with Storyboards Sample storyboard

Adobe Flash CS4 – Illustrated Creating a Motion Tween Apply a motion tween to a symbol by:   Placing an instance in starting keyframe   Modifying position or transformation properties of the instance in last keyframe of the animation

Adobe Flash CS4 – Illustrated Creating a Motion Tween Adjusting the value of a property keyframe

Adobe Flash CS4 – Illustrated Creating and Copying a Motion Path Copy/paste motion tween on other layers to keep animations consistent and save time Use the Motion Presets panel Motion Presets panel

Adobe Flash CS4 – Illustrated Creating and Copying a Motion Path Creating a motion path

Adobe Flash CS4 – Illustrated Creating and Copying a Motion Path Modifying a motion path

Adobe Flash CS4 – Illustrated Using Easing Adjust easing on Properties panel Use easing to speed up or slow down start or end of an animation   Object eases in: starts out slow, then speeds up at the end   Object eases out: starts out fast, then slows down

Adobe Flash CS4 – Illustrated Using the Motion Editor Provides detailed control over properties in every keyframe Sections: Basic Motion, Color Effect, Transformation, Filter, and Eases Each property has its own timeline   Adjust X and Y values   Add keyframes   Create custom easing   Apply preset easing option

Adobe Flash CS4 – Illustrated Using the Motion Editor The Motion Editor

Adobe Flash CS4 – Illustrated Adding Nested Symbols to a Movie Clip Nested symbols   Are created by placing a symbol inside another symbol   Create a unique new symbol while preserving individuality of original symbols

Adobe Flash CS4 – Illustrated Adding Nested Symbols to a Movie Clip Creating a Movie Clip symbol

Adobe Flash CS4 – Illustrated Adding Nested Symbols to a Movie Clip Extending a frame span to multiple layers in a movie clip

Adobe Flash CS4 – Illustrated Understanding Timeline Commands Commands that affect frames are on Timeline submenu of Edit menu   Remove Frames   Cut Frames   Clear Frames

Adobe Flash CS4 – Illustrated Animating Nested Symbols Still allows reuse of the symbol in other parts of the movie, where it can be part of another animation

Adobe Flash CS4 – Illustrated Animating Nested Symbols Modified nested symbols

Adobe Flash CS4 – Illustrated Animating Nested Symbols Modifying instances in a new keyframe

Adobe Flash CS4 – Illustrated Animating Nested Symbols Viewing a movie clip

Adobe Flash CS4 – Illustrated Creating Frame-by-Frame Animation Comes closest to traditional animation techniques Content is created in every frame Can be time-consuming, but offers detailed control over the animation

Adobe Flash CS4 – Illustrated Creating Frame-by-Frame Animation Completed frame-by-frame animation

Adobe Flash CS4 – Illustrated Creating Frame-by-Frame Animation Viewing frame-by-frame animation

Adobe Flash CS4 – Illustrated Creating a Shape Tween Changes (morphs) starting shape into a different ending shape Create by using shapes instead of symbols, bitmap images, or text   Place starting shape in first frame   Place ending shape in last frame   Create the shape tween

Adobe Flash CS4 – Illustrated Creating a Shape Tween Creating a cloud shape

Adobe Flash CS4 – Illustrated Creating a Shape Tween Reshaping an object in a shape tween

Adobe Flash CS4 – Illustrated Using Shape Hints Mark specific points on beginning and ending shapes that Flash uses to transition one area into another Correct appearance of a shape tween Work most effectively when arranged in a clockwise or counterclockwise pattern

Adobe Flash CS4 – Illustrated Using Shape Hints Positioning shape hints on the starting shape

Adobe Flash CS4 – Illustrated Using Shape Hints Positioned shape hints on the ending shape

Adobe Flash CS4 – Illustrated Using Shape Hints Improved shape tween