Sizmek Formats Portrait Build Guide

Table Of Contents Overview........................................................................................................................................................ 4 Supported Platforms ................................................................................................................................... 4 Specifications................................................................................................................................................ 4 Known Issues ............................................................................................................................................... 4 Ad Behavior Screenshots ............................................................................................................................ 5 Template Included Files............................................................................................................................... 8 Setting up in Workshop ............................................................................................................................... 9 Setting Up Twitter Feed in FileSnap Tool ................................................................................................... 9 Creating Portrait Ad from the Sizmek Platform...................................................................................... 10 Configuring in Flash ................................................................................................................................... 15 Banner .................................................................................................................................................................... 15 Main Content / Default Panel/ mainPanel.fla ................................................................................................... 15 Portrait_large_Gallery.fla ................................................................................................................................. 16 Portrait_large_Video.fla.................................................................................................................................... 16 Portrait_large_CUSTOM.fla............................................................................................................................... 17 Portrait_small_Video.fla ................................................................................................................................... 17 Portrait_small_twitter.fla ................................................................................................................................. 17 Portrait_small_CUSTOM.fla/Portrait_small_CUSTOM_2.fla ........................................................................ 18

Important notes ......................................................................................................................................... 18 Format API .................................................................................................................................................. 18 Properties ........................................................................................................................................................... 18 Functions............................................................................................................................................................ 18 Events ................................................................................................................................................................. 20

Setting up in Platform ............................................................................................................................... 20 Custom Variables ....................................................................................................................................... 20

Configuring in Workshop ...................................................................................................................................... 20 Configuring in Platform ........................................................................................................................................ 21

Custom Variables Definitions ................................................................................................................... 22 Change Log ................................................................................................................................................. 22

Overview The Portrait is 300x1050 dimension format. The Portrait is a 300x1050 canvas with three modules of content: one large and two small. The modules can be mixed and match and contain an image gallery, a video gallery, a Twitter feed, or completely custom Flash content, and can seamlessly expand over the page’s editorial content.

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 Action Script 3.0 Supports Flash Player 10.3 and above Preview only available on tag level for most accurate results By default, the banner asset is only a placeholder By default, the asset dimensions are 300x1050 for the banner By default, the asset dimensions are 300x1050 for the image By default the main content panel is 700x1200. Supports Old Client and New Client.

Known Issues • • •

For flash player 11.5/11.7 in full screen state video controls hit areas get misaligned. You may see flash debugger errors some time. Those bugs are related to video player. If you use video section in the template, on click though video sound doesn’t mute. Please use following code for fix this issue. Add this code in mainPanel.fla, on second frame. import eyeblaster.events.EBNotificationEvent; import eyeblaster.videoPlayer.playback.EBVideo; EBBase.addEventListener(EBNotificationEvent.NOTIFICATION, notificationHandler, false, 0, true); function notificationHandler(e:EBNotificationEvent) { switch(e.subtype)

{

}

}

case EBNotificationEvent.CLICK: if(EBVideoMgr.Current) EBVideoMgr.Current.mute(); break;

Ad Behavior Screenshots

Template Included Files Filename baner.fla mainPanel.fla Portrait_large_Gallery.fla Portrait_large_Video.fla Portrait_large_Custom.fla Portrait_small_Video.fla Portrait_small_Twitter.fla Portrait_small_ Custom.fla Portrait_small_ Custom2.fla Portrait.as XMLLoader.as TwitterService.as CustomLoader.as json.swc greensock.swc Config_large_images.xml Config_large_video.xml Config_small_video.xml

Description Do not modify. 300 x 1050. The Banner. 700 x 1200. The FLA template for the default panel and main shell file. It loads three different swf files. 700 x 460.This FLA contains image gallery related code and Graphics. 700 x 460.This FLA contains video player related code and Graphics. 700 x 460.User can customize this file. It is blank customizable file. 700 x 350.This FLA contains video player related code and Graphics. 685x350. This FLA contains Twitter feed related code and Graphics. 700 x 350.User can customize this file. It is blank customizable file. 700 x 350.User can customize this file. It is blank customizable file. Do not modify. The Action Script code with core functionality. Do not modify. The Action Script code with core functionality. Do not modify. The Action Script code with core functionality Do not modify. The Action Script code with core functionality Do not modify. The Action Script code with core functionality Do not modify. The Action Script code with core functionality User can modify XML content, By changing additional asset Indexes. User can modify XML content, By changing additional asset Indexes. User can modify XML content, By changing additional asset Indexes.

