YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: SWF Utility: Advanced SWF Utility Example With Flashvars and Javascript interaction

# SWF Utility: Advanced SWF Utility Example With Flashvars and Javascript interaction

This example is an advanced demonstration of the YUI SWF utility features.

Note: This example of the YUI SWF Utility usage requires Flash Player 9.0.115 or higher. The latest version of Flash Player is available at the Adobe Flash Player Download Center.

View example in new window.

The version of the Flash player installed on your computer is outdated. Please download and install the newest version.

## Advanced SWF Utility Example

In this example, we demonstrate how to embed a SWF on a page, pass it configuration parameters, and interact with it via ExternalInterface and the corresponding YUIBridge library in Actionscript.

First, include the following JS source files:

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

Next, create a container where the SWF will be placed. The size of the container will be the size of the SWF (in this case, we set it to 400 by 200 pixels). The current content of the container is what will be displayed if there is no Flash installed on the user's machine, or if the version of the Flash player installed does not match the minimum required.

<div id="swfContainer" style="width:400px;height:200px"> The version of the Flash player installed on your computer is outdated. Please download and install the newest version. </div>

Now, create an object with the necessary parameters to pass to the SWF. In this case, we specify the minimum version of Flash player required, whether to use the ExpressInstall capability of the Flash player, and a few SWF-specific fixed attributes, namely the "scale" attribute, which specifies whether to shrink or stretch the Flash content to fit the viewport (in our case, no shrinking or stretching is allowed), and the "salign" attribute, which specifies how to align the content in the viewport (in our case, we align it to top left). We also specify the value for the "allowScriptAccess" parameter as "always", which allows the SWF to make calls to Javascript functions, and vice versa. In addition, we pass some FlashVars -- arbitrary variables which, in our example, will be displayed by the SWF:

var params = {version: 9.115, useExpressInstall: false, allowScriptAccess: "always", fixedAttributes: {scale: "noscale", salign: "TL"}, flashVars: {foo: "One", bar: "Two"} };

Next, we create an instance of the swf and pass the parameters:

var mySWF = new YAHOO.widget.SWF("swfContainer", "assets/SWFExampleAdvanced.swf", params);

Next, we subscribe to the swfReady event, which fires when the SWF has been instantiated and becomes available for communication with Javascript (if the swf is using the YUIBridge library): mySWF.subscribe("swfReady", testFlash);

We also subscribe to the textAdded event, which the SWF dispatches when an addText method has been called on it:

mySWF.subscribe("textAdded", logTextAdded);

Next, we specify the handler that is called when the "swfReady" event fires (because of the subscribe() call above). The handler calls a method on the swf called "addText", and passes a string value to it. (the method is exposed by the SWF using the YUIBridge library): function testFlash () { mySWF.callSWF("addText", ["Some sample text\n"]); }

Finally, we also add a handler for the "textAdded" event, which the SWF fires when its "addText" method has been called:

function logTextAdded () { YAHOO.log("Text has been added to the SWF"); alert("Text added!"); }

You can download the source code for the sample swf and the YUIBridge library here.

## Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.

### YUI Logger Output:

### SWF Utility Examples:

### More SWF Utility Resources:

- User's Guide (external)
- API Documentation

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings