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

[LaurenDoubleU]

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.

[KanikaS]

Moving to Adobe Animate CC - General​

[ClayUUID · Accepted solution]

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]

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.

[LaurenDoubleU]

...and to clarify further, I was not wanting to bypass animate cc. Was merely seeing what my options were for incorporating more complex animations into animate cc, rather than building everything in animate cc since Im mainly using animate cc as a vehicle for creating the interactive content. For the project I am working on, some animations are created in After Effects (which is what we normally use for creating 2d animations). We wanted to bring in those animations but not as a video (which comes with its own set of issues in animate cc)  but as looping animated sequences. So we knew creating gifs could be one way to do this, but then the transparency issue came up, so we decided to try out testing out the apng format as an option. Also, I know a lot of the complexity in certain animations that we are creating can also be done in code, but we are still on a learning curve with that as well. Anyhow, thanks again for the timely response.

[marjantrajkovski]

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]

Thank you! Ill give this a try.

[marjantrajkovski]

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

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