Digital Graphics & Animation

Creating Animation Lesson 1

Objectives

• Create a new animation file

• Insert content in frames• Add and delete frames

and keyframes• Create frame-by-frame

animation• Preview and test an

animation

• Create motion and path animation

• Use layers• Copy and move frames• Use the onion skin

feature to view multiple frames

Overview• A majority of Web sites today feature animated

graphics – that is, graphics with motion, also called animations or movies.

• These graphics take many forms including moving or blinking logos, flashing advertisements, lively cartoon characters, product demonstrations, or even how to tutorials.

• Presentation graphics programs also enable you to use animations to enhance onscreen presentations.

Graphics Programs

• Leading programs for creating animations include Macromedia Flash MX and Adobe LiveMotion, while many programs differ slightly, most include common elements.

• You will learn how to create and save an animation file, set options for the file, import graphics for use in the animation, use different methods to control object motion, and preview an animation.

• All work will be completed in class utilizing Edulaunch.com web based medium and Macromedia Flash8.

Explore an Animation Program

• Before you can create an animation, you must become familiar with the unique features of your animation program.

• Most programs include a stage where you place the content for the animation. The stage is called the composition in Adobe LiveMotion.

• The size and shape of the stage determines the dimension of the finished animation.

Explore an Animation Program

• You can import graphics to place on the stage, or use the animation program’s drawing tools to create objects.

• In addition, to the stage, animation programs include a Timeline that holds the frames for the animation.

• A Frame is a single image from the sequence of images that make up an animation , video or movie.

Explore an Animation Program

• You animation program offers its own additional tools and features. For example, Flash groups its features in a panel (small floating windows).

• One key panel, the toolbox, provides tools you can use to draw and format objects in flash.

• These tools look similar to and are used in much the same way as tools in the graphics program Macromedia Fireworks, in which you will be utilizing this semester.

Explore an Animation Program

• Flash also includes a special panel called the property inspector that appears below the stage by default.

• The Property inspector displays settings you can use to alter any object selected on the Stage.

• Note: You can close or minimize panels if desired to free up more space in the program window for the stage.

Create a New Animation• When you create an animation, you create a project file

or work file to hold the animation content. You follow several steps to prepare the file for use.– First, you will need to set the size of the stage– Ideally the stage should be large enough to

accommodate the graphics and motion you plan for the animation.

– You can change the units of measurement for the Stage and even change its background color.

Create a New Animation

• After you have set the stage size, you can adjust zoom setting to make it easier to work with the stage.

• Save the new project using the familiar “Save As” command on the File menu.

• Your animation program saves the project file in its native file format. In Flash, for example, project files use the filename extension fla.

Insert Content in a Frame

• The animation project initially contains a blank stage, a single frame, and a single layer. You will learn to create and insert content, as well as add layers and frames, to build the animation.

• Typically, you add graphics that you created in another application to build the animation.

• You import a graphic file into the animation project file using a command such as “import” on the file menu.

Insert Content in a Frame

• Some programs allow you to import the graphic to a library to make the graphic file easier to use repeatedly.

• Another method for adding content to a frame is to use your animation programs toolbox.

• Use these tools to create shapes, lines, and text objects on the stage and format them with stroke and fill options just as in a graphics program.

Insert Content in a Frame

• Once you’ve imported a graphic, you place it on the stage in the appropriate location.

• If the graphic is in a library, simply drag it to the stage.

• You can rename graphics stored in a library to help you remember their content.

• Use a command on a menu or shortcut menu to rename a library object.

Insert Content in a Frame

• In Flash, you can import an imported graphic to a symbol to help reduce movie file size.

• Flash stores the symbol file only once in the file even if you use the symbol repeatedly throughout the animation.

• Use the convert to symbol command on the modify menu to create a symbol. To add a symbol to a frame, drag it from the library panel just as you would a graphic

Add and Delete Frames an KeyFrames

• Cartoons initially were animated by hand.• An illustrator drew successive variations of a

character on clear acetate cels• Each cel showed the character in a slightly

different position• When cels were viewed in rapid order, the

character then appeared to move.• The more cels the artist drew, the longer the

animation

Add and Delete Frames an KeyFrames

• Each frame in your animation I slike a single cel.

• The frame holds the content the movie displays at that point and time.

• So, to increase the length of your movie, you have to add more frames.

• If you delete frames, you decrease the animation length.

Add and Delete Frames an KeyFrames

• Animation programs actually enable you to add two types of frames: regular frames and keyframes. – Regular frames simply hold content.– A Keyframe provides greater power. You can use

a keyframe to specify a change in the animation, such as a new position for an object.

Add and Delete Frames an KeyFrames

• Add a frame or keyframe using a command on the “Insert” menu.

• Delete frames by first selecting them and then using a command such as “Remove Frames”.

• You can also delete frames using a command such as “clear Keyframe”

Create Frame-by-Frame Animation• At the simplest level, all you need to do to create

an animation is move one object on one frame to create some movement in your animation.

• When you play the animation, the object jumps to a new position for that frame, creating an illusion of movement.

• When you create your own animations, you will want to include action in more than one frame.

• To make the job easier, insert a keyframe at each change in the action.

Create Frame-by-Frame Animation

• Changing the content in a keyframe changes the content in all regular frames following the keyframe on the timeline until the next keyframe.

• If your animation program creates movies at 12 fps (frames per second) by default, inserting a keyframe every 12 frames results in a change in the action every second.

• A project with 60 frames results in a 5-second movie.

Create Frame-by-Frame Animation• When you insert a keyframe, you can change its

content in a variety of ways. You can add and delete objects, replace one object with another, move objects, resize or rotate objects, and so on.

• All these actions simulate some kind of motion or action. For example, you may have seen advertisements that flash different messages on the Web.

• In this case, the animation’s creator replaced one image or text object with another keyframe.

Create Frame-by-Frame Animation

• As you are building your animation, remember to add a keyframe where you want the animation to stop.

• The keyframe should e placed to allow sufficient viewing time after the final content change

• If you insert a new graphic at frame 35, for instance , place the final keyframe at frame 50 to allow for the display of the final graphic.

Preview an Animation• You can preview an animation at any time during its

creation. • Leading animation programs offer several ways to

preview your final animation. • You can drag the Playhead – the vertical red marker in

the Timeline – to see how the animation progresses. ( Drag the playhead toward frame 1 to rewind the movie!)

• You can also use commands on a menu such as “Control” to play or rewind the movie.

• By previewing the animation before you publish the final movie, you can identify and eliminate problems.

Create Motion and Path Animation• Keyframes provide you with even greater power

when you want to include real action in your animation. You can create a motion Tween for an object using keyframes.

• The animation program calculates the proper position for the object in each frame between the keyframes.

• It’s called “tweening” because the program creates the in-between frames for you. You can create two different types of movement using tweening: basic motion and path animation.

Basic Motion Animation

• The first type of movement, a basic motion animation, is created when an object’s position is different at the end of the movie from the start of the movie.

• Place the object in its starting position in the first keyframe.

• In the last keyframe, move the object to its final position.

Basic Motion Animation

• When you instruct the animation program to create a tween, it creates a straight path between the two positions, and the object moves along the path during the movie.

• Animation programs differ greatly in the steps to create motion.

• In Flash, you create motion tweens using either a menu command or an option on the property inspector.

Path Animation• If you want your object to follow a more

elaborate route, use the second type of movement tweening: path animation.

• When creating a path animation, you draw the route or motion path the object should follow.

• The animation program again calculates the object’s proper position along the route for each frame.

• A motion path is drawn on a guide layer to control path animation and can include curves, loops and angles.

Path Animation

• You have few limits in determining where you want your objects to travel.

• To create path animation, you must insert a special layer in the animation called a motion guide layer.

• You draw the path for the animation on this layer.

• To draw the path, you can use tools such as the Pencil or Pen, or another shape tool.

Use Layers

• Layers enable you to enrich the content of any movie.

• Layers, are like transparent sheets stacked on top of each other.

• Layers appear as part of the Timeline, with a separate row on the Timeline for each layer.

• Layers allow you to position objects in front of one another.

Use Layers• For example, you can have objects on one or

more layers and also use a layer to include a background behind the objects.

• Placing objects on different layers lets you animate an object on one layer while leaving the other objects static (not moving).

• You can create simultaneous motion on different layers, such as having an object on one layer follow a motion path while an object on another layer simply changes in color or appearance every several frames or so.

Use Layers• Using layers also makes editing easier.• You can change the content on one layer without

disturbing the work you’ve done on the other layers in your animation.

• Generally, the order of your layers in the Timeline controls which content appears “in front” of the content of layers.

• To content of layers higher in the list appear in the front of the content on other layers lower on the list.

• Thus, if you want to create a layer to hold background content, it should be last in the list of layers.

Use Layers• Layers allow you a great degree of flexibility

because you can modify them in a number of ways after creating them.

• You can add and delete layers as needed, hide and redisplay layers or even lock a layer to prevent further editing.

