Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating reusable assets

From: Flash Professional CS5: Animation Projects

Video: 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.

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.

Show transcript

This video is part of

Image for Flash Professional CS5: Animation Projects
Flash Professional CS5: Animation Projects

25 video lessons · 23473 viewers

Paul Trani
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Flash Professional CS5: Animation Projects.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.