The following illustration shows the non-linear version of the ad, the ad floating above the white area where the publisher content would be.

Transcription

1

2

3 The In-Stream LogoKit is an In-Stream linear and non-linear ad format that plays in VPAID-compliant video players. The ad displays icons in the bottom-right corner of the player which, when clicked, open up different sections, such as a video gallery, a photo gallery, a Facebook page, and a Twitter post. The linear version of the ad can play before, after, and during commercial breaks between publisher content. The non-linear version plays during publisher content playback, for example, floating above the video. VPAID is an IAB protocol that standardizes the communication between video players and In-Stream video advertising. You can use the standardized In-Stream LogoKit 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 LogoKit 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: The following illustration shows the non-linear version of the ad, the ad floating above the white area where the publisher content would be.

4 In both versions of the ad, if the user clicks the icons, the ad transitions to the expanded view as illustrated below. This view contains a main content page, a photo gallery, a video gallery, and a Retract button to return the ad to the initial view. The illustrations below show an example video gallery and an example image gallery.

5 To view a demo of the linear version, click here. To view a demo of the non-linear version, click here. To download the template, click here. The following are known issues regarding the In-Stream LogoKit ad format: Linear and Non-Linear Format: FLA and SWF, ActionScript 3.0 and Flash Player 9 and above. All other specs vary by publisher. Video Optional. Specs vary by publisher.

6 Before You Begin Make sure you have the following resources available: The Sizmek Workshop or later. The In-Stream LogoKit installation MXP. Note: This format is compatible with ActionScript 3.0 and Flash Player 9 and later. Items LogoKit_vid_linear.fla LogoKit_vid_nonLinear.fla Description 640 x 336. FLA template for the linear creative. Contains a video player. 640 x 336. FLA template for the linear creative. stream_640x480_15s_300.flv Example video used by LogoKit_vid_linear.fla and LogoKit_vid_nonLinear.fla EyeblasterVideo.flv Example video used by LogoKit_vid_linear.fla and LogoKit_vid_nonLinear.fla greensock.swc LogoKit_linear.as LogoKit_nonLinear.as LogoKitAnimation.as AdEvent.as DynamicEvent.as Contains GreenSock tween classes Contains logic for expansion, retraction, and all events for the linear creative. Contains logic for expansion, retraction, and all events for the nonlinear creative. Contains logic for logo animation. Ad event class. Base class of AdEvent. To set up the In-Stream LogoKit in the Sizmek Workshop: 1. In your file browser, browse to and run LogoKit.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.

7 5. Expand the Sizmek Templates > Logokit folder, and select the template you want to use. 6. Click Create. 1. Open LogoKit_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:

8 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: 1. The startad event is dispatched. 2. The countdown reaches zero. 3. The shell closes the ad. 2. When user interacts with the ad: 4. The startad event is dispatched. 5. The user interacts with the ad. 6. The countdown reaches zero. 7. The shell dispatches displaycloseadbutton on the EBBase object. 8. The button in the SWF hears the displaycloseadbutton event, and the button is made visible. 9. After finishing interaction with the ad, the user clicks X Close to close the ad. 10. EBBase.CloseAd() is called by the close button. This creative template listens for the startad event from the shell and, once heard, sends the playhead to the intro keyframe. intro: This state can include an introductory animation that leads up to the content state. l content: The playhead stops here, and the main ad experience plays. Place your main ad content here for the collapsed (unexpanded) view. 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 and the Main, Photo Gallery, and Video Gallery sections. These three sections are on the labeled keyframes main, gallery, and video, respectively. There are also three buttons that send the playhead to these sections. mc_expandcontent: Contains all logic for switching between sections.

