Digging into the Code
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.
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
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.
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.
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.
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.