Note: As of November 2015, Edge Animate is no longer being actively developed.
This document will give a short introduction to Adobe Edge templates. These make use of the Screenad Template Library. This library takes care of positioning and reporting, mostly. In the templates, you will notice a number of lines that start with screenadTemplate. You shouldn’t change these lines, as the template may no longer function properly. A short explanation of the different lines that start with screenadTemplate is given in Appendix A.
Disclaimer: Making (unauthorized) structural changes to a templates structure may cause unexpected behavior. Please keep the template structure intact unless you know what you are doing.
Getting Started with Adobe Edge Animate
If you are not familiar with Adobe Edge Animate, it is recommended to spend some time getting familiar with this program. In particular, we recommend the following:
- Edge Animate is available from the Adobe site. However, as of November 2015, Edge Animate is no longer being actively developed, but can still be used.
- Go through the tutorials included with Edge Animate. They will give you a good idea of the possibilities of the program.
- Edge Animate makes use of jQuery for manipulating DOM items. A good knowledge of jQuery is recommended if you are going to do scripting.
- Google is your friend here. Also, Adobe.TV has great tutorials, for beginners and advanced users.
Using Edge Animate Templates
If you received a template, please make sure that you have the correct template by reading the included specsheet and by opening the preview link / QR code.
To get started, Open the Edge Animate project file (
.an) in the template folder. The template’s layout depends on what kind of template you are working with. Templates for fixed size banners and video banners are much simpler than those for expandables, floorads or fullscreen layers.
Fixed Size Banners
If you are creating a fixed size banner (or video banner), you will notice that the stage contains a div named “Content” and a Weborama Click Symbol. You should add your content to the content div and to the content div only.
NB: Due to the way that grouped elements work in Adobe Edge Animate, if you delete all example content from the content div before adding any of your own, the content div itself disappears. This is not recommended, as you will lose the settings of the content div as well. Therefore, make sure to add some content of your own before deleting all example content.
Expandables, Floorads etcetera
These templates are slightly more complicated. In order to keep them as simple and reliable as possible, they make use of the screenad template library, which will automatically take care of positioning and reporting. See the section “The Screenad Template Library” for more details on this library.
The transition animations for expandables and floorads is done on the main timeline. To ensure the template will work properly, you should not touch these. You can add your content to the content layer of the symbols called Collapsed and Expanded. For some places a version of the template exists where there are two different versions of the Expanded scene, one for portrait mode and one for landscape mode. This will give you the freedom to create two different creations for these modes. These scenes are named Expanded_Portrait and Expanded_Landscape, respectively.
You can add code to the functions onExpandStart, onExpandComplete, onCollapseStart and onCollapseEnd, which are called at the beginning and end of the expanding and collapsing animations, respectively. Make sure not to delete the existing code though, or the template will not function properly. When these functions are called, they are called with a parameter, conventionally called data, which contains properties orientation (possible values: “portrait” and “landscape”) and state (possible values for expandables and floorads: “expandStart”, “expandComplete”, “collapseStart”, “collapseComplete”). These imply the template is expanding, expanded, collapsing or collapsed, respectively.
NB: Due to the way that grouped elements work in Adobe Edge Animate, if you delete all example content from the content div and/or the centered content div before adding any of your own, the centered resp. centered content div itself disappears. This is not recommended, as you will lose the settings of the (centered) content div as well. Therefore, make sure to add some content of your own before deleting all example content.
Using Weborama components
NB: Weborama components are implemented as Edge Symbols
Weborama components are Adobe Edge symbols that allow you to easily incorporate mobile features in your creation. Examples are a Video Player component, a Photo Gallery component, click-to-call, click-to-email, click-to-sms and many components for integrating with apps like Skype, Youtube, Facebook etcetera.
Note that by default, the video component expects the video source file and poster image to be in the folder containing your Edge project file.
Some components, like Weborama_Expand, Weborama_Collapse, Weborama_Close and Weborama_Click, create clickable / tappable areas for expanding, collapsing, exit clicks etcetera.
See the documentation on Weborama’s HTML5 Components for more details.
Uploading Edge Templates
The previewer can handle Edge Animate Deployment Packages and these are the preferred way of publishing and uploading Edge templates. After publishing a template, navigate to the “publish/animate package” folder and upload the Deployment Package (a file with an .oam-extension).
In some cases, Edge Animate does not automatically add all files to the deployment package. In these cases, you will have to upload these files manually. At the time of writing, there are two cases where this applies:
- If you make use of the Weborama Video Component, you need to upload the source for the video file and the poster image manually.
- In case you use the Weborama Photo Gallery Component, which is based on the PhotoSwipe library, you need to upload the contents of the photoswipe folder (included with the component) manually.
NB: If you don’t see the
.oamfile in the publish/animate folder, make sure that “
Animate Deployment Package” is checked in the
Publish Settingsand that you uncheck all other types of publishing.
This document will give an overview of the Weborama components developed for Adobe Edge Animate. These components are packaged as Edge symbols which are exported as ansym-files. After you import these symbols in Edge you can use them by dragging them on stage and resizing them.
NB: When resizing symbols in Edge Animate, you should open the symbol and change its width and height ‘from the inside’, rather than changing the width and height of the symbol ‘from the outside’, or Edge will scale the symbol. This behavior is similar to the behavior of movie clips in Adobe Flash.
Note that the way symbols are implemented in Edge implies that if you drag the same symbol onto the stage twice, it is literally the same symbol. This means that if you change one instance of this symbol, the other symbol will change as well.
If you do not want this behavior, for example if you have two different click-to-calls, which call a different phone number, you should either import the symbol twice or right-click the symbol and choose duplicate symbol from the popup menu.
NB: Before we start, it is good to know that the Weborama HTML5 Components are implemented as Symbols in Adobe Edge Animate.
To set up the Weborama HTML5 Components, follow the steps below:
The Weborama HTML5 Components require the following software prior to installation:
- Adobe Edge Animate latest version – 6.0.0
- A HTML5-compliant browser. It is recommended to use Safari or Chrome, since these browsers make use of the same rendering engine (Webkit) as all browsers on iOS and most browsers on Android.
- Download and save the Weborama Edge Components and save them in a folder of your choice.
- Open a Mobile Rich Media Template Template in Adobe Edge Animate
- In the Symbols panel, press “+” and choose “Import Symbols…”
- Navigate to the folder you chose in step 1 and open the HTML5 Component(s) you want to use. These components will be added to your Symbols panel.
- In order to use a Component, drag it onto the stage.
Using the Weborama components
Before using Weborama HTML5 components, read the information below and see the documentation included with the individual components for instructions on how to use and configure them. Do not edit Weborama HTML5 components in any other way than specified by the documentation.
In order to use a Weborama HTML5 component, drag it onto the stage from the Symbols panel. Many components will need to be configured. For example, you will want to set the phone number to a Click-to-Call component or set the video file for a Video component. Generally, this will involve editing an action of the component or one of its elements. For this, open the component in the Elements panel and click on the curly brackets next to the action you want to edit.
To duplicate or not to duplicate? Using the same component more than once
NB: Remember that Weborama components are implemented as Symbols in Adobe Edge Animate
Suppose you want to use the same component more than once, eg. you want to use two Video Player components or two Click-to-Calendar components. There are two ways to do this and it is important to know the difference between the two:
- Re-use the symbol
- Duplicate the symbol
NB: In general, you should duplicate the symbol, not re-use it
Re-using the symbol is easy, you just drag the symbol onto the stage twice. Note however, that you now have two instances of the same symbol. In particular, this means that if you change the configuration of one of these, the configuration of all of them changes. Say, for example, that you change the source file for one of the video players. This automatically changes the source file for the other one. In some cases this can be useful (it is particularly useful for creating and re-using sprites), but if you don’t expect it, it can cause problems.
Duplicating a symbol is the recommended way for using a component more than once. By using this method, you have two completely separate copies of the component, which you can configure individually. In order to duplicate a symbol, right-click the symbol in the Symbols panel and choose “Duplicate”
NB: Importing a component twice will also create two separate copies of the component in the Symbols panel.
Centering content in full screen layers
Adobe Edge Animate supports using percentages as size and hence it is possible to have the stage or certain symbols scale with the size of a device, which is a great feature. However, out of the box, Adobe Edge Animate does not support centering content within such a liquid stage. Below is a workaround you can use until Adobe Edge Animate starts supporting this feature.
- Right-click the content you want to center and select “Group Elements in DIV”
- Rename the newly created div to something like “Centered Content”
- In the properties panel, set L and T to 50% and set W and H to 0 px and set overflow to visible (the overflow setting is in the top right of the properties panel)
- Any content inside this group will now be positioned relative to the center of the stage.
NB: In case you want to position content relative to, for example center-left or bottom-center, instead of center-center, you can change L or T to 0% or 100%. For content that is positioned relative to one of the corners of the screen, you can simply use Edge Animate’s built-in positioning tools.*
Below, the Weborama components are discussed.
This component is an invisible area. It defines an exit click. In the click action of this component, you can set a variable called ‘clickId’. By default, the default exit click is called, but if you set this variable, you can call another exit link. The variables are defined as ‘default’, ‘extra1’, ‘extra2’ etc. These links can be specified in the previewer.
This component defines an invisible area of the collapsed scene of an expandable-type advertisement which, when clicked, causes the advertisement to expand. This component is included with the template and should not be removed, nor should an extra expand button be added, or the advertisement might not function properly. In some cases, however, you may want to resize this component.
This component defines a button in the expanded scene of an expandable-type advertisement which, when clicked, causes the advertisement to collapse. This component is included with the template and should not be removed, nor should an extra expand button be added, or the advertisement might not function properly.
This component defines a button which, when clicked, causes the advertisement to close. This component is included with the template and should not be removed, nor should an extra button be added, or the advertisement might not function properly.
Click to Calendar
var date = new Date("December 31, 2013 23:59:59");
Note that the time can be left out.
Click to Call
This component defines a button which, when clicked, opens the user’s phone and asks to call a certain phone number. In the click action of the component you can set the phone number through a variable phone_number.
Click to Whatsapp
This component defines a button which, when clicked, opens the whatsapp app. The user can select a contact from a list and send a predefined message to that contact.
Click to Whatsapp Preview
Click to Whatsapp QR
Click to Email
This component defines a button which, when clicked, opens the user’s email program with a pre-filled email. In the click action of the component you can set the variables recipient, subject, body, cc and bcc.
Click to Facebook
This component defines a button which, when clicked, opens the Facebook app. For users that do not have Facebook, it will open the App Store / Play Store on the screen for downloading the Facebook app.
NB: The component contains a variable appURL which is currently set to fb://. With this value, the Facebook app is opened, but no deep-linking is done. There are many options for deep-linking to different pages in Facebook. As these are not clearly documented by Facebook, we are still researching the different possibilities. See the document “Documentation Mobile Feature Snippets” for more details.
Click to Maps
This component defines a button, which when clicked, opens a map application. All Android devices (all versions) have the Google Maps application as the standard map application. Therefore, we use the Google API to refer to a location.
For directions from the current location to the destination address you can replace your destination with the example query Weborama Amsterdam (this can be a specific address or a search query with only one specific result):
var androidURL= 'google.navigation:q=Weborama+Amsterdam';
If there are no directions, only a specific location, replace the example above to:
var androidURL= 'geo:?q=Weborama+Amsterdam';
For iOS devices we use two different URLs because there is a difference between the standard map application. iOS 6 and above have the standard maps software Apple Maps. iOS 5 and below have the standard maps software Google Maps. Therefore we use two different variables: appleURL and googleURL.
For directions from the current location to the destination address you can replace your destination with the example query Weborama Amsterdam. Note that this is a different query for both variables.
var googleURL='http://maps.apple.com/?saddr=Current+Location&daddr=Weborama+Amsterdam'; var appleURL='http://maps.apple.com/?saddr=&daddr=Weborama+Amsterdam';
NB. “Current Location” is not supported in Apple Maps (iOS 6 or above), so make sure that the saddr is empty as mentioned above.
saddr = source address and daddr = destination address
If there are no directions to display, only a destination address, replace for both variables the saddr and daddr to:
NB. Make sure you fill in every variable URL correctly, or else the function will not work.
Click to Skype
This component defines a button which, when clicked, opens the Skype app and asks to call a person through Skype. It is also possible to ask to start a chat instead, as explained below. If the user does not have Skype installed, it will open the App Store on the screen for downloading the Skype app. The component contains a variable appURL which can have one of the following two forms:
var appURL = ‘skype:RECIPIENT?call’ var appURL = ‘skype:RECIPIENT?chat’
Note that in the above, RECIPIENT should be replaced by the Skype ID of the intended recipient. It is also possible to add multiple Skype IDs, separated by semi-colons, to start a group call or chat. See the document “Documentation Mobile Feature Snippets” for more details.
NB: Due to limitations of the Skype app for Android, this component currently only works on iOS.*
Click to SMS
This component defines a button which, when clicked, opens the user’s messaging center and asks to send an SMS to a certain phone number. In the click action of the component you can set the phone number through a variable phone_number. Furthermore, you can prefill the body of the text message by setting the variable message.
NB: Prefilling the body of the text message is not possible for in-browser advertisements on Android 2.x.
Click to YouTube
This component defines a button which, when clicked, opens a video in the YouTube app (iOS 6). If the YouTube app is not installed, it will open the video in the YouTube mobile site instead. The default YouTube app for iOS 5 and older is not supported to direct the user to the application, the video opens in the mobile site instead.
There are two settings for the click to YouTube function, which can be set in the Click_Area.click action:
- True; enter your YouTube video ID, which can be found in the URL of your video. For example:https://www.youtube.com/watch?v=6Ejid8geqi0 where 6Ejid8geqi0 is the video ID. The video can be directed to a HTML page or to the YouTube application if installed.
- False; enter your YouTube channel name, which can be found in the URL of you channel page. For example: www.youtube.com/user/AdrimeRichMedia where AdrimeRichMedia is the channelname (no spaces). The channel can be directed to HTML pages only.
- youtubeID (enter video ID or channelname)
NB: enter a video ID or a channelname
Video ID is true example
var videoID = true; var youtubeID = '6Ejid8geqi0'
Video ID is false example
var videoID = false; var youtubeID = 'AdrimeRichMedia'
Weborama Component * Name: Weborama Video Player * Date: 30-04-2015 (d-m-y)
This VideoPlayer has been tested in the following browsers:
- Mac Safari, Mac Chrome, Mac Firefox, Windows Chrome, Windows Firefox, Windows IE9 and up.
- iOS web (safari) and most iOS Apps.
- Android web (chrome) and most Android Apps.
video_source: The name of the video file (“video.mp4”).
video_autoplay: true or false. Keep in mind that autoplay only works on desktop, and is not permitted/functional on most iOS and Android devices.
video_id: The reference name of the videoplayer, default is “video1”. If you use only 1 video, leave it like this. For multiple videos, use a new name for each duplicated symbol (video1, video2, video3)
Advanced settings: (Can be overruled because of device/OS/environment limitations)
video_muted: true or false.
video_controls: “custom”, “device”, “none”. Keep in mind that video controls are always “device” in iOS web and the video will always play fullscreen on iPhones (device player). Custom means you will see a small play button and the video is clickable (exit click). None means no controls at all.
video_endscreen: true or false. False means the startscreen is visible after video finish. True means there is a Symbol visible after video finish, where an animation can be added and the video can start again with a replay button.
video_autoload: true or false. Default is true, so the video is added on creationComplete. This should be false when this videoplayer is in another layer like the billboard that must load xml files first before positioning on the page.
To add this videoplayer to your Edge project do the following:
- In Edge go to the Symbols panel. There is a little plus on the right, press it to import a new Edge Symbol.
- Browse to your downloaded symbols and import
- Now drag the
Weborama_VideoPlayersymbol to your stage or content symbol.
- Make sure it is above the
Change the Start Overlay (works like a poster image): Open the
Weborama_VideoPlayersymbol, then open the
Video_Start_Overlay symbol. Change the image (video_poster) to your own image, and check if you still need/want the weborama play icon.
Use the following code if you want to play/pause the video from outside the videoplayer symbol in Edge:
Use the following code if you want to access the videoplayer from outside the videoplayer symbol in Edge:
Add multiple videos to your project:
- Import the Weborama_VideoPlayer as instructed above
- Duplicate this Symbol and choose a name like “Weborama_VideoPlayer2”. Duplicate as many as you need.
- For each video drag a new Weborama_VideoPlayer symbol from your symbol library.
- Make sure you use different reference names for each Weborama_VideoPlayer, like video1, video2, video3
When the video is finished playing there is a
Video_Finished_Overlay that can contain any content like animations or just the same video poster image. There is a button called
weborama_replay_icon that rewinds and plays the video again:
Use this code to replay the video. It can be placed on any button or on a transparent overlay, even on the video poster image. Delete content you don’t use.
Make sure to upload (your versions of) the video.mp4 file to the previewer, as these are not automatically included in the Publish Package by Edge Animate.
Extra note: Always place the
Weborama_VideoPlayer above the
Weborama_Click or it won’t be accessible.
Previews with different settings:
If you have any questions about this VideoPlayer Symbol please send an email to email@example.com