Formats Collage Build Guide
Table Of Contents Overview... 3 Supported Platforms... 3 Specifications... 3 Known Issues... 3 Ad Behavior Screenshots... 4 Template Included Files... 8 Setting up in Workshop... 8 Customizing the Format... 9 Modifying the Banner (banner.fla)... 9 Adding Tile Images to the Grid... 10 Maintaining Aspect Ratio... 12 ActionScript Properties (Settings.as)... 13 Custom Interactions... 15 Important notes... 15 Setting up in Platform... 15 Custom Variables... 16 Configuring in Workshop... 16 Configuring in Platform... 16 Custom Variables Definitions... 16 Change Log... 17 2
Overview The Collage is a MediaMind Custom Format adapted from the Expandable Banner format. It is a 3D Flash format that can be easily branded for an immersive product catalogue experience. The unit functions a single expandable, which allows for a seamless transition between the collapsed and expanded states. 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 Format Version 1.0 Supports ActionScript 3.0 Expandable format Supports Flash Player 10.3 and above Please preview on the tag level for most accurate results Included templates o 300x600 Known Issues Local preview will not load the required Javascript For best results please preview this format on the tag level 3
Ad Behavior Screenshots Banner View (seen while default panel is loading) 4
Collapsed View 5
Expanded View (no item selected) 6
Expanded View (item selected) 7
Template Included Files Filename baner.fla panel.fla BitmapGrid.as BitmapTile.as CustomFormat.as Main.as PieTimer.as Settings.as greensock.swc backup.jpg expanded_flash.swf expanded_video.mpg Description 300x600 Flash banner 1230x600 Flash panel AS3 class for creating 3D bitmap grid AS3 class for creating a distortable bitmap AS3 class for applying custom format logic AS3 class linked to Main (MovieClip) in panel AS3 class for creating the pie timer component AS3 class for controlling common settings in the format AS3 animation framework Backup image served when flash is disabled Dynamically loaded branded flash asset Dynamically loaded branded video asset Setting up in Workshop In your file browser, browse to and run the Collage MXP/ZXP (collage.mxp or collage.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 > Collage folder, and select 300x600. 8
Click Create. Customizing the Format This format is built to strict Microsoft specifications. The editable portions of the unit are all defined below. Please use caution if/when editing parts of the format not listed in this document. Modifying the Banner (banner.fla) The banner is only used to indicate that the panel is loading in this format. Frame 1 initializes the EBBase class and once initialized the timeline is advanced to and stops on frame 2. Frame 2 contains only one MovieClip named main. This MovieClip contains the layers described below. 9
Layer Name actions clickthrough loading border Description The banner subscribes to the defaultpanelready event and when it s heard the main movieclip is hidden. A 300x600 MovieClip that captures all clicks on the Banner while the default panel is loaded. The default clickthrough is used but you can use a custom interaction by updating the handleclick function on the actions layer of this MovieClip. Text indicating that the ad is loading more content. This is purely graphical and can be modified to suite your creative. A black 300x600, 1px wide border with a white background. This can also be modified to suit your creative. Adding Tile Images to the Grid 1. Drag your image into the panel.fla library. 2. Right click on the library image and choose properties. 10
3. Choose the ActionScript tab in the images properties window. 4. Select the Export for ActionScript and Export in frame 1 check boxes. 5. Modify the Class identifier to the instance name you desire. This is the name that will be used when updating the thumbasset property of the gridassets Array in Settings.as. Please note that instance names cannot contain periods. Notice that we ve removed the.jpg suffix from the name that Flash recommended. 11
6. Press OK. Maintaining Aspect Ratio * We are calculating a unit s aspect ratio by dividing its width by its height. A tile image s aspect ratio should match the aspect ratio of the showcase MovieClip in panel.fla. By default the overall aspect ratio of the ad is 1.5. The showcase is 900x600, the tile images are 270x180, and the flash and image additional assets are 670x447. Notice that the additional assets are much larger than the tile images while still maintaining the same aspect ratio. The video additional assets will be stretched or shrunk and letterboxed to fit the size if the VideoScreen Component in the showcase MovieClip. If you need to adjust the aspect ratio in your creative please modify the contents of the showcase MovieClip by double-clicking inside the stage instance and resizing the graphics and components to your needs. Use caution when resizing the VideoScreen Component as the run-time dimensions are calculated differently than the properties inspector displays. To avoid skewing and misalignment of your content you may have make the VideoScreen s width and height slightly smaller than the total showcase instance s width and height. The tile images should also be approximately 3x as big as they display in the ad s collapsed state. For example, if a tile is 100x100 pixels in the collapsed state, you should export the image at 300x300 pixels to avoid degrading when the image is scaled in the expanded state. 12
If you choose to modify the width and height of the grid please make sure to change only the Rectangle shape inside the grid MovieClip then reposition the grid from the Main timeline. Please note that the grid will use its original position and dimensions when reverting back to it s collapsed state. ActionScript Properties (Settings.as) columns:uint = 3 The number of columns the grid should display. The number of rows is calculated using this value and the total number of tiles in the grid. collapsedscale:number = 2 The amount each tile should scale up from its inactive state while the unit is in the collapsed state. Too much scale may cause the perimeter tiles to display beyond the units 300x600 clipped area so use caution when increasing this value. expandedscale:number = 1.4 The amount each tile should scale up from its inactive state while the unit is in the expanded state. collapsedscalespeed:number = 0.3 The speed each tile should scale up from its inactive state while the unit is in the collapsed state. expandedscalespeed:number = 0.3 The speed each tile should scale up from its inactive state while the unit is in the expanded state. collapsedretractspeed:number = 0.3 The speed each tile should retract back to its inactive state while the unit is in the collapsed state. expandedretractspeed:number = 0.3 The speed each tile should retract back to its inactive state while the unit is in the expanded state expandedoffsetx:number = 0.2 Controls how much the grid will pan horizontally in the expanded state of the ad and no tile is selected. expandedoffsety:number = 0.4 Controls how much the grid will pan vertically in the expanded state of the ad and no tile is selected. autoselections:array = [0, 4, 8, 9, 10, 14] A list of indices that will auto-matically scale up if the user has not interacted with the ad. Please note 13
that requires all animation to stop before 15 seconds elapsed if the user has not interacted. autoselectiondelay:number = 1.5 How long to wait before animating the next tile auto-selected tile. pietimerseconds:number = 2.5 The amount of seconds the pie timer will count down before expanding the focused tile. pietimerradius:number = 50 The pixel radius of the pie timer. pietimerdelay:number = 1.5 The number of seconds a tile will be hovered over before the pie timer begins its countdown. pietimercolor:number = 0x000000 The base color of the pie timer. gridassets:array Each object of the grid assets array is used to build the grid with the following properties: Property Name thumbasset expandedasset Description The instance name of the library image to be used as the bitmap tile The id of the additional asset to be displayed when a tile is selected expandedassettype The type of asset that will be loaded if the tile is selected. The following case-sensitive string values are accepted: image flash video interactionname The name of the clickthrough interaction to use when the tile is clicked in its expanded state. Only the image and video asset types will use this value. For flash asset types please embed your clickthroughs directly in the subloaded swf. If you would like the use the ad s default clickthrough you can use the string value default. If you do not want the expanded tile to have a clickthrough associated with it please use the null value. 14
Custom Interactions Interaction Name Type Description PRI_Tile_[Row]x[Column]_Click_Expand Auto Auto Interaction event fired on click of Tile in banner to expand/view tile content. EXP_Tile_[Row]x[Column]_Click_ZoomPanel User User Interaction event fired on click of Tile in banner/panel to view tile content. EXP_Tile_[Row]x[Column]_RollOver_Expand User User Interaction event fired on rollover of Tile in panel to view tile content. Close_Tile_Zoom User User Interaction fire on click of back button in expanded section Close_Expand_Button Auto Auto Interaction fire on click of close button to close expanded section Note: All the custom interactions are fired dynamically through different.as files. To enable platform to read all the custom interaction, they are placed at second frame of panel.fla. Please check dummyinteractions() function. If there is any update in Grid size then you have to update add/remove this custom interaction as per you requirement from second frame. 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. Setting up in Platform The custom script should already be attached to the ad when it is uploaded from the MXP/ZXP. You can confirm this by doing the following. 1. In Sizmek MDX/ZXP, 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: 15
New Client Delivery : http://ds.serving-sys.com/burstingres/customscripts/pl_collage_newclient.js 3a. Make sure the Use new client mechanism checkbox is selected. 4. Click Save. Custom Variables Custom Variables for the Collage 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 mdautorepositioninterval :Number 100 The amount of milliseconds to realign the default panel. 1+ If 0 then the interval will not start. mdeyedivzindex:number 4 The default z-index of the eye div. 0 to 10000 To leave the z-index unchanged us the string undefined mdoverridepanelwidth:num ber Null Panel width. User can override panel width. 0 > 16
Change Log April 28, 2014 (v 1.5) o Rebrand assets to Sizmek o Provide ZXP for use in Flash Pro CC o Apply fix to show ad on MSN Hub pages July 29, 2014 (v 1.6) o Custom Interactions to track tile ID on which user clicked/rolled over to expand. o Custom interaction added to Back and Close buttons. o Grid size updated to 4x6. o Panel will collapse on launch of click through. 17
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.