1. London April 2005 London April 2005 Creating Eyeblaster Ads The Rich Media Platform The Rich Media Platform Eyeblaster

2. General Guidelines Simple Examples Advanced Examples

3. Creating an Eyeblaster ad is easy – only a few guidelines should be followed and every flash asset can be used to create an Eyeblaster ad. No preloader is needed – We make the preloader for you. Eyeblaster is building tools to make your life easier – don’t forget to use it (Eyeblaster Flash Extension Package) General Guidelines From Flash Asset to Eyeblaster Ad

4. The Eyeblaster Extension contains a set of custom scripts, components and templates. With the Eyeblaster Extension designers can add rich, complex capabilities to the flash ads quickly and easily. The latest version of Eyeblaster Extension can always be downloaded from the Eyeblaster admin interface. The extension should be installed using the Macromedia extension manager. General Guidelines Eyeblaster Flash Extension

5. The Rich Media Ad Platform Use the Eyeblaster actions (from the flash actions panel) to add Eyeblaster actions to your movie. General Guidelines Eyeblaster Flash Extension

6. Use the Eyeblaster components for more advanced features, such as: Embedding video in your ads. Creating video strip. Loading of Dynamic Data. State based ads. Data capture and polling General Guidelines Eyeblaster Flash Extension

7. First frame should not contain animation, sound or user’s action script. Eyeblaster’s include file should be included in the first frame of the movie. #include “ebFlashActions.as” Frame rate should be less then 18 fps. Ad size should be less then 2.2 MB. Note that there are special restriction on sizes of specific assets in specific templates. General Guidelines Eyeblaster Guidelines

8. Create the asset as light as possible – just as you would do for any flash asset you are creating for any other purpose. Publisher specs should always be checked before creating a flash asset for a specific publisher. General Guidelines Eyeblaster Guidelines

9. FSCommands are used for sending events (commands) from the flash to the Eyeblaster script. You can use the Eyeblaster actions (in the actions panel) in order to add the Eyeblaster’s FSCommands to your movies. Note that some of the FSCommands require additional arguments that you should manually add to the command. Examples: fscommand (“ebQuit) – no additional parameter is needed fscommand(“ebInteraction”,””) – no additional parameter is needed in case you want the default interaction. fscommand(“ebInteraction”,”blueCar”) – by adding the name “blueCar” as the second argument, the interactions named “blueCar” will be called General Guidelines Eyeblaster FSCommands

10. General Guidelines Simple Examples Advanced Examples

11. A floating ad contains a flash asset that floats above the HTML content. The asset used for the floating ad must be created according to Eyeblaster Guidelines. Eyeblaster floating ads are transparent. Floating ad usually contains a close button and an interaction (at least one) for the clickthrough URL. Simple Examples Creating a Floating Ad

12. Close button is used by the user in order to close the ad before the ad’s display period ends. On (release) { fscommand(“ebQuit”); } Simple Examples Close Button

13. Interactions are usually used to direct the user to a destination clickthrough URL. Interactions can also be used to report the user’s interactions with the ad (without directing to a destination URL). Automatic interactions can be embedded in the movie to mark that a specific part of the movie was shown to the user. The clickthrough URL is not hard coded in the flash asset, but defined in the Eyeblaster Interface. An ad can contain one of more interactions. Simple Examples Interactions

14. Default Interaction call: On (release) { fscommand(“ebInteraction”,””); } Custom Interaction call: On (release) { fscommand(“ebInteraction”,”blueCar”); } Simple Examples Interactions

15. Timer interactions are used to measure the user’s interaction time with an object in the movie. You should start and stop a timer in order to use a timer interactions: On (release) { fscommand(“ebStartTimer”,”playGame”); } On (release) { fscommand(“ebEndTimer”,”playGame”); } Eyeblaster handles some of the timer interactions automatically. For example: ad duration, interaction time, panel duration and more… Simple Examples Timer Interactions

16. Floating Ad Exercise Simple Examples

17. An expandable banner is a flash banner ad that launches multiple flash panels via click, rollover or auto initiation. The banner is a flash banner that is loaded with the page. The panels are separate flash movies that are loaded politely and appear adjacent to the banner as it expands, or freely float over the web page. The panel positioning is defined in the Eyeblaster interface. Simple Examples Creating an Expandable Banner

18. Automatic expand/retract can be defined in the Eyeblaster interface. In that case no special command should be added to the flash banner/panel. For opening a specific panel, call: fscommand(“ebShow”,”redPanel”); For hiding a specific panel, call: fscommand(“ebHide”,”redPanel”); If show single panel option is selected in the Eyeblaster interface, a call to open a panel, will automatically close the currently open panel. Creating an Expandable Banner Simple Examples

19. Expandable Banner Exercise Simple Examples Creating an Expandable Banner

20. General Guidelines Simple Examples Advanced Examples

21. Additional assets are usually used when we want to load additional content into the ad upon a user interaction. Recommended for heavy ads. Load an initial flash first (up to 100K) and call the additional asset when needed (automatically or upon a user interaction). Each additional asset has an ordinal number. To call the additional asset from the flash – call: LoadMovie(_root.ebMovie1); - will load the movie which was marked with ordinal number 1. (Same for ebMovie2, ebMovie3…) Advanced Examples Additional Assets

22. Testing a flash movie which is loading an additional asset in the flash editor or in Preview asset option can be done, by adding the following code to the movie: if (typeof(_root.ebMovie1) == “undefined”) _root.ebMovie1 = “http://....”;// additional asset URL Advanced Examples Additional Assets

