using this template. The VPAID shell SWF handles the ... · using this template. The VPAID shell...

12

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.