Creating reusable assets
Video: Creating reusable assetsAt the foundation of Flash are symbols. They allow for animation, interactivity, and can even have special effects like glows and drop shadows. But most of all, they can easily lead to a smaller file size, which is important when it comes to web performance. Where I'm actually going to start is by testing this movie, my home.fla, my home Flash file, my source file, and I'm going to go to Control. I'm selecting Test Movie, making sure in Flash Professional is checked, and then I'll click Test.
Viewers: in countries Watching now:
In Flash Professional CS5: Animation Projects, Paul Trani shows how to create dynamic and visually rich animations in Flash Professional CS5. This course demonstrates how to create and import assets, and then take those assets and bring them to life with dynamic motion. It also shows how to create more unique and natural movement by adding special effects, 3D, masks, and even bones to animate characters. Exercise files accompany the course.
- Creating graphics and reusable assets
- Importing graphics
- Making an object move
- Animating a mask
- Using and customizing motion presets
- Morphing shapes
- Animating in 3D
- Adding bones to a character
- Controlling the Timeline with ActionScript
- Randomizing content
Creating reusable assets
At the foundation of Flash are symbols. They allow for animation, interactivity, and can even have special effects like glows and drop shadows. But most of all, they can easily lead to a smaller file size, which is important when it comes to web performance. Where I'm actually going to start is by testing this movie, my home.fla, my home Flash file, my source file, and I'm going to go to Control. I'm selecting Test Movie, making sure in Flash Professional is checked, and then I'll click Test.
What that does is that actually creates this SWF file. This is my small web format file. This is my file that I really want to be as small as possible. But here is an easy way to check its file size. I can actually go to View > Bandwidth Profiler. That will open up this Bandwidth Profiler, which actually gives me the file size for this document. It says it's 296 KB. I want to simplify this design to get this file size down, and I'm going to do this by creating symbols.
So, I'll close that SWF file, and just by looking at this design, I can tell that I really only need one tree I can then duplicate and put in both positions. So, what I'm going to do is I'm going to delete this first one, and I'm going to lock down those other layers. Now I can go ahead and just click and select all of those graphics and then hit Delete. All right, now what I want to do is hold down the Spacebar and kind of pan back over, because I want to take this tree right here with flowers, and I want to convert it to a movie clip, which is a type of symbol.
Open up the Library panel, click and drag all of these graphics into the Library panel. Here I have the Convert to Symbol dialog box that opens, and now I can give it a name. I'll call this tree design, and then I can choose the type of symbol I want to convert this to. Notice there is Movie Clip, Button, and Graphic. The movie clip is actually the most robust and gives me the most flexibility. That's why I want to use it.
So I'm going to select Movie Clip. Most of the graphics I create are actually a movie clip. Button is also another popular one that I will use in a second. But I will select Movie Clip, and I will click OK. Notice how it appears in my Library panel. I can see it right here. And if I sort of expand out the Properties panel and minimize the Library panel, you can see that this tree is now an instance of the tree design, which is in my library. So this is now an instance of that symbol in the library.
All right, so I'm going to go ahead and hold down my Spacebar, and pan up here, and open up my Library panel, because what I want to do is I want to click and drag out that tree onto my stage. That creates a new instance of that tree design. Now I can manipulate it into that position I had it, just by using the Free Transform tool, kind of something like that, okay. So again, I have two instances of one symbol. Now all I'm going to do is I'm going to go to Control > Test Movie, and test this out.
It was 266 KB earlier; now it's 143 KB. It almost cut it in half, it did a great job, and still the integrity of the design is maintained. All right, now I want to convert a couple of other items, the text and then this background bar, into movie clips, and then I'm going to make this a button. I'm going to lock my Trees layer, and I'm going to unlock the Text layer. It's the same process of selecting the graphic and then dragging it into the Library.
Now I can go ahead and give this a name. I'm going to make it a movie clip, sustainable design. It's going to be a movie clip. I'll click OK. I can see it says it's an instance of sustainable design. I will lock that layer and unlock the rectangle right here. I'll just click and drag it to the library. I will convert this into rectangle. It's going to be a movie clip. Then lastly, I'm going to go ahead and select this text as well as that button shape.
So these two items, I'm going to click and drag it into the Library panel as well. This is going to be my replay button, and it is going to be of the type Button. So I'm selecting that, and then I'll click OK. All right, so everything is converted to a symbol now, and let's go ahead and take a look at some of the additional properties you can add to any sort of symbol instance. Well, let's select this rectangle background, and I look in my Properties panel, you can see that it is more robust.
I have this 3D position in view. I have Position and Size. I have this color effect, which is definitely pretty nice, and then I even can change the Blend mode. I'm going to change this to Overlay. That just tints it subtly and it will be more pronounced once I get more graphics back there. Let's take a look at filters. I'm going to select this button. Under the Filters tab right here, I can click Add filter, and here is where I can go ahead and add a drop shadow, a blur, pretty much anything I want.
In this case, I want it to look more like a button, so I'm going to select Bevel. As you'll notice, it adds that bevel, and I can change it even further. I want to decrease the blur, so I'll just click and drag that down to give it more of a harder edge. Then I can start to modify the color or the strength. Let's go ahead and bring down the strength a little bit, kind of like that, just by clicking and dragging. But again, you can see I can easily modify any of the properties for any filter. Of course, to add them, all you have to do is click that Add filter icon right there to add it.
So, that's looking pretty good! My graphics are all squared away. Even if I am not going to be using an item multiple times, I still want to make it a symbol, because it means that I can then animate these graphics or even control it with ActionScript. So you want to get in the habit of converting everything into a symbol.
There are currently no FAQs about Flash Professional CS5: Animation Projects.