|
|
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.
Aus technischen Gründen kann nur die Internet-Administration die vorgefertigten Kopiervorlagen in Ihr Projektverzeichnis kopieren. Setzen Sie sich bitte telefonisch oder per E-Mail mit Herrn Koch-Tien (0221-16423131) oder Frau Karbach (0221-16423928) in Verbindung
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.
Zur Sicherheit können Sie den Pfad auch in eine Textdatei oder ein Worddokument zwischenlagern, falls sie zwischenzeitlilch die Zwischenablage anderweitig benötigen.
Abb: Das Ermitteln des Dateipfades geht am einfachsten über die Adressleiste im Workplace
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) |
Abb: Das Verzeichnis "kopfbereich" im Verzeichnis "_configuration" beinhaltet alle Dateien der "Animierten Kopfgrafik"
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.
Abb: In der Datei "animierte_kopfgrafik.js" müssen die Pfade individuell auf Ihr Projekt angepasst werden
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.
Abb: In der Datei "bilderliste.xml" sind alle Bilder verzeichnet, die für die animierte Kopfgrafik verwendet werden sollen. Auch hier müssen die Pfade angepasst werden
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
Abb: Über die Eigenschaften der Microsite wird die Einbindung der animierten Kopfgrafik gesteuert
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.
Sollte kein Überblendeffekt stattfinden oder der Kopfbereich schwarz bleiben, so liegt ein mit aller Wahrscheinlichkeit ein Fehler in der Datei "animierte_kopfrfgrafik.js" oder "bilderliste.xml" vor. Überprüfen Sie die Pfade auf korrekte schreibweise (Arbeitsschritt Nr. 3)
Abb: Der Funktionstest zeigt: Alle Konfigurationen waren richtig
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.
Die Anzahl der verwendeten Grafiken kann beliebig erweitert werden. Wie diese anschließend konfiguriert werden erfahren Sie im nächsten Arbeitsschritt
Abb: Im Verzeichnis "_configuration/kopfbereich/bilder/" liegen die verwendeten Grafiken. Sie sind nach dem Schema 01 - 04 durchnummeriert
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:
<track>
<title>Kopfgrafik 5</title>
<creator>#</creator>
<location>/pfad/zu/Ihren/steuerdateien/_configuration/kopfbereich/bilder/05.jpg</location>
<info>#</info>
</track>
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.
Abb: Fügen Sie den Quelltext an der entsprechenden Stelle ein. Wiederholen Sie diesen Arbeitsschritt bis alle Dateien berücksichtigt wurden
|
|
