Getting Started

To use the SWF Utility, include the following source files in your web page:

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
 
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.9.0/build/swf/swf-min.js"></script>
 

<!-- Dependencies -->
<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/element/element-min.js"></script>
 
<!-- Source files -->
<script src="http://yui.yahooapis.com/2.9.0/build/swf/swf-min.js"></script>
 

To get started with the SWF Utility, begin by placing it on the page. Create a <div> into which you'll render your SWF instance.

The width and height of the container should be set to the size that you want the instance of the SWF to be.

<div id="swfContainer" style="width:500px; height:400px"></div>
 

<div id="swfContainer" style="width:500px; height:400px"></div>
 

Now, set the necessary configuration parameters for the SWF.

var params = {
    version: 9.115,
    useExpressInstall: false,
    fixedAttributes: {
        allowScriptAccess: "always",
        allowNetworking: "all",
        width: 50
    },
    flashVars: {
        flashvar1: "One word", 
        flashvar2: "A word & another", 
        flashvar3: "Three words - 100% done & done"
    }
}; 
 

var params = {
    version: 9.115,
    useExpressInstall: false,
    fixedAttributes: {
        allowScriptAccess: "always",
        allowNetworking: "all",
        width: 50
    },
    flashVars: {
        flashvar1: "One word",
        flashvar2: "A word & another",
        flashvar3: "Three words - 100% done & done"
    }
};
 

The parameters are all optional, and are as follows:

• version - specifies the minimum Flash player version necessary to run your content. Passed as a float, where the integer part is the major version of the player, and the decimal part is the revision (so, for example, "Flash Player 9.0.5" would be 9.005, and "Flash Player 9.0.124" would be 9.124). If the minimum version is not installed on the user's machine, and useExpressInstall option is not set to true, then the content of the container div is not overwritten.
• useExpressInstall - if set to true, this option will check the Flash player version, and if it is lower than that required, the utility will attempt to load a SWF that will use the express install capability to offer the user to upgrade to the latest version of Flash. Express install is not supported in all old versions of Flash, and if it fails, it will display a link to a separate upgrade page.
• fixedAttributes - this is a set of key-value pairs containing various configuration attributes for the player. The full list of these parameters with explanations of their use is at the end of this page.
• flashVars - this is a set of arbitrary key-value pairs that will be passed to the Flash application and will be available in the Flash application at initialization time. These could be used to bring external initialization data into the Flash app for configuration and customization purposes.

Next, we create an instance of the SWF utility:

var newswf = new YAHOO.widget.SWF("swfContainer", "example.swf", params);
 

var newswf = new YAHOO.widget.SWF("swfContainer", "example.swf", params);
 

Note that we pass the name (or a reference) of the container in which the SWF will be placed, the URL of the SWF (in this case, relative to this page), and the set of parameters specified above.

If the SWF uses a YUIBridge utility for interacting with JavaScript (see the corresponding example), then we would also be able to subscribe to an event that is dispatched when the SWF is ready for communication:

newswf.addListener("swfReady", swfReadyHandler);
 

newswf.addListener("swfReady", swfReadyHandler);
 

Possible SWF Attributes and Their Values

As shown in the example above, the Flash application being embedded via the SWF utility has a number of configuration parameters. These parameters are passed as a set of key-value pairs named fixedAttributes and are as follows:

• play - Possible values: true, false. If true, the loaded SWF will begin playing as soon as it is loaded (e.g. in cases where frame-based animation is present in the SWF). The default value is true.
• loop - Possible values: true, false. In movies with frame-based animation, specifies whether the SWF repeats or stops when it reaches the last frame. The default value is true.
• menu - Possible values: true, false. If true, the full context menu is displayed when the SWF is right-clicked. If false, the context menu will contain only the 'Settings' option and the 'About Flash' option.
• quality - Possible values: low, high, autolow, autohigh, best. low never uses anti-aliasing in rendering vector or bitmap elements. autolow improves appearance whenever possible. Anti-aliasing is initially turned off, but enhanced progressively as the Flash player detects whether the user's machine can handle it. autohigh balances speed and appearance, but prefers speed to appearance when necessary. Anti-aliasing is initially on, but if the actual frame rate drops below the specified frame rate, anti-aliasing is turned off. medium applies some anti-aliasing, but does not smooth bitmaps. It results in a better visual appearance than the Low setting, but worse visual appearance than the High setting. high provides better appearance but will sacrifice playback speed to always apply anti-aliasing. If the movie is not animated, bitmaps are anti-aliased; if the movie is animated, bitmaps are not anti-aliased. best results in the best display quality and does not look at playback speed as a factor. All visuals are anti-aliased.
• scale - Possible values: showall, noborder, exactfit. showall, which is the default value, makes the entire Flash application visible in the specified area without distortion, while keeping the original aspect ratio of the application. Depending on the width and height set for the SWF, this may cause borders to be visible on the sides of the application. noorder resizes the application to fill the specified area, without distortion but with a possibility of cropping. The original aspect ratio of the application is preserved. exactfit allow the entire application to be visible in the specified area, and does not preserve the original aspect ratio, which may result in distortion.
• align - Possible values: l, t, r, b - which stand for left, top, right and bottom respectively. If not set, the SWF is centered in its container and cropped if the container is smaller than the SWF; if specified, the SWF is aligned to the corresponding edge of its container.
• salign - Possible values: l, t, r, b, tl, tr, bl, br - which stand for left, top, right, bottom, top-left, top-right, bottom-left, and bottom-right, respectively. These specify the alignment of the content of the SWF within the Flash player viewport.
• wmode - Possible values: window, opaque, transparent. Modifies the transparency setting of the Flash application. If set to window (default value), the SWF is contained in its own space within the webpage. If set to opaque, the SWF obscures everything on the page behind it. If set to transparent, the HTML content shows through all transparent portions of the movie. The latter option is associated with reduced performance for animation.
• bgcolor - a hexadecimal string in the format #RRGGBB. Sets the background color of the SWF. This attribute will override the setting inside the SWF file.
• base - a string specifying the URL prepended to all relative paths in the Flash application. By the default resolves to ".", which is the same path as the SWF itself.
• allowScriptAccess - a parameter that can have one of three possible values: always, sameDomain, never. If set to always, the communication with the Javascript on the page is fully allowed. If set to sameDomain, the communication with the Javascript on the page is only allowed if the SWF is loaded from the same domain as the page containing it. If set to never, the communication with the Javascript is not allowed.
• allowNetworking - a parameter with possible values of all, internal, none. If set to all, all networking APIs (loading data, opening new browser windows, etc.) are permitted in the SWF. If set to internal, the SWF cannot use browser navigation or interaction, but can use its own network APIs to load and send data. If set to none, the SWF cannot use any networking APIs, including SWF-to-SWF networking.
• allowFullScreen - a parameter with possible values of true or false. If true, the SWF is allowed to expand to full screen; otherwise, it is not.

SWF Utility examples

For further exploration of the SWF utility component, take a look at its example files.

Known Issues

A JavaScript error occurs when the required Flash Player is not present.

When the required Flash Player is not installed on the client's machine, a JavaScript error will accompany the displayed warning message. To review the ticket which includes information on the latest release that addresses this issue, go here.

Support & Community

The YUI Library and related topics are discussed on the on the YUILibrary.com forums.

Also be sure to check out YUIBlog for updates and articles about the YUI Library written by the library's developers.

Filing Bugs & Feature Requests

The YUI Library's public bug tracking and feature request repositories are located on the YUILibrary.com site. Before filing new feature requests or bug reports, please review our reporting guidelines.