3 Creating Flash Banner Tutorial

HI GUYSSS.............BRINGING OUT COOL FLASH BANNER TUTORIAL FOR U ALL.........

Macromedia Flash Basic 8 or Macromedia Flash Professional 8 can seem
like a very complex programs to learn. One reason for this seeming
complexity is that you can use it for so many different things, such as
cartoon animations, media players, and sophisticated software.

This tutorial is suitable for you if you're opening Flash 8 for the first time. This
tutorial shows you some of the fundamental aspects of the program, and
how to get started using them to build a real project. You don't need to
know anything about Flash or animation to complete this tutorial; in fact,
you'll discover how easy it is to start using Flash 8 to add elements to your
web pages.

“First Step: Creating a banner, Part 1” You learn how to
create and structure the banner application.

“Second  Step: Creating a banner, Part2" You learn how to add
animation, create a button, and write basic scripts.


"Third Step: Creating a banner, Part3“ : You learn how to
publish your SWF file, and insert the file into a Dreamweaver website.

Examine the completed FLA file

As you examine the finished version of an application that you’ll create,
you’ll also look at the Flash workspace

First We Open the finished FLA file

It’s helpful to analyze the completed authoring document, which is a FLA
file, to see how the author designed the application. You should examine
what kinds of scripts were used to add interactivity, and understand what
you are going to create.

The files for this tutorial are located in the Samples and Tutorials folder in
the Flash installation folder. For many users, particularly in educational
settings, this folder is read-only. Before proceeding with the tutorial, you
should copy the entire FlashBanner tutorial folder to the writable location
of your choice.

On most computers, you will find the Flash Banner tutorial folder in the
following locations:

■ In Windows: boot drive\Program Files\Macromedia\Flash 8\Samples
and Tutorials\Tutorial Assets\Basic Tasks\FlashBanner\.
■ On the Macintosh: Macintosh HD/Applications/Macromedia Flash 8/
Samples and Tutorials/Tutorial Assets/Basic Tasks/FlashBanner/.

Copy the FlashBanner folder to another location on your hard disk to
which you have access. Inside this folder are three directories for each part
of this tutorial: Part1, Part2, and Part3. In the FlashBanner/Part1 folder,
you will find a Flash file called banner1_complete.fla. Double-click the file
to open it in Flash. You now see the completed tutorial file in the Flash
authoring environment.

Second Step Review the completed FLA file
In the completed FLA file, you will see the structure that makes up the
finished SWF file for Part 1 of this tutorial. The application, a Flash
banner for a gnome website, looks like this at the end of Part 1:
The completed

The completed banner at the end of Part 1.
By the end of Part 3 of this tutorial, you will add the graphics, animation,
and interactivity to the banner. Then, you’ll insert the banner on a website
using Dreamweaver.

Third Step Close the completed FLA file

To close the document, select File > Close.
If you prefer to keep the finished file open as a reference while working
with your banner file, be careful not to edit it or save any changes to it.
Now you’re ready to start creating your own banner file in the next section,
“Creating a new document”.

Creating a new document

You can create all kinds of different elements for the web or for CD-ROMs
and devices using Flash 8. 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 it 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 start building a
banner.

1. Open the Flash application.

By default, Flash displays the Start Page (see the following figure),
which enables you to select a recently edited document, create a new
Flash document or ActionScript file, or create a new document using a
pre-built template. If you use Flash Professional 8, you can create
additional kinds of files.

By default, Flash displays the Start Page when it’s started.

2. Click Flash Document from the Create New column on the Start Page
to create a blank document.

NOTE

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.

4. Name the file banner.fla, find or create a new directory to save your
project in, and click Save when you're done.

Flash saves editable documents as FLA files. From the FLA file, 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.
After you finish saving the file, proceed to the following exercise,
“Changing document properties”.

Changing document properties

At this point you're looking at a blank canvas surrounded by many controls
(see the next figure). 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. The Flash environment
consists of the Stage and a variety of panels, tools, and the Timeline above
the Stage.

Around the Stage you see a variety of panels. The panel on the left is called
the Tools panel (see the following figure). This panel includes tools you can
use to create and modify documents, such as tools you use to draw and
make selections.

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 the following figure). This panel lets you
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
allows you to modify properties for the document itself.

1. Open the Property inspector (Window > Properties > Properties) and
click the button next to the text that says Size to open the Document
Properties dialog box

NOTE

Make sure that you don’t have a frame selected. Click the Stage if you do
not see the button mentioned in the previous step.

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 Size, 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 file. You need to use these specific dimensions
because you're creating a banner and 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 at www.iab.net/
standards/adunits.asp.

