Entwerfen mit rechter Hirnh�lfte

andreas burkard Unsere linke Hirnhälfte steht für rationales, analytisches Denken und Handeln. Die rechte Hirnhälfte steht für kreatives Denken. Über die Details liesse sich nun lange diskutieren. Doch man kann es drehen und wenden, wie man will: auch desig­nen und programmieren sind zweierlei. Nur wenige Menschen beherrschen beides in professioneller Manier.

Ein Beispiel ist das Internet. Waren die ersten Webeditoren noch überschaubar, so hat sich der Webbereich im Laufe der Zeit drastisch spezialisiert. In den letzten 10 Jahren «explodierten» die Technologien förmlich. Versierte Webprogrammierung ist längst zur Haupttätigkeit angewachsen.

Ein anderes Beispiel ist Adobe Flash. Von flotten Sprüchen der Verkaufs­maschinerie des Herstellers getrieben, wird das Programm irreführend immer wieder als «einfach zu bedienen» dargestellt. Beim Programm Adobe Flash sind heute nur noch diejenigen Anwender gut aufgestellt, welche die mächtige und stetig weiterentwickelte Programmiersprache Action Script 3 aus dem Effeff beherrschen. Viele Gelegenheitsanwender haben an dieser Stelle abgehängt. Zeichnen und entwerfen kann man in Illustrator. Programmieren sollen andere …

Trennung zwischen Design und Programmierung

Mit der Adobe Creative Suite CS5 Design Premium nistete sich Flash Catalyst erstmals auf unserer Festplatte ein. Die Werkzeugleiste von Flash Catalyst erinnert jedoch an PageMaker aus den Anfangszeiten des Desktop-Publishings. Doch man merkt es sofort: Flash Catalyst ist angewiesen auf Designdateien aus anderen Programmen. Dies sind Illustrator, Photo­shop und Fireworks. Über das swf-Format kann auch InDesign eine Rolle spielen. Wenn beispielsweise ein Teilbereich eines Projektes eine Animation aufweisen soll, kann dieser Inhalt in InDesign hochwertig gestaltet und danach exportiert werden. Und selbstverständlich platziert Flash Catalyst Audio- und Videodateien.

Werden Programmieraufwände nötig, so sind diese mit dem Adobe Flash Builder zu machen. In Flash Builder kann man ein Flash-Catalyst-Projekt importieren und mit Daten- und Webdiensten verknüpfen. Adobe Flash Builder (aktuell in Version 4.5) ist ein Entwicklungstool zur Bereitstellung von Applikationen für Desktop, Web und mobile Endgeräte mithilfe von ActionScript und dem als Open Source verfügbaren Flex-Framework.

Flash riecht, ist aber nicht tot

Das Speicherformat von Flash Catalyst ist eine fxp-Datei. Das Format zur Veröffentlichung ist das swf, also eine Flash-Datei. Weiter kann eine Adobe-Air-Datei veröffentlicht werden. Adobe Air ist ein gewissermassen kostenloses Adobe-Programm (wie der Adobe Reader), um Web- und Desktopanwendungen zu nutzen.

Der Ruf von Flash hat seit der Verbannung von den mobilen Apple-Geräten gelitten. Tatsache ist, dass beim Nutzer der aktualisierungshungrige Flash-Player als Browser-Plug-in installiert sein muss. Mit der sich abzeichnenden neuen Technologie HTML5 ist der Player gewissermassen Bestandteil eines Browsers und als Open Source nicht an eine Firma gebunden.

Doch man soll nun nicht so tun, als hätte es Flash nie gegeben und als sei alles falsch, was nach Flash riecht. Es ist billig, sich der Meinung mainstreamorientierter Leithammel anzuschliessen. Tatsache ist, dass Flash enorm verbreitet ist. Tatsache ist auch, dass hinter Flash viele spannende und bewährte Produkte stehen und dass die Technologie weitergeführt wird.

