Animierte Kopfgrafiken mit dem ImageRotator

Mit Hilfe dieses Tutorials können Sie den in OpenCMS standardmäßig aus einer Grafikdatei bestehenden Kopfbereich Ihrer Seiten durch eine animierte Variante abändern. Die Technik basiert auf dem Image-Rotator und nutzt Flash. Seitens der Internet-Administration werden Kopiervorlagen zur Verfügung gestellt, in denen nur noch die Pfade auf die einzelnen Steuerdateien angepasst werden müssen.

---

1. Ermitteln der Dateipfade
Die Kopiervorlage ist weitestgehend vorbereitet und muss von Ihnen nur noch an die individuellen Gegebenheiten Ihres Projektes angepasst werden. In diesem ersten Schritt ermitteln wir nun den benötigten Pfad zu Ihren Steuerdateien. Wechseln Sie zunächst in ihrem Projekt in das Hauptverzeichnis.

Dies ist daran zu erkennen, dass in der rechten Spalte des Workplace das Konfiguationsverzeichnis "_configuration" aufgelistet ist. In der Adressleiste im Workplace steht nun der vollständige Pfad zu Ihrem Projekt. Markieren und kopieren Sie diesen Pfad mit  STRG + C in die Zwischednablage.
 

---

 
2. Wechsel in das Verzeichnis mit den Steuerdateien
Nachdem die Kopiervorlage seitens der Internet-Administration in Ihr Verzeichnis kopiert wurde, finden Sie im Konfigurationsverzeichnis "_configuration" ein neues Verzeichnis mit dem Namen "kopfbereich". Wechseln Sie mit Mausklick in dieses Verzeichnis. Dort finden Sie die folgenden Verzeichnisse und Dateien vor:

bilder	Verzeichnis für die einzelnen Bilder die in der Animation verwendet werden sollen. Alle Bilder müssen in diesem Verzeichnis liegen
animierte_kopfgrafik.js	Steuerdatei in der alle Parameter zum Ablauf der Animation konfiguriert werden
bilderliste.xml	Stuerdatei mit der Liste der Bilder die in der Animation verwendet werden sollen
swfdetect.js	Steuerdatei (muss nicht bearbeitet werden)
swfplayer.swf	Steuerdatei (muss nicht bearbeitet werden)

  

---

 
3. Anpassen der Steuerdatei "animierte_kopfgrafik.js"
Klicken Sie zunächst mit der rechten Maustaste auf das Dateisymbol der Datei "animierte_kopfgrafik.js" und wählen anschließend im Kontextmenü die Option Quelltext editieren aus. Die Datei wird daraufhin im Quelltexteditor geöffnet und Sie können mit der Anpassung der Pfade beginnen. Hierzu müssen Sie lediglich in den Zeilen 1, 2, 4 und 10 den individuellen Pfad auf die Steuerdateien anpassen (Der Pfad liegt in Gänze in der Zwischenablage, siehe 1. Arbeitsschritt). Alternativ können Sie auch den Überbelndeffekt abändern. Tauschen Sie hierzu in Zeile 7 die gewünschte Variable aus.



Die durchzuführenden Änderungen im Detail:

Zeile 1:
Anpassen des Pfades zur Datei swfdetect.js: /pfad/zu/Ihrer/steuerdateien/_configuration/_kopfbereich/swfdetect.js
 
Zeile 2:
Anpassen des Pfades zur Standardgrafik: /pfad/zu/Ihrer/steuerdateien/_configuration/kopfbereich/bilder/01.jpg
 
Zeile 4:
Anpassen des Pfades zur Steuerdatei swfplayer.swf: /pfad/zu/Ihrer/steuerdateien/_configuration/kopfbereich/swfplayer.swf
 
Zeile 7:
Einstellen des Überblendeffektes. Ändern Sie die Variable wie gewünscht ab.
Zur Verfügung stehen die folgenden Variablen: fade, bgfade, blocks, bubbles, circles, flash, fluids, lines, slowfade, random
 
Zeile 10: 
Anpassen des Pfades zur XML-Steuerdatei:  /pfad/zu/Ihrer/steuerdateien/_configuration/kopfbereich/bilderliste.xml

Nachdem Sie die Änderungen durchgeführt haben speichern Sie die Datei durch einen Klick auf Speichern und Schließen ab. Sie kehren daraufhin auf den Workplace zurück.

---

 
4. Anpassen der XML-Steuerdatei
Rufen Sie nun die Datei "bilderliste.xml" durch einen Rechtsklick auf das Dateisymbol und anschließenden Klick auf die Option Quelltext editieren im Bearbeitungsmodus auf. Auch in dieser Datei müssen die Pfade auf die Bilder angepasst werden. Sie können hierzu wieder den in die Zwischenablage kopierten Pfad (siehe 1. Arbeitsschritt) verwenden.