NOTE

You can also create banners from a Macromedia template by selecting
File > New from the main menu. Select the Templates tab and select 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.

4. Select File > Save to save the document before you proceed to the next
section (“Importing graphics”).

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 pre-drawn gnome from the tutorial source file. Before you
proceed, make sure that you save the source files for this tutorial as
described in “Open the finished FLA file”, and save the images to the same
directory as your banner.fla file.

1. Select File > Import > Import to Library to import an image into the
current document.

You'll see the Import dialog box (see the following figure), which
enables you to browse to the file you want to import.

Browse to the folder on your hard disk that contains an image to import
into your Flash document.

2. Navigate to the directory where you saved the tutorial’s source files, and
locate the bitmap image saved in the FlashBanner/Part1 directory.

3. Select the gnome.png image, and click Open (Windows) or Import
(Macintosh).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
on the Stage. When you select an object on the Stage, you can see and
modify the current coordinates in the Property inspector (see the
following figure).

The X and Y coordinates match the registration point, which is the upper
left corner of this movie clip symbol.

7. Type 0 into the X text box, and type 0 into the Y text box.
Typing these values in sets the X and Y coordinates both to 0, as shown
in the following figure.

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. Use the Property inspector when
you need to set a specific position for an object, like you did in this
step

8. Select File > Save to save the document before you proceed to the next
section (“Introducing layers and the timeline”).

Introducing layers and the timeline

The Timeline is above the Stage in the Flash workspace. The Timeline,
which contains layers and frames, helps you organize assets in your
document, and also controls a document's content over time.

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, and each layer can contain images, text, or animations
that display on the Stage. You'll learn more about frames and the Timeline
in Part 2 of this tutorial, “Basic Tasks: Creating a banner, Part 2”

The FLA file 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.

In this section, you will complete the following tasks:

■ “Creating a new layer”

■ “Importing to a layer”

1. Select Layer 1 in the Timeline and click the dot below the lock icon, as
shown in the following figure.

Lock a layer so its contents aren’t accidentily 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 of
the layer.

3. Type background into the layer name to rename the layer. Then 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.

4. Select File > Save before you proceed to the next exercise

(“Creating a new layer”)

NOTE

 
You can also organize layers into layer folders

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 Insert Layer to
create a new, empty layer.

The new layer is created above the background layer (see the following
figure).

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 that 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.

4. Select File > Save before you proceed to the next exercise (“Importing to
a layer”).

NOTE

If you need to reorganize your layers you can use the Selection tool to
select and then drag a layer above or below other layers on the Timeline.

Importing to a layer

In an earlier exercise, “Importing graphics”, 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 displays 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 disk. Find the folder of this tutorial's source files on your
hard disk.

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 the following figure),
and then it appears on the Stage.

The image imports to the frame on the layer that you select on the Timeline.

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.

Move the star.png file on the Stage to just above the gnome's head in
the image, as shown in the following figure.

Move the star.png image just above the gnome’s head.

6. Select File > Save to save your document before moving on to “Test the
application”

Test the application

To finish, you can test your document using Flash. Doing so tests the SWF
file in Flash Player. For example, you can see how your code works in Flash
Player, 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 file. You
will often use the Test Movie command to view your progress when
you work on an FLA file.

2. Click the close button of the window that contains the SWF file to
return to the authoring environment.

Find the folder on your hard disk where you saved banner.fla at the
beginning of this tutorial in “Creating a new document”.

When you open this folder, you should see an additional SWF file
called banner.swf. This is the compiled version of the banner.fla file.
When you want to create a finished version of your file to upload,
you'll want to make additional publish settings in Flash before you
compile your SWF file. You'll look at these settings in Part 3

NOTE  : If you want to compare your results to the tutorial source file, open the
banner1_complete.fla from the FlashBanner/Part1 folder that you saved on
your hard disk in

Summary

Congratulations for completing your first step of creating a banner in
Flash. You used the Flash authoring tool to create a new document, add
assets, and manipulate the file using a variety of tools.
In a very short period of time, you learned how to use the Flash workspace
to accomplish the following tasks:

■ Set up a FLA file.
■ Imported assets into the FLA file.
■ Arrange assets in a FLA file.
■ Create and modify layers.
■ Test a SWF file.

You're on your way to creating a banner in Flash so you can embed it in an
HTML page using Dreamweaver. In the next two parts of this tutorial, you
will create and modify symbols, create an animation, add some simple
ActionScript for a button that opens a web page, and add the banner to a
website