Adform Creative Toolkit

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

This tool will help creative agencies deliver campaign banners fully compliant with adform specs and on time.

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

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

  • Standard
  • Floating
  • Expanding
  • Tear Back (peel away)
  • Polite
  • Video
  • Video Cube
  • Synchronized
  • Dynamic content
  • Product ads
  • Widget banners (with possibility to share banner on social networks)

Installation

To install Adform Flash Extension “Adform Creative Toolkit” you need to follow these instructions:

  • You must have Adobe Extension Manager installed on your computer. It can be downloaded from official Adobe site: http://www.adobe.com/exchange/em_download.
     
  • Download Adform Flash Extension “Adform Creative Toolkit”:

    For Windows: http://test.adform.com/adkit/Adform_WIN.mxp
    For MAC: http://test.adform.com/adkit/Adform_MAC.mxp
     
  • Launch Flash, in the top menu select Help --> Manage Extensions. Then Adobe Extension Manager is opened. Close Flash and in Extension Manager select to install downloaded mxp file (File --> Install Extension).
     
  • Close Extension Manager and relaunch Flash, start a new document and then in the top menu select Window --> Other Panels --> Adform. If the installation was successful you should see a panel (image below):

What's new in this version

Version: 2.0.134877:

  • IAB Slider format support
  • Vertical products scrolling support in Personalized Targeting banners
  • Various bug fixes

Creating Products Ads

Adform has released a special solution for banners with dynamic content: Product Ads. Such type ads are very useful for campaigns running 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 for Product Ads setup:
 

1. Implementation of tracking on client's site.

2. Client's product feed synchronization with 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 Adform’s template, variables for Product Ads banner can be provided and banner can be tested locally. Variables allow seeing product information in 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. Banner creation:
 
Follow these steps to create your banner:
 

1) Create new Standard banner.
2) Drag the Adform XML_Manager component to the stage.
3) Drag the „Products“ component  (product holder) from „Adform Product Components“ folder to the stage.
4) Increase/decrease size of this component. The products will be placed in exactly the same area the component „product“ occupies.
5) Drag component „productItem“ to the stage. By default this component contains two dynamic textfields „product_price“, „product_name“ and movieClip „product_image“. You will be able to change the content of these objects through Adform system.
6) Drag „productsNextButton“ and „productsPreviousButton“ components to the stage if it‘s needed (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 value is more than 0, products auto scroll will be enabled. Products next action will be performed after amount of time in seconds according this value.
Products Padding - integer, -1 by default. If value is equal to -1, spaces between product items will be calculated automatically according products holder size. Or you can define your own space in pixels.
Products to Show - Integer, 1 by default. How many product items to put into a product Holder.
Scroll Step - Integer, 0 by default. 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 we set for component „product“ above) may have such look.

Note: Currently it‘s not available to test Product Ads through Adform Creative Toolkit. It can be tested only in Adform system.

First steps

The first time you open the panel it will ask you to choose between opening an existing project, creating a new one or creating from template (image below):

Creating Standard ad

1. When creating a standard banner you will first be asked to define some general settings (image below):

  • 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 assign clickTAG to this button. More about this option in section „Managing and Assigning actions“
  • Select backup image (optional)

Note: currently it‘s not availabe to use special characters (ø,æ, å, etc) in project names.

2. The second tab "Settings" asks for banner specific information:

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

3. Click button "Create".

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 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 – 6334 bytes;

ActionScript3:

SingleExpanding – 5452 bytes;

Managing and assigning actions

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

When creating banner, the first dialog allows you to select option „Default clicktag“ and set landing page. If it‘s chosen Adform Creative Toolkit inserts button with instance name „defaultClicktagBtn“ and assigns clickTAG action to it. Later you can edit the landing page in section „Details“.

Click is only one type of interaction with the banner, but there are also various mouse gestures, that in a specific context might be meaningful and important to track. In order to track other than clickthrough actions banner events should be implemented. The following example will help to understand how it works.

Let’s say you are going to create a banner with a clickable button and it will have your clickTAG and a mouse over banner event:

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

2. In the top menu of “Adform Creative Toolkit” panel select Content --> Manage Actions.

3. In new window press “Create New ClickTAG” button.

4. Fill all needed information about clickTAG and click “Submit” button:

5. Now in ClickTAGs list you can see your clickTAG. Also here you can Edit, Remove or Create new clickTAGs:

6. In order to create a banner event, follow similar steps to clickTAG creation:

  • Click the Create New Event button:

  • Fill in the event name (picture below)

  • Choose the Events radio button to see the new event and any others (with options to edit or remove – picture below)

7. After a clickTAG or event is created you have to assign them the button with an instance name: in top menu of “Adform Creative Toolkit” panel select Content --> Assign Actions.

8. In the window “Assign Actions”, choose action type „clickTAG“ and assign “Test clickTAG” to the object with instance name “TestButton”. For events - choose action type Events and assign the banner event:

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

9. After you click button “Save” the main window of “Adform Creative Toolkit” shows the list of assigned actions:

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

After clicking button “Preview”, new page is opened in your default browser. Preview page displays the ad you are currently creating. This page also has special top menu:

There must be at least one clickTAG action assigned if you want to export/upload the current banner. In other cases the Export button is inactive.

It is strongly recommended to check the option „Show IAB checklist when exporting“ in the main toolkit window.  When exporting the banner toolkit will display check-list with the IAB guidelines:

When the "Continue exporting" button is clicked, Adform Creative Toolkit generates a ZIP file and places it in your project folder. This ZIP file contains all required files and it should be uploaded to Adform system.

Direct Upload

To upload the ad directly to the Creative Agency Workplace, simply select Project > Upload from the top menu or click the Export/Upload button as shown below:

You will be redirected to the Creative Agency Workplace webpage, where you will be prompted to assign the creative to a corresponding campaign and task: