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're going to take an animation and nest it inside of a graphic symbol. Graphic symbols actually have their own timelines, not just their own layers, but they can have animations inside them as well. So we'll take this leg animation and put it inside of a graphic symbol, so that we can reuse it. That's going to optimize file size and it will make easy to edit the animation, because any changes that we make will update the front leg as well as the back leg. So again, we're going to take this front leg animation, put it in a graphic symbol, and use it for both the front and the back leg.
So we'll start by selecting all of the frames in the leg-top layer. So just deselect all the frames by clicking in an empty area of the timeline and click-and-drag the whole span of frames on the top layer. Once you've done this, right-click your selection and choose Cut Frames. Now we're going to need an empty graphic symbol to paste these frames into. So go to Insert > New Symbol. I'm going to call this LegAnimation.
Remember, no spaces or special characters for symbol names. Choose Graphic for the Type and then click OK. So now I'm in a blank timeline because I'm inside of the LegAnimation. I'm going to right-click the first keyframe of this layer and I'm going to choose Paste Frames. Now the animation is contained inside of the LegAnimation symbol. So let's return to the main timeline. Now what I'm going to do is place the leg animation on to the Stage. So I go to the Library and click-and-drag the LegAnimation from the Library on to the Stage.
I'll make sure to put it in place so it looks right. I'll show the girl layer just to confirm that's in the right spot. It looks like it's a little bit off. So I'm going to move it based on the girl layer. That looks a little bit better. Just note that when you have a graphic symbol animated, you need to have the right amount of frames on the main timeline. In other words, if I were to just have one frame on the timeline, we wouldn't see that animation. We would just see the static first frame of the animation.
So you need enough frames to accommodate the animation in order for the animation to play on the main timeline. So I have a 16-frame animation inside of the symbol and I have 16 frames on the timeline to accommodate that entire animation. So I have my animation in place. Just make a few more adjustments to the positioning and there we go. Now what I'm going to do is copy this animation for the bottom layer. So I'm going to lock the leg-top layer and then put the animation on the bottom layer.
So I'll just click-and-drag and then use my arrow keys on my keyboard to move the leg into place. I actually want it to be in exactly the same spot as the top-leg. Now, here's something that you can do with graphic symbols that is almost magical. Select the graphic symbol on the Stage and then expand the Looping area in the Properties panel. This allows you to specify the starting keyframe for a graphic symbol. This way we can stagger the animation with the front leg and the back leg and use the same symbol for both.
So I have the instance selected on the Stage and then in the First area of the Looping section in the Properties panel, I'm going to charge the first frame to 9 and press Enter on my keyboard. Notice the bottom leg goes down to the right spot of the pedal. So now, if I scrub the playhead, the animation looks just right. So I used the same graphic symbol for both. Further, with a graphic symbol, I can apply a color transformation and make it look like its darker, faded back.
I can do that by selecting the symbol. In the Color Effect area of the Properties panel, I can go to the brightness setting and set the brightness to -25. That makes the back leg a little bit darker. If I wanted to, I could move the transformation point and the scale the leg end just a little bit, so it's smaller as well. Now I'll preview the animation in the Flash Player. So, using this technique, you can cut and paste the animation and nest it inside of a graphic symbol, so that you can reuse it.
To stagger the animation, select the symbol instance on the Stage and edit the first frame in the Looping area of the Properties panel.
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.