Cycler

Page Element Cycler

A Cycler provides the ability to cycle through sprites on touch or click.

Properties

• type [String] - value is always "Cycler" for a Cycler Element
• x [Number/String] - x coordinate of the top-left hand corner of the cycler. This can be either a number (e.g. 10) which will be considered a percentage, a string with percentage (e.g. 10%), or a string with pixels (e.g. 75px)
• y [Number/String] - y coordinate of the top-left hand corner of the cycler. This can be either a number (e.g. 10) which will be considered a percentage, a string with percentage (e.g. 10%), or a string with pixels (e.g. 75px)
• content [Array] - array of sprites which will be be displayed one after another on touch

###Example JSON Config Definition { type: "Cycler", content: [ { type: "Sprite", id: "tower2", x: "178px", y: "316px", numFrames: 12, frameDelay: 6, url: "images/tower-top-2.png" }, { type: "Sprite", id: "tower3", x: "178px", y: "316px", numFrames: 14, frameDelay: 2, url: "images/tower-top-3.png" } ] }

###Examples

• See Example Storybook Page 20
• Example Screenshot (Example Storybook Page 19 and 20)

• Example Sprites

Technical

• Filename - cycler.js
• JavaScript Object - PBS.KIDS.storybook.cycler
• Object Parameters -- GLOBAL -- PBS -- options