Follow

The Flash Components Library (FCL), which is installed when you install the Ad Builder for Flash, is a library of Flash components for creating Flash ads. Using the FCL, you can add rich, complex capabilities to your Flash ads quickly and easily.

Download the latest Ad Builder for Flash, to make sure that you have the latest versions of all the components. After installing the extension, the components are available for Flash in the Components list, within the Sizmek sub-menu.

The Sizmek FCL components are grouped into the following two folders:

  • Sizmek Components: Enable you to include advanced features in your ads, such as data capture, snyc ads, etc.
  • Sizmek Video Components: Enable you to add cool features to your videos, including control buttons, interactions tracking, etc.

Sizmek Components

The CreativeState component allows your Flash movie to behave differently each time a user views it based on previous interactions with the user. The component works by storing information about the user as a shared object on the user’s computer. It is used for creating behavioral and advanced behavioral ads. Click on Behavioral Ads or Advanced Behavioral Ads below to learn more about the features and for information about integration with the Flash assets.

For more information on the CreativeState API see CreativeState API Information AS2 or CreativeState API Information AS3

The CreativeState component adds extra weight to your ad. It adds 2.14 KB for AS2 and 7.98 KB for AS3.

Behavioral Ads

Behavioral Ads let you create ads that behave differently each time a user views them based on previous interaction by the user (state). This feature works by storing information about the user within a Flash shared object on the user’s computer.

The following examples offer illustrations as to how you can use this feature:

  • Display different items of a series each time the user views the ad. For instance, you can show one type of car to the user the first time they view the ad and a different car the next time.
  • Display a "continuation" of the ad from the last time the user viewed the ad. For example, the user plays a game and reaches a certain level. The next time the ad appears, the game continues from the last level the user reached.
  • Display different options or banners based on user preference. For instance, the first ad presented to the user in a campaign may offer a choice, such as ice cream flavor. Based on the selected choice, the remaining ads presented to the user could reflect that choice.
  • Display different offers depending on previous behavior. For instance, display a discount for an item if the user interacted with the ad the previous time but did not click through.

The ad can be set to store the information to be available to only that ad or to any ad within the entire campaign.

You implement Behavioral Ads using the CreativeState component. For information on this component, refer to the CreativeState section.

Perform the following steps to incorporate the CreativeState component in your Flash document:
  1. Install the most updated Ad Builder for Flash from the Sizmek homepage. (Must be run on Flash MX 2004 or above.).
  2. Open a new Flash document.
  3. Perform the following.
  4. Add the following line to the first frame of the main timeline:

    Note: Adding the EB.Init adds 3.47 KB and adding the EB.Std.Init adds 0.619 KB.
    AS2

EBBase.Init();

          For Standard Banners only

EBStd.Init();

          Note: Adding the EB.Init(this) adds 5.90 KB and adding the EB.Std(this) adds 1.06 KB.

          AS3

EBBase.Init(this);

         For Standard Banners only

EBStd.Init(this);

  1. Add a new layer under the actions layer, and label it components.
  2. Insert a keyframe in frame 2 of the components layer.
  3. Select the second frame on the component layer.
  4. Select the Components tab on the Adobe Flash Editor.
  5. Drag and drop the component.
This component allows the ad to capture user input to be stored on the Sizmek servers. It also allows you to retrieve an aggregation of stored data from the Sizmek servers for real time display back to the user right within the ad.

The DataCapture allows your Flash movie to capture user input to store on the Sizmek servers. It also allows you to retrieve an aggregation of stored data from the Sizmek servers for use in your Flash movie.

For more information on the DataCapture API, see DataCapture API information AS2 or DataCapture API information AS3

Note: The DataCapture component adds extra weight to your ad. It adds 2.4 KB for AS2 and 8.33 KB for AS3.

To send captured data from your Flash movie:

  1. Leave the first frame of your Flash program blank except for the following commands:
    Note: Adding the EB.Init adds 3.47 KB and adding the EB.Std.Init adds 0.619 KB.
  • AS2

EBBase.Init();

  • For Standard Banners only

EBStd.Init();

          Note: Adding the EB.Init(this) adds 5.90 KB and adding the EB.Std(this) adds 1.06 KB.

  • AS3

EBBase.Init(this);

  • Standard Banners only

