Join Kelly McCathran for an in-depth discussion in this video Your first animation, part of Introduction to Flash Animation.
In this video, we're going to start with a brand new document and quickly animate some text using Flash's built in motion presets. Motion presets were added to Flash CS4. And there's a great collection or variety that you can use. So let's begin. Under the File > New, I'll leave it on ActionScript 3, and click OK. I can hit the letter T on my keyboard to go to the Type tool or Text tool, or simply click the T to jump to the Text tool.
When I click once on the stage, Flash creates an area to type. And it will create that text area in the last font and size and style and color that I used. Here I've got a little danger on color. White on white would be invisible. So, let me go ahead and click on color and select a red. And I'll type hello. I can double-click to select the entire word. And I can click and select a different font, if I'd like. But I'm a fan of Century Gothic, so I'm going to leave that.
Flash has something very fun called Scrubby sliders. If my type looks a little too big or a little too small, I could type 200 for the size, and press return or enter to accept it. Or, if I move over the blue text, and look for that finger pointing, with the left and right arrows, I can click and drag up or down to size my text. And then I go back to my Selection tool and simply drag this Hello, to roughly the top of my stage. If I want this perfectly centered on the stage, I can go to my Align panel. You'll find that under Window > Align, or in my favorite classic work space, it always occurs right here.
And if Align to Stage is checked when I hit the second button, Align Horizontal Center, now I know it's perfectly center. As I teach, I like to reinforce good work habits.So, before we animate I'm going to name my layer. I'll name this Hello text. Layers become essential to really track and control your animations. Now, I'll select my text again and I could go to window and choose motion presets or again, in my classic workspace, I can click this spot where motion presets are always available.
I have nothing selected, so it's saying preview not available. But I'll expand by clicking on the small triangle, the default presets, and click once on the bounce-in-3D. I can stretch this to see a few more options and I can make this preview bigger or smaller just by adjusting this portion at the panel. I can fly in, while exploring from the bottom, fly in while exploring from the top or fly in left or right.
I'll scroll down to see a little bit more and I think I'll fly in from the top. When I select that, nothing's happened to the text yet. But when I click apply, I've just created my first motion tween. In order to see what this did, I can do what's called scrubbing the timeline. I'll grab this red play head and drag to the right... And you'll see my text is moved a little bit off stage. Let me View > Magnification > Fit In Window, just to make sure I'm seeing everything.
And yes, there's the bottom. So, I could reposition the whole thing. I could double-click and drag the whole effect up, so the text doesn't get chopped off. This all depends on where you dragged it to start, so no big deal if it's not perfect. If I take a look at my timeline, this black dot indicates there is type or something on keyframe one. The default frames per second is 24. So, this means that Flash did something called tweening. It made a 1 second animation because there are 24 frames in 1 second.
Just like a movie. They are actually called flicks because you would have a frame that would flicker. In the olden days, they would say, let's go see a flicker, and it got shortened to flick. Well, each little scrub of my timeline is one of those flicks or flickers like a frame in a movie. You'll notice a little diamond at frame 24. That diamond means a transition has happened. So, it could be movement, it could be rotation, could be scale, could be many things. But let's test this and see how the final animation looks.
I'll go to my Control > Test Movie. Now, it is a good idea to save your movie before you test. So, before I say test it in Flash, let's go to File > Save As and I'm going to go to my hard drive and make a new folder and call it Flash Practice. You'll notice I never put a space in a file name, just a good work habit especially when publishing to the web. And I'll call this hello_01. I start numbering files because I may do several different variations of this. And using a double digit numbering scheme is a good work habit. So I'll hit Save.
And now, I'm ready to go to my Control > Test Movie > In Flash is the default. And you'll notice this shortcut. It shows the Command symbol on the Mac, and that's your Return key. So, hitting Cmd+Return on the Mac, or Ctrl+Enter on Windows will do the same thing as Control > Test Movie and Test. So let's take a look. Flash is building a SWF, a .swf, and there's my quick one-second animation. So, give that a try with any text of your own.
- Understanding the Timeline
- Working with Timeline effects
- Adding keyframes
- Creating slideshows
- Incorporating other media into your movies
- Distributing your work effectively
- Organizing your assets
- Developing efficient workflows