Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now we'll make an animation play when you drag the robot. If you're following along, I'm working in 07_Animated_Drag.fla in the Chapter 06 folder in the Exercise Files folder. Let's double-click the robot on the stage then go to the drag frame inside of mcRobotAll, which is on frame 21 and double-click the robot on the stage to enter its timeline. Now that we're inside mcRobotDrag, we'll create a very simple animation that looks like the robot doesn't like being dragged. And you can create any type of animation you like, but I'm going to create an animation that looks sort of like the robots getting shocked.
The first going to do is undock the timeline. Click in the top right of the timeline, roll over Placement and choose Undock from Document to undock the timeline. I'm going to move the timeline on the right side of the screen. Then I'm going to press Command+2 on my keyboard, that's Ctrl+2 on the PC to zoom into the robot a little bit more. I'm going to expand the timeline down just a little bit so I can see all of my frames. And then I'm going to click and drag from frame 3 of the top layer to frame 3 of the bottom layer, and I'm going to press F6 on my keyboard to create keyframes.
And then I'm going to click and drag from frame 5 at the top layer to frame 5 in the bottom layer to select all of those frames. I'm going to press F6 on my keyboard to create more keyframes. Let's go to frame 1 and then I'm going to move and rotate all the elements of the robot slightly on this frame. So I'm going to use the Free Transform tool. With the robot's head selected, I'm going to press Q on my keyboard and then rotate the robot's head just a little bit. If you want to turn off snapping you can click the Snap to Objects button in the toolbar.
I'm going to turn off snapping here, and then just rotate the robot's head and body and neck a little bit. And you can just rotate these however you'd like, but the goal here for me, is to make the robot look like it's getting shocked. Now on frame 3, I'm going to do the same thing, but I'm going to move all the elements a little bit differently. Instead of just rotating I'm going to move some of them.
I'm making a special note not to move that far Cause this is going to be a very fast animation, and if it's a fast animation, and it's moving drastically in a very short period of time, it might be a little awkward to look at. OK, and then on frame 5 I'm going to create the final frames of animation, moving the robot's head, and neck, and body, and arms.
I'm trying to be kind of random here so that it doesn't look so much like this is a looping animation. There are frames and now let's create Motion Tweens. So what I'm going to do is click and drag from frame 1 of the top layer to frame 5 of the bottom layer and then right-click my frame selection and choose Create Motion Tween. And then with all the frames selected, I'm going hold Option on the keyboard on the Mac, or Alt on the PC, and click and drag the selection of frames to frame 6 and release my mouse button to copy the frames.
And then I'm going to reverse the frames by right-clicking or Control-clicking the frames and choosing Reverse Frames. Let's preview the animation using Command+Return or Ctrl+Enter. And drag the robot, the robot moves, and then when you drop the robot, the robot starts dancing. So now the robot animates when you drag it.
Get unlimited access to all courses for just $25/month.Become a member
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.