9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<div class="intro">
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff <p>This example shows how to use a `Dial` widget to animate an image sprite.</p>
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff <p>Drag the `Dial` handle, or use the keyboard arrow keys to see the duck image "animate".</p>
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<div class="example yui3-skin-sam">
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff {{>duck-source}}
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<h3>The Image Sprite</h3>
d4ae1f0870fe4d4a0c3fdc83899f15f7efbb9b55Jeff Conniff<p><img src="{{{componentAssets}}}/images/sprite_duck.jpg" width="676" height="33"/></p>
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<h3>The Markup</h3>
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<p>The `<div id="duck"></div>` element will have the sprite as its background-image.
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<p>The `<div id="demo"></div>` element will contain the dial.</p>
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff {{>duck-markup}}
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<h3>The JavaScript</h3>
090376d4be54e832a15be873e1561b95d3e94e0aJeff Conniff<p>The `stepsPerRevolution` attribute of the `Dial`
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniffis given a value equal to the number of frames in the sprite.
9466688e9d5a5faa85464204338f3da699b200aaJeff ConniffOn `valueChange` of the `dial`, the `background-position` of `<div id="duck">`
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniffis changed to a new multiple of the
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniffwidth of one frame in the sprite.
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff{{>duck-script}}
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff<h3>Complete Example Source</h3>
9466688e9d5a5faa85464204338f3da699b200aaJeff Conniff{{>duck-source}}