Fachartikel

Von 1997 bis 2005 erschienen Artikel von mir in den Computerfachzeitschriften PC Intern und Internet Intern. Nachfolgend finden Sie alle erschienenen Artikel aufgelistet. Eine kurze Beschreibung zeigt Ihnen, worum es in dem Artikel geht. Klicken Sie einfach auf den Link, um den gesamten Artikel zu lesen. Die Bilder in den Artikeln sind mit vergrößerten Darstellungen verknüpft.

Fachartikel

LiveMotion im Einsatz

LiveMotion im Einsatz

Animation: Heft 02/2001 (S. 143) 7 Seiten

Animierte Navigationsleisten erstellen

Es ist noch nicht lange her, da präsentierte Adobe ein Programm zur Erstellung von Animationen: LiveMotion. Viele dachten dabei schnell an ein Pendant zu Flash - das ist das leistungsstarke Programm aber nicht. Zu unterschiedlich sind die Grundansätze, wie unser Workshop zeigen wird. Die leichte Erlernbarkeit und eine effektive Arbeitsweise sind die Stärken LiveMotions

Dieser Workshop soll genutzt werden, um die besonderen Stärken von LiveMotion darzustellen. Aber auch die Schwachstellen sollen nicht verborgen bleiben. Außerdem wird an einigen Punkten auf die gravierenden Unterschiede zu Flash hingewiesen. Es soll mit möglichst einfachen Mitteln eine aufwendige Navigationsleiste mit einer kleinen Animation erstellt werden. Außerdem werden Sie die verschiedenen Rollover-Effekte und deren Funktionalität kennen lernen.

Die Schaltflächen der Navigationsleiste sollen dann dazu eingesetzt werden, um unterschiedliche Fotos in der Komposition anzuzeigen. Dafür ist dann eine interessante Sonderfunktion der Rollovers notwendig. Und zusätzlich soll der Start der Animation noch zu einem ganz bestimmten Zeitpunkt erfolgen - nämlich dann, wenn der Anwender eine bestimmte Schaltfläche anklickt. Das neue Dokument, das Sie mit der Tastenkombination [Strg]+[N] erstellen können, erhält eine Breite von 570 Pixeln und eine Höhe von 400 Pixeln bei einer Frame-Rate von 15 Bildern pro Sekunde. Das Dokument wird in LiveMotion übrigens Komposition genannt.

Grundelemente der Komposition erstellen

Wir benötigen jetzt einige Grundelemente. Und zwar werden Rechtecke mit dem Werkzeug für abgerundete Ecken benötigt. Dafür bietet LiveMotion ein eigenes Werkzeug an, das auch über die [R]-Taste aufgerufen werden kann. Die Stärke der Rundung wird im Eigenschaften-Palettenfenster eingestellt. Im Beispiel wird beim ersten Rechteck eine Rundung von 25 Pixeln benötigt. Sie können das erste Rechteck genau in der benötigten Größe von 560 x 95 Pixeln aufziehen - leichter ist es aber, das präzise Maß nachträglich im Transformieren-Bedienfeld einzustellen. Welche Farbe Sie für das Objekt vorgeben, ist zunächst egal. Die Maße und die benötigten Rundungen sehen Sie in der Abbildung. Beim schmalsten Rechteck - das fast wie eine Linie aussieht - ist die Rundung egal.

LiveMotion im Einsatz
Die benötigten geometrischen Elemente

Mit Aliasen arbeiten

LiveMotion bietet eine recht praktische Funktion an, wenn Sie ein Objekt mehrfach benötigen. Was in Flash mit Symbolen realisiert wird, erledigt LiveMotion mit so genannten Aliasen. Wird eines der Duplikate verändert, werden alle damit verbundenen Aliase ebenfalls angepasst. Am schnellsten wird diese Funktion aufgerufen, wenn Sie nach dem Markieren des betreffenden Objekts die Tastenkombination [Strg]+[M] aufrufen. Erstellen Sie mit diesem Verfahren von dem 90 x 25 Pixel großen Rechteck vier Aliase, von dem schmalsten Rechteck neun Alias-Objekte.

Objekte beschneiden

Ein weiteres, sehr praktisches Werkzeug, ist das "Beschneiden"-Werkzeug. Etwas gleichartiges suchen Sie in Flash vergeblich. Sie können es verwenden, um von Objekten Teile zu verdecken, ohne dass diese gelöscht werden. Ähnliche Funktionen sind sonst eher von Satzprogrammen, wie etwa dem PageMaker, bekannt. Kürzen Sie die beiden großen Rechtecke um 25 Pixel, und zwar einmal oben und einmal unten, wie Sie es abgebildet sehen.

LiveMotion im Einsatz
Von Objekten können Teile abgeschnitten werden

Stile einsetzen

Diese tristen geometrischen Formen können Sie nun sehr schnell in attraktive Objekte umwandeln, da LiveMotion Ebeneneffekte unterstützt, wie sie aus anderen Adobe-Programmen bereits bekannt sind - wie etwa Photoshop oder ImageReady. Die Stile werden in einem gleichnamigen Palettenfenster bereitgestellt. Es werden viele unterschiedliche Ebeneneffektzusammenstellungen - Stile - mit ausgeliefert, bis hin zu fix und fertigen Animationen und Rollover-Effekten, die nämlich auch in einem Stil gespeichert werden können. Da Sie ja einige Objekte mit Hilfe der Alias-Funktion erstellt haben, brauchen Sie nur einige Objekte vor dem Zuweisen des Stils zu markieren. Der Effekt unseres Beispiels heißt "Blaues Metall".

LiveMotion im Einsatz
Mit den Stilen lassen sich schnell attraktive Effekte erzeugen

Effekte ändern

Das Zuweisen des Stils war sehr einfach. Natürlich können die dabei verwendeten Effekte auch nachträglich verändert werden. Dabei fällt eine etwas ungewohnte Arbeitstechnik des Programms auf: Anders als beispielsweise in Bildbearbeitungsprogrammen werden hier nämlich die Ebenen nicht dem gesamten Dokument, sondern den einzelnen Objekten zugewiesen. Deren Verwaltung erfolgt über das Objektebenen-Palettenfenster. Bei jedem Objekt können verschiedene Ebenen eingefügt werden, an denen dann die Ebeneneffekte eingesetzt werden. In dem Beispiel soll der Verlauf verändert werden.

Dazu muss zunächst die obere Ebene markiert werden. Die verfügbaren Ebeneneffekte werden in vier verschiedene Kategorien aufgeteilt: Im Einstellen-Palettenfenster lassen sich beispielsweise Kontrast, Helligkeit und Sättigung verändern. Über das 3D-Palettenfenster werden dreidimensionale Effekte wie etwa Relief, Kräuselung oder eingestanzte Wirkungen erreicht. Im Ebenen-Palettenfenster kann die Ebene verschoben oder vergrößert werden. Das Verlaufs-Palettenfenster dient zum Einstellen des Verlaufs. Ändern Sie hier den Winkel bei allen Objekten von 135° auf 315°. Damit wird der Verlauf "umgedreht". Es scheint danach so, als würden die Objekte von oben links beleuchtet. Das ist ein natürlicherer Eindruck.

LiveMotion im Einsatz
Die Objekte haben alle denselben Effekt erhalten

Hintergrundbild verwenden

Auch beim Hintergrund unterscheidet sich LiveMotion von Flash. Neben einfarbigen Hintergründen können Sie hier auch Bitmap-Bilder verwenden. In der Struktur-Bibliothek werden verschiedene Muster mitgeliefert, die dafür verwendet werden können. Ziehen Sie das gewünschte Bild einfach per Drag & Drop in den Hintergrund des Dokuments. Erst nach dem Einfügen des Hintergrunds können die Farben der Objekte richtig beurteilt werden. In unserem Beispiel wurde ein schwach "wolkiger" Hintergrund ohne erkennbare Strukturen verwendet, der harmonisch zu den bisher benutzten Farben passt.

Maße korrigieren

Nun ist noch eine Korrektur notwendig: Wenn Sie mit genauen Vorgaben für Abmessungen von Objekten arbeiten, werden Sie bemerken, dass diese nach dem Zuweisen von Ebeneneffekten nicht mehr stimmen. So wird beispielsweise die Schattenebene zum Objekt hinzu addiert. Da diese Veränderungen vorher schlecht berechenbar sind, ist es leichter, die Werte nachträglich wieder anzupassen. So sollte unsere Schaltfläche das Maß 90 x 30 Pixel erhalten. Stellen Sie diesen Wert im Transformieren-Palettenfenster neu ein. Verfahren Sie mit den beiden großen Rechtecken genauso. Hier müssen Sie aber beachten, dass wir nachträglich 25 Pixel abgeschnitten haben, um jeweils eine Rundung zu verdecken. Die neuen Maße lauten deshalb 560 x 70 Pixel für das größere und 530 x 60 Pixel für das kleinere Rechteck. Die schmalen Rechtecke können Sie auf dem veränderten Wert belassen.

Präzises Ausrichten der Elemente

Da jetzt alle Elemente vorhanden sind, können wir uns dem genauen Platzieren widmen. Dazu sind in der Regel viele einzelne Arbeitsschritte nötig, die wir natürlich so effektiv wie möglich abarbeiten wollen. Als Erstes soll das größte Rechteck in der horizontalen Mitte des Dokuments mit einem gleichmäßigen Abstand zum oberen und seitlichen Rand der Komposition angeordnet werden. Da es keine Ausrichtungsoption zum Dokument gibt, muss die Aufgabe durch Rechenarbeit gelöst werden. Sie wissen, dass die Komposition 570 Pixel breit ist, das Objekt aber nur 560 Pixel. Um einen gleichmäßigen Abstand zu erreichen, ist also ein x- und y-Wert von 5 nötig, da diese Maße immer von der oberen linken Ecke der Komposition aus gemessen werden. Geben Sie diese Werte nach dem Markieren des Objekts im Transformieren-Palettenfenster ein.

Ausrichten zum Rand

