Section 6.3. Summary

6.3. Summary

This chapter covered Atlas behaviors such as click and hover, as well as Atlas components , which, as you learned, can be referenced using xml-script. Although controls are implemented internally in JavaScript, xml-script provides a declarative way to add functionality to your controls and web site.

6.4. For Further Reading

http://aspadvice.com/ blogs /garbin/archive/2006/01/23/14786.aspx: A custom Atlas behavior for handling a context menu
http://aspadvice.com/blogs/garbin/archive/2006/02/25/15360.aspx: A custom Atlas behavior to raise a text change event when the user pauses while typing
http://atlas.asp.net/quickstart/atlas/doc/controls/default.aspx: Quick-start tutorial for components and behaviors

Chapter 7. Animations

Nifty transitions between pages or elements make for nice eye candy , but they're tricky to implement and are achieved with a variety of transformations. For instance, visual changes in an element's opacity or position can be accomplished by gradual shifts in the number value of the element, thus animating the change. For instance, a number going from 0 to 100 can be used as the opacity value of an element, and used to animate a change in appearance from transparent to opaque .

Luckily, Atlas comes with several built-in animations. They are all defined in the AtlasUIGlitz.js library. Currently, Internet Explorer DirectX filters are used for the animations; these filtersobviouslyonly work with the Microsoft browser. However, the animations described in this chapter also work on other browsers like the Mozilla brands. And even if some browsers do not support some of the animations, seeing as they are only eye candy, there should be no vital information lost because of this limitation.

In this chapter, you'll learn how to use Atlas animations to change an element's position and opacity. You will also learn which type of animations exist and how they work.

7.1. Using Animations

Since the animations reside in an external library, the AtlasUIGlitz.js file must be included manually in any page that uses them. There are several possibilities for including this file. Probably the best way is to add an Atlas ScriptReference element, as shown in the following snippet:

<atlas:ScriptManager runat="server" ID="ScriptManager1">
  <Scripts>

<atlas:ScriptReference ScriptName="AtlasUIGlitz" />

</Scripts>
</atlas:ScriptManager>

Table 7-1 lists the animations implemented in the AtlasUIGlitz.js file.

Table 7-1. Animations included in AtlasUIGlitz.js library

Animation	Description
`Sys.UI.PropertyAnimation`	Animates a property (e.g., the position) of an element
`Sys.UI.InterpolatedAnimation`	Animates a value and interpolates (calculates) the intermediate animation steps
`Sys.UI.DiscreteAnimation`	Animates a value over a list of values
`Sys.UI.NumberAnimation`	Animates a number
`Sys.UI.ColorAnimation`	Animates a color
`Sys.UI.LengthAnimation`	Animates a number and rounds every intermediate step to a whole number
`Sys.UI.CompositeAnimation`	Aggregates several animations in one
`Sys.UI.FadeAnimation`	Animates the opacity of an element

All of these animations can be used declaratively in xml-script, and most of them can also be accessed programmatically. You'll learn to use both techniques in the following examples.

Every animation has a play() method that starts the animation. The method internally uses a couple of properties defined in the class. The following three properties are the most useful ones:

_duration: How long the animation will take (in seconds)
_fps: The number of animation steps ( frames ) per second
_target: The target element of the animation

Whenever a step of the animation is executed, the setValue() method is called; what it does is up to its implementation. This method can be implemented by each animation, or else the setValue() method of the base animation class in Sys.UI.Animation is used. Depending on the animation, the method's implementation involves quite sophisticated calculations or just jumps to the next element in an array.

For alpha transparency (a graphical concept defining degrees of transparency, which enables effects like semitransparency), Internet Explorer uses the DXImageTransform.Microsoft.Alpha DirectX filter, whereas other browsers, such as Mozilla, Firefox, etc., have built-in support.

Flylib.com

Category list

Similar pages