Skip to main content
LaurenDoubleU
Inspiring
April 9, 2018
Answered

Animate CC question: Is it possible to import an animated png and have it play like a gif in the browser?

  • April 9, 2018
  • 3 replies
  • 4254 views

Ive seen that it is possible to export png sequences but I have not seen anything posted as to whether animated pngs can be handled in the same way gif's are handled as an imported gif. Ive been able to import gifs and they play correctly in the browser , but when I import a png that is an animated png, Animate CC treats it as a static png image. Im wondering if that is because png's are treated as bitmap images.

This topic has been closed for replies.
Correct answer ClayUUID

LaurenDoubleU  wrote

Im wondering if that is because png's are treated as bitmap images.

PNGs are bitmap images. So are GIFs and JPEGs.

As for animating them, there's technically no such thing as an animated PNG. What you have is either a MNG or an APNG. Either way, Animate clearly doesn't support their animation features.

What you'll have to do is convert whatever your file is to an image sequence. Then convert that to an animated GIF and skip Animate entirely if that's all you're after.

https://ezgif.com/apng-to-gif

3 replies

Inspiring
April 9, 2018

Example of code in Actions

var apng = document.createElement("img");

apng.setAttribute("src", "image.png");

apng.setAttribute("width", "100");

apng.setAttribute("height", "100");

var container = document.getElementById("dom_overlay_container");

container.appendChild(apng);

LaurenDoubleU
Inspiring
April 9, 2018

Thank you! Ill give this a try.

Inspiring
April 10, 2018

If you want it under canvas, give stage transparent background and place code on Actions

document.getElementById("dom_overlay_container").style.zIndex = "-1";

ClayUUIDCorrect answer
Legend
April 9, 2018

LaurenDoubleU  wrote

Im wondering if that is because png's are treated as bitmap images.

PNGs are bitmap images. So are GIFs and JPEGs.

As for animating them, there's technically no such thing as an animated PNG. What you have is either a MNG or an APNG. Either way, Animate clearly doesn't support their animation features.

What you'll have to do is convert whatever your file is to an image sequence. Then convert that to an animated GIF and skip Animate entirely if that's all you're after.

https://ezgif.com/apng-to-gif

LaurenDoubleU
Inspiring
April 9, 2018

Thanks for the clarification. I assumed as much, but I wanted to verify since I am relatively new to Animate CC.  The point of why I want to use  an apng as oppoosed to a gif format, is that the apng  format supports more colors and semi-opaque transparencies. Gifs, from what I understand, cannot be exported with full alpha transparency where if an area of the image is semi-transparent , that area will not be rendered as transparent. Seems like Ill just have to import png sequences and loop them in the timeline. Thanks again.

Kanikas
Community Manager
Community Manager
April 9, 2018