Weiter ist es blauäugig, zu glauben, HTML5 benötige keine oder weniger Aktualisierungen. Adobe hat die Kraft, auf Marktveränderungen entsprechend zu reagieren. Setzt sich HTML5 durch, so exportieren unsere Programme halt HTML5. Trotz der Verunsicherung macht es Sinn, sich mit Flash Catalyst auseinanderzusetzen. Die programmseitigen Vorgänge werden in einer allfälligen «Post-Flash-Ära» gleichbleiben. Die Trennung zwischen Design und Programmierung wird weitergeführt.

Die Benutzerführung

Die Inhalte der Designdateien sind mit Ebenen aufgebaut. Die Ebenen werden in Flash Catalyst übernommen (1).Aus diesen Ebenen kann man in Flash Catalyst einen unterschiedlichen Seitenstatus erstellen (2). In Flash Catalyst können Sie relativ einfach aus langen Texten Scrolltexte erstellen.

Weiter stehen vorgefertigte Wire­frame-Komponenten zur Verfügung, die Sie per Drag&Drop in die Zeichenfläche ziehen können (3). Wireframe-Komponenten sind typische Bestandteile interaktiver Inhalte – Kontrollkästchen, Datenlisten, Regler, Schaltflächen, Eingabefelder und dergleichen.

Eine Bibliothek verwaltet Komponenten, Bilder, Medien und Grafiken.

Im Bedienfeld Interaktion können Sie festlegen, was geschieht, wenn der Benutzer die interaktiven Inhalte benutzt (4).

Im Bedienfeld Eigenschaften wird das Aussehen von Objekten gesteuert (5).

Das Bedienfeld Zeitachsen enthält Steuerelemente, um Übergänge zu bearbeiten (6).

All diese Bedienfelder sind fest verankert. Sie können also keine Arbeitsbereiche aufrufen oder eigene speichern. Einzige Ausnahme ist hier das HUD, ein winziges, aber sehr bedeutungsvolles Bedienfeld. Das HUD (Heads-up-Display) zeigt Informationen und mögliche Vorgänge ausgewählter Objekte (7) an.

Aufbauhilfen

Flash Catalyst verfügt über ähnliche Hilfen, wie Sie dies aus den bekannten Designanwendungen kennen. Sie können Hilfslinien verwenden und haben ein anpassbares Raster zur Verfügung. Im Bedienfeld Eigenschaften steuern Sie die Position, die Masse, die Drehung und die Deckkraft ausgewählter Objekte.

Ebenenaufbau beachten

Wie verzahnt Flash Catalyst mit den Designanwendungen aus dem Hause Adobe ist, zeigt bereits Illustrator bei der Erstellung eines neuen Dokumentes. Dort können Sie ein für Flash Catalyst angelegtes Dokumentprofil auswählen. Illustrator führt dabei Monitorgrössen auf, schaltet Pixel­mas­se ein, richtet neue Objekte automatisch am Pixelraster aus und führt die Farben in RGB auf. In Photoshop kann man mit der Vorgabe Web ein Dokument erstellen.

Egal, in welcher Anwendung Sie das Dokument aufbauen, Sie müssen die Ebenen so einrichten, dass später in Flash Catalyst über das Ein- und Ausblenden der Ebenen ein neuer Status erstellt werden kann.

Seitenstatus erstellen

Die Sichtbarkeit der Ebenen entspricht dann auch in Flash Catalyst der ersten Seite des interaktiven Dokuments. Über das Menü Status kann in Flash Catalyst eine Seite dupliziert werden. Im nächsten Schritt werden die entsprechenden Ebenen ein- oder ausgeblendet, die für die Darstellung der nächsten Seite verantwortlich sind. Sie können auch einen leeren Status hinzufügen, um beispielsweise einen Inhalt zu importieren oder mit Komponenten zu ergänzen. Der gesamte Vorgang ist logisch, bedingt aber eine gute konzeptionelle Vorarbeit mit Ebenen. Über neue Statusseiten entsteht nach und nach das Flash-Catalyst-Dokument.

