Graphics Reference
In-Depth Information
When using interactivity in your Edge Animate composition, three components
come into play: actions (scripts), triggers, which we introduced in the last chapter,
and events. Events are similar to triggers, but with one fundamental difference:
events depend on external circumstances rather than simply taking place at a
specific time. They can be initiated by the system user or by internal processes. If
you want reactions to external occurrences, events are the right approach.
An interaction has two basic parts: the action that should actually happen,
and the point in time at which the action should happen. Edge Animate offers
many actions through the Edge Animate API. The Edge Animate API is based on
the popular JavaScript jQuery library, making it easy to add extensions.
.
Browser Console
The console of a browser can receive
simple test messages sent from the
currently open web page. These
provide abstract information on
the inner life of an Edge Animate
Composition.
5.1 Simple Logging
Before we explore scripting in Edge Animate, let's first have a look at logging. A
typical procedure for creating interactivity is logging calls, which is similar to set-
ting traces. To do this, you send simple text messages to the browser's console
to ensure that the code is called at the right time. This procedure is especially
well established in the Flash world. For simple interactions, you don't necessarily
need to use this method. However, logging is helpful with complex and nest-
ed user interactions that can happen asynchronously. The following example
gives a basic idea of the JavaScript
console.log()
method in a sample Edge
Animate composition.
We can assume that the composition itself will send a message to the brows-
er's debugging console as soon as it is loaded (
compositionReady
event). In
addition, there are two buttons that also send a message to the console via
console.log()
when the buttons are clicked.
The following code example is meant to give a rough understanding of log-
ging. For instructions on how to actually create such code, see 5.5.11. Suppose
we write the following comments in the relevant events:
//Log statement in compositionReady event
console.log ( "Composition is ready");
.
Comparison to Flash
Calling
console.log()
is rough-
ly equivalent to using the
trace()
function from the Flash world; this
is often used for Flash movies with
complex interaction, for better
understanding interconnections.
//Log statement click event of the first button
console.log ( "First button was clicked." );
//Log statement click event of the second button
console.log( "Second button was clicked." );
