Flash
Tutorial
Getting Started
To begin, open Flash 5.The upper left corner
of the screen displays the Tool palette, which contains tools you can use to
create or modify graphics and text. You select a tool by clicking on it. Tool
modifiers for the selected tool display below the Tool palette. You use
modifiers to set tool options. The Timeline appears in the upper portion of the
screen. You use the Timeline line to lay out the sequence of the movie. The
Stage displays in the center of the screen. You create your movie on the Stage.
Movie Properties
You start creating your movie by setting the
Frame Rate, Dimensions, Back You set these properties in the Movie Properties
dialog box.
To set the
properties for the movie you are going to create:
-
Choose Modify > Movie from the menu. The Movie Properties dialog box
will open.
-
Type number in the Frame Rate field.
-
Type number in the Width field.
-
Type number in the Height field.
-
Click on the Background color box and set the Background color to white.
-
Select Pixels from the drop-down menu in the Ruler Units field.
-
Click on OK.
The Grid
In the
exercises that follow, you will be creating graphics. When creating graphics,
the grid is often helpful. To turn on the Grid:
-
Choose View > Grid > Edit Grid from the menu. The Grid dialog box
will display.
-
Click on the Color box and select gray to have the gridlines display in
gray.
-
Select Show Grid to cause the grid to display.
-
Select Snap to Grid to cause the edges of your graphic to align with the
grid lines.
-
Set the Horizontal field to separate horizontal lines by 20 pixels.
-
Set the Vertical field to separate vertical lines by 20 pixels.
-
Set the Snap Accuracy to Normal.
-
Click on OK.
The Oval Tool
In the
exercise that follows you will use the Oval tool to draw an ellipse. You will
then turn the ellipse into a symbol. Symbols are reusable graphics you store in
the Library. Later in the tutorial you will turn the ellipse into the button
movie viewers press to start the movie.
To draw the
ellipse:
-
Choose View > Antialias from the menu. Choosing Antialias will smooth
the edges of your drawing.
-
Select the Oval tool. Two color boxes will appear on the Modifier panel.
These color boxes are used to set the stroke and fill colors. The stroke
color outlines your drawing. The fill color fills the center of your
drawing.
You set the
thickness of the Stroke line in the Stroke panel. To set the thickness of the
Stroke line:
-
Choose Window > Panels > Stroke from the menu. The Stroke panel will
open.
-
Choose Solid from the drop down menu to select the type of line that will
outline your drawing.
-
Type 3 in the Vertical field to set the line thickness.
-
Click on the Stroke color box and select black as your stoke color.
-
Click on the Fill color box and select navy blue as your fill color.
-
Click on the Stage and drag diagonally to draw an ellipse.
Creating a Symbol
You are now
ready to turn the graphic (the ellipse) you created into a symbol and store the
graphic in the Library. Items stored in the Library can be used later.
-
Select the Arrow tool.
-
Double-click on the ellipse.
-
Choose Insert > Convert to Symbol from the menu. The Symbol
Properties dialog box will open.
-
Type Start Button in the Name field.
-
Select Button as the type of behavior.
-
Click on OK.
-
Choose Window > Library from the menu. The Library panel will
open. You should see Start Button in the Library window.
-
Press the Delete key to delete the ellipse from the Stage. Donft worry. You
have a copy of the Start Button in the Library.
Gradients
When you click on the Fill color box, the
Fill dialog box shown here will open.
Gradients
display on the bottom row and show gradations of color. You will use a gradient
to create the moviefs sky. First, you must create the gradient you will use. To
create the gradient:
-
Choose Window > Panels > Fill from the menu. The Fill panel will
appear.
-
Select Linear Gradient from the drop-down menu.
-
Click on the first Edit Gradient Range icon. A color box will appear.
-
Click on the color box and select blue.
-
Click on the second Fill Gradient Range icon. Click on the color box and
select white.
-
Move the second Fill Gradient Range icon to the three-quarter point on the
Gradient Range slider.
-
Click on the Save icon.
The Rectangle Tool
You use the Rectangle Tool to draw rectangles and squares. In this exercise you
will create a rectangle and fill it with the gradient you just created. You will
then turn the resulting graphic into a symbol and use it later to create the
sky.
-
Select the Rectangle tool.
-
Move to the Stroke panel. If the Stroke Panel is not open, choose Window
> Panels > Stroke from the menu to open it.
-
In the Stroke Panel, select Hairline from the drop-down menu.
-
In the Stroke color box, select black.
-
In the Fill color box, select the gradient you created.
-
Click on the Stage and drag diagonally to create a rectangle.
Later you
will use the graphic you just created. For now, turn it into a symbol.
-
Select the Arrow tool.
-
Double-click on the graphic.
-
Choose Insert > Convert to Symbol from the menu. The Symbol
Properties dialog box will open.
-
Type name in the Name field.
-
Select Graphic as the Behavior.
-
Click on OK to store the graphic in the Library.
-
Press the Delete key to remove the graphic from the Stage.
Creating Your Movie
You have created all of your graphics and have stored them as symbols. You are
now ready to create your movie.
Draw the
picture
-
Select the Line tool.
-
Move to the Stage and draw buildings as shown in the illustration.
Add Color
to the picture
Fill the
first picture with color:
-
Select the Paint Bucket tool.
-
Select tan as the fill color.
-
Click in the first picture to fill picture with color.
Fill the
next object with color:
-
Select green as the fill color.
-
Click in the second building to fill the building with color.
Fill the
last building with color:
-
Select pink as the fill color.
-
Click in the last building to fill the building with color.
Layers
Think of a
layer as a transparent sheet on which you paint. You can see through each layer
to the layers under it until you add color. You can add layers, delete layers,
and change the position of layers. Each layer is independent of all other
layers. The layer you are currently working on is called the active layer. You
can view layer information on the Timeline.
Renaming a Layer
Change the name of the current layer:
-
Double-click in the layer name area of the Timeline.
-
Type name to
change the layer name
Adding New Layers
Create a new layer for the picture.
-
Choose Insert > Layer from the menu to create a new layer above the
active layer.
-
Double-click in the layer name area of the Timeline.
-
Type name of that picture to name the layer.
Create
the picture
1.
Make
sure picture is the active layer. When a layer is active, it is highlighted.
You click on the layer name to make a layer active.
2.
Move
to the Library panel. If the Library panel is not open, choose Window >
Library from the menu to open the Library.
3.
Click
on the icon next to Sky and drag a copy of Sky onto the Stage.
Rotate and Scale
You use the
Arrow tool to resize (scale) and rotate an object. You need to resize and rotate
the picture symbol to create the picture.
-
Select the Arrow tool.
-
Select the Rotate modifier.
-
Grab a corner handle and
drag to rotate the symbol so that the gradient is horizontal.
-
Select the Scale
modifier.
-
Set the size of the symbol so it covers the buildings. To set the size, grab
the handles of the symbol and drag.
Stopping
the Action
If you
published your movie now, the car would start moving as soon as the viewer
entered the screen. You want the viewer to click on a button to make the car
move. In this exercise you will add some script to stop any action before the
viewer clicks a button. Later, you will add a button for the viewer to click on
to start the action.
Stop the
Action
To stop the
action:
-
Choose Insert > Layer from the menu to add a new layer.
-
Choose Modify > Layer from the menu and type Stop Action in
the Name field.
-
Click on OK.
-
Select frame 1 on the Stop Action layer.
-
Right-click in Frame 1and choose Actions from the context menu.
-
Click on the plus (+) icon a context menu will appear.
-
Choose Basic Actions > Stop from the menu.
Play the
Movie
Choose Control > Test Movie from the
menu to play the movie. Your picture should not move.
Create a New Layer
-
Click on the top layer to make the top layer the active layer.
-
Choose Insert > Layer from the menu to create a new layer.
-
Choose Modify > Layer from the menu.
-
Type Button in the Name field to name the layer button.
-
Click on OK.
Take the
Start Button from the Library
-
Move to the Library. If the Library panel is not open, choose Window >
Library from the menu.
-
Click on the icon next to Start Button and drag the Start Button onto the
Stage.
Edit the
Symbol
-
Choose Edit > Edit Symbols from the menu to change to the Edit
Symbols mode.
The Over
Frame
-
Click in the Over Frame to select it.
-
Choose Insert > Key frame from the menu.
-
Click on the Fill color box and select green.
The Down
Frame
-
Click in the Down Frame to select it.
-
Choose Insert > Key frame from the menu.
-
Click on the Fill color box and select brown.
The Hit
Frame
-
Click in the Hit Frame to select it.
-
Choose Insert > Key frame from the menu.
-
Choose Edit > Edit Movie from the menu.
-
Right-click on the button.
-
Choose Actions from the menu
-
Click on the Plus icon. A context menu will appear.
-
Choose Basic Actions > Go To from the menu.
-
Make sure Go To and Play is selected.
Test the
Movie
-
Choose Control > Test Movie from the menu. The Test Movie window will
open.
-
Click on the Start Button to make the car roll.
-
Close the window.
The Text Tool
You need to
put a label on the Start Button and add a title to the movie. You will use the
Text tool for this.
Add Text
to the Button
-
Click on the Text tool to select it.
-
Choose Text > Font
from the menu and select a font.
-
Choose Text > Size > 12 from the menu to set the font size to 12.
-
Click on the Fill color box and select gold as the color.
-
Type Start Movie on the button.
-
Click anywhere outside the Stage to close the text box.
-
Use the Arrow tool to adjust the placement of the text.
-
Click anywhere outside the Stage to deselect the text box.
Add a
Title
-
Choose Text > Size > 24 from the menu.
-
Select the Text tool.
-
Click on the lower left corner of the Stage.
-
Type name.
-
Click anywhere outside the Stage.
Test the Movie
-
Choose Control > Test Movie from the menu. The Test Movie window will
open.
-
Click on the Start Movie button. The movie should play.