Adobe Animate: The Shapes Project (35 pts)

Due Date: October 22

Rationale
Part 1
Part 2
Rubric
Standards

Technology is designed by humans to make our lives more "convenient." More often than naught, the word "convenient" is interchanged with "easy," though the two are not necessarily the same. In reality, convenience comes with mastery over a technology. Just because something is easy, it doesn't make it worthwhile...or valuable.

Animation originated with the pencil sketch drawings that were arranged in a sequence and then filmed/photographed at a high speed. This created the sensation of movement over time, tricking the mind into thinking it is observing actual movement. The truth of it is that this is simply an illusion.

Fluid Animation removes a lot of the redundancy that Frame-by-Frame animation enforces on the user. Instead of creating multiple images of similar (yet sequenced) images with the most minute differences between them, now objects and characters can be moved (tweened) across distances, perform actions according to "Key Frames," (points in time where a movement or action is triggered), employ layers of animations within animation, etc. So, the flexibility is great and the learning curve is equally as great. However, once learned, the convenience is a lasting impression.

In your Multimedia Folder, create a new folder and title it "Adobe Animate"

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

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

Part I - Setting the Stage

Open the program called Adobe Animate

Go to "File"

You should see this screen:

homescreen

Select the "Education" button at the top and then select "Low" from the Presets

Click on the blue "Create" button after you have made your selection

Under "Window" (on the top menu) select "Workspaces" and then choose "Essentials"

In the TimeLine Panel/Pallette (at the bottom of the screen), rename "Layer 1" to "Red_Circle"

timeline1

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

library1

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.

Select the "Circle" tool on the toolbar and draw a red circle (Your toolbar is docked on the right hand side of Adobe Animate. You can undock this by clicking on the three little lines in the upper right hand corner and selecting "Unlock" - this will allow you to reposition/resize the toolbar however you want.

This is how mine looks:
toolbar2

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. If you think your circle is too big or too small, select the entirety of the circle, right click and select "Transform" and then "Scale." This will allow you to alter the size of the shape.

Now, it is time to leave "Isolation Mode." We do this by click on the word left pointing arrow (next to the at the top of this mode's window). This will take us back to the "Scene." (the whole presentation we are working in is considered the Scene while the white area is considered the "Stage")

Repeat this process to create a Blue Square and a Green Triangle (In order to create the triangle, you can use the pen tool or create one with the polygon tool on your tool bar. If you use the pen tool, it will only create the outline so you have to use the Paint Bucket to fill it with green paint). If you do use the polygon tool, you must assign the number of polygon sides in the "Properties" Panel (under Library)

properties1

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 Timeline layers selected when you drag the shapes to the stage.

stage1

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)

stage 2

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 120 frame of the Red CircleTimeline layer. This little box is called a "frame." Rigth click on the little box and then choose "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 yellow 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 Frame one and move the circle to the left side of the stage. Now, click on the Frame 120 and move the Red Circle to the right side of the stage.

playbackhead

You should also notice a light blue 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 "Rotate" under the Properties panel (on the right side). Select "Clockwise"

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 Video/Media"

Use these settings:

renderwindow

When you hit "Export" button, there should be an icon that pops up on your taskbar for Adobe Media Encoder and it should give you this interface to look at:

mescreencapture

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.

Conversion: Graphic to Movie Clip

Shapes Project Advanced
Re-open your Adobe Animate assignment called “Fluid Animation - Shapes Project”
Locate the Red Circle in the library
Right click on the circle and select “Properties”
Change the Type from “Graphic” to “Movie Clip”
Your Library items should look like this

Notice how the icon for Red Circle now looks like a film reel. This indicates that the red circle library item can be animated independently from the rest of the stage animation.

Red Circle Animation

Double click on the red circle movie clip. This will put you back into “Isolation Mode.”
Now, on the timeline, rename “Layer 1” to “Red Circle Backing.”
Create a new layer and name it “White circle”
Create a new layer and name it “Pink Square”
Create a new layer and name it “Yellow Triangle”
In the Library, create a Graphic and call it “White Circle.” Double click that item and create a white circle in the Isolation Mode area, just like you did with your original Circle, Square, and Triangle shapes. The process is the same.
Do the same for the Pink Square and Yellow Triangle. Create new Library items for them as well and create the shapes in the same manner.
On the timeline, click on frame 60 on the Yellow Triangle layer. Now, hold the Shift Key and select Frame 60 of the Red Circle Backing layer.
Right click on any of the highlighted frames and select “Insert Frames.” This will populate all of the frames (between 1 and 60) for all layers that belong to the Red Circle Movie Clip.
Now, select Frame 60 for the White Circle, Yellow Triangle, and the Pink Square layers, using the same method as before. Only, once the frames are selected, right click and choose Create Motion Tween. This will give life to these three shape layers and their timelines.
On the Yellow Triangle layer, select Frame 60 and then go to the Properties box. Change the Rotate to 2 times. Make sure it is also set to “Clockwise.” Do the same for the Pink Square Frame 60.
Move the playback head to frame 15. Right click on any of the three objects (white circle, yellow triangle, pink squre) and select Transform. Now, hold the SHIFT key and select the other two shapes. This should form a bounding box around all three shapes.
With all of the objects selected (minus the Red Circle) right click on any of the shapes and select Transform and then Rotate and Skew. This will produce a black bounding box around all the shapes. Rotate the bounding box counter clockwise about a quarter turn (25%). Move the playback head to frame 30 and repeat by rotating the bounding box another 25%. Do the same at frame 45 and frame 60, again by rotating the bounding box 25% each time. Try to reposition your shapes back to their original position.

Get out of Isolation Mode and slide the Play Back Head back and forth. You should see animation within the red circle. This illustrates that you can have Library items with their own independent animation sequences.

To test your animation, select "Control" from the top menu and then select "Test Movie" and then select "In AIR Debug Launcher (Desktop)"

Green Triangle Animation

In your Library, convert the Green Triangle object from a Graphic to a Movie Clip. Double click on the Green Triangle Movie clip and rename the Layer 1 to Green Triangle Backing. Create a new layer and title it “Yellow Triangle.” Now, drag the yellow triangle to the Yellow Triangle layer. Be sure to give both layers 60 frames. Create a Tween on the Yellow Triangle layer.
Position your yellow triangle, on Frame 1, in the bottom left corner of the Green triangle. You will animate the Yellow triangle to move from one corner to another, and to another, and then back to it’s original location over 60 frames. Your animation should look like this:

Blue Square Animation: Dealer’s Choice

The square can have any type of animation you would like applied to it. However, there must be some sort of animation evident.

To test your animation, select "Control" from the top menu and then select "Test Movie" and then select "In AIR Debug Launcher (Desktop)"

Export Your Project (again)

Save your project as "Fluid Animation - Shapes Project Advanced"

Export your project as "Fluid Animation - Shapes Project Advanced"