Integrating .SWF Files into Dreamweaver Flash

Although Flash 5’s Publish feature takes a lot of the guesswork out of placing Flash movies into HTML pages, you might want to add HTML graphics and text to the page, too. Macromedia Dreamweaver has been a huge hit with Web designers its roundtrip HTML feature keeps your HTML code just the way you like it. Roundtrip HTML refers to Dreamweaver’s capability to transfer HTML code back and forth between applications, keeping your preferred formatting intact Dreamweaver will not write over your own code. New features of Dreamweaver 4 include:

  • A fully integrated text editor complete with syntax coloring capabilities
  • The Layout view, which allows you to draw HTML tables and cells directly on the page with the Table tool and the Cell tool
  • Custom Flash Buttons and Flash Text creation tools
  • Roundtrip image editing with Fireworks In this section, we look at the fundamentals of using Flash movies with Dreamweaver and HTML.

Working with your Flash movie
After you have created an interactive animation and have exported the file into the .SWF format, it’s time to put the file into your HTML document.

Let’s get started. First, create a new document in Dreamweaver, using File➪New (Command+N or Ctrl+N). Next, insert the Flash file by selecting Insert➪Media➪ Flash, or by using the Objects Panel, and clicking the Flash icon, as shown in the following figure. If you prefer to use keyboard shortcuts, try Option+Command+F (or Ctrl+Alt+F on the PC). The Select File dialog appears. Now, browse your folders until you find a .SWF file to import.

Select a Flash .SWF file and click Select. You should see a gray rectangle with a small Flash symbol in your Dreamweaver document, indicating that this is a Flash movie .

Click the Flash object icon on the Objects Panel to insert a Flash movie.

Click the Flash object icon on the Objects Panel to insert a Flash movie.

You should also notice that your Flash file now appears in the Dreamweaver Properties Inspector, as shown below, which displays the properties most commonly used in Dreamweaver . If the Properties Inspector is not visible, access it with Window➪ Properties (Command+F3 or Ctrl+F3). If all of the properties are not displayed, click the expand arrow in the lower-right corner or double-click the inactive areas of the inspector. The inspector hosts many options and controls:

The Properties Inspector in Dreamweaver 4

The Properties Inspector in Dreamweaver 4

Flash properties in the property inspector

Flash properties in the property inspector

Positioning your movie
The easiest way to center your Flash movie within the browser window is to surround the <EMBED> and/or <OBJECT> tags with the <CENTER> </CENTER> tags. This method will not cause the movie to stretch or expand, thereby revealing the workspace of the Flash movie. There is, of course, another way to center the Flash movie in the browser all you need to do is set the width and height dimensions to 100 percent.

Although most Web sites are viewed in full-screen capacity, some users scale their browser to their own desired size, which may adversely impact the aspect ratio (the height and width ratio) of your movie. The scale option enables you to select three options to achieve the desired perspective. These options are:

  • showall: Makes the entire movie visible in the specified area. The aspect ratio of the movie is maintained, and no distortion occurs. Borders may appear on two sides of the movie.
  • noborder: Forces the movie to fill the specified area. The aspect ratio of the movie is maintained, and no distortion occurs but portions of the movie may be cropped.
  • exactfit: Forces the entire movie to fill the specified area. The aspect ratio of the movie is not maintained, and distortion may occur. For this example, we used the exactfit option to enable users to resize their windows and still see the entire movie.

Inserting a Flash Button
New to Dreamweaver 4 is the capability to create Flash Button objects based on predetermined button styles. These styles look much like the Button Library that ships with Flash 5. Dreamweaver actually lets you edit the text labels and links of these buttons. Dreamweaver will also create a .SWF file that is placed in the same directory as the current HTML document.

Select the Flash Button icon within the Objects Panel, or select Insert➪Interactive Media➪ Flash Button. Alternatively, you can drag the Flash Button icon from the Objects Panel and into the document window. Using either method will enable you to access the Insert Flash Button dialog, shown below.

Scroll through the library of available button styles

Scroll through the library of available button styles

Now select a Button style from the list provided. Dreamweaver provides you with a preview of the Button style. You can also click and rollover the Button style to preview how the Button will behave. However, you will not be able to preview any changes to the text or Bg color in this window.

Next, in the Button text field, type the text that you would like to see. This field doesn’t work for every button style. If the button preview has the words Button Text on the button, then you will be able to type in your own text. Also, the amount of text is limited to the width of the Button.

For the Font field (optional), select a font for the text and the font size from their respective drop-down menus. For the Link field (optional), type a file name (or URL) or click the Browse button to locate the file to link to. The link can be either a document-relative or absolute link for the button. If you try to type in a site-relative link, Dreamweaver will prompt you with a error message. This error occurs due to the manner in which that Flash files have to be saved in relation to the HTML document files.

