![]() Actions, triggers, and events are all JavaScript code that you use to create interactivity in Edge Animate.Name the rectangle Rectangle, and the image Image. In a new Edge Animate composition, add a small rectangle and an image on the Stage.If the element is opaque, it will become transparent. If the element is transparent, it will become opaque. The method fadeToggle() animates an element’s transparency to fade up or fade down, depending on its current state. Let’s examine one particular jQuery method, fadeToggle(). Since Edge Animate is fully compatible with JavaScript and jQuery, you can use these methods wherever you see fit. There are many jQuery methods for animating elements, such as a fade-in, fade-out, or a slide-in and slide-out. As you learned earlier in this lesson, jQuery is a JavaScript library that was written specifically to make it simple to select elements on a Web page and creating animations and transitions. However, adding a bit of jQuery to your scripts can often make your job easier. Inserting script by simply clicking a button in the script panel is (mostly) idiot-proof. The Edge Animate API offers a nice balance of power, flexibility, and ease of use to incorporate interactivity to your designs and animations. Position the moreinfo symbol at X=200, Y=0. In the Library panel, expand the Symbols section, and drag the moreinfo symbol to the Stage.The button and the animated symbol have already been created for you, and are in the Library ready to use. The map and the more info box would be symbols that behave independently on the main Timeline.įor your interactive travel slideshow, you’ll add a button at the top of the Stage that, when rolled over, elegantly animates to reveal information about the images and Myanmar. Or, you can create a button that controls the animated expansion or collapse of a more info box. For example, you can create a button that controls a dramatic animated unfurling or closing of a map. With JavaScript, you can control the symbol animations to create more sophisticated interactions. Symbols, as you learned in the previous lesson, are independent objects that you create that can have their own internal animation. You can also add code to control the playback of animated symbols. ![]() So far, you’ve added JavaScript that controlled the behavior of the playhead and the hiding or displaying of particular elements. Controlling animated elements Controlling animated elements
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |