Adobe Edge Animate CC Help (2014) Guide 2014 En
User Manual: adobe Adobe Edge Animate - CC (2014) - Help Guide Free User Guide for Adobe Edge Animate Software, Manual
Open the PDF directly: View PDF .Page Count: 138
Adobe® Edge Animate CC Help
June 2014
Legal notices
Legal notices
For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
Last updated 6/15/2014
iii
Contents
Chapter 1: What's new
New features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Chapter 2: Download sample files
Download samples from Adobe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Sample Downloads from Chris Gannon's site
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .6
Chapter 3: Creating content & importing assets
Creating content for animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Creating a project and importing content (Video)
Create assets and import them into your Edge Animate project
Use web fonts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Add audio to animations
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Add video to animations
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Import sprite sheets
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
Hyperlink elements to Adobe DPS articles
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Using Flash sprite sheets with Animate (Tutorial)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Chapter 4: Create animations using the Timeline
The Edge Animate timeline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Creating Animations in Edge Animate (Video)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
Using the Pin tool, Keyframes, and Transitions for animation
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Adding text to your project (Tutorial)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
Animating text (Video)
Create nested animations with symbols
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Animate existing HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Add interactivity with JavaScript
Leveraging independent symbol timelines (Tutorial)
Create an animated logo (Tutorial)
Chapter 5: Use motion paths
Animating over a curved path
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
New features summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
New features summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
New features summary
Publish your content
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
What's new in Edge Animate 1.5
In-app lessons
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Target older browsers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
System requirements for Animate
Release Notes
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
Learn Edge Animate video tutorials
Create your first Edge Animate project
Adding basic interactivity
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Last updated 6/15/2014
iv
EDGE ANIMATE
Contents
Using Animate files in InDesign or Muse (Video)
Introduction to Edge Animate
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Create your first Edge Animate project
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Use Edge Animate file in InDesign or Muse
Download files from Adobe Dev Center
Publishing and integration (Video)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Chapter 6: Layout and design
Creating a flexible layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Create fluid responsive web page layouts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Chapter 7: Integration and publishing
Edge Animate API guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Edge Animate and the Twitter API (Video)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Enhance your DPS folios with HTML animations (Tutorial)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Spice up your WordPress Site with Edge Animate
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Create a PhoneGap Build app with Edge Animate
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Extending Edge Animate with 3rd party web components (Video)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Last updated 6/15/2014
1
Chapter 1: What's new
New features summary
The 2014 release of Edge Animate CC includes several new features and enhancements to help you create rich
animations faster and easier. Read on for a quick introduction to new features and links to resources offering more
information.
Support for native HTML5 video
Edge Animate provides an intuitive user interface to let you import HTML5 videos into your compositions.
The video then can be used as part of an overlay and can have other composition elements animate around the video.
Also, since the format for the video is native HTML5, it plays on iOS and Android devices as well as in modern desktop
browsers.
For more information on using video in your animations, see Add video to animations.
Sprite sheet import
With Edge Animate CC 2014, you can import sprite sheets to add advanced, multi-frame animations to your Edge
Animate compositions.
Sprite sheets let your graphics download faster with fewer HTTP requests. Automatic keyframing of sprites on import
saves time by reducing effort spent with manual positioning of frames.
You can import sprite sheets (File > Import Spritesheet) generated in Adobe Flash Professional CC 2014 or any other
tool that lets you generate sprite sheets.
Last updated 6/15/2014
2
What's new
Import sprite sheets
For more information on importing sprite sheets into Edge Animate, see Import sprite sheets .
Article linking for Adobe DPS
Edge Animate lets you link to your Adobe InDesign or DPS Folio articles using the options on the user interface
without writing code. You can create interactive title pages, table of contents, and advanced navigation to target articles
and article subsections of your digital publications more easily and quickly.
For more information on linking elements to eBook articles, see Hyperlink elements to eBook articles .
Enhanced Actions editor
The Actions pop-up window has been redesigned to be more designer-friendly. The enhanced Actions editor reduces
the need to code, making it easier to add interactivity and more approachable for designers.
Last updated 6/15/2014
3
What's new
Actions pop-up window prior to Edge Animate CC 2014
Actions editor in Edge Animate CC 2014
A Step 1: Pick an action B Step 2: Pick a target C Step 3: Edit the code snippet
The new Actions editor visually guides you through the various steps in assigning actions to targets.
1 Pick an Action - Actions are now logically grouped into categories. If you know the name of the action, you can
search for the action using the search box. Else, pick a category to view the actions in it and click the required action.
2 Pick a Target - Targets are grouped under Stage. Click Stage to view the target elements. When you click Stage, you
may find a subcategory for Symbols if your composition contains symbols. Double-click the target element.
3 Modify the code snippet as required.
Last updated 6/15/2014
4
What's new
If you find portions of code that are reused often, you can save them as snippets and insert them with a single click
when required.
Save code snippets
In the Actions editor, click '+' adjacent to My Snippets, and then click one of the following options:
Custom snippets
Create Custom Click to enter your own code and save it as a snippet. When you click this options, a code window
appears. Type your code, click Save, and then enter a name for the snippet.
Add New From Selection Click to save the selected portion of the code as a snippet. Enter a name for the snippet in the
Actions editor.
Insert code snippets
In the code window of the Actions editor, click at the location where you want to insert the code snippet. Click My
Snippets, and then choose the required snippet from the list that appears. The saved snippet gets inserted at the
insertion point in the code window.
Copy-paste from Adobe Illustrator
With Edge Animate CC 2014, you can copy (Ctrl/Cmd+C) an illustration in Adobe Illustrator, and paste it
(Ctrl/Cmd+V) directly into Edge Animate. No need to save the illustration as an SVG file in Adobe Illustrator and
import it through the File > Import option as in the previous versions of Edge Animate. When you paste the illustration
in Edge Animate, it is automatically imported as an SVG file.
Last updated 6/15/2014
5
What's new
Adobe Illustrator illustrations imported as SVG files
Scrolling hand and zoom tools
Edge Animate CC 2014 includes scrolling hand and zooming tools to help you navigate your Edge Animate
composition easily.
Zoom and pan tools
Last updated 6/15/2014
6
Chapter 2: Download sample files
Download samples from Adobe
Download samples from Adobe
Sample Downloads from Chris Gannon's site
Sample Downloads from Chris Gannon's site
Last updated 6/15/2014
7
Chapter 3: Creating content & importing
assets
Creating content for animation
Creating content for animation
Creating a project and importing content (Video)
Creating a project and importing content (Video)
Create assets and import them into your Edge Animate
project
Create assets and import them into your Edge Animate project
Use web fonts
You can apply Edge Web Fonts to text directly from within Edge Animate. When you select a font from the Edge Web
Fonts dialog, the corresponding code to fetch the font from the server is automatically incorporated into the code.
Edge Animate also allows you to specify fallback fonts when there is a problem with downloading, or using Edge Web
Fonts on the user's computer.
1 Insert text within the Edge Animate canvas.
2 In the Text option of the Properties panel, click the "+" button next to the font menu.
Last updated 6/15/2014
8
Creating content & importing assets
3 Select the font that you want to use. A preview of the text with the applied font is displayed.
You can filter the fonts in the panel by their type using the buttons to the left of the panel. For example, to view only
fonts of the sans serif type, click the Sans Serif button.
4 Click Add Font.
The selected and applied fonts are added to the Font library in Edge Animate. Double-click the font in the Font
library to specify fallback fonts.
In cases where there is a problem with downloading web fonts from the server, the fallback fonts are used for display.
The fonts are chosen in the order in which they appear in the list.
Last updated 6/15/2014
9
Creating content & importing assets
Add audio to animations
Adobe Edge Animate now supports native HTML5 audio with the element — making it possible to add sounds
to your animation projects. Using basic HTML and JavaScript, you can control audio playback in compositions. You
can also bind audio elements to touch and mouse events, as well as trigger audio playback on the timeline. The audio
capabilities in Adobe Edge Animate are embedded in the HTML DOM. So sounds play on any computer or device
without requiring a plug-in.
You can import the following audio types into Edge Animate:
• .mp3
• .ogg/.oga
• .wav
• .m4a
• .aac
For the best cross-browser consistency, include .mp3 and .ogg resources of audio elements in your project. For a
detailed description of supported audio types, visit Media formats supported by the HTML audio and video elements.
To create fallback versions of your audio file, you can use an audio conversion application such as Adobe Audition,
which is included in your Creative Cloud membership.
Add audio to compositions
Do one of the following:
• Drag-and-drop the audio files into your project from your file system. An 'audio group' with the name of the audio
file is created in the Library. This audio group contains the audio file and the fallback files for cross-browser
compatibility.
Note: Fallback files get automatically grouped under the audio group when you drop them into the project.
Last updated 6/15/2014
10
Creating content & importing assets
Audio group in Library
• Click Add Audio in your project Library and browse for the audio file. Then, drag the audio group to the stage.
Add Audio option in Library
After you add audio to your project, an 'audio element' appears in the Elements panel. When you select the audio
element in the Elements panel, options to control the playback of your audio appear.
Audio in Elements panel
Play back and control audio
You can play back and control audio using any of the following options:
• Properties panel
• AutoPlay: Allows the audio file to automatically play on the timeline.
• Loop: Makes the audio file loop from the beginning after it finishes playing.
Audio control options in the Properties panel
• Timeline
• Play: Plays the audio file from the current playhead position.
Last updated 6/15/2014
11
Creating content & importing assets
• Play From: Allows you to specify the time marker you want to play from.
• Pause: Allows you to pause the audio track. Use a play function to resume play back.
Audio control options in Timeline
• Audio actions: Using code snippets in Actions to control audio playback through events.
More Help topics
Using audio on devices
Audio actions
1 Click {} adjacent to the audio element on the timeline to open the Actions editor.
2 From the list of events that appear, click the required trigger.
3 In the Pick An Action list, click Audio, and then click the required action.
Audio actions in Actions editor
4 In the Pick A Target section, click Stage, and then double-click the element to which the action that you selected
must apply.
5 If required, modify the code in the code window.
Last updated 6/15/2014
12
Creating content & importing assets
Important: Sometimes your audio plays perfectly fine locally, but fails to play after you load it to your Web server. In
such cases, configure the .htaccess file of your Website to include the MIME types required for audio support. Contact
your Website administrator for assistance.
Fine-tune audio
You can set keyframe transitions to control volume transitions in the timeline. Use volume transitions to create unique
audio effects, such as, fade in, fade out, and cross-fading multiple tracks.
Note: Volume transitions for audio are not available on most mobile devices. See Using audio on devices for restrictions.
Preload audio
To preload audio files before the composition loads, select “Preload Audio” in the Preloading section of the Properties
panel on stage.
Note: Preloading audio is not available on most mobile devices. See Using audio on devices for restrictions.
Enable the default audio player
You can use the browser default Windows Media Player to show controls for your audio. The default audio player is
hidden by default. To turn the display of the player on, select the audio element and select “On” in the Properties panel.
Enabling the default audio player
The player skin is rendered by the browsers, and appears different based on the browser it is viewed in. For example,
the player you see in Chrome is different than the player you see in Firefox. See Audio actions to learn how to create
custom controls that you can use to create your own player.
When the player is viewed on stage, you can add motion and transform properties to the player like you add for other
objects. Since elements are a special type of HTML element, only a subset of properties is available for you to
apply:
• Opacity
• Clipping
• Position and Size
• Transform
Using audio on devices
iOS
In Safari on iOS (for all devices, including iPad), where users may be on a cellular network and be charged per data unit,
preload, AutoPlay, and play back actions are disabled. No data is loaded until the user plays the audio.
Last updated 6/15/2014
13
Creating content & importing assets
You can use the Audio Actions to call an audio element triggered by a user event. For more information on audio
actions, see Audio Actions .
Volume keyframes and control configured through the volume property are not supported on iOS devices. Users can
adjust the volume using the volume control of the device itself.
Prior to iOS 4.0, iPhone and iPod touch did not play audio inline. Audio was presented in full-screen mode. Audio plays
inline on iOS 4.0 and later on all devices.
Android
Android generally has the same audio element limitations as iOS.
Tips and cross-browser considerations
Audio sync
Audio can be used to choreograph sound to your stage compositions. However, due to the nature of the Web, audio
tracks can fall out-of-sync with elements moving on the stage. You may experience playback latency when coordinating
movement with sound, especially in longer tracks.
Audio Sprites
Using audio sprites allows you to create a single audio file with separate playable parts. This technique is used to
download all your audio in a single file to save download time.
To use an audio sprite, convert your audio element to a symbol and use play back markers to call the sections of your
sprite.
Add video to animations
Edge Animate supports native HTML5 videos making it easier for you to use your favorite video clips within your
compositions. You can control the playback of videos using basic playback actions and JavaScript. Also, you can bind
video elements to touch and mouse events to create a rich interactive experience.
Video playback capabilities are supported in the HTML DOM. This means, the videos can play on any modern desktop
or device browser without requiring a plug-in.
You can import .mp4 and .ogv files into Edge Animate.
For the best cross-browser compatibility, include .mp4 and .ogv resources of video elements in your project. For a
detailed description of supported video types, visit Media formats supported by the HTML audio and video elements.
Add video to compositions
Do one of the following:
• Click File > Import or drag-and-drop the video files directly onto the Stage from your file system. A 'video group'
with the name of the video file is created in the Library. This video group contains the video file and any fallback
files you add for cross-browser compatibility.
Last updated 6/15/2014
14
Creating content & importing assets
Note: Fallback files get automatically grouped under the video group by name when you import them into the
composition.
• Click Add Video in your project Library and browse for the video file. Then, drag the video group from the library
to the Stage.
Add Video option in Library
After you add a video to your composition, a 'video element' appears in the Elements panel. Options to control the
playback of your video appear in the Properties panel when you select the video element in the Elements panel.
Playback and control video
You can play back and control video using any of the following options:
• Properties panel
• Autoplay: Allows the video file to automatically play on the timeline and desktop browsers.
• Loop: Makes the video file loop from the beginning after it finishes playing.
Video controls in Properties panel
• Timeline
• Play: Plays the video file from the current playhead position.
• Play From: Allows you to specify the time marker you want to play the video from.
• Pause: Allows you to pause the video. Use a play function to resume playback.
Last updated 6/15/2014
15
Creating content & importing assets
Video playback options in Timeline
• Video actions: Using code snippets in the Actions editor to control video playback through events.
Video actions
1 Open the Actions editor by clicking {} adjacent to Stage on the Timeline.
2 Click a trigger (event).
3 From the Pick An Action list, click Video, and then click the required action.
You can also search for an action using the search box in the Pick An Action section.
Video actions in Actions editor
4 From the Pick A Target section, click Stage, and then double-click the element or symbol to which you want to assign
the selected action.
You can also search for the element or symbol using the search box in the Pick A Target section.
Preload video
To preload video files before the composition loads, select “Preload Video” in the Preloading section of the Properties
panel on stage.
Note: Preloading video is not available on most mobile devices. See Using video on devices for restrictions.
Last updated 6/15/2014
16
Creating content & importing assets
Preload video
Enable the default video player
You can use the browser's default media player to show controls for your video. The default video player is hidden by
default. To enable the default player, select the video element and select "Controls" in the Video section of the Properties
panel.
Enabling default video player in Properties panel
The player skin is rendered by the browsers, and appears different based on the browser it is viewed in. For example,
the player you see in Chrome is different than the player you see in Firefox.
When the player is viewed on stage, you can add motion, transform, and other properties to the player like you add for
other objects.
Using video on devices
iOS
In Safari on iOS (for all devices, including iPad), where users may be on a cellular network and be charged per data unit,
preload, Autoplay, and playback actions are disabled. No data is loaded until the user plays the video.
You can use the video actions to call a video element triggered by a user event. For more information on video actions,
see Video actions .
Android
Android generally has the same limitations for videos as iOS.
Last updated 6/15/2014
17
Creating content & importing assets
Import sprite sheets
As designers, you most likely use many other tools or programs such as Adobe Photoshop or Adobe Flash Professional
to create complex images and character animations. Edge Animate lets you reuse such creations by supporting the
import of sprite sheets generated from such tools.
A sprite sheet is an image file that contains several smaller graphics in a tiled grid arrangement. By compiling several
graphics into a single file, you enable Edge Animate and other applications to use the graphics while only needing to
load a single file. This loading efficiency can be very helpful in situations such as building animations where
performance is especially important.
Most tools let you export sprite sheets only as image files (PNG/JPEG). Adobe Flash Professional CC 2014 and later can
generate Edge Animate-specific sprite sheets. You can import both types of sprite sheets - PNG/JPEG as well as the ones
that are generated from Flash Professional - into Edge Animate.
Note: You may see performance issues with Edge Animate compositions on devices if you import and use sprite sheets of
size greater than 2048 X 2048 pixels.
Import sprite sheets saved as only image files
1 Before importing sprite sheets into Edge Animate, ensure that:
• The images in the sprite sheet are of equal dimensions
• The padding between the images are uniform
2 Open Edge Animate. In the Symbols panel, right-click +, and click Import Sprite Sheets.
You can also click File > Import Sprite Sheets.
Import Sprite Sheets from Symbols panel
3 Browse for the required sprite sheet and select the PNG or the JPEG file. Click OK.
The Define Sprite Tiles dialog box appears.
Last updated 6/15/2014
18
Creating content & importing assets
Define Sprite Tiles - importing PNG or JPEG sprite sheets
• To preview the animation, click Preview Animation
• Specify the duration and fps. For PNG and JPEG files, the fps is set to 24 by default. You can modify the fps as
required.
• Specify the number of rows and columns and the trimming options.
4 Click Import.
The PNG or the JPEG file corresponding to the sprite sheet is saved in the Images panel. The constituent images are
saved as separate symbols (named spritesheet_name_n) in the Symbols panel.
5 Drag the required symbols from the Symbols panel onto the Stage.
Import sprite sheets generated from Adobe Flash Professional
1 Ensure that you have generated the sprite sheet by choosing the Edge Animate format in Adobe Flash Professional
CC 2014 (or later).
For information on generating sprite sheets in Adobe Flash Professional CC, see Adobe Flash Professional CC Help.
2 In the Symbols panel, right-click +, and click Import Sprite Sheets.
Last updated 6/15/2014
19
Creating content & importing assets
You can also click File > Import Sprite Sheets.
Import Sprite Sheets using Symbols panel
3 Browse for the required sprite sheet and select the PNG or the JPEG file. Click OK.
The Define Sprite Tiles dialog box appears.
Define Sprite Tiles - importing Flash sprite sheets
• To load the EAS file that corresponds to the selected PNG or JPEG, select Load An EAS File.
• To preview the animation, click Preview Animation.
Last updated 6/15/2014
20
Creating content & importing assets
• Specify the duration and fps. For EAS files, the fps is inherited from the source. You can modify the fps as
required.
4 Click Import.
The PNG or the JPEG file corresponding to the sprite sheet is saved in the Images panel. The constituent images are
saved as separate symbols (named spritesheet_name_n) in the Symbols panel.
5 Drag the required symbols from the Symbols panel onto the Stage.
Hyperlink elements to Adobe DPS articles
e-magazines published through Adobe Digital Publishing Suite (DPS) can be made more engaging and interesting by
including Edge Animate compositions in them. Edge Animate lets you publish the compositions as OAM files that can
be easily included in Adobe InDesign (part of DPS).
In addition, Edge Animate compositions can be used as navigation aids within an e-magazine. Elements in a
composition can be hyperlinked to specific articles in the magazine where the animation will be embedded. Readers
can click these hyperlinked elements to quickly jump to the relevant article.
You can set up hyperlinking between the elements of a composition and the required Adobe DPS articles right from
within Edge Animate. You can then test the linking by publishing the animation as OAM files and embedding them
within the articles.
To hyperlink elements to articles or pages in an Adobe DPS article:
1 Click {} adjacent to Stage on Timeline.
2 Select a trigger from the list that appears in the Actions editor. It is recommended that you choose the
compositionReady event for setting up navigation.
Actions editor showing the compositionReady event
Last updated 6/15/2014
21
Creating content & importing assets
3 In the Pick An Action section, click Adobe DPS, and then click Navigate Article. Specify the Article Name and Page
No you want to link to. You can also edit the code to specify these details as explained in Step 5.
Adobe DPS action options in Actions editor
4 In the Pick A Target section, click stage, and then double-click the name of the element that is the target for the
action above.
5 (Optional) Edit the code to specify one of the following:
• The name of the article in the required Folio in Adobe InDesign and the page number
Example:
sym.$("Rectangle").append(' Open).
Edge Animate only opens standards-compliant code. For example, if you have duplicate IDs, the tool notifies you
that the document has duplicate IDs and does not open the file. If you receive errors or see odd behaviour, try
running the HTML page through an HTML validator.
2 Select a page element on the Stage.
You can also select a page element in the Elements panel, which displays the page's DOM (Document Object
Model).
3 Animate the element. See Using the Pin tool, Keyframes, and Transitions for animation.
Note: There are limitations to what you can do with HTML elements. HTML elements can't be converted to symbols
and do not have all the properties of other elements. If you receive errors or see odd behaviour, try running the HTML
page through an HTML validator.
You can also add elements like divs, text, and import images in Edge, and then animate and add interactivity to those
elements.
Add interactivity with JavaScript
You can use JavaScript to add interactivity to your compositions. You can define actions for each element using a builtin code editor and snippet library. Actions are functions that can be added to handle a single event.
Define actions
1 On the Timeline, click the Open Actions button on the left side of an element or symbol name.
Last updated 6/15/2014
53
Create animations using the Timeline
You can also click the Open Actions button on the left side of an element or symbol name in the Elements panel.
2 Select an event to trigger the action.
The Actions Editor appears with a code editor and a list of code snippets on the right.
3 Write the code for the event.
You can write your own code or use the code snippets to add common functions. For reference information, see the
Edge Animate API guide.
Use the Code editor
The Code editor gives you a complete view of the JavaScript code in your project. It also allows you to view the raw code
for the actions file.
1 Select Window > Code.
You can also press Ctrl+E (Windows) or Cmd+E (Macintosh).
2 Select an event or an element by clicking the Plus (+) icon on the left of Stage in the left sidebar.
3 To edit the entire JavaScript file, click the Full Code button on the upper right of the panel.
Add labels to the Timeline
You can insert labels on the Timeline and then use them as time references in function parameters. You can use a label
name as a parameter for any playback function expecting a timecode value. Labels let you create actions like playing or
seeking to a point on the Timeline.
To add a label:
1 Move the Playhead to the location you want.
2 Click the Insert Label button on the upper-right corner of the Timeline.
You can also press Ctrl+L (Windows) or Cmd+L (Macintosh).
3 Specify a name for the label.
4 When defining an action for an element in the code editor, use the label name as a parameter for playback functions
expecting a timecode value.
For example, instead of sym.play(1000), you can use sym.play('mylabel').
Last updated 6/15/2014
54
Create animations using the Timeline
Add triggers to the Timeline
You can place triggers on the Timeline to execute JavaScript code at a point in time.
To add a trigger:
1 Move the Playhead to the location you want.
2 Click the Insert Trigger button on the upper-right corner of the Timeline.
You can also press Ctrl+T (Windows) or Cmd+T (Macintosh).
The Code panel appears.
3 Define the action to take at the trigger. For reference information, see the Edge Animate API guide.
You can modify the code for the trigger at any time by double-clicking the trigger icon on the Timeline.
Learn more
• Adding interactivity
• Edge Animate API guide
Leveraging independent symbol timelines (Tutorial)
Leveraging independent symbol timelines (Tutorial)
Create an animated logo (Tutorial)
Create an animated logo (Tutorial)
Last updated 6/15/2014
55
Chapter 5: Use motion paths
Animating over a curved path
New features summary
Update to Edge Animate CC available
For more information, see the New features summary .
New features overview
Sarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animate CC features.
Motion paths
Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using
this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved
through linear motion.
To control the movement of an element using motion paths, perform the following steps:
1 Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and
Size accordion.
Motion Paths option in the Contextual Properties Panel
To set motion paths as the default method of movement for new elements in the composition, select “Animate with
Motion Paths” from the Layout Defaults.
Last updated 6/15/2014
56
Use motion paths
Using Motion Paths as the default for new elements
2 Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between
two anchor points (represented by triangles) as shown below:
'Bee' element to be moved
Path for the 'Bee' element
Last updated 6/15/2014
57
Use motion paths
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the AutoOrient option to control the direction of your object as it moves along the path.
Click the path to see the handles for editing
Motion Path defined using Bezier curve
• To add an anchor point, hover your mouse on the path and click.
• To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
• To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
• To unlink the two handles on either side of an anchor point so that you can move one independently of the other,
Option/Alt + click and drag.
Last updated 6/15/2014
58
Use motion paths
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two,
or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is
played back on a per-path basis.
• To split a motion path, add a keyframe in the timeline.
• To create a contiguous motion path, delete a location keyframe on the timeline.
• To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
• To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path
off-center.
Motion Paths and Responsive Layouts
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set
your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use
this method to set the motion path relative to top/right/bottom/left.
Tutorial
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an
Animate composition.
Optimized publishing with CDN Hosting
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so,
select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the
benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
Publishing with CDN hosting
Templates
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate
composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in
your current composition. You can load templates from the visual template loader.
Last updated 6/15/2014
59
Use motion paths
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the
templates gallery you can import, delete, and create a new composition from a template.
Create From Template option in File menu
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
Swipe gestures
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the
swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple
elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For from the menu, and then click swipeleft or
swiperight.
Swipe gestures
Last updated 6/15/2014
60
Use motion paths
Eyedropper tool
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours
from the stage.
Eyedropper tool
Color coding of elements
You can now assign colors to various elements in your composition to easily identify and work with them. You can click
the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline
transitions too.
Color coding of elements in Timeline
Color coding in the Elements panel
Elements panel and Timeline jumping
The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).
Last updated 6/15/2014
61
Use motion paths
New features summary
Update to Edge Animate CC available
For more information, see the New features summary .
New features overview
Sarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animate CC features.
Motion paths
Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using
this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved
through linear motion.
To control the movement of an element using motion paths, perform the following steps:
1 Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and
Size accordion.
Motion Paths option in the Contextual Properties Panel
To set motion paths as the default method of movement for new elements in the composition, select “Animate with
Motion Paths” from the Layout Defaults.
Using Motion Paths as the default for new elements
2 Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between
two anchor points (represented by triangles) as shown below:
'Bee' element to be moved
Path for the 'Bee' element
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the AutoOrient option to control the direction of your object as it moves along the path.
Click the path to see the handles for editing
Last updated 6/15/2014
62
Use motion paths
Motion Path defined using Bezier curve
• To add an anchor point, hover your mouse on the path and click.
• To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
• To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
• To unlink the two handles on either side of an anchor point so that you can move one independently of the other,
Option/Alt + click and drag.
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two,
or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is
played back on a per-path basis.
• To split a motion path, add a keyframe in the timeline.
• To create a contiguous motion path, delete a location keyframe on the timeline.
• To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
• To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path
off-center.
Motion Paths and Responsive Layouts
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set
your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use
this method to set the motion path relative to top/right/bottom/left.
Tutorial
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an
Animate composition.
Optimized publishing with CDN Hosting
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so,
select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the
benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
Publishing with CDN hosting
Templates
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate
composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in
your current composition. You can load templates from the visual template loader.
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the
templates gallery you can import, delete, and create a new composition from a template.
Last updated 6/15/2014
63
Use motion paths
Create From Template option in File menu
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
Swipe gestures
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the
swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple
elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For from the menu, and then click swipeleft or
swiperight.
Swipe gestures
Eyedropper tool
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours
from the stage.
Eyedropper tool
Color coding of elements
You can now assign colors to various elements in your composition to easily identify and work with them. You can click
the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline
transitions too.
Color coding of elements in Timeline
Color coding in the Elements panel
Elements panel and Timeline jumping
The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).
New features summary
Update to Edge Animate CC available
For more information, see the New features summary .
Last updated 6/15/2014
64
Use motion paths
New features overview
Sarah Hunt, the Product Manager for Edge Animate provides a brief overview of Edge Animate CC features.
Motion paths
Motion paths allow you to add highly expressive motion to elements which follow along a custom curved path. Using
this feature, you can emulate real-world experiences through fluid, physics-based movements that cannot be achieved
through linear motion.
To control the movement of an element using motion paths, perform the following steps:
1 Select the element on Stage, and click Motion Paths in the Contextual Property Panel (CPP) under the Position and
Size accordion.
Motion Paths option in the Contextual Properties Panel
To set motion paths as the default method of movement for new elements in the composition, select “Animate with
Motion Paths” from the Layout Defaults.
Using Motion Paths as the default for new elements
2 Create a transition as you normally do using keyframes or the Pin. When you do so, you notice a line drawn between
two anchor points (represented by triangles) as shown below:
'Bee' element to be moved
Path for the 'Bee' element
Click the line anywhere to see the handles that you can drag to define the path using a Bezier curve. Use the AutoOrient option to control the direction of your object as it moves along the path.
Click the path to see the handles for editing
Motion Path defined using Bezier curve
• To add an anchor point, hover your mouse on the path and click.
• To delete an anchor point, hover your mouse on the anchor, and then Cmd/Ctrl + Click
• To convert a Bezier to a sharp point, click the anchor point, and then Option/Alt + Click.
Last updated 6/15/2014
65
Use motion paths
• To unlink the two handles on either side of an anchor point so that you can move one independently of the other,
Option/Alt + click and drag.
Keyframes for location on the timeline represent two separate motion paths. Add a keyframe to split your path into two,
or delete a keyframe to create one contiguous path. Easing can be applied to motion paths, and the easing effect is
played back on a per-path basis.
• To split a motion path, add a keyframe in the timeline.
• To create a contiguous motion path, delete a location keyframe on the timeline.
• To split two adjoining motion paths in space, Cmd/Ctrl-click and drag at a joining keyframe anchor.
• To connect two end anchors of separate motion paths, drag the anchors together; they will snap to connect location.
The object is tied to the path by the transform origin. Transform origin can be adjusted so the object can follow the path
off-center.
Motion Paths and Responsive Layouts
In the current implementation, motion paths cannot be set to use percentage-based layouts. To work around this, set
your pathed object inside a group, parent, or symbol and set the parent to use %-based positioning. You can also use
this method to set the motion path relative to top/right/bottom/left.
Tutorial
Click Windows > Lessons panel, and click Motion Paths for a guided, hands-on exercise on using motion paths in an
Animate composition.
Optimized publishing with CDN Hosting
Allow your content to be delivered faster with your runtime files on Adobe Content Deliver Network (CDN). To do so,
select the Host Runtime Files On Adobe CDN option in the Publish Settings. Your projects download faster with the
benefit of cache hosting with absolutely no cost to you.
If the content needs to run offline, deselect this option in Publish Settings. This option is enabled by default.
Publishing with CDN hosting
Templates
You can now load, save, and reuse templates from a template gallery. This feature allows you to load an Animate
composition for common file patterns. Templates can capture images, text, symbols, fonts, and any custom changes in
your current composition. You can load templates from the visual template loader.
Access the templates menu from the Welcome screen (“Create from Template”) or from the File menu. From the
templates gallery you can import, delete, and create a new composition from a template.
Create From Template option in File menu
Template files have .antmpl extension and can be freely distributed and can be stored anywhere on the file system.
Last updated 6/15/2014
66
Use motion paths
Swipe gestures
You can now bind elements with left and right swiping actions for mobile-focused experiences. You can assign the
swiping action to any element in your composition. You can assign swipe gestures to the stage itself, or apply to multiple
elements to create unique mobile experiences.
Right-click the element in the Timeline, click Open Actions For from the menu, and then click swipeleft or
swiperight.
Swipe gestures
Eyedropper tool
The new Eyedropper tool is introduced in the colour selection panels. Select the eyedropper icon to sample colours
from the stage.
Eyedropper tool
Color coding of elements
You can now assign colors to various elements in your composition to easily identify and work with them. You can click
the color palette in the Elements panel or Timeline to assign colors. These colors are reflected in the Timeline
transitions too.
Color coding of elements in Timeline
Color coding in the Elements panel
Elements panel and Timeline jumping
The elements panel and timeline will now scroll to show selected elements (if the panel is scrolling).
Publish your content
To publish your content:
1 Specify your publish settings. See below for more information.
2 Select File > Publish.
Optimize content for the web
1 Select File > Publish Settings.
2 In the Publish Settings dialog box, make sure that Web is selected as the publish target.
3 Note or change the target directory.
Last updated 6/15/2014
67
Use motion paths
4 Set the Frameworks Via CDN preference.
Select this option to download the composition's associated jQuery assets from a content delivery network (CDN).
Leave the option deselected to package the assets with the composition.
5 Set the Publish Content As Static HTML preference.
Select this option to generate HTML markup instead of injecting Edge Animate content into the document through
JavaScript. This option improves SEO-friendliness and accessibility on some platforms.
6 Click Save to save the publish settings, or click Publish.
Publish as Animate Deployment Package (.oam)
Select this export option to create a package file of your project for use in other Adobe tools. The following tools support
Animate Deployment Packages: Adobe Digital Publishing Suite (DPS), InDesign CS6, Dreamweaver CS6, and Muse.
1 Select File > Publish Settings.
2 In the Publish Settings dialog box, make sure Animate Deployment Package is selected as the publish target.
3 Note or change the target directory.
4 (Optional) Specify a poster image.
5 Click Save to save the publish settings, or click Publish.
Publish to Apple iBooks Author
1 Select File > Publish Settings.
2 In the Publish Settings dialog box, make sure iBooks/OS X is selected as the publish target.
3 Note or change the target directory.
4 (Optional) Specify a poster image.
5 Click Save to save the publish settings, or click Publish.
Learn more
• Enhance your DPS folios with HTML animations using Adobe Edge
What's new in Edge Animate 1.5
Important: Edge Animate 1.5 is no longer supported by Adobe and is not recommended for production use. This
version lacks major features, such as motion paths and audio support, introduced in newer releases, as well as
performance enhancements and bug fixes (including compatibility issues with modern browsers that can result in
unexpected output rendering).
Add gradients to objects
The gradient panel introduced in this release allows you to add gradients to Edge Animate elements. You can create
both linear and radial gradients using the options in the panel.
Gradients can be animated. However, you cannot animate between a radial gradient and a linear gradient.
Video tutorial
Last updated 6/15/2014
68
Use motion paths
Applying colors and gradients in Edge Animate
You can do the following in the gradients panel:
• Use color stops to create complex gradients.
• Create linear gradients or radial gradients.
• For linear gradients, specify the angle of the gradient.
• Save custom gradients as swatches.
• Specify a value for color in any of the three formats (RGBa, Hexadecimal, or HSLa). The "a" refers to the alpha value
or the opacity value. Irrespective of the format you use to define color, Animate ultimately converts the values to
RGB format.
• To apply CSS properties to the radial gradient such as Ellipse-farthest-corner, Circle-farthest-side, and so on, click
and hold the Radial Gradient button. Select the option that you want to apply.
Note: Gradients are not supported in Internet Explorer version 9. Any applied gradients are replaced with the background
color.
A Remove color B Angle for linear gradient C Linear gradient swatch D Radial gradient swatch E Color stop F Add gradient swatch G Repeat
pattern H Color format buttons I Lightness slider J Color slider K Opacity slider L Add color swatch M Color swatch N Selected color
O Original color P Radial gradient button Q Gradient button R Linear gradient button
For a video tutorial on using colors and gradients in Edge Animate, click here.
Updates to the color panel
In the color panel, you can now do the following:
• Use the Lightness bar slider to customize the intensity for a selected color.
• Use the Opacity bar slider to specify the opacity (transparency) for the selected color.
Last updated 6/15/2014
69
Use motion paths
• Save the custom colors as swatches for reuse.
• Specify a value for color in any of the three formats (RGBa, Hexadecimal, or HSLa). The a refers to the alpha value
or the opacity value. Irrespective of the format you use to define color, Animate ultimately converts the values to
RGB format.
A Option to enter color code B Color button C Option to remove color D Added color swatch E Option to add color swatch F Slider for opacity
G Slider for color lightness H Slider for color I Color code format options
Using CSS filters
Options in the Filters panel help you quickly apply CSS filters to symbols, text, Divs, and images. The only way you
could previously apply such effects was using an image editor.
CSS filters are currently supported on the latest versions of Chrome, Safari, iOS6, and Blackberry 10.
To apply a CSS filter, select an object on the stage, and use the options in the Filters panel to apply the desired effects.
For example, to apply filters to an inserted image, select the image, and apply filters as required.
To remove a filter from the element, click the corresponding "x" button.
For a video tutorial on using CSS filters in Edge Animate, click here.
Last updated 6/15/2014
70
Use motion paths
Leverage Edge web fonts for better typography
Edge Animate helps leverage the power of the @font-face CSS property by providing you with an array of web fonts for
your design. Edge web fonts allow you to bring the typographic experience of the print medium to the web.
Edge Web Fonts features hundreds of web fonts from the Adobe library as well as a large collection of open source fonts.
Edge Web fonts are free and require no account or kit configuration — making it faster and easier to get started.
Using Edge Web fonts in Edge Animate
When applying font to Text, click the "+" button next to the Font menu to view the Edge Web Font dialog. Select the
font that you want to use from the list and click Add Font.
You can filter the fonts in the panel by their type using the buttons to the left of the panel. For example, to view only
fonts of the sans serif type, click the Sans Serif button. For more information, see Use Web Fonts .
Video tutorial
Using Web fonts in Edge Animate
The selected and applied fonts are added to the Font library in Edge Animate. Double-click the font in the Font library
to specify fallback fonts. If the selected font, for some reason, cannot be applied, the fallback fonts are used based on
the order in which they are listed.
Last updated 6/15/2014
71
Use motion paths
Iframe friendly preloaders
Preloading is now optimized to work within Iframes for coordinated resource loading. Animate compositions
contained within Iframes wait for the document to load before playing the file.
Iframe preloaders allow you to preload the Iframe with an advertisement before the Animate file and the web page are
downloaded.
For more information on using preloaders, see Adobe Edge Animate JavaScript APIs.
Symbol editing mode preserved during Preview
Animate preserves your current editing state on each preview. The composition does not return to the stage when
previewing in a browser.
Easily identify locked and unlocked elements
Locked elements appear dimmed on the Timeline and the Elements panel allowing you to easily distinguish them from
unlocked elements.
In-app lessons
The Lessons panel in Adobe Edge Animate provides hands-on tutorials with sample assets that you can follow within
the tool.
Last updated 6/15/2014
72
Use motion paths
Lessons panel
You can access the Lessons panel from the Getting Started tab on the Welcome Screen, or from the Window menu
(Window > Lessons).
Lessons
Target older browsers
Adobe Edge Animate uses web-standards such as HTML5, CSS3, and JavaScript to define animation and interactivity.
Some functionality may not work or appear in older browsers that don't support these standards. You can still target
older browsers by creating poster images. You can also use the Google Chrome Frame extension for Internet Explorer
for Windows users.
Last updated 6/15/2014
73
Use motion paths
Support older browsers with poster images
Define a fallback state of your project in the form of a poster image or of your own artwork. When visitors view your
content in a legacy web browser, the poster image is displayed.
1 In the Timeline panel, position the Playhead at the end state of all animations.
2 In the Elements panel, select the Stage element.
3 In the Properties panel, click the Capture Stage As Poster Image button (camera icon).
4 In the Capture a Poster Image dialog box that appears, click Capture.
5 In the Properties panel, click the Edit button for the Down-level Stage property.
6 Click the Insert button. The image that you captured appears on the down-level stage.
To use your own artwork, drag the image from the Library panel to the down-level stage.
7 Return to the main stage by clicking the Stage breadcrumb at the top of the preview window.
Support older browsers with Google Chrome Frame
Google Chrome Frame is an extension that can be installed in older versions of Internet Explorer. It enables HTML5
technologies such as those used by Edge Animate.
1 Select File > Publish Settings.
2 In the Publish Settings dialog box, make sure that Web is selected as the publish target.
3 Select the Use Google Frame for IE 6, 7, and 8 option.
4 Accept the default Chrome Frame Installer "No Prompt" option.
5 Click Save to save the publish settings and return to the composition.
See also Enable open web technologies in Internet Explorer on the Google Developers website.
System requirements for Animate
System requirements for Animate
Last updated 6/15/2014
74
Use motion paths
Release Notes
Edge Animate CC 4.0 (June 2014) Release Notes
Edge Animate CC 3.0 (January 2014) Release Notes
Edge Animate 1.5 Release Notes
Learn Edge Animate video tutorials
Learn how to do the basics of Edge Animate CS6 with Getting Started and New Features tutorials by product experts.
Learn Edge Animate video tutorials
Create your first Edge Animate project
There are two ways in which we can create a new Edge Animate project. The first option is to simply click on Create
New on the welcome screen. This will immediately create a new Edge Animate project with a blank stage. The second
method of creating a new Edge Animate project is through the file menu. Simply clicking on File and then on New will
have the exactly same effect.
Alternatively, we can use the keyboard shortcut: Ctrl + N (for Windows) or Command + N (for Mac).
Whichever method you choose, you will now have a new project opened within Edge Animate. This project will look
quite scarce to begin with, as it basically consists of a single, blank Stage symbol. This Stage is representative of the single
HTML element we can locate within the HTML file Edge Animate produces upon saving it, as shown in the following
screenshot:
Last updated 6/15/2014
75
Use motion paths
Save
This option will either save the current document if it has been previously saved to the file system, or it will prompt the
user to provide a file name and location to save the document if this happens to be a new project.
The keyboard shortcut for this option is Ctrl + S (for Windows) or Command + S (for Mac).
Save As…
Similar to the Save option, this provides the same functionality but will always prompt the user for a file name and
location through a system dialog. This is useful when saving separate versions of the same project, or when you simply
want to save the project to a new location.
The keyboard shortcut for this option is Ctrl + Shift + S (for Windows) or Command + Shift + S (for Mac).
In the case of a new project, either option will provide us with a file system dialog. We see from the previous screenshot
that what we are saving is, in actuality, a .html file. This is an important thing to remember about Edge Animate
projects—when we are working in the Edge Animate authoring environment, we are really working in real time with
the content that is being produced.
Last updated 6/15/2014
76
Use motion paths
Layout and guidance tools
When working with any element on Stage, it is useful to have some tools which assist in the layout and positioning of
the elements in question. Edge Animate comes equipped with a number of tools which assist us in this task—Layout
Preferences tool, Rulers, and Guides.
Layout Preferences tool
The Layout Preferences tool allows us to make some decisions around the default properties of certain element types
when create or imported. The tool itself is located on the toolbar, to the right-hand side of the default color swatches.
It appears as a small ruler in the toolbar, indicating layout:
When this tool is activated, a small overlay appears which allows us to set a number of layout preferences for the current
project. Most of these preferences have to do with how elements are measured; using either pixels or percentage units:
These choices only affect anything new that is created in our composition or newly imported to it. Currently established
elements retain their settings.
The following table details the choices we have when determining layout preferences for an Edge Animate composition.
The units for horizontal, vertical, width, and height, though appear to have the same description, are distinct values and
it is clear when you adjust these parameters on Stage.
Preference
Description
Corner Alignment
It selects which corner to align to by default.
Horizontal Position Units
These toggle between pixels and percentage for new elements.
Vertical Position Units
These toggle between pixels and percentage for new elements.
Width Units
These toggle between pixels and percentage for new elements.
Height Units
These toggle between pixels and percentage for new elements.
Use 'img' tag for images
When importing images, use the img tag type.
'auto' for image width
When importing images, set width to auto.
'auto' for image height
When importing images, set height to auto.
Rulers
When enabled, Rulers are set along the top and left-hand side axis of project stage in a similar fashion to other Adobe
creative applications. They assist in visualizing the measurements between elements, the relation to Stage registration
point, element alignment, and more.
Last updated 6/15/2014
77
Use motion paths
Rulers also serve with the generation and positioning of manual Guides, which we will examine in the next section.
Note: To toggle rulers on and off, choose the Rulers option from the View menu in the application, or use the keyboard
shortcuts: Ctrl + R (for Windows) and Command + R (for Mac).
Guides
Guides are used alongside Rulers in order to more precisely plot out and position elements on Stage. They can also be
used to scope out areas in which we can draw elements using tools such as the Rectangle tool or the Rounded
Rectangle tool:
To create new Guide, be sure for Rulers been activated and are visible within the Stage panel. Click upon a ruler and
drag new Guide out along that specific axis. Once Guide is positioned exactly where we like, release the mouse to drop
Guide in place.
Last updated 6/15/2014
78
Use motion paths
Once Guide has been placed, it can remain a pixel-based Guide or transformed into a percentage-based Guide to assist
with responsive layout tools. To convert Guide from pixel units to percentages, hover over Guide and right-click. We
now have the option Convert Guide to Percentage. Guide will now appear in a more teal color than the normal violet
to distinguish it from pixel-based Guide. Resizing Stage will shift Guide as well—as it is now positioned based upon
percentage and not absolute pixel units.
To remove Guide, simply click upon it and drag it back into Ruler. Guides can be locked from the View area of the
application menu. Snapping can also be controlled from the View menu.
Smart Guides
When Smart Guides are enabled, dragging elements around Stage will cause temporary guides to appear which can
assist with placement of elements. These guides will appear in alignment of other elements, or in order to align with
aspects of Stage itself. For instance, in the following screenshot, Smart Guides appear when an element is dragged to
the center of Stage, informing us that we will be able to center the object if dropped upon this location.
Smart Guides can be disabled from the application menu under View | Smart Guides. Keyboard shortcut: Ctrl + U
(for Windows) and Command + U (for Mac).
Importing external assets
Apart from the creation of basic vector and text elements within an Edge Animate composition, we also have the ability
to import external assets for use in a project. These assets may have been prepared in another application such as Adobe
Photoshop, Illustrator, or Fireworks. Generally, we would want to use these imported assets more than the simple
shapes generated by Edge Animate, but this will depend upon the project. File types which can be imported into Edge
Animate include:
• SVG: Scalable Vector Graphics
• PNG: Portable Network Graphics
• JPEG: Joint Photographic Experts Group
Last updated 6/15/2014
79
Use motion paths
• GIF: Graphics Interchange Format
Importing bitmap images
Once an image file is imported into an Edge Animate project, it can be manipulated, animated, and scripted just as any
other element. To import a bitmap image file into Edge Animate, we perform the following actions:
1 Navigate to the Edge Animate application menu.
2 Select File | Import….
3 A system file browser dialog will appear. Navigate to the .png, .gif, or .jpg file you wish to import.
4 Select the file and click on Open.
5 The file will now be placed onto the Stage and also added to the project Library under Assets. From here, we can
add multiple instances of this asset to the Stage.
Note: Note that similar to SVG files, the bitmap file instance placed upon the Stage will be using the exact dimensions of
the imported file itself, so it may overlap the boundaries of the Stage. This can be remedied through element manipulation
by using the Properties panel.
Now that the bitmap image asset has been imported and an instance of this asset resides upon the Stage, we can use the
Selection and Transform tools to perform manipulations such as resize, scale, and skew just as we can with text or
rectangle elements. Unlike vector-based elements, however, visible artifacting, blockiness, and other distortions will
occur with bitmap objects.
It is also possible to simply drag-and-drop a .jpg, .png, or .gif file from our operating system file explorer onto the Stage.
This action will have the same effect as described above when working through the application's Import… command,
but we will be able to precisely place the imported image onto the Stage when employing drag-and-drop.
Last updated 6/15/2014
80
Use motion paths
Animation within Edge Animate
There are many applications which enable the user to compose animated sequences. Users of Adobe Edge Animate may
have experience in other programs such as Director, Flash Professional, After Effects, or even Photoshop. All of these
applications handle animation in slightly different ways, but they do all share some aspects of animation techniques and
tooling in common as well.
Like many digital animation programs, Edge Animate employs the concept of "tweening" between keyframes. In
traditional cell-based animation, a master animator would draw out certain key frames for an animation sequence, and
the frames in between these key frames would be created by apprentice or lower-ranked members of the animation
team. The goal was always to create a smooth transition between each key frame created by the master animator, which
would result in a completed animation sequence.
This process is performed programmatically within Edge Animate. As keyframes are placed along the Timeline, Edge
Animate will record changes in property values as transitions at the position of the Playhead (moment in time). As
authors, we have the additional ability to provide the tweening engine with instruction sets based upon a variety of
easing equations. This allows a more natural flow between keyframes, and can also be used to achieved certain effects
such as an elastic or bounce motion.
The Edge Animate Timeline
The Timeline is where all of the motion in an Edge Animate composition is orchestrated. The Timeline itself shares
concepts and constructs from other Adobe applications, most notably Flash Professional and After Effects.
Note: Unlike the frame-based timeline in Flash Professional, the Edge Animate Timeline is purely time-based.
Playback controls
The playback controls in Edge Animate are all grouped together in the upper-left corner or the Timeline panel. These
controls allow quick access to many of the playback options available through the Timeline.
Time
The time in Edge Animate is measured in standard decimal time code format (mm:ss.ddd), and this is how it is
displayed in the Time control. As the Playhead moves along the Timeline, the information in this display is updated
accordingly. A user can scrub the control to the left or right to adjust the current time, or simply click on it—making it
editable.
Last updated 6/15/2014
81
Use motion paths
Note that the time controls in Edge Animate are actually grouped along with the Stage and are accessible from directly
beneath that panel. The controls are also broken up to allow separate modification of the Playhead time (yellow), and
Pin time (blue), when enabled.
Timeline options
These options can be toggled on or off depending upon current needs as they perform a variety of Timeline-related
functions.
These options include the following:
• Auto-Keyframe Mode (K): Selecting this option will enable Edge Animate to generate keyframes for various
properties automatically as they are adjusted along the Timeline. When not selected, any keyframes must be inserted
manually.
• Auto-Transition Mode (X): When enabled, this informs Edge Animate to use immediate transitions between
element property adjustments as they are animated across time.
• Toggle Pin (P): Toggles the Pin on and off. We'll discuss the Pin in more detail shortly.
There are also a number of options present on the bottom of the Timeline:
• Only Show Animated Elements: When this option is selected, only those elements whose properties are animated
will display within the Timeline. Static elements (such as a background image, perhaps) will be hidden.
• Timeline Snapping: Toggles Timeline snapping on or off.
• Show Grid: Toggles Timeline grid on or off and allows us to set the grid spacing units.
More about the Show Grid control
We are also able to set the grid spacing by clicking on the small arrow to the immediate right of this icon in order to
access a small list of options. We can choose to display grid lines over a selection of measurements across the Timeline.
Last updated 6/15/2014
82
Use motion paths
Timeline controls
There are basically only four controls within the Timeline that we need to be concerned with: the Playhead, the Pin,
Zoom, and a set of Grid controls. The functionality between controls varies greatly here, as some are used for playback,
some for animation, and others are simply there for the enhancement of our overall workflow. All, however, are very
useful.
The Playhead
The Playhead is the larger of the two elements on the Timeline and is represented by a solid red line which indicates
the current time. We can click on the Playhead and scrub back and forth to change the current time. When an
animation is being played back through Edge Animate, the Playhead will move along with the current time.
Note: Normally, the Playhead and the Pin are both synced. If not, they can be resynced through the application menu:
Timeline | Toggle Pin.
The Pin
The Pin is a unique control to Edge Animate. It is a way of pinning the current state of element properties to a certain
time, while using the Playhead to determine at which time the animation should complete. The Pin can be positioned
either before or after the time indicated by the Playhead—but it always indicates a starting point for the animation, with
the Playhead indicating the end. Changing any element properties while the Pin is unsynced will create animation of
those properties beginning at the Pin and ending at the Playhead position. In this way, we can quickly and freely create
animation that is tightly controlled across the Timeline.
To quickly sync or unsync the Pin from the Playhead, we can double-click on the Playhead to toggle between each state.
We can also use the keyboard shortcut (P) to accomplish this same task—or even use the control in the Timeline which
performs this action.
When the Pin has been activated, the direction of animation is indicated through a colored strip of chevrons on the
Timeline. The color will be yellow or blue, depending upon the direction of motion; blue indicates motion to the left of
the Pin, while yellow indicates motion to the right of the Pin.
Zoom controls
There are two zoom controls in Edge Animate which allow us to expand and contract the Timeline. One is the Zoom
Timeline to Fit button that appears as dual arrows in the lower-right corner of the Timeline. This will expand or contract
the entire span of the visible Timeline to the current width of the Timeline panel. It can provide a good overview of the
entire animation.
The second control is a slider which appears directly to the right and allows the user to manually control the zoom level
of the Timeline to accommodate whatever we are specifically trying to accomplish at any particular time.
Last updated 6/15/2014
83
Use motion paths
Keyframes
Similar to their representation in After Effects, keyframes in Edge Animate appear along the Timeline as small
diamonds. Unlike keyframes in Flash Professional, Edge Animate keyframes are tied directly to the property that is
being changed and not to the element itself. This allows for fine-grained property adjustments across the Timeline for
any particular element. It is very flexible and a powerful way to animate selected element properties!
Keyframe navigation
There are a number of keyboard shortcuts in Edge Animate that assist with Timeline navigation—specifically when
jumping across keyframes.
Command
Shortcut
Go to Previous Keyframe
Ctrl + Left Arrow (Windows), Command + Left Arrow (Mac)
Go to Next Keyframe
Ctrl + Right Arrow (Windows), Command + Right Arrow (Mac)
Creating motion
Animating element properties within Edge Animate is fairly straightforward. In this section, we're going to step
through a number of basic ways to animate elements along the Edge Animate Timeline. Once using only the Playhead,
and again using the Playhead in conjunction with the Pin. By performing the same animation in each way, we will get
a feel for the different workflow styles Edge Animate makes available to us when animating element properties across
time.
Note: Note that most elements will not appear within the Timeline until their properties are actually modified across time.
The reasoning for this is if nothing is actually animated, there is no reason to clutter the Timeline.
Inserting keyframes
There are a number of mechanisms through which we can insert keyframes into our composition; using the Properties
panel, the application menu, the Timeline Keyframe buttons, or through the right-click menu. Before we move on, let's
have a quick look at each of these methods.
Adding keyframes through the Properties panel
With any element selected, we can position the Playhead upon the Timeline and look to the Properties panel to insert
our keyframes. Notice how most of the property values have a small diamond next to them? By clicking on this
keyframe control, we will manually insert a keyframe for that property into the current Playhead position for the
selected element.
Last updated 6/15/2014
84
Use motion paths
Adding keyframes through the application menu
With any element selected, we can position the Playhead upon the Timeline and look to the application menu to insert
our keyframes. Simply navigate to the menu and choose Timeline | Add Keyframe and then select the type of keyframe
to add, based upon the property we wish to set a keyframe for.
Not all properties have keyboard shortcuts assigned to them by default, though we can easily assign them for commonly
used properties, if we wish. This is accomplished through the application menu: Edit | Keyboard Shortcuts….
Using the Timeline keyframe buttons
With any element selected, we can position the Playhead upon the Timeline and look to the left area of the Timeline
panel to insert our keyframes. Any property which currently has a keyframe assigned to it will appear grouped beneath
an element in the Timeline. These existing properties will include a small icon positioned to the right of the property
name through which we can add new keyframes for that specific property.
To add new keyframes to properties which do not appear beneath an element, we can simply right-click on the element
name and choose Add Keyframe to insert them.
Last updated 6/15/2014
85
Use motion paths
Using right-click for Keyframe insertion
With any element selected, we can position the Playhead upon the Timeline and look to the Stage itself to insert our
keyframes. Simply right-click on any element which exists on the Stage at that place in the Timeline, and choose Add
Keyframe to insert any of the available properties for that element.
Animating with the Playhead
We will now do a simple animation of an element moving from one side of the Stage to the other, while rotating and
changing color using the Playhead along with the Properties panel.
1 Create a new Edge Animate project and save it to your local disk.
2 Adjust the Stage as follows by using the Properties panel:
• Stage W: 600 px
• Stage H: 350 px
Last updated 6/15/2014
86
Use motion paths
• Background Color: #000000
• Overflow: hidden
3 Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do
not worry about dimensions or shape.
4 For each property listed, make the following adjustments within the Properties panel:
• Location X: 20 px
• Location Y: 230 px
• Size W: 100 px
• Size H: 100 px
• Background Color: #c0c0c0
5 Still using the Properties panel, click on the keyframe diamond next to the properties for Location, Background
Color, and Rotation. This will set a keyframe for each property within the Timeline.
6 Be sure that Auto-Keyframe properties is in its selected state in the Timeline. Since we have already marked each of
these properties with initial keyframes, any adjustments we make across time will be auto-keyframed.
7 Our project should now appear as shown in the following screenshot. We are ready to proceed with the remainder
of this exercise.
8 Drag the Playhead over to the ruler marker labeled 0:04 and release.
9 Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
• Location X: 480 px
• Background Color: #900000
• Rotation: 480 deg
Last updated 6/15/2014
87
Use motion paths
10 Notice that we now have transition bars appear on the Timeline with another set of keyframes at the end of our
animation sequence.
11 We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to
view the full sequence. When played back, the element should appear to roll along the Stage from left to right,
changing from gray to red as it does so. The resulting end state is displayed in the following screenshot:
Note: Note that any of the properties of an element can be keyframed, thus modified over time in the way we have done
here.
Animating with the Pin
Now we will perform the preceding exercise, but this time we will employ the Pin to demonstrate an alternate way of
creating motion in Edge Animate.
1 Create a new Edge Animate project and save it to your local disk.
2 Adjust the Stage as follows by using the Properties panel:
• Stage W: 600 px
• Stage H: 350 px
• Background Color: #000000
• Overflow: hidden
3 Using the Rectangle tool, draw out an element upon the Stage. We will modify its properties in the next step, so do
not worry about dimensions or shape.
4 For each property listed, make the following adjustments within the Properties panel:
• Location X: 20 px
Last updated 6/15/2014
88
Use motion paths
• Location Y: 230 px
• Size W: 100 px
• Size H: 100 px
• Background Color: #c0c0c0
5 Drag the Playhead to 0:04 in the Timeline.
6 Now, go to the application menu and select Timeline | Toggle Pin. This will unsync the Pin from the Playhead.
Again, the Pin is the small control directly beneath the Playhead when unsynced.
7 Grab the Pin and drag it to 0:00 in the Timeline. This will pin the elements current properties to the 0:00 point
without the need to manually insert keyframes. Keep the Playhead itself at 0:04.
8 Now, select the element with the Selection tool and in the Properties panel, modify the following properties:
• Location X: 480 px
• Background Color: #900000
• Rotation: 480 deg
Notice that we now have transition bars appear on the Timeline without the need to set any keyframes whatsoever.
9 Go to the application menu and select Timeline | Toggle Pin to sync the Pin. We can also toggle the Pin through a
keyboard shortcut as expressed earlier in this chapter.
10 We can now either scrub through the Timeline by dragging the Playhead back and forth, or hit the Play button to
view the full sequence. When played back, the element should appear to roll along the Stage from left to right,
changing from gray to red as it does so.
Note: Note that, while in this case the Pin was placed at an earlier time in relation to the Playhead within our Timeline—
that need not be the case. We can also place the Pin at a later time than the Playhead and the same behavior will be
exhibited: current properties are pinned to the Pin position while adjusted properties align to the position of the
Playhead.
Editing transitions
Once a transition has been established, it can be adjusted through mouse interaction via the Timeline. In order to adjust
the transition delay, duration, and end we simply click-and-drag the visual transition indicators within the Timeline
itself.
Last updated 6/15/2014
89
Use motion paths
Note: Note that transitions can be adjusted on a per-object or per-property basis, allowing for a great amount of freedom
when defining motion behavior.
Transition delay
This determines when the transition should begin, measured from the start of the overall Timeline. Modification of this
value is accomplished by either moving the entire transition, or by dragging the right-most edge.
Transition duration
This represents the time taken up by the entire transition. Transitions can be extended or shortened easily by dragging
the right-most edge.
Transition end
This is the time with which the transition completes within the Timeline.
Modifying element properties based on transition
To select a transition to edit element properties within the Properties panel; use the mouse to select a Transition block
within the Timeline. The cursor should change to a little grabby hand and clicking on the transition will cause it, along
with any of its keyframes, to highlight.
We now know that the element is selected and can see that the Properties panel adjusts to reflect the properties of that
element at the position of the Playhead. To adjust any properties across time, simply move the Playhead to see the
Properties panel adjust to these changes.
Note: Note that when changing the easing behavior of a transition, we can select the entire element transition block or we
may choose individual property transitions to apply a variety of transition types to the same element. It is quite flexible.
Last updated 6/15/2014
90
Use motion paths
Transition easing controls
You may have noticed that the motion achieved through the examples presented so far have been plain, linear
transitions from one value to another. To provide a greater sense of realism and a fuller, dynamic nature to individual
transitions, we also have the ability to assign a variety of easing equations to our transitions.
There are many easing choices within Adobe Edge Animate. The default is Linear, which will simply express a transition
from A to B in an entirely linear fashion. Often, an easing algorithm of a more dynamic nature is required to express a
bit more realism in motion, or to achieve a specific effect. Edge Animate comes bundled with no less than 32 easing
choices to provide the user with a variety of options when determining transition easing.
Note: The transition easing algorithms available in Edge Animate are similar to others found in many ActionScript
libraries for animating Flash Professional content. Unlike in Flash Professional, Edge Animate does not yet have the ability
to customize these presets.
Transition easing types
While Edge Animate does supply us with a large number of easing types, exactly what they do may not be obvious to
many users at first glance. It is very simple to set up an Edge Animate project that allows us to adjust and visualize each
of these easing types when applied to a simple transition.
Note: Almost all easing types have three variants of themselves, ease in, ease out, and both ease in and ease out together.
Shifting transitions
Edge Animate makes it very easy to shift transitions back and forth across the Timeline. Simply use the mouse cursor
to grab a transition (click and hold) and then move the mouse back and forth along the Timeline until the transition
appears at the desired location. Release the mouse to complete the shift.
Changing transition duration
To adjust the duration of any transition, simply hover the mouse cursor over the beginning or end of any transition
block until the cursor changes to indicate that adjustments are possible. Then, click-and-drag along the Timeline to
adjust the length of a particular transition. We can also select multiple Transitions in this same way through use of the
Shift key while we make additional selections along the Timeline.
Last updated 6/15/2014
91
Use motion paths
The cursor will adjust to look like two lines with arrows pointing to the left or right when hovering over a transition we
can expand in this manner.
Selecting transition keyframes
To select individual keyframes, simply click on the desired keyframe and perform whatever modification is desired.
Some possible options include hitting the Delete key on the keyboard to remove the selected keyframes, or modifying
the transition through the right-click menu.
The cursor will adjust to look like a small pointing hand if we are able to select a keyframe. Of course, any locked
element keyframes cannot be interacted with in any manner.
Selecting multiple transitions
Holding the Shift key down while keyframes are selected will enable the selection of multiple keyframes. Alternatively,
a selection rectangle can be drawn across multiple keyframes, but this is imprecise, as full transitions will more than
likely be selected as well.
Copy and paste keyframes
While keyframes are selected, we can easily copy and paste these keyframes from one spot in the Timeline to another
by moving the Playhead to another position before we paste. This is a good mechanism for copying the exact properties
we want and replicating them across the Timeline.
Generating transitions through keyframes
With multiple keyframes selected, we can choose to right-click on them in order to remove or create transitions
between them. This is useful when we have used auto-transition mode but then decide to retain keyframes but remove
the smooth transition between them, or perform the reverse intention.
Last updated 6/15/2014
92
Use motion paths
Animating a website header
One of the basic use cases for Adobe Edge Animate is the creation of a simply animated website header. We will be
authoring such a composition for a studio recording project of the name An Early Morning Letter, Displaced, who wish
to have images of each of their releases animate in on the header itself. Thankfully, they have provided us with all of the
assets necessary for the construction of this animated header.
Note: These assets are included as part of the files for this chapter and are in the folder named banner_assets.
Project setup, asset import, and general layout
The first step in this composition will be to set up our Edge Animate project, import all of the assets, and arrange them
upon the Stage. We will begin by arranging the assets in their final form, as they should appear at the end of the
animation once it has completed playback. The Pin makes it quite easy to animate "backwards".
1 Create a new Edge Animate project and save it onto the local disk.
2 Adjust the Stage as follows by using the Properties panel:
•
Stage W: 940 px
• Stage H: 198 px
• Background Color:#000000
• Overflow: hidden
3 Go to the application menu and select File | Import… to bring up a file browser.
4 Select all of the .png files located within the provided assets folder and click on Open. The selected files will be
placed upon the Stage and also added to the project Library.
5 The background image is the exact size of the Stage itself and should fill this entire area.
6 The album art can be arranged evenly across the bottom of the Stage as seen in the following screenshot. We can use
the mouse or the Properties panel to arrange these images. Space them evenly apart from one another.
7 Finally, we need to add a title to this header animation. We'll use the Text tool to form the project's name along the
top of the header. Choose Text tool (T) now.
8 Add a new text element to the Stage and type the term An Early Morning Letter, Displaced into the field.
9 With this text element selected, enter the Properties panel and make the following adjustments:
• ID: Title
Last updated 6/15/2014
93
Use motion paths
• Location X: 16 px
• Location Y: 11 px
• Font Name: Arial Black, Gadget, sans-serif
• Font Size: 40 px
• Font Color: #bbbbbb
10 We should now have a composition that appears as shown in the following screenshot:
Performing the animation of elements
We will now perform the animation of all elements on the Stage through use of the Playhead, Mark, and Properties
panel.
Animating the background
We will create a transition lasting 00:07.000, which will fade in the background element while slightly adjusting its
scale.
1 Using the Selection tool, click on the bg element to bring up its properties.
2 In the Timeline, move the Pin to 00:07.000 and the Playhead to 00:00.000.
3 Using the Properties panel, make the following adjustments:
• Scale (linked): 115 %
• Opacity: 25 %
4 In the Timeline, click on the transition that we have just created to select it.
5 In the Timeline, change the Easing selection to Ease Out | Sine to determine how the transition should occur upon
playback. Leave the scale transitions as Linear.
Animating the cover art (do this for each cover art image)
For each image, we will create a transition lasting 00:02.000, which with slide the image in from off-screen, resulting in
a playful bounce before coming to a rest. We will stagger the transitions of each subsequent image to begin at the
midpoint of the previous transition, creating a flurry of motion within the composition.
1 Using the Selection tool, click on the fvm001 element to bring up its properties.
2 In the Timeline, move the Pin to 00:02.090 and the Playhead to 00:00.000.
Last updated 6/15/2014
94
Use motion paths
3 Using the Properties panel, make the following adjustment:
• Location X: 986 px
4 In the Timeline, click on the opacity transition that we have just created to select it.
5 In the Timeline, change the Easing selection to Ease Out | Bounce to determine how the transition should occur
upon playback.
6 Repeat the previous steps for each of the other album art images.
Note: Edge Animate also includes the option to paste various elements of a transition from one object to another. For
repeatable transitions such as this one, we may want to have a look at the Paste Special commands under the application
Edit menu.
Animating the title text
We will create a transition lasting 00:05.500, which will fade in the title text element.
1 Using the Selection tool, click on the Title element to bring up its properties.
2 In the Timeline, move the Pin to 00:06.000 and the Playhead to 00:05.000.
3 Using the Properties panel, make the following adjustment:
• Opacity: 0 %
4 In the Timeline, click on the transition that we have just created to select it.
5 In the Timeline, change the Easing selection to Ease In | Cubic to determine how the transition should occur upon
playback.
Finishing up!
Once all of the elements are added to the Stage, positioned correctly, and animated properly through transitions, the
Edge Animate Timeline will look similar to what we see in the following screenshot:
Note: Edge Animate makes it easy to see exactly what is going on in a composition through even fine-grained transition
indicators, which correspond to individual element properties.
The result of our animated banner appears in a web browser, as shown in the following screenshot. To publish an Edge
Animate composition to the browser, we can choose File | Preview in Browser from the application menu.
Last updated 6/15/2014
95
Use motion paths
Summary
In this chapter, we've examined how to create motion in Adobe Edge Animate by making use of the Timeline, Playhead,
Pin, and Properties panel. Those who are familiar with Flash Professional or After Effects should recognize just how
familiar many of these concepts are, and possibly how refined and evolved these concepts have become as implemented
in the Edge Animate application interface. It is quite easy to both create and edit animation within an Edge Animate
composition!
Adding basic interactivity
Lesson overview
In this lesson, you’ll learn how to do the following:
• Understand interactivity
• Work with the syntax of JavaScript
• Recognize the relationship between JavaScript, jQuery, and the Edge Animate API
• Differentiate triggers, events, and actions
• Add triggers to the Timeline
• Insert labels
• Create actions to respond to events
• Control the behavior of the Timeline playhead
• View and edit script with the Code panel
• Use comments to annotate code
• Hide and show elements to incorporate visual feedback for buttons
• Control animated elements
• Customize the mouse cursor
This lesson will take approximately two hours to complete. Before you begin, download the Lesson05 content.
Last updated 6/15/2014
96
Use motion paths
Let your viewers explore your composition and become active participants. Use Adobe Edge Animate’s built-in code snippets and intuitive panels
to add actions to create engaging, user-driven, interactive experiences.
Getting started
To begin, view the travel guide that you’ll create as you learn to make interactive projects in Adobe Edge Animate.
1 Double-click the 05End.html file in the Lesson05/05End folder to play the composition in a browser.
Last updated 6/15/2014
97
Use motion paths
The project is an interactive photo gallery showing images from Burma. Viewers can watch the short slideshow
automatically play and loop back to the beginning. Or, viewers can click any thumbnail image on the left side of the
Stage to go directly to a particular image. Move your mouse over the triangular button at the top to see a caption
unravel.
In this lesson, you’ll create interactive buttons with rollover highlights and learn to incorporate the proper code that
tells Edge Animate where to move the playhead on the Timeline to display the particular animation or image there.
2
Close the 05End.html file and quit your browser.
3 Double-click the 05Start Edge Animate file in the Lesson05/05Start folder to open the initial project file in Edge
Animate.
Last updated 6/15/2014
98
Use motion paths
The file includes all the assets already placed on the Stage and the transitions between each image on the Timeline.
The Stage has already been sized properly. In this lesson, you'll make this linear animation interactive.
4 Choose File > Save As. Name the file 05_workingcopy and save it in the 05Start folder. Saving a working copy
ensures that the original start file will be available if you want to start over.
About interactive compositions
Interactive compositions change based on the viewer’s actions. For example, when the viewer clicks a button, a different
graphic with more information could appear. Interactivity can be simple, such as the click of a button, or it can be more
complex, involving different kinds of interactions with the same element—for example, moving your mouse cursor
over a button, clicking the button, and moving your mouse cursor off the button are three unique events that could each
result in different visual changes on the Stage.
In Edge Animate, you use JavaScript to achieve interactivity. JavaScript is a popular and standard script for Web
browsers. JavaScript runs on browsers for desktops as well as on devices such as tablets and mobile phones.
If you have no idea what JavaScript is, or how to write code—don't panic! Adobe Edge Animate provides an easy
interface to add JavaScript to your compositions and integrate common interactive functions. When you get more
comfortable with the syntax of the script, you can begin to delve deeper and customize the interactivity.
Last updated 6/15/2014
99
Use motion paths
In this lesson, you’ll learn to create nonlinear navigation, meaning the animation doesn’t have to play straight from the
beginning to the end, and stop there. You'll add code that gets triggered when the playhead reaches a certain point in
time.
You’ll also add code that moves the playhead to different parts of the Timeline to display particular elements. You’ll also
learn to make elements on the Stage respond to different interactions with the mouse cursor.
Understanding JavaScript
JavaScript is the scripting language that adds additional functionality to a web page. Many of the common interface
elements on websites, such as pull-down menus, checkboxes, or search boxes, are created with JavaScript. Edge
Animate also uses JavaScript to power its interactivity, as well as the animations and other effects.
Where the JavaScript lives
Even without adding any interactivity to your composition, your project depends on JavaScript. The JavaScript code is
contained in several separate text documents that have the file extension “.js”. Look at the files associated with your Edge
Animate composition, 05_workingcopy. There are four JavaScript files within the folder called edge_includes:
• edge.0.1.6.min.js
• jquery-1.7.1.min.js
• jquery.easing.1.3.js
• json2_min.js
These files contain the basic code required for any Edge Animate composition. There are also additional JavaScript files,
which are unique to your project. Those files are located outside the edge_includes folder, and are automatically named
with your Edge Animate filename. Your files are named as follows:
• 05_workingcopy_edge.js
• 05_workingcopy_edgeActions.js
• 05_workingcopy_edgePreload.js
When your Web browser first launches your Edge Animate project, it loads the JavaScript code so all the functionality
is available when your project plays. All the code is organized as functions, which group commands together. Since each
function has a unique name, you can trigger the commands simply by referencing the name of the function.
Programmers say that a function is “called,” or that the browser “calls” a function.
jQuery and the Edge Animate API
While JavaScript is useful, it’s meant to control all the details of a web page, which is powerful but often clumsy and
complicated. That’s where jQuery and the Edge Animate API come in handy. jQuery is an open-source JavaScript
library that provides an easy way to select, control, and animate elements in a browser. jQuery is not another language,
but simply a set of well-written JavaScript functions. If you look again at the JavaScript files in the edge_includes folder,
you'll see that two of those files are, in fact, files for jQuery.
Along with jQuery, Edge Animate provides additional functions it has built for you. The library of JavaScript functions
that Edge Animate has built for your use constitute the Edge Animate API (Application Programming Interface).
Last updated 6/15/2014
100
Use motion paths
You can think of JavaScript, jQuery, and the Edge Animate API as different layers of control. The Edge Animate API is
the top, most superficial layer of control, jQuery is the middle, and the core JavaScript is the deepest layer. A useful
analogy is the control of an automobile. The Edge Animate API would represent the controls you see in the driver’s
seat—the steering wheel, the parking brake, or the gas pedal. They allow you to drive the car without you needing to
know much about its inner workings. They’re created from a combination of levers, dials, and shafts to make
controlling your vehicle simple and easy. Those levers, dials, and shafts represent the jQuery level of control. At the
most granular level, you have JavaScript, represented by the individual nuts and bolts and gears.
Just as it is so much easier to drive a car using the steering wheel and gas pedal, so it is to control your Edge Animate
composition with the Edge Animate API. But in both cases, there’s no reason why you couldn’t tinker with the deeperlevel controls for a more customized experience. You can start coding in jQuery and JavaScript to make your own
interactivity. You just need to be sure you’re a competent mechanic, or know your way around JavaScript!
In this lesson, you’ll first learn to add interactivity with the Edge Animate API. Later, as you gain more confidence and
comfort, you’ll delve a little deeper and insert some jQuery for more sophisticated effects.
Triggers, events, and actions
Edge Animate uses actions, triggers, and events to incorporate JavaScript in your composition.
Actions are the things that Edge Animate can do, which, given the full JavaScript language at its disposal, is quite a lot.
Actions can range from loading a hyperlink, to changing a particular visual property of an element on the Stage, to
storing a piece of information in a variable for later retrieval.
Triggers are actions that are placed along the Timeline. When the playhead reaches the trigger, the actions are executed.
Use triggers when you want code to be synchronized by your animation, and not by user control.
Events are things that happen in a composition that Edge Animate can respond to with an action. Typically, events are
user-generated, such as the click of a mouse button, the pressing down of a key, or the tilting of a mobile device.
However, events can also happen automatically. For example, the point when the composition is ready (when all the
assets and code libraries have been downloaded) is an event. Events are always paired with actions. When an event
happens, an action—or set of actions—is executed.
Timeline triggers
Triggers are the simplest way to add code to your Edge Animate composition. Triggers are executed automatically when
the playhead reaches them on the Timeline. You can have multiple triggers along the Timeline. The minimum time
interval between triggers is 1/1000th of a second, but practically, you’d never need or want actions to be executed so
close together.
Creating a loop
For this slideshow of Burma, you’ll insert a trigger at the end of the Timeline to make the playhead automatically return
to the beginning, creating a loop.
1 Click the Zoom Timeline to Fit button at the bottom of the Timeline.
The entire slideshow animation appears in the available space in the Timeline panel.
2 Move the playhead to the very end of the slideshow, at 0:10 seconds.
Last updated 6/15/2014
101
Use motion paths
3 In the Timeline panel, click the Insert Trigger button on the top Actions row. You can also choose Timeline > Insert
Trigger or press Ctrl+T (Windows) or Command+T (Mac OS).
An icon that appears as a diamond enclosed by curly braces appears on the Timeline at 0:10 seconds. The icon
represents a trigger.
A panel appears with a large white text-entry field and a column of code snippet options on the right side. The panel
is titled Trigger@10000ms, referring to the trigger's position at 10,000 milliseconds, or 10 seconds.
4 Select the content of the current script.
The current script, //insert code here, is known as a comment. Comments always begin with two backslash
characters, and are descriptions of the code. Comments are non-functional, and don't significantly add to the file
size of your composition.
5 From the menu of code snippets on the right-hand side of the panel, select the Play from option.
Last updated 6/15/2014
102
Use motion paths
New code appears in the panel, replacing the existing comment. The new code comes with its own comments that
describe its function. The code, sym.play(1000);, moves the playhead to a particular point in time on the Timeline
and begins playing.
6 Replace the 1000 within the parentheses in the code with 0.
The number in between the parentheses of the play() command represents the time to which the playhead will
move. Since you want the playhead to move to the beginning of the Timeline at 0:00 seconds, enter 0 in the
parentheses of the play() command.
7 Close the panel and preview your project in a browser by pressing Ctrl+Enter (Windows) or Command+Return
(Mac OS).
The slideshow plays through and repeats when it reaches the end at 10 seconds.
Note: The number in between the parentheses of the play() command is called the argument. It gives the command
additional information to make it more specific. In this case, it tells the command at what millisecond point in time to
start playing. Commands can have multiple arguments, which are separated by commas. As you learn more commands,
you also learn what arguments they require.
Editing triggers
Editing the script for your triggers is simple and easy. The panel that appeared when you added the trigger is always
available for modifications, additions, or deletions.
• To edit a trigger, double-click the trigger icon on the Timeline.
• The script panel opens to display the trigger, and you can modify the argument, delete the code, or add new code
from the snippet options on the right side of the panel.
• To move a trigger, click and drag the trigger icon on the Timeline to a new position.
• The trigger moves to a different position, so the actions are executed when the playhead reaches a new time.
• To delete a trigger, select the trigger on the Timeline and press the Delete key.
The trigger is removed from the Timeline.
Last updated 6/15/2014
103
Use motion paths
Script panel viewing options: The script panel that opens when you add a trigger has several options to help you make
viewing the code easier. The top-right options menu has three choices that control what’s displayed.
• Show Line Numbers displays sequential numbers next to each line of code so you and other developers that share
the script can pinpoint code.
• Font Size controls the display size (Small, Medium, or Large) of the text in the script. The default option is Small.
• Include Snippet Comments automatically adds comments to the code that you add from the snippet options on
the right side of the panel.
In addition to these display options, you can click the vertical border that divides the white script area with the menu of
code snippets to collapse the menu to make more room for your code. Click the divider again to expand the menu.
Minding your syntax
Let’s examine the code that you added in the trigger more closely to learn about JavaScript syntax, or the way words and
punctuation work together. Syntax is the grammar of a programming language.
If you’re unfamiliar with program code or scripting, the JavaScript code that Edge Animate inserts may be challenging
to decipher. However, once you understand the basic syntax, you’ll find it easier to follow a script.
The code that is in your trigger at 10000 milliseconds appears as follows:
sym.play(0);
• The first word in the statement is sym. When the statement is on the main Timeline, the word sym represents the
whole Edge Animate composition. Edge Animate is organized around the concept of “symbols,” and the root, or
base-level symbol is the Edge Animate Stage. This root symbol contains all the elements and animations in your
Edge Animate composition—everything on the Stage or Timeline. In JavaScript, when we want to do something,
you first identify the object that you want to control. In this case, since you want to affect the Timeline of your Edge
Animate composition, the first thing that is written in the script is sym.
• The dot operator (.) provides a way to access different commands for the object that you’ve identified (in this case,
sym). Objects can be animations, text, or abstract concepts such as the date or particular data. Objects have
properties, which describe them, and methods, which are the things that they can do. In your trigger, the method
for the sym object is play(). The dot, or period separates the object and its method.
• As in English, every open parenthesis must have a corresponding close parenthesis, and the same is true for
JavaScript. If you open something, you must close it. All methods have parentheses. Your method, play(), has an
open and close parenthesis.
• Each method can have different arguments in between the parentheses, which provide additional information. The
play() method requires a single argument, which tells Edge Animate at what point in time (in milliseconds) to begin
playing. Methods can have multiple arguments, which are separated by commas.
• Some arguments require a number, some may need a name, and others may need the words true or false. Whenever
you’re entering the name of a file or a URL, use single or double quotation marks. Quotation marks distinguish a
String value, which represent a sequence of characters, with other kinds of values.
Last updated 6/15/2014
104
Use motion paths
• You can add comments to remind you or others of what you are accomplishing with different parts of the script. To
add a comment for a single line, start it with two slashes (//). To type a multiline comment, start it with /* and end
it with */. Comments are ignored by JavaScript and won’t affect your code at all.
• Thesemicolon at the end of the line tells JavaScript that it has reached the end of a complete statement and the end
of a line of code. A semicolon is like a period in a sentence.
That’s a lot of information packed into a single line of code! But getting comfortable with the syntax is your first step in
getting out from behind the steering wheel and looking under the hood of your car.
Events and actions
So far, you’ve seen how Edge Animate uses triggers to automatically execute JavaScript when the playhead reaches a
certain point on the Timeline. You added a trigger at the end of the animation to create a loop. The other two ways with
which Edge Animate adds JavaScript is with events and actions.
Events are occurrences that happen in Edge Animate that it can detect and respond to. When an event is detected, you
provide actions as a response.
It’s useful to think of interactions in terms of events and actions. When you click on a menu button (event), more
options may expand (actions). When you roll over a button (event), a triangular play icon may appear on it (actions).
In the next section, you’ll add thumbnail images to the Stage. When the user clicks on each thumbnail (event), the
playhead will move to a new position on the Timeline (actions) to show a particular image from the travel slideshow.
Creating the buttons
A button is a basic visual indicator of what the user can interact with. The user usually clicks a button, but many other
types of interactions are possible. For example, rollovers, double-clicks, and rollouts are all possible. Edge Animate also
provides events unique to mobile devices, such as touches.
You’ll start with the simplest, and most common event, which is the single-click.
Adding the thumbnails
Small, cropped versions of the larger Burma images are provided for you in the images folder.
1 In the Library panel, expand the images folder within the Assets folder.
2 Drag the file called button1_gray.jpg from the Library panel to the Stage.
A grayscale thumbnail of fisherman appears on the Stage, Timeline, and Elements panel.
3 Position the thumbnail so that its top-left corner is at the top-left corner of the Stage. The coordinates should be at
X=0, Y=0.
Last updated 6/15/2014
105
Use motion paths
4 Drag the file called button2_gray.jpg from the Library panel to the Stage, and position it just below the first
thumbnail. You can use the smart guides to help automatically snap the images in place. The coordinates should be
at X=0, Y=80.
Two grayscale thumbnails are at the left side of the Stage, one above the other
5 Drag the remaining three grayscale thumbnails from the Library panel onto the Stage, positioning each successive
one below the previous one.
There should be a total of five thumbnail images vertically stacked on the left side of the Stage.
Last updated 6/15/2014
106
Use motion paths
Adding the events
Each element on the Stage can have its own events and actions. Insert code for individual elements from the far left
column of the Timeline or Elements panel. The Open Actions button is indicated by a set of curly brackets.
1 In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.
The script panel for button1_gray opens.
A menu of options automatically opens, displaying the events that are possible for the button1_gray element.
Last updated 6/15/2014
107
Use motion paths
2 Select the first option: click.
Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.
Note: As you add more events to the same element, additional tabs appear at the top of the script panel.
Note: To delete an event (and any code associated with it), select the particular tab for the event and click the Minus
button at the top-left corner of the script panel.
Adding the actions
Each event must have an accompanying action, or a response, to the event.
1 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at
option.
Last updated 6/15/2014
108
Use motion paths
Edge Animate adds the code to stop the playhead at a particular position on the Timeline.
2 In between the parentheses of the stop() method, replace the 1000 number with 0.
The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop.
Since this first grayscale thumbnail is of the fishermen, you want the playhead to stop at 0:00 seconds, the point at
which we see the full image of the fishermen on the Stage.
Note: You can actually use any number between 0 and 1500 for the stop() method for button1_gray, since the image of
the fisherman remains on the Timeline until 1.5 seconds, but it’s simpler and easier to be consistent to pick the time when
the image first appears.
3 Close the script panel.
The Open Actions icon for the button1_gray element becomes filled in, indicating that there is currently script
attached to that element.
Last updated 6/15/2014
109
Use motion paths
4 Preview your Edge Animate composition in a browser by selecting File > Preview in browser, or pressing Ctrl+Enter
(Windows)/Command+Return (Mac OS).
5 At any point during the slideshow, click the first grayscale thumbnail.
The slideshow stops and shows the image of the fishermen.
Completing the interactivity
Now that you’ve completed the interactivity for the first button, add the same functionality to the remainder.
1 In the Timeline or the Elements panel, click the Open Actions button for the second thumbnail element,
button2_gray.
The script panel for button2_gray opens.
2 Click on the Plus button on the upper-left corner.
A menu of options opens, displaying the events that are possible for the button2_gray element.
3 Select the first option: click.
Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.
4 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at
option.
Edge Animate adds the JavaScript code to stop the playhead at a particular position on the Timeline.
5 In between the parentheses of the stop() method, replace the 1000 number with 2000.
The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop.
Since the second grayscale thumbnail is of the statues, you want the playhead to stop at 0:02 seconds, the point at
which we see the full image of the statues on the Stage.
Last updated 6/15/2014
110
Use motion paths
6 Add similar click events to all the other grayscale thumbnail images, with the Stop at option. Be sure to change the
arguments for each stop() method as follows, so the playhead stops at different times to display a unique larger
image on the Stage:
• The stop() method for button1_gray should go to 0 milliseconds.
• The stop() method for button2_gray should go to 2000 milliseconds.
• The stop() method for button3_gray should go to 4000 milliseconds.
• The stop() method for button4_gray should go to 6000 milliseconds.
• The stop() method for button5_gray should go to 8000 milliseconds.
Navigating the Code panel
Your travel slideshow is now interactive, where users can click to see any of the images. But your code appears to be
scattered among many different elements. How can you view all the code for your Edge Animate composition together?
The answer is in the Code panel, which you can open by choosing Window > Code, or pressing Ctrl+E (Windows) or
Command+E (Mac OS).
Viewing your code
The Code panel displays all the code in your Edge Animate composition—both the code that is automatically generated
for every project, and the code that you insert yourself.
1 Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
The Code panel opens. The Code panel is similar to the other script panels for triggers, events, and actions.
2 Click on the Full Code button on the far right side of the panel to toggle between Full Code mode and non-Full Code
mode.
In Full Code mode, Edge Animate displays the entire code for the JavaScript file for the Edge Animate composition.
Scroll down to see the script for all your thumbnail elements as well as the trigger. The code that this represents is
contained in the file 05_workingcopy_edgeActions.js.
Last updated 6/15/2014
111
Use motion paths
In non-Full Code mode, you can select the code for the individual elements or triggers on the Stage on the left side
of the panel. In addition, there is an option to see the code for the Preloader, which is currently disabled because you
haven’t yet added one. In later lessons, you’ll learn about adding a Preloader.
3 While in non-Full Code mode, click on the Plus button in line with the Stage element.
A hierarchical menu appears that allows you to add an event to the Stage itself, an event to any of the elements on
the Stage, or an event to the Timeline.
Last updated 6/15/2014
112
Use motion paths
4 If you want to delete an event or trigger from the Code panel, right-click on the event or trigger from the list and
select Delete Action.
5 In either Full Code or non-Full Code mode, when you make additions and edits to the script, and they are saved in
the composition.
Dealing with code errorsUsing the provided code snippets makes adding code relatively easy because the script is
already formatted correctly. All you have to do is replace key values. However, bugs and typos do invariably creep
in, and dealing with code errors is a common struggle for any developer, whether a novice or an expert.Edge Animate
immediately alerts you to code errors, which make finding and correcting them easy. When there is a mistake in syntax
in any of the code, Edge Animate displays an error message at the bottom left corner of the Code panel. For example, if
you were to accidentally delete the closing parenthesis of the stop() method, the error display tells you where the error
occurs. In addition, a red dot appears next to the line of code in question.The error notification is also displayed at the
bottom-right corner of the Stage.
Last updated 6/15/2014
113
Use motion paths
Click on the arrow icon after the error description to jump directly to the source of the error in the Code panel so you
can fix it. The All or Code options in the error display determines whether all errors are displayed (including
warnings of feature incompatibilities with various devices, such as text shadows in IE9), or only code errors are
displayed.
Creating labels
When the user clicks each thumbnail, Edge Animate moves the playhead to a new time on the Timeline, according to
the argument in the stop() method. However, imagine that the client who has commissioned you to develop this
slideshow wants the whole sequence to run a little slower. That’s an easy task to do because you can select all of the
elements on the Timeline and move all the keyframes and animations forward to lengthen the total amount of time. But
doing so causes the times that each image appears on the Stage to change, which would require you to change all the
millisecond values in the stop() methods.
There is an alternate approach that would save you time and effort. Instead of using fixed-millisecond times in the
stop() methods, you can use labels, which refer to points on the Timeline. Labels can move with your animation, so
increasing or decreasing the length of your animation can move the labels proportionately.
Adding labels
Labels appear on the Timeline panel, below the time markers and just above the Actions layer.
1 Move the playhead to 0:00 seconds.
Last updated 6/15/2014
114
Use motion paths
The image of the fisherman appears at 0:00 seconds.
2 Click the Insert Label button, or press Ctrl+L (Windows)/Command+L (Mac OS).
A label appears on the Timeline, named Label 1.
3 Rename the label fishermen, and press Enter to exit the text editing of the label.
The label called fisherman is now associated with 0:00 seconds.
4 Add four more labels to the Timeline, each marking the starting point at which an image appears on the Stage.
• Insert the label statues at 0:02 seconds.
• Insert the label houses at 0:04 seconds.
• Insert the label monk at 0:06seconds.
• Insert the label women at 0:08 seconds.
Editing labels
There are several ways you can edit labels once you’ve inserted and named them:
• To rename a label, double-click the label name on the Timeline.
• To move a label, click and drag the label on the Timeline to a new position.
• To delete a label, select the label on the Timeline so it is highlighted and press the Delete key.
• To cut, copy or paste a label, right-click on a label and choose your desired option, or use the standard keyboard
commands for cut (Ctrl/Command+X), copy (Ctrl/Command+C), and paste (Ctrl/Command+V).
Last updated 6/15/2014
115
Use motion paths
Changing the references to the Timeline
Now that the Timeline contains labels, you can change the references in the JavaScript code.
1 Choose Window > Code, or press Ctrl+E (Windows)/Command+E (Mac OS).
The Code panel opens.
2 If it is not already selected, click the Full Code button to display the panel in Full Code mode.
All the code for the thumbnail events and actions are displayed in the single script pane.
3 Replace all the millisecond times in the stop() methods with your labels. The following lines of code should be
changed:
• Change sym.stop(0); to sym.stop("fishermen");
• Change sym.stop(1500); to sym.stop("statues");
• Change sym.stop(3500); to sym.stop("houses");
• Change sym.stop(5500); to sym.stop("monk");
• Change sym.stop(7500); to sym.stop("women");
Note: Make sure that you are using straight quotation marks around your label names. The quotation marks are
essential for JavaScript to identify the names as a String (and not a variable). Straight quotes and curly quotes (or smart
quotes) are different characters in HTML and JavaScript and they are not interchangeable.
4 Preview your Edge Animate composition in a browser by choosing File > Preview in the browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
Last updated 6/15/2014
116
Use motion paths
5 At any point during the slideshow, click the thumbnail images.
The slideshow stops and shows the selected image.
6 Return to Edge Animate and select all the elements on the Timeline by choosing Select > All, or by pressing Ctrl+A
(Windows)/Command+A (Mac OS). Make sure none of the elements are locked.
7 Click and drag the last keyframe of the last animated element on the Timeline. Drag the keyframe to the left to
decrease the total amount of time of the slideshow.
As you decrease the length of time for all the animated elements, the labels also move proportionally, preserving
their identification of what's displayed on the Stage. Return the total time of the composition to 0:10 seconds.
Adding visual feedback
Most interactive elements on the Web feature visual feedback, which is important to provide clues to the reader that the
particular item is interactive. For example, a simple hyperlink on a web page often will change color when you move
your mouse over it. A button will highlight when you move your mouse over it, and may appear depressed when you
click on it.
You can create these interactions with a combination of events and actions in Edge Animate. You’ll add these events
and actions to the thumbnails for visual feedback next.
Adding the mouseover thumbnails
The first question you should ask is, what visual effect do you want to see when a user moves their mouse over the
thumbnail images? For this project, you’ll make the grayscale thumbnails become colorized, and a highlight appear
around the borders. The first step is to bring colorized versions of the thumbnails on to the Stage.
1 In the images folder in the Assets folder of the Library panel, you’ll find color versions of each of the five thumbnail
images, indicated by the _color appended to the file name.
2 Drag button1_color.jpg from the Library on to the Stage.
3 Use the Smart Guides to position the button1_color element at the upper-left corner, exactly on top of its grayscale
version. Its location should be at X=0, Y=0.
Last updated 6/15/2014
117
Use motion paths
4 Drag all four of the other colorized versions of the thumbnails to the Stage, positioning them exactly on top of their
grayscale partners. All the colored thumbnails should be at the top of the Element panel stack.
The grayscale and colorized versions of the thumbnails are exactly the same dimensions.
Hiding the mouseover thumbnails
Since you want to show the colorized version only when the mouse cursor moves over the thumbnail, you must first
hide the colorized thumbnails. You can hide the elements by changing their Display property to Off.
1 Move the playhead to 0:00 seconds.
2 Hold down the Shift key and select all the colorized thumbnail elements.
3 In the Properties panel, change the Display property from On to Off.
Edge Animate inserts a new keyframe on the Timeline for all the selected elements at 0:00 seconds and the selected
elements disappear from the Stage.
Last updated 6/15/2014
118
Use motion paths
Inserting the mouseover event
Each grayscale thumbnail contains a click event. You’ll have to edit each of those elements to incorporate a mouseover
event. A mouseover event happens when the user moves their mouse cursor over the selected element. When the
mouseover event happens, you'll show the colorized thumbnails.
1 In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.
The script panel for button1_gray opens. The current click event and actions appear.
2 Click on the Plus button on the upper left corner and choose mouseover.
Edge Animate adds a mouseover tab.
Last updated 6/15/2014
119
Use motion paths
3 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Show
Element option.
Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of
the element to display.
4 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain
around your element name.
The full statement appears as follows:
sym.$("button1_color").show();
The dollar sign and parentheses is jQuery syntax, and it tells the browser what element to select. In this statement,
the element called button1_color in the current Edge Animate composition is selected, and the method called
show() is executed.
Last updated 6/15/2014
120
Use motion paths
5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS). Move your mouse over the first grayscale thumbnail image.
As soon as your mouse cursor moves over the grayscale thumbnail image, the colorized version appears. Since the
colorized version is above the grayscale version, we see only the colorized image.
6 Return to Edge Animate and insert the mouseover event with the Show Element action to the remaining four
grayscale thumbnail buttons. Make sure to replace the highlighted code portion with the correct colorized version
of the thumbnail.
Inserting the mouseout event
When you preview the Edge Animate project, you’ll notice that the thumbnails become colorized when you move your
mouse over them, but they remain in color even after you move your mouse off of them. In order to make the
thumbnails revert to their grayscale versions, you need to add one additional event: the mouseout event.
The mouseout event happens when the cursor moves off of an element. You’ll add the mouseout event to the colorized
thumbnails (not the grayscale thumbnails) and pair the event with a command that hides the colorized versions. The
result: The colorized versions disappear leaving the grayscale version visible again.
1 In the Timeline or the Elements panel, click the Open Actions button for the thumbnail element button1_color. The
element is currently hidden on the Stage, but you can still add script to it.
Last updated 6/15/2014
121
Use motion paths
The script panel for button1_color opens.
2 In the popup menu that appears, choose mouseout for the event.
Edge Animate adds a mouseout tab.
3 Position your cursor on the second line of the script pane (after the first line of comments), and choose the Hide
Element option.
Edge Animate adds the JavaScript code to display an element. The highlighted portion of the code is the name of
the element to display.
Last updated 6/15/2014
122
Use motion paths
4 Replace the highlighted code with button1_color. Make sure that the double straight quotation marks remain
around your element name.
The full statement appears as follows:
sym.$("button1_color").hide();
Note the similarities between the actions for this mouseout event and the previous script for the mouseover event.
5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS). Move your mouse over the first grayscale thumbnail image.
As soon as your mouse cursor moves over the grayscale thumbnail image, it becomes colorized. When you move
your mouse cursor off of the image, the button appears to revert back to grayscale.
6 Return to Edge Animate and insert the mouseout event with the Hide Element action to the remaining four
colorized thumbnail buttons. Make sure to replace the highlighted code portion with the correct colorized version
of the thumbnail.
Editing the click event
One final fix is needed before all the events and actions work together. You may have noticed that clicking on the
buttons don’t move the playhead as you intend. The reason it no longer works is because the colorized thumbnails
overlap their grayscale counterparts, which block the click events. Your final step is to remove the click event from the
grayscale thumbnails and add them to the colorized thumbnails instead.
1 In the Timeline or the Elements panel, click the Open Actions button for each of the grayscale thumbnail elements.
2 Choose the click event tab on the script panel, and click the Minus button.
Edge Animate deletes the click event and all of its actions.
3 In the Timeline or the Elements panel, click the Open Actions button for each of the colorized thumbnail elements.
4 Click on the Plus button on the upper-left corner and choose click for the event.
Edge Animate adds a click event tab.
5 Choose the Stop at option, and as you did before, replace the millisecond argument with the corresponding label on
the Timeline.
Last updated 6/15/2014
123
Use motion paths
6 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
Your buttons are complete. When you move your mouse over them, they become colorized. When you move your
mouse off of them, they revert to grayscale, and when you click on them, Edge Animate displays the corresponding
image from the slideshow.
Using the Code panel to make global edits: Making global edits as you did in this task, such as deleting all the click
events from a set of elements, can be arduous because of the need to select and modify each element. However, using
the Code panel can be a huge time-saver if you’re careful about selecting and editing code.Open the Code panel by
choosing Window > Code, or pressing Ctrl+E (Windows)/Command+E (Mac OS), and choose the Full Code mode.
Examine the code for all the click events (which are referred to as "click") for all the desired elements. Delete everything
that begins with the statements that include the click event and ends with //Edge binding end.
Events for the mouse and for touch devices: The following list explains the available events that you can attach to
your elements for interaction with the mouse or with a touch. For most users, the click event or touchstart event will
be sufficient for all projects.
• click, an event that happens when the mouse button is pressed and released.
• dblclick, an event that happens when the mouse button is pressed and released twice in rapid succession.
• mouseover, an event that happens when the mouse cursor moves over an element.
• mousedown, an event that happens when the mouse button is pressed.
• mousemove, and event that happens whenever the mouse cursor moves within an element.
• mouseup, an event that happens when the mouse button is released.
• mouseout, an event that happens when the mouse cursor moves off of an element.
• touchstart, an event for touch devices when a user touches an element.
• touchmove, an event for touch devices that happens when the user touches and drags a finger over an element.
• touchend, an event for touch devices that happens when the user stops touching an element.
Other user events such as keyboard presses are also available, but not for individual elements. Key presses are associated
with the Stage element, and you'll explore those and other kinds of events in the next lesson.
Customizing the mouse cursor
In addition to the visual feedback that you can provide by changing the appearance of the button when the user
interacts with it, you can also change the appearance of the cursor itself. Often, the default arrow cursor on a desktop
or laptop browser changes to a hand (known as the pointer cursor) when it hovers over an interactive element or
hyperlink. You can choose to change the cursor to a pointer, or choose from among dozens of other cursor types.
Last updated 6/15/2014
124
Use motion paths
Using the pointer
The Properties panel controls the cursor appearance and allows you to select a custom icon for each element.
1 In the Timeline panel, temporarily turn the Display property for the five colorized thumbnail elements to On.
Turning on the Display property allows you to select them on the Stage.
2 Select all five colorized thumbnail elements, button1_color through button5_color.
3 In the Properties panel, click the Cursor option and choose the pointer icon.
4 Turn the Display property for the five colorized thumbnail elements back to Off.
The colorized thumbnail elements are hidden again.
5 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
The pointer cursor appears whenever you move your mouse over or click on the buttons
Note: You can only change the appearance of the cursor for each element, and not for every event of an element.
Controlling animated elements
So far, you’ve added JavaScript that controlled the behavior of the playhead and the hiding or displaying of particular
elements. You can also add code to control the playback of animated symbols.
Last updated 6/15/2014
125
Use motion paths
Symbols, as you learned in the previous lesson, are independent objects that you create that can have their own internal
animation. With JavaScript, you can control the symbol animations to create more sophisticated interactions. For
example, you can create a button that controls a dramatic animated unfurling or closing of a map. Or, you can create a
button that controls the animated expansion or collapse of a more info box. The map and the more info box would be
Symbols that behave independently on the main Timeline.
For your interactive travel slideshow, you’ll add a button at the top of the Stage that, when rolled over, elegantly animates
to reveal information about the images and Burma.
Adding the button and animated symbol
The button and the animated symbol have already been created for you, and are in the Library ready to use.
1 In the Library panel, expand the Symbols section, and drag the moreinfo symbol to the Stage. Position the moreinfo
symbol at X=200, Y=0.
The moreinfo symbol appears in the Elements and Timeline panels. The short playback arrowheads on the Timeline
show how long the animation within the symbol lasts (one second long).
2 In the Timeline, click the Playback options for the moreinfo element and choose Stop.
The playback of the internal symbol animation does not play on the main Timeline.
3 Double-click the moreinfo symbol on the Stage and press the spacebar to view the animation within the symbol.
The symbol consists of two short animations. The long horizontal gray rectangle expands, and at the same time, the
clipping box of some informational text expands to reveal it.
Last updated 6/15/2014
126
Use motion paths
4 Click the Stage button at the top of the Stage to exit your symbol.
5 Drag the triangle.png image from the Library Assets folder to the Stage. Position the triangle element at X=484, Y=3,
or use the Smart Guides to center the element over the moreinfo element.
Play a symbol animation
The symbol is currently stopped at 0 seconds. You’ll add a mouseover event to the triangle button that tells the symbol
to begin playing.
1 In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
The script panel for triangle opens.
2 Choose mouseover for the event.
Edge Animate adds a mouseover event tab.
Last updated 6/15/2014
127
Use motion paths
3 Choose the Get Symbol option.
Edge Animate adds the JavaScript code to select a particular symbol on the Stage. The highlighted portion of the
code is the name of the symbol that you want to select.
4 Replace the highlighted code with moreinfo, to match the moreinfo element on the Stage. Make sure that the double
straight quotation marks remain around your element name.
The full statement appears as follows:
var mySymbolObject = sym.getSymbol("moreinfo");
The first part of this statement, var mySymbolObject, creates a variable for the reference to your symbol, so you can
control it.
5 On the next line in the script panel, choose the Play option.
Edge Animate adds a statement that plays the sym object, or the main Timeline. However, you want the symbol to
play its animation, not the animation on the main Timeline.
6 Replace sym with the variable, mySymbolObject, which refers to your sym.
Last updated 6/15/2014
128
Use motion paths
The next statement appears as follows:
mySymbolObject.play();
Note: You can combine the two statements into one line as follows, sym.getSymbol("moreinfo").play();
Reset the symbol animation
Now, you'll add a mouseout event for the triangle element to move its playhead back to 0 seconds to reset the animation.
1 In the Timeline or the Elements panel, click the Open Actions button for the triangle element.
The script panel for moreinfo button opens.
2 Step textClick on the Plus button on the upper left corner and choose mouseout for the event.
Edge Animate adds a mouseout event tab.
3 Choose the Get Symbol option, and replace the highlighted code with moreinfo.
The full statement appears as follows:
var mySymbolObject = sym.getSymbol("moreinfo");
4 On the next line in the script panel, choose the Stop at option.
Edge Animate adds a statement that stops the sym object, or the main Timeline. However, you want the symbol to
stop its animation, not the animation on the main Timeline.
5 Replace sym with the variable, mySymbolObject, which refers to your symbol. Replace the 1000 default millisecond
argument with 0.
Last updated 6/15/2014
129
Use motion paths
The next statement appears as follows:
mySymbolObject.stop(0);
6 Preview your Edge Animate composition in a browser by choosing File > Preview in your browser, or pressing
Ctrl+Enter (Windows)/Command+Return (Mac OS).
When you roll over the triangular button at the top of the Stage, the moreinfo symbol plays its animation, which
reveals the text box and text. When you roll off the button, the text box and text collapse.
Using jQuery Effects
The Edge Animate API offers a nice balance of power, flexibility, and ease-of-use to incorporate interactivity to your
designs and animations. Inserting script by simply clicking a button in the script panel is (mostly) foolproof. However,
adding a bit of jQuery to your scripts can often make your job easier. As you learned earlier in this lesson, jQuery is a
JavaScript library that was written specifically to make selecting elements on a web page and creating animations and
transitions simple. There are many jQuery methods for animating elements, such as a fade-in, fade-out, or slide-in and
slide-out. Since Edge Animate is fully compatible with JavaScript and jQuery, you can use these methods wherever you
see fit. Let’s examine one particular jQuery method, fadeToggle(). The method fadeToggle() animates an element's
transparency to fade up or fade down, depending on its current state. If the element is transparent, it will become
opaque. If the element is opaque, it will become transparent.
1 In a new Edge Animate composition, add a small rectangle and an image on the Stage. Name the rectangle
Rectangle, and the image Image.
Last updated 6/15/2014
130
Use motion paths
2 In the Timeline or the Elements panel, click the Open Actions button for the Rectangle element.
3 Choose click for the event.
4 Add the following statement for the click event: sym.$("Image").fadeToggle()
5 That's all! Preview your composition in a browser.
When you click on the rectangle, Edge Animate uses jQuery to select the image and executes the fadeToggle()
method. The image fades in and out with alternate clicks. jQuery does all the work of creating two inverted
animations without requiring you to manually create any symbols, keyframes, or mechanisms to remember the state
of the image. jQuery is powerful and makes a good addition to your designer-developer toolkit. You can view the
05JQuery.an file in the 05End_JQuery folder to see the completed example.
Review
Last updated 6/15/2014
131
Use motion paths
Review questions
1 What's the difference between actions, triggers, and events, and how are they used to create interactivity in Adobe
Edge Animate?
2 What's the relationship between the Edge Animate API, jQuery, and JavaScript?
3 How do you create a button?
4 Why would you use a label, and where are they located?
5 What is the Code panel, and how does it differ from the panels for actions and triggers?
6 What does the code sym mean in the Edge Animate API, and how do you use it?
Review answers
1 Actions, triggers, and events are all JavaScript code that you use to create interactivity in Edge Animate. Actions are
commands that tell Edge Animate to do something, such as hide or display an element, or load a hyperlink. Triggers
are actions that are placed on the Timeline so they are executed at a specific time. Events are things that happen in
a composition that Edge Animate can respond to with actions.
2 Edge Animate uses JavaScript to power its animation and interactivity. JavaScript is the standard scripting language
for Web browsers. jQuery is a library of well-written JavaScript functions that make it easier to select and animate
elements on a web page. The Edge Animate API provides additional functions (based on JavaScript and jQuery) to
control elements in your composition.
3 A button is a visual indicator of what the user can interact with. You can create a button by creating an element on
the Stage, then clicking the Open Actions button in the Timeline or Elements panel to add an event. In the event tab
that opens, insert actions that you want triggered when the event happens.
4 Labels are located at the top of the Timeline. Labels identify specific points in time so that you can refer to label
names, rather than fixed milliseconds, in your JavaScript code.
5 The Code panel, which you access by pressing Ctrl+E (Windows)/Command+E (Mac OS), allows you to display all
the JavaScript code associated with your current Edge Animate composition. It also shows any code errors and their
location in the script. In contrast, panels for adding triggers, events, and actions show only the code for the
associated element, or time.
6 The word sym represents the whole Edge Animate composition, when the statement is on the main Timeline. Edge
Animate is organized around the concept of "symbols," and the root, or base-level symbol is the Edge Animate Stage.
This root symbol contains all the elements and animations in your Edge Animate composition—everything on the
Stage or Timeline. In JavaScript, when you want to do something, you first identify the object that you want to
control. If you want to affect the Timeline of your Edge Animate composition, the first thing that is written in the
script is sym.
Using Animate files in InDesign or Muse (Video)
Using Animate files in InDesign or Muse (Video)
Introduction to Edge Animate
Video Tutorial
Introduction to Edge Animate
Last updated 6/15/2014
132
Use motion paths
Create your first Edge Animate project
Create your first Edge Animate project
Use Edge Animate file in InDesign or Muse
Use Edge Animate file in InDesign or Muse
Download files from Adobe Dev Center
Download files from Adobe Dev Center
Publishing and integration (Video)
Publishing and integration (Video)
Last updated 6/15/2014
133
Chapter 6: Layout and design
Creating a flexible layout
Creating a flexible layout
Create fluid responsive web page layouts
Create fluid responsive web page layouts
Last updated 6/15/2014
134
Chapter 7: Integration and publishing
Edge Animate API guide
Edge Animate API guide
Edge Animate and the Twitter API (Video)
Edge Animate and the Twitter API (Video)
Enhance your DPS folios with HTML animations
(Tutorial)
Enhance your DPS folios with HTML animations (Tutorial)
Spice up your WordPress Site with Edge Animate
Spice up your WordPress Site with Edge Animate
Create a PhoneGap Build app with Edge Animate
Create a PhoneGap Build app with Edge Animate
Extending Edge Animate with 3rd party web
components (Video)
Extending Edge Animate with 3rd party web components (Video)
Last updated 6/15/2014
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.5
Linearized : Yes
Author : Adobe Systems Incorporated
Create Date : 2014:06:15 01:25:30Z
Keywords : Adobe Edge Animate CC Help, Creative Cloud - June 2014
Modify Date : 2014:06:17 15:26:43+05:30
Has XFA : No
Tagged PDF : Yes
XMP Toolkit : Adobe XMP Core 5.4-c005 78.147326, 2012/08/23-13:03:03
Creator Tool : FrameMaker 11.0
Metadata Date : 2014:06:17 15:26:43+05:30
Format : application/pdf
Description : Adobe Edge Animate CC Help
Title : Adobe Edge Animate CC Help
Creator : Adobe Systems Incorporated
Subject : Adobe Edge Animate CC Help, Creative Cloud - June 2014
Producer : Acrobat Distiller 11.0 (Windows)
Document ID : uuid:e2331f46-9f91-4648-af98-0fc860092fa5
Instance ID : uuid:046d2045-6f45-4c4b-8b42-a97e8b10db59
Page Mode : UseOutlines
Page Count : 138
EXIF Metadata provided by EXIF.tools
.