In der Kopiervorlage sind standardmäßig vier Grafiken für den Überblendeffekt konfiguriert. Um die Funktion der animierten Kopfgrafik zu vervollständigen, ersetzen Sie in den Zeilen 8, 15, 21 und 27 den in der  in der Kopiervorlage vorgegebenen Pfad (/pfad/zu/Ihren/steuerdateien/) durch den individuellen Pfad Ihres Projektes.

Nachdem Sie alle vier Pfade angepasst haben speichern Sie Ihre Änderungen mit einem Klick auf Speichern und Schließen um auf den Workplace zurückzukehren.
 

---

 
5. Einbinden der animierten Kopfgrafik in Ihr Projekt
Die animierte Kopfgrafik ist nun soweit konfiguriert, dass sie für Ihr Projekt nur noch freigeschaltet werden muss. Rufen Sie hierzu die Eigenschaften Ihres Projektverzeichnisses über das Kontextmenü  Eigenschaften auf. In diesem Dialogfenster müssen verschiedene Eingaben gemacht werden:

1. Setzen Sie die Eigenschaft "Kopfgrafik anzeigen" auf die Option "Ausblenden"
2. Tragen Sie in das Eingabefeld "Kopfelement" den vollständigen Pfad zu Ihrer im Konfigurationsverzeichnis liegenden Datei "animierte_kopfgrafik.js" ein. Nutzen Sie hier zu das am Ende Eingabefeldes eingeblendete Ordnersymbol um die Datei durch Mausklick auswählen zu können. Das Ergebnis sollte ein Dateipfad in der Form "/pfad/zu/Ihren/steuerdateien/_configuration/kopfbereich/animierte_kopfgrafik.js" sein.

Danach bestätigen Sie anschließend mit OK

---

 
6. Funktionstest
Die animierte Kopfgrafik ist nun fertig konfiguriert und Sie können mit dem Aufruf einer Vorschauseite das Ergebnis anschauen und auf Funktion überprüfen. Wenn alles fehlerfrei konfiguriert ist, sollte alle 3 Sekunden ein Bilderwechsel mit dem von Ihnen ausgewählten Überblendeffekt und den Standardgrafiken stattfinden.
 

---

 
7. Einbinden eigener Grafiken
Bevor Sie die Standardgrafiken gegen Ihre eigenen Grafiken austauschen können, müssen Sie diese mit dem Bildbearbeitungsprogramm Ihrer Wahl erstellen. Beachten Sie hierbei bitte die Abmessungen der Bilddateien: Normalerweise haben diese eine Größe von 950 x 120 Pixel bei einer Auflösung von 72dpi.

Benennen Sie die Grafiken nach dem Schema 01.jpg, 02.jpg, 03.jpg und 04.jpg (mit führender Null). Laden Sie diese Grafikdateien in das Verzeichnis "_configuration/kopfbereich/bilder/" hoch. In den Grundeinstellungen können Sie auf diese Weise bis zu 4 verschiedene Grafiken in den Überblendeffekt einbeziehen.
 

---

 
8. Erweitern der Anzahl zu verwendener Grafiken
Erstellen Sie sich eine beliebige Anzahl weiterer Grafiken. Beachten Sie auch bei diesen Grafiken die Abmessung von 950 x 120 Pixeln bei einer Auflösung von 72dpi. Bei der Benennung sollten Sie das bereits im 7. Arbeitsschritt angesprochene Nummerierung-Schema beachten. Laden Sie auch diese Dateien in das Bilderverzeichnis der animierten Kopfgrafik unter "_configuration/kopfbereich/bilder/".

Wechseln Sie im Anschluß in das Verzeichnis "_configuration/kopfbereich/" und rufen dort über das Kontextmenü die Datei "bilderliste.xml" zur Bearbeitung auf.

In dieser Datei ist jede Grafik über den folgenden Quellcode für die Verwendung in der animierten Kopfgrafik konfiguriert:
 

Kopieren Sie diese Zeilen in die Zwischenablage und fügen Sie sie anschließend in die Datei "bilderliste.xml" unterhalb des letzten Tags </track> ein. Modifizieren Sie anschließend die rot markierten Bereiche entsprechend den Gegebenheiten Ihres Projektes. Diesen Arbeitsschritt wiederholen Sie solange, bis alle für die Animation vorgesehenen Grafiken über einen Eintrag in der Datei "bilderliste.xml" verfügen.