Creating Flash 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.

Here 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 been saved.

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.

Step 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 the quotes).

Your panel should look like Figure 4 directly below.

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

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

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 http://www.webmastertechniques.com

Step 17: Next to Save As, type in "webmaster.swf" (without the quotes).

Your panel should look like Figure 7 directly below.

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.

--

Joe Tracy is the editor of Webmaster Techniques Magazine and the author of the ebook, "55 Vital Web Marketing Strategies for Marketing Your Website".

Would you like to reprint this article on your site for free? If so, contact joetracy@earthlink.net with your request and the site you want to republish it on and details will be sent to you along with the proper permission statement. This tutorial is ©Copyright by Joe Tracy. All rights reserved.

» Return to Webmaster Techniques Tutorials
» Return to Webmaster Techniques Magazine Front Page