Anleitung für Animierte PNG

[luckygirl77]

Erstmal vorweg, diese Browser können derzeit animierte PNG darstellen:

• Mozilla Firefox
  
• Opera
  
• Google Chrome (hier per Addon, siehe hierzu Chrome APNG Addon)
  

Hier noch eine Liste von unterstützen BrowserVersionen (der Link zum ChromeAddon ist hier auch nochmal zu finden):

http://caniuse.com/apng

Hiermal mein animierter ProjektPlatinBanner (damit ihr seht, wie das dann aussieht. Das Bild ändert sich alle 5,5 Sekunden):

Als Tools werden benötigt (damit getestet) :

• Gimp 2.8
  
• RealWorld-Paint 2013.1
  

Anleitung für Erstellung von APNG Dateien:

1. Mit Gimp normales Projekt erzeugen (mit Ebenen usw) und als .gfx abspeichern
   
2. Das Projekt in Gimp so einstellen, dass man das Bild so sieht, wie es dann als Einzelbild der Animation aussehen soll
   
3. Bild exportieren in ein .PNG mit entsprechendem Namen (ich hatte diese dann immer exportxxx genannt)
   
4. Punkt 2+3 sooft ausführen, wieviele Einzelbilder man haben möchte
   
5. .gfx-Datei mit RealWorld-Paint öffnen
   
6. Unter dem Menüpunkt "Create" gibt es die Option "Create Animation". Diese ausführen und ok bestätigen und offen lassen.
   Nennen wir diese neue Datei mal "Arbeitsdatei". An dieser Stelle noch nichts speichern in der Arbeitsdatei !
   
7. .gfx-Datei schliessen
   
8. Exportiertes .PNG Bild mit RealWorld-Paint öffnen
   
9. im geöffneten PNG-Bild unter dem Menüpunkt "Edit" die Option "Copy layers" ausführen.
   
10. in der Arbeitsdatei (mit RealWorldPaint) im unteren Bereich (Laufleiste für die Einzelbilder) die Option "Paste animation frames" ausführen.
    
11. Punkte 8-10 für alle exportierten PNG Dateien ausführen.
    
12. in der Arbeitsdatei in der Laufleiste der Einzelbilder das erste Bild löschen (ist noch von der Erstellung)
    
13. in der Arbeitsdatei hat sich die Anzeige von PNG zu GIF Image geändert. Jetzt speichern wir das erste Mal ab, aber bitte unter "Save as..." und dort bei "Files of type" Animated PNG Files auswählen, Filenamen festlegen und ok drücken
    
14. Nun kann man noch den Zeitrahmen für die Bildwechsel einstellen. Hierzu unter dem Meüpunkt "Animation" die Option "Change animation speed..." ausführen. Leider kann man hier nur per Slider die Werte prozentual ändern (aber mit Preview-Vorschau) und nach dem Bestätigen sieht man dann unter den Einzelbildern die neue Zeit (standardmässig sind 100ms eingetragen).
    
15. Punkt 14 kann sooft genutzt werden, wie man benötigt, um die Zielzeit zu erreichen. Ich mache immer (-100)+(-100)+(-90) und erhalte dadurch 5572 ms
    
16. Arbeitsdatei abspeichern und Fertig !
    

Wenn ihr mehr sehen wollt, in meinem Platinprojekt habe ich noch 2 Startposts mit mehreren APNG-Dateien:

APNG Platinbanner Liste #1

APNG Platinbanner Liste #2

[Trophäensammler]

Super Anleitung, danke dir, wird bestimmt für den ein oder anderen Hilfreich sein (inklusive mir)