In this exercise, you'll learn how to add two animations to the titleArea gadget: titleAnimate and titleUnanimate. When the mouse first hovers over the title part of the gadget, titleAnimate plays, changing the color of the title; it will play as long as the mouse remains hovered over the title. When the mouse is no longer hovered over the title, titleUnanimate runs to reset the title to its original color.

To complete the exercise, follow these steps:

Step 1: Animating the title part of the titleArea gadget

To animate the title of the titleArea gadget, you must edit titleAreaGadgets.box to:

The following code, shown below in bold, demonstrates how to do this:

<?xml version="1.0" encoding="utf-8" ?>
<?import href="box://ocpToolkit/content/core/coreGadgets.box"?>
<?import href="box://ocpToolkit/theme/default/toolkit.box"?>

<library xmlns="http://www.aol.com/boxely/resource.xsd"
  xmlns:box="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd">

  <gadget id="titleArea" language="jscript"
        code="titleAreaGadgets.js" >
    <script id="common" language="jscript"
        href="../../common/common.js" />
    <parts>
      <box:label id="title" value="My To Do List"/>
      <box:label id="dateTime" value="Date/Time: 00/00/0000 12:00:00 PM" />
    </parts>
    <behavior>
      <reaction event="initialized" action="gadget:onInitialized();" />
    </behavior>
  </gadget>
  <style tag="titleArea" orient="vertical" height="64" hAlign="center"
    vAlign="center">
    <part name="title" margin="0" padding="0 4 2 4" fontFamily="ITC Highlander Book" fontSize="18pt" >
      <state name="hovered" animate="url(#titleAnimate)" animateExit="url(#titleUnanimate)" />
    </part>
    <part name="dateTime" margin="0" padding="0 4 2 4" fontFamily="Arial" fontSize="12pt"/>
  </style>
 
  <animation id="titleAnimate" repeatCount="indefinite">
    <animate name="textColor" type="style" from="black" to="red" begin="0ms" end="500ms"/>
    <animate name="textColor" type="style" from="red" to="green" begin="500ms" end="1000ms"/>
    <animate name="textColor" type="style" from="green" to="blue" begin="1000ms" end="1500ms"/>
    <animate name="textColor" type="style" from="blue" to="black" begin="1500ms" end="2000ms"/>
  </animation>

  <animation id="titleUnanimate" repeatCount="0">
    <animate name="textColor" type="style" from="before" to="black" begin="0ms" end="1000ms"/>
  </animation>
</library>

This is how the above code works:

The titleAnimate animation includes four animate tags that change the textColor attribute of the target text. The first tag changes the color of the text from black to red over a time interval of 500 milliseconds. The second tag changes the color of the text from red to green over a time interval of 500 milliseconds. The third tag changes the color of the text from green to blue over a time interval of 500 milliseconds. The fourth tag changes the color of the text from blue, back to black.

The titleAnimate element's repeatCount attribute is set to "indefinite", causing the animation to repeat indefinitely.

The titleUnanimate animation includes an animate tag that changes the color of the text from "before" to black over a time interval of 1000 milliseconds. The value "before" tells Boxely to use the current color of the text, whatever it may be.

The titleUnanimate element's repeatCount attribute is set to 0, so the animation only plays once and does not repeat.

The animations are associated with the target object through the style element. Within the style element, the state element's animate attribute tells the Boxely UI Toolkit to play titleAnimate when the user enters the "hovered" state (that is, when the user places his or her mouse over the title part of the titleArea gadget) and the animateExit attribute tells the Boxely UI Toolkit to play titleUnanimate when the user exits the "hovered" state.

Step 2: Testing the application

Now, when you run your application and place the mouse over the title part of the titleArea gadget, the titleAnimate animation should play. When the mouse "unhovers" over the title part, titleUnanimate should play, changing the color of the title back to its original value.