I like to move it - Oder wie erstelle ich animierte GIFs für eine Visu

[HartmutB]

Die Kinokenner werden erkennen, in welchem Film (Tipp: es ist Teil 2) ich gestern mit meinen Kindern war ...


Ich bin im Moment 'mal wieder an der optischen Gestaltung meiner ipod PocketVisu und habe dort eine Seite mit dem Heizungsschema erstellt. Für die Anzeige der Pumpen wollte ich ein "drehendes Etwas" haben und habe hier im Forum genauso wie über Google nach dem "How-To" gesucht.

Ich Moment geht der Trend ja nach fertigen Lösungen (QC) und fertigen Icons, aber bestimmt ist auch noch Bedarf und Interesse am Eigenbau. Meine Erkenntnisse möchte ich dehalb hier einmal zusammenfassen. Der Schwerpunkt liegt auf dem HS, aber erstellte "animated GIFs" sind natürlich auch anderweitig verwendbar. Vielleicht "moved" ja auch bei Euch demnächst in der Visu eine Pumpe, eine Lampe blinkt oder ein Kaminfeuer flackert ...


Grundsätzliches

Beim HS gibt es schon die "dynamischen Symbole", die abhängig von einem Kommunikationsobjekt den Zustand ändern. Also Symbole für "Lampe an" oder "Lampe aus". Technisch wird dann entweder das eine oder das andere (können auch viel mehr sein) Symbol im Client oder im Browser angezeigt, indem beim nächsten "Refresh" das entsprechende Symbol vom HS an die Anzeige ausgeliefert wird. Dort bleibt es statisch und unverändert, bis sich das Kommunikationsobjekt ändert und damit auch ein geändertes neues Grafiksymbol vom HS ausgeliefert wird.

Bei den animierten GIFs ist es etwas gänzlich anderes. Das Grafikformat "GIF" erlaubt es, mehrere Ansichten in einer Datei selbst abzuspeichern, die dann in zeitlicher Folge (z.B. alle 100ms das nächste Bild) angezeigt werden. Aktiviert man die "Loop-Eigenschaft", dann geht es immer wieder von vorne los (Endlosschleife). Für die korrekte Darstellung ist die Anzeigesoftware (z.B. Browser) zuständig, der "Bildlieferant" (hier der HS) bleibt dabei außen vor. Wenn der Browser nicht geschlossen wird, dann bewegt sich das GIF bis in alle Ewigkeit, auch wenn niemand mehr die Seite aktualisiert und der HS vielleicht doch wegen Netzteildefekt abgestürzt ist ...

Ob animierte GIFs auch im HS-Client funktionieren, kann ich leider nicht sagen, das habe ich mangels Bedarf nie ausprobiert.

Natürlich (und idealerweise) kann man "animierte GIFs" und "dynamische Symbole" auch kombinieren, wobei das dynamische Symbol (wie oben beschrieben) zuerst einmal auswählt, was überhaupt angezeigt wird: Wenn z.B. die Pumpe (oder das Feuer oder die Lampe ...) aus ist, dann zeigt man damit ein statisches Aus-Symbol an, dass z.B. nur aus einem "transparenten Nichts" besteht und deshalb unsichtbar ist. Ist die Pumpe an, dann wird das animierte GIF angezeigt. Das das Bild hierbei im Browser "zappelt", interessiert den HS nicht (kleine Einschränkung bzgl. Experte siehe unten), der liefert nur das GIF aus.


Was brauche ich

Zum Erstellen von animierten GIFs bracht man ein Programm, das aus einzelnen (statischen) Bildern die Animation zusammenbaut. Das ist vergleichbar mit der klassischen Methode der Trickfilmerstellung, immer ein Bild nach dem anderen hintereinanderfügen. Diese Programme gibt es in vielfältiger Form als Freeware im Internet. Eines der bekanntesten ist der "Microsoft GIF Animator", war mir aber schon zu mächtig und ich wollte mich nicht lange einarbeiten.

