using this template. The VPAID shell SWF handles the ... · using this template. The VPAID shell...
Transcript of using this template. The VPAID shell SWF handles the ... · using this template. The VPAID shell...
The In-Stream Menu is an In-Stream linear ad format that plays in VPAID-compliant video
players. The ad displays a menu of icons in the bottom of the player, when clicked, open up
different panel of content. Every panel contains a a submenu. On clicking each item in the
submenu opens a new tab. The menu also provides the options to direct the link to a social
networking sites. This linear version of the ad can play before, after, and during commercial
breaks between publisher content.
VPAID is an IAB protocol that standardizes the communication between video players and
In-Stream video advertising. You can use the standardized In-Stream Menu template to
easily create your ad and make use of the same creative across multiple VPAID-compliant
video players and publishers.
When the commercial break begins, the video player loads a VPAID shell SWF. The shell is
a wrapper that initiates the required VPAID API and loads the creative content that you build
using this template. The VPAID shell SWF handles the countdown to resume the publisher’s
content. However, the countdown is cancelled if the user interacts with the ad, such as
launching a clickthrough or pausing a video.
The In-Stream Menu ad plays within a publisher video player. When the user interacts with
the ad, it seizes full view of the publisher's video player window and contains a rollover/click
area to expand the ad, a video player, and a close button.
The following illustration shows the linear version of the ad, with a demo advertiser video:
In this format, if the user clicks the icons, the ad transitions to the expanded view as
illustrated below. This view contains a submenu a default video of the panel and Close
button to return the ad to the initial view. The illustrations below show an example of the
panel being expanded to display its content. A video gallery is being displayed when the
video item in the sub menu is clicked.
To view a demo of the template, click here.
To download the template, click here.
ActionScript error may appear when stopping video in video gallery if browser is using Flash
debug player.
Linear Format: FLA and SWF, ActionScript 3.0 and Flash Player 9 and above.
All other specs vary by publisher.
Video Required.
Before You Begin
Make sure you have the following resources available:
• The Sizmek Workshop 5.0.2.0 or later.
• The In-Stream Menu Ad installation MXP.
Note:
• This format is compatible with ActionScript 3.0 and Flash Player 9 and later.
Items Description
Menu_vid_linear.fla 640 x 336. FLA template for the linear creative.
Contains a video player. And the logic for submenu
item selection.
Menu_linear.as Contains logic for expansion, retraction, and all
events for the linear creative.
AdEvent.as Ad event class.
DynamicEvent.as Base class of AdEvent.
SizzleReel.mp4 Main video played in the ad
SizzleReel.mp4 Video to be played in each panel. (can bedifferent in
evey panel)
greensock.swc Component file for Tweenlite animation.
SizzleReel.mp4.flv video to be played in videogallery.
video2.flv video to be played in videogallery.
SizzleReel_short.mp4 video to be played in videogallery.
lanturns.jpg image to be displayed in imagegallery.
jumping.jpg image to be displayed in imagegallery.
bird.jpg image to be displayed in imagegallery.
To set up the In-Stream Menu Ad in the Sizmek Workshop:
1. In your file browser, browse to and run MenuAd.mxp.
2. Follow the prompts to install the extension.
3. In the Sizmek Workshop for Flash, select New from template.
4. For AS Version, select ActionScript 3.
5. Expand the Sizmek Templates > Menu Ad folder, and select the template you want to
use.
6. Click Create.
1. Open Menu_vid_linear.fla.
2. Familiarize yourself with the template. The main timeline contains the following states,
represented by labeled keyframes:
• load: The shell that this creative is loaded into automatically stops this asset’s
playhead at frame 1.
• As is the case with all Sizmek templates, EBBase.Init() is called. However,
unlike all other templates, a second argument is passed: EBBase.Init(this,
true).
This second argument, true, initiates the Advanced In-Stream mode of our
formats, which enables developers to dispatch the following additional events:
• startAd: Dispatched when the EB object is available.
• displayCloseAdButton: Dispatched when the close ad button appears.
• When in Advanced In-Stream mode, these are the ad walkthroughs for the
possible use cases:
1. When user does not interact with the ad:
2. The startAd event is dispatched.
3. The countdown reaches zero.
4. The shell closes the ad.
5. When user interacts with the ad:
6. The startAd event is dispatched.
7. The user interacts with the ad.
8. The countdown reaches zero.
9. The shell dispatches displayCloseAdButton on the EBBase object.
10. The button in the SWF hears the displayCloseAdButton event, and the
button is made visible.
11. After finishing interaction with the ad, the user clicks X Close to close the ad.
12. EBBase.CloseAd() is called by the close button.
13. EBBase.currentAssetRef is variable that holds a reference to the main timeline.
• This creative template listens for the startAd event from the shell and, once
heard, sends the playhead to the intro keyframe..
There is logic that handles the custom Click_Main clickthrough launched whenever
the user clicks the ad's background.
• content: The playhead stops here, and the main ad experience plays. Place your
main ad content here for the collapsed (unexpanded) view. The icons will be
displayed in the ad, when the respective cuepoint in the video is ellapsed.
• mc_content contains all graphics and logic for expanding the ad. You can edit
this movie clip to change the creative's graphics.
• expand: The expansion animation starts from this frame. When expandAd()is
called, AdEvent.EXPAND is dispatched, and the playhead goes to the expand
frame.
• expanded: The playhead stops here, and the main expanded ad experience
plays. The expansion animation ends on this frame, expandComplete() is
called, and AdEvent.EXPAND_COMPLETE is dispatched.
• mc_ExpandContent: Contains all graphics of the panel section.These three
sections are on the labeled keyframes Panel1, Panel2, Panel3 and Panel4,
respectively.
• mc_Panel1: Contains logic and graphics of panel 1.
• mc_Panel2: Contains logic and graphics of panel 2.
• mc_Panel3: Contains logic and graphics of panel 3.
• mc_Panel4: Contains logic and graphics of panel 4.
• Each of the panel contains following.
• Submenu: Contains logic and graphics for icon that will open therespective tab.
• Video Gallery Tab: Contains logic and graphics for video gallery and
video player to display the respective selected video. Class VideoListTemplate is
associated with working of video gallery.
• Image Gallery Tab: Contains logic and graphics for image and display the
respective selected image. Class ImageListTemplate is associated with working
of Image gallery.
• Map Tab: tab for holding a Map component as and when needed.
• retract : Retract animations starts from here. When retractAd() is called, the
AdEvent.RETRACT event is dispatched and the playhead goes to the retract
frame.
1. Edit the close button, if required. Double-click the button instance to enter its timeline for
editing.
The close button included in this template includes logic to handle whether it appears.
By default, the button's visible property is false. The first frame of this movie clip
includes a listener for the displayAdCloseButton event. If this event is heard, the
button's visibility is turned on and the logic for handling closing of the ad is turned on.
When the close button is clicked, EBBase.CloseAd() is called.
• Edit the animation movie clip, if required. Double-click the movie clip instance to enter
its timeline for editing.
• Edit the expand content, if required. Double-click the button instance to enter its
timeline for editing.
The mc_ExpandContent movie clip included in this template includes logic to handle
jumps to different sections of the expand panel.
expandAd(expandID:String):void
Expands the ad by enlarging the clipping area to reveal the entire stage. Parameters
expandID:String – Expansion ID. Pass Ad.ID_AUTO for auto expansions and
Ad.ID_DEFAULT for user expansions.
expandComplete():void
Customizable function that is called upon a completed expansion.
retractAd(bAuto:Boolean = false):void
Retracts the ad, and then invokes the userretract action. Parameters
bAuto:Boolean – If true, the retraction is tracked as auto-initiated; false, tracked
as user-initiated.
retractComplete():void
Customizable function that is called upon a completed retraction.
All events are dispatched off of EBBase.
EBAudioStateEvent.AUDIOSTATE_CHANGE
The EBAudioStateEvent.AUDIOSTATE_CHANGE event should be dispatched using the EBBase class.
Example
var ismuted:Boolean =
false; var volume:Number =
0.6 var
e:EBAudioStateEvent = new
EBAudioStateEvent(EBAudioStateEvent.AUDIOSTATE_CHAN
GE, ismuted, volume); EBBase.dispatchEvent(e);
These event subtypes are found in the userAdEventHandler() function. Their switch
statements may be edited to suit your needs.
AdEvent.START
Dispatched when the ad asset has fully loaded and the ad is ready to start.
AdEvent.EXPAND
Dispatched when the ad starts expanding.
AdEvent.EXPAND_COMPLETE
Dispatched when the ad has completed expand.
AdEvent.RETRACT
Dispatched when the ad starts retracting.
AdEvent.RETRACT_COMPLETE
Dispatched when the ad has completed expand.
AdEvent.CLICK
Dispatched when the user clicks through from the ad.
AdEvent.PAUSE
Dispatched when the player instructs the ad to pause.
AdEvent.UNPAUSE
Dispatched when the player instructs the ad to resume.
AdEvent.ICON_CLICK
Dispatched when clicking on the icon. The following properties are available:
• iconHitArea:MovieClip – a reference to the icon's hit area object.
• icon:MovieClip – a reference to the icon movie clip.
AdEvent.ICON_ROLL_OVER
Dispatched when rolling over on the icon. The following properties are available:
• iconHitArea:MovieClip – a reference to the icon's hit area object.
• icon:MovieClip – a reference to the icon movie clip.
AdEvent.ICON_ROLL_OUT
Dispatched when rolling over on the icon. The following properties are available:
• iconHitArea:MovieClip – a reference to the icon's hit area object.
• icon:MovieClip – a reference to the icon movie clip.
AdEvent.CHANGE
Dispatched when the expanded panel's section changes. The following properties are available:
• sectionName:String – The name of the section the panel is changing to.
This template does not contain any custom variables.
To set up an In-Stream Menu ad in the Sizmek MDX Platform:
1. Go to Manage > Ads.
2. Click New and select Create New Ad.
3. In the Ad Name field, enter a name.
4. For Ad Format, under the Other section in the drop-down list, select In-Stream Video.
5. From the VAST Template Format drop-down list, select Menu Ad.
6. Expand the Creative section, and then expand the Linear sub-section.
7. Click Add, and then browse to and select your SWF.
8. In the Support VPAID column of the table, select the checkbox.
9. In the Clickthrough URL column, enter a clickthrough URL.
Note: The value entered in this field is used as the ad’s default clickthrough even if there
is already a value defined in the ad’s main Clickthrough URL text field on the
same page. If this field is left empty, the main clickthrough URL is the default
clickthrough.
10. Click Save.
Notice
The information contained in this document is pro prietary and confidential to Sizmek Technologies, Inc. and/or any of its affiliated companies ( Sizmek ) . Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its a uthorized 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 © 2012 Sizmek Technologies, Inc. All rights reserved.
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 wi thout 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 Siz mek. All other trademarks are the property of their respective owners.