PNG Sequences

[racha...@trailerpark.com]

When viewing HTML5 banners with video on a tablet or mobile, there is an automatic mandate to "click for video" instead of autoplay video. To avoid the user having to click into the ad, to see the video, I'd like to play a png sequence instead. How would i load in a png sequence using GWD?

Thanks!

[San Khong]

Hi Rachael,

Currently there's no direct support for that in GWD.  We're hoping to get frame by frame animation by setting the background-image in the CSS panel for each keyframe soon so stay tuned for that!  Currently you cannot use CSS panel to modify the properties of the element on a keyframe.

You can also convert your video to animated gif and use it as an image in GWD.

For now, there's a way to achieve frame by frame animation with a little bit of hand-coding required but it's super easy to do.  I'm attaching the file created in GWD so you can check it out.

Here's how the workaround works:

1. In the Timeline Advanced mode, draw a div and insert a keyframe for each PNG that you'd like to use.  You might want to put the keyframes close together or play around with the duration to get the animation close to a video.

2. Put all your PNG in the same directory or relative to the HTML.

3. Switch to code view and edit each keyframe to add

background-image: url(image.png);

4. Preview and you should see the frame by frame animation play PNG sequence.

Hope it helps!

San

GWD Team

[racha...@trailerpark.com]

Last time i asked there was no direct support for adding PNG sequences in GWD, you cannot use CSS panel to modify the properties of the element on a keyframe. Is this still the case or has an update been made in the latest version to support getting frame by frame animation by setting the background-image in the CSS panel for each keyframe?

Please advise. Thanks!

[San Khong]

Rachael,

We still have not had that support in GWD.  Sorry about that.

San

[er...@kobe.be]

One year later... Still in the pipeline?

[Jaz]

Hi Erik,

We will have an update for this very, very soon :-) Please stay tuned!

thx
jaz
Program Manager, Google Web Designer

[San Khong]

Hi Rachael,

We still have not had support for CSS keyframe.  However, in the latest release of GWD, 1.5.0, you can use Spritesheet component to create PNG sequences.  Please check it out.

Video on Spritesheet component: https://www.youtube.com/watch?v=LPVVIrSPLu4

Help doc: https://support.google.com/webdesigner/answer/6317541?hl=en

Thanks,

San

GWD Team

[jerr...@gmail.com]

Hi.. is this feature supported on Adwords?

[Jaz]

Hi Jerry,

Yes, AdWords has added support for the Spritesheet component!

[jerr...@gmail.com]

Thanks.. i've tried building with spritesheet.. it works well!

[Jaz]

Woohoo! Thanks for letting us know!