Aufgabe 8: Animierte GIF-Dateien erstellen

Aufgabenstellung:

Zwecks Erzielung besonderer Aufmerksamkeit durch den Betrachter sollen "bewegte Bilder" in die Webseiten eingebaut werden. Besonders geeignet sind bewegte Aufzählpunkte, aber auch rollender Text u.a.
Anhand von diesen beiden Anwendungsbeispielen sollen nun animierte GIF-Dateien erstellt werden.
Zur Erarbeitung dieser Dateien können verschiedene Grafikprogramme genutzt werden. Hier werden die Entstehungsschritte mittels "Corel Photopaint" erläutert (Für den Nutzer, der eine Software vor dem Kauf erst einmal probieren möchte, sei hier als Alternative das Freeware-Programm "Ulead GIF Animator Lite Edition 1.0"
empfohlen).
Erstellen eines rollenden Textes (hier erläutert anhand von Corel-Photopaint):
  1. Öffnen Sie mit Ihrem Grafikprogramm eine neue Datei (Menü: Datei - Neu) im 24-Bit-Farbmodus 
  2. Definieren Sie die Höhe auf 300 Pixel, die Breite auf 80 Pixel, die Papierfarbe sollte Ihrer gewählten Hintergrundfarbe der Datei html01.htm entsprechen (das ist die Startseite des Willem Mustermann!).
  3. Lassen Sie die Bilddatei als Vollbild darstellen und "zoomen" sie die Malfläche auf die Arbeitsfläche (F4-Taste) 
  4. Wählen Sie mittels F8-Taste das Texthilfsmittel. Stellen Sie die Schriftgröße auf 12pt (entspricht der Standardschriftgröße) 
  5. Wählen Sie eine Schriftart nach Ihrem Geschmack (z.B. Arial oder Comic Sans, fett)
  6. Wählen Sie durch Klick mit der linken Maustaste in die Farbpalette eine entsprechende Malfarbe (als Schreibfarbe).
  7. Schreiben Sie nun den Text (auf die Streifenbreite des Textbereichs angepaßt):

    8. Diese Website enthält viele interessante Details zur Musterstadt. Hier finden Sie:
    Die Geschichte, Die Lage, Sehenswürdigkeiten und besondere Termine
    Diese Seiten werden regelmäßig aktualisiert. Ein wiederholter Besuch lohnt sich also immer wieder!
    Letzte Aktualisierung: 01.11.98. Der Webmaster.
  8. Achten Sie darauf, daß die Option Anti-Alias aktiviert ist. 
  9. Wählen Sie das Hilfsmittel Objektauswahl. Verschieben Sie den Text auf der Papierfläche (mittels Cursortasten), so daß der gesamte Text auf dem Hintergrund lesbar verteilt steht.
  10. Sichern Sie die Datei (vorerst noch als Corel Photopaint-Datei).
  11. Öffnen Sie nun eine weitere neue Datei (Menü: Datei - Neu) im 24-Bit-Farbmodus 
  12. Definieren Sie jetzte die Höhe auf 100 Pixel, die Breite auf 80 Pixel. Markieren Sie die Auswahl "Film erstellen" und bestimmen Sie die Rahmenanzahl auf 37 (bei Bedarf können weitere Rahmen später hinzugefügt werden).
  13. Wechseln Sie zur Textabbildung, Markieren Sie mittels Rechteckmaske die gesamte Papierfläche samt Text und kopieren Sie diese (Strg+C) in die Zwischenablage.
  14. Wechseln Sie zur Datei mit den 37 leeren Bildrahmen. Aktivieren Sie den 1. Rahmen
  15. Aktivieren Sie das Hilfsmittel "Objektauswahl" und fügen Sie hier die Zwischenablage ein (Strg+V).
  16. Verschieben Sie den gesamten Textrahmen (horizontal: 0 Pixel, vertikal: 90 Pixel)
  17. Verbinden Sie nun den Textrahmen mit dem Rahmenhintergrund (Strg+Curor_nach_unten).
  18. Speichern Sie die Datei (vorerst als Photopaint-AVI-Datei).
  19. Aktivieren Sie den nächsten Bildrahmen und fügen Sie hier die Zwischenablage wiederholt ein (Strg+V).
  20. Verschieben Sie den gesamten Textrahmen vertikal um 10 Pixel weniger als im 1. Rahmen (d.h. beim 2. Bildrahmen: horizontal: 0 Pixel, vertikal: 90 Pixel)
  21. Verbinden Sie wieder den Textrahmen mit dem Rahmenhintergrund (Strg+Curor_nach_unten).
  22. Notieren Sie sich die vertikale Verschiebung (um den Überblick zu wahren).
  23. Verfahren Sie nun weiter ab Punkt 18 bis der letzte Bildrahmen mit dem nach oben ausweichenden Text gefüllt wurde.
  24. Ändern Sie abschließend über Bild - Farbformat ändern - Palette 8-Bit die Farbpalette, wobei die Optionen optimiert und Fehlerdiffusion aktiviert sein sollen, auf 4 Farben.
  25. Speichern Sie das Ergebnis als GIF-Animiation, wobei die Hintergrundfarbe nunmehr transparent definiert wird.

    26. Achten Sie beim Speichern auf die Zeitverzögerung (wichtig für den Bildübergang). Experimentieren Sie gegebenenfalls mit diesem Wert (ca. 50).
  26. Fügen Sie diese Grafik nun in die Datei html01.htm an geeigneter Stelle ein. Überzeugen Sie sich von der Wirkung.
  27. Experimentieren Sie mit der Schriftart, Schriftgröße und den Verzögerungszeiten.
  28. Prüfen Sie die abschließende Dateigröße (nicht mehr als ca. 25 kB!).
Lösung zur Aufgabe:
ursprünglicher Text einzelne Bildrahmen
  
Ergebnis:
Webdesign by: Dipl.-Math. Horst Liske, EDV-Beratung HolyWare©,  Horst@holyware.de