Adobe Edge Animate CC (2015) Help Guide 2015 En
User Manual: adobe Adobe Edge Animate - CC (2015) - Help Guide Free User Guide for Adobe Edge Animate Software, Manual
Open the PDF directly: View PDF 
.
Page Count: 42
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
iii
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
Use web fonts
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .7
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .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
Animating text (Video)
Create nested animations with symbols
Animate existing HTML
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Add interactivity with JavaScript
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Leveraging independent symbol timelines (Tutorial)
Create an animated logo (Tutorial)
Chapter 4: Use motion paths
Animating over a curved path
New features summary
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Chapter 5: Layout and design
Creating a flexible layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Create fluid responsive web page layouts
Target older browsers
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 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
iv
EDGE ANIMATE
Contents
Use Edge Animate file in InDesign or Muse
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Extending Edge Animate with 3rd party web components (Video)
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Last updated 6/16/2015
1
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.
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
2
What's new
The text spans are retained when the text is transformed (rotated or scaled).
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
3
What's new
Reduced payload size
Lesser number of downloads
Last updated 6/16/2015
4
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.
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
5
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.
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
6
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:
Last updated 6/16/2015
7
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)
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
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/16/2015
9
Creating content & importing assets
Add audio to animations
Adobe Edge Animate now supports native HTML5 audio with the
Source Exif Data:
File Type : PDF
File Type Extension : pdf
MIME Type : application/pdf
PDF Version : 1.6
Linearized : No
Author : Adobe Systems Incorporated
Create Date : 2015:06:16 01:10:23Z
Modify Date : 2015:06:16 09:32:07+05:30
Subject : Adobe Edge Animate
Has XFA : No
Tagged PDF : Yes
XMP Toolkit : Adobe XMP Core 5.6-c015 81.157285, 2014/12/12-00:43:15
Format : application/pdf
Creator : Adobe Systems Incorporated
Description : Adobe Edge Animate
Title : Edge Animate
Creator Tool : FrameMaker 11.0
Metadata Date : 2015:06:16 09:32:07+05:30
Producer : Acrobat Distiller 11.0 (Windows)
Document ID : uuid:6b1e0244-0396-4fa0-acb3-8d7f76862494
Instance ID : uuid:5e8c7413-903f-4fc5-86a8-ad4701095aad
Page Mode : UseOutlines
Page Count : 42
EXIF Metadata provided by EXIF.tools