Digital Graphics & Animation - PowerPoint Presentation

Slide1

Digital Graphics & Animation

Creating Animation

Lesson 1

Slide2

Objectives

Create a new animation fileInsert content in framesAdd and delete frames and keyframesCreate frame-by-frame animationPreview and test an animation

Create motion and path animation

Use layers

Copy and move frames

Use the onion skin feature to view multiple frames

Slide3

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.

Slide4

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.

Slide5

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.

Slide6

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

T

imeline

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.

Slide7

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.

Slide8

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.

Slide9

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.

Slide10

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

.

Slide11

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.

Slide12

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.

Slide13

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.

Slide14

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

Slide15

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

Slide16

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.

Slide17

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.

Slide18

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”

Slide19

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.

Slide20

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.

Slide21

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.

Slide22

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.

Slide23

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.

Slide24

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.

Slide25

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.

Slide26

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.

Slide27

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.

Slide28

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.

Slide29

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.

Slide30

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.

Slide31

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.

Slide32

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.

Slide33

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.

Slide34

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.

Slide35

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.

Slide36

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.

Slide37

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

e

nclose 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.

Slide38

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.

Slide39

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.

Slide40

DAILY HOMEWORK

We complete 1 chapter in a week.

Monday

–Read chapter & Complete all chapter vocabulary-

Due Monday

Tuesday

– Complete True-False & Fill in the blank questions –

Due Tuesday.

Wed/Thurs

– Complete Written Questions –

Due Friday

Homework is due daily.

10 points off every day its late.

You can turn work in early- just in case of absences.

Absences are not excuses.

Work received after the assigned week is late and receives 50%.

Slide41

Vocabulary

AnimationFpsFrameKeyframeLayerMotion pathMovieOnion Skin

Panel

Path Animation

Playhead

Project File

Stage

Timeline

Tween

Slide42

True or False

You should create a stage as large as your monitor?

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

Keyframes hold special characters called controllers

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

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

Slide43

True or False

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

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

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

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

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

Slide44

Written Questions

What do you add to specify a change such as a new graphic or motion in an animation?What is the simplest technique for creating movement in an animation?What do you add to have an object move along a particular route in an animation sequence?

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

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

Slide45

Fill in the Blank

The _____ holds frames in the animation

The _____ holds imported graphics

Use tools in the _____ to draw or manipulate objects on an animation layer

Drag the _____ to rewind or play a movie in an animation program

To have the animation program calculate movement from one frame to another,

craete

a(n) _____

Slide46

Fill in the Blank

Insert a(n) _____ layer to create path animation.

_____ a layer so that its content does not appear on the stage.

To select multiple layers, click one layer, hold down _____, and click another layer.

The _____ feature lets you view the contents of multiple frames at the same time.

Use the _____ command to play an animation over and over until you issues a “Stop” command.

Slide47

Project Assignment

Flash Skill lessons