Time to learn some more advanced animation techniques in Adobe Animate

• Importing/Exporting to and from Illustrator
• Inverse Kinematics and Bones!
• Movie Clips (Movies within movies)

Part 1 - ROBOT CONCEPTION

Part 2 - ROBOT ASSEMBLY

Go to File and then Import to Library and select the Robot Head

You should see your Robt Head.ai in your Library. 

Double click on the Robot Head symbol and look at the top of the screen. The header at the top of the stage area should now read "Robot Head.ai" instead of "Scene 1"

 

It is a good idea at this point to “Center” the robot head (line it all up with the little “plus” or “cross” symbol in the document). If it is not already like this, be sure to grab all the pieces and reposition it so it looks like this:

That little “plus” or “cross” sign is the “center” of the graphic. If you were to rotate the object, it would rotate around that point. We definitely want it centered.

Now, with all of your face items selected, right click on the face and choose “Distribute to Layers” (depending on your version of Animate, it may say “Release to Layers”).

This will separate all the “Robot Head” portions into separate layers on our object’s Timeline. BE SURE THAT YOU ARE WORKING ONLY ON THE ROBOT HEAD’S TIMELINE AND NOT THE ACTUAL TIMELINE FOR OUR PROJECT. EACH AND EVERY ROBOT PART WILL HAVE ITS OWN TIMELINE.

Rename all of the Timeline layers so that they are like this:

If you do not have a Layer 1, this is okay. While you’re doing this, make sure that when you select the layer, you see the appropriate head part produce a “bounding box” so that you are sure you are naming the proper part with the proper layer. Otherwise, you are mis-labeling things.

For all Head parts, make sure that you insert frame at Frame 120 on the Timeline

On the Left_Eye layer, create a “Motion Tween”

At Frame 60 on the Left_Eye layer, we will Insert Keyframe and then select “Scale”

Move your “Playback Head” to frame 63 and then select the “Left Eye” graphic (the actual left eye) on the robot’s face and right click on it. Select “Transform” and then choose “Free Transform.”

Scrunch down the Robot’s Left Eye so that it kind of winks

Move the playback head on the TimeLine to Frame 65 and then re-transform the eye so that it looks normal. What this does is at Frame 60 to 65 it will cause our Robot to blink/wink it’s eye.

Repeat this process for the Right Eye on Frame 85-90

Your Timeline should appear like this:

Now that the head is animated, we will create the Arms and their Bones

Import your Robot Arm.ai into your Library

Be sure that you are actually working in the Arm Segment.ai area. At the top of the program, it should display the name: Arm Segment.ai

Always make sure that it does not show “SCENE 1” at the top. We are not ready for that part yet.

This is how it should appear:

Repeat this process with the Hand and the Forearm Segment by importing them into your Library

This is now how your library should appear:

Save your document by clicking ‘SAVE”

Create a new Library Symbol (graphic) and call it “Left Arm”

Open up the symbol for “Left Arm” (it should be blank) and drag the Arm Segment from your library into it. This will create what is referred to as an “Instance.” Will will end up with something like this:

Now, repeat this process one more time with one more Arm Segment and the third piece will be the Forearm Segment. Be sure to observe the “GAP” between the segments. This GAP is where the segments overlap. But, we don’t’ want them to overlap too much. The gap should take place just to the right of the circle area (where the elbows are). If they overlap too much, our bones will not work.

Finish everything off by adding the Hand to the arm.

Again, we need to observe the “GAP.” So, we’ll position it just to the right of the thumb

This is a great saving point. Be sure to save it in your “Bones – Robot” folder as this: (not "Boones-Robot - I mistyped it)

*notice that the Save-As-Type is a .FLA document (short for FLASH) because Adobe acquired Macromedia Flash a few years back but die-hard users have a tough time letting go of the past. So, Adobe kept with tradition and left it as-is.

Part 3 - MECHANICAL ADVANTAGE and ONION SKINNING

On your toolbar, select the “Bone” icon (If the Bone does not show up on the toolbar, ask your instructor about it’s location. On newer version of Animate, you have to manually add it to the toolbar).

After the Bone is selected, click on the center parts of the elbow joins and then draw from one elbow to the other, all the way to the wrist

This creates a set of bones for our robot arm

After you have created your bones, we can test them out.

Select the Black Arrow (Selection tool) on your tool bar and grab the hand. It should bend the arm like so:

This is known as “Inverse Kinematics.” We now can move the arm freely (but, not too freely) which will give our robot a bit more personality.

To test out the “Onion Skinning” aspect of Animation (still used today in many animations) we will try it out on this arm. Onion Skinning was originally a method used where Onion Paper was used when illustrators would draw. It would allow them to see through the paper because it was semi-transparent. This would enable the animator to anticipate how the animation would flow due to them being able to see the actual sequence of frame to frame. 

In Frame one, curl the arm up like so.

On Frame 60, put the arm in this position:

By clicking on the “Onion Skin” button on the top of the Timeline, we can enable the Onion Skin view (which demonstrates the intermittent steps between it’s Start and End position. If you right click on the button, you get advanced options to toy around with:

Part 4: THE ART OF CLONING

I’m a fairly lazy person and I truly hate to redo work if I don’t have to (which I suspect is probably the case with most people I know. So, I don’t want to have to recreate another arm because it’s time-consuming (see what I did there)?

Instead of remaking everything, I’m going to clone or duplicate that arm and modify it. The good news is that this will save time and energy and allow me to be super lazy (in the real/work world, we call this “Being Efficient”)

In your Library, select the “Left Arm” symbol, right click and then select “Duplicate.” This brings up a window that looks like this:

Change the name to “Right Arm”

This symbol is an exact copy of our Left Arm symbol.

Open up the Right Arm symbol and Right Click on the green Tweened frames on the layer titled “Armature 1” – this is the name given to the arm when we created it (Thank you, Adobe Animate). Select “Remove Armature.’ This will remove the tweening for the arm.

Now, select all of the pieces of the arm and then click on “Modify” from the menu at the top of the screen.

Select “Transform”

Select “Flip Horizontal” (btw, this is also available in Photoshop, Illustrator, InDesign, etc)

Our arm should now look like this:

The only issue is, when we removed the Armature, we removed the bones for it. So, we need to recreate our bones (oh well, practice makes perfect)

Good news! We now have a right and a left arm, complete with bones.

Now, we put our Robot together.

Create a new Symbol in the Library and call it “Robot”

Create three layers on the Timeline and label this as so:

Make sure the Head layer is at the top (beause the head is at the top? Get it?)

Now, drag your Library items to their appropriate layers

This is what you should see.

SAVE YOUR WORK!

Part 5: THE BREATH OF LIFE

So, time for a bit of philosophy (this is gonna get deep)

Time is not a constant

Time is different for all things – including things in Adobe Animate

Time for the Left Arm can (and may) be different than Time for the Right Arm,…or even the Head

Even though the General Timeline for the “Stage” or “Scene” is for all things, it doesn’t mean all things have the same amount of time or use time the same way.

Let’s put this into practice to see how it all works.

Remember when we made the eyes blink/wink?

How many frames was that? And, by the way, Frames are not Seconds. Our project is set at 24 frames per second. So, for every second, there are 24 frames. This is why Onion Skinning is important…it shows us the “ticks between the seconds” – the passage of time in motion.

If you forgot how many frames we used for the eyes? Double click on the face and it will isolate the face’s timeline. (Notice how the arms are a lighter gray color. This is because we are focused solely on the Face symbol). The timeline shows that we used 120 frames – otherwise known as 5 seconds. The amount of seconds will change if we alter the FPS. More frames means reduced seconds. Less frames means more seconds.

Now, lets see how many frames does the Left Arm use?

After double clicking on it, the Timeline shows 60 frames (2.5 seconds). So, the Arm only has half the time that the Head does

Imagine the Robot body is your body. And, let’s convert Frames into hours. This is like saying your Head has 120 hours to exist but your Arms only have 60 hours to exist. We should probably make sure that our arms have the same amount of time as our head. So, for each arm, you need to insert frames at the 120 frame mark on their timelines.

While we’re at it, why don’t we animate those arms.

For the right arm, at Frame 45, have the arm reach for the sky, like this:

At frame 65, have the right arm do something like this:

At frame 90, how’s about this?

And, at the final frame, position it like this:

For the left arm, repeat this process making the arm doing whatever you want it to do.

Remember the philosophical views on time?

Well, essentially, we created a new life (albeit robotic). And, we gave its body parts time to exist and move around in., Only, we forgot the world and its timeline itself.

So…we have to create the world.

On the top of the Robot’s “scene” we need to click on this arrow. This will take us back to the overall “Stage”

Before now, we were not ready for the “Scene,”: which is the overall world that we want to build. But, now we are.

If it isnt’ already available, we need to make it so. If you see a black arrow at the top of the screen, click on it and it should take us to the “Scene 1.” If there is no arrow and it already says “Scene 1,” well….good, I guess.

Grab the Robot symbol and drag it to “Layer 1” on the timeline for “Scene 1”

The robot is really big, with its arms stretched out. I would Transform/Scale this robot so that it fits better into the Scene 1 area. Be sure to hold the “Shift” key while you scale it down. This will allow for it to scale properly without distorting the robot.

If you notice a white dot and it is not located in the center of it’s face, you should reposition the dot so that it is.

It’s probably time you click on “Save.”

Part 6: WORLD BUILDING

We should test this to even see if it works.

Click on “Control” on the menu bar and then select “Test”

Notice that nothing happens – nothing at all. Our robot is simply there smiling at us…lifeless…inanimate.

Now, look at the timeline – nothing. No frames. Again, we need to give the robot time to exist.

And, it’s in front of a white background – boring.

We need to fix that as well.

---

LET THERE BE...BUILDINGS

In Adobe Illustrator, open up your Robot Parts file if it isnt’ already

On the menu (at the top) select “Window” and then select “Artboards.” The panel should look like the “Layers” panel that you’ve seen in Illustrator and Photoshop.

Click on the icon next to the trash can and create a new Artboard

You should see this:

On Artboard 2, we are going to create a background for our animation

Recreate this exact scene on Artboard 2

Select all of the buildings (not the windows or the gradient background/sun) and copy them

In Adobe Animate Library, create a new Symbol and call it “Background”

Double click on the Background symbol to open it up. Paste the buildings onto Layer 1

Re-label Layer 1 as “Buildings”

Select all of the windows in Adobe Illustrator and then copy them. Past them onto a new layer in Adobe Animate’s Timeline and call the Timeline layer “Windows”

You should see this:

Repeat this process with the Gradient and call the Timeline layer “Gradient” and “Sun” pasting them onto two appropriately titled layers

Your timeline should look like this

Save your Work (Both the Illustrator File and the Animate File)

In Adobe Animate, on the Background Timeline, insert a frame at 360 Frames (actually, do this for all of the layers as they will need 360 for all of the objects/layers for this timeline.

Give the Sun layer a Motion Tween – You will probably get an error message saying that the Sun must be converted to a Symbol first before you can tween it. If this happens, it is okay. The reason we haven't seen this before is because we’ve always created the symbol first. Essentially, Adobe Animate can only animate “SYMBOLS,” whether we created them originally or it has to convert them itself – it can only animate symbols.

In the first frame on the timeline, position the sun so that it is barely above the building.

At frame 360, position the sun so that it is higher in the sky (as shown below)

Do the same thing with the background, so that the gradient rises with the sun.

Now are going to add some effects to the sun

We are going to first tint it over time.

On Frame 1, select the sun and make sure it’s Tint color is yellow

On Frame 360, Select the sun and make sure that it’s tint color is white (or, close to it)

Once that is completed, we can add our Background into our Scene

Go back to the Scene and create a new layer titled “Background” and make sure that it is underneath the Layer 1 that our Robot is on.

Drag your Background symbol into the Background Layer

Save Your Work

Part 7: THE EYE IN THE SKY

In Illustrator, create another artboard and create this shape

Create a new Symbol in Adobe Animate’s library and title it Blimp

Copy the Blimp from Illustrator and paste it into Animate’s Blimp symbol area

Select the Blimp and Distribute it’s different pieces to layers

On the Blimps Timeline, insert a frame at Frame 5 for all the timelines for the blimp

Select both of the ovals at the tail end of the blimp (the propeller) by holding shift and selecting both ovals. Notice which layers are selected when you do this – it should be Layer 2 and Layer 3

Hold the Shift Key and select both Layer 2 and Layer 3 on the Timeline itself. It should show them both selected like this:

Right click on either layer and select “Merge Layers.” This will combine both layers into a single layer, re-titling it “MergeLayer_2” (or, something like that).

Right click on the Merged layer and select “Create Motion Tween.” Again, you will probably get an error message warning you that Animate needs to convert the objects into a symbol. Click “Okay”

Move the Playback Head to Frame 3 and Transform the blimps propeller so that it appears like this:

At Frame 5, transform the propeller so that it appears back to it’s normal state (like Frame 1)

Now, we have to put the Blimp into our sky

Open up the Background symbol

Create a new Layer on the Timeline and call it “Blimp.” Make sure this Blimp layer is behind/beneath the Building layer.

Drag the blimp into that layer and resize it so that it fits behind the buildings. Also, it will be flying from left to right. So, it needs to be located on the left most side of the background.

Create a Motion Tween on the Blimp Layer. On Frame 360, make sure the Blimp is relocated so that it is now on the right-hand side.

Because our background has 360 frames, we need to make sure our actual scene has the same number of frames. Otherwise, the animation will not play properly.

Be sure to look at all of your symbols again.

• The Face should have 120 frames
• The arms should have 120 frames
• The Robot should have 120 frames
• The Background should have 360 frames
• The Blimp should have 5 frames

Now, Test it again by clicking on “Control,” then “Test”

If you did it right, the Robot’s eyes should blink, it’s arms should move, the sun should come up with the blimp sailing through the air in the background, complete with spinning propeller.

EXPORT YOUR WORK

In order to wrap things up. Be sure to EXPORT your work as “Robot MOVIE” and be sure to render that movie to your “Bones-Robot” folder (be sure to export this as a Video/Media file using Adobe Media Encoder - just like our last two assignments)