Stylehack

One of the hurdles Web Coding Standaristas place in a Flash Animator’s path is that of validation — the way that Flash movies have historically been inserted into web pages does not conform to current W3C standards. Boo hoo. “-) A couple of years ago I stumbled across the article on ALA re the Satay Method of inserting a Flash movie so that the page will still validate. It was a great article, contained a plethora of information on who/what/when/where/why and how the author had arrived at the method as it was explained at that time, and where the author felt it still needed work. To my mind the operative word was “work”… there was too much of it involved. If the visitor can find my site/page, he/she can accept some responsibility for taking the extra steps necessary to view all the content if it’s really that important to them. So I decided then and there to get rid of all the extra “stuff” in the Satay post and use only the bare basics that I felt were necessary to meet some specific considerations:

1. Valid coding practice 2. Meet basic Accessibility Standards 3. Provide a solution to the visitor without the Flash plugin or who has (gasp) blocked the play of Flash animation

Mostly, though, I decided to do this to impress and awe my pal Farron. She’s a web standards worshipper.. er I mean Web Standards Coding Instructor [whipping head around in fear to make sure she's not reading this!]. “Impress and awe” is defined in Stylehack-speak as “Prove it can be done”. “-) Selecting the level of Standards To cover future bases as much as possible, I decided to aim for validating to XHTML 1.0 Strict. The same practices will work at other levels… XHTML 1.0 Trans and I think HTML 4.01 also, though it’s been so long since I coded that way I could be wrong. Here is the DOCTYPE declaration for an XHTML 1.0 Strict document: You’ll notice I left off the XML declaration… I’ve had trouble with it tossing one browser or another into Quirks mode, so I include it only sparingly. Defining the OBJECT Tag There are many great discussions and how-tos on the web that discuss the merits of just about every topic, including the use of the OBJECT tag that is used to insert a Flash animation. So I’m not going to go into that here, I’m simply going to give you an example of how I insert a movie and explain my logic (or lack thereof).

Note: The above code example should not have a hard return in it breaking what was one line into many lines (line 4); this example was allowed to wrap for purposes of presentation, so there you go. Obviously, it will not have actual line numbers when you recreate it. “-)

Line 1:  The only variables on this line are the name of your movie and its dimensions. Do NOT remove the ” (apostrophes) around the name of the movie nor its dimensions; Line 2:  This param (Name) is required for cross-browser compatibility. (Don’t get me started on my IE-is-bad and FF-is-the-IE-of-Geek-Wannabes rant! Good thing I shut off comments here. grin) Anyway, the name you put here must match the name in Line 1. Again, don’t remove the ” (apostrophes);

Note: Lines 1 and 2 replace the old OBJECT/EMBED combo used to address how various browsers have accessed Flash movies in the past.

Line 3:  An optional line; there could actually be more params used than are used in this example, any that are considered valid for the OBJECT tag can be defined as necessary and applicable; Line 4:  This is the line that addresses missing plugins, browsers where animation is shut off and older browsers that can’t do the Flash movie thing. On top of which, it adds a level of accessibility to your movie for visitors using a Text Reader. It’s a work of art. “-) Basically, you need 3 things here….

a) An image to replace your movie. It can be a screen shot of your movie, or an image that informs the viewer they need a plugin to view the movie. To prevent any problems with your page design, you should make this image the same size as the movie; b) A destination URL where your visitors can get the Flash plugin, if necessary. In the example above, I have used the link to the page on the Macromedia site that offers download links for plugins to fit a variety of operating systems and/or browsers. These links change from time to time, so you need to remember to check them every now and then. Another option would be to make this link to a page on your site that then offers a link to Macromedia; if you have a lot of movies on your site, it would be easier to update the link on that page rather than a bunch of static page links. Of course, if you use a dynamic method of site generation, like PHP, this could be a variable so you only have to change a single declaration to impact your site. I’m getting offtopic, right? “-) c) Appropriate ALT and TITLE tags for your page, both for accessibility and clarity.

The implementation of these 3 items is EaSy PeAsY, as debbieT says! Simply wrap the image in an A tag (hyperlink). See? That wasn’t hard at all. Why do it?   When a visitor doesn’t have the Flash player (or has shut off Flash animation) their browser will display the image declared in this line. When they roll their mouse cursor over the image, the TITLE will pop up so they can read your instructions/comments. If they have images shut off, they will also see the ALT tag. Clicking on the image/link will send them to the Macromedia site so they can get the appropriate plugin. Whether you use an image with words (”You need the Flash Player to see my movie!”) or a screen capture of your movie, you need to be sure to use clearly thought out TITLE and ALT text. This is good practice for you for accessibility purposes… they should not be the same, but should work together in some way to describe an object or — in this case — also pass on information. Line 5:  Don’t forget to close the OBJECT tag. Summary Believe it or not, this is all you need! The movie plays or the image is displayed. And best of all, it validates as XHTML 1.0 Strict! Of course, you will have to insert this bit of code into a valid structure… it can be put in a DIV or a P, for instance. Please keep in mind that if you are using Flash MX 2004 and that blasted sniffer publishing method, you will need to fiddle this information a bit. I personally don’t like sniffers, so that’s not an issue for me. What’s that?  You want to know if there is an easy way to gather the info about your movie and the params you normally used? Sure! Simply do the Flash export/publish to HTML thing, then use that as a source of info to create your own OBJECT tag in your page. Slacker’s Rule #472. “-) And that concludes today’s Blah blah, car ride. (What another of daHens — Butzi — calls my “discussions”. hehe) Footnote 1: There are several geniuses who have come up with this stripped down method in the last year and wrote it up on their blogs; this article is not based on their publishing. I was using it long before they “published” and simply put off writing it up for our Flash and Swish classes - not to mention the Build a Website classes - because I am ~The~ Slacker! Just for the record. Footnote 2: This method is not recommended for a gigantic movie without a proper preloader sequence and planning, nor is it the best way to handle streaming Flash animations. For that, there is another trick that is part of the complete Satay Method using a 1×1 empty movie as a sniffer. Footnote 3: Farron’s blog is called Catartis. I only referenced her “other” site above because I wanted to harrass her a bit. hehe. For the record, the other daHens (Butzi, debbieT and Liann - in alphabetical order) are available by link up on the right.