EBStd.Init(this);

      Note: The first frame may reside outside of the root layer of the Flash program.

  1. Drag and drop the DataCapture component onto the stage.
  2. Name all of the fields in your Flash form to correspond to the fields defined in the Sizmek platform. Refer to the Data Capture and User Polling sections in Sizmek’s online help for information on how to define the form in the Sizmek platform.

To Create a Data Capture Form:

  1. Install the most updated Ad Builder for Flash from the Sizmek platform homepage.
  2. Open a new Flash document.
  3. Label the first layer actions.
  4. In the first frame of the layer actions, add the following:
    Note: Adding the EB.Init adds 3.47 KB and adding the EB.Std.Init adds 0.619 KB.

EBBase.Init();

  • For Standard Banners only

EBStd.Init();

Note: Adding the EB.Init(this) adds 5.90 KB and adding the EB.Std(this) adds 1.06 KB.

  • AS3
  • EBBase.Init(this);

For Standard Banners only

EBStd.Init(this);

  1. Add a new layer under the actions layer, and label it components.
  2. Insert a keyframe in frame 2 of the components layer.
  3. Drag and drop the DataCapture component from the Sizmek components tab onto the Flash stage. (Make sure it is in the second frame of the components layer).
  4. In the Properties tab, enter an instance name for the component, (i.e. myDC).
  5. Add a new layer under the components layer and label it form.
  6. Insert a keyframe in frame 3 of the form layer.
  7. Select the third frame on the form layer.
  8. Create form fields using any combination of input text boxes, radio buttons, combo boxes, etc. For further details, see Setting up Data Capture Form Fields.
  9. Select the DataCapture component on the stage.
  10. Open the Component Inspector.
  11. From the emailFormat drop-down list in the Component Inspector, select if you want the email format to be text or HTML. The default option is HTML.
  12. In the formName field in the Component Inspector, enter the form name.
    Note: The formName must be entered in the same way it is defined for the campaign in the platform. If there is a discrepancy in the name, an error appears in the output window.
  13. From the securedProtocol drop-down list:
    Select true to use https protocol
    Select false to use http protocol
  14. Insert dynamic fields using the formFields property in the following way: (Where fieldName is the name of the dynamic field.)

.formFields.fieldName = Value;

  • If you want to include an email address - insert the email address as a field in the form in the following way:

    .formFields.emailAddress = Value;

  • Submit the parameter’s form to Sizmek’s server using the following command:

    .saveForm();

To create a Data Capture Form for User Polling:

  1. Install the most updated Ad Builder for Flash from the Sizmek platform homepage.
  2. Open a new Flash document.
  3. Label the first layer actions.
  4. In the first frame of layer actions, add the following:
    All ad formats except for Standard Banner:
    Note: Adding the EB.Init adds extra weight to your ad. It adds 3.47 KB for AS2 and 5.90 KB for AS3.
  • ActionScript 2.0:

EBBase.Init();

  • ActionScript 3.0:

EBBase.Init(this);

  • For Standard Banners only:
    Note: Adding the EB.Std adds extra weight to your ad. It adds 0.619 KB for AS2 and 1.06 KB for AS3.
  • ActionScript 2.0:

EBStd.Init();

  • ActionScript 3.0:

EBStd.Init(this);

  1. Add a new layer under the actions layer, and label it components.
  2. Insert a keyframe in frame 2 of the components layer.
  3. From the Sizmek Components menu, drag and drop the DataCapture component onto the stage in the second frame of the components layer.
  4. Select the third frame on the form layer.
  5. Create form fields using any combination of input text boxes, radio buttons, combo boxes, etc. Make sure the field names match the ones entered into the Sizmek platform. For further details, see Setting up Data Capture Form Fields.
  6. Select the DataCapture component on the stage.
  7. Open the Component Inspector.
  8. From the emailFormat drop-down list,select if you want the email format to be text orHTML.
  9. In the formName field,enter the desired form name.
    Note: The formName must be entered in the same way it is defined for the campaign in the platform. If there is a discrepancy in the name, an error will appear in the output window.
  10. From the securedProtocol drop-down list, select true or false.
    Note: If you are working on HTTPS you must select true.
  11. Insert dynamic fields using the formFields property in the following way: (Where fieldName is the name of the dynamic field.)

.formFields.fieldName = Value;

          If you want to include an email address - insert the email address as a field in the form in  

          the following way:

.formFields.emailAddress = Value;

  1. Submit the parameter’s form to Sizmek’s server using the following command:

