Including a flash movie in a basic HTML page. Sounds easy enough, right? How about including a flash movie in HTML that is standards compliant AND works with the major browsers used on the web? If you’re like a lot of designers this probably yields frustration, as the markup for doing such can be a bit of a challenge.
I came across an article a few months ago written by the author of Dreamweaver MX Web Development, as I struggled with creating my own website. Drew McLellan provided much insight into the markup of Flash movies (or in my case, a navigation system I had developed) and led to what we’ll consider a coding theory: it works for me until I find a browser that disproves its functionality.
It should be noted that as I code, I test primarily (and most heavily) with IE, Mozilla, Opera, Safari, and Netscape. I apologize if the explanation following alienates a favored alternative, and I welcome any amendments.
Because Flash has come equipped with some kind of means of creating an HTML page to display the indigenous movies, the markup for the majority of Flash created HTML sites is very similar. This hardly seems it should be a standard for embedding movies, as it proves to be quite a beast within the code. Check this out:
<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.swf” align=””>
<embed src=”movie.swf” quality=”high” width=”400” height=”300” name=”movie” alignt=”” type=”application/x-shockwave-flash” plug inspage=http://www.macromedia.com/go/getflashplayer>
</object>
Pretty intimidating, no? In addition it requires that most of the values be declared twice. Much like me, my coding does not enjoy feeling bloated. Surely there is a better way.
I’m not sure where it came from, but somewhere in my repertoire there existed an <embed> tag that I assumed would be a good place to start. From what I understand, this element was developed by Netscape as a way of embedding multiple plug ins and players within their pages. As I experimented, I did find that it worked in Firefox, but was not supported with IE. Because <embed> is not standards compliant, it will prevent the page from being validated. Thus I had to say goodbye to my <embed> tag.
Without that- we are left with the <object> tag, which conveniently allows for child elements within the tag, and it is supported by almost every browser in regular internet rotation. While nothing is required as far as attributes, there are several relevant attributes that may be used to reference other elements. Take your own commercial break now if you would like to research what those may be.
The attributes are a little dicey to implement, however, as some will simply cause the browser to ignore the object entirely. This can occur, for instance, with the ‘classid’ tag. Obviously this defeats the purpose of the entire ordeal. They can, however, suggest to the browser which player it should use for the object. A simple swap of ‘classid’ with ‘type’ attribute can tell a browser where to search for a necessary plug in. I will show this code further down the closer we get to the final theory.
Other attributes that should be stripped for increased functionality include ‘codebase.’ While it does prompt a user to update what they are currently using, it can also prevent the movie from playing. Thus, another attribute must be leaned on to continue efficient functionality. To work around this, just add a movie with no intended purpose to the front of the site. Add the codebase attribute to it, so that it still allows the user to be prompted if their plug in is outdated. It will only be a few kilobytes of nothingness, but will allow the user to optimize their viewing experience. Perhaps not the most efficient of approaches, but it will certainly get the job done.
Adding the data attribute will enable the movie to play, but again we find problems with the existing coding. IE required that the entire movie loads before playing what is embedded in the page. So, if your movie of the small variety, you may consider stopping now. BUT, if you have anything requiring some time to load, you’re not done yet! Frustrated yet? Stay with me…
Here is where we stand:
<object type=”application/x-shockwave-flash” data=”movie.swf” width=”400” height=”300”>
<param name=”movie” value=”movie.swf” />
</object>
This is where Drew adds his brilliant hack to the code. By creating a very small container movie which loads in the first frame of the actual movie, the Flash element should be loading at an acceptable rate. This requires a bit of coding in Frame 1 of the Actionscript, and a way to call back the movie with:
c.swf?path-movie.swf
Regardless of the nature of the Flash element, this method should work.
At last we arrive. And obviously we have eliminated a lot of the bloating our poor coding had fallen victim to in the above coding.
<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>
If you recall the discussion of the child element above, feel free to play with that and add your own image, for instance, for users who do not have the Flash plug in for your page. It can be amended to the above coding within the <object> tag.
Later days!
If you’d like help uniting Flash elements and web standards, reach out to us and we will be in touch with you! We have expert web developers available to hire today.