Sizmek Formats. Swell. Build Guide

Sizmek Formats

Table Of Contents

Overview ... 4

Supported Platforms ... 4

Specifications ... 4

Known Issues ... 4

Ad Behavior Screenshots ... 5

Before you Begin ... 6

Template Included Files ... 6

Setting up in Workshop ... 7

To set up the Expandable in Sizmek Workshop: ... 7

Configuring in Flash ... 8 Banner ... 8 Panel(main.fla) ... 8

Important notes ... 9

Format API ... 9

Setting up in Platform ... 11

Custom Variables ... 11

Custom Variables Definitions ... 12

Overview

The Swell allows expansion in any direction, including different amounts in each direction, without the requirement of a second panel. Content (video, animations, and dynamic visuals) can continue playing seamlessly across the default and expanded states as well as during retraction and expansion animation. Intro animation will play if Ad is set to auto expansion, Intro animation once completes will resolve to 300x600 Banner.

Once user roll over the Ad, It will expand to 550x700. Expansion animation will play and after animation is complete actual content will be visible.

Once user roll out the Ad, Collapse animation will play and expanded panel will resolve in 300x600 banner.

Currently support only new Client delivery (javascript).

Supported Platforms

Platform Supported Browser Version Windows

XP/7/8/Surface

Internet Explorer 7+, Firefox, Chrome, Safari

Mac OSX 10.8 & 10.9 Firefox, Chrome, Safari

Specifications

 Version 1.0

 Supports ActionScript 3.0

 Expandable format

 Supports Flash Player 10 and above

 Supports New Client only

Known Issues

Ad Behavior Screenshots

Before you Begin

Make sure you have the following resources available:

 Sizmek MDX Workshop.

 The Swell template.

Notes:

 This format is compatible with ActionScript 3.0 and Flash Player 10 and above.

 Previews and QA should be done at the tag-level for the most accurate results.

 The banner asset is only a placeholder.

 Template doesn’t support Old client, Local preview will not work for same reason.

 Video will always play in mute state.

Template Included Files

Filename Description

main.fla The FLA template for the panel.

backup_image.jpg 300 x 600. Example default image used in template. Swell.as Do not modify. The ActionScript code with core

functionality.

SizzleReel_480x270.flv Sample video used in template.

Setting up in Workshop

To set up the Expandable in Sizmek Workshop:

 In your file browser, browse to and run the Swell MXP/ZXP (swell.mxp or swell.zxp), and then follow the prompts in the Adobe Extension Manager to install the extension. You can skip this step if you have already installed the MXP.

 In the Sizmek Workshop™ for Flash, select New from template.

 For AS Version, select ActionScript 3.

Configuring in Flash

The Swell uses the banner banner.fla as a placeholder.

Banner

The Banner asset, banner.fla, must not be edited. It is used just a placeholder. Panel will act as banner and panel.

Panel

(main.fla)

The default panel contains content for the both the collapsed and expanded states of the ad and handles all user-initiated expansion functionality.

1. Open main.fla.

2. Familiarize yourself with the template. The main timeline contains the following layers:

 Actions: Contains ActionScript for the ad.

 The ad is initiated on frame 1 by the EBBase.Init(this); call.

Do not modify anything in this frame.

 Frame 2 contains:

 Logic for event handling video end.

 Assets:

 Assets layer contains content_mc and holds main assets of template. Expansion and collapsing logic of the Ad Is written in Swell.as. Flash contains listeners functions that get called upon specific Ad events, such as expansion and collapse of the Swell. For more information, see the API below.

 Double click on content_mc to edit the assets.

content_mc Contains the following layers:

 Actions: used for identifying the various states of the auto-initiated content and logic for handling expansion and collapse

 Video: Contains video component.

 Animation: Intro animation, expansion animation and collapse animation.

 Content: Ad content.

 Ad Click-through: Invisible click through button.

 Background: Background assets of Ad. Contains the following frame labels:

 Intro: The state of the ad during auto-expansion, Intro animation will play

 IntroComplete: The state of the ad during auto-expansion Intro animation is played.

 Content: Retract/collapsed view of Ad.

 ExpandStart: The state of the ad when the expand Animation started.

3. Publish the FLA.

Important notes

 This format is compatible with ActionScript 3.0 and Flash Player 10 and above.

 This format requires Adobe Flash CS5 and above.

Format API

The API is defined in Swell.as and used to abstract some of the ad’s lower level logic, exposing the core functionality you might use when building the format.

Static Methods

Swell.getInstance()

It gives single instance of Swell EB(Expandable Banner) class.

Functions

getInstance():Swell

