Graphics Reference
In-Depth Information
Figure 5.29
Using the JavaScript interval, repetitive
actions can be executed independently
of the Timeline
1.
New Edge Animate project •
First create a new Edge Animate project as
usual and name it “Edge Clock.” The supplied background image is 740 px
wide and 400 px high. Set the dimensions of the Stage in Edge Animate so
that the background image fills the entire composition.
2.
Create bars •
Next, create the three bars to display the hours, minutes, and
seconds. To have the bars exactly fit into the rounded area, use the Rounded
Rectangle Tool to create rectangles with rounded corners. Select this tool
from the top Tools panel and draw a rectangle on the Stage. Assign the
shape with a width of 400 px and a height of 16 px. After you have given the
bar any fill color, work on the rounded corners. Since all corners should look
the same, select “1” in the Corners section on the Property panel for rounded
corners. Now enter the value “12” next to the grid square below to set the
rounding for all four corners simultaneously. Since we need a total of three
bars, duplicate the bar twice with the Edit menu, selecting Duplicate. Since
we will later want to address each of the bars in our script, it helps to give
them each unique, identifying names. Use the following names in descend-
ing order to name the bars:
hoursBar,
minutesBar
, and
secondsBar
.
Now the bars will be stored under the defined names as DIV containers in
the DOM, to be accessed later.
