Multimedia and Technology Training At the UC Berkeley Graduate School of Journalism
Symbols are abstract elements in Flash. The best way to describe them would be to think of them as containers. When you convert an image to a Symbol, you aren't actually converting it as much as you are placing it inside a Symbol container.
Why do you need to do this? Well, Flash doesn't really have the ability to do much with objects that are on the Stage. But, if you place an object inside of a Symbol, Flash can manipulate properties of that Symbol. For example, it can move it around the Stage, stretch it out, or change its transparency — which is the property we are going to change to make the images fade.
Grasping the concept of Symbols is not easy. It is best to work with them for a little bit, and you will quickly understand the way Symbols work. Just remember:
When you should convert an object to a Symbol:
When you want to animate, stretch, fade, position, move, make clickable or interact with an object on your Stage.
When you do not need to convert an object to a Symbol:
When the object is static and will not change at all, like a background image or a logo.
Converting an image to a symbol is generally very easy to do, however in our case it is a little trickier since we want each of our four images to be converted to their own symbol. We will have to first hide some of the images to make sure we only convert one image at a time into a symbol.
Click the small dots under the eye icon to hide the top three layers.

You will see the images on those layers disappear.
Next, and this is important, click once on the image that is showing on your stage to select it.
Under the Modify menu, select Convert To Symbol.

If the option is grayed out, it means you haven't selected the image on the Stage. Click once on the image that is on the Stage first.
Type the name of the image in the symbol dialogue box, and choose Graphic for the type option.
The registration won't really matter in this tutorial, so you can leave the upper-left box checked, and for people using CS4, the Folder option can remain Library Root.
You will know you were successful in converting the image to a symbol if you see a small circle appear in the center of the image. The border may be a different color depending on the Flash version you are using.
Now hide the layer with the image you just converted to a symbol and reveal the next layer up.

Repeat the process of converting the image to a graphic symbol, naming it appropriately. Do this will all four images so that they are all symbols.
About the different types of symbolsThere are three types of symbols: MovieClip, Button and Graphic. This is an introductory tutorial, so we will only be using Graphic symbols, but it is good to understand the differences between the different symbols. A Graphic symbol is mostly used by animators. It is essentially the most basic of symbols and offers the ability to animate objects in your Flash project. It also has certain properties that allow you to see the animation play out inside the symbol as you scroll through your timeline. A Button symbol is just what it sounds like. It is a basic symbol that allows you to create buttons with roll over effects. You can also give button symbols an instance name, which allows you to add functionality with ActionScript code. A MovieClip is the most advanced type of symbol. It is much like a graphic symbol, except you can give it and instance name so you can manipulate it with ActionScript code -- something you cannot do with Graphic symbols. Almost all moderate to advanced projects require the use of MovieClip symbols. |
Comments? Contact us | ©2007-2009 The Regents of the University of California.
Comments
1) Charlotte Babb, August 6, 2008 at 2:33 p.m. [Link]
Thank you so much for this tutorial. My boss now thinks I am a genius because I can do a simple slide show in only ONE day.
This tutorial is clear and well written for anyone who will follow it step by step. Once I got my movie to run, I was able to tweak the timing and make it match the one I needed to replace.
Knight Digital Media Center at Berkeley ROCKS!
2) Copperwoman Saso, November 16, 2008 at 7:38 p.m. [Link]
Thank you for this tutorial. I am trying to make a slideshow for a clients homepage. I succeeded but still have a glitch. I would like to know how to make the last slide in the show tween to the first slide in the show without showing the white background. What I have done can be seen at:
http://www.mothersjourney.com
thank you for any help you can give
3) Steve Dowe, November 29, 2008 at 10:33 a.m. [Link]
Hey Copperwoman Saso,
I had the same problem - here's the solution:
1) In the layer that you want to cycle at the end/beginning, insert a Key Frame at frames 1 & 10.
2) In the layer panel, now click on the "Locked" dot (the dot underneath the padlock icon) for the other frames, but keep your cycling layer unlocked.
3) Right click (Windows) or click-hold (Apple... I think) so that you can "Insert Motion Tween". An arrow should appear from frames 1-10. Do the same on frame 10, so that another arrow appears from frame 10-60.
4) Now, with the red frame selector, select frame 1, and Edit > Select All.
5) You should be able to change the alpha for the cycling layer - set it to 99%. Because you locked the other layers, this change only affects the unlocked layer.
6) Now use the red selector to highlight frame 10, and set the alpha to 1%.
7) To be sure that this layer will stay transparent until frame 60, you can repeat steps 5 & 6 from frames 10-60, but keep the beginning and end alpha settings the same, at 1%.
In the Timeline, you should now see that your cycling layer spans the length of the animation, and mostly consists of a set of motion tweens.
Hope this helps!
4) Steve Dowe, November 29, 2008 at 10:35 a.m. [Link]
I forgot one thing - you must remove the blank keyframe at the end of the animation so that you don't get a white flash (for 1/15 of a second)!
:-)
Add your comment
Login to post a comment.