Click here to create a
new Flash file.
This is the workspace for our new file. This
screen is from CS3. Your workspace can have
different tools and windows showing. Sometimes
the tools or windows are called panels.
This part of the workspace is the actual file.
The file name.
This is our timeline. We are making cartoons, one frame at a
time. The numbers above refer to each frame of our cartoon.
This is where we create our
images (pictures, cartoons,
objects, actors, etc.). It’s
called the Stage. Action!
To the left of the workspace (in CS3) is the toolbar (or the Tool panel).
First we will learn
how to make and
modify rectangles.
Click on the Rectangle Tool. If you hover the
mouse over any icon, it displays what the tool is.
Just ignore those letters (R, O, R, O) for now.
Click-hold-and-drag on the Stage
to create a rectangle. If you want
to make a perfect square, just hold
down the Shift key while dragging.
When you release the mouse button, the
rectangle is formed. My current settings
made a blue-filled rectangle with no border.
At the bottom of the screen is the Property inspector (or Property panel or Property window).
This shows the properties of the currently selected object (or if no object is selected, it shows
the properties of the current Tool). After creating the rectangle, it is not currently selected
(surprisingly). So the Rectangle Tool properties are shown: Fill color, border color, border
thickness, etc. As you become familiar with the Property inspector, you can use it to modify
properties as well as examine them.
This is the border color for the Rectangle
Tool; the red slash means “none.” That’s
why our rectangle was created without a
border. The icon is a little pencil because
Flash refers to borders as strokes. I will
use stroke because Flash calls all lines and
curves strokes. The little arrow in the
bottom-right corner means you can click
on the button to change the stroke color.
This is the fill color. The little arrow in the
bottom-right corner means you can click
on the button to change the fill color.
Click on the Selection Tool. Again I have hovered the mouse over the icon
to display what the tool is. The letter (V) is just a quick way to choose the
Selection Tool without clicking on it. You just hit the “V” key (and you
don’t have to use the Shift key).
Then click on your rectangle . It changes
into a lighter, cross-hatched version to
indicate it is currently selected.
Click on the button to change the fill color.
Try it! I’ll change mine to a shade of red.
We don’t care much now, but
this shows the width and height
of our rectangle in pixels…
… and its position on
the Stage in pixels.
Clicking the border/stroke color is useless for
our rectangle. This button cannot create a
border/stroke; it can only change the color if
the border/stroke exists already. The moral is:
Think ahead about what you want to create.
So let’s create a red rectangle with
a blue border/stroke. Click on the
Rectangle Tool and then change
the Fill color to red and the Stroke
color to blue in the Property
inspector (bottom panel).
Click-hold-and-drag on the Stage
to create a second red rectangle
with a blue border.
Now let me show you what we
really created. First we learn how
to move objects (and more).
Click on the Selection Tool
(or just hit the “V” key).
Click-hold-and-drag on the red,
borderless rectangle. That’s how
you move objects. The cursor
shows
to indicate moving.
Move the rectangle around the blue-border rectangle.
Notice lines appearing and disappearing? Those are
snap lines. It helps you align objects if you wish.
Change it to a thickness of 5.
Ok, that was pretty much what we expected.
Now click-hold-and-drag on the blue-border
rectangle; make sure you grab it on the inner
red part (the fill). Whoa! This is not just a
rectangle. It’s actually five objects!
This is not just a rectangle. It’s actually
five objects! Move your cursor over the
blue border/strokes (don’t click-holdand-drag). Notice how the cursor
changes? It’s showing you what it will
grab or modify.
Now click-hold-and-drag on the right segment of the
blue border/stroke. So that lets you “warp” it.
Ok, undo that “warp” (either Edit|Undo or Ctrl-Z).
Now click (and release) on the right segment of the
blue border/stroke; it thickens and looks like a zipper
to indicate just that piece is selected.
Now click-hold-and-drag on the right segment of
the blue border/stroke. So that lets you move it.
Use multiple undos ( Ctrl-Z) to restore the Stage to the original
two rectangle. If we want to move the second red rectangle (with
a blue border), then we have to select all five objects. The easiest
way is to click-hold-and-drag a selection frame around it.
This is how it looks when it’s all selected.
Now click-hold-and-drag anywhere
on the second (selected) rectangle.
So that lets you move it as a whole.
Time to play! Just mess around with your two
rectangles; warp them, change their colors,
separate pieces. See if you can make these from
the second red rectangle (with a blue border)!