Updated: 7/29/2017
AdWonder™ Component Specification
Description
The AdWonder™ 6.0 Flash Component is designed to allow EyeWonder and Agency flash designers and developers to design and test EyeWonder advertising units without having to
leave the flash environment. All features of this product have been designed to include the necessary functionality for EyeWonder banner and expandable formats including video
functionality. The component is packaged as a single extensions file (AdWonder.mxp) that installs itself when the user double-clicks on the file. The extensions file will require
Macromedia Flash 8 Studio. The following EyeWonder functionality is added within the flash authoring environment:
“Drag and Drop” Component Library
The Drag and Drop Component Library adds drag and drop components to the components panel in Flash. The User can drag/drop the appropriate components to the ad unit for
multiple video screens, video buttons and testing functionality.
Methods and Code Hints
Methods are available when needed to add EyeWonder specific ActionScript to dynamically control functionality. By typing “EW.” within the ActionScript panel, all EyeWonder
standard methods will prompt. After choosing an EyeWonder method, the appropriate parameters will prompt within the function. To prompt video specific functionality, type
“EW.Video.” to see a complete list of video functionality. Within each component set, calling the methods will implicitly load in the appropriate component (for example, calling
EW.expand implicitly adds the expandable component). See descriptions of each component for the associated methods.
Important Note: Please create a layer on the first frame called “ewinit” and place the ActionScript “EW.initialize()”. Make sure nothing requiring
immediate reporting is on the first frame, as EW.initialize() is asynchronous and may not initialize everything immediately. EW.initialize() is required
to initialize the EyeWonder Reporting environment. Note: all AdWonder drag and drop components call EW.initialize(), so if you’re using drag and
drop components, adding EW.initialize() yourself might not be necessary.
©EyeWonder, Inc 2000-2017
Page 1 of 32
www.eyewonder.com
Updated: 7/29/2017
Events
Associated Video and Expandable Events are fired to allow for flexible ad design.
Commands
In order to add EyeWonder functionality after a creative has already been started, certain standard tasks, such as creating an expandable ad or adding video, will be available from
the commands menu within the flash authoring environment.
Templates
To create a new ad in any of our standard sizes, users will be allowed to select an EyeWonder type ad directly from the new document window in flash. The options for templates
will include banner and expandable templates with and without videos in various sizes.
Testing Component
In order to test the ad, users will have a drag and drop testing component that will include a user interface within the component inspector screen. The component inspector
screen will allow online access to the videos associated with the user’s account. The user will be able to enter in values for the video and for the clickthru in order to test all
functionality locally. If the testing component is on, all reporting and external interfacing will be turned off in order to prevent unwanted popup windows.
©EyeWonder, Inc 2000-2017
Page 2 of 32
www.eyewonder.com
Updated: 7/29/2017
Drag and Drop Components
EyeWonder standard Drag and Drop Components are available from the Components Library. To skin the buttons, simply double-click on the component and replace the image.
Alternately, you may replace the image in the ad library. You can drag the components from the components library onto the stage on any layer, and in any movie clip. The
components can be controlled as ordinary movieclips and are preprogrammed to perform standard functions as described below. The following objects will be available from the
EyeWonder Component menu:
Component
Audio On
Audio Off
Audio Slider
Audio Toggle
Clickthru
Façade
©EyeWonder, Inc 2000-2017
Component Inspector Parameters
targetVideo
Insert the video instance
name with which the
Audio On button is
associated. If not set, will
be associated with the first
video screen instance
(default name ewVideo).
targetVideo
Insert the video instance
name with which the
Audio Off button is
associated. If not set, will
be associated with the first
video screen instance
(default name ewVideo).
targetVideo
Insert the video instance
name with which the audio
slider should be
associated. If not set, will
be associated with the first
video screen instance
(default name ewVideo).
targetVideo
Insert the video instance
name with which the
Toggle button is
associated. If not set, will
be associated with the first
video screen instance
(default name ewVideo).
clickTag Label
Insert the name of the
clickTag as sent in from
the ad (as set through the
test component).
clickTag Report
Insert the label as
displayed for reporting
purposes. Do not enter
special characters or
punctuation.
stopVideo
Default true. Stops any
currently playing videos.
targetVideo
Insert the video instance
name with which the
facades should be
Page 3 of 32
Description
When pressed, turns the audio on if the
audio is currently off. If the audio is on,
the playback is unaffected.
When pressed, turns the audio off if the
audio is currently on. If the audio is off,
the playback is unaffected.
When dragged, adjusts the audio volume.
If video also has an associated audio
on/off toggle, the toggle state reflects the
current state of the audio volume.
When pressed, turns the audio off if the
audio is currently on, and turns the audio
on if the audio is currently turned off. In
order to show the state of the button, the
button needs to be placed in the timeline
before or at the same time as the video.
Adds clickthru functionality to the ad and
appends EW redirect information. You
must use either the drag and drop
clickthru component or the EW.clickthru
method for creating a clickable ad unit.
This allows for tracking by EyeWonder,
the 3rd party ad server (if used), and the
site ad server.
Displays the start Façade before the
video begins. Displays the pause Façade
when the video is paused. Displays the
www.eyewonder.com
Updated: 7/29/2017
Fast Forward
Offset
targetVideo
Pause
targetVideo
Play
targetVideo
videoIndex
Progress Bar
Allow Scrubbing
displayMode
targetVideo
associated. If not set, will
be associated with the first
video screen instance
(default name ewVideo).
Insert the number of
seconds to seek forward
on the video.
Insert the video instance
name with which the fastforward button is
associated. If not set, the
forward button will be
associated with the first
video screen instance.
Insert the video instance
name with which the
pause button is
associated. If not set, will
be associated with the first
video screen instance.
Insert the video instance
name with which the play
button is associated. If
not set, will be associated
with the first video screen
instance (ewVideo).
Insert the index integer of
the video that should be
played. If not set, will be
associated with the first
video instance (ewVideo)
Choose “False” if you
would prefer for the
progress bar to be readonly (not draggable).
Choose either Static,
Snap to Scrub or Show
Progressive Download.
Insert the video instance
name with which the
Toggle button is
associated. If not set, will
be associated with the first
video screen instance.
end Façade when the video is complete.
When pressed, fast-forwards the number
of seconds in the offset for the specified
video screen.
When pressed, pauses the video. If the
video is already paused, the video will not
be affected.
When pressed, plays the video from the
point at which it was paused or from the
beginning if stopped. If the video is
already playing and the video index is the
same as the current video, the video will
not be affected. If the video is a different
index than the current video, a new video
will play.
Shows the progress of the video. The
progress bar needs to be placed in the
timeline before or at the same time as the
video. There are three progress bar
modes:
Static – The scrubber displays the current
position of the video, but the bar remains
static
Snap to scrub – The scrubber displays
the current position of the video. The bar
width is determined by the position of the
scrubber.
Show Progressive Download – The
progress of the download is displayed by
the length of the progress bar, and the
©EyeWonder, Inc 2000-2017
Page 4 of 32
www.eyewonder.com
Updated: 7/29/2017
scrubber displays the current position of
the video. The scrubber cannot be
dragged past the end of the progress bar.
If Show Progress is shown, the ad will still
display Snap to Scrub for streaming
executions of the ad.
Replay
targetVideo
turnAudioOn
Rewind
Offset
targetVideo
Stop
doClear
targetVideo
Video Screen
©EyeWonder, Inc 2000-2017
audioInit
Insert the video instance
name with which the
replay button is
associated. If not set, will
be associated with the first
video screen instance.
Turns the audio on when
the replay button is
pressed (recommended).
Set to “True” if not set.
Insert the number of
seconds to seek backward
on the video.
Insert the video instance
name with which the
rewind button is
associated. If not set, the
rewind button will be
associated with the first
video screen instance.
Set to “True” if the video
screen should clear the
image/frame currently
displayed
Insert the video instance
name with which the stop
button is associated. If
not set, will be associated
with the first video screen
instance.
Set to either “On User
Click” or “autoStart” to set
how the audio starts when
the video begins to play.
Please note that almost all
sites require audio to start
on user click unless the
video starts on user click.
Default “On User Click”.
Page 5 of 32
Set allow scrubbing to “False” if the
scrubber should not fast forward or
rewind the video.
When pressed, starts the video from the
beginning, regardless of the current
position.
When pressed, rewinds the number of
seconds in the offset for the specified
video screen.
When pressed, stops the video and
closes the stream. If DoClear is set to
“True”, clears the currently display image
or frame.
NOTE: DoClear is especially helpful when
switching between videos or playing a
sequence of videos.
Displays the video associated with the
unit. The Video Screen can be resized,
tweened, put on the _root timeline or a
chile swf, or encapsulated in several
movieclips.
www.eyewonder.com
Updated: 7/29/2017
defaultVideoIndex
videoInit
videoEvents
videoEventTimes
videoFileID
Video Toggle
targetVideo
Set to the index
corresponding to the initial
video that should start
playing depending on
videoInitiation.
Set to either “On User
Click” or “autoStart” to set
whether or not the video
starts automatically.
Default “autoStart”.
An array of custom video
events. See setting timebased video events for
more information.
An array of custom video
event times. See setting
time-based video events
for more information.
An array of file Ids
associated with the
custom video event. See
setting time-based video
events for more
information.
Insert the video instance
name with which the
Toggle button is
associated. If not set, will
be associated with the first
video screen instance
(default name ewVideo).
When pressed, pauses the video if the
video is currently playing, and plays the
video if the video is currently paused or
stopped. In order to show the state of the
button, the button needs to be placed in
the timeline before or at the same time as
the video.
Setting Time-Based Video Events
1. Drag a video onto the stage and select the video
2. Using the Property Inspector or the Component Inspector, click on the videoEvents property.
3. Type in a name (string) for each videoEvent as it should be set as the name of the event in the eventListener function (evt.name).
4. Type in the time (number in seconds) in the videoEventTimes array for the event that should be dispatched as it matches with the videoEvent name.
NOTE: The events may not be closer than .15 seconds
5. Type in the fileID (zero-based integer) in the videoFileId array for the event that should be dispatched as it matches with the videoEvent name. The fileID corresponds to the
position of the file in the array of videos as set in the AdWonder™ Testing Panel. For instance if the video event should be fired for the third video in the array of videos, the fileID
is “2”.
6. Handle the event through adding a videoEvent Listener.
©EyeWonder, Inc 2000-2017
Page 6 of 32
www.eyewonder.com
Updated: 7/29/2017
Testing the Ad with the AdWonder™ Panel
To get to the AdWonder™ Panel, open a new Flash Document, and then go to Window  Other Panels  AdWonder™.
I. Login to AdWonder™
The Following Panel appears:
Login to AdWonder™ with the assigned username and password and click on Log In.
©EyeWonder, Inc 2000-2017
Page 7 of 32
www.eyewonder.com
Updated: 7/29/2017
II. Choose an AdWonder™ Project
1. Create an AdWonder™ Project for each ad size and creative. The following is a suggested naming format:
Format: Campaignname creativename UnitSize Version
Example: BobsNewCars shiny 728x90 v4
2. Click on the New radio button for a new ad, or the Open radio button to open an existing project.
3. Click on Open project to open the new or existing project
4. To delete, select an existing project and click on Delete Project.
Note: The Projects to select on the AdWonder™ Project screen are maintained on your local machine.
©EyeWonder, Inc 2000-2017
Page 8 of 32
www.eyewonder.com
Updated: 7/29/2017
III. Choose Videos for Testing
1. Choose any video from the list of videos in the drop-down list. You will see a few sample videos as well as any videos that have been encoded, uploaded, and associated with
your agency.
2. Click on Add Video to add a video to the Videos Table.
Note: The length of each video displays in the second column and video size in the right-most column.
3. Organize the videos to be in the order for video indexing. When accessing the videos from the ad, this order determines the order of videos in the array. For example, as the
names are below, the first video index is video 0 which is “EW One Vendor Vid 460x300”. “test_centralVideo5” is index number 1.
Note: Videos are playing directly from the EyeWonder server – please be sure to connect to the internet before testing any video ads.
4. You can preview the published video by selecting a video and choosing “Test Video”. A popup with the video will open and begin playing. Quality and Bandwidth is chosen
automatically based on your internet connection, and isn’t representative of end users.
©EyeWonder, Inc 2000-2017
Page 9 of 32
www.eyewonder.com
Updated: 7/29/2017
IV. Insert ClickTags for Testing
1.
2.
3.
4.
5.
Insert the clickTagName and ClickTag value for any clickthrus associated with the ad.
All clickthrus need to be added here before submitting to EW for QA purposes.
Click Add Tag to add the tag from the Name and Value pair listed below the table.
Click Remove tag to remove a tag from the list.
Click Clear to remove all clickTags from the list.
Note: These Names should correspond with the clickTagLabel in the clickTag drag and drop component.
Failover ClickTag: Per EyeWonder and site specs, create a ClickTag called “failover” with the value of the failover click tag. The “failover” click tag is used when an end-user’s system
doesn’t meet the minimum system requirements for EyeWonder powered advertisements.
©EyeWonder, Inc 2000-2017
Page 10 of 32
www.eyewonder.com
Updated: 7/29/2017
V. Test the Ad Project
1. Click on Test Roll Off to artificially generate the rollOff detected from JS in the live unit. You alternately can publish the ad online to see the rollOff functionality behaving correctly
within the unit.
2. Click on Test Flash 8/Test Flash 7 to publish all swfs associated with the ad and run the ad with either version. The Panel automatically publishes the swfs with
defaultFLAname_FL7.swf and defaultFLAname_FL8.swf into a hidden location.
3. Any reporting that is recorded within the AdWonder™ Reporting system will record in the Testing Panel. You may add additional testing, traces, etc., directly into the panel by
EW.sendToPanel(“string here”);
4. Clear the Reporting panel by clicking on Clear Reporting.
©EyeWonder, Inc 2000-2017
Page 11 of 32
www.eyewonder.com
Updated: 7/29/2017
VI. Ad Setup
Ad Information, Main FLA, and Preview Settings
1. Select the Ad Format from the list of available ad formats. If you have an ad format to build which is not on the list, please contact your EyeWonder representative for further
instruction.
2. Select the intended scheduled unit size for the ad. If you have more than one size to create, please create separate ad projects.
3. If the size to add is not available, choose other and insert the width and height manually.
4. Select the main FLA that should display in the ad. For the fla currently in focus on the Flash application, click on Use Current. Otherwise, click on Browse as the current FLA.
5. Browse for the Image failover. An Image Failover is required for creating an online EyeWonder ad. This alternate image should display only for obscure browsers and operating
systems for which the EyeWonder ads are not supported. Please ensure that the failover is designed at the same size as the unexpanded unit size.
6. Browse for a Flash failover (swf file). This is optional, and should be published as a Flash 6 file. This file will be served for users who do not have Flash 7 or higher.
7. Select a template for which to display the add (Note: current functionality does not yet support templates)
8. Select the vertical and horizontal alignment for preview purposes. For instance, if the ad expands to the left, align the ad to display on the right. Click on Next to continue with Ad
Preparation
©EyeWonder, Inc 2000-2017
Page 12 of 32
www.eyewonder.com
Updated: 7/29/2017
Additional Assets
1.
2.
3.
4.
5.
Select Assets to include for child swfs and loaded images. Please note that the filesizes of these files will be counted in total load for sites.
Add Asset to browse and load the asset. If it is an FLA, the FLA will be published during testing and publishing.
Remove Asset by highlighting the name and clicking on Remove Asset.
Clear Entire List by clicking on Clear Entire List.
When completed, click on Next. Click on Previous to go back to the Ad Settings screen.
©EyeWonder, Inc 2000-2017
Page 13 of 32
www.eyewonder.com
Updated: 7/29/2017
Expandable Only Settings
1. Choose the settings for expandables as follows:
Expands Left
Denotes the number of pixels that the unit should expand left past the
left most pixel of the original unit size.
Expands Up
Denotes the number of pixels that the unit should expand up past the top
most pixel of the original unit size.
Expands Right
Denotes the number of pixels that the unit should expand to the right of
the right most pixel of the original unit size.
Expands Down
Denotes the number of pixels that the unit should expand down past
2. Click on Next to go to the final screen.
©EyeWonder, Inc 2000-2017
Page 14 of 32
www.eyewonder.com
Updated: 7/29/2017
Publish and Submit
1. Click on Publish Now to publish all the associated FLA files, upload the files to the generation system, and obtain a link that you may use to approval or demonstration
purposes.
2. Click on Submit for QA once you have finalized the ad and are ready to submit to EyeWonder for approval. See Appendix B for more information regarding the QA
process and what to check for.
Note: The ad will no longer be able to published after Submitting to QA unless EyeWonder releases the ad from QA. Start a new project to work on a new version, or wait to
submit until you are satified with the ad as it stands.
Note: Publish Settings are hardcoded into the unit when published using the AdWonder Panel. Whatever settings you set via the “Publish Settings” is ignored. The hardcoded
settings are virtually unchanged from the default, except for the Flash version.
©EyeWonder, Inc 2000-2017
Page 15 of 32
www.eyewonder.com
Updated: 7/29/2017
Actionscript and Code Assistance
Methods are listed with parameters in the order they need to be called.
All methods and events will be available in the natively available code assist module of Flash Studio MX or 8. If you type in EW.method() anywhere within your swf file, the appropriate
EyeWonder functionality will be available for:
1. Reporting Methods/Events
2. Expandable Methods/Events
If you type in EW.Video.method() or EW.Video.event, the appropriate EyeWonder functionality will be available for:
3. Video Methods/Events
Component Properties
All components properties can be explicitly set through actionscript by calling the instance name and then the specific property. For example to set the allowScrubbing property for an
EyeWonder component progressbar named “myProgressbar”:
myProgressbar.displayMode = “snapToScrub”;
©EyeWonder, Inc 2000-2017
Page 16 of 32
www.eyewonder.com
Updated: 7/29/2017
Reporting and Expandable Methods
These global methods are available from any scope within the timeline. All parameters are optional, although it is recommended to explicitly name the panel for the EW.open(),
EW.close(), EW.expand(), and EW.contract() functions, and to explicitly label the clickTag value that is sent in through FlashVars.
Method
Parameters
EW.clickthru
clickTag
EW.close
Param Desc.
Type
Description
String
clickName
Click Tag Value
(as set through
the test
component)
Click Tag Label
panelName
Panel Name
String
pnlname
itrtype
actiontype
Panel Name
Interaction Type
Action Type
String
String
String
When called during a user view, the interaction
is counted in reporting with the Click Tag Label
set in the parameters. If a panel is named, the
interaction is attributed to the named panel
when set for “by Panel” reporting. The
interaction is included in the following
AdWonder™ reporting metrics: Clickthru Rate,
Total Clickthrus, and Clickthrus by name.
Closes the panel without an explicit expand or
contract call to the Panel named in the pnlname
parameter. Intended for use when counting
subpanels within either an expandable or
standard banner ad. This method is counted in
reporting as either an event or interaction,
depending on the action type. The following
values are available for action type:
String
“M” – Counts the open event as a mouseover
interaction.
“C” – Counts the open event as a click
interaction
“A” – Counts the open event as an automatic
event.
EW.contract
pnlname
itrtype
actiontype
Panel Name
Interaction Type
Action Type
String
String
String
If the close is an event, the itrtype needs to be
explicitly set to “event”.
Closes the panel and clips the unit to its original
panel size. This method is counted in reporting
as either an event or interaction, depending on
the action type. The following values are
available for action type:
“M” – Counts the open event as a mouseover
interaction.
“C” – Counts the open event as a click
interaction
“A” – Counts the open event as an automatic
event.
EW.expand
pnlname
itrtype
actiontype
©EyeWonder, Inc 2000-2017
Panel Name
Interaction Type
Action Type
String
String
String
Page 17 of 32
If the contract is an event, the itrtype needs to
be explicitly set to “event”.
Creates a layer for the entire size of the unit.
This method is counted in reporting as either an
event or interaction, depending on the action
type. The following values are available for
www.eyewonder.com
Updated: 7/29/2017
action type:
“M” – Counts the open event as a mouseover
interaction.
“C” – Counts the open event as a click
interaction
“A” – Counts the open event as an automatic
event.
EW.loadChildSwf
EW.open
targetClip
Clip in which to
load the child swf
swfName
Swf name String
Variable
(movie
clip)
String
pnlname
Panel Name
String
itrtype
Interaction Type
String
actiontype
Action Type
String
If the expand is an event, the itrtype needs to
be set to “event”.
Appends absolute path to the beginning and
also loads the swf in the approved EyeWonder
method for loading child swfs. If you need to
load another asset other than a swf into the
creative, please use EW.loadContent() method
(see further in this document)
Switches the panel without an explicit expand
or contract call to the Panel named in the
pnlname parameter. Intended for use when
counting subpanels within either an expandable
or standard banner ad. This method is counted
in reporting as either an event or interaction,
depending on the action type. The following
values are available for action type:
“M” – Counts the open event as a mouseover
interaction.
“C” – Counts the open event as a click
interaction
“A” – Counts the open event as an automatic
event.
EW.sendToPanel
message
Message String
String or
Variable
EW.trackInteraction
itrName
pnlname
Interaction Label
Panel Label
String
String
EW.trackEvent
evtName
Event Label
String
pnlname
Panel Label
String
©EyeWonder, Inc 2000-2017
Page 18 of 32
If the open is an event, the itrtype needs to be
set to “event”.
Allows for panel communication that will not
display in reporting. For testing purposes so
that trace does not need to be used.
When called during a user view, the interaction
is counted in reporting with the Interaction
Label set in the parameters. If a panel is
named, the interaction is attributed to the
named panel when set for “by Panel” reporting.
The interaction is included in the following
AdWonder™ reporting metrics: Interaction
Rate, Total Interactions, Custom Interactions,
and Custom Interactions by name.
When called during a user view, the event is
counted in reporting with the Event Label set in
the parameters. If a panel is named, the
www.eyewonder.com
Updated: 7/29/2017
EW.unloadChildSwf
Container
Clip from
loadChildSwf
Variable
(movie
clip)
EW.download
fileName
External file
String
EW.loadContent
targetClip
Target movie clip
MovieClip
fileName
File name of the
file
String
©EyeWonder, Inc 2000-2017
Page 19 of 32
interaction is attributed to the named panel
when set for “by Panel” reporting. The
interaction is included in the following
AdWonder™ reporting metrics: Total Events,
Custom Events, and Custom Events by name.
Removes the child swf as loaded from
EW.loadChildSwf. The container should be the
same name as the targetClip into which the swf
was loaded.
Downloads an external files (such as MP3).
Please note that the file should be uploaded as
an “additional asset” together with the ad. The
fileName parameter must not be the absolute
URL, just a filename - e.g. “greatSong.mp3”.
Loads external content into the target movie
clip (SWF,JPEG). Please note that the file
should be uploaded as an “additional asset”
together with the ad. The fileName parameter
must not be the absolute URL, just a filename e.g. “MyPicture.jpg” or “someMovie.swf”.
www.eyewonder.com
Updated: 7/29/2017
Reporting and Expandable Events
The events are triggered and will be accessible through the EW object. For example, to define the event that is triggered upon rolling off the unit:
EW.onRollOff = function(){
}
Method
Parameters
Description
EW.onRollOff
None
EW.onClickThru
clickTag
onRollOff is called when the user rolls out of the entire ad
layer in the page. You must use this event to reliably
capture rolloff events from the ad.
Name of clicktag
clickName
Name of clickthru (for reporting purposes)
panelName
Name of panel (for reporting purposes)
©EyeWonder, Inc 2000-2017
Page 20 of 32
www.eyewonder.com
Updated: 7/29/2017
Video Methods
All Video methods can be initiated directly in the timeline or used on click or release with a custom button or movieclip. All Video methods will apply to the first video created on the
timeline. If you have more than one video, explicitly name your videos so that the methods can be applied to
Method
EW.Video.addEventListener
Parameters
type
Type
“VideoEvent”
eventHandler
screen
Param. Desc.
Should always be
“VideoEvent”
Name of function to be called
Video Screen
EW.Video.audioOn
EW.Video.audioOff
screen
Screen
Video Screen
Video Screen
String
String
EW.Video.audioToggle
screen
Video Screen
String
EW.Video.doClear
EW.Video.fwd
screen
offset
String
EW.Video.pause
screen
screen
Video Screen
Insert the number of seconds
to seek forward on the video.
Video Screen
Video Screen
EW.Video.play
videoIndex
The video index to play when
pressed. If not set, will be the
default video of the
targetVideo.
Insert the video instance
name with which the play
button is associated. If not
set, will be associated with
the first video screen
instance (ewVideo).
Video Screen
Number
targetVideo
EW.Video.replay
©EyeWonder, Inc 2000-2017
screen
Page 21 of 32
String
String
String
String
Description
Turns the audio of
the Video on. If the
audio is controlled
separately within the
timeline, this call will
not affect the _root
audio.
Turns the audio of
the Video off. If the
audio is controlled
separately within the
timeline, this call will
not affect the _root
audio.
Toggles the audio
between On and Off.
Pauses the video at
the current time. If
play or videoToggle
is pressed after
pausing, the video
continues from the
place where the
video was paused.
String
String
Replays the video
from the beginning.
Behaves the same as
www.eyewonder.com
Updated: 7/29/2017
calling both
EW.Video.Stop() and
EW.Video.Play() calls
together.
EW.Video.rewind
offset
EW.Video.seek
EW.Video.stop
screen
screen
screen
EW.Video.stopAll
doClear
EW.Video.videoToggle
screen
EW.Video.registerButton
targetButton
buttonType
targetVideo
©EyeWonder, Inc 2000-2017
Insert the number of seconds
to seek forward on the video.
Video Screen
Video Screen
Video Screen
Number
Sets whether or not stopping
the video clears the screen
Video Screen
Boolean
Existing button movie to
register as EW button
One of the predefined button
type names:
“play”,“pause”,”stop”,
”replay”,“audioOn”,”audioOff,
”audioToggle”,”videoToggle”
Video Screen
MovieClip
Page 22 of 32
String
String
String
String
String
String
Stops the video and
resets the time. If
play or videoToggle
is pressed after
stopping, the video
starts from the
beginning.
Stops all videos that
are currently playing.
Toggles the video
between Pause and
Play.
Adds video/audio
button and tracking
functionality to an
existing button movie
clip (if for some
reason EW
component buttons
are not used).
www.eyewonder.com
Updated: 7/29/2017
Video Events
Standard Video events are fired on each video as listed below. Each event passes a reference to the videoScreen which dispatches the event. The video events can only be defined and
written once within the scope of the ad. It is recommended that these events are defined somewhere on the _root timeline.
For instance, to do something on playbackStart if the videoIndex is 1, define EW.Video.onPlaybackStart:
EW.Video.onPlaybackStart = function(videoScreen){
If (videoScreen.videoIndex == 1){
//doSomething
}
}
Event
EW.Video.onBwDetected
Parameters
videoScreen
EW.Video.onPlaybackStart
EW.Video.onPlaybackStop
EW.Video.onEndOfVideo
EW.Video.onBufferFull
videoScreen
videoScreen
videoScreen
videoScreen
EW.Video.onBufferEmpty
videoScreen
EW.Video.onVideoNotFound
videoScreen
©EyeWonder, Inc 2000-2017
Description
Fired when an EW Video has detected the bandwidth that
is appropriate for the user.
Fired when an EW Video has started playback.
Fired when an EW Video has stopped playback.
Fired when any flv video has reached the end of the file.
Fired when the buffer has been completed.
NOTE: Buffer is set automatically to accommodate for
different bandwidths.
Fired when the buffer has become empty. This may
happen if a user bandwidth drops.
Fired when the video called is not found.
Page 23 of 32
www.eyewonder.com
Updated: 7/29/2017
Advanced Video Events: AddEventListener
Use addEventListener syntax to capture any custom or standard video event multiple times from any scope and call the appropriate functions.
There are two methods of setting an event listener for a video event:
1. Preferred Method of Adding a Video Event Listener
You can listen to particular video events directly by adding an event listener function to EW.Video using the name of the desired video event:
EW.Video.addEventListener(“playbackStart”,listenerFunction);
function listenerFunction(evt){
//code to execute on playbackStart event
...
}
2. Alternative Method of Adding a Video Event Listener
If you prefer handling all video events in one listener function rather than a different function for each event, add an event listener to EW.Video listening only to event with the name
“videoEvent” and then call a listener function that takes the event as its parameter, and check the event name to determine which event has been fired:
EW.Video.addEventListener(“videoEvent”,listenerFunction);
function listenerFunction(evt){
//check evt name
if (evt.name == “bwDetected”){
//execute desired action on bwDetected event
}
else if (evt.name == “playbackStart”){
//execute desired action on playbackStart event
}
}
Custom and Standard VideoEvents
The evt parameter sent from the event listener has the following properties.
Event Properties
Description
Type
Always Returns “videoEvent”
Name
Returns either a standard event (listed above) or a custom event set by
VideoScreen
Target
Returns the Video Screen Object
The following events are automatically fired to the listener function:
Standard Event
Description
“bwDetected”
Fired when an EW Video has detected the bandwidth that is appropriate for the
user.
“playbackStart”
Fired when an EW Video has started playback.
“playbackStop”
Fired when an EW Video has stopped playback.
“endOfVideo”
Fired when any flv video has reached the end of the file.
©EyeWonder, Inc 2000-2017
Page 24 of 32
www.eyewonder.com
Updated: 7/29/2017
“bufferFull”
“bufferEmpty”
“videoNotFound”
Fired when the buffer has been completed.
NOTE: Buffer is set automatically to accommodate for different bandwidths.
Fired when the buffer has become empty. This may happen if a user bandwidth
drops.
Fired when the video called is not found.
Video StateChange Events
The evt parameter sent from the event listener has the following properties. You can check the three properties and execute desired actions based on the their states.
videoInstanceName.addEventListener(“playbackStateChanged”,listenerFunction);
function listenerFunction(evt){
if (evt.isPaused){
//execute desired action
}
}
Event Properties
Type
isPaused
isPlaying
isStopped
Description
Always Returns “playbackStateChanged”
Returns Boolean
Returns Boolean
Returns Boolean
Audio StateChange Events
The evt parameter sent from the event listener has the following properties. You can check the two properties and execute desired actions based on the their states.
videoInstanceName.addEventListener(“audioStateChanged”,listenerFunction);
function listenerFunction(evt){
if (evt. isMuted){
//execute desired action
}
}
Event Properties
Type
isMuted
Volume
Description
Always Returns “audioStateChanged”
Returns Boolean
Returns integer value of volume (0 – 100)
Advanced Video Object Methods and Properties
The Video Screen Object has several public properties which can be dynamically set and returned from the instance name. For instance, to get the current video index for an EW Video
Screen Object named “myVideo_mc”
©EyeWonder, Inc 2000-2017
Page 25 of 32
www.eyewonder.com
Updated: 7/29/2017
var currentVideo = myVideo_mc.fileId;
EW Video Object Properties
ew_netStream
isPaused
isPlaying
isStopped
isMuted
Volume
videoEvents
videoEventTimes
videoFileID
soundControl
audioInit
videoInit
doClear
videoIndex
©EyeWonder, Inc 2000-2017
Description
Returns a fully scriptable netStream object.
State when the video has been paused during playback and is not yet restarted
State when the video is playing and has not yet reached the end of the video
State when the video has played and completes playback or when the video has
not yet started
State when the sound associated with the video has been turned off or was started
off if the audioInit was set to user click
Returns an integer from 0-100 representing the volume of the audio associated with
the video instance.
Returns the associated array of custom video events as set for the specific EW
video instance.
Returns the associated array of custom video event times as set for the specific
EW video instance.
Returns the associated array of custom video file IDs as set for the specific EW
video instance.
Returns a fully scriptable sound object.
Returns the audio initiation set for the video (either “default”,”autoStart”, or
“onUserClick”)
Returns the video initiation set for the video (either “default”,”autoStart”, or
“onUserClick”)
Returns the boolean property doClear to describe whether or not the video clears
when it is stopped or has completed playback.
Returns the index of the currently playing video as defined in the video array set in
the AdWonder Testing panel in Videos tab. Please note that videoIndex is zerobased, i.e. first video in the array has the index of 0, second video has index of 1,
etc.
Page 26 of 32
www.eyewonder.com
Updated: 7/29/2017
Appendix A: Creating EyeWonder Expandable ads
Expandables are ads that can be served through iframe or js ad server calls. If the ad is served through an iframe, an additional file will need to be trafficked an uploaded to the site to
allow the ad to “bust” out of the placement. If the ad is served through a js file, the ad will still need to make certain adjustments, etc. to expand over the existing content in the page. For
this reason, it is necessary to communicate with the javascript file several times throughout the animation process.
Flash Stage Design:
With EyeWonder expandable formats, you can design your expandable in Flash within a single movieclip. To do this, layout the main timeline in a way that the full expanded unit fits within
the stage size of the compiled swf. If your ad expands to the right and down, design your flash file with the contracted unit in the top left corner. If your ad expands to the left and up,
design your flash file with the contracted unit in the bottom right corner.
Unit that expands to the Left and Up
Stage Height is 340
Stage Width is 520
Contracted Unit Size
is 300x250
Design Main 300x250
unit here on the Stage
Click to Open, Rollover, and Site Requirements
Almost all sites require that the unit must be rollout and also contain a visible close ubtton to close if the unit is rollover to open. If the unit is click to open, sites tend to be more lenient and
will typically accept the unit without the rollout event and just a click-to-close button.
Expanding the Unit
If the unit is set as a rollover/rollout unit, the expandable will need to communicate with the surrounding page when a user has rolled over specific movieclip or button hit areas. If the unit
is set as a click to open/click to close unit, the expandable will need to communicate with the surrounding page when a user has clicked on specific movieclip or button hit areas. In either
case, the flash file needs to capture the rollover or click event and then call EW.expand().
©EyeWonder, Inc 2000-2017
Page 27 of 32
www.eyewonder.com
Updated: 7/29/2017
//If the ad is rollover to expand
rollover_mc.onRollover = function(){
EW.expand();
gotoAndPlay(‘expand’);
}
//If the ad is click to expand
click_mc.onRelease = function(){
EW.expand();
gotoAndPlay(‘expand’);
}
Contracting the Unit
Because Flash does not reliably capture rollout events off the stage, our expandable format relies on JavaScript which encapsulates the ad to capture the rollout event. The rollout event is
then passed to the Flash unit to the EW class. The Rollout functionality should be set up as in the following example:
Capture the event
and make sure the
unit is expanded by
confirming the
animation to be
currently within a
certain frame range.
EW.onRollOut = function(){
if ((this._currentframe > 2)&& (this._currentframe <= 13))
{
contract();
}
}
Renable the rollover
function enableRollover(){
hit areas.
trace("enableRollover called");
clearInterval(intervalID);
rollover_mc._visible = true;
}
Set a timer to
reactivate the
rollover.
function contract(){
intervalID = setInterval(enableRollover,100);
EW.Video.audioOff();
gotoAndPlay("contract");
Animate the unit to
}
close.
This function works as follows:
1. The EW class detects that the rollOut event has occurred.
2. The onRollOut function checks the current frame against the range to be sure that the unit only contracts if the current state of the unit is expanded or animating to the expanded
state.
NOTE: This is highly recommended to ensure the reliability of the rollout functionality. Setting a flag in ActionScript instead of detecting a frame is much less reliable and will
sometimes incorrectly evaluate the function depending on the speed of the computer and the number of applications running at the time.
3. Once confirmed, the unit animates closed with the contract function and sets a timer to reactivate the rollover movie clip. Do not reactivate the rollover button right away as the
button may be reactivated too close to the rollOut of the unit.
NOTE: Abstracting the contract function allows for it to be called on its own if there is a close button or EOV (end of video) event that should also contract the unit.
4. Once the interval has been reached, it is cleared and the rollover movie clip is reactivated.
5. At the end of the contract animation on the timeline, the EW.contract() should be called.
If the unit is click to close ONLY, EW.onRollOut does not need to be defined. Instead, call the contract() function directly, which animates the unit closed, and then should call
EW.contract() at the end of the animation. You may also have an additional close button to the rollout functionality and then call a contract function that animates the unit closed.
©EyeWonder, Inc 2000-2017
Page 28 of 32
www.eyewonder.com
Updated: 7/29/2017
//If the ad is click to close
on (release)(
contract();
}
Auto-Expand and Auto-Contract
Ads may be expanded upon load by calling EW.expand(“pnlname”,”A”,”event”); This will expand the ad initially without user interaction and without counting the expand as a user
interaction.
Ads may also be contracted without user interaction (on an interval or after the video is complete for example). Call EW.contract(“pnlname”,”A”,”event”); to contract the unit without
counting the contract as a user interaction.
Masking (Safari Support)
The EyeWonder expandable format clips a div layer or resizes an iframe, depending on environment, in order to allow for you to seamlessly design the expandable in a single movieclip.
Most browsers support the expandable, but in order to allow for Mac OSX Safari Support, the creative must be masked so that no visible layers on the stage are displayed when the ad is
closed in Safari. Safari does not at this time support clipping appropriately for flash objects, so be sure to mask your unit so that any creative that is on the stage when the unit is fully
contracted is intended for display within the contract unit size.
Expandable Appearance on Site
Mask Placement on Stage
EW Expandable Synopsis:
1. Construct the _root movieclip to be set for the fully expanded ad size.
2. Most sites require click to open/click to close or rollover to open/rollout to close
3. Add EW.expand and EW.contract methods wherever you need to expand and contract the space.
NOTE: It is recommended that you call EW.expand at the beginning of the event and call EW.contract at the end of an animation.
4. Add EW.onRollout to detect the mouseout event and use frames to determine whether or not the rollOut should activate an event.
5. Disable the rollover when the unit is expanded and reenable on an interval to ensure full panel close.
Reporting
The expandable unit reports on all necessary metrics in the AdWonder™ Reporting system. Those specific to expandables include By Panel and Total Reporting on the following fields:
1. Avg. Time spent on Panel
2. Number of Interactions
©EyeWonder, Inc 2000-2017
Page 29 of 32
www.eyewonder.com
Updated: 7/29/2017
3. Custom Interactions
Total Interactions and the Interaction Rate also include any expands and contracts which are not marked as “event” interaction types.
To ensure accurate reporting on by panel reporting fields (average time spent on panel, number of interactions, and custom interactions), you may need to use EW.open() and EW.close()
functions. These functions “open” and “close” the panels for reporting purposes without literally opening and closing the panels from javascript in the page.
In AdWonder™
Once the ad has been created, publish the swf(s) and upload the ad. The expandable format should be uploaded and saved with the unit size of the intended contracted size. Below are
the AdWonder™ fields for the expandable that are unique to this format:
AdWonder™ Panel
Field
Expands Left
Expands Up
Expands Right
Expands Down
Explanation
Denotes the number of pixels that the unit should expand left past the
left most pixel of the original unit size.
Denotes the number of pixels that the unit should expand up past the top
most pixel of the original unit size.
Denotes the number of pixels that the unit should expand to the right of
the right most pixel of the original unit size.
Denotes the number of pixels that the unit should expand down part the
If the expandable ad should call the EW.onRollOff event, make sure to check “Contract on Rollout”. If not, the necessary functionality isn’t included with the live unit, and the event is never
called.
©EyeWonder, Inc 2000-2017
Page 30 of 32
www.eyewonder.com
Updated: 7/29/2017
Appendix B: Before Submitting for QA
Before submitting the ad for EyeWonder QA, please check for the following common mistakes. The following rules must be adhered to so that sites accept the ad, the reporting displays
correctly, and the ad behaves properly on sites and through ad servers.
Files and Setup
1. Main file and any automatically loaded swfs add up to less than 40K (Note: AdWonder Components add up to 15k, see Appendix C for more information)
2. Swfs initiated by user add up to less than 100K
3. Frames per Second should be set under 18 fps.
4. All assets are loaded using EW.loadChildSwf();
5. All child swfs are included in assets
6. A “failover” image displays that is the correct unit size for when the ad needs to show an alternate image.
Format Setup
1. Expandable areas are masked for Safari compatibility.
2. Banner and Expandables ads are set to “Instant Play” ad type if any video starts host-initiated. Otherwise the type is set to “Self Select”
3. Any video that starts host-initiated is less than 30 seconds long
4. Video functionality is using the EW video component. You must use the EW Video component in order to run an EyeWonder video ad. If you are not using the EW Video
component, please contact your EW representative for pricing.
Clickthrus
1. Clickthrus are called with EW.clickthru() in all cases for tracking purposes. No explicit getURL calls or hardcoding the clickthru values in any case (site requirement and
EyeWonder requirements).
2. Clickthrus go to the appropriate URL as set in the AdWonder™ Panel
3. Clickthrus contract the expanded unit and/or stop/pause the video/audio
Reporting
1. Open and Close functions are called in cases where the ad is not physically expanding or contracting.
2. Events are being used appropriately and there are no interactions where there should be events.
3. Expand and Contract are set as interactions only when the ad is interacted with.
General Site Specs
1. Video can start automatically, but Audio starts by user click
2. Main file and any automatically loaded swfs add up to less than 40K
3. Swfs initiated by user add up to less than 100K
4. Frames per Second should be set under 18 fps.
5. Any ad that initiates an expandable panel by rollover will contract by detecting EW.onRollOut.
6. All expandable panels contain a close button that is clearly marked and has an X.
7. Expandable panels are not generally more than twice the height or width of the unit size.
8. Expandable is initiated by 33% or less of the original unit.
9. Expandable Banners are expanding the correct direction for the placement bought in the media plan.
10. Any animation that starts automatically is less than 15 seconds long.
©EyeWonder, Inc 2000-2017
Page 31 of 32
www.eyewonder.com
Updated: 7/29/2017
Appendix C: Size Considerations
One of the most common concerns in this industry is maximum allowed file size. Using the AdWonder Flash Component does add some weight to your compiled SWF, but
at the benefit of many features being available that otherwise wouldn’t be.
Notice: Due to Flash’s compression algorithm, these are only approximate sizes.
Component / System
Core
VideoScreen
Façade
Progress Bar
Audio Slider
EW Button
Play Button
Pause Button
Audio Off Button
Audio On Button
Fast Forward Button
Rewind Button
Replay Button
Stop Button
Video Toggle Button
Audio Toggle Button
ClickThru
Total
Approximate Size Added
4.5k
5.5k
0
1.2k
0.7k
0.5k
0.2k
0.2k
0.2k
0.2k
0.2k
0.2k
0.2k
0.2k
0.4k
0.4k
0.4k
15.2k
Dependencies
None
Core, Façade
Core, VideoScreen
Core, VideoScreen
Core, VideoScreen
Core, VideoScreen
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core, VideoScreen, EW Button
Core
----
Each component system you use adds an additional weight to the SWF one time, but multiple instances of the same component system don't add additional weight. For instance, multiple
videos add the same weight as using one video, but not using a video at all makes the file size smaller. Also, Child SWFs don’t have to pull in the Core system, so Child SWFs are smaller.
©EyeWonder, Inc 2000-2017
Page 32 of 32
www.eyewonder.com