Creating the buttons
A button is a basic visual indicator of what the user can interact with. The user usually clicks a button, but many other types of interactions are possible. For example, rollovers, double-clicks, and rollouts are all possible. Edge Animate also provides events unique to mobile devices, such as touches.
You’ll start with the simplest, and most common event, which is the single-click.
Adding the thumbnails
Small, cropped versions of the larger Myanmar images are provided for you in the images folder.
- In the Library panel, expand the images folder within the Assets folder.
- Drag the file called button1_gray.jpg from the Library panel to the Stage.
- Position the thumbnail so that its top-left corner is at the top-left corner of the Stage. The coordinates should be at X=0, Y=0.
- Drag the file called button2_gray.jpg from the Library panel to the Stage, and position it just below the first thumbnail. You can use the smart guides to help automatically snap the images in place. The coordinates should be at X=0, Y=80.
- Drag the remaining three grayscale thumbnails from the Library panel onto the Stage, positioning each successive one below the previous one.
A grayscale thumbnail of a fisherman appears on the Stage, Timeline, and Elements panel.
)
)
Two grayscale thumbnails are at the left side of the Stage, one above the other.
There should be a total of five thumbnail images vertically stacked on the left side of the Stage.
)
Adding the events
Each element on the Stage can have its own events and actions. Insert code for individual elements from the far-left column of the Timeline or Elements panel. The Open Actions button is indicated by a set of curly braces.
- In the Timeline or the Elements panel, click the Open Actions button for the first thumbnail element, button1_gray.
- Select the first option: click.
)
The script panel for button1_gray opens.
A menu of options automatically opens, displaying the events that are possible for the button1_gray element.
)
Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.
)
Adding the actions
Each event must have an accompanying action, or a response, to the event.
- Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at option.
- In between the parentheses of the stop() method, replace the 1000 number with 0.
- Close the script panel.
- Preview your Edge Animate composition in a browser by selecting File > Preview in browser, or pressing Ctrl+Enter (Windows)/Command+Return (Mac OS).
- At any point during the slideshow, click the first grayscale thumbnail.
)
Edge Animate adds the code to stop the playhead at a particular position on the Timeline.
)
)
The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop. Since this first grayscale thumbnail is of the fisherman, you want the playhead to stop at 0:00 seconds, the point at which we see the full image of the fishermen on the Stage.
The Open Actions icon for the button1_gray element becomes filled in, indicating that there is currently script attached to that element.
)
The slideshow stops and shows the image of the fishermen.
Completing the interactivity
Now that you’ve completed the interactivity for the first button, add the same functionality to the remainder.
- In the Timeline or the Elements panel, click the Open Actions button for the second thumbnail element, button2_gray.
- Click on the Plus button on the upper-left corner.
- Select the first option: click.
- Position your cursor on the second line of the script pane (after the first line of comments), and choose the Stop at option.
- In between the parentheses of the stop() method, replace the 1000 number with 2000.
- Add similar click events to all the other grayscale thumbnail images, with the Stop at option. Be sure to change the arguments for each stop() method as follows, so the playhead stops at different times to display a unique larger image on the Stage:
- The stop() method for button1_gray should go to 0 milliseconds.
- The stop() method for button2_gray should go to 2000 milliseconds.
- The stop() method for button3_gray should go to 4000 milliseconds.
- The stop() method for button4_gray should go to 6000 milliseconds.
- The stop() method for button5_gray should go to 8000 milliseconds.
)
The script panel for button2_gray opens.
A menu of options opens, displaying the events that are possible for the button2_gray element.
Edge Animate adds a click tab at the top of the panel with an empty script pane and available snippets on the right.
Edge Animate adds the JavaScript code to stop the playhead at a particular position on the Timeline.
)
The stop() method requires a number, in milliseconds, of the point on the Timeline at which it will move to and stop. Since the second grayscale thumbnail is of the statues, you want the playhead to stop at 0:02 seconds, the point at which we see the full image of the statues on the Stage.