JavaScript Flash HTML Generator Library (Flash TML)

Part of the JavaScript Flash Foundation Series

Overview

A JavaScript library designed to simplify the process of generating the required HTML for adding an Adobe Flash Player movie to a web document. The standards-compliant <object /> element is used for all browsers. Please forward any questions, comments and feature requests to the JavaScript Flash Foundation Series Group

To detect if the Adobe Flash Player is installed in a Web Browser please refer to the complementary JavaScript Flash Detection Library.

Core Features

Legible, modular and flexible design
No callbacks
No express install (It does not work reliably)
No onload/domload dependencies
Non-destructive DOM injection (Never replaces a target but only it's child content)
Comprehensive source, API and configuration documentation
No Flash detection (see JavaScript Flash Detection Library)
100% complete use of DOM createElement (Even for IE!)
Standards compliant markup generation (Uses <object /> element)
Mature codebase (2+ years old)

Demo

Interact with the form below to see the corresponding JavaScript Flash HTML Generator Library configuration.

* Required field

src *doc

width *doc

height *doc

align doc

allowfullscreen doc

allownetworking doc

allowscriptaccess doc

base doc

bgcolor (hexadecimal RGB: #RRGGBB) doc

codebase doc

flashvars (object literal name/value pairs: {"name-1":"value-1", "name-n", "value-n"}) doc

id doc

loop doc

menu doc

play doc

quality doc

salign doc

scale doc

swliveconnect doc

tabindex doc

wmode doc

Click buttons above to see sample output.

Download

Source	Version	Date	Release Notes
flash_tml.js¹ flash_tml_min.js^{1, 2}	1.0.3	July 23, 2009	release-notes.txt
flash_tml.js¹ flash_tml_min.js^{1, 2} yahoo_flash_tml.js³ yahoo_flash_tml_min.js^{2, 3}	1.0.2	May 26, 2008	release-notes.txt
flash_tml.js¹ flash_tml_min.js^{1, 2} yahoo_flash_tml.js³ yahoo_flash_tml_min.js^{2, 3}	1.0.1	June 3, 2007	release-notes.txt
flash_tml.js¹	1.0.0	April 3, 2007	release-notes.txt

Notes

Standard Library
Compressed with JSMin, The JavaScript Minifier
Port for use with the Yahoo! User Interface Library (YUI)

Known Issues

Please forward any issues to the JavaScript Flash Foundation Series Group.

Documentation

Constructor

object FlashTML(string source, mixed width, mixed height [, object options])

Parameters

string source

The source location (URL) of the Flash movie to load.

mixed width

The width of the movie in either pixels (number) or percentage (string) of the browser window.

mixed height

The height of the movie in either pixels (number) or percentage (string) of the browser window.

object options

Additional options following JavaScript Object Notation.

boolean allowfullscreen: (true, false) To enable full-screen mode in Flash movie that can be terminated through ActionScript, keyboard shortcuts, or by the user switching focus to another window. The default Flash movie value is false. See Exploring full-screen mode in Flash Player 9 for more details.
string allowscriptaccess: (never, always) Controls the ability to perform outbound scripting from within a Flash movie. See Adobe TechNote AllowScriptAccess for more details.
string allownetworking: (all, internal, none) Specifies Flash movie access to network functionality. The default Flash movie value is all. See Restricting networking APIs for more details.
string align: (l, t, r, b) Specifies the Flash movie alignment and cropping of the remaining three sides. By default the Flash movie is centered in the browser and the edges are cropped if the window is smaller than the actual movie size.*
string base: (".", base directory or URL) Specifies the base directory or URL used to resolve all relative paths in the Flash movie.
string bgcolor: (#EFEFEF, hexadecimal RGB color value) Specifies the the background color of the Flash movie. This can be used to overide the background color specified in the Flash movie.
string codebase: The codebase attribute used in Windows Internet Explorer for automatic download and install of newer versions of the Flash Player. See What effect does the version have in the CODEBASE attribute of the OBJECT tag? for more details and sample values.
string id: The id attribute value for the object element.
object flashvars: Specifies the root level variables for the Flash movie. The format of flashvars follows JavaScript Object Notation ({"name-1":"value-1", "name-n":"value-n"}). Be aware that the maximum size of the total name/value pairs is restricted to 64KB (65535 bytes) in size.
boolean loop: (true, false) Specifies if the Flash movie repeats or stops when it reaches the last frame. The default Flash movie value is true.*
boolean menu: (true, false) Specifies if the Flash movie displays - right-click - the full menu of options to control the Flash movie.*
boolean play: (true, false) Specifies if the Flash movie plays immediately once loaded in the browser. The default Flash movie value is true.*
string quality: (low, high, autolow, autohigh, best) Specifies the quality of the Flash movie.*
string salign: (l, t, r, b, tl, tr, bl, br) Specifies the Flash movie alignment and cropping of the remaining sides.*
string scale: (showall, noborder, exactfit) Specifies the visibility, distortion and aspect ratio of a Flash movie. The default Flash movie value is showall.*
boolean swliveconnect: (true, false) Specifies if Java should start when loading the Flash Player for the first time.*
int tabindex: The tabindex attribute value for the object element.
string wmode: (window, opaque, transparent) Specifies the Window Mode property of the Flash movie for transparency, layering, and positioning in a browser.*

*See Adobe Technote Flash OBJECT and EMBED tag attributes for more details.

Example 1:

	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "helloworld.swf", 100, 150);
	</script>

Example 2:

	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "helloworld.swf", 100, 150, {"loop":"false", "wmode":"opaque"});
	</script>

Example 3:

	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "helloworld.swf", 100, 150, {"menu":"false", "flashvars":{"foo-1":"bar-1", "foo-n":"bar-n"}});
	</script>

