Es muss nicht immer nur HTML sein

Neben den klassischen Webeditoren wie Dreamweaver, GoLive oder HomeSite sowie zahllosen anderen HTML-orientierten Tools hält der Markt eine Unzahl nützlicher Hilfsmittel für den Webdesigner bereit. Wir haben fünf davon näher unter die Lupe genommen und präsentieren ihre Möglichkeiten im praktischen Einsatz.

Dabei haben wir neben kommerziell vertriebenen Produkten wie dem Animationswerkzeug Visual GIF Animator und dem 3D-Webeditor iSpace auch die Shareware-Anbieter berücksichtigt: Oft finden sich gerade in dieser Szene hervorragende Programmierer, die ihre Erzeugnisse günstig anbieten. Ein Paradebeispiel dafür ist ein höchst raffinierter Menügenerator, mit dem sich ohne Programmierung DHTML-basierte Pop-ups und ganze Menüsysteme erstellen lassen, die unter allen gängigen Browsern tadellos funktionieren.

Alle vorgestellten Tools ordert man am besten direkt von der Website des Herstellers; die meisten davon sind per Download auch in einer Testversion zu haben. Wer sein Herz für ein oder mehrere der gezeigten Produkte erwärmen kann, zahlt allerdings neben der geringen Nutzungsgebühr einen hohen Preis: Fast alle gezeigten Tools verführen zu stundenlangem Pröbeln, Umgestalten und Testen.

Auch im Flash-Zeitalter ist GIF-Animation nach wie vor ein beliebtes Mittel, einer ansonsten statischen Webseite ein bisschen Leben einzuhauchen. Die meisten Programme zum Erzeugen bewegter Grafiken arbeiten formatnah: Die Animationen werden Frame für Frame aus einzelnen GIF-Bildern zusammengestellt; allenfalls bietet das Programm noch einige Spezialeffekte wie automatisch erzeugte Überblendungen zwischen zwei GIFs.

Der Visual GIF Animator aus dem dänischen Hause Matchware, das daneben für seine Multimedia-Software Mediator bekannt ist, funktioniert anders. In diesem Programm stellt man die Animation objektorientiert aus einzelnen Elementen zusammen. Effekte und Objektbewegungen bringt man anhand einer Timeline millisekundengenau auf die Reihe. Zum Schluss exportiert man die Animation im Animated-GIF- oder AVI-Format. Für GIF-Animationen kann beim Exportvorgang die Maximalgrösse der erzeugten Datei angegeben werden. Visual GIF Animator bietet damit ähnliche Möglichkeiten wie das leider nicht mehr erhältliche Headline Studio vom ehemaligen Hersteller Metacreations.

Anhand eines einfachen Beispiels - der Schriftzug "Forever InfoWeek" erscheint mit zwei Animationseffekten auf einem Banner - lässt sich die auf den ersten Blick ungewohnte Funktionsweise des Programms rasch erlernen.

• Öffnen Sie das Programm und wählen Sie aus dem Willkommensdialog die Option Neues Dokument erzeugen. Es erscheint ein Dialogfenster, das verschiedene vordefinierte Grössen zur Wahl stellt, darunter das Standard-Bannerformat 468x60 Pixel. Wählen Sie dieses Standardformat.

• Die Oberfläche von Visual GIF Animator ist dreiteilig: Zuoberst befindet sich die Arbeitsfläche, auf der das eingestellte Format der Animation vorgegeben erscheint. Unten sieht man die noch leere Timeline sowie, links davon, die Objektliste. Dazu kommen die stets sichtbare Werkzeugbox sowie verschiedene, je nach Kontext eingeblendete Paletten.

• Klicken Sie auf das Bildsymbol in der Werkzeugbox, um das in einem anderen Programm vorbereitete Hintergrundbild zu importieren. Mit dem nun erscheinenden Bild-Cursor klicken Sie auf der Arbeitsfläche die rechte obere Ecke des Bildes an und wählen die zu importierende Datei aus dem Dialog aus. Da das Bild bereits die korrekte Grösse hat, empfiehlt es sich, im folgenden Dialog die Option Rahmen auf Bildgrösse anpassen zu aktivieren - so wird das Bild automatisch als Hintergrund auf das gesamte Banner gelegt. Das Bild erscheint nun auch als Objekt in der Objektliste.