Die Ausrichtung der beiden großen Rechtecke zueinander muss auf zweierlei Arten erfolgen: Markieren Sie beide Rechtecke und rufen Sie die Funktion "Objekt/Ausrichten/Horizontale Mitten" auf. Damit wird das kleinere Rechteck mittig zum größeren ausgerichtet. Anschließend wird wieder das Transformieren-Palettenfenster eingesetzt, damit die vertikale Ausrichtung eingestellt werden kann. Wir haben hier einen y-Wert von 60 eingegeben, sodass das kleinere Rechteck an der Unterkante des größeren platziert wird. Da das kleinere Rechteck nach dem größeren konstruiert wurde, benötigen Sie jetzt die Funktion Objekt/Anordnen/Nach hinten stellen. Dabei darf nur das kleinere Rechteck markiert sein, damit es unter das größere geschoben wird.

Bei den Schaltflächen kommt wieder eine andere Funktion zum Tragen. Außerdem sind hier mehrere Arbeitsschritte nacheinander notwendig. Platzieren Sie zuerst die linke der Schaltflächen mit Hilfe des Transformieren-Fensters auf die Position x=35 und y=78. Dann folgt die rechte Schaltfläche, die mit der Funktion Objekt/Ausrichten/Oben bündig zur ersten Schaltfläche angeordnet wird. Die x-Position ist bei 440. Was jetzt noch fehlt, ist eine präzise horizontale Ausrichtung zum darunter liegenden größeren Rechteck. Dazu muss ein "Hilfsobjekt" erstellt werden. Gruppieren Sie deshalb die beiden Schaltflächen mit der Tastenkombination [Strg]+[G]. Diese Gruppe kann jetzt zum darunter liegenden Rechteck mit der Funktion "Objekt/Ausrichten/Horizontale Mitte" ausgerichtet werden. Die Hilfsgruppe benötigen Sie nun auch nicht mehr. Heben Sie deshalb die Gruppierung wieder auf. Am schnellsten geht das mit der Tastenkombination [Strg]+[U].

Verteilen von Objekten

Um die letzten drei Schaltflächen präzise zwischen den anderen beiden auszurichten, sind nur zwei Arbeitsschritte nötig - vorausgesetzt, alle fünf Schaltflächen sind bereits ausgewählt. Rufen Sie zuerst die Funktion "Objekt/Verteilen/Horizontal" auf, um die Abstände zwischen den Objekten gleichmäßig aufzuteilen. Nun benötigen Sie die Funktion "Objekt/Ausrichten/Oben", damit alle Objekte auf derselben Höhe platziert werden. Das war's zunächst. Bevor die Linien ausgerichtet werden, benötigen wir erst noch weitere Elemente. Schließlich fehlen ja noch einige Textobjekte.

Interessant gestaltete Schriftzüge

Wir benötigen nun einerseits eine Überschrift für die Seite und andererseits die Beschriftungen der Schaltflächen. Tippen Sie für die Überschrift nach dem Aufruf des Textwerkzeugs den Text "FOTOS" mit den gezeigten Schriftattributen ein:

Markieren Sie dann eines der bereits fertig gestellten Objekte und kopieren es - zum Beispiel über das Kontextmenü der rechten Maustaste. Wählen Sie dann wieder den Schriftzug aus und übertragen Sie die verwendeten Stile mit der interessanten Funktion Stil einfügen aus dem Kontextmenü. Der Stil muss etwas angepasst werden. Stellen Sie dazu den Verlauf auf den Wert 135° ein. Der Schriftzug wird dann mittig zum größten Rechteck ausgerichtet.

Für die nun folgenden Beschriftungen der Schaltflächen wird die Schriftgröße auf 15 Punkt reduziert. Außerdem kommt die Schrifttype Futura Bold zum Einsatz. Für diese Texte wird der Stil Getönter Rand verwendet. Die Ausrichtung der Schriftzüge zur jeweiligen Schaltfläche nehmen Sie auf zwei verschiedene Arten vor: Die vertikale Ausrichtung stellen Sie im Transformieren-Palettenfenster ein, die y-Position ist für alle Objekte 82 Pixel. Anschließend markieren Sie jeweils den Schriftzug und die dazugehörende Schaltfläche und aktivieren die Option "Objekt/Ausrichten/Horizontale Mitten".

Ausrichten der Linien

Als letzte Elemente müssen nun noch die Linien ausgerichtet werden. Hier bieten sich ebenfalls wieder zwei verschiedene Ausrichtungsvarianten an. Beim Ausrichten sollten Sie erst einmal die fünf linken Linien markieren und mit der Funktion "Objekt/Ausrichten/Links" ausrichten. Zur vertikalen Ausrichtung sollte der y-Wert im Transformieren-Palettenfenster jeweils um 6 Pixel erhöht werden. Wiederholen Sie diese Aktion mit den rechten Linien. Gruppieren Sie zur weiteren Bearbeitung die beiden Liniengruppen jeweils mit der Tastenkombination [Strg]+[G]. Die beiden Gruppen sollen jetzt rechts und links neben dem Titel-Schriftzug angeordnet werden. Verschieben Sie zunächst die Linien "per Augenmaß" und richten sie vertikal zum großen Rechteck aus. Gruppieren Sie nun die beiden Gruppen erneut und richten Sie diese horizontal zentriert zum darunter liegenden Rechteck aus. Die vertikale Ausrichtung erfolgt zum Schriftzug.

