Formats Swell Build Guide
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 Static Methods... 9 Functions... 9 Events... 10 Setting up in Platform... 11 Custom Variables... 11 Configuring in Workshop... 11 Configuring in Platform... 11 Custom Variables Definitions... 12 Tracking... 12 Change Log... 13 2
3
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 Windows XP/7/8/Surface Mac OSX 10.8 & 10.9 Supported Browser Version Internet Explorer 7+, Firefox, Chrome, Safari 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 Left Border not showing on WinXP/ie8, Win7/ie9, Win8/ie10. 4
Ad Behavior Screenshots Once the ad loads, the banner appears. The user can then expand the ad and launch the Panel by clicking the expand button. 5
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 baner.fla Description Do not modify. 300 x 600. The Banner. 6
main.fla backup_image.jpg Swell.as SizzleReel_480x270.flv The FLA template for the panel. 300 x 600. Example default image used in template. Do not modify. The ActionScript code with core functionality. 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. Expand the Sizmek Templates > Swell folder, and select template. Click Create. 7
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. ExpandComplete: The state of Ad when expand animation is complete and Ad is expanded. CollapseStart : state of Ad when Collapse animation start. CollapseComplete: The state of the ad when collapsing animation is completed. 8
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. Return It gives unique id for every listener function. unique id will use for removejseventlistener. removejseventlistener(callbackid:string):void Removes a listener from the JSEventDispatcher object. Parameter callbackid:- unique id given by addjseventlistener method. dispatchjsevent(eventtype:string, params:object = null) Dispatches an event for JSEventListener. Parameter 9
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 when collapse animation is complete. Swell.MOUSE_ROLLOFF 10
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. When you upload the ad these values will maintain their state in the platform. Configuring in Platform In Sizmek MDX, go to the Setup tab. Select the Advanced Features section, and expand the Variables area. Click the New button to enter the appropriate values or double click an existing variable to edit it. When done, click the Save button. 11
Custom Variables Definitions Name:Type Default Value Description mdleftoffset:number 50 x-coordinate (or position of the left boundary) of the unexpanded panel within the expanded panel. mdtopoffset:number 40 y-coordinate (or position of the top boundary) of the unexpanded panel within the expanded panel. Accepted Values Any Number 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. mdrolloffdelay:integer 0 (default = 0) Panel will collapse after delay if mdrolloffdelay is greater than 0. True/false >=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 sent EVERY TIME the user rollsover the Ad. 12
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 o Provide ZXP for use in Flash Pro CC o Apply fix for clipping issue. 13
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. Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.