Adobe Animate APNG Export

Der Browser-Support für animierte PNG Dateien ist inzwischen so gut, sodass Animationen, die mit Animate CC angefertigt wurden, mit einfachen Mitteln zu APNG exportiert und dann in einem simplen <img>-Tag in eine Webseite eingebaut werden können. Dies stellt eine einfache und qualitativ gute Alternative zum Veröffentlichungsweg in Animate CC, der JavaScript erzeugt, dar. Nachfolgend sind die Schritte beschrieben, die man dazu tun muss.


Zunächst exportiert man die *.fla-Datei in einzelne PNGs. Dazu geht man in Animate CC auf Exportieren > Video/Medien exportieren... und wählt die folgenden Einstellungen:

Benötigt man Transparenz, aktiviert man zusätzlich die Option Bühnenfarbe ignorieren (Alphakanal erzeugen) und wählt bei Voreinstellung PNG Sequence with Alpha (Match Source) statt PNG Sequence (Match Source) aus. Nun können wir die PNGs mit Hilfe von apngasm kombinieren. Dazu installieren wir zunächst die neueste Version:

13dbdbc4733c2b99696c0d267d9721fa

Schließlich fügen wir die einzelnen Dateien zusammen:

13dbdbc4733c2b99696c0d267d9721fa

Die Geschwindigkeit sowie die Anzahl der Wiederholungen der Animation können über die Parameter delay und loops gesteuert werden. Um eine Animation rückwärts zu exportieren, führen wir vor dem Merge zusätzlich folgenden Befehl aus, der die Dateien in umgekehrter Reihenfolge ablegt:

13dbdbc4733c2b99696c0d267d9721fa

Zurück