Macromedia Edge Animate - CC User Manual
Adobe®
Edge Animate CC
Help
Legal notices
Legal notices
For legal notices, see http://help.adobe.com/en_US/legalnotices/index.html.
Last updated 6/16/2015
Contents
Chapter 1: What's new
New features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1
Chapter 2: Creating content & importing assets
Creating content for animation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Creating a project and importing content (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Create assets and import them into your Edge Animate project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Use web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
Add audio to animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9
Add video to animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Import sprite sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Hyperlink elements to Adobe DPS articles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Using Flash sprite sheets with Animate (Tutorial) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Chapter 3: 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
Animating text (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Create nested animations with symbols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Animate existing HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Add interactivity with JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Leveraging independent symbol timelines (Tutorial) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Create an animated logo (Tutorial) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
iii
Chapter 4: Use motion paths
Animating over a curved path . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
New features summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Chapter 5: Layout and design
Creating a flexible layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Create fluid responsive web page layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Tar get old er b rowse rs . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Chapter 6: Integration and publishing
Publish your content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
Edge Animate API guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Publishing and integration (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Edge Animate and the Twitter API (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Enhance your DPS folios with HTML animations (Tutorial) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Using Animate files in InDesign or Muse (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Spice up your WordPress Site with Edge Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Create a PhoneGap Build app with Edge Animate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Last updated 6/16/2015
EDGE ANIMATE
Content s
Use Edge Animate file in InDesign or Muse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Extending Edge Animate with 3rd party web components (Video) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
iv
Last updated 6/16/2015
Chapter 1: What's new
New features summary
The 2015 release of Adobe Edge Animate CC includes support for in-line text that lets you type and edit text directly
on Stage. This release also includes a bunch of bug fixes for crashes and overall stability of Edge Animate.
Adobe Edge Animate CC (2015 release) | June 2015
In-line text
In the previous releases of Edge Animate, you used to type text in a popup that later appeared on Stage. In this release,
you can type text directly on Stage. You can also format portions of text (referred to as text spans), which was not
supported earlier.
1
To add a text element to your composition, do the following:
1 Click the ‘T’ icon in the menu.
2 Click on the Stage where you need the text to be inserted.
3 Type the required text.
The text box in this case is auto adjusted to the text you type in. If you want to define your own text box and then type
the text, do the following:
1 Click the ‘T’ icon in the menu. The cursor changes to ‘+’ on Stage.
2 Drag on Stage to define the text box.
3 Type the required text.
To format a portion of text differently from the rest, select the required text and use the Properties panel to modify as
required.
Last updated 6/16/2015
What's new
The text spans are retained when the text is transformed (rotated or scaled).
2
Adobe Edge Animate CC 2014.1.1 | November 2014
The 2014.1.1 release of Adobe Edge Animate CC provides many important bug fixes including crash issues while using
Timeline and reordering of elements. This release also includes fixes to issues with audio/video and scroll effects
workflow in Adobe Muse, along with new runtime APIs (getSymbolTypeName and symbol.seek).
Adobe Edge Animate CC 2014.1 | October 2014
Runtime size reduced by 55%
The earlier versions of Edge Animate runtime used to depend on jQuery internally. jQuery was always added as a
dependency in your composition irrespective of whether you are actually using any of the jQuery APIs or not. This
dependency is removed in the latest Edge Animate Runtime, which means a smaller payload size and reduced number
of downloads required for running your compositions.
The requirement for a separate preloader js too is removed in this release. Edge Animate now generates a single js file
for your composition, which contains the entire DOM and your complete code in the Edge Animate composition.
Last updated 6/16/2015
What's new
Reduced payload size
3
Lesser number of downloads
Last updated 6/16/2015
What's new
Upgrade of compositions
Compositions created using previous versions of Edge Animate are automatically upgraded when you open them with
this build. The upgraded composition along with the associated files is saved in a separate folder under the root of the
project folder.
For example, if the previous composition is in the /user/MyProject folder, the upgraded composition will be in the
folder /user/MyProject_upgraded. Assets that are directly referenced in the composition are automatically copied to
the upgrade folder. You may need to manually copy the rest of the assets that are not directly used in the composition
(for example, additional CSS files, assets used only through scripts).
Also, due to new runtime changes described below, any jQuery dependencies in the previous compositions are added
as user scripts to the Library in the upgraded composition.
Note: Since the new runtime does not depend on jQuery anymore, you can try deleting jQuery from your compositions
and test them, if you are not using any of the jQuery APIs.
Removed dependencies on third-party libraries
The Edge Animate runtime no longer requires jQuery to run your compositions. However, you can still use a few
jQuery APIs that are made available in Edge Animate. For more details, refer to the
Edge Animate API reference.
4
Save your images, media, and scripts to custom folders
Edge Animate now lets you specify additional file paths to enable you to target required folders for each type of asset
while publishing your compositions to Web. Since you can specify a relative path for your assets now, you can share
your assets across multiple compositions easily.
The file paths are relative to the target directory. If you type in an absolute file path or use the browse button to target
a folder in a different drive (other than that of the target directory), an error is displayed.
Last updated 6/16/2015
What's new
Changes to Save As dialog box
In the earlier versions of Edge Animate, when you save a composition, all html, js files and the assets are saved in the
same directory. If you save multiple compositions in the one folder, mapping the assets to the respective compositions
becomes difficult.
5
In this release of Edge Animate, the Save As dialog box includes a new option, Save In A Folder, which is selected by
default for unsaved compositions. So, by default your compositions are now saved in a separate folder with the name
of the composition, along with the related files and assets.
Last updated 6/16/2015
What's new
In the Save As dialog box, if you select a folder using your mouse or keyboard, and if the Save In A Folder option is
selected, a subfolder is created under the previously selected folder.
New preloader option
To reduce the number of downloads, the preloader DOM is directly included in your composition's HTML. However,
if you want the preloader DOM to be a separate js file, enable the option - Publish Preload DOM As A Separate File in
Publish Settings as shown below:
6
Last updated 6/16/2015
Chapter 2: 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)
7
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/16/2015
Creating content & importing assets
8
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/16/2015
Creating content & importing assets
Add audio to animations
9
Adobe Edge Animate now supports native HTML5 audio with the <audio> 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
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.
Media formats supported by the HTML audio and video elements.
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/16/2015
Loading...