Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In Flash Professional CS5 Essential Training, author Todd Perkins explains the fundamentals of Flash Professional CS5, the industry standard for creating animations and interactive applications for the web, desktop, and mobile devices. This course starts with the basics, such as using the drawing tools to create simple animations, and progresses to automating animation with tweens and adding interactivity with ActionScript. This course also covers how to add sound and video to projects, enhance realism with effects like easing, and publish a project to a variety of platforms. Exercise files are included.
In this movie, we'll look at how to animate rotation using a motion tween. So on the Stage here, I have an animation of a girl riding up the hill on a bike. Now you'll notice that she doesn't rotate along with the path. She just moves straight up. So that creates a little bit of an awkward motion, and her bike wheels don't perfectly match up with the trail. So what we'll do is look at using rotation and fine-tuning motion tweens in order to make the animation look more realistic.
The first thing I want to do is to move the path to be aligned with the wheels of the bike. So to do that, I'm going to use the Free Transform tool. So I'll select the biker with the Free Transform tool and then click-and-drag to move the transformation point, again that's the circle in the center, down to the bottom. I want it to match the wheels on the bike. That way it's easier to align the motion path with the trail. If you want to have Flash automatically align the rotation of an instance with its motion path, you can actually select the motion tween in the Timeline, and then check the Orient to path option in the Properties panel.
That's in the Rotation section. You can also make objects spin by adding to the Rotate 0 time(s) number, so you can click-and-drag that to make this biker do a flip, for example, if you wanted to. Once you do that, you can control whether the direction is clockwise or counterclockwise. If I check Orient to path, and preview the animation, you will see this feature doesn't exactly do what I'm looking for. But for sometimes, you may find that it works just right.
So I'm actually going to uncheck Orient to path for now and I'm going to manually set up a few keyframes, and then I'll fine-tune the animation by editing the motion path. So what I'm going to do is put the playhead in between the first keyframe and then the property keyframe at frame 80. So I'll go to frame 40, and then I'm going to move the biker on the Stage to align with the path. So I'll move her up, and then rotate a little bit. I'm going to use the arrow keys on my keyboard to fine-tune the positioning here.
So now when I preview the animation, it looks a little bit better for the first part. Once you add more property keyframes to your motion tween, you can actually go in with the Selection tool or the Subselection tool to modify the path further. So, for example, I can go to the Selection tool, and click-and-drag the motion path to get a little bit more control than I had before. This is because this motion path now has multiple anchor points inside of it. So I'll go down with the Subselection tool and I can modify the Bezier curves of these anchor points.
I can also delete them. So I'm going to modify them so they're just how I want for this particular animation. I'm going to make sure that they are all aligned with the center of the trail. So once everything is set up there, I'll scrub the playhead to preview the animation, and on the last frame I can see there's a little bit of the tire coming off. So I'm going to select the biker there and move her out a little bit. Just make sure that the wheel is off the Stage.
I'll scrub the playhead one more time to make sure it looks right. Then I'll add a little bit more rotation to her at the end so that she kind of straightens out. It's starting to look pretty good. So I'll just preview the animation in the Flash Player and see what it looks like. So just remember that when you create a motion tween, you're not limited to the original animation that you create. By making those adjustments, you can fine-tune your motion tweens to fit your applications perfectly.
There are currently no FAQs about Flash Professional CS5 Essential Training.
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.