39542 Web Animation

Spring 2007 Semester | Mondays 6:15 p.m. to 9:05 p.m.

Classes

Placing your SWF file into an HTML Page

Here are some examples of Flash movies being placed into HTML (below). Notice that in all of these examples the width and height are set both in the <object> and <embed>.

1. Here's a direct link to the SWF. This limits control of the browser window (page title, etc.) and prevents us from other Web features. Files should not be linked this way.
   
   
2. Here's the page with no margin or padding. These properties are set in the CSS, not Flash.
   
   
3. Here's an SWF set to 100% width and height. Notice that we have to remove the HTML doctype in order for this to work.
   
   
4. Here's the SWF with the context menu disabled . When you right-click the top SWF you'll notice you have less options than the one on the bottom. This is good practice and can either be set in the HTML or in Actionscript. For HTML, notice where menu is equal to false. Here's an explanation on how to disable the context menu in Actionccript.
   
   I won't be covering alignment here, but if you have an SWF that takes up 100% of the browser and want to align the contents, here's how to do it.

Detecting for Flash Player

It's important to make sure that the Flash content you create will be viewable by your audience. Whether your audience can view your Flash content is heavily dependent upon which Flash Player they have installed on their machine. Here's a link to the Adobe Flash Player Version Penetration Statistics.

Fortunately, Flash has a way to publish with Flash Player detection using HTML and JavaScript. A step-by-step explanation of Flash Player Detection is available on Adobe's LiveDocs.

A much better Flash detection has been authored outside of Adobe, however. It's called SWFObject by Geoff Stearns. SWFObject is written with JavaScript and uses cleaner code. It also allows for 100% scaling while validating as XHTML. I would highly recommend using this one over Flash's built-in publishing methods.

Helpful Firefox Extensions When Authoring SWFs and XHTML

Here's a short list of some of the Firefox extensions I use when developing:

• Firebug by Joe Hewitt - development tool allows you to edit Web pages within the browser.
• Web Developer by Chris Pedrick - a tool bar full of developer goodies, like enable/disable CSS, JS, etc.
• FlashTracer by Alessandro Crugnola - allows you to see trace statements within the browser during runtime (requires a Flash Player 9 Debugger Version). This extension can be pretty amusing, as it's interesting to see what trace() statements other Flash developers have left in their live sites.
• Flash Switcher by Alessandro Crugnola - allows you to switch Flash Player plugins or remove the plugin (works with Mac, too).