Um nun von einer Seite auf die andere zu verweisen, benötigen Sie das Bedienfeld Interaktionen. Von einem ausgewählten Seitenstatus kann ein anderer angesprochen werden.

Meistens möchte man die Weiterleitung ab einem bestimmten Navigationspunkt. Wenn der Navigationspunkt beispielsweise ein Text ist, so kann dieser Text im HUD in eine Schaltfläche umgewandelt werden. Die Darstellung der Schaltfläche können Sie nun im Bedienfeld Eigenschaften anpassen. Die optionalen Einstellungen beziehen sich auf die Zustände Normal, Darüber, Gedrückt und Deaktiviert. Sie können beispielsweise in den Eigenschaften > Filter ein Glühen hinzufügen, damit der Anwender einen sichtbaren Effekt vorfindet, wenn er sich über der Schaltfläche befindet. Diese Filter sind kompatibel mit Illustrator, Photoshop und Fireworks.

Scrolltexte erstellen

Als Bildlauf wird das Verschieben von Bildschirminhalten bezeichnet. Dies kann sowohl Grafik als auch Text sein.

Wie zu erwarten, wird die Schriftdarstellung von anderen Design­anwendungen übernommen. In Flash Catalyst können Sie auch Text selbst eingeben, mit der Formatierung hapert es dann aber beträchtlich. Das Bedienfeld Eigenschaften ist mit spärlichen typografischen Einstellungen bestückt. Hier muss wohl in kommenden Versionen nachgebessert werden.

Lange Texte unterzubringen, erfordert eine Scrollmöglichkeit. Lange Texte werden vorteilhaft von einem anderen Programm über die Zwischen­ablage auf einen Seitenstatus eingefügt. Ein Textrahmen in Flash Catalyst hat ähnliche Symbole wie ein Textrahmen in InDesign. Der Textrahmen darf keinen Übersatz aufweisen. Er kann dazu über die Zeichenfläche in seiner Höhe erweitert werden.

In Flash Catalyst platziert man danach aus dem Bedienfeld Wireframe-Komponenten neben dem Textrahmen eine vertikale Bildlaufleiste in passender Höhe. Dazu müssen Sie im Bedienfeld HUD den Textrahmen und die vertikale Bildlaufleiste als Bedienfeld mit Bildlauf definieren.

Eigene Scrolldarstellung

Sie können eigene Scrollbalken direkt in Flash Catalyst gestalten. Dazu müssen Sie eine Spur und einen Stell- oder Verschiebungsknopf erstellen. Sind beide Elemente erstellt, müssen diese erst im HUD als vertikale Bildlaufleiste definiert werden. Anschliessend können die Teile bearbeitet werden. Der Stell- oder Verschiebungsknopf wird im Bereich Teile wählen als Miniatur (erforderlich) definiert. Danach wird das Rechteck als Spur (erforderlich) festgelegt. Mit der ESC-Taste wird das Erstellen der eigenen vertikalen Bildlaufleiste beendet.

Illustrator hat einen Symbolbestand mit der Bezeichnung Web-Schaltflächen. Darin enthalten sind diverse Scrollbalken und Buttons. Flash Catalyst kann Illustrator-Dokumente importieren. Einen importierten Scrollbalken können Sie in Flash Catalyst bearbeiten. Möchte Sie wiederum in Illustrator eine Änderung vornehmen, können Sie im Menü Ändern > In Illustrator bearbeiten auswählen. Diesbezüglich eine runde Sache …

Bildlauflisten und Galerien

Auch Bilder lassen sich in einen Scrollbereich unterbringen. Dazu müssen die Bilder erst über der Zeichenfläche platziert und ausgerichtet werden. Im Unterschied zu Flash Catalyst CS5 verfügt die Version CS5.5 nun über ein Ausrichten-Bedienfeld. Die Bilder lassen sich danach in der genau gleichen Art und Weise in eine Leiste integrieren wie beim Scrolltext.