.saveForm();

  1. To get the URL of the XML that contains the polling data:

var url = .getFormDistributionURL();

  1. Create a submit button.
  2. In the on(release) event for the submit button, add the submit button:

.saveForm();

  1. Enter code to check if the above line was successful. If the XML document cannot be found, a value of ““ is returned:

if ("" == url){

//code to handle the failure to get the XML document with the polling results

return;

}

  1. Create an XML object to hold the polling results:

var objXML = new XML();

The next line of code creates a call-back function called onXMLLoad that processes the XML object’s data during its onLoad event:

objXML.postStatusCB = onXMLLoad;

The next line of code tells the flash movie to ignore whitespace characters such as tabs, line breaks, and carriage returns:

objXML.ignoreWhite = true;

  1. Add the line that loads the XML document into the object created:

objXML.load(xmlURL);

  1. Click on the first frame of the actions layer.
  2. Below the two Sizmek include statements, create the call-back function onXMLLoad().

function onXMLLoad(fsuccess){

if(!fsuccess){

//code in case XML load was unsuccessful

return;

}

  1. Publish the file and upload it onto the Sizmek platform as a New Creative Asset.

The following code sample illustrates how to use the DataCapture class:

/**

Notes:

  • dcComp is the instance name of DataCapture component.
  • submitBtn is a button that by clicking on it the onSubmitButtonRelease method is triggered

In order for the information to be sent to and saved by Sizmek, the following needs to be done:

  1. Assign 'dcComp.formFields.fieldName' for each field you would like to capture the information for, to the value of the user information (for example, give it the value of the text field text). 
  2. When the ad is uploaded to the EB system, you can define a form using the same formFields names.
  3. Click on the DataCapture component and go to the Components Inspector. Define if the form is HTML or Text and give it a name.
  4. To send to a friend, use dcComp.formFields.emailAddress.

*/

//associate between the button to the method

submitBtn.onRelease = onSubmitButtonRelease;

function onSubmitButtonRelease()

{

//give the Sizmekcomponent the values from the text boxes (yourMessage.text and

//from.text are the values from the text boxes

dcComp.formFields.yourMessage = yourMessage.text;

dcComp.formFields.from = from.text;

// send an email to the user (email needs to be defined within the form in Sizmek MDX platform):

//formFields.emailAddress must be used; it is predefined in the component and is the only way to

//send

dcComp.formFields.emailAddress = to.text;

//send the information to Sizmek

dcComp.saveForm();

}

AS3

The following code sample illustrates how to use the DataCapture class:

/**

Notes:

dcComp is the instance name of DataCapture component.

submitBtn is a button that by clicking on it the onSubmitButtonRelease method is triggered

In order for the information to be sent to and saved by Sizmek, the following needs to be done:

  1. Assign 'dcComp.formFields.fieldName' for each field you would like to capture the information for, to the value of the user information (for example, give it the value of the text field text).
  2. When the ad is uploaded to the EB system, you can define a form using the same formFields names.
  3. Click on the DataCapture component and go to the Components Inspector. Define if the form is HTML or Text and give it a name.
  4. To send to a friend, use dcComp.formFields.emailAddress.

*/

//associate between the button to the method

submitBtn.addEventListener(MouseEvent.CLICK,onSubmitButtonRelease);

function onSubmitButtonRelease (e:MouseEvent)

{

//give the Sizmek component the values from the text boxes (yourMessage.text and

//from.text are the values from the text boxes

dcComp.formFields.yourMessage = yourMessage.text;

dcComp.formFields.from = from.text;

// send an email to the user (email needs to be defined within the form in Sizmek):

//formFields.emailAddress must be used; it is predefined in the component and is the only way to

//send

dcComp.formFields.emailAddress = to.text;

//send the information to Sizmek

dcComp.saveForm();

}

 

 

The DynamicContentManager component allows your Flash movie to access dynamic data on a remote server. Every time the user views the Flash movie, the data will be refreshed.

Note: The DynamicContentManager only works on browsers running on at least Flash 6.

The data used in the ad can be served from either one of two sources:

  • The advertiser’s server: The advertiser hosts the servers that feed data into the ad. In this case, the advertiser must use the following function:

    LoadDataFromExternalServer(URL,type,onData,shimURL)

  • Sizmek’s servers: The advertiser uploads the ad using Sizmek data directly to the Sizmek MDX platform, using the following function:

    LoadDataFromEBServer(contentName,type,onData)

For more information on the DynamicContentManager API, see DynamicContentManager API Information AS2 or DynamicContentManager API Information AS3

Note: The DynamicContentManager component adds extra weight to your ad. It adds 8.15 KB for AS2 and 8.15 KB for AS3.

Data Hosted Externally

  1. Install the most updated Ad Builder for Flash from the Sizmek homepage. (Must be run on Flash MX 2004 or above.)
  2. Open a new Flash document.
  3. Label the first layer actions.
  4. In the first frame of layer actions, add:
    Note: Adding the EB.Init adds 3.47 KB and adding the EB.Std.Init adds 0.619 KB.
  • AS2

EBBase.Init();

  • For Standard Banners only

EBStd.Init();

        Note: Adding the EB.Init(this) adds 5.90 KB and adding the EB.Std(this) adds 1.06 KB.

  • AS3

EBBase.Init(this);

        For Standard Banners only

EBStd.Init(this);

  1. Add a new layer under the actions layer, and label it components.
  2. Insert a keyframe in frame 2 of the components layer.
  3. Select the 2nd frame on the component layer.
  4. Select the Components tab on the Adobe Flash Editor.
  5. Select the DynamicContentManager component and drag it onto the stage.
  6. Use the following function to load the data:
    .LoadDataFromExternalServer(URL,type,onData,shiURL);
    If you are using Flash® 6, define the shimURL parameter. The shim file should be located in the advertiser’s server at the same domain as the data file.
    If you are using Flash® 7 or above, place the crossDomain.xml (cross-domain policy file) at the server’s root level

The SingleExpandable component defines the collapsed and expanded states of the ad, allows you to set-up expansion animation effects, duration, and gain full control of the collapse and expand events. The SingleExpandable ad format can be used to replace the old Expandable Banner format, leveraging its new features while preserving simplicity of development and the lowest file size.

Note: The SingleExpandable component adds extra weight to your ad. It adds 8.51 KB for AS2 and 11.39 KB for AS3.

Best Practices

  • The SingleExpandable component must be placed on the second frame of the movie.
  • You can only use one instance of the component in a single ad.
  • The SingleExpandable component must reside on the stage's root level and not within movie clips.

(For AS3 only) The component reserves the 0 index child of the root display for its own usage, meaning if you try to place anything in its location you will not be able to access it.

To set up the SingleExpandable parameters:
    1. From the Sizmek components list, drag and drop the SingleExpandable component onto the stage.
      Note: The SingleExpandable component has to be located in the mainTimeLine.
    2. Select the component.
    3. Open the Component Inspector.
    4. Expand the Expand Settings area.
      Expansion event drop-down list define what happens when the component expands:
    • onRollover: The ad automatically expands when the user rolls over the banner area with their mouse.
    • onExpandPanel()call: The ad expands only upon a call to the EB.ExpandPanel() call. For example, after clicking a "click to expand" button in the banner area.
    • onAdLoad: The ad automatically expands when the ad is loaded.
    • autoExpandRetract: Indicates whether the mask will be auto expanded/retracted upon mouse roll over/roll out.
  1. From the After Expansion drop-down list, define what happens after the ad expands:
  2. goto AndStop frame: Enter a frame number or label where the animation should go to and stop once ad expands.
  3. gotoAndPlay frame: Enter a frame number or label where the animation should go to and play once the ad expands.
    • call onExpand() function: Control what to do after the ad expands.
    • Do Nothing: Expand the component but nothing else. Use this for example, when you have no tweening animation.
  1. Select the Enable Component Expand Tweening checkbox, if you want the component to expand or snap open after tweening.
  2. In the Tween Time field, enter the number of seconds it should run then select the Easing option from the drop-down list.
  3. Expand the Collapse Settings area.
  4. From the Collapse event drop-down list define what happens when the component collapses:
    •  onRollout: The ad automatically collapses when the user rolls their mouse out of the ad area.
    • onCollapsePanel() call: The ad collapses only upon a call to the EB.CollapsePanel() call. For example, after clicking a "close panel" button in the panel area.
  5. From the After Expansion drop-down list, define what happens after the ad collapses:
    • goto AndStop frame: Enter a frame number or label where the animation should go to and stop once the ad collapses.
    • gotoAndPlay frame: Enter a frame number or label where the animation should go to and play once the ad collapses.
      Note: You need to call the SEComp.CollapsePanel method at the end of the animation otherwise the system does not know when the animation ended and when to collapse the ad.
      • call onCollapse() function: Control what to do after the ad collapses.
      • Do Nothing: Collapse the component but nothing else. Use this for example, when you have no tweening animation.
  6. Select the Enable Component Collapse Tweening checkbox, if you want the component to collapse or immediately close after tweening.
  7. In the Tween Time field, enter the number of seconds it should run then select the Easing option from the drop-down list.

To view the guide, click SingleExpandable API AS2.

to view the guide, click SingleExpandable API AS3.

 

The Sizmek Ad SyncAds Flash component is a communication layer that enables Sizmek ads being played on the same web page, to interact among themselves. The SyncAds component can also be used for banner/panel interaction in Expandable Banner Ads.

For more information on the SyncAds API, see SyncAds API Information AS2 or SyncAds API Information AS3

Note: The SyncAds component adds extra weight your ad. It adds4.7 KB for AS2 and 10.1 KB for AS3.

Perform the following steps to incorporate the SyncAds component in your Flash document:
  1. Make sure you are using the most updated Ad Builder for Flash.
  2. Open a new Flash document.
  3. Label a layer, actions, and add the following line to the first frame:
    Note: Adding the EB.Init adds 3.47 KB and adding the EB.Std.Init adds 0.619 KB.
  • AS2

EBBase.Init();

  • for Standard Banners only

EBStd.Init();

         Note: Adding the EB.Init(this) adds 5.90 KB and adding the EB.Std(this) adds 1.06 KB.

  • AS3

EBBase.Init(this);

  • For Standard Banners only

EBStd.Init(this);

  1. Add a new layer under the actions layer, and label it components.
  2. Insert a keyframe in frame 2 of the components layer.
  3. Select the second frame on the component layer.
  4. Select the Components tab on the Adobe Flash Editor.
  5. In the second frame of the "components" layer, drag and drop the SyncAds component from the Sizmek Components tab onto the Flash stage.
  6. Set the instance name for the component (For example, mySyncAds).
  7. Add a keyframe to the third frame of the actions layer.
  8. (Optional) Set the synchronization level using one of the two lines of code below. The synchronization level determines whether this asset can communicate only with other assets of the same ad (a), or any synchronized ad within the campaign (b):

mySyncAds.setLevel("ad");

 

mySyncAds.setLevel("campaign");

  1. On the next line, enter the following command:

mySyncAds.openConnection(assetName);

where:

  • mySyncAds is the instance name set.
  • assetName is the unique name to reference the asset.

      This initiates the connection by opening the local connection this asset listens to     
      and registers itself in the JavaScript with assetName (the name by which the asset is    
      referred to).

  1. To close the local connection this asset is associated to, enter the following command:

mySyncAds.closeConnection();

where:

  • mySyncAds is the instance name set.
  1. To send events to other assets in the same synchronization level on the page, use:

mySyncAds.callConnection(detAssetName:String, functionName:String, Params:String);

where:

  • destAssetName is the name of the asset you want to communicate with.
  • functionName is the function name that resides in the destination asset.
  • Params is the parameter sent to this function.

In the following example, the sender asset uses the mySyncAds component instance to call the syncWithMe function on an asset named receiver. In this case, no parameters are sent to the syncWithMe function.

The following code should be written in the sender asset:

mySyncAds.callConnection(receiver, syncWithMe);

The receiver should implement the syncWithMe function on its _root level (it is possible to implement at another level, however, in this case, the call to this function from the sender must contain the full path from the _root to the function).

function syncWithMe()
{

//perform the desired action upon sync.

}

  1. To check whether a specific asset is on the page, use:

mySyncAds.findConnection(assetName:String, secDuration:Number);

where:

  • assetName is the name of the asset the component searches for.
  • secDuration is the number of seconds until the findConnection function is considered as failed if the searched asset was not found. The secDuration parameter is optional.

The indication whether this asset was found is given by one of the following events that need to be handled in the following way:

mySyncAds.onConnectionFound = functionName;

mySyncAds.onConnectionNotFound = functionName;

Where functionName should be:

function functionName(connectionName)
{

            ...

}

For a more detailed example refer to the Creative state Open Source FLA example on the Sizmek MDX platform.

  1. Publish the file and upload it to the Sizmek MDX platform.
 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments