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 take a look at creating complex animations. If you're following along, I'm working in 06_Complex_Animations.fla in the Chapter 05 folder in the Exercise Files folder. Let's select the robot on the stage and click the Swap button in the Property inspector. Select mcRobot movie clip, click the Duplicate Smbol button, and we'll name the symbol mcRobot, with capital R Complex with the capital C. Click OK to close the Duplicate Symbol window, select the mcRobotComplex in the Swap Symbol window, and click OK.
Double-click the robot on the stage to enter its timeline. The first thing we'll do is create some keyframes. Deselect everything by clicking on the stage and then click and drag from frame 24 of the top layer to from 24 of the bottom layer. Press F6 on your keyboard to convert all your selected frames into keyframes. With the entire robot selected, press Q on your keyboard to select the Free Transform tool and show the transformation handles around the robot What we're going to do is sort of make the robot do a break dance move. So I'm going to move the transformation point to the bottom right of the robot's foot.
I'm going to rotate the robot to the right and release my mouse button. I'm going to press Command+2 on my keyboard so that I can get a closer view of the robot. I'm also going to move the timeline to the top left of my screen. Now I've rotated the robot down. I'm going to select the robot's right arm and right hand. I'm going to move to transformation point up and to the right of the robot's right arm. Then I'm going to rotate the robot's hand around the transformation point so the robot's hand is pointing down.
Now we'll create the motion tween. Click on the stage to deselect everything and then click and drag from frame 10 of the top layer to frame 10 of the bottom layer. Right-click or Control-click on the Mac, on your selected frames and choose Create Motion Tween. You can preview the animation by scrubbing the playhead or you can test movie by pressing Command+Return or Ctrl+Enter. I'm going move the timeline to the top right of the screen now. What I'm going to do is click and drag to resize the timeline to the right little bit.
I'm going to move the timeline so I can see a little bit more frames. Making sure everything is deselected, I'm going to click and drag from frame of 35 of the top layer down to frame 35 of the bottom layer, and then I'm going to press F6 to create keyframes. I'm going to move the timeline so I can select the entire robot. And then I'm going to select all of the robot except the robot's right hand and right arm. I'm holding Shift on my keyboard while clicking different robot movie clips to select them.
I'm going to move the transformation point over the robot's right arm. Then I'm going to click and drag to rotate the robot. So I've rotated all of the robot, except for the robot's arm, and now I'm going to select the robot's left leg, which is now it's top leg and I'm going to move the transformation point down and to the right. I'm going to rotate the robot's leg up, so it's kicking up. I'm also going to select the robot's top hand or left hand and move the transformation point and rotate the robot's hand up a little bit as well.
And you can feel free to do a slight variation on this pose, if you'd like. And let's create the motion tween now. Make sure everything's deselected by clicking in the stage away from the robot and then in the timeline click and drag from frame to 30 on the top layer to frame 30 on the bottom layer. Right-click your selection or Control-click on the Mac, and choose Create Motion Tween to create the motion tween. You can move the timeline and preview the animation by scrubbing the playhead. Now before we actually test the movie, let's make the robot hold this pose for a few frames and then we'll copy and reverse this animation.
So make sure everything's deselected, so click on the stage away from the robot to deselect everything. Click and drag from frame 40 on the top layer down to frame 40 at the bottom layer and press F5 on your keyboard to create regular frames. That way the robot will hold this pose. Now deselect everything again by clicking on the stage away from the robot and select all the way from frame 1 of the top layer to frame 35 at the bottom layer. And this is our whole animation. Now what we can do to improve this breakdancing animation is add easing. So I'm going to deselect everything by clicking on the stage away from the robot.
Then I'm going to click and drag from frame 10 at the top layer to frame 10 at the bottom layer and then in the Property inspector, I'm going to set the Easing to ease in by dragging the Ease slider all way down, and that'll make the robot fall faster as the robot gets closer to the ground. Now what I'm going to do is deselect all the frames again by clicking on the stage away from the robot, and then I'm going to select from frame 30 on the top layer down to frame 30 on the bottom layer. This is where the robot is moving up, where it's rotating up.
What I'm going to do here is set the Easing to ease out or to move fast when the robot starts moving, and then move slower as the robot moves into its pose. So with those frames selected, in the Property inspector, click and drag the Ease slider all the way up to ease out. Now let's select, copy and reverse these frames, so we have a looping animation. Deselect everything by clicking on the stage away from the robot. And then click and drag from frame 1 of the top player to frame 35 at the bottom layer to select our entire animation.
Hold Option on your keyboard if you're on the Mac, Alt if you're on the PC, and click and drag your selected frames to frame 41 and release your mouse button to copy the selected frames. Right-click or Control-click your selected frames and choose Reverse Frames to reverse the frames. And now we've created a looping animation. So let's see what it looks like. Command+Return on the Mac, Ctrl+Enter on the PC. And there's our robot breakdancing animation, complete with easing. I'll close the Preview window now. So there's a look at creating complex animations.
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.