• To select a layer to work on, just click the layer name.

Copy or move a Frame or Frame Series

• Because you may not know exactly what you want from an animation until you see it onscreen, you may need to adjust the order of some frames.

• Or you may like a particular animation sequence so well that you decide to copy it to numerous locations in your animation.

• You may even decide that you need to extend an animation sequence.

Copy or move a Frame or Frame Series

• You can accomplish all these objectives by working with the frames on the Timeline.

• If you want to move or copy a motion sequence, be sure to select both the first and last keyframes.

• Pasting the copied or moved sequence overwrites existing content in the destination frames, so insert blank frames first, if needed, to hold the pasted frames.

Copy or move a Frame or Frame Series

• To move or copy a sequence with a motion path, select the frames on both the motion guide layer and the content layer before moving or copying.

• When you are inserting or deleting frames on one layer, make sure to adjust the number of frames in other layers as required.

• Otherwise, the animation may end for one layer but continue for others.

View Multiple Frames

• Most animation programs offer an onion skin feature that enables you to view the contents of multiple frames onscreen at once.

• When you do so, you can check an objects motion and determine whether you may need to make slight changes to the position of an object in a particular frame.

• In this way, the onion skin functions as a static preview of a portion of your animation.

View Multiple Frames

• When active, the onion skin feature displays two markers on the Timeline, a starting marker and an ending marker.

• Drag these markers to enclose the frames you want to check.

• When you use this feature, consider hiding all layers, but those holding the motion sequence.

• You’ll be able to see the onionskin objects much more clearly if you do.

Test a Movie

• The onion skin feature can really help you fine tune your animation, but it doesn’t offer the excitement of viewing the live motion.

• You can use a command such as “play” to preview your animation or “Test a Movies” in a window that simulates a Web Browser.

• This allows you to see how your animation may look when viewed on a web page.

Test a Movie

• You can find the command to test a movie on the same menus as the command to play the animation.

• This menu may also offer commands to control how many times the animation plays.

• A Loop command, for example, prompts the movie to play over and over until you issue a “Stop” command.

DAILY HOMEWORK• Lesson 1 – Creating Animation (1 week)

– Wed/Thurs– Read the Lesson PowerPoint– Complete Vocabulary, T/F. Fill in the Blank & Written Questions – Due Friday• Homework is to be turned in before you may work on the applications.• Friday, Homework is late for 70%• Tuesday, Homework is late for 50%• Absences are not excuses since these due dates are pre-determined. All of the lessons

and questions are posted on my web page.

– Friday – Computer Application Projects

– Monday – Computer Application Projects

– Tuesday – Lesson Tests and Quizzes

• All Lesson PowerPoints and Questions are on my website.

• If a student is absent, in ISS or Long term they must access website to get work completed.

Vocabulary

1. Animation2. Fps3. Frame4. Keyframe5. Layer6. Motion path7. Movie8. Onion Skin

9. Panel10. Path Animation11. Playhead12. Project File13. Stage14. Timeline15. Tween

True or False

1. You should create a stage as large as your monitor?

2. A common method of adding content to frames is to import graphics created in another program

3. Keyframes hold special characters called controllers

4. Insert a keyframe each time you want to change the animation action

5. It is best to preview an animation only when you have finished creating it.

True or False

6. You cannot change the position of frames once you’ve added them?

7. In basic motion animation, you draw a path for an object to follow?

8. Layers make it easy to position objects in front of one another?

9. Background objects would usually appear in the layer at the top of the layer list?

10.If you intend to copy frames, you should first create blank frames to hold the copied frames?

Written Questions1. What do you add to

specify a change such as a new graphic or motion in an animation?

2. What is the simplest technique for creating movement in an animation?

3. What do you add to have an object move along a particular route in an animation sequence?

4. What feature enables you to select frames and view a static preview?

5. What can you do to a keyframe to change the length of an animation sequence?

Fill in the Blank

1. The _____ holds frames in the animation2. The _____ holds imported graphics3. Use tools in the _____ to draw or manipulate

objects on an animation layer4. Drag the _____ to rewind or play a movie in

an animation program5. To have the animation program calculate

movement from one frame to another, craete a(n) _____

Fill in the Blank6. Insert a(n) _____ layer to create path animation.7. _____ a layer so that its content does not

appear on the stage.8. To select multiple layers, click one layer, hold

down _____, and click another layer.9. The _____ feature lets you view the contents of

multiple frames at the same time.10. Use the _____ command to play an animation

over and over until you issues a “Stop” command.

Project Assignment

Flash Skill lessons