to Create a Banner in Flash, Part 3
Basic Tasks: Creating a banner, Part 3
WThis is Part 3 of a
three-part article on how to build a simple animated banner in
Macromedia Flash Basic 8 or Macromedia Flash Professional 8, and add it
to a web page using Macromedia Dreamweaver. In this final part, you
learn about file size, banner standards, how to set publish settings,
how to add the banner to a Dreamweaver web page, and how to add
Macromedia Flash Player detection.
You must have Dreamweaver MX 2004 or Dreamweaver 8 installed to complete
most of Part 3 of the tutorial. If you don't use Dreamweaver, you can
complete the first part of this article and use the HTML that Flash
outputs with a different HTML editor. However, you won't be able to
enjoy some of the benefits of using Flash and Dreamweaver together.
See the introduction to Basic Tasks: Creating a banner, Part 1 for a
desecription of Part 1, 2, and 3 of this tutorial.
You do not need any prerequisite knowledge to complete these tutorials,
however you should complete Part 1 and Part 2 of this tutorial before
you start Part 3.
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.
In this section, you
will complete the following tasks:
Open the authoring
Review the completed
Close the completed
In subsequent sections
you'll go through the steps to create the application yourself
starting with a brand new FLA file.
Open the finished
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. In Part 1 or Part 2,
you might have already copied the FlashBanner source files to
another location of your hard disk.
On most computers, you
will find the Flash Banner tutorial folder in the following
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/Part3
folder, you will find an HTML file called gnome.html inside the
finished folder. Double-click the file to open it in your default
browser. You now see the completed SWF and HTML files in the browser
Review the completed
In the completed
project, you will see the structure that makes up the finished
project for Part 3 of this tutorial. The application, a Flash banner
inserted into an HTML page for a gnome website, looks like this at
the end of Part 3:
The completed banner
for Part 3
By the end of Part 3 of
this tutorial, you will add the banner that you created which
contains graphics, animation, and interactivity to a website using
Close the completed
To close the document,
click the close button on your browser window, in the upper right
(Windows) or left (Macintosh) corner of the window.
You might prefer to
keep the finished file open as a reference while working with your
Now you're ready to
start creating your own banner file in the next section,
Considering your audience
When you create a site,
you often need to follow certain guidelines for submitting a Flash
banner. For the purposes of this article, following established
advertising guidelines is not a great concern because you're not
submitting the banner to a company for advertising purposes. This
section briefly explores some of the considerations you might have
when creating a banner in a real-life project, or a project for wide
distribution. When you create a banner that you submit to an
advertising company, often you need to make sure the file meets
their specified file size, dimension, target Flash Player version,
and frame-rate guidelines. Sometimes, you have to consider other
rules about the kinds of media you can use, button code you use in
the FLA file, and so forth.
You have created the
banner and resized its dimensions. When doing so, you actually set
the banner to established and standardized dimensions for what the
Interactive Advertising Bureau calls a "wide skyscraper." The file
size is also reasonable for a Flash ad of this size. You will
discover how to reduce the file size in an upcoming exercise.
However, ensure you
confirm the advertising guidelines for the advertising service,
client, or website that you're advertising with first. Guidelines
might include standards for file size, dimensions, sound and video
usage, and buttons.
The purpose of this
article is understand how to create Flash content, export it from
Flash, and add it to your own website. The lesson to draw from
considering banner guidelines is that you need to consider your
audience. Whenever you create a Flash site, think about the kind of
people who will see the content--much like when you create any
website. Is your audience a wide range of individuals, with many
kinds of computers and Flash Players (or none at all)? Or, is your
audience primarily fellow Flash developers and new media companies?
Your audience affects which Flash Player version you target. For
example, if you think a diverse audience (often a large audience
with a wide range of computer capabilities) will visit your site,
target an earlier version of Flash Player, such as version 6. If you
think other web professionals will visit the site, then the latest
player (with a detection system) is fine. You set your Flash Player
and add a Flash Player detection system using Dreamweaver in
NOTE If you send
your banner to a company to host, they usually have special
requirements for how you add button code to your FLA file. Often,
they want you to add a specific variable (such as clickTAG) instead
of a URL. Refer to the advertising service, client, or website
guidelines for the correct button code to add to your FLA file. Some
companies also limit what frames per second (fps) rate you can use
in the SWF file. When you design a banner, try to keep your fps rate
as low as possible. I recommend using 18 fps or lower; ideally, use
Checking your publish settings
Often you need to save
banners to earlier versions of Flash Player. Many sites you might
advertise with now accept Flash Player 6 files. You might also
create a website that targets a wide audience, and you need to
target an older player. The simple ActionScript you added to your
file can play in Flash Player 6. Therefore, you can change your
player settings to Flash Player 6 for your website.
In earlier parts of
this tutorial, you made changes in the Document Settings dialog
box. You set the dimensions and frame rate (fps) for the SWF file.
In this final section, you will make sure that the Flash Player
setting you want to target is correct, and that you export the
files you need. Many Flash developers make these settings when they
start the FLA file, because they are aware of what they need to
output and target.
Open the banner2.fla
file from Part 2 of this tutorial (Basic Tasks: Creating a banner,
If you don't have
banner2.fla, open banner3.fla from the tutorial source files (see
Open the finished project). Look inside the start folder.
Select File > Save As
and then rename the file banner3.fla.
Select File > Publish
The Publish Setting
dialog box opens, where you can change many different settings for
publishing your files.
Click the Formats tab,
and then make sure that the Flash (.swf) check box is selected.
Deselect the HTML
For this exercise, you
don't need to output an HTML page.
Click the Flash tab,
and select Flash Player 6 from the Version pop-up menu.
When you add Flash
advertisements to an HTML page, use Flash Player 6 or earlier (as
of the time of writing). Many Flash developers still use Flash
Player 5, although sites are starting to use Flash Player 6, which
enables you to add additional functionality in your Flash
1.0 from the ActionScript version pop-up menu.
For this example, you
wrote ActionScript 1.0 style code (in Part 2), and although this
setting does not matter it's a good habit to check which version
you have selected. You can write ActionScript 2.0 and publish to
Flash Player 6 if you want.
In the Options
section, select Compress movie.
You do not need to
make any other selections on the Flash tab.
When you finish, click
OK to accept the changes to your document.
Select File > Publish
when you have finished editing your FLA file.
This publishes the SWF
file to the directory where you saved the SWF file.
Go to the directory to
which you published the banner's SWF file. Check the file size of
the document (it's called banner3.swf).
previously, file size is not a great concern because you're not
submitting the banner to an advertising service. If you need to or
want to reduce the file size of your banner, you can go to the
Publish Settings dialog box again (File > Publish Settings) and
click the Flash tab. You can reduce the quality of the bitmap image
you use in the background by changing the JPEG quality to a lower
Move the slider to 60,
and click Publish.
When you check the SWF
file again, the file size is smaller.
There are other ways
to reduce the file size of a SWF file. If you need to design a file
to a specific maximum file size, make sure you publish your work
regularly and check the current file size. Bitmap images, sounds,
and video quickly increase a SWF file's size.
If you don't have
Dreamweaver installed, then the tutorial series ends with this
section. If you don't have Dreamweaver, you can return to the
Publish Settings dialog box from this exercise, and make sure you
select the HTML option under the Formats tab. When you publish the
document, an HTML file exports with the SWF file. You can open this
file, copy the HTML code, and paste it into your website. Notice
that this file contains some extra tags that you won't need if you
have an existing website, such as head and body tags. The tags you
need are both the object and embed tags, which contains the
information both Internet Explorer and Mozilla-based browsers need
to display the SWF file.
If you have
Dreamweaver installed, continue to the next page. In the following
exercises, you place and edit the banner in a web page.
Inserting Flash on a Dreamweaver site
You might have a web page already
created for a banner. We have created a page for you to use for the purposes of
this exercise, which is ready to have a banner of this size placed on it.
Make sure that you have the
FlashBanner/Part3 directory available (see Open the finished project), and find
the website folder inside this directory. Inside the website folder are the
documents that you need to edit in Dreamweaver. You will modify the gnome.html
web page in the following exercise.
NOTE You can find a finished
version of the website in the finished folder in the FlashBanner/Part3
Open the page called gnome.html in
Dreamweaver MX 2004 or Dreamweaver 8 (this tutorial uses Dreamweaver 8).
You can find this document in the
website folder of this article's source files. Look inside the start folder (FlashBanner/Part3/website/start).
Save a copy of gnome.html in the
same directory as the SWF file you published in the previous exercise
Save a copy of rightnav.css in the
same directory as the SWF file you published in the previous exercise.
Look inside the start folder to
find rightnav.css. This document adds styles (such as text color and margins) to
the gnome.html file.
In Dreamweaver, make sure that
you're in Split view (View > Code and Design).
When in Split view, you can see and
edit the code you're working on, and also select the SWF file easily in Design
Select the large 160 x 600 image
placeholder on the right side of the web page (see the following figure).
This is where you want to add the
Flash banner to the website.
Select the large image placeholder
on the right side of the web page in Dreamweaver. Notice that the dimensions are
the same as your banner file.
Press the Backspace or Delete key
to delete the image. Leave the text selection pointer at that position in the
Select Insert > Media > Flash.
This opens the Select File dialog
box, where you can select the SWF file of the banner you created.
Select the banner3.swf file, which
should be in the same folder your web page is in (see Step 2).
The SWF file is inserted into the
web page. (See the gnome.html document in the finished folder to reference the
code that's added to the document).
(Optional) You can select the SWF
file and click Play in the Property inspector to view the banner's animation.
Select File > Preview in Browser >
iexplore (Windows) or Internet Explorer (Macintosh) (or select your preferred
browser) to preview your site that now contains the SWF banner in a browser
Select File > Save in Dreamweaver
to save your changes before you proceed to Using roundtrip editing.
Using roundtrip editing
By now, you might want
to change something in your Flash banner. Say you want to change the
frame rate, or add some more text. It's easy to return to Flash to
edit the document from Dreamweaver.
In gnome.html, select
the SWF file in Design view (where you see the layout of the page
below the HTML code), and then open the Property inspector (Window >
The Property inspector
displays controls for the SWF file.
Click Edit in the
Property inspector (see the following figure).
Select the SWF file and
click Edit in the Property inspector.
Flash opens the
associated FLA file in the Flash authoring environment, or opens a
window for you to locate the associated FLA file.
Make your edits in
Notice that "Editing
From Dreamweaver" displays in the authoring environment, to indicate
you're editing a file from the Dreamweaver environment.
Click Done next to
Editing From Dreamweaver (see the following figure).
You can edit the FLA
file directly from Dreamweaver. Click Done when you're finished.
Flash updates the FLA
file, publishes the SWF file, closes Flash, and then returns you to
the Dreamweaver document. Your document is updated in Dreamweaver.
NOTE To view the
changes to your SWF file in Dreamweaver, either view your site in a
browser or select the SWF file in Design view and click Play in the
Checking for Flash Player
Most people who visit
your website will have the Flash Player 6 or greater plug-in
installed. In rare circumstances, a visitor might not have the
plug-in installed. There are several different things you can do
when a visitor without Flash Player visits your site. When you have
a site that uses Flash primarily for functionality, you might want
to send that user to a custom page that links to the Macromedia
site, where the user can download the player.
The Check Plugin
behavior in Dreamweaver enables you to check whether visitors to
your website have the Flash Player plug-in installed. After the
behavior checks for a plug-in, you can route the visitor to
different URLs, depending on whether they have the minimum required
plug-in. For example, if the visitor doesn't have Flash Player, you
can open a page that links the visitor to the Macromedia website to
download the latest version.
In gnome.html, click
inside the body tag (click between the "y" the closing angle
bracket) and open the Behaviors panel in Dreamweaver (Window >
Click Add (+) and
select Check Plugin from the behaviors pop-up menu.
Select Flash from the
Plugin pop-up menu.
Leave the If Found, Go
To URL text box blank.
This text box controls
which page the visitor with the specified plug-in sees. Leaving the
text box blank ensures that users stays on the same page if they
have Flash Player installed.
Type a URL into the
Otherwise, Go To URL text box.
Specify an alternative
URL for visitors who don't have the Flash Player plug-in. Type
noflash.html into the text box.
NOTE There is a
noflash.html document for you with the source files, included in the
sample files that accompany this tutorial; it's inside the finished
folder. Either save this document in the same folder as the
gnome.html document you're working on, or create your own file in
this location. Ideally, you would create a custom web page for users
without Flash Player.
Select the Always go to
first URL if detection is not possible option.
When selected, this
option effectively means "assume that the visitor has the plug-in,
unless the browser explicitly indicates that the plug-in is not
present." Because you add an alternate ad for visitors without the
plug-in, this option is preferable for this exercise. The following
figure shows the selections you have made up to this point to add
Flash Player detection.
Make these selections
to add Flash Player detection in Dreamweaver using a behavior.
Click OK. When you
finish, Dreamweaver adds the following code to the <body> tag:
Save your changes to
the document before you proceed to Test the application.
NOTE You can
find the finished files in the FlashBanner/Part3 file directory,
inside the finished folder.
You can also add Flash
Player detection in Flash authoring if you aren't using Dreamweaver.
Go to the Publish Settings dialog box (File > Publish Settings) and
make sure that you select HTML in the Formats tab. Then select the
HTML tab, and select the Detect Flash Version option. Click Settings
next to the check box. You can set the target, content, and
alternate pages in this dialog box.
NNow you have a Flash
banner, with graphics and animation, which also reacts to button
clicks. You have completed your first interactive and animated Flash
document, and then you inserted it into a website using Dreamweaver.
Let's take a look at the banner in action, within a browser window.
Click the gnome.html
document that you modified in the previous exercises to open the web
page that contains your banner.
A new browser window
opens and display the gnome website.
Click the banner to
open the browser window from the web page.
NOTE If you want
to compare your results to the tutorial source file, open the
banner3_complete.fla and gnome.html files from the finished folder
inside the FlashBanner/Part3 folder that you saved on your hard disk
in Open the authoring document.
Now you have completed
your first Flash site and inserted it into a Dreamweaver web page.
You have learned how to create a new file, import content, create
new assets in Flash, add simple animation and ActionScript, and
publish your work for the web. You also learned how to use
Dreamweaver to insert the SWF file into an existing web page,
probably one that's similar to a simple page you've created in the
In Part 3 of this
tutorial, you learned how to use Flash and Dreamweaver to accomplish
the following tasks:
Modify publish settings
for a SWF file.
Publish a SWF file.
Insert a SWF file on a
web page using Dreamweaver.
Use roundtrip editing
to open, modify, and republish a FLA file from Dreamweaver.
Add a Dreamweaver
behavior to check for Flash Player.
This introductory step
of learning Flash and adding a SWF file to a web page is an
important one when you're learning to use Flash. You now have the
fundamentals and understand the essential nature and workflow of
creating content with Flash. Hopefully, you'll feel better equipped
to learn how to create increasingly interactive, entertaining,
functional, or instructional content using Flash.