Lesson 15: Embed Flash and interact with the OpenSocial API

From VZ Developer Wiki
Jump to: navigation, search

General Guidelines | XML Specification | Features | Views | JavaScript API | REST API | Tutorials | OAuth


Lesson 14: Tracking of user interaction Back to overview Lesson 16: Request additional data from your user

If you want to embed Flash files into your OpenSocial app the JavaScript API provides a handy method to help you (see Gadgets.flash_(v0.9)#gadgets.flash.embedFlash).

With this API call

gadgets.flash.embedFlash(gadgets.cache.getCachedUrl("my.swf"), 
                    "id_of_div", "9", {id:"id_of_embed_element", allowscriptaccess:"always"});

The uploaded flash file my.swf will be inserted into this DOM Element

<div id="id_of_div"></div>

With the fourth parameter you can inject additional attributes to the Flash embed tag, such as an id, which you can use to access Flash ActionScript methods from your JavaScript.

In your flash file you can then register functions to be accessable from your JavaScript or call JavaScript functions like this:

package {
    import flash.external.ExternalInterface;

    public class ExternalInterfaceExample {

        public function ExternalInterfaceExample() {
            // This is needed so that JavaScript is able to call your CallBack-Function.
            // Enter all domains that are allowed or * to allow every domain.
            flash.system.Security.allowDomain("*");

            // Add CallBack and call JavaScript-Function.
            if (ExternalInterface.available) {
                ExternalInterface.addCallback("sendToActionScript", receivedFromJavaScript);
                ExternalInterface.call("sendToJavaScript", "some text");
            }
        }
        private function receivedFromJavaScript(value:String):void {
            //received output
        }
    }
}

A matching JavaScript could look like this:

     function sendToActionScript(value) {
         document.getElementById('id_of_embed_element').sendToActionScript(value);
     }
     function sendToJavaScript(value) {
         console.log("received " + value);
     }

You can read more about Flash's ExternalInterface at http://livedocs.adobe.com/flash/9.0_de/ActionScriptLangRefV3/flash/external/ExternalInterface.html

The Standard Window Mode of the Flash is "opaque". While you can change the Window Mode with the opt_params parameter, you should not change this to "window" because this would mean that your flash movie overlaps all "popup" dialogs that may be rendered on the container side.


  • Lesson 15: Embed Flash and interact with the OpenSocial API