EDOBE XDOM EM User Manual download pdf (Page 56)

Create animations using the Timeline

Last updated 6/15/2014

Learn more

• Leveraging independent symbol timelines

Animate existing HTML

You can animate and add interactivity to elements in existing HTML pages. Because the animation code generated by

Edge Animate is stored in a separate file, the integrity of the HTML page is preserved.

1 Open an existing HTML page in Edge (File > Open).

Edge Animate only opens standards-compliant code. For example, if you have duplicate IDs, the tool notifies you

that the do

cument 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

Mode

l).

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

d 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

elemen

ts.

Add interactivity with JavaScript

You can use JavaScript to add interactivity to your compositions. You can define actions for each element using a built-

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

1 2 ... 51 52 53 54 55 56 57 58 59 60 61 ... 137 138

No comments

EDOBE XDOM EM User Manual Page 56