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:

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.

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:

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

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:

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:

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.