The Sprite Sheet component
The Sprite Sheet component has two major uses. The first is for sprite-style animations, showing individual sprites sequentially as frames. The second is to place several images within one sprite sheet to keep the number of individual image files to a minimum.
To add the Sprite Sheet component to your project:
- Open the Components panel, then the Miscellaneous folder.
- Drag the Sprite Sheet component to the stage.
- In the Sprite Sheet properties section of the Properties panel, configure the component by setting its properties (described below).
|Name||The component name.|
|Source||The URL for the image that's used as a sprite sheet.|
|X Offset||The offset, in pixels, from the left side of the sprite sheet to either:
|Y Offset||The offset, in pixels, from the top of the sprite sheet to either:
|Frame width||The width, in pixels, of either:
|Frame height||The height, in pixels, of either:
Determines the position of the image within its container:
Determines how various sized images are displayed within the component:
Click the expand icon next to Advanced properties in the component properties pane to edit the following properties:
|Number of Frames||The number of frames that make up the animation.|
|Duration||The duration of each frame, in milliseconds.|
|Number of Loops||The number of times that the animation repeats. Set to 0 to make the animation repeat forever.|
|Autoplay||When ticked, the animation plays automatically.|
|End on frame one||When ticked, the animation will end on the first frame after the last loop.|
|Reverse||When ticked, the animation plays in reverse.|
Events can be used to trigger other actions in your ad. The Sprite Sheet component sends the following events:
|Paused||Sent when the animation ends.|
|Ended||Sent when the animation is paused.|
|Play started||Sent when the animation starts to play.|
|Replayed||Sent when the animation restarts.|
The following Sprite Sheet component actions can be triggered by other events:
|Create new animation||
|Play||Starts the animation from its current stopped or paused location.|
|Pause||Pauses the current animation.|
|Toggle animation||Toggles the animation between play and pause.|
|Replay||Starts the animation from the first frame.|
|Go backwards||Shows the previous frame in the series.|
|Go forwards||Shows the next frame in the series.|
|Go to frame||Shows frame identified by frame number.|
Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.