23. Behavioral Ads feature allows you to create ads that behave differently each time a user views them. Examples: “continuation” – the user plays a game. The next time the user will see the game (ad), the game will start from the last level the user reached. frequency cap – an expandable banner that will automatically open it’s panel only once a day. Other views of the same ad in the same day will only show the banner. User preferences – the first ad can display a choice of colors for a car. The user will choose a color, and the next ads will only show the car in the color that the user selected in the first ad. Advanced Examples Behavioral Ads

24. To implement behavioral ad, use the Eyeblaster “CreativeState” component. The feature is implemented by storing the information as a shared object on the user’s computer. Advanced Examples Behavioral Ads

25. The CreativeState component is part of the Eyeblaster Extension package. Drag and drop the CreativeState component into the stage. Give a name to the component’s instance. For example: myState. In the next frame you can call the component’s API. Advanced Examples Behavioral Ads - Exercise

26. Initialization (optional): myState.setStatePersistencyLevel(“campaign”); myState.setStatePersistencyLevel(“ad”); Get: value = myState.getState(“stateName”); Set: myState.setState(“stateName”,”stateValue”); Advanced Examples Behavioral Ads - API

27. Behavioral Ad - Exercise Behavioral Ads

28. Dynamic data feature allows you to create ads that change in real time throughout the campaign. Examples: flight prices, sport scores. The data can be served from the advertiser servers or from Eyeblaster servers. The data can be stored in TXT format or in XML format. Flash 6 is required. Advanced Examples Dynamic Data

29. To implement dynamic data, use the “DynamicContentManager” component (which is part of the Eyeblaster extension). Drag and drop the “DynamicContentManager” component into the stage. Give it a name. For example – myDynamicData. In the next frame you can call the component’s API. Advanced Examples Dynamic Data

30. Create a callback function for getting the data. For TXT data: function onDataLoaded(lvObj) { _root.data1 = lvObj.data1; _root.data2 = lvObj.data2; } For XML data: function onDataLoaded(xmlObj) { firstChild = xmlObj.firstChild; _root.data1 = firstChild.attributes.data1; } Advanced Examples Dynamic Data

31. The data files should be updated by the advertiser in the Eyeblaster interface. For our example we’ll use “myData” (myData.txt or myData.xml) as the data name, and “onDataLoaded” as the callback name. For data in TXT format call: myDynamicData.ebLoadVars(“myData”,onDataLoaded); For data in TXT foramt call: myDynamicData.ebLoadXML(“myData”,onDataLoaded); Advanced Examples Dynamic Data From Eyeblaster Servers

32. Due to security restrictions, the ad, which is downloaded from Eyeblaster servers, can’t read data which is located on the Advertiser’s servers. We need an helper movie which will be able to get the data and pass it to the main movie (the ad). This helper movie is called a shim file. The shim file can be downloaded from the Eyeblaster interface and should be located on the advertiser’s servers in the same domain as the data file. The flash designer should get the shim file URL and the data file URL in order to create the ad. Advanced Examples Dynamic Data From Advertiser’s Servers

33. For our example we’ll use “http://serverName/shim.swf” as the shim file URL, “http://serverName/myData.txt” (or myData.xml) as the data URL and “onDataLoaded” as the callback name. Initialize the connection with the shim file by calling: myDynamicData.ebSetShimFileURL(“http://serverName/shim.swf”) In the next frame you can call: myDynamicData.ebLoadVarsFromExternalServer(“http://serverName/myD ata.txt”,onDataLoaded); - for TXT format OR myDynamicData.ebLoadXMLFromExternalServer(“http://serverName/myD ata.xml”,onDataLoaded); - for XML format Advanced Examples Dynamic Data From Advertiser’s Servers

34. The data capture feature allows you to create ads with forms that capture data without requiring the advertiser to host a dedicated database and a back-end server application. The data is kept on the Eyeblaster servers and is accessible for downloading by the agency. The data capture feature allow you to configure an email to be sent to the user after submitting the data. The user polling feature can return an aggregation of the captured data to the ad. Advanced Examples Data Capture and User Polling

35. For implementing the datacapture and/or polling features use the ebDataCapture.as include file. The ebDataCapture.as should be included on the same level as the form variables. The form should be defined in the Eyeblaster interface and the designer should know the exact form name and the exact form fields names. Flash 6 is required for this feature. Advanced Examples Data Capture and User Polling

36. For submitting data call: ebSaveForm(“formName”); OR ebSaveFormSecured(“formName”); If the form definition contains an email to be sent to the user upon submitting the data, and let’s assume the user’s email is updated in the flash variable “emailAddr” - call: ebSaveForm(“formName”,emailAddr,true); - for HTML email OR ebSaveForm(“formName”,emailAddr,false); - for text email (same for ebSaveFormSecured) Advanced Examples Data Capture and User Polling

37. The Rich Media Ad Platform Data Capture and User Polling

40. For the polling feature, you should use the following function in order to get a URL with the most updated aggregated data: getFormDistributionURL(“formName”); The URL will point to an XML file with the aggregated data. You can either use a graph component or manually parse the XML to get the data. Advanced Examples Data Capture and User Polling

41. The Rich Media Ad Platform Data Capture and User Polling

43. Floating Ad Exercise Advanced Examples

44. Question??? London April 2005 London April 2005 Creating Eyeblaster Ads