Flash Satay

Flash dan marquee merupakan content dan tag html yang dapat memperindah halaman website kita. Akan tetapi kedua komponen ini sering menghambat proses validasi halaman situs kita. Marquee adalah bukan standar tag html karena marquee diciptakan oleh pihak microsoft. Sedangkan pada Flash kita sering menempatkan dua tag utama dan nilainya sering di deklarasikan dua kali dan ini bukan standar html. Untuk flash ada artikel menarik yang di tulis oleh DREW MCLELLAN tentang tekhnik ‘Hack’ html pada flash. Berikut kutipannya.

Flash Satay : Embedding Flash While Supporting Standards

by DREW MCLELLAN

I’ve worked with Flash for saveral years and have always been slightly dissatisfied with the markup needed to embed a movie in web pages. When i recently published a site in XHTML, my dissatisfaction with the markup grew as I realized that it simply wasn’t valid in this context and was bloating my pages to unacceptable levels. A leaner, standards-compliant method of embedding Flash movies was called for.

The Twice-Cooked Method

Flash has always shipped with some methode of generating an HTML page to cantain Flash movies. Initialy, it was a tool called AfterShock. Since the release of Flash 4, authors can export HTML pages with embedded movies from within the Flash authoring environment. This Markup produced by Flash is the de facto standard that yuo’ll find in 99 % of sites that use Flash movies.

<object
classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″
width=”400″ height=”300″ id=”movie” align=”">
<param neme=”movie” value=”movie.swf” />
<embed src=”movie.swf” quality=”high”
width=”400″ height=”300″ name=”movie”
align=”" type=”application/x-shockwave-flash” plug inspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

As you can see, it’s a bit of monster. There are two main tags used to embed the movie, requiring every value to be declared twice. Internet Explorer and its followers primarily use one tag; browser that consider themselves friends of Netscape use the other. We’ll call this the Twice Cooked method.

<object> is part of the XHTML specification, but is badly implemented here. It is used by IE style browsers to start an instance of the Flash Player and load in the specified movie. The <param> element is its bedfellow, offering any number of parameters to be passed to the player once it is started.

<embed> is not part of the XHTML specification an will prevent your page from validating. It is used by Netscape and similiar browsers for displaying flash movies. Parameters are passed within the element as name/value attribute pairs.

The <embed> Element

The <embed> element was created by netscape as their method of embedding plug ins and players in web pages. It’s not part of the XHTML specification, and whlie some browsers other than netscape supporrt it, it’s not standards-compliant. so it’s out.

Bye bye, <embed> … it’s been swell.

The <object> Element

Without <embed>, we’re left with the <object> element, so it would be prudent to fully understand  its capanilities. The great news is that just about every browser in a popular use supports <object> in one way or another.

The <object> element has no required attributes, but many are available for use. Below are the more interesting ones, along with edited highlights from the W3C specification.

classid (URI) This attribute may be used to specify the location of an object’s implementation via a URI. It may be used together with or as an alternative to the data attribute (see below), depending on the type of object involved.

codebase (URI) This attribute specifies the base path used to resolve relative URIs specified by the classid, data and archieve attributes. When absent, its default value is the base URI of the current document.

data (URI) This attribute may be used to specify the location of the object’s data, or more generally, serialized from of an object which can be used to recreate it.

type (content-type) This attribute specifies the content type for the data specified by the data.

codetype (content-type) This attribute specifies the content type of data expected when downloading the object specified by classid.

There are other attributes that allow references to archived versions, cause text to display while loading ( we can do this is Flash already ), and so on, as wel as width, height, id, class and other common attributes. The one listed above, however, are particularly relevant when it comes to embedding Flash movies.

The Process

Armed with a more thorough understanding of the markup, I set about doing some testing in various browsers. My first step was to try the Macromedia markup with the <embed> stripped out, and cleaned up for XHTML :

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″
width=”400″ height=”300″ id=”movie” align=”">
<param neme=”movie” value=”movie.swf” />
</object>

Unfortunately, this simply doesn’t work outside IE-style browsers. After a little jiggerypokery and some googling, I discovered that the GUID used in the classid attribute was specific the browser’s ActiveX configuration. In fact, it was causing Netscape 7 and Mozilla to tatally ignore the object. The classid attribute does, however, perform an important function : telling the browser which player to use. So we can’t simply get rid of its functionality with something else.