Setting up in Workshop

• • •

In your file browser, browse to and run the Portrait MXP/ZXP (Portrait.mxp or Portrait.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/ZXP. In the Sizmek Workshop™ for Flash, select New from template. For AS Version, select ActionScript 3. Expand the Sizmek Templates > Portrait folder, and select 300x1050.

•

Click Create.

•

Setting Up Twitter Feed in FileSnap Tool Each campaign must have its own Twitter Feed FileSnap item. FileSnap is a service that creates "snapshots" of twitter feeds at specified intervals. This snap shot is updated on the CDN every day to reflect any changes in Twitter Feeds; Update interval can be set accordingly from 15 min to 1 day. To set up FileSnap to push the ad assets to the CDN: 1. Log in to http://polldb.unicast.com/features/index.pl.

2. Click FileSnap on the top, and then click Create New FileSnap. 3. Enter the following information:

•

CC Email: The email addresses of any contacts, other than yourself, that should receive notifications about this FileSnap item.

•

Snap Name: Add snap name.

•

Type: Twitter.

•

Resource: User Timeline.

•

Screen Name: Twitter account name.

•

Output Filename: XXXXXX.json.(XXXXXX is file name)

•

Refresh: Every 1 Day (Choose as required).

•

Start/End Date: The campaign date range, as required by campaign.

•

Output : Mediamind CDN

Note: The range cannot exceed four months. 4. Click SAVE & REFRESH.

Make sure you write down the FileSnap Live Snap URL. You will need it when setting up the placement in the Sizmek Platform.

Creating Portrait Ad from the Sizmek Platform 1. Create a new Ad from the platform. Name it according to the requirement. 2. For Ad Format select Portrait under Custom Ad formats section.

Select the following files as given below for the ad: For custom contents ad: 1.

Default image: backup_image.jpg

2.

Banner: banner.swf

3.

Panels:

4.

Panel Name

File Name

Panel1(Default Panel)

mainPanel.swf

Panel Settings: Uncheck the box Show single panel at a time.

Check the box Auto Expand Panel and set the frequency as requirement. 5.

Click through URL: Add the URL as needed.

6.

Additional Assets List: Add the following assets in the order mentioned.

Asset Id

7.

File Name

1

portrait_large_CUSTOM.swf

2

portrait_small_CUSTOM.swf

3

portrait_small_CUSTOM2.swf

Advanced Features section: Variables: Name

Value

Format

mdLeftOffset

400

Integer

mdTopOffset

0

Integer

Custom JS: For Old Client: http://ds.serving-sys.com/burstingres/CustomScripts/PL_Portrait_OldClient.js For New Client: http://ds.serving-sys.com/burstingres/CustomScripts/PL_Portrait_NewClient.js Note: Remember to check the box for Use new client mechanism for new client. For custom large ad: 1. Default image: backup_image.jpg 2. Banner: banner.swf 3. Panels:

Panel Name Panel1(Default Panel)

File Name mainPanel.swf

4. Panel Settings:

Uncheck the box Show single panel at a time. Check the box Auto Expand Panel and set the frequency as requirement. 5. Click through URL: Add the URL as needed.

6. Additional Assets List:

Add the following assets in the order mentioned. Asset Id

File Name

1

portrait_large_GALLERY.swf

2

portrait_small_VIDEO.swf

3

portrait_small_CUSTOM2.swf

4

config_large_images.xml

5

config_small_video.xml

6

lrg_img_1.jpg

7

lrg_img_2.jpg

8

lrg_img_3.jpg

9

rg_img_4.jpg

10

lrg_img_5.jpg

11

lrg_img_6.jpg

12

lrg_img_7.jpg

13

lrg_img_8.jpg

14

thb_lrg_img_1.jpg

15

thb_lrg_img_2.jpg

16

thb_lrg_img_3.jpg

17

thb_lrg_img_4.jpg

18

thb_lrg_img_5.jpg

19

thb_lrg_img_6.jpg

20

thb_lrg_img_7.jpg

21

thb_lrg_img_8.jpg

22

video1_Large.jpg

23

video1_Large_thumb.jpg

24

video1_Small.jpg

25

video1_Small_thumb.jpg

26

video2_Large.jpg

27

video2_Large_thumb.jpg

28

video2_Small.jpg

29

video2_Small_thumb.jpg

30

SizzleReel.flv

31

HDSkin.f4v

7. Advanced Features section:

Variables: Name

Value

Format

mdLeftOffset

400

Integer

mdTopOffset

0

Integer

mdLargePhotoGalleryXML 4

Integer

mdLargeVidGalleryXML

34

Integer

mdSmallVidGalleryXML

5

Integer

Custom JS: For Old Client: http://ds.serving-sys.com/burstingres/CustomScripts/PL_Portrait_OldClient.js For New Client: http://ds.serving-sys.com/burstingres/CustomScripts/PL_Portrait_NewClient.js Note: Remember to check the box for Use new client mechanism for new client. For custom twitter ad: 1. Default image: backup_image.jpg 2. Banner: banner.swf 3. Panels:

Panel Name Panel1(Default Panel)

File Name mainPanel.swf

4. Panel Settings:

Uncheck the box Show single panel at a time. Check the box Auto Expand Panel and set the frequency as requirement. 5. Click through URL: Add the URL as needed.

6. Additional Assets List:

Add the following assets in the order mentioned.

Asset Id

File Name

1

portrait_large_VIDEO.swf

2

portrait_small_CUSTOM.swf 3

portrait_small_TWITTER.swf

22

video1_Large.jpg

23

video1_Large_thumb.jpg

24

video1_Small.jpg

25

video1_Small_thumb.jpg

26

video2_Large.jpg

27

video2_Large_thumb.jpg

28

video2_Small.jpg

29

video2_Small_thumb.jpg

30

SizzleReel.flv

31

HDSkin.f4v

34

config_large_video.xml

7. Advanced Features section:

Variables: Name

Value

Format

mdLeftOffset

400

Integer

mdTopOffset

0

Integer

mdTwitScreenName

sizmek

String

mdLargeVidGalleryXML

34

Integer

mdTwitterFeedURL

http://services.servingsys.com/custprojassets/prd/features/fee ds/1087/SizmekTwitter.JSON

String

(FileSnap Live Snap URL) Custom JS: For Old Client:

http://ds.serving-sys.com/burstingres/CustomScripts/PL_Portrait_OldClient.js For New Client: http://ds.serving-sys.com/burstingres/CustomScripts/PL_Portrait_NewClient.js Note: Remember to check the box for Use new client mechanism for new client.

Configuring in Flash The Format uses the banner as a placeholder, and the default panel for all the creative content.

Banner The Banner asset, banner.fla, must be edited to the default image's dimensions. Important: Do not modify this fla.

• • •

Frame 1 of the actions layer initiates the ad by calling EBBase.Init(this);. The play head stops on frame 2. Frame 2 of banner.fla has dummy Tracking function where all custom and dynamic interactions are defined within this function.

Main Content / Default Panel/ mainPanel.fla The mainPanel.fla contains content for the both the collapsed and expanded states of the ad and this panel loads the 3 different modules. • • •

Open mainPanel.fla. Familiarize yourself with the template. The main timeline contains the following layers: Actions: Contains Action Script for the ad. o o

• • • • • • • • •

The ad is initiated on frame 1 by the EBBase.Init(this); call. Do not modify anything in this frame. Frame 2 contains: Code for initialization of the Portrait Singleton class. Second frame also contain loadExternalSWFS() fun which loads different module swfs.

As this swf loads 3 different SWF, which are always at index 1, 2, 3 of Get additional asset panel. Module1 loader movieclip: loader one movieclip for Module 1 or Top container SWF file. Module2 loader movieclip: loader one movieclip for Module2 or Middle container SWF file. Module3 loader movieclip: loader one movieclip for Module3 or bottom container SWF file. Layers large Module Container, small Module container and Small Module Bottom: These layers contain empty movie clips to load 3 different SWFS. Border: Ad’s border. Divider Lines:- Divider lines graphics. Ad Click through footer:-this layer has footer click through and clock through button. LogoClickthrough: this layer contains custom logo which has click through to open custom URL.

• • • •

Logo: Sizmek logo. Advertisement text: Advertisement graphic. Footer: footer text and graphic. Background: Ad background.

Portrait_large_Gallery.fla The Portrait_large_Gallery built entirely through the XML configuration. Design of text and buttons may be customized in the FLA file. This gallery displays image with title and description thumbnails for other images in gallery. On thumbnail rollover images changes and optional tooltip appears. If there are more than four images, thumbnails will be navigable on a carousel. • • • • • • • • • •

Open portrait_large_Gallery.fla : Familiarize yourself with the template. The main timeline contains the following layers: Actions: Contains Action Script 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: Initialization of portrait singleton class and code to read the Large XML gallery path custom var. Frame 9 contains: this frame contains code for the visibility thumbnail gallery back and next button. Tooltip: Contains custom tooltip movieclip. Loading Icon: Contains graphics for loader Thumbsmc: This movieclip contains all logic related to parsing the video gallery xml and to load large and thumb images. Sub Brand Text field: Contains gallery name which is parsed through the XML dynamically.

Portrait_large_Video.fla The Portrait_large_Video.fla contains all video thumbnails and expands view of video. This Video gallery built entirely through the XML configuration, but the design of the video controls may be customized in the FLA. This video gallery with image preview of a video clip and thumbnails for other videos in gallery. On rollover, image preview changes and optional tooltip appears. If user clicks on thumbnail or preview image, this module will expand and play the video with option to collapse module. • • • • •

• • • • •

Open video.fla. Familiarize yourself with the template. The main timeline contains the following layers: Actions: Contains Action Script 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: o Logic for expand retract view of video o Logic for video player and its controls. o Logic for parsing XML. Thumb strip: Contains thumbnails gallery creation and XML parsing as well as tooltip creation logic in this frame. Video controls: video component Loader: Contains graphics for loader Background: Contains background graphics. Publish the FLA

Portrait_large_CUSTOM.fla • • •

•

This module can be customized by user way he/she like. Open portrait_large_CUSTOM.fla : Familiarize yourself with the template. The main timeline contains the following layers: o 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. o Frame 2 contains: initialization of Portrait Singleton class. o Logic for expand and retract event handlers. Custom expand and retract events are dispatched on click of expand and retract buttons.

Portrait_small_Video.fla The Portrait small video gallery built entirely through the XML configuration. Design of text and buttons may be customized in the FLA file. This gallery displays image preview of video clip and thumbnails for other videos in gallery. On rollover, the image preview changes and optional tooltip appears. If user clicks on thumbnails or preview image video will play. Video controls are right aligned. • • o o

o

o o

Open video.fla. Familiarize yourself with the template. The main timeline contains the following layers: Actions: Contains Action Script 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:  Initialization of Singleton class and XMLLoader class.  Logic for expand retract view of video  Logic for video player and its controls.  Logic for parsing XML.  Logic for parsing XML.  xmlIndex is variable which reads customVar value as additional asset index for the XML .This frame contains video gallery and thumb nail image creation logic Menu: This layer contains the menu movie clip which contains video controller and expand / retract custom buttons. Menu movie clip contains action script code to show/hide menu on user rollover and out activity. Tween bg: this layer contain expand video tween bg white background which is editable. Sub brand copy: this layer contains dynamic text which parse name of video gallery.

Portrait_small_twitter.fla The twitter.fla contains twitter feed and tweet functionality • •

Open twitter.fla. Familiarize yourself with the template. The main timeline contains the following layers: o Actions: Contains ActionScript for the ad. The ad is initiated on frame 1 by the EBBase.Init(this); call.  frame 1: contain the Intialization of Portrait class and ClipMin() .Do not modify anything in this frame.  Frame 11 (content Label)contains: This frame contains the Twitter component movie clip.  In this Movieclip TweetFeedAction layer contain following code :  Logic for Twitter Feed.  Logic for Scroll

o o o o o

 Logic for Tweet thumb animation  Logic for setup thumbs  Logic for Tweet Tweet: Contains graphics for thumbnails Header: Contains graphics for header Loader: Contains graphics for loader Data Layout: data layout layer contain user profile logo movieclip and screen name Dynamic text box. Tweets_mc: Contains Tweet thumbs container

Portrait_small_CUSTOM.fla/Portrait_small_CUSTOM_2.fla This is custom fla file where graphics and content will be customized as per requirement.

Important notes • •

This format is compatible with ActionScript 3.0 and Flash Player 10.3 and above. This format requires Adobe Flash CS6 and above.

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

Properties largeGalleryXMLPath:String Gives path for loading external large video xml file path. It takes path from custom var. smallVideoGalleryXMLPath:String Gives path for loading external small video xml file path. It takes path from custom var. largeVideoGalleryXMLPath:String Gives gallery movieclip. topContent_loader , middleContent-loader ,smallContent_loader These are instances of the Custom Loader class used to load 3 different SWF

Functions getInstance():Portrait Returns a single instance of the Portrait 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, false):void