LiveMotion im Einsatz
Mehreren Ebenen werden verschiedene Effekte zugewiesen

Bitmap-Bilder einfügen

Ein Objekt wird noch zur Komplettierung der Komposition benötigt: ein Foto. Rufen Sie das Bild über die Funktion "Datei/Platzieren" auf. Es wird im Zentrum des Dokuments eingefügt. Verschieben Sie das Foto in der Vertikalen, sodass es im unteren, freien Bereich untergebracht ist. Das Foto soll ebenfalls einen Effekt erhalten. Markieren Sie dazu das größte Rechteck und kopieren Sie es über das Kontextmenü. Fügen Sie dann beim Foto den Stil mit der Funktion "Stil einfügen" aus dem Kontextmenü ein. Das Foto bleibt dabei unberührt, die Effekte werden aber zugewiesen.

Das Foto konturieren

Der Stil hat in der obersten Ebene eine schwache Kontur, die nun verstärkt werden soll. Markieren Sie dazu im Objektebenen-Palettenfenster die Ebene mit der Bezeichnung "Outline". Wechseln Sie dann zum Deckkraft-Palettenfenster und erhöhen Sie die Objektebenen-Deckkraft auf 100%. Schließlich wird noch im Farbe-Palettenfenster Schwarz als Hintergrundfarbe eingestellt. Damit ist die Komposition fertig. Nun können die Animationsarbeiten beginnen.

Rollover-Veränderungen einstellen

Bevor Sie Rollover-Stati verwenden, müssen Sie diese erst einmal definieren. Mit den Rollover-Stati legen Sie das Aussehen eines Objekts fest, wenn ein Ereignis eintritt - zum Beispiel eine Mausaktion. So könnte eine Schaltfläche aufleuchten, wenn sie angeklickt wird. LiveMotion bietet im Rollover-Palettenfenster scheinbar nur wenige Aktionen an, bei denen ein Ereignis ausgelöst werden kann:

Der Status Normal zeigt das Objekt im normalen Zustand an, wenn keinerlei Mausaktionen erfolgen. Das Ereignis Darüber tritt ein, wenn sich der Mauszeiger über dem Objekt befindet. Klickt der Betrachter auf das betreffende Objekt, tritt das Ereignis Gedrückt ein. Befindet sich der Mauszeiger nicht mehr über dem Objekt, tritt das Ereignis Danach ein. Eher unscheinbar ist die letzte Option: "Eigener Status". Dahinter verbirgt sich allerdings eine sehr flexible Funktion: Sie können hier eigene Stati festlegen. So könnten Sie beispielsweise zwei Stati mit den Namen "Versteckt" und "Sichtbar" erstellen. Stellen Sie dann die Objektdeckkraft bei der ersten Variante auf 0, bei der zweiten auf 100. Diese beiden Stati können Sie dann aktivieren, um das Objekt sichtbar zu machen oder es zu verstecken.

Eigene Rollover-Stati erstellen

Diese Option soll auch für das Beispiel verwendet werden. Für das Foto sollen neben dem normalen Status fünf weitere Stati eingefügt werden. Markieren Sie dazu das Bildobjekt und öffnen Sie das Rollover-Palettenfenster. Aktivieren Sie das Papier-Symbol, um einen neuen Rollover-Status zu erzeugen. Dabei wird standardmäßig der "Darüber"-Status eingesetzt. Nach dem Aufruf sehen Sie einen neuen Eintrag im Rollover-Palettenfenster. Am Vorschaubild erkennen Sie bereits, dass ein Duplikat des Objekts erstellt wurde. Außerdem sehen Sie in dem Listenfeld den anderen Status. Bei dem neuen Status soll das Foto ausgetauscht werden. Dazu gibt es in der Fußleiste des Rollover-Palettenfenster die zweite Schaltfläche.

LiveMotion im Einsatz
Die verwendeten Verlaufseinstellungen

Wählen Sie in dem Dialogfeld, das Sie damit öffnen, das neue Foto aus. Im Kompositionsfenster sollten Sie dann das neue Foto wiederfinden, das vorherige ist nicht mehr zu sehen. Das alte Foto ist aber nicht verschwunden, wie ein Blick in das Rollover-Palettenfenster belegt. Dort ist beim Normal-Status noch immer ein Vorschaubild des alten Fotos zu sehen. Beim Darüber-Status wird dagegen das Vorschaubild des neuen Fotos angezeigt. Außerdem ist unter diesem Eintrag nun eine neue Zeile mit der Bezeichnung Änderungen zu sehen. Es soll keiner der vorgegebenen Rollover-Stati angewendet werden, sondern ein eigener.

Rufen Sie aus dem Listenfeld des neuen Status die Option Eigener Status auf. Geben Sie in dem Dialogfeld einen Namen ein, bespielsweise die Bezeichnung "Foto2". Der neue, eigene Status stellt keine Funktionalität dar. Im Vorschaumodus passiert gar nichts. Sie legen damit lediglich eine andere Darstellung des Objekts an, die Sie von einem anderen Objekt aus nutzen können. Auf ähnliche Art sollen nun noch einige weitere Stati eingestellt werden. Dazu benötigen wir als Erstes ein Duplikat des Ausgangsbilds, da das Original später verändert werden soll. Markieren Sie den Normal-Status und duplizieren Sie ihn. Sie sehen dann einen neuen Eintrag unterhalb des Originals. Benennen Sie diesen neuen Status als "Foto1". Erstellen Sie jetzt weitere neue Stati, um insgesamt fünf verschiedene Fotos zu erhalten. Benennen Sie diese Stati fortlaufend. Im Kompositionsfenster können Sie jeweils kontrollieren, ob das richtige Foto eingefügt wurde.

