Assembling Flash Sites for the Web

We have discovered that Flash is a vector based software. This allows everything within flash to be scaleable (whether it should or not), including the entire stage itself. When you publish your flash movie, or post a .swf file to your website and view it, it will scale along with the browser window it is displayed in.

In order to confine the flash file to it’s original dimensions, it must be displayed on a webpage using HTML. Using HTML affords us controls to align the file in the window, turn off scalability, and apply a background color the rest of the web page.

Using HTML with Flash files

There are two ways to create an HTML page to display your flash movie.

1. Let Flash create an HTML file using Flash’s Publish Settings.

Flash allows designers to Publish Flash files to a variety of formats. Choose File>Publish Settings

Check the boxes to generate both a Swf file and an Html File, and verify the file names that are about to be made.

Select the HTML tab to modify the settings to the HTML File.

There are several settings here that can be modified. The most important to note are the Dimensions, Playback, and Quality.

• The Dimensions determines the size of the stage as it appears in the HTML page (Match Movie is best).

• The Playback settings override and internal actions and automate the Swf’s playback.

• The Quality Setting determines the final quality of the Flash file, and thus it’s total file size. The setting options are as follows:

Low favors playback speed over appearance and does not use anti-aliasing.

Auto Low emphasizes speed at first but improves appearance whenever possible. Playback begins with anti-aliasing turned off. If Flash Player detects that the processor can handle it, anti-aliasing is turned on.

Auto High emphasizes playback speed and appearance equally at first but sacrifices appearance for playback speed if necessary. Playback begins with anti-aliasing turned on. If the actual frame rate drops below the specified frame rate, anti-aliasing is turned off to improve playback speed. Use this setting to emulate the View > Antialias setting in Flash.

Medium applies some anti-aliasing but does not smooth bitmaps. It produces a better quality than the Low setting but lower quality than the High setting.

High (the default) favors appearance over playback speed and always uses anti-aliasing. If the SWF file does not contain animation, bitmaps are smoothed; if the SWF file has animation, bitmaps are not smoothed.

Best provides the best display quality and does not consider playback speed. All output is anti-aliased and bitmaps are always smoothed.

Once all settings have been determined, Publish the Movie. Additional edits (like background color) can be applied using Dreamweaver.

2. Use Dreamweaver to create an HTML file.

Beyond an FTP client, Dreamweaver is an HTML editing software. We can use Dreamweaver to create a new HTML page, or edit one created by Flash’s Publish settings.

• Open Dreamweaver, and go to: Site>Define Site. If you have not already defined a site prior for FTP purposes, do so now.

• Create new File: File>New – Basic Page.

• Save File in Same Folder as your published .swf file. Be sure to include the file extension .html or .htm

• Insert>Media>Flash and place your .swf file on the page.

• Use Inspector Palate to set Page Align and apply color to background.

• Apply Page Title and Save HTML file again.

When you upload your flash file to your site, include the HTML file, and reference your flash movie via the html file (www.yourname.com/portfolio.html). This page with show you flash site, with background color, alignment, and page title.

In-Class

Create and post an HTML page that displays you current flash site live on your Website.