Release Notes

Version 0.6 Beta. Second public release (November 12, 2011).

  • New Now you can download the generated template (instead of copy and paste)
  • Improved All form labels have tooltips with explantions for each setting.
  • Improved Flash Player detection shows if your version should be updated (box gets red).
  • Improved Flash Player detection contains a list with important Flash Player versions (starting from FP 8).

Version 0.5 Beta. First public release (October 9, 2011).

  • New Configurator for embedding SWF files using SWFObject
    • All options and settings for embedding SWF files.
    • Your current settings are stored if you leave the web page (HTML5 / LocalStorage)
    • Powerful template engine for rendering in custom HTML templates.
    • Export and import your settings using a JSON object.
  • New Flash Player detection and latest runtime version.
  • New Links & Ressources for Adobe Flash Player
  • New Basic version of the documentation.

At the moment, this site is only tested in the latest version of Safari, Chrome and Firefox. You can file bugs and requests at Github.

About

The main goal of this site is to provide an easy way for embedding a flash file (.swf) in an HTML page. A lot of people don't know exactly how this works and what options you have. By using SWFObject, an Open Source JavaScript Library, you benefit from all the features of this popular library (standards-friendly, HTML fallback, Flash Player detection, etc.) which is well-known as the best solution for embedding SWF files.

Instructions

Let's start with an easy example: Download this ZIP-File containing a flash demo file and we'll create an HTML template for it.
  1. Open the Configurator (Restore the default settings using the button on the left side in case you already played with the configurator). The most important fields are "Flash file" and "Dimensions" on the first tab. Put the name of your flash file ("sample1.swf") and choose the size (300x300).
  2. Jump to the last tab (Export) and click the "Show HTML Code" Button. Copy the source code from the window and save it as "index.html" in the same folder as the downloaded demo assets.
  3. Open the index.html in your browser and you should see the flash content.

That's it!

Troubleshooting

If your Flash content isn't displayed properly, check these points:

  • Flash area is empty
    • Right click on the Flash area. If the context menu displays „Movie not loaded…” it's likely that the path to your Flash file is not correct. So the Flash Player is initialized but your movie couldn't be loaded which results in an empty Flash area. In order to find out what's exactly the problem have a look at the HTTP Requests for this page („Web Developer > Web Console” in Firefox; „Window > Activity” in Safari). You can see exactly the (wrong) path from where the browser tries to load the SWF file (404 error).
  • The alternative content is always displayed / Flash Player Detection is wrong
    • This problem can occur when the swfobject.js is not included properly. If this file is missing, you always see the alternative content. That's because SWFObject isn't loaded and doesn't overwrite the alternative content with the Flash content. And if the alternative content says something like "Get Adobe Flash Player", this message is confusing and leads you to the wrong assumption that Flash Player isn't installed (but in reality SWFObject is missing).
You can also check the SWFObject FAQ for more specific problems.

Custom Settings

You can import and export your settings. Technically, this is a JSON object. Here's an example.

{
"alternativeContent" : "",
"attributeAlign": "",
"attributeClass": "",
"attributeName": "",
"contentID" : "",
"flashFile" : "",
"fpVersionMajor" : 11,
"fpVersionMinor" : 0,
"fpVersionRelease" : 0,
"dimensionWidth" : 640,
"dimensionHeight" : 480,
"dimensionUnit" : "",
"expressInstallSwfPath_enabled" : false,
"expressInstallSwfPath" : "expressInstall.swf",
"flashVars": {    
	"demo": "demo123"  
},
"params" : {
	 "allownetworking": "internal",
	 "allowscriptaccess": "always",
	 "allowfullscreen": "",
	 "base": "",
	 "bgcolor": "#FFFFFF",
	 "devicefont": "",
	 "fullscreenonselection": "",
	 "menu": "",
	 "loop": "",
	 "play": "",
	 "quality": "",
	 "scale": "",
	 "salign": "",
	 "seamlesstabbing": "",
	 "swfliveconnect": ""   		
},
"swfObjectPath": "swfobject.js",
"swfObjectPath_useGoogle" : false
}						
					

Custom Templates

If you want to use your own custom HTML file, you can create a template. The template engine supports inserting variables as well as running JavaScript code inside (for loops, if-statements, etc.).

  • Variables are inserted using the syntax <%= variableName %> .
  • You can write an if-statement using <%= variable1 == true ? 'hardcoded value' : variable2 %>
  • You can loop through the flashvars and parameters: <% _.each(flashVars, function(name, key) { %>flashvars.<%= key %>="<%= name %>"; <% });%>

[to do: List of all variable names.]

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<script type="text/javascript" src="<%= swfObjectPath_useGoogle == true ? 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js' : swfObjectPath %>"></script>
		<script type="text/javascript">
			var flashvars = {};
			var params = {};
			var attributes = {};
					
			<% _.each(flashVars, function(name, key) { 
			%>flashvars.<%= key %>="<%= name %>";
			<% });%>
			<% _.each(params, function(name, key) { 
			%>params.<%= key %>="<%= name %>"; 
			<% }); %>
			swfobject.embedSWF("<%= flashFile %>", "<%= contentID %>", "<%= dimensionWidth %><%= dimensionUnit %>", "<%= dimensionHeight %><%= dimensionUnit %>", "<%= fpVersionMajor %>.<%= fpVersionMinor %>.<%= fpVersionRelease %>", <%= expressInstallSwfPath_enabled == true ? '"' + expressInstallSwfPath + '"' : 'false' %>, flashvars, params, attributes);
		</script>
	</head>
	<body>
		<div id="<%= contentID %>">
			<%= alternativeContent %>
		</div>
	</body>
</html>
					

By the way, the template engine used in this project is from Underscore.js

Thanks

Thanks to creators of SWFObject for this great open source project!

Trademarks

Adobe and Flash Player are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.