Viewers: in countries Watching now:
Adobe Flash CS5 is the industry standard for creating dynamic, interactive graphics, and even entire websites. This workshop from expert trainer Kelly McCathran provides a solid introduction to Flash animation, beginning with a tour of the tools and interface. Plus, learn how to animate shapes and objects, create slideshows, incorporate other media into your movies, add keyframes, and much more. Each lesson takes a simple step-by-step approach—great for beginners and also helpful for more experienced users looking to develop efficient workflows—and some simple projects are included so you can test out your newly developed skills.
All right. Put your thinking caps on to prepare to absorb what Flash symbols are. Symbols are created in Flash, because they're required to do most animations. They can be vector shapes that you draw from scratch, such as an oval, a star, a rectangle. They can be imported art work, such as an Illustrator file, or an EPS, or any vector or scalable shape. They can also be imported photos, raster images, which Flash refers to as bit map, meaning they're made up of pixels and they're not scalable without losing quality.
When you create a symbol it automatically becomes part of the library. So I'll click over on the library panel. And you'll notice the library for this document, my0501 symbols begin is empty. You already get this cat image into the flash movie, I went to file import and I imported the stage that just brings in vectors, scalable art or a raster a bit map image in this case this is vector or scalable art, if I chosen import to library it would have automatically made a symbol But I want you to build the symbol in this movie.
So I'll click away, and I'll click on the cat with the selection tool. You'll notice because I imported it, it changed the layer name to the exact name of the Illustrator file. The purpose of a symbol is to dramatically reduce the file size. If I had a ball that was 5K, and I wanted a total of five balls bouncing around on the stage, that could be 25K in file size if I made five copies of the ball. However, if I take my first ball and I convert it to a symbol, I can then drag instances of that ball onto the stage.
I refer to instances like small aliases. They refer to the original, but they don't occupy the same file size. So instead a 25K file, I might end up with a 6K file. Just a little bit bigger to create those extra copies of the ball, or those extra aliases, that I need. So let's convert this cat to a symbol, so that we can animate it in the future. Or, change its shape, its size, its style, its color. In order to create a symbol out of something that you've drawn, or something that you've imported, go to your Modify menu and convert to symbol.
Or if you're like me, and you love keyboard shortcuts, simply hit the F8 key. Your function keys across the top, F1 through 12, or F1 through 15. Now, when naming symbols, it's very important that you stick to web compliant names. Whenever I name a file, I only use letters, numbers, underscore. And I write it that way for illustration purposes, or hyphen.
Upper and lowercase characters are acceptable, but action script, Flash's implementation of java script, it case sensitive. So you need to know whether you used upper or lowercase characters. Otherwise if you call to the symbol later you may not find it if you've typed it with a capital letter and in the action script you refer to it with a lower case character. I'm simply going to name this cat. So I just did a select all and typed cat. The first time you create a symbol your registration point will be the upper left corner.
You can think of the registration point as a handle where flash and grab the object animate. However for animation, center registration point are more common. For example if you want to make something look like its growing you would have it grow from the center out. If it grew from upper left it would really stretch down to the right. So in most cases I'll use the center registration point. Now when you're creating a symbol, there are three categories, or three types that you can build, graphic is the simplest. Graphic is typically a static image, or an animation, and graphics are tied to the main timeline.
buttons you've probably used everyday, a button is something that has states. So it may have an on roll over and on roll off state, a click state, so something flashes when you click on it. There are four states automatically built into a button. The third type is the most complex, it is a movie clip. And movie clips are reusable animations. They're kind of like mini movies inside a longer movie. They can have their own timelines and these timelines can run independently of the main timeline. They can also be made interactive through action script. We'll stick with graphic for now.
So I've named it Cat, I've clicked the center registration point, and the type I'm leaving it on is graphic. When I click Okay you'll notice the cat appears in the Library panel. So once the cat is in the Library panel, now I can create instances of it on the stage. There's my second instance. The first one is the one that I used to make the symbol. There's my third. There's my fourth. And I'm just going to scale a few of these. I'll use modify, transform, scale and rotate.
So we'll put one at 40%. I could also click on it and use the free transform tool. If I don't hold down Shift, I get disproportional scaling, which may be a design effect, but it's a good habit to use the Shift key when scaling up or down. I'm going to actually distort this one. And then I'll click on the next one, and this one I'll do by the numbers, so Modify > Transform > Scale and rotate, and in this case we'll do 80%. Now you can alter the instances of the symbol, and when you alter the instances of the symbol, you can change its tint, its transparency, which Flash calls alpha Its brightness and a fourth option which is advance. Advance will allow you to do the red, green and blue, the colors and the alpha or transparency at the same time.
You can also change the skew rotation and scale of instances of a symbol. So let's take a quick look at how we modify an instance. I'll go to Properties, and in Color Effect, that may not be expanded. You may have to roll it down. I'll choose brightness. A brightness at minus a hundred percent is solid black. A brightness at positive a hundred percent looks clear or white on white. And if I double-click brightness and set it back to zero.
I'm back to my original value. Let's do minus 50, and I'm just pressing return or enter to see the change. I'll select the next cat, I'll go to style in the properties panel and I'll change tint. And I can eyeball this by changing the red, the green and the blue. Let me zoom in so you can see this a bit better. You'll notice as I'm doing that, even the cat's eyes are changing, or I could simply pick a color, let's go with green. I'll go back to View > Magnification > Fit in Window, I assigned a shortcut, Cmd+0 or Ctrl+0 for that.
I'll use my selection tool, and on the third one, I'll go to style, alpha. I'm not going to play with advanced at the moment, but alpha 0% would be clear or see-through, completely transparent, 100% is the original color or solid. Let's go to 20%, a very light ghosted tint. We'll use alpha to make slide shows, for example, or photos fade in or fade out, or make something look like it's appearing on the stage. So take a little while and let symbols settle.
They are the heart of Flash and in order to animate almost anything, you will create a symbol. Good luck.
There are currently no FAQs about Introduction to Flash Animation.
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.