Ich habe das Programm UnFREEz genommen, ist ebenfalls Freeware und der Download (http://www.whitsoftdev.com/unfreez/) nur ca. 20KByte groß. Keine Installation, einfach nur die ZIP-Datei des Downloads auspacken und die eine EXE-Datei anstarten.

Einige Zeichenprogramme haben eine vergleichbare Funktion auch bereits integriert, dann erspart man sich das separate Programm.


Zum Erstellen der statischen Bilder benötigt man ein Zeichenprogramm nach eigener Wahl. Jeder wird schon irgendeine Erfahrung mit entsprechenden Programmen haben, sei es das mitgelieferte "Paint" von Windows oder Programme wie CorelDraw usw. Wichtig ist nur, dass man das Ergebnis (auch) als GIF speichern kann, aber das sollte jedes Programm können.

Ich empfehle hier ebenfalls ein Freeware-Programm und zwar "Paint.NET". Es hat nichts mit dem ähnlich klingenden Microsoft-Programm "Paint" zu tun. Man bekommt es unter http://www.getpaint.net/download.html zum Download, das Programm selbst ist (u.a.) komplett in Deutsch und benötigt als wesentliche Grundlage das ".NET Framwork" (kennen wir ja jetzt alle ...).
Wie jedes etwas mächtigere Programm muss man sich auch hier einarbeiten, das lohnt sich aber für alle, die ab und zu Symbole, Grafiken, Icons etc. erstellen oder bearbeiten wollen. Eine Superfunktion von Paint.NET ist das "Rückgängig-machen" einzelner Schritte mit einem Icon in der Menüleiste (oder mit Strg-Z). Man probiert etwas was, wenn es schief geht, dann einfach Strg-Z (ggf. mehrfach bis ganz oft) und es wird schrittweise wieder rückgängig gemacht.


Jetzt gehts los

Zuerst sollte man sich kurz Gedanken machen, was man denn überhaupt als Ergebnis möchte. Dann geht es an das Zeichenprogramm. Man beginnt entweder mit einer "ausgeliehenen" Vorlage, sprich nimmt eine frei verfügbare Grafik und bearbeitet diese, oder erstellt eine gänzlich neue, was im Falle einer "Pumpe" fast einfacher ist.
Generell sollte man sich die Arbeit in verschiedenen Ebenen angewöhnen, nur dann ist man beim Verändern und Nacharbeiten flexibel. Und "Transparenz" ist auch ein guter Freund, sonst bringt das ganze Ebenenkonzept nichts:





In obigem Bild habe ich in Paint.NET eine Datei mit mehreren Ebenen angelegt und im Moment die Ebenen 1 und 3 eingeblendet. Da die Ebene 3 "über" Ebene 1 steht, ist sie weiter im Vordergrund (kann man mit den blauen Pfeilen unten umsortieren). Diese Paint.NET-Datei (mit der Endung .pdn) bleibt immer als Mastergrafikdatei erhalten! Die einzelnen GIF-Dateien werden durch "Speichern unter" zusätzlich erstellt und sind sozusagen erst das Produkt der Masterdatei (wie beim Kompilieren von Programmen aus Quellcode). Es empfiehlt sich z.B. auch die Mastergrafik in höherer Auflösung anzulegen (z.B. doppelt in x- und y-Ausdehnung) und nur die GIF-Dateien beim Speichern in der Größe zu verringern. Verkleinern geht immer und unter guter Qualität (mit automatischen Halbtönen etc), beim späteren Vergrößern leidet die Qualität aber.


Meine "Pumpe" hat vier Flügel. Um eine "Pumpenumdrehung" zu machen, braucht man deshalb eigentlich nur eine Viertelumdrehung, dann sieht es wieder wie am Anfang aus. Deshalb habe ich auch nur drei verschiedene Zustände: Ausgangsbild, 30° weitergedreht und 60° weitergedreht. Bei 90° ist man wieder am Anfang. Man hätte auch mehr Zwischenschritte nehmen können (15°, 30°, 45°, ...), dann wird das Bild flüssiger, aber bei kleinen Bildgrößen macht das weniger Sinn.




Zum "Drehen" (was im obigen Bild schon geschehen ist), kopiert man zuerst die Bildebene mit dem Rotor in eine neue Ebene. Dann wird die Kopie selektiert und man kann die Kopie drehen, was hier über Ebenen -> Rotationszoom geht.
Wichtig ist, dass bei Paint.NET immer nur die markierte Ebene bearbeitet wird. Da geht schon mal was schief, da man nicht darauf achtet, aber Strg-Z hilft ...




Sinngemäß geht man mit den weiteren Ebenen vor, bis man die gewünschte "Trickfilmbasis" erstellt hat.

Die Veränderung von Bild zu Bild muss natürlich immer mit den geeigneten Werkzeugen durchgeführt werden, drehende Elemente sind halt besonders einfach, wenn sie mittig im Bild angeordnet sind.

Wenn man z.B. blinkende Lampen animiert, dann würde man eine Kopie der Lampen-Ebene machen und einfach die Kopie anders einfärben.


Als letzten Schritt im Grafikprogramm werden die einzelnen Ebenen, die jeweils in der Einzel-GIF-Datei sein sollen, markiert und die Datei mit "Speichern unter" -> "als GIF-Datei" gespeichert. Beim Speichern wird dann nachgefragt, ob man "die Ebenen zusammenfassen" möchte, denn die Ebenenfunktion des Paint.NET-Formats pdn wird im GIF nicht unterstützt. Die richtige Antwort ist hier "ja", dann wird gespeichert und alle nicht aktivierten Ebenen sind verschwunden! Oh Schreck! Macht aber nichts, denn jetzt kommt einfach "Strg-Z" für "Rückgängig" (siehe oben), dann ist das Zusammenfassen wieder rückgängig, die GIF-Datei aber trotzdem noch da. Und die Original-pdn-Datei hat man ja auch noch gespeichert, muss diese aber nicht extra nochmal öffnen.

Dieses Spiel treibt man mit allen Ansichten und hat als Ergebnis mehrere einzelne ("stehende") GIF-Dateien. Eine überlegte Namensgebung wird spätestens hier übrigens sehr sinnvoll.

Als Ergebnis der obigen Bemühungen habe ich mal zwei Sätze "Pumpen" gemacht:





Jetzt kommt UnFREEz zum Einsatz. Dieses (einfache) Programm hat kaum Einstellmöglichkeiten, ist aber auch sehr einfach zu bedienen.



Per Drag und Drop "wirft" man die GIF-Dateien, die Teil der Bewegung sein sollen einfach auf das gestartete Programmfenster. Unter "Loop animation" legt man fest, ob das Spiel endlos weitergehen soll (überlicherweise ja) oder nur einen Durchlauf lang. Unter "Frame Delay" legt man die Zeit fest, die bis zum Wechsel auf die nächste Ansicht vergehen soll. "30cs" währen hier 0,3 Sekunden, die Skalierung ist etwas gewöhnungsbedürftig.
Am Ende "Make Animated GIF" klicken und den Dateinamen für das neue "animated GIF" festlegen.
Zum Testen sollte man die fertige Datei in einem Browser öffnen (einfach wieder mit "Drag und Drop" in den Browser werfen). Jetzt entscheidet sich, ob die Zeiteinstellung verändert werden muss oder ggf. sogar noch weitere Zwischengrafiken sinnvoll sind.



Kleiner Tipp für Elektriker: Wenn sich die Pumpe aus drei Einzel-GIFs "falschherum" dreht, dann ist das wie bei einem Drehstrommotor: Einfach zwei Phasen (also hier Bilder) in der Reihenfolge tauschen.


Einbau der animierten GIFs in die HS-Visu

Was mach ich jetzt mit den animierten GIFs ?
Einfach verwenden, wie statische. Im Experten werden diese zuerst als "Statische Symbole" eingefügt, dann mehrere der eingefügten Symbole zu einem "Dynamischen Symbol" zusammengefügt. Im Prinzip ist es das bekannte Spiel.

Eine Besonderheit liegt aber in der Designmaske des Experten, der (zumindest bei mir, Experte 2.2) Schwierigkeiten mit der Anzeige der animierten GIFs hat. Das macht das Positionieren auf einer Visuseite schwierig (hat aber keinerlei Auswirkung auf die Visu), deshalb der folgende Tipp:

Ich empfehle, ein statisches GIF (eines, aus denen das animierte zusammengefügt wurde) zusätzlich in den HS zu importieren und als Standard-Symbol einzutragen. In den Bedingungsfeldern stehen die GIFs, die im Betrieb verwendet werden, das statische "Standard-Symbol" wird praktisch nur im Experten verwendet und macht dort keine (Positionierungs-)Probleme.




Zum Schluß zwei Bilder meines Ergebnisses. Bei der ipod-Visu ist die Auflösung der "Pumpen" nur 22x22, also halb so groß wie im obigen Beispiel. Trotzdem ist der Effekt sehr schön zu sehen (leider nicht im Screen-Shot), doch wie überall sollte man "sparsam" damit sein, sonst wird es im eigentlichen Sinne des Wortes zu bunt.




Ich mache noch einen Diskussionsthread auf, sollte es Fragen oder Anmerkungen zum Thema geben.


Gruß
Hartmut