37
London London April 2005 April 2005 Creating Creating Eyeblaster Eyeblaster Ads Ads The Rich Media The Rich Media Platform Platform Eyeblaster Eyeblaster

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

Embed Size (px)

Citation preview

LondonLondonApril 2005April 2005

Creating Creating Eyeblaster Eyeblaster AdsAds

The Rich Media The Rich Media PlatformPlatform

EyeblasterEyeblaster

General GuidelinesGeneral Guidelines

Simple ExamplesSimple Examples

Advanced ExamplesAdvanced Examples

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 them (Eyeblaster Flash Extension Package).

Gen

era

l G

uid

elin

esFrom Flash Asset to Eyeblaster From Flash Asset to Eyeblaster

AdAd

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.

Gen

era

l G

uid

elin

es

Eyeblaster Flash ExtensionEyeblaster Flash Extension

The Rich Media Ad Platform

Use the Eyeblaster actions (from the flash actions panel) to add Eyeblaster actions to your movie.

Gen

era

l G

uid

elin

es

Eyeblaster Flash ExtensionEyeblaster Flash Extension

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

Gen

era

l G

uid

elin

es

Eyeblaster Flash ExtensionEyeblaster Flash Extension

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 than 18 fps.

Ad size should be less than 2.2 MB.

Gen

era

l G

uid

elin

es

Eyeblaster GuidelinesEyeblaster Guidelines

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.

Gen

era

l G

uid

elin

es

Eyeblaster GuidelinesEyeblaster Guidelines

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 neededfscommand(“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

Gen

era

l G

uid

elin

es

Eyeblaster FSCommandsEyeblaster FSCommands

General GuidelinesGeneral Guidelines

Simple ExamplesSimple Examples

Advanced ExamplesAdvanced Examples

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 ads usually contain a close button and an interaction (at least one) for the clickthrough URL.

Sim

ple

Exam

ple

s

Creating a Floating AdCreating a Floating Ad

Close button is used by the user in order to close the ad before the ad’s display period ends.

On (release) { fscommand(“ebQuit”); } S

imp

le E

xam

ple

s

Close ButtonClose Button

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 or more interactions.

Sim

ple

Exam

ple

s

InteractionsInteractions

Default Interaction call:

On (release) { fscommand(“ebInteraction”,””); }

Custom Interaction call:

On (release) { fscommand(“ebInteraction”,”blueCar”); }

Sim

ple

Exam

ple

s

InteractionsInteractions

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…

Sim

ple

Exam

ple

s

Timer InteractionsTimer Interactions

Floating Ad Exercise

Sim

ple

Exam

ple

s

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.

Sim

ple

Exam

ple

sCreating Creating an Expandable Banneran Expandable Banner

Automatic expand/retract can be defined in the Eyeblaster interface. In this 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, each call to open a panel, will automatically close an already open panel.

Creating an Expandable BannerCreating an Expandable Banner

Sim

ple

Exam

ple

s

Expandable Banner Exercise

Sim

ple

Exam

ple

s

Creating an Expandable BannerCreating an Expandable Banner

General GuidelinesGeneral Guidelines

Simple ExamplesSimple Examples

Advanced ExamplesAdvanced Examples

Additional assets are usually used when we want to load additional content into the ad on a user interaction.

Recommended for heavy ads. Load an initial flash first (up to 100K) and call the additional asset when needed (automatically or on 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…)

To test add the following code: if (typeof(_root.ebMovie1) == “undefined”)

_root.ebMovie1 = “http://....”; // additional asset URL

Ad

van

ced

Exam

ple

s

Additional AssetsAdditional Assets

This 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 automatically expands only once a day. Other views of the same ad in the same day will only show the banner.

• User preferences – the first ad displays a choice of colours for a car - red, blue, green - from which the user selects red. The next ad will display the car in red.

Ad

van

ced

Exam

ple

s

Behavioural AdsBehavioural Ads

To implement a behavioural ad, use the Eyeblaster “CreativeState” component.

The feature is implemented by storing the information as a shared object on the user’s computer.

Ad

van

ced

Exam

ple

s

Behavioural AdsBehavioural Ads

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.

Ad

van

ced

Exam

ple

s

Behavioural Ads - ExerciseBehavioural Ads - Exercise

Initialization (optional):myState.setStatePersistencyLevel(“campaign”);myState.setStatePersistencyLevel(“ad”);

Get:value = myState.getState(“stateName”);

Set:myState.setState(“stateName”,”stateValue”);

Ad

van

ced

Exam

ple

s

Behavioural Ads - APIBehavioural Ads - API

Behavioural Ad - Exercise

Behavioural AdsBehavioural Ads

The data capture feature allows you to create ads with forms that capture data, without the need for the advertiser to host a dedicated database and back-end server application.

The data is kept on the Eyeblaster servers and is accessible for downloading by the agency.

The data capture feature allows 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.

Ad

van

ced

Exam

ple

sData Capture Data Capture and User Pollingand User Polling

For implementing the data capture and/or polling features use the ebDataCapture.as include file.

The ebDataCapture.as is included on the same level as the form variables.

The form is defined in the Eyeblaster interface. The form name and fields in the asset must match those in the interface.

Flash 6 is required for this feature.

Ad

van

ced

Exam

ple

s

Data Capture and User PollingData Capture and User Polling

For submitting data call:ebSaveForm(“formName”);ORebSaveFormSecured(“formName”);

If the form definition contains an email to be sent to the user on 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 emailORebSaveForm(“formName”,emailAddr,false); - for text email(same for ebSaveFormSecured)

Ad

van

ced

Exam

ple

sData Capture Data Capture and User Pollingand User Polling

The Rich Media Ad Platform

Data Capture and User PollingData Capture and User Polling

Data Capture and User PollingData Capture and User Polling

Data Capture and User PollingData Capture and User Polling

For the polling feature, use the following function to get a URL with the most updated aggregated data:getFormDistributionURL(“formName”);

The URL will point to an XML file with the aggregated data. Either use a graph component or manually parse the XML to get the data.

Ad

van

ced

Exam

ple

s

Data Capture and User PollingData Capture and User Polling

The Rich Media Ad Platform

Data Capture and User PollingData Capture and User Polling

Data Capture and User PollingData Capture and User Polling

Floating Ad Exercise

Ad

van

ced

Exa

mp

les

QuestionsQuestions LondonLondonApril 2005April 2005

Creating Creating Eyeblaster Eyeblaster

AdsAds