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

Creating and working with symbols

From: Introduction to Flash Animation

Video: Creating and working with symbols

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.

Creating and working with symbols

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.

Show transcript

This video is part of

Image for Introduction to Flash Animation
Introduction to Flash Animation

32 video lessons · 6309 viewers

Kelly McCathran
Author

 
Expand all | Collapse all
  1. 1m 38s
    1. Welcome
      1m 38s
  2. 19m 35s
    1. Introduction to Flash CS5 and the Flash Player
      4m 28s
    2. FLA, SWF, and other file types
      5m 43s
    3. Flash feature comparison
      3m 58s
    4. Raster vs. vector
      5m 26s
  3. 27m 56s
    1. Overview of the interface
      7m 42s
    2. Panel modes and workspaces
      6m 54s
    3. Setting preferences
      4m 5s
    4. Choosing the proper document size
      9m 15s
  4. 28m 55s
    1. Merge Drawing mode vs. Object Drawing mode
      6m 43s
    2. Using primitive objects
      6m 37s
    3. Other shape tools
      6m 49s
    4. Selecting, modifying, and transforming objects
      8m 46s
  5. 17m 30s
    1. Your first animation
      6m 4s
    2. That's how the ball bounces
      6m 50s
    3. Working with multiple shape tweens
      4m 36s
  6. 34m 50s
    1. Creating and working with symbols
      8m 16s
    2. Editing symbols
      6m 38s
    3. The anatomy of a button
      4m 0s
    4. Building a button from scratch
      7m 18s
    5. The Library panel
      8m 38s
  7. 22m 42s
    1. The Timeline: Part one
      7m 48s
    2. The Timeline: Part two
      7m 7s
    3. The Timeline: Part three
      7m 47s
  8. 21m 32s
    1. Introduction to the Motion Editor
      6m 54s
    2. Using filters and color effects
      7m 29s
    3. Applying easing with the Motion Editor
      7m 9s
  9. 14m 56s
    1. Options for testing your movie
      3m 57s
    2. Full overview of Publish Settings and export options
      10m 59s
  10. 13m 31s
    1. Using sound in Flash movies
      5m 53s
    2. Importing sound into Flash movies
      4m 40s
    3. Adding sounds to a button
      2m 58s

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 Introduction to Flash Animation.

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 preferences from 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.