Mit den interaktiven Möglichkeiten können Sie ansprechende Bildergalerien auch in InDesign CS5 und höher entwerfen. Die übereinander gestapelten und ausgewählten Bilder werden in InDesign im Bedienfeld Objektstatus zu einem Objekt mit mehreren Status, welche optional über eine Schaltfläche abgespielt werden können. Exportiert wird das Ganze in InDesign als swf-Datei. Flash Catalyst kann die swf-Datei importieren, zeigt hier aber eine sehr befremdende Eigenheit: Die swf-Datei wird nicht angezeigt. Sie ist zwar voll funktionstüchtig, doch es wäre ganz nett, diese im Flash-Catalyst-Dokument auch zu sehen. Flash Catalyst CS5.5 hat diesbezüglich keine Neuerung erfahren. Dennoch, die Möglichkeit, in InDesign exportierte swf-Dateien zu verwenden, erweitert Flash Catalyst für Animationen, Bildergalerien und andere interaktive Vorgänge.

Video- und Audiodateien

Flash Catalyst kann Videodateien mit den Endungen .flv und .f4v sowie Audiodateien vom Typ .mp3 verarbeiten. Wenn Sie eine einzelne Video­datei importieren, wird ein neues Video­playerobjekt in der Zeichenfläche hinzugefügt. Das Quellvideo wird in der Projektbibliothek gespeichert. Beim gleichzeitigen Importieren von mehreren Video- und Audiodateien werden die Dateien bis zur Verwendung zuerst in die Bibliothek gespeichert.

Web- und Maillinks

Problemlos können Sie in Flash Catalyst Web- und Maillinks hinzufügen. Dazu können Sie einen Text in eine Schaltfläche umwandeln und im Bedienfeld Interaktion als URL definieren. Bei einem Maillink muss im URL-Eingabefeld der Vorspann mailto: vor der Mailadresse stehen.

Flash Catalyst fürs Prototyping

Kreative stehen oft vor der Herausforderung, dem Kunden das Look-and-Feel einer Website, einer Navigationsstruktur oder eines interaktiven Teilbereiches realitätsnah und wirkungsvoll zu präsentieren. Zunehmend erarbeiten namhafte Agenturen die Webprojekte in den Programmen, welche die Kreativen beherrschen. Dies sind nun einmal Illustrator und Photoshop, beides Programme, welche in den letzten Versionen durch pixelgenaues Arbeiten erweitert wurden. Später werden die Inhalte mit einem Slice-Vorgang aufgeteilt und der HTML-Programmierung, der linken Hirnhälfte sozusagen, übergeben.

Was liegt demzufolge nun näher, als ein Look-and-Feel in Flash Catalyst aufzubauen? Dies kann auch für Vorhaben interessant sein, welche letztendlich nicht als Flash-Projekte weitergeführt werden.

Flash Catalyst CS5.5 kommt mit einer Neuerung diesem Bedürfnis sogar entgegen. Ein neues Projekt in Flash Catalyst CS5.5 kann optional skalierbar sein. Wireframe-Komponenten, platzierte Grafiken, Videos sowie Textfelder können in Bezug zur Fensterseite festgesetzt werden. Ändert sich die Fenstergrösse, laufen die festgesetzten Objekte automatisch mit.

Ab hier auch linke Hirnhälfte

So praktisch und vielseitig Flash Catalyst ist, es weist auch Grenzen auf. Flash Catalyst ist ein Entwurfsprogramm und nicht eine Entwicklungsumgebung. Flash Catalyst hat zwar eine Codeanzeige, doch da hat der Anwender keine Schreibberechtigung.

Man kann in Flash Catalyst Text­eingabe und Optionsfelder erstellen, um beispielsweise ein Eingabeformular zu gestalten. Der Code zum Erfassen, Speichern und Weiterleiten der Informationen wird aber im Flash Builder hinzugefügt. Der Flash Builder 4.5 (früher Adobe Flex Builder) ist eine Entwicklungsumgebung für plattformübergreifende, datengesteuerte Inhalte. Als Programmiersprache kommt im Wesentlichen Action Script zum Zuge.