You are not logged in.   Log in | Register

Flash (ActionScript2)

From $1

The following document provides the basic knowledge needed for integrating Wildfire in your Flash (ActionScript2) 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 ActionScript2 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 Example

Run the Example:

 

The Example Code:

// Step 1 - Import required libraries: 
import flash.Security;

class Main
{
    public static function main():Void
    {
       
        //--- The following code configures and loads Wildfire ---

        // Step 2 - Set up security to allow your widget to interact with Wildfire
        System.security.allowDomain("cdn.gigya.com");
        System.security.allowInsecureDomain("cdn.gigya.com");

        // prevent creation of multiple instances of wildfire
        if (_root.Wildfire !=undefined ) {
            _root.Wildfire._visible=true;
            return;
        }

        // Step 3 - Create an empty movie clip to host the Wildfire UI
        var mcWF:MovieClip=_root.createEmptyMovieClip('Wildfire',_root.getNextHighestDepth());
        mcWF._lockroot=true;  //lock the root of the newly created movieclip

        // Step 4 - Position Wildfire in your Flash
        mcWF._x=15;
        mcWF._y=42;

        // Step 5 - Create a configuration object through which Wildfire will communicate with the host swf:
        mcWF['ModuleID']='PostModule1';        // passing the module id to wildfire
        var cfg=_root[mcWF['ModuleID']]={};     // initializing the configuration object

        // Step 6 - Setting the configuration parameters (based on your selections in the wizard):
        cfg['width']='200';
        cfg['height']='250';
        cfg['partner']='PARTNER-ID'; //Set your partner ID (will automatically be assigned by the wizard) 
        cfg['UIConfig']='<config><display showEmail="true" showBookmark="true" ></display></config>';

        // Step 7 - Set up the content to be posted
        cfg['defaultContent']= 'Hello from Gigya!!! (Post content)'; // <-- YOUR EMBED CODE GOES HERE

        // Step 8 - Set up an event handler for the onClose event, this is called when the Wildfire UI is closed.
        cfg['onClose']=function(eventObj){
            mcWF._visible = false;
            mcWF.INIT();
            //you can do additional cleanup here
        }

        // Step 9 - Load wildfire
        mcWF.loadMovie('http://cdn.gigya.com/WildFire/swf/wildfire.swf','get');
       
    }

}

 

Notes:
  1. To copy the example code, please click the "view plain" (link located above code) - This will open a popup window with the text version of the code, which you may copy.
  2. In order to make this code work in your environment, please make sure you have modified the value of the "PARTNER-ID" field in the code (line 36), to your own Gigya partner-ID. A Gigya partner-ID can be obtained from your Account Settings page on the Gigya website.

 

From Wizard to Code:

Step 3 in the Standard Setup Wizard provides generated code which you can copy and paste into your widget. This section demonstrates this process.

Here is a snapshot of Step 3 in the Standard Setup Wizard:

Wizard-GrabCode-AS2.gif 

The two pieces of code are highlighted in different colors to simplify this demonstration.

Now, we take the two pieces of code and wrap the most basic ActionScript2 code around them, as demonstrated below.

The following code is identical to the code in the example above. In this case, however, the two pieces of code taken from the Wizard are highlighted using the same two colors:

HighlightedCode-AS2.gif

 

The following section delves a bit deeper, explaining each part of the code in details.

 

Explanation of code:

In our simple example, the wrapping ActionScript2 code basically defines a "Main" class and a main() method.

We have pasted the second piece of code generated by the Wizard (lines 9- 50) 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 9 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 (line 2):

Wildfire requires that you import some ActionScript libraries. The following line 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.Security;

Step 2 - Setting up Security to allow your Widget to Interact with Wildfire (lines 12-13):

The following lines must be executed before you load Wildfire:

System.security.allowDomain("cdn.gigya.com");
System.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=_root.createEmptyMovieClip('Wildfire',_root.getNextHighestDepth());

You may need to adjust the creation method depending on the environment you use. For example, if you are using V2 components you will have to use:

var mcWF:MovieClip = _root.createChildAtDepth("EmptyMovieClip", DepthManager.kTop);
mcWF._name='Wildfire';

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.

mcWF['ModuleID']='PostModule1';        // passing the module id to wildfire
var cfg=_root[mcWF['ModuleID']]={};     // initializing 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 - Setting 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.
You can also find your partner ID in the Account Settings section in the Gigya's web site.

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 - Setting up an Event Handler (lines 43-47):

This is not an obligatory step. See Wildfire Events reference, to learn more about the events that Wildfire generates.

Step 9 - Loading Wildfire (line 50)

Include the Wildfire in your widget by calling loadMovie on the container movie clip you have created on the previous steps.

mcWF.loadMovie('http://cdn.gigya.com/WildFire/swf/wildfire.swf','get');

 

 

 Note - the Blue Italian text highlight the parts of code that you should add.

 

 

Back to 'Quick Start'

Tags:
Files (0)