Figure 1.
The main goal of this example is to show how to use some of the animated image InterWidgetCommunication methods. This example uses an animated image (Runner), two groups of radio buttons, and a function button. The first group of radio buttons set the href method of Runner to alter the speed of transition from one frame to another. The second group of radio buttons set the href method of Runner to change the direction in which the frames of Runner are played. The function button will be explained in a later example. Here is a snapshot of what the html page looks like in a "WYSIWYG" tool:
Figure 1.
To create a group of three radio buttons (Slow), (Normal), and (Fast) that alter the speed of Runner, the following is used:
<APPLET CODE="RadioButton.class" WIDTH="101" HEIGHT="20" NAME="Slow">
<PARAM NAME="href" VALUE="Amulet:document.Runner.slowSpeed()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="Slow">
<PARAM NAME="initialCondition" VALUE="off">
<PARAM NAME="groupName" VALUE="rgSpeed">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
<APPLET CODE="RadioButton.class" WIDTH="101" HEIGHT="20" NAME="Normal">
<PARAM NAME="href" VALUE="Amulet:document.Runner.regularSpeed()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="Normal">
<PARAM NAME="initialCondition" VALUE="on">
<PARAM NAME="groupName" VALUE="rgSpeed">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
<APPLET CODE="RadioButton.class" WIDTH="101" HEIGHT="20" NAME="Fast">
<PARAM NAME="href" VALUE="Amulet:document.Runner.fastSpeed()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="Fast">
<PARAM NAME="initialCondition" VALUE="off">
<PARAM NAME="groupName" VALUE="rgSpeed">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
The behavior of Runner is not altered until one of the radio buttons in either group is selected. Slow adjusts the playback of Runner to slow by using the href function Amulet:document.Runner.slowSpeed(). Normal adjusts the playback of Runner to normal by using the href function Amulet:document.Runner.regularSpeed(). Fast adjusts the playback of Runner to fast by using the href function Amulet:document.Runner.fastSpeed().
To create a second group of two radio buttons (Backwards) and (Forwards) that alter the direction in which Runner is played, the following is used:
<APPLET CODE="RadioButton.class" WIDTH="101" HEIGHT="21" NAME="Backwards">
<PARAM NAME="href" VALUE="Amulet:document.Runner.playBackwards()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="Backwards">
<PARAM NAME="initialCondition" VALUE="off">
<PARAM NAME="groupName" VALUE="rgDirection">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
<APPLET CODE="RadioButton.class" WIDTH="101" HEIGHT="21" NAME="Forwards">
<PARAM NAME="href" VALUE="Amulet:document.Runner.playForward()">
<PARAM NAME="fontSize" VALUE="2">
<PARAM NAME="fontStyle" VALUE="bold">
<PARAM NAME="label" VALUE="Forward">
<PARAM NAME="initialCondition" VALUE="on">
<PARAM NAME="groupName" VALUE="rgDirection">
<PARAM NAME="buttonAlignment" VALUE="left">
</APPLET>
Backwards adjusts Runner to play backwards by using the href function Amulet:document.Runner.playBackwards(). Forwards adjusts Runner to play forward by using the href function Amulet:document.Runner.playForward().
NOTES: