A Better HTML Template for Flex 4
Adobe took a big step forward using swfobject.js to handle swf embedding in Flex 4′s index.template.html
, but in my opinion they didn’t go quite far enough.
Here are my changes:
- Short and sweet, so I can understand what the hell is going on.
- Use Google AJAX Libraries API to include
swfobject.js
. - No IE6 crap.
- No Browser History crap.
Here’s my current version:
<!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>${application}</title> <style type="text/css" media="screen"> html, body, #flashcontent { height:${height}; } body { margin:0; padding:0; overflow:hidden; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script> <script type="text/javascript"> swfobject.embedSWF( '${swf}.swf', 'flashcontent', '${width}', '${height}', '${version_major}.${version_minor}.${version_revision}', '${expressInstallSwf}', false, { 'bgColor':'${bgcolor}' }); </script> </head> <body> <div id="flashcontent"> Flash is required. <a href="http://www.adobe.com/go/getflashplayer">Get it here!</a> </div> </body> </html>
Flashvars
Using flashvars
is easy with SWFObject (see the embedSWF()
method in the docs), just put them in as a Javascript hash
like this:
<script type="text/javascript"> swfobject.embedSWF( '${swf}.swf', 'flashcontent', '${width}', '${height}', '${version_major}.${version_minor}.${version_revision}', '${expressInstallSwf}', { key1:'val1', key2:'val2', key3:'val3' }, { 'bgColor':'${bgcolor}' }); </script>
View Source
Lastly, here’s a little trick that I use to embed flash into a post on this blog (or anywhere else) that enables view source to work with a relative url, so I can leave the viewSourceURL
attribute alone (defaults to viewSourceURL="srcview/index.html"
).
<script type="text/javascript"> swfobject.embedSWF( '${swf}.swf', 'flashcontent', '${width}', '${height}', '${version_major}.${version_minor}.${version_revision}', '${expressInstallSwf}', false, { 'bgColor':'${bgcolor}', base:'.' }); </script>
Adding the base
parameter, and setting it to '.'
, tells the embedded SWF to lookup urls relative to itself. The net effect is that view source just works.
smithfox
1.12.2011
I like the short and sweet template.