• Wählen Sie das Textsymbol in der Werkzeugbox und klicken Sie auf das Banner. Sie können nun den ersten Teil unseres Spruchs "Forever" eingeben und in der Textpalette Schriftart, -grösse und -farbe bestimmen. Bestätigen Sie die Änderungen mit einem Klick auf das grüne Häkchen rechts in der Textpalette und ziehen Sie den Text mit der Maus an die gewünschte Stelle.

• Nun stellen wir weitere Attribute des neuerstellten Textobjekts ein: Klicken Sie das Textobjekt mit der linken Maustaste an und wählen Sie Eigenschaften, um die entsprechende Palette anzuzeigen. Hier können Sie nach Herzenslust Einstellungen für Schatten, Glüheffekt, Farben, Ränder und vieles mehr vornehmen. Es macht auch Sinn, dem Objekt einen eindeutigen Namen zu geben; sonst erscheinen alle Textobjekte in der Objektliste mit der gleichen Bezeichnung "Text".

• Das Banner ist nun bereit für die erste Animation. Die Optionen Zeigen und Ausblenden bieten zahlreiche vordefinierte Effekte, mit denen sich ohne weiteren Aufwand attraktive Resultate erzielen lassen. Ziehen Sie das Symbol Zeigen aus der Aktionspalette auf die erste Spur der Timeline. Es erscheint der Dialog Objekt zeigen. Wählen Sie hier zunächst das zu animierende Objekt und dann den gewünschten Effekt - zum Beispiel Scrollen rechts federnd auf der Karteikarte Scrollen. Die Länge des Effekts lässt sich ebenfalls hier einstellen; den Anfangspunkt bestimmt man durch Verschieben des Effekts in der Timeline, ebenso die Gesamtlänge der Animation durch Verschieben des Ende-Symbols.

• Damit der eingestellte Effekt wirklich zu sehen ist, muss das Textobjekt vor dem Testen als unsichtbar markiert werden. Klicken Sie dazu in der Arbeitsfläche den Text mit der rechten Maustaste an und deaktivieren Sie die Option Objekt zeigen. Nun können Sie mit einem Klick auf den Button Dokument testen das Ergebnis ansehen.

• Der zweite Teil unseres Werbespruchs "InfoWeek" soll buchstabenweise von rechts oben ins Banner hineinfliegen. Erzeugen Sie dazu ein weiteres Textobjekt und plazieren Sie es auf der korrekten Endposition. Als zweites wird für diesen Effekt ein Animationspfad benötigt. Sie erstellen ihn, indem Sie in der Werkzeugbox das Animationspfad-Werkzeug anwählen und auf der Arbeitsfläche nacheinander die Punkte anklicken, die der Pfad durchlaufen soll. Alle Punkte können nachträglich verschoben und die Rundungen des erzeugten Bezier-Pfades nachgebessert werden. Wichtig: Animationspfade sind unabhängig von Objekten. Welches Objekt auf welchem Pfad animiert wird, bestimmt erst die Zuordnung im gewählten Animationseffekt.

• Ziehen Sie nun das Symbol Effekt Animation auf die zweite Spur der Timeline und plazieren Sie den Beginn direkt nach dem Ende des Effekts in der ersten Spur. Es erscheint der Dialog Animations-Effekt. Hier wählen Sie den zweiten Text als Objekt und den erstellten Pfad als Animationspfad. Zusätzlich können Sie die Dauer des Effekts und den Zeitversatz einstellen, mit dem die einzelnen Buchstaben erscheinen. Wählen Sie unter Teil-Grösse die Option Buchstaben sowie die Einstellung zum Objekt hin. Mit den Kurven im unteren Teil des Fensters können Sie das Einblendverhalten festlegen.

• Nun ist die Animation fertig und kann erneut getestet werden. Vergessen Sie nicht, zuvor wieder beide Textobjekte als unsichtbar zu markieren. Zum Exportieren als Animated-GIF wählen Sie aus dem Datei-Menü Exportieren/ Animiertes GIF. Im Exportdialog lässt sich zusätzlich zur Anzahl Farben und der gewünschten Geschwindigkeit auch die Maximalgrösse der erzeugten Datei angeben. Das Programm versucht dann so lange mit einer geringeren Framerate zu exportieren, bis die angegebene Grösse unterschritten wird. Je nach Ausgangsmaterial und Effekten kann dies zu durchaus ansprechenden oder aber zu nicht akzeptablen Resultaten führen - eine lange Animation mit mehreren Objekten und komplexen Effekten lässt sich nun halt einmal nicht als 10-Kilobyte-GIF mit 12 Frames pro Sekunde abspeichern.