Lightbox Transitional - Sizmek Formats Build Guide
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Sizmek Formats
Lightbox Transitional
Build Guide
Sizmek
Table Of Contents
Overview ..................................................................................................................................... 3
Supported Platforms .................................................................................................................. 3
Specifications ............................................................................................................................. 3
Known Issues ............................................................................................................................. 3
Ad Behavior Screenshots .......................................................................................................... 4
Expand State........................................................................................................................................ 4
Template Included Files ............................................................................................................. 4
Setting up in Workshop ............................................................................................................. 5
To set up Ad in Sizmek Workshop: .................................................................................................... 5
Configuring in Flash................................................................................................................... 6
Banner............................................................................................................................................... 6
Site Overlay / Default Panel ............................................................................................................. 6
Format API .................................................................................................................................. 7
Methods ............................................................................................................................................ 7
Setting up in Platform ................................................................................................................ 8
Custom Variables ....................................................................................................................... 8
Configuring in Workshop .......................................................................................................... 8
Configuring in Platform ............................................................................................................. 9
Custom Variables Definitions .................................................................................................... 9
Change Log ................................................................................................................................. 9
Copyright © 2014 Sizmek. All rights reserved.
2
Sizmek
Overview
This ad format is an in-page, expandable that covers the publisher page content as it expands. When
fully expanded a video will begin to play until completion. If the video ends the content will automatically
close. The video can also be stopped and the ad closed by clicking the user selecting the close button.
There are two main parts to the ad: the main ad content that is horizontally and vertically aligned over the
page and the main background which is stretched to 100% of the browser’s width and height.
Format functionality is already programmed into the template files, so to create this ad format, all you
have to do is add your creative content.
Supported Platforms
Platform Supported Browser Version
Windows XP/7/8 Internet Explorer 8+, Firefox, Chrome, Safari
Mac OSX 10.8 & 10.9 Firefox, Chrome, Safari
Specifications
Supports ActionScript 3.0.
Supports Flash Player 9 and above
Supports Old and New Client.
The banner asset is only a placeholder.
By default, the asset dimensions are 1 x 1 for the banner and default image and 800 x 600 for the
site overlay panel. You can resize these to suit your needs, but the Banner's and default image's
sizes must always match. Please note the site overlay panel will be stretched to 100% of the
browser’s width and height. The background content in this panel will then be stretched to fit the
browser and the main ad content will be aligned according to the ActionScript settings outlined in
the API below.
Known Issues
Occasionally, the custom javascript does that load properly when previewing locally in the
MediaMind workshop. If this happens you may have to reload the preview.
Local MediaMind Workshop previews may not function as expected when using Internet Explorer.
Copyright © 2014 Sizmek. All rights reserved.
3Sizmek
Ad Behavior Screenshots
Expand State
Template Included Files
Filename Description
1x1.fla Do not modify. 1 x 1. The Banner.
SiteOverlay.fla 800 x 600. The FLA template for the default panel.
mediamind_650x350.flv 650 x 350. The FLV file used a video placeholder.
LightboxTranstional.as Do not modify. The ActionScript code with core functionality.
1x1.jpg 1 x 1. Default image used in the template.
Copyright © 2014 Sizmek. All rights reserved.
4Sizmek
Setting up in Workshop
To set up Ad in Sizmek Workshop:
In your file browser, browse to and run the Lightbox Transitional MXP (LightboxTransitional.mxp),
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.
Expand the MediaMind Templates > Lightbox Transitional folder, and select the template.
Click Create.
Copyright © 2014 Sizmek. All rights reserved.
5Sizmek
Configuring in Flash
Banner
The Lightbox Transitional uses the banner as a placeholder, and the default panel for all the creative
content. The Banner asset, Empty.fla, must be edited to the default image's dimensions.
Note: Only the Banner's dimensions should be modified. Anything else must not be edited.
The main timeline contains only the actions layer, which contains ActionScript for the ad. Do not modify
anything in this layer.
Frame 1 of the actions layer initiates the ad by calling EBBase.Init(this);.
Site Overlay / Default Panel
The default panel contains the main content for the transitional ad.
To edit the Panel Assets:
Open SiteOverlay.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.
Frame 2 contains:
Initializing template class
Logic for expanding and collapsing the ad;
Functions called upon specific ad events, such as expansion and collapse
of the Panel. For more information, see the API below.
o content: The main content including the video and controls to be aligned on the page.
Also contains animation for fading the layer in and out.
Contains the following layers:
Actions: used for identifying the various states of the ad as well as dispatching
animation events.
skipButton: The button used to manually close the ad.
topBanner: Banner used to identify the video as an ad.
videoControls: MovieClip containing MediaMind video components to control the
video.
videoPlayer: The MediaMind VideoScreen component used for video playback.
videoBackground: Solid background layer used as a placeholder while video is
not playing. This layer’s position is also used to determine whether to show the
video controls or not.
Copyright © 2014 Sizmek. All rights reserved.
6Sizmek
o background: The background content that will be stretched to the browser’s width and
height. Also contains animation for fading the layer in and out.
o guide: A guide layer to visually identify the layers above.
Publish the FLA.
* Main.fla should remain the content for the default panel.
Format API
The API is defined in LightboxTranstional.as and used to abstract some of the ad’s lower level logic,
exposing the core functionality you might use when building the Lightbox Transitional format.
Methods
getInstance():LightboxTranstional
Returns a single instance of the LightboxTranstional class to avoid creating multiple instances with inconsistent
runtime values. For more information regarding this technique you can research the Singleton design pattern.
align(event:Event = null):void
Aligns the ad content on the page according the alignment values above. Stretches the background to width
and height of the browser covering the publisher’s content.
Parameters
event:Event
An optional parameter set to null by default in case you want to call the method not as the result of an event
registerSiteBackground(siteBackground:MovieClip):void
Registers the background MovieClip who’s content will be stretched to fit the browser.
Parameters
siteBackground:MovieClip
MovieClip who’s content will be stretched to fit the browser.
registerAdContent(adContent:MovieClip):void
Registers the ad content MovieClip to be aligned over the publishe’s content.
Parameters
adContent:MovieClip
The ad content MovieClip to be aligned over the publishe’s content..
setHorizontalAlignment (horizontalAlignment:String):void
Sets the horizontal alignment of the ad content. By Default the ad content will be centered horizontally.
Parameters
horizontalAlignment:String
Copyright © 2014 Sizmek. All rights reserved.
7Sizmek
The horizontal alignment of the ad content
Possible Values include: LightboxTranstional.LEFT, LightboxTranstional.CENTER, LightboxTranstional.RIGHT
setVerticalAlignment(verticalAlignment:String):void
Sets the vertical alignment of the ad content. By Default the ad content will be centered vertically.
Parameters
verticalAlignment:String
The vertical alignment of the ad content
Possible Values include: LightboxTranstional.TOP, LightboxTranstional.CENTER,
LightboxTranstional.BOTTOM
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_LightboxTransitional_NewClient.js
Old Client Delivery :
http://ds.serving-sys.com/burstingres/CustomScripts/PL_LightboxTransitional_OldClient.js
*To enable new client, make sure the “Use new client mechanism” checkbox is selected.
4. Click Save.
Custom Variables
Custom Variables for this format 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.
Copyright © 2014 Sizmek. All rights reserved.
8Sizmek
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
Default Accepted
Name:Type Description
Value Values
mdEyeDivZIndex:String undefined Dynamically set panel z-index through Number>0
this variable, default is undefined so
no changes will happen to panel z-
index.
mdBackgroundCloseOnClick: False If the value is set to true clicking the Boolean
Boolean background MovieClip will trigger the
ad to close.
Change Log
Release: June 13, 2014 (v 1.8)
Sizmek Rebranding.
ZXP Released.
Fixed, Panel misalignment issue on page scroll.
Copyright © 2014 Sizmek. All rights reserved.
9Notice
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.You can also read
