Using Flash for the First Time – Part 1: Building a Banner
(taken from: http://www.macromedia.com/devnet/flash/articles/intro_flash_02.html)
Creating a New Document
You can create all kinds of different elements for the web or for CD-ROMs and devices
using Flash. First, you create a file in the Flash authoring tool, which you use to output
SWF files. SWF files are the files that you can put online when you embed them in a web
page. The Macromedia Flash Player plug-in then displays the SWF file, so your website
visitors can view or interact with the content.
Your SWF file can contain video, MP3 sound, animations, images, data, and so forth.
The benefit of using an SWF file over other formats is that the Flash Player plug-in is
incredibly common. Let's get started building a banner:
1. Open the Flash application.
By default, Flash displays the Start Page (see Figure 1), which enables you to
select a recently edited document, create a new Flash document (or other kinds of
documents if you use Flash Professional 8), or create a new document using a
prebuilt template.
Figure 1. By default, Flash displays the Start Page when it is launched. This
figure shows the options available in Flash Professional 8.
2. Click Flash Document in the Create New column on the Start Page to create a
blank document. If Flash doesn't display the Start Page (the feature might have
been disabled earlier if you share a computer), you can select File > New from the
main menu to create a new document. Make sure the General tab is active, select
Flash document, and click OK.
3. Select File > Save As from the main menu. Name the file banner.fla and click
Save when you're done. Flash saves editable documents as FLA files. From the
FLA document, you export (or compile) SWF files that you can embed in an
HTML page. Flash Player, installed on most computers, plays the SWF files that
you export from Flash.
It's a good idea to save a new document when you start working with it (and often
thereafter) so you don't lose any of your hard work. After you finish saving the file,
proceed to the following exercise where you will change the document's properties.
Changing Document Properties
At this point you're looking at a blank canvas surrounded by many controls (see Figure 2).
The large white square is called the Stage, and it's where you place assets you want to
display in the SWF file, such as images, buttons, text, or animations. The Stage and
panels are commonly called the Flash workspace or authoring environment.
Figure 2. The Flash authoring environment includes a Stage where you can place and
manipulate assets.
Around the Stage you see a variety of panels. The panel on the
left is called the Tools panel (see Figure 3). This panel includes
tools you can use to create and modify documents, such as tools
you use to draw and make selections.
Figure 3. Use the Tools panel to draw and make selections.
You use the Selection tool (the black arrow) to make selections
in these tutorials.
A panel near the bottom of the Flash application is titled
Properties (select Window > Properties > Properties if you don't
see the panel). This panel is called the Property inspector (see
Figure 4). This panel enables you to change various properties
of whatever is currently selected in your document (such as an
image or a frame) or set properties for the entire SWF file (such
as the frame rate or dimensions). If you don't have any objects
or frames selected, the Property inspector enables you to
modify properties for the document itself.
1. Open the Property inspector (select Window > Properties > Properties) and click
the button next to the text that says Size to open the Document Properties dialog
box.
Note: Make sure you don't have a frame selected. Click the Stage if you don't see
this button.
Figure 4. Click this button in the Property inspector to open the Document
Properties dialog box. You can then change the size and color of the Stage.
The button displays the current dimensions of the FLA file (550 x 400 pixels). By
default the Stage size in a new Flash document is 550 pixels wide by 400 pixels
high. When you click this button, you open a dialog box where you can change
several document-wide properties (such as the Stage dimensions, color, and
document frame rate).
2. Type 160 into the Width text box and 600 into the Height text box.
When you type new values into these text boxes, you resize the dimensions of
your FLA document. There is a reason that you need to use these specific
dimensions. Because you're creating a banner, you should use a standard banner
size. In this tutorial, you're creating a "wide skyscraper." For a list of standardized
banner sizes, check out the Interactive Advertising Bureau's page on Interactive
Marketing Units.
Note: You can also create banners from a Macromedia template by selecting File
> New from the main menu. Select the Templates tab and choose the Advertising
category.
3. Click OK when you finish entering the new dimensions to return to the authoring
environment.
When you return to the authoring environment, notice how the dimensions of
your document change. You can also change the current document's background
color and frame rate directly in the Property inspector, without going to the
Document Properties dialog box. You'll find information about frame rate in Part
2 of this tutorial.
Remember to save your work (File > Save) before you continue.
Importing Graphics
When you work with Flash, you'll often import assets into a document. Perhaps you have
a company logo or graphics that a designer has provided for your work. You can import a
variety of assets into Flash, including sound, video, bitmap images, and other graphic
formats (such as PNG, JPEG, AI, and PSD).
Imported graphics are stored in the document's library. The library stores both the assets
that you import into the document and symbols that you create within Flash. A symbol is
a vector graphic, button, font, component, or movie clip that you create once and can
reuse multiple times.
So you don't have to draw your own graphics in Flash: You can import an image of a
garden variety gnome from the tutorial source file. Before you proceed, make sure that
you copy the images (from My Network PlacesClass DataWeb
Animationgnome1) to the same directory as your banner.fla document.
1. Select File > Import > Import to Library to import an image into the current
document.
You'll see the Import dialog box (see Figure 5), which enables you to browse to
the file you want to import.
Figure 5. Browse to the folder on your hard drive that contains an image to
import into your Flash document.
2. Navigate to the directory where you extracted the support files, select the
gnome.png image, and click Open (Windows).
3. The image is imported into the document's library.
Note: You can drag assets from the library onto the Stage several times if you
want to see several instances of the artwork. Your file size doesn't increase if you
use several instances on the Stage. The SWF file only stores the information of
the original symbol or asset from the library and treats each instance like a
duplicate.
4. Select Window > Library to open the Library panel.
You'll see the image you just imported, gnome.png, in the document's library.
5. Select the imported image in the library and drag it onto the Stage.
Don't worry about where you put the image on the Stage because you'll set the
coordinates for the image later. When you drag something onto the Stage, you
will see it in the SWF file when the file plays.
6. Click the Selection tool and select the instance on the Stage.
If you look at the Property inspector you'll notice that you can modify the image's
width and height, as well as the image's X and Y position (also called
coordinates) on the Stage. When you select an object on the Stage, you can see
and modify the current coordinates in the Property inspector (see Figure 6).
Figure 6. The X and Y coordinates match the
registration point, which is the upper left corner of
this random movie clip symbol.
7. Type 0 into the X text box and type 0 into the
Y text box. Doing this sets the X and Y
coordinates both to 0, as shown in Figure 7.
Figure 7. Set the X and Y coordinates using the Property inspector. Set the X and
Y values to 0.
Setting new coordinates moves the upper left corner of the image to the upper left
corner of the Stage. You can drag the bitmap image around the Stage using the
Selection tool instead of changing coordinates in the Property inspector. You
should use the Property inspector when you need to set a specific position for an
object, as you did in this step.
Remember to save the document before you proceed to the next exercise.
Note: You can also import sound files into your FLA documents. This isn't covered in
this tutorial, but you can find out more information if you do a search on "importing
sounds" in the Help panel (F1).
Introducing Layers and the Timeline
The Timeline panel is above the Stage. The Timeline helps you organize assets in your
document, and also controls a document's content over time. To help control content, the
Timeline contains layers and frames. Flash documents can play over a length of time, like
movies or sound, which is measured using frames. Layers are like transparencies that
stack on top of one another; each layer can contain images, text, or animations that
appear on the Stage. You'll learn more about frames and the Timeline in Part 2 of this
tutorial.
The FLA document you're working on has one layer (Layer 1) with contents on a single
frame (Frame 1). This is the default way that a Flash document opens.
In this exercise, you lock and rename Layer 1. Often you'll want to place objects in a
particular position on the Stage. To help you keep those objects in place, Flash enables
you to lock layers so you cannot select the items on a layer and accidentally move them.
1. Select Layer 1 in the Timeline and click the dot below the lock icon, as shown in
Figure 8.
Figure 8. Lock a layer so its contents aren't accidentally moved or deleted from
the Stage. You can also prevent inadvertently adding other assets to that layer.
With your only layer locked, you need to add new layers before you can add any
other objects to the Stage. You cannot add new objects to a locked layer.
2. Select the Selection tool in the Tools panel and double-click the name Layer 1.
When you double-click a layer name, you can modify the name.
3. Type background into the layer name to rename the layer, and save your file.
When you start building projects with many layers, layer names like Layer 1 and
Layer 14 don't help you determine what's on that layer. Giving layers a
descriptive name is a good practice to adopt.
Tip: You can also organize layers into layer folders. For more information, do a search
on "layer folders" in the Help panel (F1).
Creating a New Layer
In just about any Flash project where you use imported graphics and animation, you'll
need to create at least a few layers. You need to separate certain elements onto their own
layers, particularly when you start to animate objects. You can also stack graphics on top
of each other, and even create a sense of depth or overlapping by using multiple layers.
1. Select the background layer on the Timeline and click the Insert Layer button to
create a new, empty layer.
The new layer is created above the background layer (see Figure 9).
Figure 9. Click Insert Layer to insert a new layer above the currently selected
layer.
2. Double-click the name of the new layer so the layer's name becomes editable.
3. Type animation to rename the new layer.
Graphics on the Stage stack according to the layers on the Timeline. For example,
anything you put on the animation layer will appear above the image on the
background layer. You will add animation to this second layer in Part 2 of this
tutorial.
Be sure to save your progress before moving on.
Tip: If you need to reorganize your layers, you can use the Selection tool to select and
drag a layer above or below other layers on the Timeline.
Importing onto a Layer
In an earlier exercise, you imported the gnome.png image directly into the document's
library. Then you dragged the image onto a selected layer on the Stage. You can also
import assets directly to the Stage instead of into the library. First you need to select the
frame into which you want to import the image on the Timeline. Then you can import the
image onto that frame, which appears on the Stage. You use this technique to import an
image in the following exercise:
1. Select Frame 1 of the animation layer.
You need to import star.png image to the animation layer.
2. Select File > Import > Import to Stage.
The Open dialog box appears where you can select an image from your hard drive.
Find the folder of this tutorial's source files on your hard drive.
3. Select star.png in the tutorial's source files and click Open (Windows) or Import
(Macintosh). The image imports to the animation layer (see Figure 10), and then
appears on the Stage.
Figure 10. The image imports to the frame on the layer that you select on the
Timeline. You will learn more about the Timeline and layers in Part 2 of this
tutorial.
4. Open the Library panel (Window > Library).
The image you just imported to the Stage also
appears as an asset in the library. Even if you
import an asset directly to the Stage, Flash
always stores the assets you import in the
library as well.
5. Click the Selection tool in the Tools panel.
6. Move the star.png file on the Stage to just
above the gnome's head in the image, as
shown in Figure 11.
Figure 11. Move the star.png image just
above the gnome's head.
7. Select File > Save to save your document
before moving on.
Test Your Progress
To finish, you can test your document in Flash. This
tests the SWF file in Flash Player. For example, you
can see how your code works in Flash Player, see
how animations play on the Timeline, test user
interactivity, and more. It's much faster than
uploading your work to a server each time you want to see the SWF file in action:
1. Select Control > Test Movie from the main menu.
The test environment opens and plays your document in Flash Player. You can
now see the compiled SWF file version of your FLA document. You will often
use the Test Movie command to view your progress when you work on a FLA file.
2. Click the banner.fla document tab (Windows) or the SWF file's close button
(Macintosh) to return to the authoring environment.
3. Find the folder on your hard drive where you saved banner.fla at the beginning of
this tutorial.
When you open this folder, you should see an additional SWF file called banner.swf.
This is the compiled version of the banner.fla document.
Adding Text
You need to add some text to your banner for decorative purposes. You can add several
types of text to a Flash document: static text, dynamic text, or input text. Static text is
useful when you need to add decorative text to the Stage, or any text that doesn't need to
change or load from an external source. Use dynamic text when you want to load text
from a file or database, or change the text when the SWF file plays in Flash Player. Use
input text when you want the user to type into a text field. You can take that text and send
it to a database, have it manipulate something in the SWF file, and more.
You can add any of these types of text using the Text tool. For this exercise, you will add
some static text to the Stage. To add static text, follow these steps:
1.
2.
3.
4.
Select Insert > Timeline > Layer to insert a new layer.
Double-click the layer's name and type text to rename the layer.
Select the Text tool in the Tools panel, which looks like a large letter A.
Click near the top of the Stage and type Overworked? into the field that's on the
Stage.
5. Select the text field.
A bounding box appears around the text when you select it.
6. Open the Property inspector (Window > Properties > Properties) and make sure
Static Text appears in the Text type pop-up menu.
7. Change the font of the text to whatever font you prefer.
You change the font using the Font pop-up menu (next to the A icon, seen in
Figure 1).
8. Change the size of the font to 24 points using the Font size pop-up menu. You
will need to change the font size so the text fits on the Stage.
Figure 1. Change text settings in the Property inspector.
When you finish, the text should look similar in size and position to the text in
Figure 2.
Figure 2. Add some static text to the banner.
9. Select the Text tool again and type
Underpaid? below the text you added in Step
4.
10. Select the text field and open the Property
inspector. Change the text to the same font you
selected in Step 7. Then select a font size so
the text is large but still fits on the Stage.
11. Repeat Steps 6 and 7 to add the phrase Gnome? below the previous two lines of
text.
12. (Optional) Open the Align panel (Window > Align) to align the text to the center
of the Stage. Select a text block on the Stage, click the To stage button in the
Align panel, and then click the Align Horizontal center button. (Move the mouse
over a button in the panel to see what its name is.)
13. Select File > Save to save your work.