Using Flash for the first time – Part 3: Publishing and adding a Flash file to a web page
Table of Contents
Adding Flash to a Dreamweaver site
You might have a web page already created for a banner. We have created a page for you, which is ready to have a banner of this size placed on it. Make sure that you download the gnome_part3.zip file at the beginning of this article. Open the ZIP file and find the website folder inside the start folder. Inside that folder are the documents you need to edit. You will modify the gnome.html page in the following exercise.
Note: You can find a finished version of the website in the website folder nested within the finish folder.
- 1. Open the page called gnome.html in Dreamweaver CS3. You can find this document in the start > website folder of this article's source files.
- Save a copy of this file in the same folder as the SWF file you published in the previous exercise (banner3.swf).
- Save a copy of rightnav.css and peek.jpg in the same folder as the SWF file you published in the previous exercise. Look inside the start > website folder. This document adds styles (such as text color and margins) to the gnome.html file.
- Make sure 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 view.
- In gnome.html, select the large 160 x 600 image placeholder on the right side of the web page (see Figure 1). This is where you want to add the Flash banner to the web page.
(+) view larger
Figure 1: Select the large image placeholder on the right side of the web page in Dreamweaver. - Press the Backspace or Delete key to delete the image. Leave the text input cursor at that position in the HTML document.
- 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 SWF file, which should be in the same folder as your web page (see Step 2).
- Click OK.
- In the Object Tag Accessibility Attributes dialog, enter a title into the Title text box. You might enter Banner for the gnome workforce union website, or whatever appropriately describes your banner. Click OK to insert the SWF file into the web page. (See the gnome.html document in the finish > website folder to reference the code that's added to the document.)
Note: Optionally, you can also enter an access key for Flash content that you insert. Enter a one-letter keyboard key in the Access Key text box. For example, if you enter U, users can use Control+U to access the SWF file in the browser. You can also add a tab order for the SWF file. If you have a bunch of links or form objects on the page, you can have the SWF file(s) enter the tab order of these objects (when the user presses the Tab key to cycle through the page elements).
- (Optional) Select the SWF file and click Play in the Property inspector to view the banner's animation. Click Stop when you’re finished viewing the SWF file.
- Choose File > Save to save your changes to the document.
- You should now see the Copy Dependent Files dialog, which copies a JS file so the SWF file plays appropriately in Internet Explorer. Click OK to copy this file to your folder that contains the SWF and HTML files.
- Select File > Preview in Browser > iexplore (Windows) or Safari (Macintosh), or select your preferred browser, to preview your site (which now contains the SWF banner) in a browser window.
Note: If you don’t see your banner, make sure that you have Flash Player 9 installed.
About 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 within Dreamweaver.
- In gnome.html, select the SWF file in Design view in Dreamweaver and then open the Property inspector (Window > Properties). The Property inspector displays controls for the SWF file.
- Click the Edit button in the Property inspector (see Figure 2).
Figure 2. Select the SWF file and click the Edit button in the Property inspector.
Flash opens the associated FLA document in the Flash authoring environment, or opens a window for you to locate the associated FLA document, and then open it in Flash.
- Make your edits in Flash. Notice that “Editing From Dreamweaver” appears in the authoring environment to indicate you're editing a file from the Dreamweaver environment.
- Click the Done button next to Editing From Dreamweaver (see Figure 3).
Figure 3. You can edit the FLA document 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.
- To view the changes to your SWF file in Dreamweaver, either view your site in a browser (File > Preview in Browser > (browser)) or select the SWF file in Design view and click Play in the Property inspector.
