Adobe Edge Animate Standard Templates (v0.1)
This documentation describes the Biborg Standard template for Edge Animate.
Introduction
Even if the format is delivered as a fixed size creative (300x250, 728x90, etc...), it can be easily be resized in Edge Animate by modifying the width (W) and height (H) properties of the stage. Of course, you'll have to modify the assets and animations like you would for any Flash animation.
You can add your own additionnal code but you should not remove or modify what's already present unless it's specified in the last sections of this document for the integration on the different hosting platforms.
This creative is delivered without integration for any hosting platforms but you'll find 3 sections at the end of this documents to help you through the different steps necessary for :
- Google AdWords
- Google DoubleClick
- Sizmek
A few very important points :
- When uploading on AdWords / DoubleClick or Sizmek, always remember that the weight limit is defined by the size of the zip file with all your files except the backup image.
- Make sure, you don't upload unnecessary files like:
- Thumbs.db files generated by Windows.
- .DS_Store folders generated by Mac OS X.
- For now, you'll be safer if you include the Edge Animate JS library in your creatives. Sizmek and Google do accept that you use CDN-hosted version of this file and that you even don't count it in the total weight of the creative... but, nothing guarantees today that every sites will accept the additional weight. The Animate JS library weights 33k when zipped, so it's possible to deal with it for 150k+ creatives.
- PNG file should be saved in 8bit format as often as possible with as few colors as possible. Do not hesitate to use PNGOO to save your image files.
Delivery Structure
The root folder holds the Edge Animate project files and a Photoshop file where you'll find all assets used in the creative and backup.
/assets : contains the unoptimized assets and source images extracted from the PSD file
/images : contains the optimized images assets actually used in the Edge Animate project
/js : Most of the mecachisms are handled by the ControllerClass (file: js/controller.js).
/publish/web : contains the output of Edge Animate publish operation + a jpeg backup file. For different platform integrations, you may have to modify these files after each publication rather than the source file of the Animate project. See below.
Labels
Those labels are bound to the template operations.
Therefore, you must not rename or delete them but you can move them on the timeline.
loop_start
Is used to mark the start of the loop when config.playTimes > 1.
See Events/creationComplete
endshot
Is used to seperate the intro from the endshot.
See Events/Stage.Click
loop_check
The playback stops when this label is reached and config.playTimes = 1.
If config.playTimes > 1, the playback continue to the loop_restart label.
loop_restart
When the playhead goes here, the playback will restart at the loop_start label.
frozen
Mark the frozen state of the animation.
This state is reached when the user clicks on the Stage or config.autoFreezeTime is ellapsed.
See Events/Stage.Click and config.autoFreezeTime
Events
Those events are bound to the template operations.
Therefore, you must not delete them.
You can edit them as long as you don't remove the controller's calls.
creationComplete
This event is triggered when the creation of the stage is complete.
Here, the controller is created and some configuration can be done.
Changing the style of border.
For example, 'border': 'none' will disable the border.
Changing config.playTimes to enable looping.
Default value = 1
Examples:
config.playTimes = 1
play once -> 1 playback
config.playTimes = 2
loop once -> 2 playbacks
config.playTimes = 3
loop twice -> 3 playbacks
Note: In the timeline, the loop_start label specifies the start of the loop.
Changing config.autoFreezeTime to set the time when the auto-freeze occurs.
Default value = 28000 (ms)
Examples:
config.autoFreezeTime = -1
Do not auto-freeze
config.autoFreezeTime = 28000
Auto-freeze after 28 sec
Note: When controller.freeze() is automatically or manually called, the stage's timeline is stopped at the frozen label.
All children symbols are stopped at their frozen label as well (if applicable).
Changing config.unmutedVolume to set the volume of the video when unmuted.
config.unmutedVolume = 0.5
Half volume
config.unmutedVolume = 1.0
Full volume
document.compositionReady
This event is triggered when the composition is ready.
The timeline playback is started here with controller.start().
Stage.Click
This event is triggered on a user click.
You can replace console.log('Click_On_Intro') and console.log('Click_On_Endshot') with click trough tracking.
- Click_On_Intro is logged when the user clicks before the endshot label.
- Click_On_Endshot is logged when the user clicks during or after the endshot label.
mute_button.click
This event is triggered when the user clicks on the mute button.
replay_button.click
This event is triggered when the user clicks on the replay button.
Timeline.update
This event is triggered on every timeline update.
This is where the controller is updated.
Google AdWords integration
After publishing, open the index.html file and add the specific <meta> in the <head> section.
<meta name="ad.size" content="width=300,height=250">
Note: edit width and height properties with your own values.
Google DoubleClick integration
Open the code in document.compositionReady and remplace the controller.start() call with
if (Enabler.isInitialized())
enablerInitHandler();
else
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
function enablerInitHandler()
{
if (!Enabler.isVisible())
Enabler.addEventListener(studio.events.StudioEvent.VISIBLE, controller.start);
else
controller.start();
}
You should also change the code in:
document.compositionReady to call, for example, Enabler.counter('Video_Progress_0%') etc.
Stage.click to call, for example, Enabler.exit('Click_On_Intro') and Enabler.exit('Click_On_Endshot')
mute_button.click to call, for example, Enabler.counter('Unmute_Video') and Enabler.counter('Mute_Video')
replay_button.click to call, for example, Enabler.counter('Click_On_Replay_Video')
To test locally, add the https://s0.2mdn.net/ads/studio/Enabler.js in Edge Animate.
Upon publishing, delete https://s0.2mdn.net/ads/studio/Enabler.js in Edge Animate.
Publish.
And add directly the script https://s0.2mdn.net/ads/studio/Enabler.js to the index.html file, in the <head> section.
<script type="text/javascript" src="https://s0.2mdn.net/ads/studio/Enabler.js"></script>
Sizmek integration
Open the code in document.compositionReady and remplace the controller.start() call with
if (!EB.isInitialized())
EB.addEventListener(EBG.EventName.EB_INITIALIZED, controller.start);
else
controller.start();
You should also change the code in:
document.compositionReady to call, for example, EB.automaticEventCounter('Video_Progress_0%') etc.
Stage.click to call, for example, EB.clickthrough('Click_On_Intro') and EB.clickthrough('Click_On_Endshot')
mute_button.click to call, for example, EB.userActionCounter('Unmute_Video') and EB.userActionCounter('Mute_Video')
replay_button.click to call, for example, EB.userActionCounter('Click_On_Replay_Video')
To test locally, add the EdgePreview_EBLoader.js in Edge Animate. (cf. http://www.sizmek.com/assets/pdf/Adobe_Edge_Polite-Standard.pdf)
Upon publishing, delete EdgePreview_EBLoader.js in Edge Animate.
Publish.
And add directly the script https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js to the index.html file, in the <head> section.
<script type="text/javascript" src="https://secure-ds.serving-sys.com/BurstingScript/EBLoader.js"></script>
Support
If you need any support please contact our Technical Team:
dev@biborg.com
Cc frederic@biborg.com