Sprite is a small image, that flies over the page and in addition to a window behaviors has its own motion methods and animation effects (such as "shake" effect). A sprite control extends QWndCtrl and inherits all its properties and methods. Being basically a window, sprite can be assigned transitions as it's shown in the example.

A sprite control has a buffer that stores an image. Normally the buffer contains the actual image that's currently displayed by the sprite. But it's not the case when the sprite gets reloaded (see load method). After it's reloaded, new image starts loading into the buffer and valid property turns to false. That means that the sprite displays another picture than stored in the buffer. When show method is invoked for a not-valid sprite, it gets validated, i.e. its appearance is updated according to the image actually stored in the buffer and after this valid property turns back to true.

For details of cross-browser support refer to Implementation Notes to QWndCtrl class.

QWndCtrl, Windowing

QSprite(parent, name, x, y, width, height, src, visibleopt, effectsopt, opacityopt, zindexopt)

Creates new sprite. If the sprite is created as a child control, valid parent object must be specified. If the sprite is assigned to global variable, parent should be null. The name should be the same as the name of variable or property that has been assigned by newly created object. Parameters parent - Parent control (if any, null otherwise). name - The object reference name. x, y - Coordinates of the top left corner in pixels. width - The sprite width in pixels. height - The sprite height in pixels. src - URL of the image to show. visible - Optional initial visibility. By default the sprite is visible. effects - Optional effects mask. By default the sprite is created with no effects. For complete list of effects refer to QWndCtrl page. opacity - Optional opacity from 0 to 100. Default value is 100 that corresponds to 100% opaqueness. zindex - Optional stacking order. If you need the browser to select it automatically let this parameter be null.

Property	Access	Description
cwidth	R	Width in pixels of the sprite.
cheight	R	Height in pixels of the sprite.
valid	R	This property is turned to true when the sprite displays the same image as the one is stored in the buffer.
face	R	An Image object that reflects the offscreen buffer.
Properties inherited from QWndCtrl
x	R	X coordinate of the sprite top left corner (pixels).
y	R	Y coordinate of the sprite top left corner (pixels).
width	R	Width in pixels of the window that contains the sprite.
height	R	Height in pixels of the window that contains the sprite.
visible	R	Current visibility state.
effects	R	Current effects mask.
opacity	R	The sprite opacity from 0 (transparent) to 100 (opaque).
zindex	R	The sprite stacking order. Is null if the sprite is an auto-stacked.
Properties inherited from QControl
name	R	Name of the control. Serves as a direct reference to this object when evaluated.
id	R	Alphanumerical unique identifier of the control.
parent	R	Reference to the parent control (if any, null otherwise).
tag	R / W	Can refer any value or object, tag is always passed to all event handlers as the last parameter.
window	R	This property is a reference to JavaScript window object in which the control exists.
document	R	Refers to document object in which the corresponding HTML elements exist. Normally all elements of a DOM2 compatible browser are children of the top document object. If the control creates new document scope (i.e. printing tags like <IFRAME>, <LAYER>), it should assign this document to this property.

load(src)
Starts loading an image to the offscreen buffer. This method doesn't update the sprite on the screen. It just turns the sprite into not-valid state. Parameters src - URL of the image to load.

show(show)
Shows or hides the sprite. When the sprite is in not-valid state, this method updates it on the screen and turns valid property to true. Parameters show - Desirable state as follows: true - make it visible or validate, false - hide the sprite.

focus()
Gives the focus to the sprite. This brings it to the top of the stacking order.

center()
Centers the window on page.

moveTo(x, y)
Moves the sprite to specified position. This method stops all animations (if any). Parameters x - X coordinate in pixels. y - Y coordinate in pixels.

slideTo(x, y)
Smoothly slides the sprite to specified position. This method stops all animations (if any). Parameters x - X coordinate in pixels. y - Y coordinate in pixels.

shake()
Shakes the sprite around the current position. This method stops all animations (if any).

stop()
This method stops all animations (if any).

setZIndex(z)
Changes the stacking order of the window. Window with higher index appear on the screen first obscuring underlying windows with lower indices. Parameters z - Desirable stacking index (starting from 1).

setOpacity(op)
Changes the window opacity. See Implementation Notes for details and how this method is supported. Parameters op - Desirable opacity as follows: 0 - transparent, 100 - opaque.

setEffects(fx)

Sets effects mask. There're two kinds of effects: static and dynamic. Static effects change the default appearance of the window (for example, a window casts shadow when it's set by QWndCtrl.SHADOW). On the other hand, dynamic effects are transitions that get activated when window changes its visibility state. A dynamic effect can be either "IN" or "OUT". The first type is played when a window appears. The second one is activated on the hiding. Effects of all types can be mixed together to bring up a composite effect (example: "QWndCtrl.SHADOW + QWndCtrl.BOXIN + QWndCtrl.FADEOUT" - makes a window to cast shadow, it appears with "box" effect, hides itself fading out from view). Parameters fx - Mix of effects to apply.

onClick(tag)
This event is fired when the sprite is clicked. Parameters tag - Tag is commonly used to parameterize the event handler. Each control can be optionally assigned by a tag. Returns The return value is ignored.

onShow(visible, tag)
This handler is fired when the window becomes visible or vanishes. When transitions are enabled, the handler is fired after the animation completes. Parameters visible - Visibility state of the window. tag - Tag is commonly used to parameterize the event handler. Each control can be optionally assigned by a tag. Returns The return value is ignored.

CSS Class	Description	Example (defined in a CSS file)
DIV.qwindow	Defines style properties of the window DIV element.	DIV.qwindow { background-color: red } /* sets the window background to red. */