Flash Lesson 1

Simple Animation

Get Acquainted With The Software

Get Acquainted With The SoftwareMenu Bar

Menu on top. For this first lesson, we will mostly be concerned with File. Please look at the others, you will be using them in later examples.

Get Acquainted With The SoftwareStage

The stage is where you will be placing objects to animate for this lesson. The stage is very important in Flash; everything that happens in Flash is created on the stage.

Get Acquainted With The SoftwareTimeline

• The timeline controls the animation. Each space on the timeline allows objects to be added, moved or coded to perform a purpose. In this example, we will use the timeline to animate

Get Acquainted With The Software

Menu Bar, File Menu

Stage

Timeline

Resize StageFor this lesson, we will resize the stage. Right click (MAC – Command Click) and choose Document Properties

For this lesson, dimensions are 720 W by 720 H, frames per second on timeline 50 and background white

Change Stage View SizeChange the stage user view size from 100% to 50% (double click), for this lesson, it allows the “Flash Animator” to shrink the stage so he/she can have access to the Timeline, File Menu and the Stage all at the same time.

Have Files ReadyThe files for this lesson are available from the link on the lesson webpage. Download the files and have them ready in a folder for use with your animation.

http://www.jondemo.com/purduecalumet/lesson1.zip

Add First Image To Stage

Click on the first frame in the timeline

Next:•Click on File•Click on Import•Import to Stage •Or <ctrl> R

Add First Image To Stage

Navigate to the folder containing the imagesChoose:Purdue-signature.pngClick Open

Add First Image To StageThe image is now on the stage with a blue boundary around it. •It needs to be reshaped for this lesson.•Click on Modify•Transform •Free transform• the image will now have pull handles around it.

Animate First ImageRename timeline by double clicking on the layer name and type Purdue.

Next, click the #1 position on the timeline before resizing image.

Hover the mouse over the top right pull handle so a “double sided arrow” appears. Press the shift key on keyboard and pull the handle down so the image shrinks.

The image on the stage is now smaller and it appears cleaner. It’s ready to animate

Animate First ImageReturn to the timeline, navigate to frame 50, highlight that frame by clicking the mouse

The timeline needs another keyframe to animate the image.•Right click on point 50•Create a keyframe by clicking Insert Keyframe

Animate First ImageThe appearance of the timeline has changed. The area between 1 & 50 is now gray

Right click over the gray area on the timeline and click: Create Classic Tween

Note:There is now a “tweeningarrow” on the timeline

Animate First ImageClick on position 1 on the timeline

Click on the Purdue University image/object on the stage so the software assigns “focus” on it

Since the Purdue image has focus, it will cause a properties window to appear on the right of the stage.Choose Alpha in the style dropdown and set the Alpha slider bar to 0%

Animate First ImageSlide the timeline’s red pullhandles back and forth between 1 and 50, you will see the image change and animate on the stage. It will go from transparent to full color and back.

Time To Save Your Work

Click on file -> Save asSave the file into an appropriate folder with an appropriate name in an appropriate location on your computer

Add Second Image To Stage

To add another animation, it is best practices to add the new animation on it’s own layer. Right click on the timeline and click Insert Layer.

A new layer has been created on the timelineDouble click on the layer name and name the new layer Pete

Add Second Image To StageClick on frame 50 on the Pete layer of the timeline to highlight it

Right click on frame 50 of the Pete layer and click Insert Keyframe

This Keyframe will allow you to insert a new image onto this layer. •Later you will add a second keyframe with a tween on the layer to animate.

Add Second Image To Stage

Click on frame 50 on the Pete timeline

Next:•Click on File•Click on Import•Import to Stage •Or <ctrl> R

Add Second Image To Stage

Navigate back to the folder containing the imagesChoose:Purdue_Pete_svg.pngClick Open

Animate Second ImageThe image is too large for the stage. •It must be reduced. Put the mouse over the sizing handles so the double sided arrow appears.•Press shift on the keyboard and press on the mouse.•Pull down to size

Animate Second Image

Reduce Purdue Pete’s size so he fits on the stage and center him.

Navigate to spot 100 on the timeline, click and insert a keyframe ON BOTH LAYERS

Animate Second ImageHighlight a frame inside of the gray area ONLY on the Pete layerbetween the keyframes

Right click over the highlighted frame and click Create Classic Tween

There is now an arrow across the tweened area between the keyframes

Animate Second Image

Click on the left keyframe on the Pete row at frame 50 on the timeline

Shrink Pete by holding the shift key while pulling down on the pull handles

Animate Second ImageSlide the red pull handle back and forth on the timeline to viewthe animation

Pete grows and shrinks on the stage as the red pull handle goes back and forth between the keyframes at 50 and 100.

Save and Review

Click File -> Save or press <ctrl> S on your keyboard

Review•The stage has been adjusted.•A Purdue University image was put on the stage. It was animated by going from transparent to full image•Purdue Pete was added to the stage. The animation will have Pete appear out of nowhere and become full size.

Add Third Image To Stage

To add third animation, a new layer needs to be created. Right click on the timeline and click Insert Layer.

A new layer has been created on the timelineDouble click on the layer name and name the new layer Calumet

Add Third Image To StageClick on frame 100 on the Calumet layer of the timeline to highlight it

Right click on frame 100 of the Calumet layer and click Insert Keyframe

This Keyframe will allow you to insert a new image onto this layer. •Later you will add a second keyframe with a tween on the layer to animate.

Add Third Image To Stage

Click on frame 100 on the Calumet timeline

Next:•Click on File•Click on Import•Import to Stage •Or <ctrl> R

Add Third Image To Stage

Navigate back to the folder containing the imagesChoose:CalumetCt.png Click Open

Animate Third ImageThis time, the image is too small for this Flash.• It must be made larger.•It must also be moved.Click on the Calumet object until the four-sided arrow appears; pull it to the center of the stage. •Put the mouse over the sizing handles so the double sided arrow appears.•Press shift on the keyboard and press on the mouse.•Pull out to expand the size

Animate Third ImageNavigate to spot 150 on the timeline, click and insert a keyframe ON ALL THREE LAYERS

Highlight a frame inside of the gray area ONLY on the Calumet layerbetween the keyframes

Right click over the highlighted frame and click Create Classic Tween

There is now an arrow across the tweened area between the keyframes

Animate Third Image

Flatten Calumet by holding the shift key while pulling down on the center pull handles

Click on the left keyframe on the Calumet row at frame 100 on the timeline

Animate Third ImageSlide the red pull handle back and forth on the timeline to viewthe animation

Calumet flattens and rises on the stage as the red pull handle goes back and forth between the keyframes at 100 and 150.

Save and Review

Click File -> Save or press <ctrl> S on your keyboard

Review•A Purdue University image was put on the stage. It was animated by going from transparent to full image•Purdue Pete was added to the stage. The animation will have Pete appear out of nowhere and become full size.•Calumet was added to the stage. The animation will have Calumet starting out flat and expanding to normal size

Fourth AnimationAdd keyframes for all three layers on the timeline at frame 200

Highlight a frame inside of the gray area ONLY on the Calumet layer

Right click over the highlighted frame and click Create Classic Tween

There is now arrows across the tweened area between the keyframes

& the Pete layers between the keyframes

Click the keyframe at frame 200 on the Pete layer ONLY.

Grab Pete’s center top pull handle and pull down until flat

Using the down button on the keyboard, send the flattened Pete to the bottom of the stage

Fourth Animation

Click the keyframe at frame 200 on the Calumet layer ONLY.

Highlight Calumet on the stage.

Using the down button on the keyboard, send the Calumet towards the bottom of the stage

Fourth Animation

Save and Review

Click File -> Save or press <ctrl> S on your keyboard

