Learning Flash 1

View Flash animation of this lesson

1. Start a new Flash document

• Start Menu > Programs > Macromedia > Flash 8
• Either Create New > Flash Document from the Start Page panel
  or File > New > Flash Document (Cmd-N)

2. Introduce the stage & tools

The Flash environment consists of five main areas:

1. The stage: the large white 'canvas' area in the middle of the screen. This is where you draw and manipulate objects.
2. The toolbar: a series of buttons down the left of the screen. These are used to create and manipulate objects in the main stage area.
3. The timeline: a series of dashed lines across the top of the screen. This shows us how many 'frames' into the movie we are (12 frames per second).
4. The properties palette: wide panel below the stage. Here we can adjust an item's colour, size, font, etc.
5. Other palettes: down the right side of the screen appear a range of more specific palettes with various functions. One of the most important is the Library, a storage area for created objects.

For now, hide the timeline panel at the top of the screen since we won't be using it today: Window > Timeline

3. The Tools

Now let's have a look at the object creation & manipulation tools in Flash. Each tool has a shortcut key which can be seen by hovering over the tool in the palette. Students should learn these shortcuts.

Drawing & Colour

Before you start drawing, check that 'Object Mode' is off and 'Snapping Mode' is on. In 'Object mode' each object is automatically grouped, so objects cannot interfere with each other (even if you want them to). Turning on 'Snapping mode' ensures lines & curves 'snap to' each other, making drawing & filling easier.

• Select the Rectangle tool (R). Draw a box that almost fills the stage.
• From Fill colour select a strong yellow. Using the Bucket tool (K) click the rectangle to fill with yellow.
• From Stroke Colour select red. Using the Ink Bottle tool (S) click near the edge of the yellow rectangle. This should create a red stroke (border) around the box. In the Properties palette (below the stage) change the stroke width to 5. Change the stroke colour back to black.

Selecting & Dragging

• With the Selection tool (V) click once on the top line of the box. Only the top line should appear 'highlighted'. Drag it up about 1cm. None of the other lines should move. Undo (Ctrl-Z).
• Double-click the top line - now all four lines should appear highlighted. Drag these around as a single item. Undo (Ctrl-Z).
• Using the Select tool (V) click the yellow rectangle once (it should appear highlighted). Drag it to another part of the canvas. Repeat. Notice it does not interfere with any lines below it. Now place the rectangle above an 'edge/line' and click into an empty (white) part of the canvas/background to deselect the yellow rectangle. Select the rectangle again and drag - notice it has now erased/deleted the part of the line that was below it. Repeatedly select/move/deselect the fill until you've 'rubbed out' all the lines. Undo (Ctrl-Z) back to the filled box with all its lines.
• Double-click the fill - it should select both the fill and the lines Drag everything around the screen. Undo.

Lines & Fills

• Select the top line/edge. Delete it. Notice the fill is unaffected.
• Select the Line tool (N). Draw a 'roof', starting from the apex above the middle of the top line, down to the left 'wall'. It's okay if some of the roof is drawn in the 'grey' area (the workspace) for now. As you drag towards the top of the left wall the cursor should 'snap' to it, indicated by a 'snap circle' attached to the cursor. Repeat from the apex to the right wall.
• Select a brown fill colour. Fill (K) the apex/attic area with brown. Decide you would prefer matching yellow & use the Eyedropper tool (I) to 'suck up' the yellow colour from the original rectangle. Use the Bucket tool (K) to fill the brown apex/attic area. Undo (Ctrl-Z) back to brown!

Transforming & Reshaping

• Use Edit > Select All (Ctrl-A) to highlight everything on the stage. Select the Transform tool (Q). Notice the eight black squares around the 'house' - these are resize handles. Click and drag them to make the whole house fit easily onto your screen.
• Use the rectangle (R) and oval (O) tools to draw a red door with a black handle and a square window (hold down the shift key whilst dragging to create circles & squares rather than ovals & rectangles). Click the filled area within the window and press the delete key to remove it.
• Use the line tool (N) to draw straight 'curtains' either side of the window (similar to a 'K' on both sides). Use the selection tool (V) to adjust line ends
• Now position the selection tool (V) in the middle of one of the curtain lines and the cursor should change to an arrow with a curve. Drag to reshape the curtain.
• Fill the curtains with green and save your document.

Category: ICT

Author: Mr Kershaw