Tasks & Projects
You can also complete any animated GIF work that needs finishing and upload an example to your blog. One issue that was revealed last week in class was that you must display your animated GIF in Wordpress at its original size to see the animation. If you change the size or scale it will only display frame 1 of the GIF. The best method is to save your GIF at the right size to begin with - I wouldn't go much bigger than 600 x 800 pixels, and even smaller is better for a blog post.
Create: things to do this week
Introduction to Animation in Adobe Flash
The Flash Interface
The Adobe Flash interface has changed quite a bit
over the past few years – especially with the update to CS4 – 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
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
2. The Main Interface
The main interface is split up into 3 main areas, the stage, the timeline and panel area.
- The stage is where we will
create our actual flash content, think of it like a play – this is
where we will perform. This is where we will create our artwork.
- The timeline allows us to
organise out content into frames and layers. By using layers we
can place content in front of behind one another – similar to layers in
photoshop. With frames we can organise our content to appear or
execute over certain periods of time.
- The panel area can contain a few different panels. The most common to appear there are the properties panel and the library panel.
- The property panel contains
information about the object you have currently selected, and has
properties you can modify to edit that selected object. If you don't
have anything selected the properties panel will instead tell you
information about your current flash file. This includes:
- the document class;
- the frames per second;
- the size of your flash file; and
- the stage background color
- The library panel contains all
of the assets that you have in your flash file – this can be
movieclips, images, sound, videos etc. You can organise your assets by
name, type or even date modified by clicking on the grey title bar.
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
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
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:
- Select Show Pen Preview to
preview line segments as you draw. Flash displays a preview of the line
segment as you move the pointer around the Stage, before you click to
create the end point of the segment. If this option is not selected,
Flash does not display a line segment until you create the end point of
- Select Show Solid Points to
specify that unselected anchor points appear as solid points and
selected anchor points appear as hollow points (this option is selected
by default). Deselect this option to display unselected anchor points
as hollow points and selected anchor points as solid points.
- Select Show Precise Cursors to specify that the Pen tool pointer appear as a cross-hair pointer,
rather than the default Pen tool icon, for more precise placement of
lines. Deselect the option to display the default Pen tool icon with
the Pen tool.
Note: Press the Caps Lock key while working to toggle between the cross-hair pointer and the default Pen tool icon.
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
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
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.
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
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.
- Use graphic symbols for static images and to
create reusable pieces of animation that are tied to the Timeline of the
main movie. Graphic symbols operate in sync with the movie's Timeline.
Interactive controls and sounds won't work in a graphic symbol's
- Use button symbols to create interactive buttons
in the movie that respond to mouse clicks, rollovers or other actions.
You define the graphics associated with various button states, and then
assign actions to a button instance.
Note: you can use movieclips to create button functionality and use ActionScript to control it like a button.
- Use movieclip symbols to create reusable pieces of
animation. Movie clips have their own multiframe Timeline that plays
independent of the main movie's Timeline—think of them as mini-movies
inside a main movie that can contain interactive controls, sounds, and
even other movieclip instances. You can also place movieclip instances
inside the Timeline of a button symbol to create animated buttons.
- Use font symbols to export a font and use it in other Flash movies.
- other symbols you may find in the Library come from importing media such as images, audio files and video.
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
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:
- Select the instance on the Stage and choose Window > Properties.
- Choose Graphic, Button, or Movieclip from the pop-up menu in the upper left corner of the Property panel.
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:
- Select the instance on the Stage.
- Choose Modify > Break Apart (or CTRL-B)
This breaks the instance into its component graphic elements.
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
- In the Property inspector, you can view the
instance's behaviour and settings—for all instance types, colour
settings, location, size, and registration point; for graphics, the loop
mode and first frame that contains the graphic; for buttons, the
instance name (if assigned) and tracking option; for movie clips, the
instance name (if assigned).
- In the Info panel, you can view the location and size of a selected instance.
- In the Movie Explorer, you can view the contents of the current movie, including instances and symbols.
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
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.