Graphics Reference
In-Depth Information
5.8 Lessons
4
Project
The files for this example can be
downloaded from http://edgebuch.
simonwidjaja.com
Project Name:
Interaction_Buttons
In this chapter's sample project, you will learn how to create buttons with differ-
ent states, and how to generate interval actions, which are independent from
all Timelines,
using setInterval()
.
5.8.1 Buttons
Unlike Flash Professional, the first version of Edge Animate does not offer an
infrastructure for multi-state buttons. However, we can use a small workaround
to create multi-state buttons that can easily be reused. Let us first look at a sim-
ple button with only one state. Suppose we want to create a button that calls
the website google.com when it is clicked.
1.
Visual elements •
First create a simple rectangle and a text field on the Stage.
2.
Nesting •
Because two separate elements are involved here, but we want
to treat both levels as one button, we drag the text layer from the Elements
panel onto the rectangle so that it has a child relationship to the shape. In
this way, we ensure that all the settings, such as the mouse cursor and click
events, apply to both elements, even if we only assign them to the parent
rectangle.
3.
Mouse cursor •
Set the mouse cursor to pointer in the Property panel so that
the user immediately recognizes our component as a button.
4.
Action •
To finish the task, add an action to call the URL for the
click
event.
To do this, choose Open URL from the list of code snippets on the right, so
that we only need to enter the intended URL. The button is now ready.
Figure 5.24
Four steps for creating a simple button
