Flash Lesson 1 Simple Animation

Get Acquainted With The Software

Get Acquainted With The Software Menu 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 Software Stage 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 Software Timeline 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 Stage For 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 Size Change 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 Ready The 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.

Add First Image To Stage Click on the first frame in the timeline Next: Click on File Click on Import Import to Stage Or R

Add First Image To Stage Navigate to the folder containing the images Choose: Purdue- signature.png Click Open

Add First Image To Stage The 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 Image Rename 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 Image Return 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 Image The 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 “tweening arrow” on the timeline

Animate First Image Click 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 Image Slide 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 as Save 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 timeline Double click on the layer name and name the new layer Pete

Add Second Image To Stage Click 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 R

Add Second Image To Stage Navigate back to the folder containing the images Choose: Purdue_Pete_svg.png Click Open

Animate Second Image The 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 Image Highlight a frame inside of the gray area ONLY on the Pete layer between 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 Image Slide the red pull handle back and forth on the timeline to view the 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 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 timeline Double click on the layer name and name the new layer Calumet

Add Third Image To Stage Click 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 R

Add Third Image To Stage Navigate back to the folder containing the images Choose: CalumetCt.png Click Open

Animate Third Image This 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 Image Navigate 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 layer between 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 Image Slide the red pull handle back and forth on the timeline to view the 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 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 Animation Add 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 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 Image Click 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 University Leave 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 Animation Add 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 Animation Click 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 Animation Using 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 Animation Highlight a frame inside of the gray area ONLY on the Calumet layer between 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 Animation Keeping 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 Animation Drag 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 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.

Housekeeping We 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 Finalizing The files were created by publishing into the designated folder. The.fla file is the WIP file we used for this lesson.

Final Product Click to view

Thank you for viewing my Flash lesson