9 mc_videocontent: Contains the Video Gallery's logic. mc_gallerycontent: Contains the Photo Gallery's logic. mc_twittercontent: Contains the twitter's post logic. retract: Retract animations starts from here. When retractad() is called, the AdEvent.RETRACT event is dispatched and the playhead goes to the retract frame. 3. Edit the close button, if required. Double-click the button instance to enter its timeline for editing. 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. 4. Edit the animation movie clip, if required. Double-click the movie clip instance to enter its timeline for editing. The movie clip contains the code below with settings you can edit that change the appearance and behavior of the icons: /************************* useanimationsettings variable turn off the below setting. **************************/ useanimationsettings = true; /************************* * Animation Settings: ************************/ iconstartradius = 53; iconrestradius = 43; iconstartangle = 270; iconanglegap = -40; hideicononrolloff = false; useintroanimation = true; useanimationsettings: if true, the icons are arranged automatically through the various values in the code; if false, you must arrange all the icons manually. iconstartradius: The distance between the center of the big circle and an icon, as illustrated below. The mdiconstartradius custom variable overrides this value.

10 iconrestradius: The distance between the center of the big circle and an icon when the icon is resting (inactive), as illustrated below. The mdiconrestradius custom variable overrides this value. iconstartangle: The angle between the clockwise-most icon and the right-most edge of the big circle, going clockwise in degrees. The illustration below is for a value of 270. The mdiconstartangle custom variable overrides this value. iconanglegap: The space between two adjacent icons, going clockwise in degrees. The illustration below is for a value of -40. The mdiconanglegap custom variable overrides this value.

11 hideicononrolloff: If true, rolling off the logo section hides all the icons; if false, rolling off the logo section does not hide all the icons. The mdhideicononrolloff custom variable overrides this value. useintroanimation: If true, enables the intro animation; if false, does not enable the intro animation. The mduseintroanimation custom variable overrides this value. 5. The following code is also found in the ActionScript: mainhitarea = hitarea_btn; icons = [icon_1_mc, icon_2_mc, icon_3_mc, icon_4_mc, icon_5_mc]; iconshitarea = [hitarea1_btn, hitarea2_btn, hitarea3_btn, hitarea4_btn, hitarea5_btn ]; mainhitarea: The hit area used for roll off detection from the logo section. It is resized by the code using the value of iconstartradius and repositioned by the code so that the hit area's coordinates are (0,0) with the registration point at the center. icons: An array with references to the icons. To add or remove icons from the animation, add or remove the references to their movie clips within this array. Note: Every icon movie clip must contain a named instance of iconcontent_mc. The registration points of both the icon movie clip and the iconcontent_mc instance must be at their centers. iconshitarea: An array of the hit areas for each icon. The registration points of each hit area must be at their centers. Resize the hit areas manually according to the icon size or to your needs. 6. Edit the expand content, if required. Double-click the button instance to enter its timeline for editing. Video gallery Photo gallery Twitter post

12 7. Open LogoKit_vid_nonLinear.fla. 8. 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. This creative template listens for the startad event from the shell and, once heard, sends the playhead to the intro keyframe. intro: This state can include an introductory animation that leads up to the content state. l content: The playhead stops here, and the main ad experience plays. Place your main ad content here for the collapsed (unexpanded) view. 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 and the Main, Photo Gallery, and Video Gallery sections. These three sections are on the labeled keyframes main, gallery, and video, respectively. There are also three buttons that send the playhead to these sections. mc_expandcontent: Contains all logic for switching between sections. mc_videocontent: Contains the Video Gallery's logic. mc_gallerycontent: Contains the Photo Gallery's logic. mc_twittercontent: Contains the twitter's post logic. retract: Retract animations starts from here. When retractad() is called, the AdEvent.RETRACT event is dispatched and playhead goes to retract frame.

13 9. Edit the animation movie clip, if required. Double-click the movie clip instance to enter its timeline for editing. The movie clip contains the code below with settings you can edit that change the appearance and behavior of the icons: /************************* useanimationsettings variable turn off the below setting. **************************/ useanimationsettings = true; /************************* * Animation Settings: ************************/ iconstartradius = 53; iconrestradius = 43; iconstartangle = 305; iconanglegap = -40; hideicononrolloff = false; useintroanimation = true; useanimationsettings: If true, the icons are arranged automatically through the various values in the code; if false, you must arrange all the icons manually. iconstartradius: The distance between the center of the big circle and an icon, as illustrated below. The mdiconstartradius custom variable overrides this value.

14 iconrestradius: The distance between the center of the big circle and an icon when the icon is resting (inactive), as illustrated below. The mdiconrestradius custom variable overrides this value. iconstartangle: The angle between the clockwise-most icon and the right-most edge of the big circle, going clockwise in degrees. The illustration below is for a value of 305. The mdiconstartangle custom variable overrides this value. iconanglegap: The space between two adjacent icons, going clockwise in degrees. The illustration below is for a value of -40. The mdiconanglegap custom variable overrides this value.

15 hideicononrolloff: If true, rolling off the logo section hides all the icons; if false, rolling off the logo section does not hide all the icons. The mdhideicononrolloff custom variable overrides this value. useintroanimation: If true, enables the intro animation; if false, does not enable the intro animation. The mduseintroanimation custom variable overrides this value. 10. The following code is also found in the ActionScript: mainhitarea = hitarea_btn; icons = [icon_1_mc, icon_2_mc, icon_3_mc, icon_4_mc, icon_5_mc]; iconshitarea = [hitarea1_btn, hitarea2_btn, hitarea3_btn, hitarea4_btn, hitarea5_btn ]; mainhitarea: The hit area used for roll off detection from the logo section. It is resized by the code using the value of iconstartradius and repositioned by the code so that the hit area's coordinates are (0,0) with the registration point at the center. icons: An array with references to the icons. To add or remove icons from the animation, add or remove the references to their movie clips within this array. Note: Every icon movie clip must contain a named instance of iconcontent_mc. The registration points of both the icon movieclip and the iconcontent_mc instance must be at their centers. iconshitarea: An array of the hit areas for each icon. The registration points of each hit area must be center at their centers. Resize the hit areas manually according to the icon size or your needs. 11. 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. Video gallery Photo gallery Twitter post

16 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_CHANGE, ismuted, volume); EBBase.dispatchEvent(e);

17 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 i con : MovieClip AdEvent.ICON_ROLL_OVER Dispatched when rolling over on the icon. The following properties are available:

18 iconhitarea : MovieClip i con : MovieClip AdEvent.ICON_ROLL_OUT Dispatched when rolling over on the icon. The following properties are available: iconhitarea : MovieClip i con : MovieClip AdEvent.CHANGE Dispatched when the expanded panel's section changes. The following properties are available: sectionname:string

19 Custom variables change the behavior of the ad without needing to modify the ActionScript code in the ad assets or create your own custom JavaScript code. You can edit them in the Sizmek Workshop panel in Flash. To edit the In-Stream LogoKit's custom variables: 1. From the Sizmek Workshop panel's menu bar, go to Settings > Advanced Features. 2. Expand the Variables section. 3. Edit the variables as necessary. Variable Name Type Description mdiconstartradius Number default = 53 The distance between the center of the big circle and an icon, as illustrated below. mdiconrestradius Number default = 43 The distance between the center of the big circle and an icon when the icon is resting (inactive), as illustrated below.

20 mdiconstartangle Number default = 270 The angle between the clockwise-most icon and the right-most edge of the big circle, going clockwise in degrees. The illustration below is for a value of 305. mdiconanglegap Number default = -40 The space between two adjacent icons, going clockwise in degrees. The illustration below is for a value of -40. mdhideicononrolloff Boolean mduseintroanimation Boolean If true, rolling off the logo section hides all the icons; if false, rolling off the logo section does not hide all the icons. If true, enables the intro animation; if false, does not enable the intro animation.

21 To set up an In-Stream LogoKit ad in the Sizmek MDX Platform: 12. Go to Manage > Ads. 13. Click New and select Create New Ad. 14. In the Ad Name field, enter a name. 15. For Ad Format, under the Other section in the drop-down list, select In-Stream Video. 16. From the VAST Template Format drop-down list, select Logo Kit. 17. Expand the Creative section, and then expand the Linear sub-section. 18. Click Add, and then browse to and select your SWF. 19. In the Support VPAID column of the table, select the checkbox. 20. 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. 21. Click Save.

22