tutorials flex template_swfobject

Use of swfObject in a Flex project

Use of swfObject in a Flex project

One thing thatâ€™s for sure is that Adobe/Macromedia donâ€™t make the best HTML templates. But who still uses Flash 8â€™s HTML templates???

For Flex2 they have at least made an effort, the template is provided with flash player detection and the possibility to use the browser functions â€˜backâ€™ and â€˜nextâ€™. ïŠ But of course the page that is produced is not W3C compliant!

As I like to have valid xHTML pages, I decided to adapt swfObject templates and to correct the validation errors.

swfObject

I wonâ€™t explain how to use SWFObject ¹⁾ ²⁾, but you can find explications on the site of the author, Geoff Stearns.
SWFObject: Javascript auto-detection script of Flash Player

The html-template folder

Each Flex project has a html-template folder. This folder contains a series of files which are duplicated in the bin folder. The character strings of the ${width} type are replaced by the project values.

Itâ€™s in this folder that we will work.

Before

Here is the default content:

html-template
- AC_OETags.js
- history.htm
- history.js
- history.swf
- index.template.html
- playerProductInstall.swf

After

Here are its contents after the modifications:

html-template
- history.htm
- history.js
- history.swf
- index.template.html
- swfObject.js

history.htm

history.htm, is loaded in an iframe and it is in this frame that flex saves its page changes so that we can then use â€˜backâ€™ and â€˜nextâ€™. This page contains a .swf so we will integrate a swfObject.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
	<head>
 
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title></title>
 
		<script src="swfObject.js" type="text/javascript"></script>
 
	</head>
 
	<body >
 
		<div id="swf"/>
 
		<script type="text/javascript">
			var soh = new SWFObject("history.swf", "utility", "0", "0", "7.0.14", "#FFFFFF");
 
			soh.addParam("quality", "high");
			soh.addParam("profile", "false");			
			soh.addParam("src", "history.swf");
			soh.addParam("type", "application/x-shockwave-flash");
			soh.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
 
			var v = new top.Vars(top.getSearch(window));
			var pre = '$_';
			for(var i in v) {
				if(v[i] != null && typeof(v[i]) != 'object' && typeof(v[i]) != 'function' && i != 'numVars') {
					soh.addVariable(pre + i, v[i]);
				}
			}
 
			soh.addVariable("$_lconid", top.lc_id);
 
			soh.write("swf");
		</script>
 
	</body>
 
</html>

history.js

The original file works fine but if you want to reduce its weight you can delete the Var prototype files as this code is now integrated in the history.htm page in the swfObject script.

Vars.prototype.toString = function(pre) {
	var result = '';
	if(pre == null) { pre = ''; }
	for(var i in this) {
		if(this[i] != null && typeof(this[i]) != 'object' && typeof(this[i]) != 'function' && i != 'numVars') {
			result += pre + i + '=' + this[i] + '&';
		}
	}
	if(result.length > 0) result = result.substr(0, result.length-1);
	return result;
}

index.template.html

We change everything in this file â€“ we just leave the iframe.

Important: you must specify the following in the css styles: html, body, #swf { height: 100% ;}

The div #swf is at 100% high which is ok but 100% of what? We need to specify that the body is 100% high but again 100% of what? We therefore need to specify that the html is 100% of the available display in the browser.

This precaution is done because of the doctype which can cause problems in strict mode.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
 
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>${title}</title>
 
		<script src="swfObject.js" type="text/javascript"></script>
 
		<style type="text/css">

			html, body, #swf { height: 100%; margin: 0; overflow:hidden; }
			iframe { width: 0; height: 0; }

		</style>
 
	</head>
	<body>
 
		<script type="text/javascript" src="history.js"></script>
 
		<div id="swf">
			Alternate HTML content should be placed here
			This content requires the Adobe Flash Player
			<a href="http://www.adobe.com/go/getflash/">Get Flash</a>
		</div>
 
		<script type="text/javascript">

			var so = new SWFObject("${swf}.swf", "${application}", "${width}", "${height}", "${version_major}.${version_minor}.${version_revision}", "${bgcolor}", true);
 
			so.addParam("quality", "high");
			so.addParam("allowScriptAccess", "sameDomain");
			so.addParam("align", "middle");
			so.addParam("play", "true");
			so.addParam("loop", "false");
			so.addParam("type", "application/x-shockwave-flash");
			so.addParam("pluginspage", "http://www.adobe.com/go/getflashplayer");
 
			so.addVariable("historyUrl", "history.htm");
			so.addVariable("lconid", lc_id);
 
			so.write("swf");

		</script>
 
		<iframe name="_history" src="history.htm" frameborder="0" scrolling="no"></iframe>
 
	</body>
</html>

²⁾ History : Flash Gordon will now have to be called Swf Gordon!

inscrits inscrits !