Adobe Edge Animate: The Missing Manual

Chapter 9. Helpful JavaScript Tricks

Here’s the payoff for learning the JavaScript/jQuery basics covered in Chapter 8. You can apply those skills to your Animate projects. One of the easiest ways to start is to use Animate’s triggers and action snippets to write code, and then apply your own modifications to customize that code. That’s exactly how this chapter begins. Then it presents yet another version of the photo gallery, using a nifty image source swapping technique. Along the way you learn how to change an element’s dimensions, position, and background colors the JavaScript/jQuery way. This chapter explains how you can simplify your code by assigning symbols and elements to variables. Symbols have their own independent timelines. If you want to start, stop, and control those timelines, you’ll be interested in the example that shows how to do that from within and without the symbol. Last, but not least, you’ll learn how to create Animate compositions that make decisions for themselves through the use of conditional statements.

More Showing and Hiding Tricks

Chapter 5 showed several examples using the Show and Hide actions. Now it’s time to revisit that subject and see how you can bend those simple tricks to your own iron will. Consider a simple Animate composition like the one in Figure 9-1. You can find 09-1_HideAndSeek with the exercises for this chapter on the Missing CD at www.missingmanuals.com/cds/animatemm.

Figure 9-1. This Animate composition has an image of a car and ...