Adding Transitions (Windows Embedded CE 6.0)

1/6/2010

By using transitions, Web designers can easily implement visual effects on their Web pages by using HTML and simple script code. Transitions are useful when you want to display content on a page progressively. For example, you can use transitions in a slide show to move from one slide to the next.

The following table shows the supported transitions in Windows Embedded CE with a description of the purpose of each.

Transition	Description
RandomBars	Reveals new content of the object by exposing random lines of pixels.
RandomDissolve	Reveals new content of the object by exposing random pixels.
Fade	Reveals new content of the object by fading out the original content.
Pixelate	Reveals the new content of the object by displaying it as colored squares that take the average color value of the pixels that they replace.

To implement a transition effect on an object

1. Define the object and specify the desired transition.

   1. Set the DIV ID attribute and define the layout for the image by setting the Style attribute. The following code shows how to set the height, width, and background properties for the image.

      <DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold;
      

   2. Apply the Fade transition and set the duration of the effect. The following code shows how to specify the transition and the duration of the effect.

      filter:progid:DXImageTransform.Microsoft.Fade(duration=2);">
      

2. Write a function to start the transition within <SCRIPT>...</SCRIPT> tags.

   The following code implements an example function, fnApplyFade, that toggles the background color from "gold" to "blue" and finishes the transition by calling the play (Internet Explorer) method.

   //Declare a Boolean variable to store transition state.
   var bToggle = 0;
   fnApplyFade()
   {
     //Apply the transition without causing an immediate repaint, 
     //by calling the  method. 
     oDiv.filters[0].Apply();
     //Implement the necessary transition changes. 
     if (bToggle)
     {
       bToggle = 0;
       oDiv.style.backgroundColor="gold";
     }
     else
     {
       bToggle = 1;
       oDiv.style.backgroundColor="blue";
     }
     //Call the  method to complete the transition.
     oDiv.filters[0].Play();
   }
   

3. Call the function. The following example code invokes the transition effect by calling the fnApplyFade function in the onclick event of a button.

   <BUTTON onclick="fnApplyFade()">Toggle Transition</BUTTON><BR/><BR/>
   

See the output.

For more information about the supported transitions, see this Microsoft Web site.

See Also

Concepts

Adding Filters and Transitions