Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll look at animating masked content. If you are following along, I am working in Masked_Content.fla from the Chapter 4 folder. If you don't have the Exercise Files, you will just need some kind of content to mask. Now I will double-click the spider to enter its Timeline and then double-click the spider's body to enter its Timeline. Each of the Eye movie clips has an animation inside of it. If you test the movie you can see the animation.
Eyeballs are following the bouncing monster in the foreground. What we will do in this movie is animate the eyeball on the far right. I will close the Preview window and double-click the far right eyeball to enter its Timeline. Notice that there are four layers here: we have the Highlight layer that has some highlights for the eye. That's just to give it some 3D depth since those eyes are going to moving back and forth. The Mask is a circular area that covers up the Pupil, just a white circle. The Pupil is obviously the pupil and the Eye is the whole monster's eye.
Here I will extend the Timeline to frame 100. I will move there and then click and drag from the Highlight layer down to the Eye layer in frame 100 and then press F5 on my keyboard to extend the Timeline to that point. Now I will create a motion tween for the Pupil layer. I will do that by right-clicking or Ctrl-clicking the Pupil layer and then I will choose Create Motion Tween. You may need to unlock the Pupil layer if it's locked. So I'll right-click again and choose Create Motion Tween. In the Pupil layer, I will select the pupil and using the Selection tool on my keyboard, I will move the pupil down a little bit. I will lock the Pupil layer real quick to preview it and make sure that the eyeball is looking directly at the monster in the background. I will move it down and to the right a little bit more, lock the Pupil layer and that looks good.
So I will unlock the layer and then I will move to frame 100. In frame 100, I will use my keyboard to move the pupil to the right. I can preview the mask by locking the Pupil layer. That looks good! So what I am going to do is unlock the Pupil layer, select the tween and then go to the Motion Editor. Now I am going to create a curve that goes back and forth. So I am going to create simple bell curve. In the Motion Editor I will scroll down to the very bottom, create a new custom Ease. Before I define the custom Ease, I am going to make sure my viewable frame is set to 100, and it is, so that's good! I will put the playhead at frame 100, expand the custom Ease section, expand the Motion Editor a little bit and then select the last control point in my custom Ease. I will click and drag that all the way to 0%, and adjust the handle a little bit, and then I will Command-click at frame 50 to create a control point there. With that control point, I will drag the percentage up to 100 and then I will apply this Ease to my motion tween. So I'm going to scroll up, I will set the Basic Motion easing to custom.
Now I will test the movie and preview the animation and I should see the right eye following the monster. Now you may notice that it's not exactly following like the other eyes are following. The reason for that is that I changed the easing on the other eyes to be very straight. So it moves evenly the whole time. Now if you want that effect, you will have to modify your bell curve a little bit and make sort of a pointing mountain shape. So I will show you how to do that here.
The first thing you will need to do is modify the handles independently. So I am going to deselect all the handles by clicking away from them then I will select the top handle in my curve and then I am going to hold Option on my keyboard on the Mac or Alt on the PC to click and drag one handle at a time. So I am going to drag this straight down to create a straight line instead of a curve. I will do the same thing for the handle on the right at the top and then the handle at the bottom right. Now with the straight curve, the eye should be following the monster better and more in unison with the other eyes. I will test the movie to preview that.
And it looks good! So with animated masks, you can apply different effects when you animate the mask and when you animate masked content. If you ever need to adjust the handles in your animations curves independently, you can hold Option or Alt key on your keyboard.
Get unlimited access to all courses for just $25/month.Become a member
107 Video lessons · 34080 Viewers
94 Video lessons · 23788 Viewers
100 Video lessons · 4270 Viewers
83 Video lessons · 9306 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.