|
 |
Flash (ActionScript3)From $1Table of contents
The following document provides the basic knowledge needed for integrating Wildfire in your Flash (ActionScript3) widget. We will start with a basic example of an empty flash widget that uses Wildfire - the Wildfire "Hello World". In the example, we used the code generated by the Standard Setup wizard, wrapped in with the most basic ActionScript3 code. The example is followed by code explanations that emphasize the parts in the code which you should modify once you place this code in your application. New! - Use Adobe Flash extensions to quickly integrate Wildfire into your Flash widgets. Click here to get the extension for free. Basic Working ExampleRun the Example:
The Example Code:package
{
// Step 1 - Import required libraries:
import flash.system.Security;
import flash.external.*;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.display.MovieClip;
public class Main extends flash.display.Sprite
{
public function Main():void
{
//--- The following code configures and loads Wildfire ---
// Step 2 - Set up security to allow your widget to interact with Wildfire
Security.allowDomain("cdn.gigya.com");
Security.allowInsecureDomain("cdn.gigya.com");
// Step 3 - This code creates an empty movie clip to host the Wildfire interface
var mcWF:MovieClip = new MovieClip();
addChild(mcWF).name='mcWF';
// Step 4 - Position Wildfire in your Flash
mcWF.x=15;
mcWF.y=42;
// Step 5 - This code creates a configuration object through which Wildfire will communicate with the host swf
var ModuleID:String='PostModule1'; // pass the module id to Wildfire
var cfg:Object = { }; // initialize the configuration object
// Step 6 - This code assigns the configurations you set in our site to the Wildfire configuration object
cfg['width']=200;
cfg['height']=250;
cfg['partner']='PARTNER-ID'; //Your partner ID will automatically be assigned by the wizard
cfg['UIConfig']= '<config><display showEmail="true" showBookmark="true" /></body></config>';
// Step 7 - Set up the content to be posted
cfg['defaultContent']= ''; // <-- YOUR EMBED CODE GOES HERE
// Step 8 - This code calls up Wildfire
var ldr:Loader = new Loader();
var url:String = 'http://cdn.gigya.com/Wildfire/swf/WildfireInAS3.swf?ModuleID=' + ModuleID;
var urlReq:URLRequest = new URLRequest(url);
mcWF[ModuleID] = cfg;
ldr.load(urlReq);
mcWF.addChild(ldr);
}
}
}
Notes:
Explanation of the code:In our simple example, the wrapping ActionScript3 code basically defines a "Main" class and a main() method. We have pasted the second piece of code generated by the Wizard (lines 15- 48) into the main() method. This code initializes and displays Wildfire. The best way to use it is to wrap it inside a method and call it based on user interaction that should trigger the display of the Wildfire UI.
The following is an explanation of the eight steps taken in the code above, giving a deeper understanding of the content of the code generated by the wizard. Note - full comprehension of this section is required only for advanced integration scenarios, or if you wish to perform manual tweaks. Step 1 - Importing Required Libraries (lines 4-8):Wildfire requires that you import some ActionScript libraries. The following lines of code (the first piece of code generated by the Wizard), should be placed inside your main timeline or before your class declaration. import flash.system.Security; import flash.external.*; import flash.display.Loader; import flash.net.URLRequest; import flash.display.MovieClip; Step 2 - Setting up Security to allow your Widget to Interact with Wildfire (lines 18-19):These lines must be executed before you load Wildfire: Security.allowDomain("cdn.gigya.com");
Security.allowInsecureDomain("cdn.gigya.com");
The purpose: Because your widget loads from a different domain than that of Wildfire you have to explicitly allow the two to interact. Step 3 - Creating a Container to Host the Wildfire UI (lines 22-23):Wildfire requires the hosting widget to provide a uniquely identified container where the Wildfire UI will be drawn. For this purpose, we create an empty movie clip to hold the Wildfire UI: var mcWF:MovieClip = new MovieClip(); addChild(mcWF).name='mcWF'; Step 4 - Positioning the new Movie Clip (lines 26-27):To make sure the UI appears exactly where you want it to appear within your widget, position the host container. mcWF._x=15; mcWF._y=42; Step 5 - Creating a Configuration Object (lines 30-31):Create an empty configuration object from which Wildfire will read its configuration. var ModuleID:String='PostModule1';// pass the module id to Wildfire
var cfg:Object = { };// initialize the configuration object
When Wildfire loads, it expects to find a "ModuleID" parameter, the value of this parameter is used to get to a configuration object in the hosting swf. Actual configuration of the Wildfire is done by assigning values to different attributes of this configuration object. Step 6 - Set the Configuration Parameters and UI Design (lines 34-37):The values of these parameters are based on your selections in the wizard. You may manually change the values of these parameters and many more parameters which Wildfire supports. Please refer to the Configuration Parameters page, for a full reference guide to the various parameters supported by Wildfire. In our example, we set the following parameter: Setting the size of Wilfire:cfg['width']='200'; cfg['height']='250'; Setting your Partner ID:If you use one of the Wizards to generate your code, your partner ID is automatically injected to the generated code by the wizard. cfg['partner']='000'; //Set your partner ID (will automatically be assigned by the wizard) Setting the UI Configuration Parameters:The UIConfig parameter defines the UI design of Wildfire. It is assigned with an XML which is generated by the Wizard, according to your selected UI design. cfg['UIConfig']='<config><display showEmail="true" showBookmark="true" ></display></config>'; To learn how to customize the UI of Wildfire, please read the UI Configuration page in the Developer's Guide. Step 7 - Defining the Content of the Post (line 40):Place your content to post here! Depending on your widget you can choose to either set this as a literal string like in our simple example: cfg['defaultContent']= 'Hello from Gigya!!! (Post content)'; // <-- YOUR EMBED CODE GOES HERE If your widget can generate dynamic code based on user interaction (e.g. selecting a color) you can use a function instead of a string. Wildfire will call the function when it needs the content. cfg['defaultContent']= function() { return 'Hello from Gigya!!!'; }
Step 8 - Loading Wildfire (lines 43-38):The following code loads Wildfire using the movie clip ("mcWF") that we created in step 3: var ldr:Loader = new Loader(); var url:String = 'http://cdn.gigya.com/Wildfire/swf/WildfireInAS3.swf?ModuleID=' + ModuleID; var urlReq:URLRequest = new URLRequest(url); mcWF[ModuleID] = cfg; ldr.load(urlReq); mcWF.addChild(ldr); Note that the parameter "ModuleID" is pointing to the configuration object "cfg" which we prepared in previous steps.
Note - the Blue Italian text highlight the parts of code that you should add.
Tags:
Files (0) |
||||
|