HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

 

 

Flash Basics III: The Graphic Symbol

 

One of the foundation ideas in Flash is that you create elements once (SYMBOLS), store them in the LIBRARY, and use them many times, by dragging them onto the stage or putting them into other symbols (INSTANCES of the SYMBOLS - - think of them as copies or children of the main symbols in the Library, or as objects, if you're familiar with Object Oriented Programming).

 

So, we're going to make a new symbol, a Graphic. Flash doesn't have a CREATE or MAKE menu, we must go to the INSERT menu, although this might seem confusing because it implies a  place we're inserting the symbol. It is confusing, so you can think of it as INSERTING a new symbol into the project as a whole, or INSERTING a new symbol into the LIBRARY. Under INSERT, select New Symbol . . . 

 

 

The Create New Symbol box opens. Rename it dot, select Graphic, and click OK.

 

Now, you'll notice a few changes to your interface. Notice that the icon for your graphic symbol and the name dot appears next to Scene 1 (the MAIN STAGE). This is very important, because you are no longer on the MAIN STAGE, you are EDITING A SYMBOL. ALWAYS KNOW WHERE YOU ARE in Flash. Look up to the bar below the timeline to find out where you are - - are you on the MAIN STAGE (and the MAIN STAGE is, essentially, the MAIN TIMELINE), or are you EDITING A SYMBOL (and EACH SYMBOL WILL HAVE ITS OWN TIMELINE, distinct from the MAIN TIMELINE).

 

This is what you should see:

 

 

The fact that you're editing a symbol with its own timeline should be further underscored by the fact that THE MAIN STAGE SEEMS TO HAVE GONE AWAY, right? You don't see the familiar white STAGE against the GREY BACKGROUND. All you see is this crosshair:

 

 

Don't be alarmed. If you want to see the Main Stage again, just click on the light blue, left-pointing arrow next to the clapboard icon that stands for Scene 1 (the Main Stage), or just click on that clapboard icon. You'll be back on the main stage. 

 

To get back to editing the graphic symbol, DOUBLE-CLICK on the dot graphic icon in the Library (which should have popped up in the Library when you created your dot symbol);

 

 

 

GET COMFORTABLE with navigating between the Main Stage and editing your symbols. You'll be doing this a lot, and you ALWAYS NEED TO KNOW WHERE YOU ARE. If you're lost, just look under the timeline and read where you are.

 

OK, now we're going to EDIT THAT GRAPHIC SYMBOL we created (dot), because right now it's just an empty placeholder. We will start getting comfortable with the DRAWING TOOLS in Flash, which should be somewhat familiar to you if you've used PhotoShop, and more familiar if you've used Illustrator (because when you draw in Flash, you are drawing VECTOR SHAPES, like you do in Illustrator). 

 

In the Toolbar, click and hold the Rectangle Tool, and your drawing menu will appear. Select the Oval Tool. You can also go to this tool quickly by pressing the 'O' key on your keyboard:

 

 

(and where are you right now? You should be editing your 'dot' symbol, so you should see that icon next to 'Scene 1'. If that's not what you see, double-click the 'dot' icon in your Library. What's that, you don't see your Library? Open it by going Window > Library, or pressing the Command or Apple Key + 'L' (control + 'L' on Windows))

 

In the PROPERTIES BAR, locate the pencil icon (STROKE) and the paint bucket icon (FILL). Stroke should have a red diagonal in the selection swatch, indicating no stroke, and the selection swatch next to the paint bucket should be solid black: 

 

 

You can also change the stroke and fill of the graphic you're about to draw by finding the same icons and selection swatches on the toolbar:

 

 

[Click on the lower right corner of the selection swatches to change them.]

 

 

OK, now hold down the SHIFT key (this constrains vertical and horizontal proportions, so you'll draw a perfect circle), and CLICK AND DRAG a diagonal from upper left to lower right, just below the crosshair in the center of the editing area. You should see this:

When you RELEASE your mouse, you should see this:

Congrats, you've created a black dot! You should see the preview of what you created in the Library:

 

 

Notice, also, that there's a solid black dot in that first frame of the timeline of the 'dot' graphic symbol. This indicates you've got something on that layer, in that symbol: 

 

 

Now, something simple but it also seems confusing the first time. We're going to further edit the dot symbol by MOVING it around and ALIGNING it to the crosshair. But DON'T just click on it to move it - - if you've been following instructions, you've still got the OVAL tool selected, and you'd be drawing another circle. Select the CURSOR (black arrow) tool at the very top of the Toolbar first (or press the letter 'M', because it's also called the MOVE tool). Make sure you've selected the black dot with the cursor tool.

 

Open the ALIGN window, and click on To stage. This will align or distribute objects with reference to the main stage (or if you're editing a symbol, with reference to the crosshair. 

 

 

Click on the left Align (  ) and the Top Align (  )  .

 

Your graphic is now aligned to top and center of the crosshair (see below). This will be important when you start putting symbols within other symbols: it's the only absolute placement you can achieve within a symbol element.

 

 

 

Now, continue to the next tutorial, and we will use this graphic symbol to make a button.