Flex tutorial: Embedding Flash content with SWFObject 2

February 4, 2009

If you are building your Flash content with Flex Builder 3 or Flash CS3, you will see that both came with a default HTML template that provides a way to embed your compiled SWF file. Although there’s nothing wrong with that way of doing it, SWFObject seems to be a better way (the author’s explanation is here). In fact in the CS4 release, Adobe has made this the standard way of embedding Flash content.

To manually work with SWFObject in Flex Builder, replace the codes in “html-template/index.template.html” with the codes below. Then place the following files into the “html-template” folder.

  • swfobject.js
  • expressInstall.swf

The files are available here, or you can download the my source files to get those files.

[update] If you are using Flex SDK 3.1 and below, deep linking (more specifically, the BrowserManager class) may not work with SWFObject. If that happens, simply replace the codes in the “history.js” file with this

Demo:
SWFObject 2 (view source enabled)

Source Codes:


<!-- saved from url=(0014)about:internet -->
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="history/history.css" />
<title>${title}</title>
<script src="AC_OETags.js" language="javascript"></script>
<script src="history/history.js" language="javascript"></script>

<style>
body { margin: 0px; overflow:hidden }
</style>

</head>

<body scroll="no">
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">

	var flashVars = {};

	var params = { play: "true",
				   loop: "false",
				   quality: "high",
				   wmode: "window",
				   allowscriptaccess: "sameDomain" };

	var attributes = { id: "${application}" };

	swfobject.embedSWF( "${swf}.swf",
						"divContent",
						"100%", "100%",
						"9.0.0",
						"expressInstall.swf",
						flashVars,
						params,
						attributes );
</script>

<div id="divContent">
	<h1>Alternative content</h1>
	<p><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></p>
</div>
</body>
</html>

  This blog is powered by WordPress with GimpStyle Theme design by Horacio Bella.