Review•Purdue Pete was added to the stage. The animation will have Pete appear out of nowhere and become full size.•Calumet was added to the stage. The animation will have Calumet starting out flat and expanding to normal size•Calumet now pushes Purdue Pete to the bottom of the stage into oblivion

Add a Fourth Image

To add a fourth image to animate, a new layer needs to be created. Right click on the timeline and click Insert Layer.

A new layer has been created on the timeline

Double click on the layer name and name the new layer Peregrine

Add a Fourth ImageClick on frame 200 on the Peregrine layer of the timeline to highlight it

Right click on frame 200 of the Peregrine layer and click Insert Keyframe

This Keyframe will allow you to insert a new image onto this layer. •Later you will add a second keyframe with a tween on the layer to animate.

Add a Fourth Image

Click File -> Import -> Import to stage

Add new image:

Choose:PUC-PeregrineCC.png Click Open

Setting Up Final Animation

Place the Peregrine at the center of the stage under UniversityLeave an gap between the Peregrine and University

Flash places the Peregrine at the top left of the stage. It must be resized and moved. Resize by using the pull handles, then move with the mouse or arrows on the keyboard

Setting Up Final AnimationAdd keyframes to frame 250 of the Peregrine, Calumet and Purdue Layers ONLY, no new keyframe for the Pete layer

Right click on the Peregrine layer between the keyframes at 200 and 250 and choose Create Classic Tween. Note a new arrow has been added to the timeline on the Peregrine layer

Setting Up Final AnimationClick on the frame at 200 on the Peregrine layer to highlight it

Using the top center pull handle, pull the peregrine’s image down so it is as flat as possible

Setting Up Final AnimationUsing the arrow buttons on the keyboard, lower the “flattened” peregrine to the very bottom of the stage

Moving the red handle back and forth along the timeline will show the peregrine changing shape & rising.

Setting Up Final AnimationHighlight a frame inside of the gray area ONLY on the Calumet layerbetween the keyframes

Right click over the highlighted frame on the Calumet layer and click Create Classic Tween

There is now an arrow across the tweened area between the keyframes

Setting Up The Final Animation

Click on frame 250 on the Calumet layer so it’s highlighted

The Calumet object/image is now highlighted on the stage

Setting Up The Final AnimationKeeping frame 250 highlighted on the Calumet layer, move the Calumet object by using the arrow keys on the computer keyboard to raise the Calumet image

•Next, click on frame 250 on the Peregrine layer to use the keyboard arrow keys to lower the peregrine object five or six places on the stage

•It is now not so close to the Calumet object and is centered nicer.

Setting Up The Final AnimationDrag the red handle between frames 200 and 250 on the timeline

The Calumet object pulls the Peregrine up from the location where it crushed Purdue Pete and becomes Purdue Calumet’s new mascot.

Save and Review

Click File -> Save or press <ctrl> S on your keyboard

Review•Calumet was added to the stage. The animation will have Calumet starting out flat and expanding to normal size•Calumet now pushes Purdue Pete to the bottom of the stage into oblivion•Calumet pulled the Peregrine out of what was Purdue Pete into it’s rightful place as Purdue Calumet’s mascot.

HousekeepingWe will discuss controlling looping later (looping is when the animation plays over and over). At this point, we will hold the final image for a couple second so the viewer can look at the result of the animation. This is done through adding keyframes to the timeline.

The Peregrine, Calumet and Purdue layers all get a new keyframe at 350.Pete does not because he was eliminated earlier in the animation.

If Pete had been given a keyframe, the object that was him (smashed at the bottom of the stage), would still be part of the animation at the end. Pete was done, he needed to disappear and he did when the keyframes stopped on his layer.

Publishing and Finalizing

Click File->Publish Setting

Note the choices checked for this lesson..swf is the actual animation.html is a website to house the animation.exe is a stand alone file that will play the animation

Publishing and FinalizingThe files were created by publishing into the designated folder.•The .fla file is the WIP file we used for this lesson.

Final ProductClick to view

Thank you for viewing my Flash lesson