- Generating the Four-Step Flash Button
- Saving the Button as a SWF
- Embedding the Button in Dreamweaver
- From Here
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Embedding the Button in Dreamweaver
Your new four-state button is ready to be placed into a Dreamweaver website. Dreamweaver makes it easy to insert SWFs into a web page.
In nearly every article I write that references Dreamweaver, I emphasize the critical importance of working with a defined Dreamweaver website. A review of why this is so essential is a bit too tangential to this article to explore, but if you're following along in these steps and not working in a Dreamweaver website, close all your files and choose Site > New Site from the main Dreamweaver menu. Define a new local site (use the first category—the Site category—in Dreamweaver CS5). It's not necessary to define a server for your site until you're ready to transfer your files to a remote online site.
Now that you're definitely working in a Dreamweaver site, you're ready to create a Dreamweaver web page and embed the new Flash button you generated in Catalyst.
- Choose File > New and create a new, blank HTML web page in Dreamweaver.
- Save the page and assign a filename. (The name button.html will work well.)
- Time to embed the Flash button in your Dreamweaver web page. Place your insertion point where you want the button to appear, and choose Insert > Media > SWF in Dreamweaver. The Select SWF dialog opens.
- Navigate to the button file you just created. That's a bit easier said than done. Flash Catalyst created a folder and subfolders with your four-state button. Navigate to the deploy-to-web folder and find the button file. The file name will be Main.swf.
- Click Choose, or double-click the Main.swf file. Dreamweaver will prompt you to save the file to your website's root folder. Click Yes to do so. A Copy File As dialog appears. You can simply click Save to save a copy of the SWF file in your Dreamweaver site folder.
- By default, recent versions of Dreamweaver prompt for accessibility attributes when you insert a Flash object. In the Object Tag Accessibility Attributes dialog, enter descriptive text in the Title box that will display for viewers who cannot see the Flash object. Setting an Access key will provide keyboard access for disabled visitors, as will entering a value in the Tab box. Click OK in the Object Tag Accessibility Attributes dialog to embed the button on your web page.
- Save your page. As you do, notice that Dreamweaver generated an additional JavaScript file to enable the Flash button to work.
You can test the button in Dreamweaver CS4 or CS5 by clicking the Live View button. With Live View enabled, hover over and click the button to test it (see Figure 10).
){kind=small}
Figure 10 Testing a button in Dreamweaver.