Search
Clear search
Close search
Google apps
Main menu

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:

  1. Open the Components panel, then the Miscellaneous folder.
  2. Drag the Sprite Sheet component to the stage.
  3. In the Sprite Sheet properties section of the Properties panel, configure the component by setting its properties (described below).

Properties

Property Description
Name The component name.
Source The URL for the image that's used as a sprite sheet.
Clipping options
X Offset The offset, in pixels, from the left side of the sprite sheet to either:
  • the left edge of the specific image you want to use from the sprite sheet
  • the left edge of the first sprite image you're using to create an animation
Y Offset The offset, in pixels, from the top of the sprite sheet to either:
  • the top edge of the specific image you want to use from the sprite sheet
  • the top edge of the first sprite image you're using to create an animation
Frame width The width, in pixels, of either:
  • the specific image you want to use from the sprite sheet
  • the first sprite image you're using to create an animation
Frame height The height, in pixels, of either:
  • the specific image you want to use from the sprite sheet
  • the first sprite image you're using to create an animation
Alignment

Determines the position of the image within its container:

  • center
  • bottom
  • bottom left
  • bottom right
  • left
  • right
  • top
  • top left
  • top right
Scaling

Determines how various sized images are displayed within the component:

  • Resize image to fit
  • Crop image to fill
  • None
  • Stretch image to fill

Advanced properties

Click the expand icon  next to Advanced properties in the component properties pane to edit the following properties:

Property Description
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 the animation repeats. Set to 0 to make the animation repeat forever.
Autoplay When checked, the animation plays automatically.
End on frame one When checked, the animation will end on the first frame after the last loop.
Reverse When checked, the animation plays in reverse.

Events

Events can be used to trigger other actions in your ad. The Sprite Sheet component sends the following events:

Event Description
Animation ends Sent when the animation ends.
Animation pauses Sent when the animation is paused.
Animation plays Sent when the animation starts to play.
Animation restarts Sent when the animation restarts.

Actions

The following Sprite Sheet component actions can be triggered by other events:

Action Configuration options
Defines a new animation
X Offset The offset, in pixels, from the left side of the sprite sheet to either:
  • the left edge of the specific image you want to use from the sprite sheet
  • the left edge of the first sprite image you're using to create an animation
Y Offset The offset, in pixels, from the top of the sprite sheet to either:
  • the top edge of the specific image you want to use from the sprite sheet
  • the top edge of the first sprite image you're using to create an animation
Width Clip The width, in pixels, of either:
  • the specific image you want to use from the sprite sheet
  • the first sprite image you're using to create an animation
Height Clip The height, in pixels, of either:
  • the specific image you want to use from the sprite sheet
  • the first sprite image you're using to create an animation
Frames The number of frames that make up the animation.
Duration The duration of each frame, in milliseconds.
Loops The number of times the animation repeats. Set to 0 to make the animation repeat forever.
Autoplay When checked, the animation plays automatically.
Reverse When checked, the animation plays in reverse.
Plays the animation Starts the animation from its current stopped or paused location.
Pauses the animation Pauses the current animation.
Toggles the animation state Toggles the animation between play and pause.
Restarts the animation Starts the animation from the first frame.
Shows the previous frame Shows the previous frame in the series.
Shows the next frame Shows the next frame in the series.
Show frame Shows frame identified by frame number.

Preview

Components can't be previewed inside the Google Web Designer interface. To see the component in action, preview your ad in your preferred browser.

Was this article helpful?
How can we improve it?