I’ve labored with Flash for a number of years and have at all times been barely dissatisfied with the markup wanted to embed a film in internet pages. Once I lately printed a web site in XHTML, my dissatisfaction with the markup grew as I spotted that it merely wasn’t legitimate on this context and was bloating my pages to unacceptable ranges. A leaner, standards-compliant technique of embedding Flash films was referred to as for.
Article Continues Under
The Twice-Cooked Technique#section2
Flash has at all times shipped with some technique of producing an HTML web page to comprise Flash films. Initially, it was a instrument referred to as AfterShock. Because the launch of Flash 4, authors can export HTML pages with embedded films from inside the Flash authoring surroundings. This markup produced by Flash is the de facto normal that you just’ll discover in 99% of web sites that use Flash films.
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://obtain.macromedia.com /pub/shockwave/cabs/flash/swflash.cab#versi
width="400" top="300" id="film" align="">
<embed src="https://alistapart.com/article/flashsatay/film.swf" high quality="excessive" width="400"
top="300" title="film" align=""
sort="software/x-shockwave-flash"
plug inspage="http://www.macromedia.com/go/getflashplayer">
</object>As you possibly can see, it’s a little bit of a monster. There are two most important tags used to embed the film, requiring each worth to be declared twice. Web Explorer and its followers primarily use one tag; browsers that take into account themselves buddies of Netscape use the opposite. We’ll name this the Twice Cooked technique.
<object> is a part of the XHTML specification, however is badly applied right here. It’s utilized by IE model browsers to start out an occasion of the Flash Participant and cargo within the specified film. The <param> ingredient is its bedfellow, providing any variety of parameters to be handed to the participant as soon as it’s began.
<embed> just isn’t a part of the XHTML specification and can forestall your web page from validating. It’s utilized by Netscape and related browsers for displaying Flash films. Parameters are handed inside the ingredient as title/worth attribute pairs.
The <embed> Factor#section3
The <embed> ingredient was created by Netscape as their technique of embedding plug ins and gamers in internet pages. It’s not a part of the XHTML specification, and whereas some browsers aside from Netscape help it, it’s not standards-compliant, so it’s out.
Bye bye, <embed> … it’s been swell.
The <object> Factor#section4
With out <embed>, we’re left with the <object> ingredient, so it might be prudent to completely perceive its capabilities. The nice information is that virtually each browser in standard use helps <object> in a method or one other.
The <object> ingredient has no required attributes, however many can be found to be used. Under are the extra attention-grabbing ones, together with edited highlights from the W3C specification.
classid (URI) This attribute could also be used to specify the situation of an object’s implementation through a URI. It might be used along with or as a substitute for the info attribute (see under), relying on the kind of object concerned.
codebase (URI) This attribute specifies the bottom path used to resolve relative URIs specified by the classid, knowledge, and archive attributes. When absent, its default worth is the bottom URI of the present doc.
knowledge (URI) This attribute could also be used to specify the situation of the thing’s knowledge, or extra usually, a serialized type of an object which can be utilized to recreate it.
sort (content-type) This attribute specifies the content material sort for the info specified by knowledge.
codetype (content-type) This attribute specifies the content material sort of information anticipated when downloading the thing specified by classid.
There are different attributes that enable references to archived variations, trigger textual content to show whereas loading (we will do that is Flash already), and so forth, in addition to width, top, id, class and different widespread attributes. Those listed above, nevertheless, are significantly related in relation to embedding Flash films.
One other helpful factor I discovered is that an <object> tag can comprise little one components which can be utilized in its place if the browser doesn’t have the aptitude to show the thing itself. The truth is, that is how the undesirable nested <embed> works in Netscape browsers—however extra on that later.
Armed with a extra thorough understanding of the markup, I set about doing a little testing in numerous browsers. My first step was to strive the Macromedia markup with the <embed> stripped out, and cleaned up for XHTML:
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://obtain.macromedia.com /pub/shockwave/cabs/flash/swflash.cab#versi
width="400" top="300">
</object>Sadly, this merely doesn’t work exterior IE-style browsers. After a bit jiggerypokery and a few Googling, I found that the GUID used within the classid attribute was particular to the browser’s ActiveX configuration. The truth is, it was inflicting Netscape 7 and Mozilla to completely ignore the thing. The classid attribute does, nevertheless, carry out an vital operate: telling the browser which Participant to make use of. So we will’t merely eliminate it with out changing its performance with one thing else.
Happily, the Flash Participant is configured to reply to content material with a MIME sort of software/x-shockwave-flash. That is nice, as a result of the sort attribute permits us to specify a content material sort. Subsequently, out goes:
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"… and in comes:
sort="software/x-shockwave-flash"Codebase#section6
The above change doesn’t get films taking part in in Netscape browsers by itself. The subsequent curiosity on the checklist is the codebase attribute. This incorporates a path to a replica of the Flash plug in-on Macromedia’s servers. That is truly incorrect utilization of the attribute, as any paths inside it are presupposed to be inside the similar area—a safety function.
In lots of browsers (primarily IE) this attribute performs one other operate. The trail incorporates a string on the tip that specifies which model of the plug-in the server ought to ship. If the model declared is later than the model presently put in, the browser will immediate the person to permit it to replace. The draw back is that this attribute additionally stops the film from taking part in in Netscape and Mozilla when used on this manner, so it’s gotta go. We’ll focus on a work-around for this misplaced performance in a while. With the codebase attribute gone, our markup is starting to look pleasantly sparse:
<object
sort="software/x-shockwave-flash"
width="400" top="300">
</object>Do this code, and it nonetheless gained’t load a film in Netscape. Having gotten this far, I anxious that there was actually no manner to make use of legitimate markup to ship Flash in Netscape browsers, and each response to this query on-line advised me as a lot. So I did what I at all times do and began making an attempt loopy issues.
Once I tried out the knowledge attribute, I practically had kittens, as films all of the sudden began taking part in in Netscape and Mozilla. Flipping again to IE revealed that the films performed there too.
<object
sort="software/x-shockwave-flash" knowledge="https://alistapart.com/article/flashsatay/film.swf"
width="400" top="300">
</object>After testing with some largish films, I observed one thing amiss. Whereas each different browser was getting it proper, IE/Home windows was not streaming—it was ready for your complete film to obtain earlier than taking part in it. That is nice for small films, however for something critical, the dearth of streaming is unacceptable. I concluded that legitimate markup for Flash films was doable, however solely as soon as Microsoft had mounted this downside with IE/Home windows.
A number of days later I used to be discussing this situation with Jeffrey Zeldman, explaining how I’d come near an answer however hadn’t fairly discovered it. He was that I’d managed to come back shut, having skilled the issue himself on current initiatives. This bought me pondering, and whereas driving house that night the answer hit me.
The one downside with the code I had is that IE/Home windows doesn’t stream the film. It waits for the entire film to obtain after which performs it. That is nice for very small films, because the wait isn’t that noticeable. So, how about creating a really small container film, which within the first body masses within the actual film we need to play?
I examined it, and it really works. It’s a little bit of a hack, however a sound and justifiable hack in my view. The best factor is that you just don’t must create a separate container film for every “actual” film—one sensible container can work with any Flash film having the identical proportions.
Irrespective of in case your film is constructed from beef, rooster, or pork, you continue to must skewer it and dip it within the sauce to make it work. We name this the Satay Technique.
The container film#section9
I created a brand new Flash film and put the next ActionScript on Body 1 proper within the root of the film:
_root.loadMovie(_root.path,0);This instructs the Flash Participant to load a film, whose title is within the variable path on the basis, into Degree 0 of the present film. All we have to do is be sure that the title of the film we need to load is held within the variable referred to as path.
Flash makes this half simple. The Flash Participant masses any title/worth pairs which might be handed to a Flash film on a question string into the basis of the film. That is helpful for a lot of totally different functions, however in our case it signifies that we simply must name the film like this:
c.swf?path=film.swfThe container film is c.swf. I’m passing it a variable referred to as path with a price of film.swf. Because of this our ActionScript, when evaluated, would equate to this:
_root.loadMovie("https://alistapart.com/article/flashsatay/film.swf",0);You’ll be able to modify the conduct of the container film to do no matter you want—so long as it’s saved small. You should utilize GET and POST to go variables by the container if you have to, for instance. This technique, nevertheless, will solely work effectively if the container film is just some kilobytes in dimension.
This leaves us with simply the markup to finalize. We’ve dropped a number of attributes, added some glowing new ones, and tidied all of it up:
<object sort="software/x-shockwave-flash"
knowledge="c.swf?path=film.swf"
width="400" top="300">
</object>So there it’s—meaner, leaner, and altogether higher for the surroundings. However what about that performance we misplaced when axing the codebase attribute?
The primary downside with eliminating the codebase attribute was that in IE and related browsers it brought about the person to be prompted to replace their Flash plug-in if it was outdated. That is actually helpful, because it’s doubtless the solely manner that almost all strange internet customers get their gamers up to date.
The workaround is easy: simply embrace one sacrificial film on the entrance of your web site with the codebase attribute left in. This must be a film with no objective inside the web site—only a 1k empty blob of nothingness that causes the person to be prompted if they’ve an previous model of the plug in. Not the cleanest method, however a sensible one. It shouldn’t lose you any buddies.
Keep in mind that conduct of the <object> tag I used to be speaking about earlier, the place the browser will attempt to parse a toddler ingredient if it could’t work with the thing itself? It’s very cool.
For those who had been to take a look at the supply code of the house web page at Macromedia.com, you’d see that they serve up another picture if the person can’t view Flash films. They’re detecting the Flash Participant with JavaScript, after which utilizing JavaScript to dynamically write out HTML primarily based on the detection. Ugly, ugly, ugly. Right here’s how I’d do it:
<object sort="software/x-shockwave-flash
knowledge="c.swf?path=film.swf"
width="400" top="300">
<img src="https://alistapart.com/article/flashsatay/noflash.gif"
width="200" top="100" alt="" />
</object>If the browser doesn’t know easy methods to play objects with a MIME sort of software/x-shockwave-flash, it can merely go for the subsequent little one ingredient and provides {that a} strive. I’m guessing {that a} easy picture ingredient must be okay for most individuals. Failing that, you possibly can merely use textual content.
I’ve written this text with the information that it’s merely one man’s findings and thus a piece in progress. Take into account it like a scientific idea: what I state right now is just confirmed till it’s disproved.
