Layers & Symbols
In this lesson we discover layers, which allow us to keep objects separate so they don't affect one another. We also look at Flash's trace tool for converting bitmap images to vector images (filled shapes)
Layers
Flash's layers are at the left side of the timeline:
-
Create a new layer by clicking the tiny icon of a piece of paper with a + on it
-
Double-click the layer's name to change it to 'house'
-
Try dragging layers to reorder them, making the objects on that layer appear behind or in front of objects on other layers
Trace bitmap
-
Download maisy.gif and save to your hard drive
-
Create a new layer, call it 'maisy'
-
File > Import > Import to Stage
-
Navigate to the maisy.gif file and click the Import button
Put the maisy layer behind the house and position Maisy behind the window (check you've deleted the window's white fill). Zoom in to 800% on a part of Maisy that's visible through the window and you'll notice that she is made from coloured blocks (pixels), unlike the window/curtains which are still smooth.
Maisy is a bitmap graphic - composed of thousands of tiny squares of colour, making up the shape of Maisy. This giant group of squares is hard for Flash to work with, so we can convert it to a group of filled vector shapes instead:
-
click on the Maisy image using the Selection tool
-
Modify > Bitmap > Trace Bitmap (100/8/normal/normal) and press OK
Flash has grouped together dots of the same colour into large filled areas. All the orange dots are now grouped into a single jumper shape. All the blue dots have been grouped into six strips of colour (the stripes on her shorts).
Instead of thousands of tiny dots of colour, Maisy is now made up of about 25 filled shapes. Not only is this group of shapes easier/faster for Flash to move around, it allows us to zoom Maisy larger or smaller without looking grainy.
-
Click off Maisy to deselect all her parts (or Edit > Deselect All)
-
Click on the white background around Maisy - delete it
-
Click the 'maisy' layer to select everything on that layer
-
Modify > Group (to group all Maisy's fills together so you can drag them around as a single object)
Symbols & the library
Grouping fills allows us keep them together, but doesn't help us remember that this group of fills represents Maisy mouse! When you have a movie containing lots (hundreds?) of grouped objects, you need a way to track them all. Flash allows us to create a special named object called a 'symbol'. Symbols can be graphics, buttons, or even movie clips, with their own timeline - like another tiny Flash movie inside your main movie!
-
Select a group of objects (click on Maisy)
-
Modify > Convert to symbol...
-
Call it g_maisy and set the Type to 'Graphic' - click OK
Look in the Library palette (Window > Library) - you should see g_maisy, with a 'filled shapes' icon - this shows she's a graphic symbol. There should also be the 'original' bitmap maisy.gif.
Any library item can be duplicated as many times as you like - but all the 'instances' stay linked to the original:
-
Drag 3 g_maisy symbols onto the stage
-
Double-click one of them to 'edit in place' (Edit > Edit in Place)
-
Fill Maisy's jumper with pink
-
All the other g_maisy symbols will now have pink jumpers
Category: ICT
Author: Mr Kershaw