Adobe Edge Animate RichStandard Template (v0.3)

This documentation describes the Biborg RichStandard 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 animat" ion.

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 a section at the end of this document to help you use Post Publish Tool.

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.
If you do not have a YouTube video (i.e. you embed your own video) remove the youtube-comp.js script as explained here.

Changelog

Date	version	note
13/10/2015	0.3-180	As of now rich projects using a video that is not hosted by YouTube should follow these steps.

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 mechanism are handled by the *ControllerClass (file: js/*-controller.js).
/media : contains the video files.
/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.

Stage elements

The template comes with some predefined elements.
Those elements should not be renamed.

border_t, border_r, border_b and border_l

Those elements are used to display a border.
To customize the border color, you can change the color of the 4 elements.
Note: 4 elements are also present in the Preloader. Don't forget to update them aswell.

click_to_play_poster

This element is diplayed when video autoplay isn't available.
When the user clicks it, the video playback starts.
This element should cover the video element.

loader

This element is displayed till the composition is loaded
This element should cover the Stage.

close_button

This element is a placeholder for the close button.
If this behaviour is not needed, just remove it.

mute_group

This element is a placeholder for the mute button.
If this behaviour is not needed, just remove it.

replay_group

This element is a placeholder for the replay button.
If this behaviour is not needed, just remove it.

video_group

This element holds the video.

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 the Stage.

For example, 'cursor': 'pointer' will display a pointer cursor when hovering the stage.

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.

- Click_On_Video 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.

You can replace, for example, platform.userCounter('Click_On_Video') and platform.userCounter('Click_On_Endshot') with an exit click:

if (controller.playHeadIsBeforeEndshotLabel()) { platform.exit('Click_On_Intro'); } else { platform.exit('Click_On_Endshot'); }

click_to_play_poster.click

This event is triggered when the user clicks on the video poster. The poster is only displayed on mobile when autoplay isn't available.

close_button.click

This event is triggered when the user clicks on the close button.

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.

Video Preloading

Due to mobile compatibility and some instability of the software, the preloading of the video is disabled and should not be enabled.
To compensate this, an element loader, identical to the preloader, is present on the main stage and will be hidden automatically once the video starts playing.
Note: the loader must cover the entire Stage.

If you don't need a YouTube video, remove the file js/youtube-comp.js from your Animate project then from the filesystem:

In Animate, in the Library panel find youtube-comp.js under Scripts and remove it
In the root of your project remove js/youtube-comp.js

It is important to remove this file if you don't use a YouTube video as it adds a bit of overhead through event handlers.

YouTube Videos

The template provides functions to easily add a video from YouTube: controller.createYouTubePlayer(elem, videoId, userPlayerVars);

Create a Rectangle (div) as a placeholder on your stage, it will contain the YouTube player
On the frame you want your video to appear add an action block and enter the following code: controller.createYouTubePlayer($("myDiv"), "_video_id_", userPlayerVars);
where
- myDiv is the id of the Rectangle you previously created
- _video_id_ is the id of your YouTube video (see what is my YouTube video id)
- and userPlayerVars is an object containing a set of properties for the player (see YouTube Player Parameters)
userPlayerVars can be null and will be defaulted to
{ 'iv_load_policy': 3, 'modestbranding': 1, 'playsinline': 1, 'rel': 0, 'showinfo': 0, }
Though calling createYouTubePlayer on the first frame of your composition may seem like a good idea to give it time to load, it will most likely end as too much overhead and crash

Post Publish Tool

This tool takes one ("Single" process) or two ("Expand" process) published Edge Animate compositions to create plaftorm enabled formats.

In the Edge Animate compositions used with this tool, the platform functions should be abstracted via the platform object.

If you use the standard or rich Edge Animate template, the platform functions are already abstracted.

- You can switch between the "Single" and "Expand" process by clicking the top buttons.

Single mode

1. Select a published Edge Animate composition. By default the files should be in a directory ending with "\publish\web". 2. Select an output directory. This is where the ZIP files for each formats will end. 3. Select the target platforms you want to process. 4. Click on the the "Process" button.

Expand mode

1. Select a published Edge Animate composition for the collapsed panel, and for the expanded panel. By default the files should be in a directory ending with "\publish\web".
2. Select an output directory. This is where the ZIP files for each formats will end.
3. Select the target platforms you want to process.
4. Optional: fill the DoubleClick fields. This is the values used in Enabler.setExpandingPixelOffsets and Enabler.setIsMultiDirectional
4. Optional: fill the Sizmek fields. This is the values used in EB.initExpansionParams
5. Click on the the "Process" button.

Technical notes

During the process, all platform.* calls in *.js files are replaced with their platform counterpart:

Template command	Platform
Template command	none / AdWords	DoubleClick	Sizmek
platform.automaticCounter(<eventId>)	console.log('Automatic Counter: ' + <eventId>)	Enabler.counter(<eventId>)	EB.automaticEventCounter(<eventId>)
platform.userCounter(<eventId>)	console.log('User Counter: ' + <eventId>)	Enabler.counter(<eventId>)	EB.userActionCounter(<eventId>)
platform.exit(<id>)	console.log('Exit: ' + <id>)	Enabler.exit(<id>)	EB.clickthrough(<id>)*
platform.startTimer(<timerId>)	console.log('Start Timer: ' + <timerId>)	Enabler.startTimer(<timerId>)	EB.startTimer(<timerId>)
platform.stopTimer(<timerId>)	console.log('Stop Timer: ' + <timerId>)	Enabler.stopTimer(<timerId>)	EB.stopTimer(<timerId>)
*In "Single" process mode, EB.clickthrough is called without parameter.

Support

If you need any support please contact our Technical Team:

dev@biborg.com
Cc frederic@biborg.com