test.adform.com

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 and CS5 (v9 and v10) under Windows OS and for CS3 / CS4/ CS5 under 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)

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):

Version: 1.41.000 beta:

• Single file expanding banners
• Various bug fixes

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 .

1. Create new Standard banner.
2. Drag XML_Manager component to the stage.
3. Drag component „product“ (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 „product“ 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.

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):

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
• Select/deselect option „Default clicktag“ – if Default clicktag is selected, 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)
• Click button “Create”

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

2. The second dialog asks for banner specific information:

• Select wmode – available to choose transparent, opaque and window
• Select align – banner position in the page
• Click “Save” button to confirm settings.

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

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

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);
       }
}

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 didn‘t select „Default clicktag“ and are going to create banner with a clickable button and it will have one clickTAG and a mouse over banner event:

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

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

8. In window “Adform 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 banner in browser (by clicking button “Preview”) or create ZIP file which would be ready to upload to Adform system (click button “Export”). 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 the current banner. In other cases button Export is inactive.

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

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