Export SWFObject code directly from Flash and Flex | Taterboy.com: Graphics, Multimedia and Such

Export SWFObject code directly from Flash and Flex – taterboy
May 16th, 2009 | Filed under: Flash, Flex, Tips

SWFObject is the standard for embedding swfs into your webpages. In Flash CS4 the javascript embed code and plug-in detection has been combined into one file. This is easier then keeping track of extra javascript files, but not an easy way to transfer all that embed code to your web site.

SWFObject has provided a great AIR app for producing the embed code, it is very handy and the easiest way to produce the required embed code. I wanted to make this process even easier, so I created a couple template files that will embed your swf with swfobject directly from Flash or FLex. This is an update to a previous post, Exporting SWF Files With Custom HTML Templates.

Remember to download the latest version of swfobject from their Google code site. These templates include more settings that are included in the Default Flash HTML templates so it is easy to update wmode, scale, salign and adding flashvars if needed.

Flash Template:
Name the file what ever you like and place in the following directory. The new option will show up in Template options under the HTML configuration tab of Publish Settings.
Mac: ~User/Library/Application Support/Adobe/Flash CS4/language/Configuration/HTML/
PC: C:\Documents and Settings\ user \Local Settings\Application Data\Adobe\Flash CS4\ language \Configuration\HTML

^?View Code HTML

$TTSWFObject
$DXDefaultDetection.html
$DS
Display Adobe Flash Movies with SWFObject. NOTE: You Must add swfobject.js and expressInstall.swf in the same directory as your swf.
$DF
<!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" lang="en" xml:lang="en">
	<head>
		<title>$TI</title>
		$CS
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript">
			var flashvars = {};
 
			var params = {};
			params.menu = "$ME";
			params.quality = "$QU";
			params.scale = "$SC";
			params.salign = "$SA";
			params.wmode = "$WM";
			params.bgcolor = "$BG";
			params.allowfullscreen = "false";
			params.allowscriptaccess = "sameDomain";
			var attributes = {};
			attributes.id = "$TI";
			attributes.name = "$TI";
			attributes.align = "$HA";
			swfobject.embedSWF("$TI.swf", "$TIDiv", "$WI", "$HE", "$FV,$JR,$NR", "expressInstall.swf", flashvars, params, attributes);
		</script>
	</head>
	<body bgcolor="$BG">
		<center>
		<div id="$TIDiv">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
		</center>
	</body>
</html>

Flex Template: Name the file “index.template.html” and place in the html-template folder of your Flex Project. There is a direcotry of html templates in Adobe Flex Builder 3/sdks/ version /templates/ but have not figured out how to change the template source for each project.

^?View Code HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=(0014)about:internet -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<!-- 
Smart developers always View Source. 
 
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR. 
 
Learn more about Flex at http://flex.org 
// -->
 
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>${title}</title>
		<link rel="stylesheet" type="text/css" href="history/history.css" />
		<script type="text/javascript" src="swfobject.js"></script>
		<script type="text/javascript" src="history/history.js" ></script>
		<script type="text/javascript">
 
			function loadEventHandler() {
				var isIE  = (navigator.appVersion.indexOf("MSIE") != -1) ? true : false;
				BrowserHistory.flexApplication = swfobject.getObjectById("DrSkully");
				var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
				var MMredirectURL = window.location;
		   		var MMdoctitle = document.title;
			}
			var flashvars = {};
 
			var params = {};
			params.menu = "false";
			params.quality = "high";
			params.scale = "showall";
			params.salign = "tl";
			params.wmode = "window";
			params.bgcolor = "${bgcolor}";
			params.allowfullscreen = "false";
			params.allowscriptaccess = "sameDomain";
			var attributes = {};
			attributes.id = "${application}";
			attributes.name = "${application}";
			attributes.align = "middle";
			swfobject.embedSWF("${swf}.swf", "${application}Div", "${width}", "${height}", "${version_minor}", "expressInstall.swf", flashvars, params, attributes);
			swfobject.addLoadEvent(loadEventHandler);
 
 
		</script>
		<style>
			body
			{ 
				margin: 0px;
				background-color:${bgcolor};
			}
		</style>
	</head>
	<body >
		<center>
		<div id="${application}Div">
			<a href="http://www.adobe.com/go/getflashplayer">
				<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
			</a>
		</div>
		</center>
	</body>
</html>

Update:

Ran across this blog post today and liked the way the history and deep linking was included into the javascript. The Flex Template has been updated.
http://olegflex.blogspot.com/2008/06/swfobject-2-flex-template.html

Update: 1/23/10

Fixed IE error with broken javascript reference to isIE. Also removed scroll=’no’ from the body tag, it only worked in IE anyway.

Technorati Tags: Add new tag, Flash, Flex, html embed, Javascript, SWFObject

3 Comments »

Works like a charm. Big thanks for that!

FWIW, if you don’t want to bother with copying over your own swfobject.js each time, you can instead link to the one permanently hosted on google code. The URL is at http://code.google.com/p/swfobject/wiki/hosted_library

Just replace the swfobject.js in the above header with the URL listed on that page. Only problem with that is if you run into a google outage like last week, you’ll be sharing in that outage :)

Comment by John Hattan — May 18, 2009 @ 4:23 pm
[...] Export SWFObject code directly from Flash and Flex | Taterboy.com … [...]

Pingback by The Art of Using Coupons & Save Money - The Blog Planet — July 9, 2009 @ 4:30 pm
[...] Export SWFObject code directly from Flash and Flex | Taterboy.com … [...]

Pingback by What Exactly are Spa Chemicals? | Chemical Agents — July 11, 2009 @ 7:29 am