Sizmek Formats. MindMap. Build Guide

Transcription

1 Formats MindMap Build Guide

2 Table Of Contents Overview... 4 Supported Platforms... 4 Specifications... 4 Known Issues... 4 Ad Behavior Screenshots... 5 Initial State... 5 Expand State... 6 Template Included Files... 7 Setting up in Workshop... 7 Important notes... 8 Configuring in Flash... 8 Banner... 8 Panel Editing productdetails.xml Format API Public Methods Events Setting up in Platform Custom Variables Configuring in Workshop Configuring in Platform Custom Variables Definitions Change Log

3 3

4 Overview The Mindmap is an ad format that showcases products in several separate units, each moving independently to create a parallax movement effect. The following illustration shows the Mindmap's initial view, with three products in a 300 x 600 banner. The products that appear here are defined with MediaMind's Smart Versioning. Ad starts three second countdown once user mouse over a product. If the user move mouse out of the product, the countdown is cancelled. However, if the user stays on the product, the ad expands. When expanded, the Mindmap shows six products in a 974 x 600 panel as illustrated below. The selected product is highlighted in the center, while five other products in the same category hover around the selected product. Clicking a product will select and center the product, and the five related products will be updated. When user mouse over a product for three seconds it expands to show more details about the product. Browsing through the products leads users to even more products. Users can also mouse over Select a Category to view a different category of products, such as home theaters, televisions, and cameras. These products and their details are all defined in an XML file. All 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 Windows XP/7/8 Mac OSX 10.8 & 10.9 Supported Browser Version Internet Explorer 8+, Firefox, Chrome, Safari Firefox, Chrome, Safari Specifications Supports ActionScript 3.0. Supports Flash Player 9 and above Preview only available on tag level Supports Old and New Client. Known Issues None. 4

5 Ad Behavior Screenshots Initial State 5

6 Expand State 6

7 Template Included Files Filename mindmap_banner.fla mindmap_panel.fla ProductDetails.xml 1.png, 2.png,, 36.png default_image_300x600.jpg greensock.swc MindmapBanner.as MindmapPanel.as ProductThumbnail.as AdEvent.as Combobox.as DashedLine.as Description 300 x 600. The FLA template for the in-page banner portion. 974 x 600. The FLA template for expanded state. Contains all the product details and their categories. Placeholder images used in template. Default image used in template. Greensock library. Contain all banner logic, Please do not edit this file. Contain all panel logic, Please do not edit this file. Actionscript file for product thumbnail, Please don t edit this file Actionscript file contains Ad events, Please don t edit this file Actionscript file contains combobox logic, Please don t edit this file Actionscript file dashed line logic, Please don t edit this file Setting up in Workshop In your file browser, browse to and run the MindMap MXP (MindMap.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 > MindMap folder, and select the template. 7

8 Click Create. Important notes Previews and QA should be done at the tag-level for the most accurate results. The countdown timer is aligned in the code so that it will always stay within view. More products do not appear for products without any related products. The hand cursor appears only on the View Details button for products without any related products. The selected product has a graphic to show that it is currently selected. Configuring in Flash Banner The Banner is the 300 x 600 unit containing initial state content. This unit contains up to three products with parallax movement within the boundary of banner. It also launches the Panel. 8

9 To customize the Banner: Open mindmap_banner.fla. Familiarize yourself with the template. Frame 1 contains EBBase.Init(this), Please don t remove this code. Frame 2 contains logic to check if Smartversion is loaded or not. If Smartversion is loaded then only next frame will be showed. Frame 3 contains all event listeners and initializing the Mindmap banner class that handle all the banner logic. o MindmapBanner.getInstance() : will return Mindmap banner class object. This class is created on single tone logic so that only single object will be created of this class. o mindmap_banner.init(this, this.container_mc) : Will initialize the class by passing stage reference and the container movieclip that holding the product thumbnails. o When loaded, a short animation plays that brings all layers within view. o The content layer contains all the parallax layers. You can customize these by entering their timelines until you get to the individual "windows," which are instances of the container_mc movie clip. Note: You may graphically customize the objects, but do not change their dimensions, layout, or instance names. o All the product thumbnails are in container_mc. The product thumbnails themselves are use ProductThumbnail (in the library) as a base movie clip. image_mc contains the product image. title_txt contains the product name subtitle_txt contains a short description of the product. To define the products that appear in the Banner, in the Mediamind Workshop panel, go to the SmartVersion tab and enter all necessary information 9

10 Each tab represent product, each product contains following information o Product Image: To update product image for any of the three products, select Product Image from Smart items panel and select image_mc row. A popup will appear for selecting other image. o Title: To update product title of any product. Select Title row from Smart Items panel in left and then select row showing title_text. A popup will appear asking for new text. o Sub Title: To update product title of any product. Select Sub Title row from Smart Items panel in left and then select row showing subtitle_text. A popup will appear asking for new text. o Id: Assign product id to each product, whenever the product is clicked following id is use to load product details in panel. Please make sure product with this ID is available in ProductDetails.xml Click on save. Publish the FLA. Panel The Panel is the 974 x 600 unit containing expanded state content. It shows six products at a time, with the selected product highlighted at the center and five related products hovering around the selected product. To customize the Panel: Open mindmap_panel.fla. Familiarize yourself with the template. Frame 1 contains EBBase.Init(this), Please don t remove this code. Default expand animation will play and playhead only stops at frame 20. Frame 20 contains all event listeners and initializing the Mindmap panel class that handle all the panel logic. o MindmapPanel.getInstance() : will return Mindmap panel class object. This class is created on single tone logic so that only single object will be created of this class. o mindmap_panel.init(this) : Will initialize the panel class by passing stage reference. o When panel loaded, a expand animation will play and brings all layers within view. o The content layer contains all the parallax layers. You can customize these by entering their timelines until you get to the individual "windows," which are instances of the container_mc movie clip. Note: You may graphically customize the objects, but do not change their dimensions, layout, or instance names. o All the product thumbnails are in container_mc. The product thumbnails themselves are use ProductThumbnail (in the library) as a base movie clip. o image_mc contains the product image. o title_txt contains the product name o subtitle_txt contains a short description of the product. 10

11 Editing productdetails.xml Open productdetails.xml in a text or XML editor. This file contains all the products to appear in the Panel. Edit productdetails.xml according to the following XML structure: o <categories> Contains all the categories. Do not edit this tag. <category> A category. Contains the following attributes: id: A category ID number. This must be unique among all categories. producttoshow: The ID of the product to show when this category is loaded. label: The name of the category as displayed in the Select a Category list. o <product> A product. Contains the following attributes: id: A product ID number. This must be unique among all products. name: A product display name. imageid: The ID of the image to be loaded for this product. categoryid: The ID of the category to which this product belongs. relatedproducts: A comma-delimited list of IDs of all the products related to this product. You can enter up to five related product IDs. If this attribute is blank, the product thumbnail will not be clickable. url: The URL of the product's page. This URL is launched when the user clicks the View details button in an expanded thumbnail. Note: If this product is the producttoshow of a category, make sure you do not leave this attribute blank. Otherwise, other products in the category may not be accessible. <copy> A detailed description of the product. This is displayed when the user expands the product panel by mousing over it. Format API The API is defined in MindmapBanner.as and MindmapPanel.as, used to abstract some of the ad s lower level logic, exposing the core functionality you might use when building the Mindmap format. Public Methods These functions are used by the format to handle ad playback. There is also additional code to expose these functions to the JavaScript, code to add collapse and expand functionality to the collapse/expand button. getinstance():mindmapbanner Returns a single instance of the MindmapBanner class to avoid creating multiple instances with inconsistent runtime values. For more information regarding this technique you can research the Singleton design pattern. 11

12 getinstance():mindmappanel Returns a single instance of the MindmapPanel class to avoid creating multiple instances with inconsistent runtime values. For more information regarding this technique you can research the Singleton design pattern. expand(sp:movieclip):void Expands the panel. Parameters sp:movieclip Reference to selected product movieclip in banner. collapse():void Collapse the Ad. addjseventlistener(eventtype:string, callback:function, interad:boolean = false):string Calls out to javascript to subscribe to the various ad events listed below. Parameters eventtype:string The type of ad event to listen for. The specific ad events listed below will be dispatched by default. callback:function The flash function you want to be notified when the event is dispatched. interad:boolean Setting this value to true indicates that the event may come from another ad on the page. You will still receive events of the same type from your ad. Return Value This function returns a string that corresponds to a unique ID held in javascript. This ID is used to unsubscribe from an event if necessary. removejseventlistener(callbackid:string):void Calls out to javascript to unsubscribe from the various ad events listed below. Parameters callbackid:string Returned from the addjseventlistener function corresponding to a unique ID held in javascript. dispatchjsevent (eventtype:string, param:object = null):void Calls out to javascript to call who subscribe event. Parameters eventtype:string The type of ad event to listen for. The specific ad events listed below will be dispatched by default. Param:Object Option parameter if need to pass to listener. 12

13 Events * All Event callbacks should accept an event parameter typed as an Object. Ex: function handleevent(event:object):void * The event object passed to the callback will always contain an event type. Ex: trace(event.type) //expandcomplete AdEvent.START Dispatched when the ad has finished loading and is ready to start. AdEvent.CLICK Dispatched upon a user click-through. AdEvent.EXPAND Dispatched when an expansion to the external panel is requested. AdEvent.RETRACT Dispatched when a retraction from the external panel is requested. AdEvent.RETRACT_COMPLETE Dispatched when a retraction from the external panel has completed. Setting up in Platform Uploading Dynamic content After uploading Ad to platform you have you need to manually upload productdetails.xml Once Ad is uploaded to platform, platform will give alert of uploading Dynamic content. Advanced Features > Dynamic Content Scan for Dynamic content Select producdetails.xml Upload productdetails.xml to platform from you Ad folder. Select uploaded productdetails.xml from Ad folder on platform. Click on Select and save. After uploading dynamic content xml to platform your final screen will look like this. 13

14 Applying Custom Scripts 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 : Old Client Delivery : *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. 14

15 When are done click the Save button. When you upload the ad these values will maintain their state in the platform. 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 Name:Type Default Value Description Accepted Values mdautorepositioninterval:integer 0 If the value is greater than 0 the default panel will be automatically repositioned to the top left corner of the ad s banner. This happens on a timed interval that will run according the amount of milliseconds entered. mdeyedivzindex : String 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. mdtrackbyproductid:boolean No If yes, tracking will be fired based on product id. If No, tracking will be fired based on produt thumb position appearing in panel. >=0 >=0 true/false Mindmap tracking Click_Main sent EVERY TIME the user clicks through on the banner Click_Product_N sent EVERY TIME the user clicks through on the View Details. N will be thumbnail id User_Click_Prev_Product 15

16 sent EVERY TIME the user clicks on a prev product icon. User_Click_Center_Product sent EVERY TIME the user clicks on a center product icon. User_Click_Product_N sent EVERY TIME the user clicks on a product icon. N will be thumbnail id Change Log Release: May 26, 2014 ( v 1.4 ) Sizmek rebranding ZXP released 16

17 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 without notice. 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.