interAd:Boolean =

Calls out to javascript to subscribe to the various ad events listed below. Parameters eventType:String The type of ad event to listen for. The specific ad events listed below will be dispatched by default. callback:Function The flash function you want to be notified when the event is dispatched. interAd:Boolean Setting this value to true indicates that the event may come from another ad on the page. You will still receive events of the same type from your ad. removeJSEventListener(eventType:String, callback:Function):void Calls out to javascript to unsubscribe from the various ad events listed below. Parameters eventType:String The type of ad event to listen for. The specific ad events listed below will be dispatched by default. callback:Function The flash function you want to be notified when the event is dispatched. dispatchJSEvent (eventType:String, param:Object = null):void Calls out to javascript to call who subscribe event. Parameters eventType:String The type of ad event to listen for. The specific ad events listed below will be dispatched by default. Param:Object Option parameter if need to pass to listener. clipMax():void It unclips default panel. clipMin():void It clips default panel same as banner dimension. It takes xOffset and yOffset from custom var. clipAsset(x:Number, y:Number, width:Number, height:Number, trackAs:String = undefined, target = undefined) Clips panel as custom parameters. Parameters x:Number Left offset y:Number Top offset width:Number clipping width, height:Number clipping height, trackAs:String expand/collapse target:String Panel name. changeZIndex(zIndex, panelName=undefined):void