Returns a single instance of the Swell class to avoid creating multiple instances with inconsistent runtime values. For more information regarding this technique you can research the Singleton design pattern.

addJSEventListener(eventType:String, callback:Function, interAd:Boolean = false):String

Registers an event listener object with a JSEventDispatcher object so that the listener receives notification of an event.

Parameters

eventType:String:- The type of event

callback:Function:- The listener function that processes the event.

interAd: Boolean:- The listener function for Inter ad so listener can listen Inter ads event too.

eventType :String The type of event params:Object: Custom object

clipAsset(x:Number, y:Number, width:Number, height:Number, trackAs:String = undefined, target = undefined) Resizes the panel to custom dimensions.

Parameters

x:Number – x-coordinate of the panel (left boundary as reference point). y:Number – y-coordinate of the panel (top boundary as reference point). width:Number – width of the panel.

height:Number – height of the panel.

trackAs:String - clipping can be track as collapse/ expand tracking. If don't want to track use undefined. target:String – Name of the panel which user needs to clip.

enableRolloverRolloff(value:Boolean):void

Enable/Disable Mouse move listener on Ad.

value:- True/False to enable/disable mouse roll off listener on Ad.

changeZIndex(zIndex, panelName=undefined)

Assigns a z-index value to a panel or eyediv.

If panelName is undefined z-index will apply on eyeDiv.

Parameters

panelName:String – Name of the panel to be edited. zIndex:Number – z-index value.

Events

* All Event callbacks should accept an event parameter typed as an Object. Ex: function handleEvent(event:Object):void

* The event object passed to the callback will always contain an event type. Ex: trace(event.type) //expandComplete

Swell.INTRO_COMPLETE

Dispatched when the Ad completes playing intro animation if auto expansion is enabled.

Swell.EXPAND_START

Dispatched when user rollover the Ad to start expand animation.

Swell.EXPAND_COMPLETE

Dispatched when expand animation is complete.

Swell.COLLAPSE_START

Dispatched when the collapse animation starts.

Swell.COLLAPSE_COMPLETE

Dispatched from javascript whenever user roll off the Ad unit.

Swell.CLICKTHROUGH

Dispatched from javascript when a click through is launched

Setting up in Platform

The custom script should already be attached to the ad when it is uploaded from the MXP. You can confirm this by doing the following.

1. In Sizmek MDX, go to the Setup tab.

2. Select the Advanced Features section, and expand the Custom JS area.

3. Copy and paste this code to the Trigger JavaScript on Scripts Pre-load text field:

New Client Delivery :

http://ds.serving-sys.com/BurstingRes/CustomScripts/PL_MSN_Swell_NewClient.js

 3a. Make sure the “Use new client mechanism” checkbox is selected. 4. Click Save.

Custom Variables

Custom Variables for the Swell can be configured using either the Sizmek Workshop or Sizmek MDX once your ad is created.

Configuring in Workshop

 In the Sizmek Workshop, go to the Settings tab.

 Next select the Variables menu.

 Click the Add Variable button to enter the appropriate values or double click an existing variable to edit it.

 When are done click the Save button.

Custom Variables Definitions

Name:Type Default Value Description Accepted

Values

mdLeftOffset:Number 50 x-coordinate (or position of the left boundary) of the unexpanded panel within the expanded panel.

Any Number

mdTopOffset:Number _{40 y-coordinate (or position of the top} boundary) of the unexpanded panel within the expanded panel.

Any Number

mdAutoRepositionInterval:Num

ber 0 Repositions the panel every N _{(‘mdAutoRepositionInterval)} milliseconds. if

mdAutoRepositionInterval is 0. It disable repositioning.

>=0

mdEyeDivZIndex:Number _{4 Ad's z-index. >=0}

mdShouldAutoExpand:Boolean N/A READ-ONLY It gives true if ad is auto

expanded. gives false if ad user expanded.

True/false

mdRollOffDelay:Integer 0 (default = 0) Panel will collapse after delay if mdRollOffDelay is greater than 0.

>=0

Tracking

Click_Expand1

sent EVERY TIME the user clicks the expanded panel

Click_Video

sent EVERY TIME the user clicks the video.

Click_Main

sent EVERY TIME the user clicks the collapse state of Ad.

Pri_Main_Rollover_Expand

Exp_Main_Rolloff_CloseExp

sent EVERY TIME the user rollsoff the Ad after ad is expanded completely.

Pri_Main_Rolloff_CloseExp

sent EVERY TIME the user rollsoff the Ad before ad is expanded completely.

Change Log

 April 24, 2014

o Rebrand assets to Sizmek

Notice

The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice.

Copyright © 2014 Sizmek. All rights reserved.

Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries.