Lightbox Transitional Build Guide
←
→
Page content transcription
If your browser does not render page correctly, please read the page content below
Lightbox Transitional Build Guide
Digital Generation
Contents
Overview ..................................................................................................................................... 3
Known Issues ...................................................................................................................................... 3
Before you Begin ................................................................................................................................. 3
Included Template Files ...................................................................................................................... 4
Setting Up the Lightbox Transitional in the MediaMind Workshop ................................................. 4
Configuring the Lightbox Transitional in Flash ................................................................................ 5
Banner ................................................................................................................................................................... 5
Site Overlay / Default Panel ................................................................................................................................. 5
Setting Up the Format in the MediaMind Platform ............................................................................ 7
Applying Custom Scripts for the Old Delivery Client ....................................................................................... 7
Applying Custom Scripts for New Delivery Client ............................................................................................ 8
Configuring Custom Variables ............................................................................................................................ 8
Custom Variable Definitions ............................................................................................................................... 8
© 2013 Digital Generation, Inc. 2Digital Generation
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.
Ad Behavior
Expanded View
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.
Before you Begin
Make sure you have the following resources available:
• MediaMind Workshop.
• The Lightbox Transitonal custom format.
Notes:
• This format is compatible with ActionScript 3.0 and Flash Player 9 and above.
© 2013 Digital Generation, Inc. 3Digital Generation
• Previews and QA should be done at the tag-level for the most accurate results.
• 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.
Included Template Files
File Name 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.
Setting Up the Lightbox Transitional in the MediaMind
Workshop
To set up the Format in MediaMind Workshop:
1. 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.
2. In the MediaMind Workshop™ for Flash, select New from template.
3. For AS Version, select ActionScript 3.
4. Expand the MediaMind Templates > Lightbox Transitional folder, and select the template you want to
use.
© 2013 Digital Generation, Inc. 4Digital Generation
5. Click Create.
Configuring the Lightbox Transitional in Flash
The Lightbox Transitional uses the banner as a placeholder, and the default panel for all the creative content.
Banner
The Banner asset, Empty.fla, must be edited to the default image's dimensions.
Important: 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.
6. Open SiteOverlay.fla.
7. Familiarize yourself with the template. The main timeline contains the following layers:
© 2013 Digital Generation, Inc. 5Digital Generation
• 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 expanding and collapsing the ad, playing and stopping the video and aligning the
panels content.
• Functions called upon specific ad events, such as expansion and collapse of the Transitional.
For more information, see the API below.
• 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.
• 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.
• guide: A guide layer to visually identify the layers above.
8. Publish the FLA.
* Main.fla should remain the content for the default panel.
ActionScript 3.0 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.
Public 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
© 2013 Digital Generation, Inc. 6Digital Generation
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
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 the Format in the MediaMind Platform
Applying Custom Scripts for the Old Delivery Client
To apply the custom script to your ad for the Old Delivery Client:
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:
OLD DELIVERY:
http://ds.serving-
sys.com/BurstingRes/CustomScripts/PL_LightboxTransitional_OldClient.js]
4. Click Save.
© 2013 Digital Generation, Inc. 7Digital Generation
Applying Custom Scripts for New Delivery Client
To apply the custom script to your ad for the New Delivery Client:
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: If there is an old script,
you must replace it with the new script. You will be able to determine which is old or new by looking at the
file name. (i.e. PL_LightboxTransitional_OldClient.js vs. PL_LightboxTransitional_NewClient.js)
NEW DELIVERY:
http://ds.serving-
sys.com/BurstingRes/CustomScripts/PL_LightboxTransitional_NewClient.js
4. Make sure the “Use new client mechanism” checkbox is selected.
5. Click Save.
Configuring 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.
To configure the custom variables in the workshop:
6. In the MediaMind workshop, go to the Settings tab.
7. Next select the Variables menu.
8. Click the Add Variable button to enter the appropriate values or double click an existing variable to edit it.
9. When are done click the Save button.
10. When you upload the ad these values will maintain their state in the platform.
To configure the custom variables in the platform:
11. In the MediaMind platform, go to the Setup tab.
12. Select the Advanced Features section, and expand the Variables area.
13. Click the New button to enter the appropriate values or double click an existing variable to edit it.
14. When are done click the Save button.
Custom Variable Definitions
mdEyeDivZIndex : Integer = undefined
If this value is not undefined the eye div’s z-index will be set to the value provided. Some publishers require a
specific z-index to avoid interfering with the other page elements.
mdBackgroundCloseOnClick: Boolean = false
If the value is set to true clicking the background MovieClip will trigger the ad to close.
© 2013 Digital Generation, Inc. 8You can also read
