Adform Creative Toolkit

Adform has compiled a tool for Flash which helps creative agencies to seamlessly build standard and advanced (expanding, floating, polite, tear back, video and video cube) banners according to Adform specifications.

This tool enables creative agencies delivering campaign banners fully compliant with Adform specs and on time.

Currently “Adform Creative Toolkit” is available for Flash versions CS4/ CS5 / CS5.5 / CS6 / CC under Windows OS and Mac OS.

With “Adform Creative Toolkit” you are able to create the following types of banners:

  • Standard;
  • Floating;
  • Expanding;
  • Polite;
  • Video;
  • Synchronized;
  • Dynamic content;
  • Product ad.

Installation

To install Adform Flash Extension “Adform Creative Toolkit”, follow these instructions:

What's new in this version

Version: 2.3.1020:

  • Single Expanding banner integrated to Synchronized banner solution.
  • Other improvements.

Creating Products Ads

Adform has released a special solution for banners with the dynamic content: Product Ads. Ads of such type are very useful for the campaigns which run banners with many different products. You simply need to make one banner with one product and through Adform system you can control what products (and how many) should be placed in the banner. Products Ad example can be found here .

Steps of the Product Ads setup:
 

1. The implementation of tracking on a client's site.

2. The synchronization of client's product feed with the Adform: 

Client's XML feed should be accessible through HTTP or FTP and have the following structure:
 
<products>
<product>
<product_name>Computer 123</product_name>
<product_id>123456</product_id>
...
<product_deeplink>http://client.com/products/computer123</product_deeplink>
<product_image>...</product_image>
</product>
<product>
<product_name>Computer 456</product_name>
<product_id>456789</product_id>
<product_category_id>computers</product_category_id>
...
<product_deeplink>http://client.com/products/computer456</product_deeplink>
<product_image>...</product_image>
<product>
...
<products>

Info: for further info please contact Adform technical support: technical@adform.com

3. Once client‘s feed has been synchronized with the Adform’s template, variables for Product Ads banner can be provided and the banner can be tested locally. Variables allow seeing product information in the compiled banner on your local machine. 
 
var bn = 1565579;
var cid = 4790; // aid value
var gid = 0;
var tid = 3825;
var domain = "http://track.adform.net/banners/";
var pgsz = 6;
var gcnt = 100;
 
4. The creation of a banner.
 
Follow these steps to create your banner:
 

1) Create a new Standard banner;
2) Drag the Adform XML_Manager component to the stage;
3) Drag the Products component  (product holder) from the Adform Product Components folder to the stage;
4) Increase/decrease the size of this component. The products will be placed in exactly the same area which the component "product" occupies;
5) Drag component „productItem“ to the stage. By default this component contains two dynamic textfields „product_price“, „product_name“, and a movieClip „product_image“. You will be able to change the content of these objects using the Adform system;
6) Drag „productsNextButton“ and „productsPreviousButton“ components to the stage if it is necessary (the products can be scrolled automatically);
7) The components should look like this:

8) Now select component „products“ and open Component Parameters;

Auto Scroll - number, 0 by default. When the value is more than 0, auto scroll of the products is enabled. Products' next action is performed after the amount of time in seconds according to this value.
Products Padding - integer, -1 by default. If the value is equal to -1, spaces between product items will be calculated automatically according the products' holder size. You are also able to define your own space in pixels.
Products to Show - Integer, 1 by default. This parameter shows how many product items to put into a product Holder.
Scroll Step - Integer, 0 by default. This parameter shows the amount of items to change on next/previous event.

Note: 0 or more than “Products To Show” value will be equal to “Products to Show” value.

9) You are able to change the visual look of „productItem“ component and buttons. The banner (with exactly the same settings set for component „product“ above) may have such look.

Note: Currently it is not possible to test Product Ads through Adform Creative Toolkit. It can be tested only in the Adform system.

First steps

When opening the panel for the first time, you are asked to:

a) open an existing project;

b) create a new project;

or c) create project using an existing template.

Creating Standard ad

When creating a new banner, you have to accomplish several steps.

1. Define the general settings in the "Details" tab:

  • Enter project and banner names;
  • Set project and banner locations;
  • Select ActionScript version;
  • Set banner dimensions;
  • Enter default clicktag (recomended). Adform Creative Toolkit automatically inserts button with instance name „defaultClicktagBtn“ on top of all banner content and assigns clickTAG to this button. Read more about this option: „Managing and Assigning actions“;
  • Select a backup image (optional).

Note: currently it‘s not possible to use special characters, such as ø,æ, å, etc., in project names.