The Target field (optional) enables you to choose a target frame or target window from the drop-down menu. The Bg field (optional) enables you to choose a background color for your Flash button within a rectangular area. You can either type in a hexadecimal color value (for example, #0066FF) or use the color well to select a background color. For the Save As field, type in a name to save your new .SWF file as, or accept the default button name. You could also choose a different location for the SWF to be saved by clicking the Browse button and then finding the folder to place your Flash button .

If you can’t find a Button style that suits you, click Get More Styles to connect to the Macromedia Exchange site to download even more button styles. Finally, click Apply or OK to insert the Flash button into the document window. If you clicked Apply, you will not leave the Button dialog; instead, you will be able to preview your new Button on the page.

Editing a Flash Button
There are two ways to open the Edit dialog for Flash Buttons: (a) you can doubleclick the Flash button, or (b) you can select the Flash button and click the Edit button in the Property Inspector. More options are available within the Properties inspector. Bg color and File source are the only two options that are repeated from the Edit dialog.

Inserting a Flash Text Object
The Flash Text Object enables you to insert a body of Flash Text with a simple rollover effect. Inserting the Flash Text Object is very similar to inserting the Flash Button. Simply select the Flash Text icon in the Objects Panel, or choose Insert➪Interactive Media➪ Flash Text. This brings up the Insert Flash Text dialog, shown below.

Then follow these steps to format and insert your text:

  1. Select a font face from the Font drop-down menu.
  2. Enter a font size (in points) in the Size field.
  3. Select style attributes by clicking the Bold, Italic, and Text Alignment buttons.
  4. Choose a text color by entering a hexadecimal color (for example, #0066FF) or by choosing a specific color from the color pop-up menu.
  5. Dreamweaver 4 enables you to place antialiased Flash Text within an HTML document.

    Dreamweaver 4 enables you to place antialiased Flash Text within an HTML document.

  6. Type in your desired text in the Text field.
  7. Enter a document-relative or absolute HTML link.
  8. Choose an HTML target window or target frame (optional).
  9. Choose a background color (optional).
  10. Type in a file name for the Save as field or accept the default name (for example, text1.swf).
  11. To preview all of your settings, click Apply to insert the Flash Text without leaving the dialog.
  12. To insert the Flash Text and exit the dialog, click OK.

Editing a Flash Text Object
There are two ways of opening the Edit dialog for Flash Text: (a) you can doubleclick the Flash Text Object, or (b) select the Flash Text object and click Edit in the Property inspector.

Directing the browser to the Flash plug-in
Perhaps one of the greatest timesaving features of Dreamweaver 4 is to its automatic inclusion of plug-in download locations for both Netscape and Internet Explorer (ActiveX). The following example of code will appear in your HTML document (note that the ¬ indicates continuation of the same line of code) it simultaneously places the Flash movie in your document and also directs the browser to the download location of the Flash Player plug-in if it is not installed:

Publishing the HTML document
When you’re ready to see your HTML document in a Web browser, save your Dreamweaver HTML document by selecting File➪Save (Command+S or Ctrl+S). To preview the page in a browser, use File➪Preview In Browser➪IE or Netscape, or press F12 to preview the page in your primary browser (as set in Dreamweaver’s preferences). Although Flash 5 is able to publish supporting HTML documents for .SWF files, Dreamweaver is best used to achieve more advanced integration of Flash in HTML and JavaScript, as you see in the Expert Tutorial by Joseph Lowery, author of the Dreamweaver Bible.

Animation techniques using layers
The window mode parameter for Flash movies currently only works with the Windows 95/98/NT versions of Internet Explorer 4.0 or higher. The window mode parameter, wmode, lets the background of a Flash movie drop out, so that HTML or DHTML content can appear in place of the Flash movie background. Because support for this option is not broadly supported, you are unlikely to find very many Web pages that use it. However, if you want to try it out, it’s pretty simple.

First, make sure that your Flash movie is on its own DHTML layer if you want to animate other material behind or in front of the Flash movie. In the Dreamweaver Properties Inspector for Flash movies, click the Parameters button. In the Parameters dialog, click the + button above the Parameter column. Enter wmode in the left column. Click under the Value column, and enter one of the three options:

  • Window: This is the “standard” player interface, in which the Flash movie plays as it would normally, in its own rectangular window on a Web page.
  • Opaque: Use this option if you want the Flash movie to have an opaque background and have DHTML or HTML elements behind the Flash movie.
  • Transparent: This option “knocks out” the Flash background color so that other HTML elements behind the Flash movie shows through.

Note that the Flash movie’s frame rate and performance may suffer on slower machines when this mode is used, because the Flash movie needs to composite itself over other non-Flash material. The wmode parameter is only recognized by 32-bit Windows versions of Internet Explorer 4 or higher. If you are using browser detection on your Web pages, you can divert visitors using these browsers to specialized Flash and DHTML Web pages.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

Flash Topics