Lesson overview
In this lesson, you’ll learn how to do the following:
- Understand interactivity
- Work with the syntax of JavaScript
- Recognize the relationship between JavaScript, jQuery, and the Edge Animate API
- Differentiate triggers, events, and actions
- Add triggers to the Timeline
- Insert labels
- Create actions to respond to events
- Control the behavior of the Timeline playhead
- View and edit script with the Code panel
- Use comments to annotate code
- Hide and show elements to incorporate visual feedback for buttons
- Control animated elements
- Customize the mouse cursor
This lesson will take approximately two hours to complete. If needed, remove the previous lesson folder from your hard drive and copy the Lesson05 folder onto it.
)
Let your viewers explore your composition and become active participants. Use Adobe Edge Animate’s built-in code snippets and intuitive panels to add actions to create engaging, user-driven, interactive experiences.
Getting started
To begin, view the travel guide that you’ll create as you learn to make interactive projects in Adobe Edge Animate.
- Double-click the 05End.html file in the Lesson05/05End folder to play the composition in a browser.
- Close the 05End.html file and quit your browser.
- Double-click the 05Start Edge Animate file in the Lesson05/05Start folder to open the initial project file in Edge Animate.
- Choose File > Save As. Name the file 05_workingcopy and save it in the 05Start folder. Saving a working copy ensures that the original start file will be available if you want to start over.
)
The project is an interactive photo gallery showing images from Myanmar. Viewers can watch the short slideshow automatically play and loop back to the beginning. Or, viewers can click any thumbnail image on the left side of the Stage to go directly to a particular image. Move your mouse over the triangular button at the top to see a caption unravel.
In this lesson, you’ll create interactive buttons with rollover highlights and learn to incorporate the proper code that tells Edge Animate where to move the playhead on the Timeline to display the particular animation or image there.
)
The file includes all the assets already placed on the Stage and the transitions between each image on the Timeline. The Stage has already been sized properly. In this lesson, you’ll make this linear animation interactive.