Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Through several hands-on tutorials, instructor Todd Perkins shows how to best build dynamic, streamlined sites using Flash CS3 Professional. Learn how to create custom keyboard shortcuts, apply advanced text techniques such as animating scrolling text with custom easing controls, and using advanced animation techniques. Flash CS3 Professional Beyond the Basics covers many challenging features, including adding complex interactivity to a Flash CS3 project and getting Flash content on a phone. Exercise files accompany the tutorials.
Now we'll talk about animating complex movie clips. What I mean by complex movie clips are movie clips that contain a lot of layers or a lot of frames. To animate complex movie clip, you'll off have to animate a lot of layers and a lot of frames at the same time. That's what we'll do in this movie. If you're following along, I'm working in 04_Animating_Complex.fla in the Chapter 05 folder in the Exercise Files folder. I'm also inside of the mcRobotDancing movie clip as you can see at the top of my screen. What I'm going to do is create some keyframes.
I'm going to click on the stage but away from the robot, to deselect everything, and then I'm going to click and drag from frame 5 of the top layer to frame 5 of the bottom layer to select frame 5 of every layer. Then I'm going to press F6 on my keyboard to create keyframes of those frames. I'm going to click on the stage and away from the robot to deselect all my frames again. And then what I'm going to do is click and drag from frame 10 of the top layer to frame 10 of the bottom layer. Once I've made my selection of frame 10 of every layer, I'm going to press F6 on my keyboard to create keyframes of those frames.
Now what I'm going to do is modify the artwork on frame 5 and then we'll create motion tweens for all of these frames and Flash will create a looping animation for us. So let's move the playhead to frame 5 and then move the robot. To move the robot I'm going to select the robot's arms, body, head, and neck, and move them all down by pressing down on my keyboard. I'm going to select the robot's right arm and hand and move them down a little bit by pressing down on my keyboard as well. I'll do the same thing with the robot's left arm and hand.
I'm holding Shift on my keyboard while I'm pressing down to move the robot's left arm in bigger steps. I'm going to move the robot's head and neck down a little bit. And I'll select the robot's head and move that down a little bit as well. Now I'm going to move the robot's right foot up a little bit. I'm going to make the robot sort of stopping its feet. And I'll select the robot's left leg and move it down a little bit. Now let's create the animation. Deselect all of the frames in the timeline by clicking on the stage but away from the robot.
And then click and drag from frame 1 of the top layer to frame 10 of the bottom layer. That will select all of your frames. Once you have all your frames selected, right click or Control-click your selected frames. Choose Create Motion Tween from the menu that comes up and Flash creates motion tweens for all the frames for you. Let's scrub the playhead to preview the animation. The robot but does a nice little stomp and moves back up. Let's test the movie by pressing Command+Return on the Mac, or Ctrl+Enter on the PC.
And the robot does that nice little dance. This animation's moving just a little bit slow, so I'm going to increase the frame rate of my Flash movie to make the animation play more quickly. To increase the frame rate, click on the stage away from the robot. In the Property inspector in the frame rate field, change the frame rate to 24 frames per second. Let's test the movie again. Command+Return on the Mac, Ctrl+Enter on the PC. And the robot's got a bouncing dance going, it's great. I'm going to close the Preview window. What I'm going to do is copy this animation and make the robot move it's left foot up, and it's right foot down.
So let's deselect all the frames by clicking on the stage but away from the robot, and then click and drag from frame 1 of the top layer to frame 10 of the bottom layer. Once you have all your frames selected, press and hold Option on your keyboard, if you're on a Mac, or Alt if you're on a PC, and click and drag your frame selection to copy the frames. Notice there's a plus sign by your cursor, indicating that when you release your mouse button, you're going to copy the frame selection that you have. I'm going to place my selection of frames starting at frame 11 and then I'm going to release my mouse button and I'll release Option on my keyboard.
Again, that's Alt on the PC. Move the playhead to frame 15 and then we'll move the robot's right leg down and left leg up. So I'm going to select the robot's right leg on frame 15 and move the leg and foot down a little bit, and move the robot's leg up a little bit. Then I'm going to select the robot's left leg and left foot and move them both up a little bit. And then I'm going select the robot's left foot by itself and move it up a little bit more. Let's test the movie to watch the robot dance. Command+Return on the Mac, Ctrl+Enter on the PC.
And there's the robot doing its little dance. And that's a look how to animate a complex movie clip.
There are currently no FAQs about Flash CS3 Professional Beyond the Basics.
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.