Create and instantiate the target object you wish to animate. For the purpose of this exercise, we will animate the opacity of a box.

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

<window xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"
  s:height="200" s:width="200" s:top="center" s:left="center"
  translucent="true" >

<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"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"  >

  <style target="opacityDemoBox" s:height="200" s:width="200"
    s:fill="green" s:opacity="50" >

</library>

  <vbox id="opacityDemoBox" />

</window>

Define the animation for the target object by adding an animation element to the library node of the XML file. The 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"?>

<window xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"
  s:height="200" s:width="200" s:top="center" s:left="center"
  translucent="true" >

<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"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"  >
 
  <animation id="myOpacityAnimation">
    <animate name="opacity" type="style" dur="250ms" from="before"
        to="100%"/>
   </animation>

  <style target="opacityDemoBox" s:height="200" s:width="200"
    s:fill="green" s:opacity="50" />

</library>

  <vbox id="opacityDemoBox" />

</window>

Reading through the markup, we see that the animation has the id attribute of myOpacityAnimation and that the animator is contained in the animation. The animator targets the opacity property using name="opacity" and animation type="style". The duration, dur="250ms", is 250 milliseconds (.25 seconds), and the animation starts with the current state of the box, and then animates the opacity to 100% over 250 milliseconds.

Associate the animation with the target object by adding an attribute element to the style element for the target. The code shown below in bold demonstrates how to do this.

<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"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"  >

  <animation id="myOpacityAnimation">
    <animate name="opacity" type="style" dur="250ms" from="before"
        to="100%"/>
   </animation>

  <style target="opacityDemoBox" s:height="200" s:width="200"
    s:fill="green" s:opacity="50" > 
    <attribute name="boxAnimate" animate="url(#myOpacityAnimation)" />
  </style>

</library>

Create a JavaScript file containing a function that triggers the animation by setting the boxAnimation attribute equal to true.

function onEnter()
{
  var box = scene.getBoxById("opacityDemoBox");
  box.setAttribute("boxAnimate", "true");
}

The setAttribute function takes two arguments: the name of the attribute to be set and the new value for the attribute.

In the .box file that describes your scene, incorporate the JavaScript file you created in step four and then add event handling to call the JavaScript function when the desired event occurrs (in this case, we'll listen for the mouseOver event). The 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"?>


<window xmlns="http://www.aol.com/boxely/box.xsd"
  xmlns:s="http://www.aol.com/boxely/style.xsd"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"
  s:height="200" s:width="200" s:top="center" s:left="center"
  translucent="true" >
 
<code id="main" language="jscript" src="appendixAnimation_1.js"/>

<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"
  xmlns:on="http://www.aol.com/boxely/reaction.xsd"  >


  <animation id="myOpacityAnimation">
    <animate name="opacity" type="style" dur="250ms" from="before"
      to="100%"/>
   </animation>

  <style target="opacityDemoBox" s:height="200" s:width="200"
    s:fill="green" s:opacity="50" >
    <attribute name="boxAnimate" animate="url(#myOpacityAnimation)"/>
  </style>

</library>

  <vbox id="opacityDemoBox"  on:mouseOver="onEnter();" />

</window>

Now, when you run your scene and mouse over the box, the opacity will be animated.