2. Enter banner specific information in the "Settings" tab: 

  • Select Align – banner position in the page;
  • Select Wmode – available to choose transparent, opaque and window;
  • Select Landing page target – landing page can be opened in a new or the same window or frame.

3. Click the "Create" button.

4. New flash file is created and Adform Panel is displayed:

Now you are ready to create graphics, manage actions and etc.

Single File Expanding Component

Info

Adform Single File Expanding component ensures the proper performance of Adform Single File Expanding banners.

Examples

ActionScript2:

// Add event listener for expand start event SingleExpanding.addEventListener(SingleExpandingEvent.EXPAND_START, handleExpandStart);

function handleExpandStart():Void
{
       // Go to frame, where your expand content is located
       _root.gotoAndStop(2);
}

 // Add event listener for expand update event, which is fired during expand.

SingleExpanding.addEventListener(SingleExpandingEvent.EXPAND_UPDATE, handleExpandUpdate);
function handleExpandUpdate(e:Object):Void
{
// Current expand animation coordinates and size expressed in a number between 0 and 1.
// If you have custom animations you can synchronize them using this number.
var pos:Number = e.position;
// Example if you have MovieClip on stage named “ball”, which has frame animation inside it
       var t:Number = _root.ball._totalFrames;
       _root.ball.gotoAndStop(Math.round(t * pos));
}

// Add event listener for collapse update event, which is fired during collapse.
SingleExpanding.addEventListener(SingleExpandingEvent.COLLAPSE_UPDATE, handleCollapseUpdate);

function handleCollapseUpdate(e:Object):Void

{

       var pos:Number = e.position;
       var t:Number = _root.ball._totalFrames;

       _root.ball.gotoAndStop(Math.round(t * (1 - pos)));

       // When animation is complete go to first frame, where collapsed content is

       if (pos == 1)
       {
              _root.gotoAndStop(1);
       }
}


ActionScript3:

// Add event listener for expand start event
SingleExpanding.addEventListener(SingleExpandingEvent.EXPAND_START, handleExpandStart);
function handleExpandStart(e:SingleExpandingEvent):void
{
       // Go to frame, where your expand content is located
       this.gotoAndStop(2);
}

// Add event listener for expand update event, which is fired during expand.
SingleExpanding.addEventListener(SingleExpandingEvent.EXPAND_UPDATE, handleExpandUpdate);
function handleExpandUpdate(e:SingleExpandingEvent):void
{
       // Current expand animation coordinates and size expressed in a number between 0 and 1.
       // If you have custom animations you can synchronize them using this number.
       var pos:Number = e.position;

       var t:Number = ball.totalFrames;

       // Example if you have MovieClip on stage named “ball”, which has frame animation inside it
       ball.gotoAndStop(Math.round(t * pos));
}

// Add event listener for collapse update event, which is fired during collapse.
SingleExpanding.addEventListener(SingleExpandingEvent.COLLAPSE_UPDATE, handleCollapseUpdate);
function handleCollapseUpdate(e:SingleExpandingEvent):void
{
       var pos:Number = e.position;

       var t:Number = ball.totalFrames;

       ball.gotoAndStop(Math.round(t * (1 - pos)));

       // When animation is complete go to first frame, where collapsed content is
       if (pos == 1)
       {
              this.gotoAndStop(1);
       }
}

 

Weight

ActionScript2:

SingleExpanding – 5734 bytes;

ActionScript3:

SingleExpanding – 5452 bytes;

Creating Synchronized ad

Synchronized ad is a set of standard Flash banners which use the same main SWF and start an animation at the same time.

Note: currently synchronized ad can only consist of Standard or Single Expanding banners.

Important: only ActionScript 3 based ads are supported.

1. When creating new project select Synchronized as a banner type.

2. Set Synchronized ad dimensions - area where the synchronized panels (banners) will fit.

3.Click the Create button.

4. By clicking the Add Standard or Add Single Expanding button, Adform Toolkit adds the Standard or Single Expanding Panel Component to the stage. You are allowed to add up to 10 Panels.

5. In order to set a Panel as the main:

  • Click on the "Flag" icon (when the main panel is loaded it sends info to all other panels to start an animation);
  • Click the Refresh button after changing the main panel.

Note: Single Expanding banner with the "Floating" floating cannnot be the main panel.

By clicking on the "Pencil" icon, you can edit each of the Panels.

In order to remove a Panel, click on the "Trash bin" icon.

6. Editing Panels:

  • Standard Panel - new Standard banner project is opened. In order to get more info about Creating Standard ads, click here;
  • Single Expanding Panel - new Single Expanding banner project is opened. In order to get more info about Creating Standard ads, click here.

7. Each Panel has Adform Local Connection component on the stage, meaning that all Panels communicate with each other.

When a non-main panel is fully loaded it sends request to the main panel:

AdformLocalConnection.sendTo("Panel1", "targetReady");

When the main panel gets all "targetReady" from each of the panels, it sends info to all the Panels to start an animation:

AdformLocalConnection.sendToAll("startAnimation", animationStartTime);

All panels are loading Synchronized.swf, which ensures smooth animation in all panels:

	function loadAnimation():void {
    var url:String = AdformFlashVars.getFlashVar("animURL", "../Synchronized.swf");
    var request:URLRequest = new URLRequest(url);
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onAnimationLoad);
    loader.load(request);
}

8. In order to preview a banner, click the Preview button.

9. When Synchronized ad is created, click the Export button (in the Synchronized ad panel). Adform Creative Toolkit generates a ZIP file which is compatible with the Adform system and you can easily upload it into Adform.

Managing and assigning actions

In order for ad-serving systems to track clicks while displaying Flash banners, the Flash banners must be programmed to use clickTAG variables instead of the pre-defined URLs. Using Adform Creative Toolkit makes it easier to manage banner’s clickTAGs. All you need is to define clickTAGs you are going to use and assign them to specific objects.

When creating a banner, the first dialog allows you selecting a Default clicktag option and setting a landing page. If the default clicktag is selected, Adform Creative Toolkit inserts a button with the instance name „defaultClicktagBtn“ and assigns a clickTAG action to it. It is possible to edit the landing page in the Details section.

Click is the only type of an interaction with a banner, but there are also various mouse gestures that, in a specific context, are meaningful and important to track. In order to track other than the clickthrough actions, banner events should be implemented (see the example below).

Let’s say, you are going to create a banner with a clickable button and it will have a clickTAG and a Mouse Over Banner event:

1. Create a button symbol on the Flash API stage, and give it an instance name (e.g. defaultClickTagBtn);

2. In the Top Menu of  the Adform Creative Toolkit's panel select Content  Manage Actions;

3. In a new window press the Create New ClickTAG button;

4. Fill up all the required information about the clickTAG and press the Submit button;

5. Now you can see the clickTAG in the ClickTAGs' list. Using the Actions window you are also able to edit, remove or create new clickTAGs;

6. In order to create a banner event, execute the following steps to clickTAG creation:

  • Go to the Events tab and click the Create New Event button;

  • Fill in the event name;

  • Go to the Events tab in order to see the created events and be able to edit or remove them;

7. After a clickTAG or an event is created you have to assign them the button with an instance name: in Top Menu of Adform Creative Toolkit's panel select Content  Assign Actions.

8. In the Assign Actions window choose the action type „clickTAG“ and assign “Test clickTAG” to the object with the instance name “TestButton”; for events – choose the action type Event and assign an event;

Note: it is not allowed to assign both clickTAG and event to the same button.

9. After clicking the Save button, the main window of the Adform Creative Toolkit shows a list of the assigned actions;

10. By clicking the Preview button it’s possible to preview the banner in a browser. You are also able to create a ZIP file, which would be ready to upload to the Adform system, by clicking the Export button. When exporting the project, you can choose to use the zipped archive or separate individual files (swf, html).

Managing banner assets

Banners loading some assets (videos, images, xml, swf, mp3) are two types:

a) loading externaly from other servers

b) loading assets from Adform servers.

For both types you should add assets through Adform Creative Toolkit.

1. Follow to Content --> Assets

2. Browse for local asset or enter External asset's url:

3. If it's Video asset - follow to Video Banner specs

4. If it's other type - then you can get asset using such Action Script:

To get asset's URL a AdformAssetManager class should be used and getAsset(id, onSuccess[, onError]) function should be called with asset's id, a callback function which will get the URL and an optional function that will be called in case of an error.

	AdformAssetManager.getAsset(1, onSuccess, onError); //A call to the function with the asset id and two callbacks - on success and an optional on error encountered.

//onSuccess callback gets the url passed to it.

function onSuccess(url:String) {
   trace(url);
   var _loader:Loader = new Loader(); //loading asset
   mc_container.addChild(_loader);
   _loader.load(new URLRequest(url));
}
	//if something went wrong onError callback gets the error message passed to it.
function onError(error:Error) {
   trace(error);
}

5. Recommended priority order of assets:

a) SWF files
b) Video
c) Images
d) MP3
c) XML

6. Download test banner which loads all types of assets here.