|
Multimediakurs Leinfelder: Inhalt/ B:Fortgeschrittene/Modul 6 "Website-Erstellung und Management"/Modul 6.2 "html-Erweiterungen mit GoLive"/6.2.2 dhtml am Beispiel von GoLive |
| (© copyright) Letzte Änderungen: |
Modul 6.1./6.2: R. Leinfelders kleines GoLive-Tutorial
6.2.2 Dynamic html (dhtml) am Beispiel von GoLive
In diesem Modul erhalten Sie eine kurze Übersicht zur Animationsmöglichkeit von Floating-Boxes mittels Dynamic html.
1. Animation von Floating Boxes
Wir haben uns im vorhergehenden Modul mit Floating-Boxes vertraut gemacht. Diese können in GoLive recht einfach animiert werden. Wichtig dazu sind folgende Eigenschaften von Floating Boxes (die für Animationen entsprechend so eingestellt sein sollten):
- Floating Boxes haben eine definierte Größe (Höhe, Breite), in der Regel in Pixels.
- Floating Boxes haben eine exakte, absolute Positionierung (in der Regel in Pixels, gemessen im Höhen- und Breitenabstand von der linken oberen Ecke des html-Dokuments.
- Floating Boxes können auf unterschiedlichen Ebenen liegen (z-Index, Tiefe).
- Der Hintergrund von Floating Boxes ist transparent, sofern er nicht anders definiert wurde.
- Floating Boxes können als sichtbar und unsichtbar definiert werden.
Wäre es nicht Klasse, wenn wir die Position und Sichtbarkeit von Floating Boxen per Befehl (z.B. Klick auf einen Link oder Button) oder zeitabhängig ändern könnten oder gar verschiedenene Floating Boxes unabhängig voneinander bewegen könnten?
Mit dhtml (sowie Skript aktionen, siehe nächster Teilmodul) ist so etwas tatsächlich möglich, dies muss allerdings in einer geeigneten Script-Sprache programmiert werden. Dazu eignet sich JavaScript bzw. eine an CSS angepasste Variante, CSS-Script.
Cool: Die teilweise aufwändigen und komplexen Skripterstellung nimmt uns GoLive überwiegend ab; die entsprechende Scriptprogrammierung wird durch Drag and Drop sowie Auswahl und Zuordnung von sog. Action-Objekten generiert.
Erläuterung von dhtml-Animationen
Schauen wir uns unser einfaches Floating-Box-Beispiel aus dem vorhergehenden Kursmodul an und animieren es entsprechend.
Zuerst einmal das Ergebnis.
Die Animation können Sie in diesem noch relativ einfachen Fall nur stoppen, wenn Sie das Extra-Fenster wieder schließen
Hinweis: Schauen Sie sich lieber nicht das im Header generierte JavaScript an (Können Sie aber interessehalber doch mal tun, indem Sie das Beispiel nochmals aufrufen und sich im Browserfenster unter Ansicht den Quelltext anzeigen lassen. Das Script ist so komplex, dass die Seitengröße von 1,2 KB (unanimierte Form aus dem vorherigen Modul) auf das 13,5-fache, nämlich 16,2 KB angestiegen ist (ist dennoch eine äußerst tolerable Dateigröße).
Dies liegt insbesondere daran, dass nicht nur für die verschiedenen Browser, sondern sogar für verschiedene Browserversionen verschiedene Scripte geschrieben werden müssen, da dhtml keinen Standard darstellt. Netscape kann dhtml ab Version 4 darstellen, InternetExplorer ab Version 5. Erfreulicherweise nimmt uns GoLive diese Arbeit in bemerkenswert guter Qualität ab. Näheres zu dhtml und dessen Einschränkungen erfahren Sie im Anhang zu diesem Kurs. Sollten Sie dhtml ausgiebig benutzen wollen, sollten Sie die entsprechenden Erläuterungen im Anhang unbedingt lesen.Haben Sie es bemerkt? Die die Texte enthaltenden drei id-Formatcontainer (Schweberahmen) bewegen sich auf definierten Bahnen unabhängig voneinander. Einer der Container verschwindet auch zweimal und taucht an neuer Position wieder auf. Dann läuft die Animation wieder rückwärts ab, danach wieder vorwärts und so weiter.
Wie haben wir dies gemacht? Lesen Sie die Erklärung:
A: Einrichtung einer Floating Box und Öffnen des Zeitachsen-Editors (Timeline-Editor): öffnen Sie hierzu Abbildung dhtml1
(Die nachstehenden Zahlen beziehen sich auf die roten Ziffern in der Abbildung)
- Erstellen Sie eine Floating Box (1) (durch Ziehen des Rahmen-Objektes aus der Objektepalette Allgemein). Neben der Floating Box erscheint auch das Mini-Icon der Floating Box (2) im Layoutmodus.
- Ziehen Sie die Floating-Box auf die gewünschte Größe auf (oder geben Sie diese im Inspektor (3) ein. Füllen Sie die Box mit Inhalt. Falls es sich, wie im Beispiel um Text handelt, formatieren Sie diesen im von GoLive für die Floating Box automatisch angelegten Stylesheet, indem Sie das StyleSheet-Fenster öffnen (Klick auf 4) und die Angaben wie im vorherigen Modul behandelt, eingeben.
- Öffnen Sie den Zeitachsen-Editor, indem Sie auf das Filmsymbol (5) klicken. Es öffnet sich ein extra Fenster (6), in dem Sie für Ihre Floating Box (heißt im Beispiel Ebene1) eine Animationsspur angelegt bekommen haben (7). Dort befindet sich ein Schlüsselbildicon (rechts neben der 7). Wenn Sie dieses aktivieren, ändert sich der Inspektor wiederum zum Rahmeninspektor (Floating Box-Inspektor)
- Bewegen Sie Ihre Floating Box nun an die für die Animation gewünschte Ausgangsposition. Sie können den Rand aktivieren (beim Mac erscheint die Hand) und direkt verschieben oder im Inspektor die Position (Links, Oben) in Pixeln eingeben bzw. ändern. Wenn die Floating-Box direkt markiert ist, ändert sich die Werkzeugleiste (9, 10). Dort können Sie ebenfalls die Positon für diesen Keyframe in Pixeln eingeben (links neben 9) oder eine der Ausrichtungsoptionen für Floating Boxes (10) verwenden.
B: Erstellung eines Animationspfads: öffnen Sie hierzu Abbildung dhtml2
- In unserem Beispiel habe ich die Floating Box als Startposition weit über den linken Bildschirmrand hinausgezogen, so dass die Animation beim Laden der Seite nicht zu sehen ist (1)
'
- Klicken Sie bei gedrückter Alt- bzw. Optionstaste auf den ersten Keyframe (2) Ihres Objekts im Zeitachseneditor und ziehen ihn auf eine weitere Position bei ca. 20 in der Animationsspur Sekunden (3). Dies dupliziert den Keyframe (Sie sehen dies an Pluszeichen beim Ziehen (alt) bzw. Klicken (option). Dadurch wird auch ein Abspielbereich (play range) eingeführt (4) sowie der Zeitcursor (5) auf die gleiche Position (bei ca. 20 Sek. gesetzt).
- Fassen Sie nun Ihre Floating Box an und verschieben Sie an die Stelle, an der sie sich nach 20 Sek. befinden soll (6). Im Layoutfenster wird dadurch ein grauer Animationspfad angegeben.
- Gehen Sie vom Layout-Modus mal in den Vorschau-Modus (7) und sehen Sie sich die bis dahin erstellte Animation einmal an. Gehen Sie dann zurück in den Layout-Modus und aktivieren wieder den zweiten Keyframe in unserer Animationsspur 1 im Timeline-Editor.
C: Fertigstellung der Animation öffnen Sie hierzu Abbildung dhtml3
- Ich habe durch Duplizieren und Ziehen (Alt- bzw. Option-Click / Drag) in der Zeitleiste drei weitere Keyframes bei 21, 25 und 45 Sekunden angegeben. Bis zum Keyframe bei 25 Sek. lies ich die Position der Floating Box konstant, d.h. habe sie nicht bewegt. Dann habe ich auf den letzten Keyframe geklickt und die Position der Floating Box weit außerhalb des Browserfensters geschoben.
- Danach habe ich den Keyframe bei 21 Sek. auf "unsichtbar" gesetzt. Dazu den Keyframe markieren und im Floating-Box-Inspektor die Sichtbarkeit entsprechend einstellen.
Was sollte nun passieren. Die Floating-Box-Position sollte zwischen 20 und 25 Sekunden konstant bleiben, zwischen 21 und 25 Sek. sollte sie aber nicht zu sehen sein. Danach sollte sich die Box nach rechts unten aus dem Bild bewegen.
- Testen wir die Animation: Sie können dazu den Time-Cursor (4) an eine beliebige Stelle bewegen, die Position unserer animierten Box wird sich im Vorschau-Fenster entsprechend ändern (5)
- Sie können auch die Play-Buttons im Zeitleistenfenster (6) zur Vorschau benutzen. Außerdem könnten Sie die Bild/Sekunden-Rate (7) verändern. Spielen Sie mal mit dieser Option. Je höher die Bildrate ist, desto flüssiger läuft die Animation ab, aber desto höher wird auch der Prozessor des Benutzercomputers beansprucht. Sie könnten den gegenteiligen Effekt erreichen: es ruckelt und zuckelt wegen Überlastung auf dem Benutzercomputer oder dieser stürzt (bei komplexeren Animationen) gar ab. Die Bildrate sollte deshalb nicht höher als 15 Bilder/Sec eingestellt werden.
- Sie können die Position der Keyframes auch nachträglich noch verschieben, um die Geschwindigkeit Ihrer Animation zu verändern. Wenn Sie mehrere Keyframes markieren, verschieben sich diese beim Ziehen gemeinsam.
- Sie können nun weitere Animationsspuren anlegen, indem Sie an die Stelle in der Timeline zurückgehen, an der eine neue Floating Box erscheinen soll (muss nicht der Anfang sein) und eine neue Floating Box erstellen. Diese erscheint im Timeline-Editor in einer neuen Spur, die Sie analog zum obigen Beispiel animieren können.
- Wenn Sie mit Ihrer Animation zufrieden sind, können Sie auf Wunsch auch noch die Loop-Funktion (dauernd abspielen) aktivieren (8), ggf. zusätzlich noch die vorwärts-rückwärts Option (rechts neben 8). Damit wird die erst vorwärts, danach rückwärts, dann wieder vorwärts abgespielt.
- Bei langen Animationen wird die Timeline sehr lange. Was wir bislang erstellt haben, ist eine Szene. Sie können zur Vereinfachung auch zusätzliche Szenen anlegen (9), die nacheinander abgespielt werden können. Für selbstablaufende Szenen, so wie wir sie bislang erstellt haben, muss der Autoplay-Knopf (10) aktiviert sein. Für eine danach evtl. ablaufende zweite Szene darf für Szene 2 Autoplay aber nicht aktiviert sein. Die Verbindung beider Szenen erfolgt durch ein sog. Action Script (nächster Modul). Für diese und auch andere Skriptaktionen ist sogar eine komplette Aktionsspur vorhanden (11). Näheres zur Einbindung von ActionScripts erfahren Sie im nachfolgenden Kursmodul
- Speichern Sie Ihre Seite ab und sehen Sie sich eine Browservorschau an. Wenn Sie es bei nur einer Animationsspur belassen haben, sollte das Ganze so aussehen ( Abbildung dhtml4)
Tipps und weitere Hinweise:
Zeitablauf: Die Sekundenangaben im Zeitleistenfenster sind nur als sehr ungefähre Hilfe zu verstehen. In der Vorschau läuft bei wenig komplexen Animation in der Regel alles viel schneller ab. Insgesamt kommt es auch darauf an, wie komplex die Seite mit der Animation insgesamt ist und wie schnell der Rechner des Webbenutzers ist.
Start und Ende der Animation: Die Animation mit dem Laden der Seite und endet nach einmaligem Durchlauf, bzw. wiederholt sich, wenn dies mittels Loop eingestellt wurde (s.o.). Hierzu einige Hinweise:
- Die Animation beginnt ruckelig, wenn sie geladen wurde, sofern danach noch viel weiterer Seiteninhalt zu laden ist. Setzen Sie den ersten Keyframe deshalb ggf. auf unsichtbar oder legen ihn außerhalb des sichtbaren Fensters an. Lassen Sie die Bewegungsanimation erst nach einigen Sekunden beginnen, d.h. duplizieren Sie den ersten Keyframe an eine spätere Zeitleistenstelle. Damit hat die Seite Zeit komplett geladen zu werden und die Animation läuft danach glatt ab.
- Alternativ können Sie Ihre Floating Box auch erst später erscheinen lassen. Erstellen Sie eine Floating Box und verschieben den Keyframe in der Zeitleiste auf eine spätere Position (Golive dupliziert auch dann den Keyframe und setzt den Keyframe auf Zeitpunkt 0 auf unsichtbar).
- Wenn Sie in der Bewegungsanimation ein Objekt rechts oder unten aus dem Browserfenster bewegen wollen, bedenken Sie, dass Sie die Breite und das Ende des Browserfensters des Benutzers nicht kennen. Vielleicht hat er einen riesigen Bildschirm und sein Browserfenster sehr weit aufgezogen. Dann kann es passieren, dass die Floating Box am Ende der Animation noch im Fenster stehen bleibt. Vorsorglich können Sie den letzten Keyframe auch duplizieren und danach den letzten auf unsichtbar stellen.
Gerader oder gekrümmter Animationspfad: In den obigen Beispielen haben wir mit der Animationspfad-Voreinstellung "linear" gearbeitet. Wenn Sie einen Keyframe aktivieren und den Inspektor aufrufen, sehen Sie diese Voreinstellung für den jeweiligen Frame. Experimentieren Sie bei komplexeren Animationen auch mit der Option "Kurve". Die Option "zufällig" sollten Sie lieber nicht verwenden, da dadurch ein äußerst rechenintensiver Pfad erstellt wird. Auch für Kurven müssen deutlich mehr Berechnungen vorgenommen werden, Sie sollten sie deshalb nicht zu häufig verwenden.
Aufzeichnung des Animationspfades: Besonders interessant ist auch die Option "Aufzeichnen" (ebenfalls im Inspektor). Aktivieren Sie diese Option, nehmen im Layout die Floating Box und verschieben Sie per Drag and Drop entlang des von Ihnen gewünschten Animationspfades mit der gewünschten Geschwindigkeit. GoLive errechnet daraus automatisch neue Keyframes und Boxpositionen. In der Regel kommen dadurch hochkomplexe Animationen aus sehr vielen Keyframes zu Stande. Löschen Sie von Hand überflüssige Frames, glätten dazwischen den Animationspfad ggf. mit der Option "Kurve", ändern den Geschwindigkeitsablauf durch Verschieben der Keyframes und testen das Ergebnis.
Bilder und animierte Bilder innerhalb einer animierten Floating Box: Selbstverständlich können Sie auch Bilder in einer Floating Box einladen und entlang eines Animationspfades animieren. Besonders interessante Effekte erreichen Sie, wenn dieses Bild ein animiertes Gif darstellt. Der flügelschlagende, über die Seite fliegende Flugsaurier (Abbildung dhtml5) ist so erstellt. Das Flügelschlagen ist ein animiertes GIF, die Flugbewegung eine animierte Floating Box (zur Erstellung animierter Gifs siehe Modul 8)
Start der Animation auf Abruf: Die bislang gezeigten Beispiele laufen nach Laden der Seite ab, ggf. nachdem wir eine Verzögerung, wie oben beschrieben, eingebaut haben. Sie können die Animation aber auch durch Klick auf einen Link, ein Icon oder einen Knopf starten bzw. stoppen. Animationen können sich auch gegenseitig aufrufen. Dazu benötigen wir aber Script-Actions, zu denen wir im nächsten Teilmodul kommen.
Bevor wir zum nächsten Modul (Script-Actions) kommen, möchte ich Ihnen aber noch zwei weitere Beispiele zur Animation von Floating Boxes vorstellen. Diese verwenden die sehr hilfreiche Tiefenfunktion, den sog. z-Index ("Ebenen").
Im nächsten Beispiel (Abbildung dhtml6) sehen Sie eine stationäre Floating Box (könnte ein Bild beinhalten, im Beispiel habe ich einen formatierten Text sowie farbigen Hintergrund für die Box verwendet), über die von links nach rechts ein Schriftzug hinwegfliegt. Beim Rückfliegen fliegt er unter der stationären Box hindurch. Sie können sich vorstellen, wie ich dies erreicht habe. Die stationäre Box hat die Tiefe (z-Index) 2 (Keyframe aktivieren und im Inspektor einstellen), die Keyframes im von links nach rechts fliegenden Teil der zweiten (transparenten) Floating Box haben die Tiefe 1, auf dem Rückflug von rechts nach links haben sie die Tiefe 3. He höher die Ebene (also Richtung Betrachter liegend), desto größer die Tiefenzahl (ein bisschen verwirrend, sollte dann eigentlich Höhe statt Tiefe heißen, also verwenden wir lieber den Begriff z-index).
Zeitabhängige dhtml-Animation können Sie auch sehr sinnvoll verwenden, ohne dass sich auf dem Bildschirm laufend was bewegt. Sie können verschiedene Floating Boxen mit Inhalt mit Hilfe des z-Index aufeinanderstapeln und die Reihenfolge oder die Sichtbarkeit zeitabhängig ändern. Damit können Sie z.B. selbstablaufende Diashows produzieren oder einen "Textprompter" erstellen. Hierzu noch ein kleines Beispiel (Abbildung dhtml7). Sie können dieses Beispiel entweder durch unterschiedliche Sichtbarkeit der aufeinanderliegenden Floating Boxen oder durch unterschiedliche Ebenenreihenfolge erreichen. Für diejenigen, die bereits mit animierten Gifs vertraut sind: Es sind im Beispiel nacheineinander nicht etwa Bilder ausgetauscht, sondern ich habe ganz normalen getippten Text verwendet. Diese Animation ist also im Unterschied zu einem animierten Gif immer wieder sehr leicht änderbar.
Wichtiger Hinweis: Das dhtml-Modell für Netscape 6.0 ist anders als früher. Mit der Originalversion von GoLive5 erstellte dhtml-Seiten mit animierten floating boxes laufen nicht in Netscape 6. Bei GoLive (www.adobe.com/golive) können Sie aber ein NN6-Update für GoLive5 herunterladen. Gehen Sie genau entsprechend den Anweisungen vor, insbesondere bei der Änderung bereits existierender Seiten mit dhtml-Animationen. Dann funktioniert wieder alles. Neue Seiten werden nach dem Update gleich richtig, d.h. auch NN6-kompatibel erstellt.
Im nächsten Kapitel lernen Sie, wie Sie ihre dhtml-Animationen mit Skript-Aktionen steuern können und wozu Skript-Aktionen sonst noch Verwendung finden. Dann können Sie sich so richtig auf Ihren Webseiten austoben. Verschiedene Anwendungsmöglichkeiten dieser und v.a. anderer Animationstechniken werden wir uns dann noch in Modul 8 näher ansehen.
Extra-Fenster noch geöffnet? Hier wieder schließen.
