MSN Collage

MediaMind Custom Format
MSN Collage
MediaMind Custom Format
MSN Collage
Build Guide
Contents
Overview ....................................................................................................................................... 2 Specifications ............................................................................................................................... 2 Known Issues ............................................................................................................................... 2 Ad Behavior Screenshots ............................................................................................................. 3 Template Included Files ................................................................................................................ 7 Setting up in Workshop ................................................................................................................ 7 Customizing the Format ............................................................................................................... 9 Modifying the Banner (banner.fla) .......................................................................................................... 9 Adding Tile Images to the Grid ................................................................................................................ 9 Maintaining Aspect Ratio ....................................................................................................................... 12 ActionScript Properties (Settings.as) ..................................................................................................... 12 Setting up in Platform ................................................................................................................. 15 Applying the Custom Script ................................................................................................................... 15 Custom Variables ....................................................................................................................... 15 Configuring in the Workshop ................................................................................................................. 15 Configuring in the Platform ................................................................................................................... 16 Definitions ............................................................................................................................................. 16 Page | 1
MediaMind Custom Format
MSN Collage
Overview
The MSN Collage is a MediaMind Custom Format adapted from the Expandable Banner
format. It is a 3D Flash format run exclusively on MSN.com 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.
Specifications
•
Format Version 1.0
•
•
•
Supports ActionScript 3.0
Supports Flash Player 10 and above
Please preview on the tag level for most accurate results
•
Included templates
• 300x600
Known Issues
•
•
Local preview will not load the required Javascript
For best results please preview this format on the tag level
Page | 2
MediaMind Custom Format
Ad Behavior Screenshots
Banner View (seen while default panel is loading)
Page | 3
MSN Collage
MediaMind Custom Format
Collapsed View
Page | 4
MSN Collage
MediaMind Custom Format
Expanded View (no item selected)
Page | 5
MSN Collage
MediaMind Custom Format
Expanded View (item selected)
Page | 6
MSN Collage
MediaMind Custom Format
MSN Collage
Template Included Files
Event Template Files
Filename
Description
banner.fla
300x600 Flash banner
panel.fla
1230x600 Flash panel
BitmapGrid.as
AS3 class for creating 3D bitmap grid
BitmapTile.as
AS3 class for creating a distortable bitmap
CustomFormat.as
AS3 class for applying custom format logic
Main.as
AS3 class linked to Main (MovieClip) in panel
PieTimer.as
AS3 class for creating the pie timer component
Settings.as
AS3 class for controlling common settings in the format
greensock.swc
AS3 animation framework
backup.jpg
Backup image served when flash is disabled
expanded_image.jpg
Dynamically loaded branded image asset
expanded_flash.swf
Dynamically loaded branded flash asset
expanded_video.mpt
Dynamically loaded branded video asset
Setting up in Workshop
1. In your file browser, browse to and run the MSN Collage MXP (Collage.mxp), and then follow the
prompts in the Adobe Extension Manager to install the extension.
2. In the MediaMind Workshop™ for Flash, select New from template.
3. Expand the MediaMind Templates > Collage folder, and select the 300x600 template.
Page | 7
MediaMind Custom Format
4. Click Create.
Page | 8
MSN Collage
MediaMind Custom Format
MSN Collage
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.
Layer Name
Description
actions
The banner subscribes to the “defaultPanelReady” event and when it’s heard the “main” movieclip is hidden.
clickthrough
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.
loading
Text indicating that the ad is loading more content. This is purely graphical and can be modified to suite your creative. border
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.
Page | 9
MediaMind Custom Format
2. Right click on the library image and choose properties.
3. Choose the ActionScript tab in the images properties window.
Page | 10
MSN Collage
MediaMind Custom Format
MSN Collage
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.
Page | 11
MediaMind Custom Format
MSN Collage
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.
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 Page | 12
MediaMind Custom Format
MSN Collage
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 that MSN requires all animation to stop before 15 seconds elapsed if the user Page | 13
MediaMind Custom Format
MSN Collage
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
Description
thumbAsset
The instance name of the library image to be used as the bitmap tile
expandedAsset
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: interactionName
Page | 14
•
image •
flash •
video
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 MediaMind Custom Format
MSN Collage
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.
Setting up in Platform
Applying the Custom Script
* The custom script should be attached by default if uploading from the workshop or creating this
custom format in the platform.
1. In the MediaMind platform, 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:
http://ds.servingsys.com/BurstingRes/CustomScripts/PL_Collage_NewClient.js
4. Click Save.
Custom Variables
Custom Variables for the format can now be configured using either the MediaMind Workshop or the MediaMind Platform once your ad is created. Configuring in the Workshop
1. In the MediaMind workshop, go to the Settings tab.
2. Next select the Variables menu.
3. Click the Add Variable button to enter the appropriate values or double click an existing variable to
edit it.
4. When are done click the Save button.
5. When you upload the ad these values will maintain their state in the platform.
Page | 15
MediaMind Custom Format
MSN Collage
Configuring in the Platform
1.
2.
3.
4.
In the MediaMind platform, 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 are done click the Save button.
Definitions
Name:Type
Default Value
Description
Accepted Values
mdAutoRepositionInterval:Number
100
The amount of
milliseconds to
realign the default
panel.
1+
The default z-index
of the eye div.
MSN.com requires a
default value of 4 to
avoid interfering
with their search
bar’s auto-complete
feature.
0 to 10000
mdEyeDivZIndex:Number
Page | 16
4
if 0 then the interval
will not start.
To leave the z-index
unchanged us the
string “undefined”