Die Liste im Rollover-Palettenfenster ist ziemlich lang geworden. Sie sollte ungefähr wie abgebildet aussehen. Die eigenen Stati sind dort alphabetisch sortiert aufgeführt.

LiveMotion im Einsatz
Die Strukturen können beispielsweise für den Hintergrund verwendet werden

Normal-Status festlegen

Bevor die neuen Stati angewendet werden können, muss noch der Normal-Status angepasst werden. Momentan ist er ja noch identisch mit dem Status "Foto1". Markieren Sie den Normal-Status. Blenden Sie nun im Objektebenen-Palettenfenster die vier Ebenen des Bildobjekts aus, um es unsichtbar zu machen. Damit wird das Objekt im Normal-Status unsichtbar.

Nach dem Ändern sehen Sie, dass alle Stati entsprechend geändert wurden. Das Bild ist nun in allen Stati verschwunden. Wechseln Sie zum zweiten Status - Foto1 - und blenden Sie die ausgeblendeten Ebenen dort wieder ein. Sie erkennen am Vorschaubild im Rollover-Palettenfenster, dass dort das Bild wieder zu sehen ist, während es im Normal-Status nach wie vor unsichtbar bleibt. Wiederholen Sie diese Arbeitsschritte für alle fünf Stati, so dass einzig im Normal-Status das Bild unsichtbar ist. In allen anderen Stati sind dagegen alle Ebenen eingeblendet.

Das unsichtbare Bildobjekt wird benötigt, um das Foto zum fest definierten Moment erscheinen zu lassen. Solange das Bild unsichtbar sein soll, wird einfach der Normal-Status verwendet.

Anmerkungen zum SWF-Dateiformat

Beim Export in das Flash-Dateiformat mit der Dateiendung "swf" müssen einige Punkte bedacht werden. Der Vorteil dieses Dateiformats besteht darin, dass es vektorbasiert arbeitet und so kleine Dateigrößen entstehen. Ein Nachteil dieses Dateiformats besteht darin, dass es von Web-Browsern nur angezeigt werden kann, wenn ein entsprechendes Plug-In-Modul installiert ist. Alle Anwender, die dies nicht besitzen, können Ihre Animation nicht bewundern. Das sollte heute aber kaum noch ein Problem darstellen.

Den Vorteil der kleinen Dateigrößen durch die vektorbasierte Speicherung können Sie nur teilweise ausnutzen. Wenn Sie, wie wir in dem Beispiel, ein Bitmap-Bild verwenden, kann dieses natürlich nicht als Vektorgrafik gesichert werden. In diesem Fall entsteht beim Export ein Bitmap-Objekt. Aber auch offensichtliche Vektor-Objekte werden in Bitmaps umgewandelt - wenn Sie beispielsweise mit zusätzlichen Ebenen arbeiten, wie etwa bei den Schaltflächen. Da dies bei diesem Beispiel bei jedem Objekt vorkommt, bemerken Sie vom Vorteil der kleinen Datei nicht mehr allzu viel. Dies ist einer der Unterschiede zu Flash. Es ist sehr einfach mit den Stilen LiveMotions zu arbeiten - die dabei entstehenden Dateigrößen sind weniger schön. Die langen Übertragungszeiten werden viele Surfer abschrecken. So müssen Sie entscheiden, ob Ihnen das nette grafische Aussehen wichtiger ist als die Übertragungszeit. Bei gleichem Aufbau von einfachen geometrischen Objekten unterscheidet sich LiveMotion dagegen nur wenig von Flash, die Ergebnisse sind in etwa gleich groß. Grundsätzlich anders ist auch der Aufbau der Zeitleiste. Bei Flash werden Objekte in den Hauptphasen verändert. Bei LiveMotion sind es dagegen die Objekteigenschaften, die in der Zeitleiste alle einzeln angepasst werden können. Ein Nachteil ist hier nur die lange Auflistung, die sich so ergeben kann - ansonsten ist es Geschmacksache, was besser gefällt.

Rollover-Stati anwenden

Nachdem die Stati jetzt alle definiert sind, sollen sie eingesetzt werden. Und zwar sollen die Fotos wechseln, je nachdem, welche Schaltfläche der Betrachter anklickt. Bei der Schaltfläche "Fotos 1" soll das Ereignis "Fotos1" eintreten und so weiter. Es soll mit einer leeren Fläche begonnen werden.

Achten Sie darauf, dass einer der Foto-Stati des Fotos sichtbar ist - aber nicht der Normal-Status. Markieren Sie nun die erste Schaltfläche und öffnen Sie das Rollover-Palettenfenster. Erstellen Sie einen neuen Status, und zwar mit der Option Gedrückt, da das Ereignis beim Anklicken der Schaltfläche eintreten soll.

Vor dem Eintrag finden Sie ein Symbol. Damit können Sie ein Zielobjekt bestimmen. Sie können also mit der Schaltfläche beispielsweise das Foto "fernsteuern". Klicken Sie dazu einfach auf das Symbol und ziehen Sie den Mauszeiger nun auf das Objekt, das ferngesteuert werden soll - also das Foto. Lassen Sie den Mauszeiger los, wenn Sie den Markierungsrahmen des Fotos im Kompositionsfenster sehen. Im Rollover-Palettenfenster finden Sie danach ein neues Symbol: Der eingedrückte Eintrag symbolisiert den Zusammenhang zwischen Status und Zielobjekt. Wählen Sie aus dem Listenfeld den Eintrag "Foto1" aus, falls dieser nicht schon eingestellt ist und prüfen Sie am Vorschaubild, ob das richtige Foto ausgewählt wurde.

Erstellen Sie einen weiteren Status. Sie benötigen dabei die Option Danach. Diese tritt ein, wenn der Besucher die Schaltfläche verlässt. Änderungen brauchen Sie hier zunächst nicht vorzunehmen. Wechseln Sie zur nächsten Schaltfläche. Dort finden Sie bereits die gerade eingestellten Stati vor, weil es sich ja um Alias-Objekte handelt. Allerdings ist das Zielobjekt noch nicht deklariert. Verwenden Sie für die zweite Schaltfläche den Status "Foto 2" mit den bekannten Arbeitsschritten als Zielobjekt. Alle anderen Einstellungen können bleiben, wie sie sind. Führen Sie diese Änderungen bei allen fünf Schaltflächen durch, so dass jeder Schaltfläche ein anderes Foto zugewiesen ist.

LiveMotion im Einsatz
Mit dem eingesetzten Hintergrund kann die Wirkung der Stile gut beurteilt werden

Objekte im Status ändern

Neben der Verwendung von Zielobjekten können Sie das Objekt auch selbst verändern. Hier können Sie auch wieder die Alias-Objekte nutzen. Sie brauchen nur eine der Schaltflächen anzupassen, alle anderen verändern sich automatisch. Markieren Sie eine Schaltfläche und wechseln Sie dort zum Gedrückt-Status. Öffnen Sie das Verlauf-Palettenfenster und markieren Sie den Endpunkt des Verlaufs.

Stellen Sie dann im Farbe-Palettenfenster den RGB-Farbton 255, 53, 0 ein. Damit ergibt sich ein Rotton. Da automatisch bei allen Alias-Objekten der Gedrückt-Status aktiviert wurde, sehen Sie alle Schaltflächen neu eingefärbt. Neben dem Gedrückt-Status soll auch noch der Darüber-Status angepasst werden. Dieser ist momentan noch nicht vorhanden: Da er dem Gedrückt-Status ähnlich angepasst werden soll, markieren Sie den Gedrückt-Status und kopieren ihn. Standardmäßig wurde der Darüber-Status beim Kopieren bereits eingestellt. Natürlich wird das Foto hier nicht benötigt. Markieren Sie deshalb diesen Eintrag und löschen Sie ihn mit einem Klick auf das Mülleimer-Symbol.

Durch das Kopieren wurde die neue Farbe mit übernommen. Sie soll im Darüber-Status noch verändert werden. Ändern Sie hier den RGB-Wert des Verlaufs-Endpunkts auf "255,154,0".

LiveMotion im Einsatz
Die Objekte sind fertig ausgerichtet

Eigenständige Animationen und Rollover-Effekte

Damit sind die Arbeiten, die die Schaltflächen betreffen, abgeschlossen. Nun soll etwas Bewegung in die Komposition kommen. Deshalb ist folgende Aufgabe zu lösen: Zunächst soll die Navigationsleiste nicht zu sehen sein. Erst wenn der Betrachter auf das große Rechteck klickt, soll die Navigationsleiste "herunterfahren" und die Schaltflächen erscheinen.

Dazu sind wieder einige vorbereitende Arbeiten notwendig. So sollten zunächst alle Elemente, die sich bewegen sollen, gruppiert werden. Ziehen Sie dazu mit dem Auswahl-Werkzeug einen Rahmen um diese Objekte auf, so dass Sie alle Markierungsrahmen sehen. Verwenden Sie zum Gruppieren die Tastenkombination [Strg]+[G].

Objekte in zeitunabhängige Gruppen umwandeln

Zeitunabhängige Gruppen sind eine Besonderheit von LiveMotion. Mit dieser Funktion können Sie Gruppen Animationen zuweisen, die unabhängig von der generellen Animation ablaufen können. Jedes Objekt kann in eine solche Gruppe umgewandelt werden. Markieren Sie die gerade neu erstellte Gruppe. Rufen Sie die Funktion "Zeitachse/Zeitunabhängige Gruppe erstellen" auf. Da nach dem Gruppieren das neue Gruppenobjekt in den Vordergrund geschoben wird, müssen Sie es mit der Funktion "Objekt/Anordnen/Nach hinten stellen" wieder in den Hintergrund verschieben.

Blenden Sie mit "Zeitachse/Zeitachsenfenster einblenden" das Fenster ein, in dem die Animationen eingestellt und verwaltet werden. Dort erkennen Sie nun ein Symbol vor dem Gruppeneintrag. Ein Doppelklick öffnet die Ansicht der unabhängigen Animation. In dieser Ansicht wird gut erkennbar, dass Sie nun über eine weitere Zeitachse verfügen. Diese kann genauso genutzt werden wie die Zeitachse der Hauptanimation.

LiveMotion im Einsatz
Die Kontur des Fotos entsteht durch eine leicht vergrößerte zusätzliche Ebene

Herausfahren der Navigationsleiste

Innerhalb dieser unabhängigen Animation soll nun die Navigationsleiste herunterfahren. Auf der rechten Seite des Zeitachsenfensters wird die Dauer der Animation festgelegt. Ziehen Sie den Zeitbalken bis auf 2 Sekunden auf - so lange soll das Herunterfahren dauern. Wechseln Sie mit der Zeitmarke - der roten Markierungslinie - zum Ende der Bewegung.

Animationsaufbau

Der Animationsaufbau funktioniert gänzlich anders, als es beispielsweise aus Flash bekannt ist. Im Zeitachse-Palettenfenster werden nämlich die meisten Attribute eines Objekts aufgeführt. Klappen Sie eines der Objekte auf: Dann finden Sie in verschiedenen Kategorien alle Eigenschaften eines Objekts aufgelistet - wie etwa Position, Ebenenfarben, Deckkraft und weitere Attribute.

LiveMotion im Einsatz
Die Textattribute können über das Eigenschaften-Palettenfenster angepasst werden

Zum Festlegen einer Animation, muss nun die zu animierende Eigenschaft gesucht werden. In unserem Beispiel ist dies die Position der Gruppe. Öffnen Sie deshalb die Transformieren-Attribute und aktivieren Sie das Stoppuhr-Symbol für die Position. Damit wird in dem aktuellen Bild die Position der Gruppe "fixiert". Wechseln Sie mit der Zeitmarke zum Start der Animation und verschieben Sie dort die Gruppe um 53 Pixel nach oben, sodass sie vollständig hinter dem großen Rechteck verschwindet. Am schnellsten erledigen Sie das mit den Pfeiltasten der Tastatur. Bedenken Sie, dass Sie Objekte um zehn Pixel verschieben, wenn Sie zusätzlich die [Umschalt]-Taste gedrückt halten.

Kehren Sie zur Hauptansicht der Animation zurück. Am schnellsten geht das mit dem Symbol links oben über der Liste der Objekte. In der Hauptansicht wird jetzt ein "abgeschnittener" Zeitbalken angezeigt. Daran erkennen Sie die Animation innerhalb der zeitunabhängigen Gruppe.

LiveMotion im Einsatz
So sollte die fertige Navigationsleiste aussehen

Anwenden der zeitunabhängigen Animation

Als letzten Arbeitsschritt dieses Workshops soll die gerade erstellte Animation der FOTOS-Schaltfläche zugewiesen werden. Dabei muss wieder ein "Kniff" angewendet werden, um folgende Situation zu vermeiden: Momentan sind die Schaltflächen aktiv, obwohl sie unter dem großen Rechteck liegen. Klicken Sie, erscheinen die dazugehörenden Fotos - das ist natürlich in dieser Art nicht erwünscht. Um dieses Verhalten zu vermeiden, gehen Sie folgendermaßen vor: Ziehen Sie dann den Zeitbalken der Komposition auf eine Animationslänge von einem Bild auf. Wird dann die Startmarke der Gruppe auf das zweite Bild gesetzt, ist die Gruppe im ersten Bild nicht vorhanden - so kann nicht versehentlich auf die Schaltflächen geklickt werden.

Um erst nach einer Anwender-Reaktion zum zweiten Bild zu wechseln, fügen Sie beim ersten Bild ein Anhalten-Verhalten ein. Achten Sie darauf, dass im Ziel-Listenfeld die Option "Komposition" eingestellt ist. Klicken Sie dazu auf das Symbol in der zweiten Spalte des Zeitachsen-Fensters. Stellen Sie die Anhalten-Verhaltensweise für die Gruppe ein. Damit wird der Film gestoppt.

LiveMotion im Einsatz
Das importierte Foto komplettiert die Komposition

Markieren Sie den FOTOS-Schriftzug und erstellen Sie einen neuen Gedrückt-Rollover-Status. Achten Sie darauf, dass der neue Status aktiviert ist, und rufen Sie das Verhalten bearbeiten-Symbol in der Fußleiste des Rollover-Palettenfensters auf. Stellen Sie im Verhalten bearbeiten-Dialogfeld zunächst die Option Gehe zu relativer Zeit ein. Damit können Sie eine bestimmte Bildanzahl vor- oder rückwärts gehen - in unserem Fall ein Bild vorwärts. Sie können bei Bedarf auch mehrere nacheinander einsetzen. Sie werden in der Reihenfolge der Auflistung ausgeführt. Nachdem Sie ein Bild vorwärts gegangen sind, soll nun die zeitunabhängige Animation abgespielt werden. Achten Sie deshalb besonders darauf, dass diese Bezeichnung im Ziel-Listenfeld aufgeführt wird. Nach dem Bestätigen sehen Sie das Verhalten-Symbol neben dem Gedrückt-Status. So erkennen Sie sofort, wenn ein Status mit einem Verhalten verknüpft ist.

Wozu diese ganzen Arbeitsschritte eigentlich gut waren? Nun, wenn Sie jetzt abschließend den Startpunkt der Gruppe auf das erste Bild setzen, sind die Schaltflächen zu Beginn der "Animation" noch nicht sichtbar - können also auch nicht bedient werden. Erst nach dem Anklicken des Schriftzugs werden sie durch das Wechseln zum nächsten Bild sichtbar. Aber dann können sie nicht mehr versehentlich aktiviert werden, da die Animation dann sofort abgespielt wird. Abschließend können Sie nun noch den Schriftzug im "Gedrückt"-Status anpassen.

LiveMotion im Einsatz
Der Normal-Status wurde ausgeblendet

Ergebnisse im Flash-Format speichern

Das Ergebnis können Sie nun entweder mit der Funktion "Datei/Vorschau in" im Webbrowser betrachten, oder Sie sehen es sich direkt im Arbeitsbereich an, indem Sie die Schaltfläche mit dem Handsymbol in der Werkzeugleiste ganz unten rechts verwenden. Nachdem Sie nun die Animation so ausgiebig begutachtet haben und alles in Ordnung ist, fehlt nur noch eines: das Speichern im richtigen Dateiformat.

Um die Einstellungen für den Export vorzunehmen, öffnen Sie mit der Funktion "Datei/Exporteinstellungen" das Exportieren-Palettenfenster. In dem Palettenfenster finden Sie alle Export-Optionen des jeweiligen Dateiformats. Anders, als man es erwarten könnte, entsteht beim Export nur eine einzige Datei. Die umgewandelten Bitmap-Bilder sind in die SWF-Datei integriert. Sie können also einzelne Bilddateien nicht gesondert bearbeiten oder weiterverwenden.

Vor diesem Hintergrund ist es nicht weiter verwunderlich, dass im Exportieren-Dialogfeld auch die bekannten Webdateiformate JPEG, GIF und PNG aufgeführt werden. Damit legen Sie fest, in welchem Dateiformat die konvertierten Bilder gesichert werden sollen. Um beurteilen zu können, welche Einstellung am besten geeignet ist, sollten Sie einen Status verwenden, bei dem möglichst alle wichtigen Bildelemente im Kompositionsfenster zu sehen sind. Markieren Sie dann im Exportieren-Palettenfenster die Vorschau-Option. Sie können den Bildtyp global vorgeben. Dann werden alle Bilder mit derselben Einstellung konvertiert. Ein Beispiel ist eine Qualität von 70 %. Damit entsteht aber eine recht große Datei. Alternativ können Sie auch einzelne Objekte markieren und diesen eigene Werte zuweisen. Dazu dient das links abgebildete Symbol in der Fußleiste des Palettenfensters. Es ist nur dann verfügbar, wenn Objekte in der Komposition markiert sind.

LiveMotion im Einsatz
Das Foto erhält unterschiedliche - eigene - Rollover-Stati

Ein aussagekräftiges Protokoll

Wenn Sie die Vorschau mit der Funktion "Datei/Vorschau in" betrachten, finden Sie unter dem Bild einen Link. Damit öffnen Sie eine zweite HTML-Seite, in der alle Daten zur Animation protokolliert sind. In diesem Report werden alle wichtigen Fakten zur SWF-Datei zusammengefasst. So finden Sie dort beispielsweise die Download-Zeiten für verschiedene Übertragungsgeschwindigkeiten.

Außerdem werden hier auch alle Bilder mit den für sie verwendeten Einstellungen und den sich daraus wiederum ergebenden Dateigrößen aufgelistet. So können Sie beispielsweise leicht prüfen, welches Element des Dokuments am meisten Platz beansprucht, und gegebenenfalls die Einstellungen für dieses Objekt anpassen. Wenn Ihnen in der Vorschau die Animation zu schnell oder zu langsam abläuft, können Sie die Frame-Rate im Exportieren-Palettenfenster verändern. Dabei bleibt die Kompositionseinstellung erhalten. Nur für den Export wird der veränderte Wert verwendet.

LiveMotion im Einsatz
Im Gedrückt-Status wird das Foto ausgetauscht

Wenn Sie später die Seite speichern, erstellt LiveMotion diesen Report ebenfalls automatisch. Sie finden ihn im selben Verzeichnis wie die SWF-Datei. Außerdem wird noch eine HTML-Datei erzeugt, in der die SWF-Datei platziert wird. Dazu muss allerdings in den Kompositionseinstellungen die Option "HTML-Datei erstellen" aktiviert sein. Sind alle Einstellungen ausgiebig ausgetestet, rufen Sie die Funktion "Datei/Exportieren als" auf und speichern die Datei im SWF-Dateiformat.

LiveMotion im Einsatz
Neben einer Vorschau im Webbrowser liefert liveMotion auch einen ausführlichen Report mit allen Fakten zur SWF-Datei

Zurück