Wednesday, August 09, 2006

Internet Explorer Flash Object Hack

In April, Microsoft had the brainy idea to deactivate "Active" content. Instead of fixing ActiveX controls, they decided to simultaneously annoy both the users and the developers. If you don't know what annoyance I'm talking about, either you've done the right thing and used another browser, or you simply haven't visited a website with flash content. In order the user use Active content, he/she must "Click to activate..."

What a pain.

Unfortunately, yet another IE hack had to be conceived, once again sacrificing the elegance of HTML. Luckily Microsoft suggested a fix. This fix required an external script to write the <OBJECT>/<EMBED> HTML. It works, but the suggested code was still a little less object oriented as I would have liked. If we're going do this with scripts, we mind as well make it modular.

So here it is, we have 3 (4 if you count the swf) files: FlashObject.js, implementation.js, mypage.html

First off, the Class definition:// FlashObject.js

function FlashObject(URL)
{ // This is the contructor (Default Values)
this._URL = URL;
this._Width = 800;
this._Height = 600;
this._Bgcolor = "#ffffff";
this._Align = "middle";
this._Quality = "high";
this._Classid = "d27cdb6e-ae6d-11cf-96b8-444553540000";
this._ScriptAccess = "sameDomain";
}

FlashObject.prototype.changeURL = function (URL) {this._URL = URL;}
FlashObject.prototype.changeAlign = function (Align) {this._Align = Align;}
FlashObject.prototype.changeWidth = function (Width) {this._Width = parseInt(Width);}
FlashObject.prototype.changeHeight = function (Height) {this._Height = parseInt(Height);}
FlashObject.prototype.changeBgcolor = function (Bgcolor) {this._Bgcolor = Bgcolor;}
FlashObject.prototype.changeClassid = function (Classid) {this._Classid = Classid;}
FlashObject.prototype.changeQuality = function (Quality) {this._Quality = Quality;}
FlashObject.prototype.changeScriptAccess = function (ScriptAccess){this._ScriptAccess = ScriptAccess;}

FlashObject.prototype.show = function ()
{
document.writeln('<object classid="clsid:'+this._Classid+'" '+
'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" '+
'width="'+ this._Width +'" height="'+ this._Height +'" align="'+this._Align+'">');
document.writeln('<param name="allowScriptAccess" value="'+this._ScriptAccess+'" />');
document.writeln('<param name="movie" value="'+this._URL+'" />');
document.writeln('<param name="quality" value="'+this._Quality+'" />');
document.writeln('<param name="bgcolor" value="'+this._Bgcolor+'" />');
document.writeln('<embed src="'+this._URL+'" quality="'+this._Quality+'" bgcolor="'+this._Bgcolor+'" ' +
'width="'+ this._Width +'" height="'+ this._Height +'" align="'+this._Align+'" '+
'allowScriptAccess="'+this._ScriptAccess+'" type="application/x-shockwave-flash" '+
'pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.writeln('</object>');
}

Next comes the implementation (implementation.js)(new FlashObject("swf/flash.swf")).show();If you want to change the defaults, it's as easy as var hack = new FlashObject("swf/flash.swf");
hack.changeHeight(1000);
hack.show();
I'm sure, if you had to make this more dynamic, you could do it in a php file. (be sure to use header("Content-Type: text/javascript");)

Last but not least, the html will look like this.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>mypage</title>
<script src="js/FlashObject.js"></script>
</head>
<body bgcolor="#ffffff">
<!--url's used in the movie-->
<!--text used in the movie-->
<script src="js/implementation.js"></script>
</body>
</html>

Sources:
ActionScript.com
robertnyman.com

Labels:

posted by NiX0n at 3:28 PM

0 Comments:

Post a Comment

<< Home