Parameters zIndex:Number Zindex value. panelName:String Panel name If panel name is undefined it changes z-index for ad otherwise it changes z-index for panel.

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

Portrait.EXPAND: Dispatched when email form is opened. Portrait.RETRACT: Dispatched when email form is closed.

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: Old Client Delivery : http://ds.serving-sys.com/BurstingRes/CustomScripts/PL_Portrait_OldClient.js New Client Delivery : http://ds.serving-sys.com/BurstingRes/CustomScripts/PL_Portrait_NewClient.js 4. Click Save.

Custom Variables Custom Variables for the Portrait 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.

Custom Variables Definitions Name:Type

Default Value

Description

Accepted Values

mdLeftOffset: Number

400

X offset for clipping default panel

1-1050

mdTopOffset : Number

0

Y offset for clipping default panel.

0 - 664

mdSmallVidGalleryXML: Number

5

This is additional asset index of XML file. (config_small_video.xml)

>=0

mdLargePhotoGalleryXML: Number

4

This is additional asset index of XML file for large photo gallery. (config_large_images.xml)

>=0

mdTwitScreenName: String

5500

Twitter Screen of Specific user

Any String

mdTwitterFeedURL: String

http://services. servingsys.com/custpr ojassets/prd/fe atures/feeds/1 087/SizmekTwit ter.JSON (File Snap Live Snap URL)

http://services.servingFile Snap sys.com/custprojassets/prd/features/ Live Snap feeds/1087/SizmekTwitter.JSON URL

34

Large video gallery XML file path additional asset index no.

mcLargeVidGalleryXML : Number

(File Snap Live Snap URL)

Change Log • • •

January 5, 2016 o Updated MXP and ZXP Release version 1.6 May 7, 2014 o Rebrand assets to Sizmek August 25, 2014 o Known issue added in the document o No update in the flash and JavaScript

>=0

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. 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.