Fortunately, the flaash player is configured to respond to content with MIME type of application/x-shockwave-flash. This is great, because the type attribute allows us to specify a content type. Therefore, out goes :

classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″

… and in comes :

type=”application/x-shockwave-flash”

CODEBASE

The above change doesn’t get movies playing in netscape browser on its own. The next curiosity on the list is the codebase attribute. This contains a path to a copy of the Flash plugin on Macromedia’s servers. This is actually incorrect usage of the attribute, as any paths wiyhin it are supposed to be within the same domain-a security feature.

In many browser (primarily IE) this attribute performs another function. The path contains a string on the end that specifies which version of the plug-in the server should deliver. If the version declared is later than the version currently installed, the browser will prompt the user to allow it to update. The downside is that this attribute also stop the movie from playing in Netscape and Mozilla when used in this way, so it’s gotta go. We’ll discuss a work-around for this lost functionality later on. With the codebase attribute gone, our markup is beggining to look pleasantly sparse :

<object type=”application/x-shockwave-flash” width=”400″ height=”300″>
<param name=”movie” value=”movie.swf” />
</object>

Try this code, and still won’t load a movie in Netscape. Having gotten this far, I worried that there was literally no way to use valid markup to deliver Flash in Netscape browsers, and every response to this question online told me as much. So Idid what always do and started trying crazy thins.

Making Progress

When I tried out the data attribute, I nearly had kittens, as movies suddenly started playing in Netscape and Mozilla. Flipping back to IE revealed that the movies played there too.

<object
type=”application/x-shockwave-flash” data=”movie.swf”
width=”400″ height=”300″>
<param name=”movie” value=”movie.swf” />
</object>

After testing with some largish movies, I noticed something amiss. While every other browser was getting it was right, IE/Windows was not streaming-it was waiting for the entire movie to download before playing it. This is fine for small movies, but for anything serious, the lack of streaming is unacceptable. I concluded that valid markup for Flash Movies was possible, but only once Microsoft had fixed this problem with IE/Windows.

The Satay Method

A few days later I was dicussing this issue with Jeffrey Zeldman, explaining how I’d come close to a solution but hadn’t quite found. He was interested that I’d manage to come close, having experienced the problem himself on recent projects. This got me thinking, and while driving home that evening the solution hit me.

The only problem with the code I had is that IE/Windows doesn’t stream the movie. It waits for the whole movie to download and plays it. This is fine for very small movies, as the wait isn’t noticeable. So, how about creating a very small container movie, which in the first frame loads in the real  movie we want to play ?

Itested it, and it works. It’s a bit of a hack, but a valid and justifiable hack in my opinion. The greatest thing is that you don’t have to create a separate container movie for each “real” movie-one smart container can work with any Flash movie having the same proportions.

No matter if your movie is made from beef, chicken or pork, you need to skewer it and dip it in the sauce to make it work. We call this the Satay Method.

The Container Movie

I created anew Flash movie and put the following ActionScript on Frame 1 right in the root of the movie :

          _root.loadMovie(_root.path,0);

This instruct the Flash player to load movie, whose name is in the variable path on the root, into Level 0 of the current movie. All we need to do is make sure that the name of the movie we want to load is held in the variable called path.

Flash make this part easy. The Flash Player loads any name/value pairs that are passed to a Flash movie on a query string into the root of the movie. This is useful for many different applications, but in our case it means that we just need to call the movie like this :

           c.swf?path=movie.swf

The container movie is c.swf. I’m passing it a variable called path with a value of movie.swf. This mean our ActionScript, when evaluated, would equate to this :

            _root.loadMovie(”movie.swf”,0);

You can modify the behavior of the container movie to do whatever you like–as long as it’s kept small. You can use GET and POST to pass variables through the container if you need to, for example. This method, however, will only work well if the container movie is just a few kilobytes in size.

The Markup

This leaves us with just the markup to finalize. Weve dropped alot of attributes, added some sparkling new ones, and tidied it all up :

<object type=”application/x-shockwave-flash”
data=”c.swf?path=movie.swf”
width=”400″ height=”300″>
<param name=”movie” value=”c.swf?path=movie.swf” />
</object>

So there it is meaner, leaner,and altogether better for enviroment. But what about that functionality we lost when axing the codebase attribute ?