Adobe Edge Animate: The Missing Manual

Chapter 5. Triggering Actions

The great beauty of the World Wide Web is that it’s interactive. Unlike a static newspaper or magazine, with a mouse click or a finger swipe, you can make something happen. Perhaps you’re flicking your way to the next photo in a slideshow. Or maybe you’re jumping to view a new segment of an animation or movie. When you’re building websites, the best way to hold your audience’s attention is to put them in control of their experience. Let them turn features on and off. Let them quickly access the content that’s most important to them. Let them control the speed of the slideshow, viewing each image just as long as they want.

This chapter shows you how to give your audience interactive control over their web experience. As a developer, Animate gives you tools called triggers and actions. You get to choose which events act as triggers. It might be a mouse click, or it might be the playhead reaching the end of the timeline. Then you can specify the actions that take place. For example, you can change the size, color, or transparency of a clicked element, or you can jump to a new point in the timeline. As always, Animate translates your project into JavaScript/jQuery code, but it makes development easy for you. In some cases, adding a trigger and an action is as easy as choosing items from a menu. In other cases, you’ll need to tweak the code a bit to make it work according to your needs. This chapter walks you through the process. You’ll learn how to use triggers ...