Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
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.
While it's possible to add easing in the Properties panel, the best way to apply easing to your animations is in the Motion Editor. In this movie, we'll look at how to do that. Let's take a look at the animation I have in the Flash Player. I have an olive falling down from an olive tree. It looks like it's falling because it's a little bit too big. So if I preview the animation, it's 300 frames long and then the olive just goes from the top of the tree to the bottom of the tree. Very robotic, no easing.
So let's apply some easing through the Motion Editor. Select the tween, go over to the Motion Editor, and then scroll down to the very bottom in Eases section. In Eases section of the Motion Editor, you can add easing methods. The default easing method is Simple (Slow). This is the same method that's used in the Properties panel. So for right now, we'll just ignore it. To add other easing methods, you can click the plus button to the right of Eases in the Motion Editor. Here are a whole bunch of preset easing settings.
You can even create your own with the Custom setting, which we'll talk about in another movie. The top half from Simple (Slow) to Stop and Start (Fastest) are really basic easing patterns. So if you want to experience those, you can select them and try them out on your own. The really interesting ones are the bottom half that are the custom easing animations. Let's take a look at Bounce In. Bounce In, as you'd expect, gives a bounce effect to an animation. I'm going to expand the Bounce In ease and then I'm going to enlarge my expanded view using the slider at the bottom-left of the Motion Editor.
Notice as I scroll, I can preview the bounce animation. For easing, you'll see values from 0 to 100 on the left and then the frames at the top. 0 represents the beginning of your animation and 100 represents the end of the animation. In this case, 0 represents the olive at the top of the tree and 100 represents the olive at the bottom of the tree. So when we look at this in the timeline, we can see how this curve works.
It goes from 0 and then by Frame 140, the animation gets all the way to Frame 100. Then the animation goes back to about 65% at about Frame 180 and then it goes back to 100%, which is the olive all the way on the ground, at Frame 215. Then it bounces up a little bit more at Frame 240 and then down to the ground again at Frame 260, another little bounce, and then finally it ends on the ground.
Once you set up your easing method in the Eases section of the Motion Editor, you can apply that easing to a property or group of properties. So I'm going to scroll up in the Motion Editor and I'll go to the Basic motion properties. So in there, there's X, Y, and Rotation Z which is basically just regular rotation. So if I want to apply that same easing to just the Y property, I can do that with the Y dropdown. I can choose Bounce In. I can also apply easing to all Basic motion properties using the Selected Ease Basic motion drop-down.
For now, I'm just interested in the Y property, so I'll set it to be Bounce In. You can then see the green easing curves applied to the animation. If you can expand the Y property, you can see how the easing curves are applied. So basically, the easing curves are going to override my default line, which is that black line. So the green curves are going to be the new way that this object animates. So let's test this in the Flash Player to see what it looks like. So the olive will fall down from the tree, granted it's pretty slow but we'll fix that later.
Then it will hit the ground, bounce up, then go down again, bounce lower, and smaller bounces each time until it comes to an end. You can customize your easing in the Eases section of the Motion Editor by modifying the slider that shows the strength of the Ease. So I can click and drag Bounce In to the right. If I expand Bounce In, you'll see that a little bit more clearly. So I can apply the ease over a shorter period of time or a longer period of time or reverse it with negative values.
I can go into click and drag this all the way up to 100 to apply this easing over the shortest amount of frames possible. So you'll see that the animation is just about done at 140 frames, so that will speed up the animation just a little bit. Let's test this again in the Flash Player. So the olive falls a little bit faster, bounces up, bounces a few times, and then stays at the bottom until the end of the animation. So remember, the best way to apply easing is through the Motion Editor.
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.