HOME  â€¢  SYLLABUS/SCHEDULE  •  ASSIGNMENTS  â€¢   COURSE RESOURCES   •   YOUR PAGES   •   YOUR FEEDBACK

Publish Settings In Flash   - T U T O R I A L   I N   P R O G R E S S -

There is an approach to design that Flash accomplishes pretty effectively: you can create content that appears to 'float' above a background graphic on an html page, and the Flash content will scale in size to the user's browser. Here's an example of that (and if you want source files, etc. here are those: New_interface_ultra.zip  ) This is also an example of using XML to load content dynamically into a Flash template, and it uses Actionscript to do all the animating, too.

1. Create a transparent color swatch. In the 'color mixer' window, select any solid color, and turn down the transparency level to '0'.
2. Select 'Add Swatch' in the color mixer menu (upper right corner of the mixer window).
3. Go to the mainstage/main timeline, and click on the main stage or background to pull up the movie options in the Properties window. Under 'Background', click on the color picker box, and select your transparent swatch. You should see your background stage disappear - - if you're not done designing your project, you may want to postpone this until you're finished laying out elements and designing everything. It's sometimes hard to author with the main stage missing!
4. Select File > Publish Settings. Publish Settings are very powerful - - learn them well!
5. Here's the basic settings for the uberkool transparent background Flash movie:
   1. Formats: Select Flash (.swf) and HTML (.html). This will export both an .swf file and an .html file (an .html page with the .swf linked to it, embedded in it - - it doesn't convert your Flash into .html. This isn't sci-fi.), and places them in the same folder or directory your .fla file is located. You can change that location, of course, by clicking on the folder icon.
   2. Flash: Select Flash Player 8 for now. 95% of the planet has Flash 9, but if you want to avoid making someone update their Flash player, stick with Flash Player 8. Load Order: Bottom up. ActionScript version: ActionScript 2.0 for now. Options: Compress Movie (if your file ends up way too big). Password - none. Script time limit - 15 seconds. JPEG quality - 30 or so. Audio stream and Audio event: NA if you don't have sound. If you do have sound, go with MP3, 32 kbps, Mono, fast, or if you need optimal quality, go with MP3, 48 kbps, Stereo, Best. Local Playback Security: Access local files only.
   3. HTML: Template - Flash Only, Dimensions - Percent, Width/Height - 100 percent, Playback - nothing selected, Quality - High, Window Mode: Transparent Windowless,  HTML alignment - Default, Scale - Default, Flash alignment - horizontal/vertical - center, show warning messages - selected
6. Click on the 'Publish' button. You'll find the two files we already exported (your .swf and .html files) in your selected folder or directory, plus a javascript file - 'AC_RunActiveContent.js' . Put all three files in your 'Flash' folder in your site root (Have you set up your Dreamweaver site root yet? No? Go back to the Dreamweaver tutorials).
7. Create a superneat visual graphic that's infinitely suggestive, and scrupulously unrevealing of its inner nature (i.e., open a digital image in PhotoShop, size the image to about 1760 X 1024, apply Gaussian Blur between 8 - 15 pixels, Save For Web and Devices as a .jpeg at '0' quality level, yes, zero quality. How else will you know what you can live without?). Name it something like 'big_background.jpg', and put it in your GRAPHICS folder in your site root.
8. Open the .html file you've just published from Flash in Dreamweaver. In the Page Properties window, select your background graphic as the background image. Save All.
9. Drop your .html file into a browser window (or select 'preview in browser' in Dreamweaver. Voila! Your Flash is floating effortlessly above your beautiful background graphic!.
10. Use you background graphic (or some variation thereof) as background on your other HTML pages in your site - you're heading toward a unified visual design - yay!