Video: Adding rotation to an animation

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.

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.

Adding rotation to an animation

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'tperfectly match up with the trail.So what we'll do is look at using rotation and fine-tuning motion tweens inorder to make the animation look more realistic.

The first thing I want to do is to move the path to be aligned with thewheels 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-dragto 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 withits motion path, you can actually select the motion tween in the Timeline, andthen 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 youcan 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 clockwiseor counterclockwise.If I check Orient to path, and preview the animation, you will see this featuredoesn'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 tomanually set up a few keyframes, and then I'll fine-tune the animation byediting the motion path.So what I'm going to do is put the playhead in between the first keyframe andthen 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 toalign 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 goin 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 motionpath 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 curvesof these anchor points.

I can also delete them.So I'm going to modify them so they're just how I want for thisparticular 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 theanimation, 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 theoriginal animation that you create.By making those adjustments, you can fine-tune your motion tweens to fit yourapplications perfectly.

There are currently no FAQs about Flash Professional CS5 Essential Training.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.

Already a member ?

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships.
Learn more

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Thanks for signing up.

We’ll send you a confirmation email shortly.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

new course releases

newsletter

general communications

special notices

Here’s our privacy policy with more details about how we handle your information.