Graphics Reference
In-Depth Information
8.
Setting the text label with an action •
To filter the set text within the symbol,
create an action for the
creationComplete
event inside the symbol. This
is always fired when a new instance of the button is created on the Stage
during runtime. Now we can use the previously set text that has only been
saved as a simple
title
attribute in the HTML tag, and assign it to the text
field using the
html()
function:
// Read title attribute and use it as label
var title = sym.getSymbolElement().attr( "title" );
sym.$( "label" ).html( title );
5.8.2 Interval Updates Without Timeline (Edge Clock)
Often you will want actions to perform continuously at a defined interval. This
can be useful if animations repeat or if data is requested from an outside web
service, such as for Twitter feeds, after a certain time window. You have many
different events available for which you can write handlers to trigger the actions;
however, since all events in Edge Animate are either linked to active user interac-
tion or the Timeline itself, there is no guarantee that the action will be regularly
executed. The
update
event of the Timeline is probably the most obvious event
for implementing such a scenario. The only catch is that the Timeline must be
actually played so that the event is run. If you pause the Timeline on which the
event is registered, the event will not execute. However, since we are working
with JavaScript, as soon as we start to place code in Edge Animate, we have
the full functionality of JavaScript available. We can use the global function
setInterval()
to define another function that should execute in a user-de-
fined interval—and one that is not dependent on the state of the Timeline.
The following example illustrates the use of an interval through an Edge clock
that displays the current time using three bars. The lengths of the bars represent
hours, minutes, and seconds, respectively. We will use an image that was previ-
ously created in Photoshop.