Instance Properties

object domTemplate

This property is used to retrieve an object reference to the DOM created element structure. The object is a descedant (child) of a div element used as a container.

For Windows Internet Explorer a custom XML namespace is used for the DOM creation of the element structure, so upon inspection it may not look familiar. All other browsers follow the standard object/param element structure (embed element is not used).

Returns an object reference to an element structure.

Example:

	<script type="text/javascript">
	var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100, {"quality":"medium"}); 
	var domTemplateParentNodeName = flashtmlObj.domTemplate.parentNode.nodeName;
	var domTemplateParentNodeInnerHTML = flashtmlObj.domTemplate.parentNode.innerHTML;
	var domTemplateInnerHTML = flashtmlObj.domTemplate.innerHTML;
	</script>

mixed inDocumentElement

This property is used to retrieve a reference to the in document element object added through the replace and append instance methods.

Returns an object reference to an element added to a document or an empty string if it has not beed added.

Example:

	<div id="target">
		
	</div>
	
	<script type="text/javascript"> 
	var flashtmlObj1 = new FlashTML(9, "ball.swf", 300, 100, {"quality":"medium"}); 
	var inDocEl1 = flashtmlObj1.inDocumentElement;

	var flashtmlObj2 = new FlashTML(9, "ball.swf", 300, 100);
	flashtmlObj2.replace("target");
	var inDocEl2 = flashtmlObj2.inDocumentElement;
	</script>

string innerHTML

This property is used to retrieve the innerHTML of the created element structure. The innerHTML property is derived from the parent node of the domTemplate instance property.

Returns a string.

Example:

	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100, {"quality":"medium"}); 
	var innerHTML = flashtmlObj.innerHTML;
	</script>

string xhtml

This property is used to retrieve a XHTML transformation of the innerHTML instance property.

Returns a string.

Example:

	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100, {"quality":"medium"}); 
	var xhtml = flashtmlObj.xhtml;
	</script>

Instance Methods

object append(mixed target)

Appends the element structure to the designated target.

If target is a string, the element structure will be appended to an element with an id attribute equivalent to target.

If target is an object, the element structure will be appended to the target object element.

Note that for Windows Internet Explorer the instance property xhtml is concatenated to the target innerHTML. In all other browsers the instance property domTemplate is concatenated to the target via the DOM appendChild method.

Note that both this method and the instance method replace inclusively can only add one element per instance of the FlashTML class.

Retuns an object reference to an element added to the document structure.

Example:

	<div id="target">
		
		<h1>Flash TML!</h1>
		
	</div>
	
	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100);
	var appendedObj = flashtmlObj.append("target");
	</script>

object replace(mixed target)

Replaces the child nodes of the designated target with the element structure.

If target is a string, the element structure will replace the child nodes of the element with an id attribute equivalent to target.

If target is an object, the element structure will replace the child nodes of the target object element.

Note that for Windows Internet Explorer the instance property xhtml replaces the target innerHTML. In all other browsers the instance property domTemplate replaces all child nodes of target via the DOM removeChild and appendChild methods.

Note that both this method and the instance method append inclusively can only add one element per instance of the FlashTML class.

Retuns an object reference to an element added to the document structure or already added.

Example:

	<div id="target">
		
	</div>
	
	<script type="text/javascript"> 
	var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100);
	var appendedObj = flashtmlObj.append("target");
	</script>

string getId

This method is used to retrieve the HTML id attribute value. The id value is derived from either the constructor id options argument or automatically generated from the idPattern class property.

Example 1:

    <script type="text/javascript">
    var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100);
    var id = flashtmlObj.getId();
    </script>

Example 2:

    <script type="text/javascript">
    var flashtmlObj = new FlashTML(9, "ball.swf", 300, 100, {"id":"foobar"});
    var id = flashtmlObj.getId();
    </script>

Class Properties

string idPattern

This property is used in the generation of the id attribute value for the object element if one is not defined in the constructor.

Retuns a string.

Class Methods

string getQueryStrFromObj(object nameValuePairs)

This method is used to retrieve a URL encoded string from the object literal nameValuePairs.

The format of nameValuePairs follows JavaScript Object Notation ({"name-1":"value-1", "name-n":"value-n"}). Be aware that the maximum size of the total name/value pairs is restricted to 64KB (65535 bytes) in size.

Retuns a string.

Example:

	<script type="text/javascript"> 
	var queryStr = FlashTML.getQueryStrFromObj({"foo":"bar", "message":"hello world!"});
	</script>

Yahoo! User Interface Library (YUI) Version

Targeted for users of the Yahoo! User Interface (YUI) Library. YUI is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX.

The YAHOO.util.FlashTML namespace is used to contain the library within the YAHOO global Object. For more details pertaining to the YUI namespace implementation and dependencies please refer to the YAHOO.namespace documentation.