SIM1 - Class 01 - 2011

Subject SIM1 - Interactive Media 1

BSBINN502A.1 - Build and Sustain and Innovative Work Environment (part 1)
CUFDIG506A.1 - Design Interaction (part 1)

Teacher Lisa Cianci - email:
Class Website:
                         (username & password = student)


Introduction to SIM1

Today we will be covering the following topics:


Assessment Tasks

See the detailed Assessment Task documents for more about your assessment - we will be discussing this extensively in class so ask questions if you are unsure of anything.

Download a copy of the design document sample Word doc to help you get started on the first assessment task.


Introduction to Flash

The Flash Interface

The Adobe Flash interface has changed quite a bit over the past few years – especially with the update to CS4 & CS5 – new tools and options have been introduced and the default layout has changed. As a group on screen we will look through the basic tools you will need to know, and see what they can do. Before the end of the class I'll come around and see what you have made with the tools you have just been shown.

When you open up Flash it may look a little daunting at first, but here's a quick run-down of the basics.

1. Start up

When you first open up Flash you will see the welcome screen which allows you to easily start a new flash file or open an already existing file. Under 'Create New' you have many different options for what type of file you would like to create. For this class we will always be creating an ActionScript 3 Flash file.

After you have either selected to create a new flash file or opened an existing file you will now arrive at the main interface ( for the purpose of this tutorial let's start a new flash file ).


2. The Main Interface

The main interface is split up into 3 main areas, the stage, the timeline and panel area.


3. The Menu bar

At the top of the screen we find the menu bar.

Listing everything that can be located via the menu bar here would be impossible, so we'll gradually cover parts of it over the rest of the semester. For now, the main things you need to know are how to 'save', 'open' and start a 'new' document which are found via the 'File' menu.


4. The Tool bar

To the right of your screen should be a toolbar. If it isn't there, go to the 'Window' drop down on the menu bar and select 'Toolbars' then select 'Edit Bar'.

This toolbar contains all the tools you're going to need to start authoring Flash content.
Hovering over each tool will reveal its name and the shortcut keys that can be used to select it.


The top two tools are the Selection and Sub-selection tools, which are used to select or move images around.

The next three are the Free Transform, 3D Rotation tool and Lasso tools. The Free Transform tool is used to change the proportions of your content. The 3D Rotation tool is for rotating Movieclips on the x,y, and z axis. The Lasso tool is used to select awkward sections of your images. Note that the grey triangle underneath the tools reveals more options depending on which tool is selected.

Underneath we have the Pen and Text tools. The text tool is pretty self explanatory, it allows you to add text to your work. The Pen is used for drawing lines that can then be manipulated by the selection tools. These lines can be either straight, or have a curve. If you hold down the Pen tool button, it will reveal some more tools for adding and subtracting anchor points. Anchor points are just areas that you can manipulate with the Sub-selection tool to change the curve of the line.

Next are the Line and Shape tools. These are obviously used for drawing lines and shapes. The default shape is a rectangle, but if you hold down the button it will reveal a greater selection.

Next we have the Pencil and Brush tools. These two tools are fairly similar in that they both allow you to draw freehand. The Pencil draws lines that can be easily manipulated by the Selection or Sub-selection tools using strokes, whereas the Brush draws using fills of colour.

Next we have the Deco tool and the Bone tool - both tools are based on physics concepts. The Bone is based on inverse kinematics which allows you to create quite complex animation by linking objects or shapes. The deco tool allows you to make some pretty cool designs

The following tools are the Ink Bottle and Paint Bucket. The Ink Bottle (found by holding down on the paint bucket icon) is used to change the thickness or colour of a line, and the Paint Bucket fills an empty shape with colour, or changes the colour of an already filled shape.

The next two are the Eyedropper and Eraser tools. The Eyedropper is used to select a colour or line style, which can then be applied by the Ink Bottle or Paint Bucket. The Eraser is used to clear sections of your artwork.

Then we have the Hand and Zoom tools. The Hand tool is used to drag your workspace around without having to use the scrollbars to the right and bottom of the screen. This is also particularly handy when you're zoomed in on an object, which is what the Zoom tool allows you to do. The default setting is to zoom in, but you can hold 'Alt' whilst clicking to zoom out again.

And finally, the bottom two squares can be used to change the colour of your pencil / pen lines, or the colour you wish to fill your shapes with.


Note: when you use most Flash tools, the area below the Tool bar and the Property inspector change to present the settings associated with that tool. For example, if you choose the Text tool, the Property inspector displays text properties, making it easy to select the text attributes you want. Or if you choose the Selection tool, at the bottom of the toolbar you'll see a magnet-shaped tool which can be used to Snap to Objects. You can use snapping to automatically align elements with each other and with the drawing grid or guides.

When you use a drawing or painting tool to create an object, the tool applies the current stroke and fill attributes to the object. To change the stroke and fill attributes of existing objects, you can use the Paint Bucket and Ink Ink Bottle tools in the toolbox or the Property inspector.
You can reshape lines and shape outlines in a variety of ways after you create them. Fills and strokes are treated as separate objects. You can select fills and strokes separately to move or modify them.

About overlapping shapes in Flash
When you use the Pencil, Line, Shape, or Brush tool to draw across another line or painted shape, the overlapping lines are divided into segments at the intersection points. You can use the Selection tool to select, move, and reshape each segment individually.

Note: Overlapping lines that you create with the Pen tool do not divide into individual segments at intersection points, but remain connected.  To avoid inadvertently altering shapes and lines by overlapping them, you can group the shapes or use locked layers to separate them.


Drawing with the Pencil tool
To draw lines and shapes, you use the Pencil tool, in much the same way that you would use a real pencil to draw. To apply smoothing or straightening to the lines and shapes as you draw, you can select a drawing mode for the Pencil tool.

Drawing straight lines, ovals, and rectangles
You can use the Line and Shape tools to easily create these basic geometric shapes. The Shape tool creates stroked and filled shapes.

Using the Pen tool
To draw precise paths as straight lines or smooth, flowing curves, you can use the Pen tool. You can create straight or curved line segments and adjust the angle and length of straight segments and the slope of curved segments.
When you draw with the Pen tool, you click to create points on straight line segments, and click and drag to create points on curved line segments. You can adjust straight and curved line segments by adjusting points on the line. You can convert curves to straight lines and the reverse. You can also display points on lines that you create with other Flash drawing tools, such as the Pencil, Brush, Line, or Shape tools, to adjust those lines.

Setting Pen tool preferences
You can specify preferences for the appearance of the Pen tool pointer, for previewing line segments as you draw, or for the appearance of selected anchor points. Selected line segments and anchor points are displayed using the outline colour of the layer on which the lines and points appear.

To set Pen tool preferences:

1    Choose Edit > Preferences and click the Drawing tab.

2    Under Pen Tool, set the following options:

3    Click OK.


Painting with the Brush tool
The Brush tool draws brush-like strokes, as if you were painting. It lets you create special effects, including calligraphic effects. You can choose a brush size and shape using the Brush tool modifiers. On most pressure-sensitive tablets, you can vary the width of the brush stroke by varying pressure on the stylus.

Brush size for new strokes remains constant even when you change the magnification level for the Stage, so the same brush size appears larger when the Stage magnification is lower.

For example, suppose you set the Stage magnification to 100% and paint with the Brush tool using the smallest brush size. Then, you change the magnification to 50% and paint again using the smallest brush size. The new stroke that you paint appears 50% thicker than the earlier stroke. (Changing the magnification of the Stage does not change the size of existing brush strokes.)
You can use an imported bitmap as a fill when painting with the Brush tool.


Reshaping lines and shape outlines
You can reshape lines and shape outlines created with the Pencil, Brush, Line, Oval, or Rectangle tools by dragging with the Arrow tool, or by optimising their curves.

You can also use the Sub-selection tool to display points on lines and shape outlines and modify the lines and outlines by adjusting the points.


Straightening and smoothing lines
You can reshape lines and shape outlines by straightening or smoothing them.

Note: You can adjust the degree of automatic smoothing and straightening by choosing preferences for drawing settings.

Straightening makes small straightening adjustments to lines and curves you have already drawn. It has no effect on already straight segments.

You can also use the straightening technique to make Flash recognize shapes. If you draw any oval, rectangular, or triangular shapes with the Object Drawing option turned off, you can use the Straightening option to make the shapes geometrically perfect.


Erasing with the Eraser tool removes strokes and fills. You can quickly erase everything on the Stage, erase individual stroke segments or filled areas, or erase by dragging.

You can customize the Eraser tool to erase only strokes, only filled areas, or only a single filled area. The Eraser tool can be either round or square, and it can have one of five sizes. The Eraser tool has the Faucet option that allows you to erase whole fills - it's the opposite of the Bucket tool.



To automatically align elements with one another, you can use snapping. Flash lets you align objects by snapping to other objects or by snapping to individual pixels.

Note: You can also snap to the grid or to guides.

Pixel snapping
You can turn on pixel snapping using the Snapping options in the View menu. If Snap to Pixels is on, a pixel grid appears when the view magnification is set to 400% or higher. The pixel grid represents the individual pixels that will appear in your movie. When you create or move an object, it is constrained to the pixel grid.


5. Symbols, Instances, and Library Assets

A Symbol is a graphic, button, or movie clip that you create once in Flash and can reuse throughout your movie or in other movies. A symbol can include artwork that you import from another application. Any symbol you create automatically becomes part of the library for the current document.

An Instance is a copy of a symbol located on the Stage or nested inside another symbol. An instance can be very different from its symbol in colour, size, and function. Editing the symbol updates all of its instances, but applying effects to an instance of a symbol updates only that instance. You can also create font symbols in Flash.

Using symbols in your movies dramatically reduces file size; saving several instances of a symbol requires less storage space than saving multiple copies of the contents of the symbol. For example, you can reduce the file size of your movies if you convert static graphics such as background images into symbols that you then reuse. Using symbols can also speed movie playback, because a symbol needs to be downloaded to the Flash Player only once.

You can edit symbols in several ways: in place on the Stage, in a new window, or in symbol-editing mode. When you edit a symbol, the Timeline window displays only the Timeline of the symbol you are editing.

Look at the example below, here I am using 15 instances if the same Square Symbol I have in my library, but I've transformed them and applied different effects to them to make them look different even though they all are instances of the same symbol.

Now lets say I edit my Square Symbol in my library (by double clicking it to bring it up on my stage) to look like the following:

See how it affects all my instances.

Types of Symbol Behaviour

Each symbol has a unique Timeline and Stage, complete with layers. When you create a symbol you choose the symbol type, depending on how you want to use the symbol in the movie.


Changing Instance properties
Each symbol instance has its own properties that are separate from the symbol. You can change the tint, transparency, and brightness of an instance; redefine how the instance behaves (for example, change a graphic to a movie clip); and set how animation plays inside a graphic instance. You can also skew, rotate, or scale an instance without affecting the symbol.

In addition, you can name a movie clip or button instance so that you can use ActionScript to change its properties.

To edit instance properties, you use the Properties panel (Windows > Properties).

The properties of an instance are saved with it. If you edit a symbol or re-link an instance to a different symbol, any instance properties you've changed still apply to the instance.


Assigning a different Symbol to an Instance
You can assign a different symbol to an instance to display a different instance on the Stage and preserve all the original instance properties, such as colour effects or button actions.

For example, say you're creating a cartoon with a Rat symbol for your character, but decide to change the character to a Cat. You could switch the Cat for the Rat symbol and have the updated character appear in roughly the same location in all of your frames.
To assign a different symbol to an instance:
1    Select the instance on the Stage and choose Window > Properties.

2    Click the Swap button in the Property inspector.

3    In the Swap Symbol dialog box, select a symbol that will replace the one currently assigned to the instance.
To duplicate a selected symbol, click the Duplicate Symbol button at the bottom of the dialog box.
Duplicating lets you base a new symbol on an existing one in the library and minimizes copying if you're making several symbols that differ just slightly.

4    Click OK.

Changing an Instance's type
You can change an instance's type to redefine its behaviour in a movie. For example, if a graphic instance contains animation that you want to play independently of the main movie's Timeline, you could redefine the graphic instance as a movieclip instance.
To change an instance's type:

Breaking Apart Instances
To break the link between an instance and a symbol and make the instance into a collection of ungrouped shapes and lines, you "break apart" the instance. This is useful for changing the instance substantially without affecting any other instance. If you modify the source symbol after breaking apart the instance, the instance is not updated with the changes.
To break apart an instance of a symbol:


Getting information about instances on the Stage
As you create a movie, it can be difficult to identify a particular instance of a symbol on the Stage, particularly if you are working with multiple instances of the same symbol. You can identify instances using the Property inspector, the Info panel, or the Movie Explorer.

The Property inspector and Info panel display the symbol name of the selected instance and an icon that indicate its type—graphic, button, or movie clip. In addition, you can view the following information:


Class Exercise

Create something simple in Flash using the tools we have explored today.

Try using layers and the timeline to place content you have created using the Tool bar and Library.
Try creating content in Symbols such as Graphics Symbol, MovieClip, Button. We will cover these symbols in more detail in other classes, so take a good look at how they are different from each other, what properties they have, and think about when you would use each type of symbol.
Remember you can always use the Flash Help (F1 key) or web search engines to search for further information about everything we are covering in Flash.

Save your work in a directory called Class01. Don't forget to back up your work every week. It's a great way for you to go back and reference something we've done in class if you forget how to do it.


use the rest of the class to start work on your assessment tasks