Graphics Reference
In-Depth Information
4.
Adjust the placement of the bars on the background •
Position the bars on
the Stage so that they fit into the lighter grey area on the background im-
age. Since the fixed coordinates in CSS are always at the top left edge of the
element, this position will be retained, even when we dynamically adjust
the width of the element via script in the next step. In this way, the timing
information can be altered to fit the width of the bar via a simple conversion.
Figure 5.32
Background image with bars
5.
Initializing interval at startup •
Since the visual surface of the clock is ready,
you can now turn to its inner workings. First, consider when the interval
should be started. One possibility is an activation switch. In this example,
however, it should start up right at the beginning of the composition. This
is best done with the
compositionReady
event because it is fired once,
as soon as the composition is fully displayed. Click the Open Actions icon
next to the composition name and make sure that no elements have been
selected on the Stage. Now add the
compositionReady
event and fill it in
with the following script to initialize the interval:
// Register Interval
setInterval(update, 1000);
// Function to be called per interval
function update() {
// Code to update Bars
}
