Dreamweaver Article

Creating your first website – Part 3: Adding content to pages

Insert and play a Flash file

Next you'll insert a Flash file that plays a photographic slide show of Café Townsend's featured food items. The Flash file you'll insert is a flexible messaging area file, also called an FMA. This is a common type of Flash application that displays an informational message to the audience. The message can change based on the needs of the business. For example, if Café Townsend is holding a special event, the FMA could easily change (without affecting the rest of the web page) to display information about the event, instead of the regularly featured food items.

To insert the Flash FMA file, you need to insert HTML code that embeds the file in the Dreamweaver page. The easiest way to do this is to insert the SWF file (the exported Flash content) into the page. When you insert a SWF file in Dreamweaver, it writes all the necessary Flash HTML code for you.

1. With the index.html page open in the Document window in Dreamweaver, click once inside the second row of the first table.

   This is the table row immediately below the banner graphic you inserted in the previous section.

2. In the Property inspector (Window > Properties), select Center from the Horz pop-up menu and select Middle from the Vert pop-up menu (see Figure 12).

   This places the contents of the table cell in the middle of the cell.

   

   Figure 12. Place the contents of the table cell in the middle of the cell.

   Note: If you cannot see the Vert or Horz pop-up menus, click the expander arrow in the lower right corner of the Property inspector.

3. Select Insert > Media > Flash.

4. In the Select File dialog box, browse to the flash_fma.swf file (it's in the cafe_townsend root folder of your site), select the file, and click OK (see Figure 13). If the Object Tag Accessibility Attributes dialog box appears, click OK.

   

   Figure 13. Insert the Flash media file.

   A Flash content placeholder, rather than a scene from the FMA itself, appears in the Document window. This is because the HTML code is pointing to the SWF file, flash_fma.swf. When a user loads the index.html page, the browser plays the SWF file.

   A note about Flash files: When you build assets in Adobe Flash, you work in FLA files, the default file type for the Flash application. FLA files are designated by a .fla extension. For example, if you are working on an animated logo for a website, the file name of the Flash file might be animated_logo.fla.

   When you've finished working on a FLA file in Flash, you must export the file to a format that can be played on the web in Flash Player. When you export FLA files in Flash, they are converted to SWF files and designated by a .swf extension. SWF files (not FLA files) play Flash content in a web browser and are the file type you must insert into a web page that you are building with Dreamweaver.

   The Flash content placeholder should remain selected after you insert the SWF file, as long as you don't click anywhere else on the page.

   If it's not selected, select the Flash content placeholder by clicking it.

5. In the Property inspector (Window > Properties), click Play (see Figure 14).

   

   Figure 14. Click Play in the Property inspector.

   Note: If you cannot see the Flash Play button, click the expander arrow in the lower right corner of the Property inspector.

   Dreamweaver plays the Flash file in the Document window, showing you what site visitors will see when they view the page in a browser (see Figure 15).

   

   Figure 15. Dreamweaver playing the Flash file in the Document window

6. In the Property inspector, click Stop to stop playing the Flash file.
7. Save the page.

When you save the page, Dreamweaver displays the Copy Dependent Files dialog box. This dialog box informs you that Dreamweaver has created a file called AC_RunActiveContent.js, and that the file must be uploaded to a server when you publish your web page. This file is necessary for Flash files to run correctly under certain browser conditions. Click OK to close the dialog box. If you click the Files tab in the Files panel, you’ll also notice that Dreamweaver has added a Scripts folder to your site root folder. This Scripts folder holds the AC_RunActiveContent.js file.

Eventually, when you publish your pages to a web server, it's very important that you upload this file in addition to any other dependent files in your site. Otherwise, your pages won't display properly when site visitors view them in certain browsers.

Page 4 of 8

Previous Page

Next Page