Buttons and Flash Text With Dreamweaver 4.0
By Joe Trac
One of the new features of Dreamweaver 4.0
is the ability to create Flash buttons and text even if
you don't own Flash. Some Webmasters may be apprehensive
about using this feature for fear of alienating Web visitors.
Addressing this issue, Macromedia claims that research
by NPD shows that 96.4% of Internet users can view Flash
content. That's a higher percentage than the number of
people using Internet Explorer as their default browser.
Because Macromedia owns both Flash and Dreamweaver,
the ability for Webmasters to quickly and easily create
Flash buttons and text is a welcomed addition.
are step-by-step instructions for creating Flash buttons
and text effects in Dreamweaver 4.0.
Step 1: Open Dreamweaver 4. If you
upgraded from Dreamweaver 3 and used shortcut icons on
your desktop or taskbar, be sure to replace those icons
with Dreamweaver 4 shortcuts. Otherwise, you'll still be
opening Dreamweaver 3 as I discovered.
Step 2: Save the untitled page that
opens when you start Dreamweaver 4. You will not be allowed
to use Flash buttons or Flash text until the page has first
Step 3: Make sure your Objects Panel
is displayed (Figure 1 to the right). If the Object Panel
isn't displayed, then from the top menu select Windows
followed by Objects.
4: In Figure 2 (to the left), I've highlighted the
two buttons related to this tutorial. The first button
(with the mini button that looks like a folder) is the "Insert
Flash Button" icon. The second one (with the "A" that
represents text) is the "Insert Flash Text" icon.
Click on the "Insert Flash Button" icon. This
will open the "Insert Flash Button" Panel (Figure
3 directly below).
The Sample window shows you what your button
will look like. The Style window allows you to select what
type of Flash button you want to use (look for many more
of these to pop up around the net). The Button Text box
is where you type what you want on the button. The Font
and Size options allow you to set your desired font and
font size. The Link and Target options are for linking
the button to where you want people to go when they click
on it. The BG Color option allows you to select the color
that will be displayed behind the button. Likely this won't
be seen and is best left set to the default of none. Finally,
the Save As option allows you to name your button. You
can use the default name or select your own. Remember when
choosing your own name to include the ".swf" extension
at the end (i.e. HomeButton.swf).
Step 5: From the Style window, scroll
down until you see Starspinner. Select it.
Step 6: Next to Button Text type in "About
Us" (without the quotes).
Step 7: From the Font menu, select
Arial. For Size, leave the default of 12 selected.
Step 8: Next to Link, type in http://www.webmastertechniques.com
Step 9: Next to Save As, type in "home.swf" (without
Your panel should look like Figure 4 directly
Step 10: Click OK. Now hit the F12
key on your keyboard. It will display the results in your
browser. Move your mouse over the button and you'll notice
the star begins to spin. That's one of the great things
about Flash buttons! If you click on the button you'll
notice it takes you to the front page of Webmaster Techniques
Now that you know how to make Flash buttons,
let's move on to Flash text.
Step 11: Select the button you just
made and hit the Delete key on your keyboard to remove
Step 12: Click the "Insert Flash
Text" icon. The "Insert Flash Text" Panel
will open (Figure 5 directly below).
As in the "Insert Flash Button" Panel,
you have many areas for customization. But in this case
you have a few more like the ability to use Bold, Italics,
and to justify text. You also have the ability to select
a Rollover Color. When a person moves his/her mouse over
the text you create, it will change to the color you've
set in Rollover Color.
Step 13: Set the Font to Arial and
the Size to 30.
Step 14: Leave the Text Color defaulted
to Black and change the Rollover Color to a Royal Blue.
To change the color, click in the small square immediately
to the right of the words Rollover Color. This will bring
up a color palette (Figure 6 directly below) where you
can select the desired color.
Step 15: In the Text box type in "Webmaster
Techniques Magazine" (without the quotes).
Step 16: In the Link box, type in
Step 17: Next to Save As, type in "webmaster.swf" (without
Your panel should look like Figure 7 directly
Step 18: Click OK. Now hit the F12
key on your keyboard. The results will be displayed in
your browser. Move your mouse over the text and you'll
notice that it changes to the color blue. If you click
on the text, you'll be transported to the front page of
Webmaster Techniques Magazine.
Here's an example of what the finished results
will look like (move your mouse over it to see it change
colors. If you click on it, you will be transported to
the Webmaster Techniques Magazine front page:
Congratulations on completing this tutorial
and on creating your first Flash button and Flash text.
Now do some experimenting of your own, but don't get too
carried away with putting Flash text and buttons all over
each of your pages. Keep your site clean and professional
looking with a strong design making sure that the Flash
items you create for your site belong in your site. Best
of success to you.