PRODUCTION GUIDE. Adform MRAID 3D Cube (300x250)

Transcription

1 PRODUCTION GUIDE Adform MRAID 3D Cube (300x250)

2 Production Guide 1 Table of Contents MRAID 3D Cube (300x250) 2 User Experience 2 Creative assets 2 Creating the walls 3 Customizing the cube 4 Manifest.json file 5 Other 5

3 Production Guide 2 MRAID 3D Cube (300x250) The format consists of an HTML asset and images, videos or HTML content as cube walls. User Experience The format consists of a 300x250 HTML ad with four or more alternating panels. On the initial visit, the first panel is displayed. The cube automatically spins through all panels. The user can navigate among the panels on swipe. All panels (except video panels) accommodate a link to the predefined landing page. Creative assets The following items are to be delivered by a creative agency: An asset for each wall, which could be an image, a video or a HTML file. Double sized images are recommended for better display on higher DPI displays (for ex. Retina and 600x500 images). The banner can be adjusted to your custom size just change the width and height of the banner in manifest.json file. The cube works with any amount and kind (HTML, video, image) of assets. If there are less then 4 assets, they will be duplicated to fulfill 4 walls, and if there are more than 4 assets, the cube will have the same amount of walls as there are of creative assets. (Optional) A poster for the video, if there will be a video wall (the wall will be black before playing the video if no poster will be provided). (Optional) Image for the navigation bars (arrows), if they will be used and the standard navigation will not fit for your needs. You only need 1 image, facing right for horizontal cube and facing up for vertical cube.

4 Production Guide 3 Creating the walls The walls are made from assets. Image and video walls can be assigned either in additional assets or included in the banner zip file. If the cube will contain html content, the assets must be stored inside the banner zip file. Please see this example on how to create HTML content and video walls (you can find this part of code inside the index.html file): new Adform.Cube( vertical: false, autorotate: 3000, swipeeventstep: 60, customnavigationicon: false, assets: [ "assets/wall1.png", type: "video", src: "assets/video.mp4", poster: "assets/wall2.png", id: "mytestid" ); ],, type: "html", src: "assets/wall3.html", input: false type: "image", src: "assets/wall4.png", clicktag: "myclicktagname" // (Optional) // (Optional) Add s a ID for the video container DIV so you can access it later // (Optional) Enables or disables user input on the html content, is true by default // (Optional) You can use a custom clicktag name instead of the standard clicktag, clicktag2 and forth.. Info: Please see our template MRAID 3D Cube with Video to see an example of implementing a video wall.

5 Production Guide 4 Customizing the cube The file index.html can be adjusted to customize the cube. These are the values that can be changed: vertical set to true if you want the cube to roll vertical autorotate the value will be a interval to automatically rotate the cube. It is defined in miliseconds and should be set to 0 if the cube should not auto rotate. User interaction will cancel the auto rotation. swipeeventstep defines how much the user needs to swipe horizontally to fire the User swipe event. Value 60 is default. assets this object should define the assets location if the assets won t be loaded from Additional assets in Adform system. The assets can be undefined if they will be loaded from the system. customnavigationicon you can change the default navigation blur to your own image (for example custom arrow). You only need 1 image, facing right for horizontal cube and facing up for vertical cube. This value should be a link to the image, for example assets/arrow.png. navigation can be set to true if you want to have the navigation on the wall. The value has to be inside an asset object. This is an example of an image wall with navigation: type: "image", src: "assets/wall4.png", navigation: true polite can be set to true if you want to load the videos politely (the loading will start only when more then 50% of the banner will be seen). The value has to be inside an asset object. This is an example of an image wall with navigation: type: "video", src: "assets/video.mp4", poster: "assets/poster.png", polite: true onwallin, onwallout and onwallalign events If you have a html wall, you might want to call some functions on these events. You can specify a function, which will be executed on the event. This is a HTML wall, which will have its function stopanimation called when the wall will be rolled out: type: "html", src: "assets/wall2.html", onwallin: "stopanimation"

6 Production Guide 5 Manifest.json file Manifest.json file should define the ad dimensions, title, user events and the clicktag s. These values can also be modified in Adform system or when working with the banner in HTML Studio. Other values are left as is most of the times. Info: There should be the same amount of clicktag s as of creative assets. "version": "1.0", "title": "Mobile 3D Cube", "description": "Mobile 3D Cube with standard 4 walls (300x250)", "width": 300, "height": 250, "events": "enabled": 1, "list": "1": "User swipe", "clicktags": "clicktag": " "clicktag2": " "clicktag3": " "clicktag4": " "source": "index.html" Other For any questions please contact technical@adform.com.