Digging into the Code - dummies

By Michael Rohde

Adobe Edge Animate CC makes the creation of animations possible for a range of users — from those who consider working with code a challenge to experienced developers and engineers who eat code for breakfast. On the one hand, you really don’t need any coding skills to create professional animations with Edge Animate; on the other hand, Edge Animate provides

  • Native HTML5 code, which is very clean — no proprietary or unnecessary code. This helps make the code easier to read and understand for everyone.

  • A persistent code panel, which gives you access to editing the code by hand.

  • JavaScript API (application programming interface), which provides an opportunity to learn the details behind the code.

Designers without coding skills can relax knowing they can still create compositions without knowing any code at all. Meanwhile, experienced developers can salute Adobe for providing access to all of the background code.

Working in native HTML

While you work in Edge Animate, the software is constantly creating code behind the scenes. While you don’t necessarily have to know any HTML or JavaScript to create animations, if you do happen to have some coding skills, then you can celebrate — Edge Animate creates very clean HTML code without any proprietary baggage.

If you want to get into the code, then consider the HTML file that Edge Animate creates as the only file that you may need to open. Edge Animate does create several other types of files, including JavaScript files, but those files are dense with code. If you are not a developer, then good advice is to steer clear of those files.

If you’ve already built several websites and don’t want to create your animation from scratch, you’re in luck: You don’t have to start over from the beginning. A great feature of Edge Animate is that you can import existing HTML files — which gives experienced web developers a head start with Edge Animate.

HTML5 is the big thing with web development these days, right along with CSS3. If you’re wondering what HTML5 is, the best way to describe it is that it’s the future of the web. So, by using Edge Animate, you are placing yourself at the forefront of web technologies. And the best part is, you don’t have to know how to code to use it; Edge Animate creates the code for you.

Coding easily with the persistent code panel

You can use Adobe Edge Animate CC without knowing a single bit of code. However, if you are a developer who likes to hand-code, you can do so with the code window. You have two options when using the code window:

  • You can view the full code. This figure shows what you see: all the code in the actions file for the particular animation you’re working on. This view is extremely helpful; you don’t have to keep clicking back and forth between code snippets.

    Use the Full Code mode to view and edit your actions file. You can activate this mode by clicking the Full Code button in the top-right corner of the code editor.


  • You can view a specific action’s code. When you have the code window open, you see a list of actions on the left side. By clicking one of those actions, you can edit the code for only that action (see the figure).


To open the code window, from the menu, choose Window and then Code as shown.

You can use a keyboard shortcut to open the code window by pressing Ctrl+E.


Pulling in the JavaScript API

An Adobe Edge Animate CC JavaScript API is available for the hardcore coders out there. For those who know nothing of JavaScript or writing code, don’t fret; massive code-slinging isn’t necessary in order to create animations. However, if you do like to lift the hood and poke around in the engine, then the JavaScript API provides an excellent resource.

API stands for application programming interface and is a common tool that programmers use for writing and debugging code. Of course, if you want to educate yourself on how to code, looking into the workings of APIs can get you started. Keep in mind, however, that APIs generally don’t provide beginner-level information; they assume that you already know how to code.

The Adobe Edge Animate CC JavaScript API gives you plenty to explore:

  • Adobe Edge Animate CC overview: This section of the API gives you a general introduction to the program.

  • Triggers, events, and actions: These features of Edge Animate execute your code for you (such as looping) or when your audience interacts with different parts of the animation (such as clicking a button).

  • Tools and pointers for creating Symbols (reusable embedded animations): Especially useful are the Edge Animate Symbols, which are self-contained behaviors, Timelines, and graphics.

  • JavaScript API: This is the standard JavaScript interface, a handy tool in its own right, especially when you like to hand-code specific aspects of your animation projects.

  • Advanced topics: After you’ve got some coding practice under your belt, these topics offer some adventurous directions to explore (for example, creating multiple compositions in a page).

This figure provides an example of what you can find in the API.