Get Adobe Flash player
Turn off your iPad. It is not to be used (in any way) in this classroom, either for academic or recreational use (unless approved by the instructor). Ignoring this will result in detention and further disciplinary action (Gross Misconduct/Refusal to comply). Did you remember to put your assignments in a folder? Did you label the folder after the assignment title? Did you save your file in the appropriate manner? If not: NO GRADE! Check your PowerSchool frequently. It's your RESPONSIBILITY!

 

Fluid Animation: Shapes Project

Due Date: May 2


In your Multimedia Folder, create a new folder and title it "Fluid Animation"

Create a folder inside your "Fluid Animation" folder and name that one "Shapes Project"

BE SURE TO SAVE YOUR WORK AT THE END OF EVERY PART!

Part I - Setting the Stage

Open the program called Adobe Flash Professional

Go to "File"

Select "New" then select "Flash Project"

Select "OK"

Name the project "Shapes Project"

Set the "Root Folder" to point to your "Shapes Project" folder

Leave the other settings as is

Click on the "Create Project" button

In the TimeLine Panel/Pallette, rename "Layer 1" to "Red Circle"

Create a new TimeLine layer and call it "Blue Square"

Create another TimeLine layer and call it "Green Triangle"


 

Part II - Creating Shapes

In the Library Panel/Pallette, right click in the gray area under the word "name" and select "New Symbol"

Name the new symbol "Red Circle"

Select "Graphic" under the Type option

This puts your project in "Isolation Mode" the usual boxed in area (the stage) is now gone and you should see just a white background with an infinite amount of space to create in.

 

Draw a red circle

You can select the circle with the black arrow and move it around. Try and center the symbols' dot with the isolation mode's target in the middle of the screen.

Now, it is time to leave "Isolation Mode." We do this by click on the word "Scene" at the top of this mode's window. This will take us back to the "Stage."

Repeat this process to create a Blue Square and a Green Triangle (In order to create the triangle, use the pen tool. It will only create the outline so you have to use the Paint Bucket to fill it with green paint).

Now, make sure you are in the "Scene" and not on any shape's localized timeline.

Select the Red Circle's timeline. Drag the Red Circle element to white "stage" area. Repeat this process for the Blue Square and the Green Triangle, making sure that you have the appropriate layers selected when you drag the shapes to the stage.


 Part III - Transformation

Select the Green Triangle and choose "Modify" from the top  menu, then select "Transform" and then "Scale." This will allow you to resize the triangle. Scale it down so that it looks more like what is in the example image. (hint: while scaling, hold down the "ctrl" key to constrain its proportions)

You can scale the objects another way by simply clicking on them and grabbing the corner to resize them.  (hint: in this manner of transformation, use the "Shift" key, instead of the CTRL key, to constrain proportions) 


 Part IV - Motion and Movement 

On the Timeline Panel/Palette, scroll and right click on the little box on the Red CircleTimeline layer. This little box is called a "frame." Select "Insert Frame." What has happened here is that we have given the red circle space and time to work in. Without these individual "frames" being filled in, the circle would have height and width, but no time to function in. Time is the key element for all motion to occur. 

 Now, right click on the Red Circle's gray Timeline bar and select "Create Motion Tween." Notice the bar turns a blue color. This is essentially the same as giving the red circle life. Now, it has height, width, time, and now life to do what it needs to do what it does. 

Click on the Frame 1 and move the Red Circle to the left side of the stage. Now, right click on Frame 120  and select "Insert Frame". Then, move the Red Circle to the right side of the stage. You should see a line that connects the Frame 1 location to the Frame 120 location.

You should also notice a greet dotted line trailing the Red Circle. This shows you the animation path for this object.

 

Notice that the Blue Square and Green Triangle have disappeared. They are not missing. They simply don't have the time like the Red Circle does. They also need time that extends out to 120 frames. Be sure to create these.

For the Blue Square, position its position, for Frame 1, down in the bottom right corner. Have its Frame 120 position end in the Upper left corner.

For the Green Triangle, positions its location, for Frame 1, up in the upper right hand corner. Have its Frame 120 position end in the lower left corner. 

You can drag the "Play Back Head" back and forth on the timeline to view the actual animated sequence taking place.

 


 Part IV - Enhancements 

For the Green Triangle, at Frame 60, rescale it so that it is larger than what it is at Frame 1. At Frame 120, rescale it to its original size. Notice how the triangle will expand and contract over time.

For the Blue Square, we can cause it to rotate by selecting the last frame on its timeline and then changing the "Direction" under the Properties panel (on the right side). Select CW (Clockwise) from the drop down menu next to the word "Direction." 

The Green Triangle seems to obscure our other objects. We would like to see them in their transformations. Click on Frame 60 and then click on the Green Triangle shape. On the Properties panel/palette, find the Color Effect option and change the drop-down item to "Alpha." This will allow us to modify the opacity of the shape. 

Set the Alpha setting to 41. You will also have to click on the Frame 120 to reset the original alpha setting back to 100%. This will cause the Green Triangle to be bright green, fade to become semi-transparent, and then become solid again. 

We can have fun with the red circle too. 

Click on Frame 60 on the Red Circle timeline. Select the actual Red Circle on the stage. Now, under the Properties Panel/Pallet, select "Tint" from the Color Effect's drop-down menu. Change the settings to this: 

Tint: 75%
Red: 77
Green: 22
Blue: 221

Notice how the circle becomes a more purple color? 

While we're at it, let's change the circle's trajectory. While you're still on Frame 60, grab the Red Circle and drag it to the bottom of the stage. You should see its animation path alter to form a "V" shape. This causes the circle to bounce from the top to the bottom of the stage.

 

If you want to slow the animation down, or speed it up, you do that by modifying the FPS settings in the Properties box. Make sure you click outside the "Stage" area (just click in the gray part) and you should see the FPS setting. By default, it is set to 24. This number translates into "Frames Per Second." So, your timeline is not 120 seconds, but 120 frames per second. 120 frames, divided by 24 frames per second is 5 seconds.


 

Part V: Exporting 

Save all of your work before you begin the export 

Go to File and then select "Export" 

Select "Export Movie" 

Name this movie "Shapes Project" 

Select "SWF Movie" from the drop down. This stands for "Shockwave Mofie Format" 

Make sure you're saving this file in the proper folder. At this point, please save your .SWF file into a "Fluid Animation" folder (create a Fluid Animation folder inside your Multimedia folder and be sure to save it in there)

Open that folder and open the "Shapes Project" movie you just created. There is your animation.

Relax. You made it. You're done. Take a break.