Adobe Edge Animate: The Missing Manual

Chapter 6. Working Smart with Symbols

There’s one trait that animators, web builders, and programmers all share. They hate to do the same job more than once. In each of these crafts, there are tools and techniques that help you minimize the grunt work and maximize the time available for creativity. In Animate, symbols work that way. You build an element once, and then you can use it many times. Symbols make your web page more efficient, too. If you’re building a scene with a couple hundred raindrops, all you need is one definition of a raindrop in order to fill the sky with them. You can even change the size, rotation, and opacity of the individual instances to add variety to your scene.

As you begin digging deep into symbols, you may be surprised at how much they have to offer. Symbols aren’t just a way to clone an individual element: You can also group several different elements into a symbol. So, if you’re creating a Stop sign, you can combine an octagonal shape with a text box to make one symbol. Furthermore, symbols aren’t just static elements—each has its own stage and timeline. Want to animate a horse running? Create a horse symbol with animated leg motion. Then you can place that symbol on top of a background of Monument Valley. Using triggers and actions from the previous chapter, you can even stop and start the galloping.

This chapter gives you all the details about creating, using, and editing symbols. You’ll also learn some tricks for working with Animate’s ...