flash lesson 1 simple animation. get acquainted with the software
Post on 29-Dec-2015
219 Views
Preview:
TRANSCRIPT
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
top related