Page 1

24

Unterrubrik Publishing

Publisher 6 · 2011

Flash Catalyst auf der Suche nach Akzeptanz.

Entwerfen mit rechter Hirnhälfte Die meisten Kreativen ticken gleich: Sie kennen Illustrator und Photoshop, mögen aber keinen Code. Adobe liefert mit Flash Catalyst eine passende Lösung um interaktive Inhalte zu erstellen, Interaktionsdesign und Anwendungsprototypen zu entwerfen. n Andreas Burkard  Unsere linke

Hirnhälfte steht für rationales, analys­ tische Denken und Handeln. Die rechte Hirnhälfte steht für kreatives Denken. Über die Details liese sich nun lange diskutieren. Doch man kann es drehen und wenden wie man will: auch desig­ nen und programmieren sind zweier­ lei! Nur wenige Menschen beherrschen beides in professioneller Manier. Ein Beispiel ist das Internet. Waren die ersten Webeditoren noch über­ schaubar, 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 Verkaufsma­ schinerie 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 weiter entwickelte Programmiersprache Action Script 3 aus dem Effeff beherrschen. Viele Gele­ genheitsanwender haben an dieser Stelle abgehängt. Zeichnen und ent­ werfen kann man in Illustrator. Pro­ grammieren sollen andere …

2

Trennung zwischen Design und Programmierung Mit der Adobe Creative Suite CS5 Design Premium nistete sich Flash Catalyst erstmals auf unserer Fest­ platte ein. Die Werkzeugleiste von Flash Catalyst erinnert jedoch an PageMaker aus den Anfangszeiten des DeskTop-Publishings. Doch man merkt es sofort: Flash Catalyst ist angewie­ sen auf Design-Dateien aus anderen Programmen. Dies sind Illustrator, Photoshop und Fireworks. Über das swf-Format kann auch InDesign eine Rolle spielen. Wenn beispielsweise ein Teilbereich eines Projektes eine Ani­ mation aufweisen soll, so kann dieser Inhalt in InDesign hochwertig gestaltet und danach exportiert werden. Und selbstverständlich platziert FlashCatal­ syst Audio und Video. Werden Prgrammieraufwä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 Web­ diensten verknüpfen. Adobe Flash Builder (aktuell in Version 4.5) ist ein Entwicklungs-Tool 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 Cata­ lyst ist eine fxp-Datei. Das Format zu Veröffentlichung ist das swf, also eine Flash-Datei. Weiter kann eine Adobe Air-Datei veröffentlicht werden. Adobe Air ist eine gewissermassen ein kosten­ loses Adobe-Programm (wie der Adobe Reader), um Web- und Desktopanwen­ dungen zu nutzen. Der Ruf von Flash hat seit der Ver­ bannung von den mobilen Apple-Gerä­ ten gelitten. Tatsache ist, dass beim Nutzer der aktualisierungshungrige Flash-Player als Browser PlugIn instal­ liert sein muss. Mit der sich abzeich­ nenden 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 von Mainstream-orientierten Leithammeln 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 weiter geführt wird. Weiter ist es blauäugig zu glauben, HTML5 benötige keine oder weniger Aktualisierungen. Adobe hat die Kraft

7

3

1

4

5

6

Gestatten: Adobe Flash Catalyst CS5.5.

auf Markveränderungen entsprechend zu reagieren. Setzt sich HTML5 durch, so exportieren unsere Progamme halt HTML5. Trotz der Verunsicherung macht es Sinn, sich mit Flash Catalyst auseinander zusetzen. Die programm­ seitigen Vorgänge werden in einer all­ fälligen «Post-Flash-Ära» gleich bleiben. Die Trennung zwischen Design und Programmierung wird weiter geführt. Die Benutzerführung Die Inhalte der Designdateien werden mit Ebenen aufgebaut. Die Ebenen werden in Flash Catalsyt ü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 Wireframe-Komponenten zur Verfügung, die Sie mit Drag&Drop in die Zeichenflä­ che ziehen können (3). Wireframe-Kom­ ponenten sind typische Bestandteile interaktiver Inhalte, wie beispielsweise Kontrollkästchen, Datenlisten, Regler, Schaltflächen, Eingabefelder und der­ gleichen. Eine Bibliothek verwaltet Kompo­ nenten, Bilder, Medien und Grafiken. Im Bedienfeld Interaktion können Sie festlegen, was geschieht, wenn der Benutzer die interaktiven Inhalte benutzt (4). Im Bedienfeld Eigenschaften können Sie können Sie das Aussehen von Objekten steuern (5). Das Bedienfeld Zeitachsen enthält Steuerelemente um Übergänge zu zu bearbeiten (6). All diese Bedienfelder sind fest ver­ ankert. Sie können also keine Arbeitsbe­ reiche aufrufen oder eigene speichern. Einzige Ausnahme ist hier das HUD, ein winziges aber sehr bedeutungs­ volles Bedienfeld. Das HUD (HeadsUp-Display) zeigt Informationen und mögliche Vorgänge von ausgewählten Objekten (7) an. Aufbauhilfen Flash Catalyst verfügt über änliche Hilfen, wie Sie dies aus den bekan­ ten Designanwendungen kennen. Sie können Hilfslinien verwenden und haben ein anpassbares Raster zur Ver­ fügung. Im Bedienfeld Eigenschaften steuern Sie die Position, die Masse, die Drehung und die Deckkraft von ausge­ wählten Objekten.


Publishing

Unterrubrik

Die Ebenenstruktur aus Illustrator (links) wird in Flash Catalyst (rechts) übernommen.

Publisher 6 · 2011

Aus den Wireframe-Komponenten wird eine vorgefertigte vertikale Bildlaufleiste in das Dokumente gezogen. Die Eigenschaften ermöglichen das numerische Platzieren und die Einstellung von Breite und Höhe.

Eine Ebene mit ihrer Sichtbarkeit entspricht einem Seitenstatus in Flash Catalyst.

Ebenenaufbau beachten Wie verzahnt Flash Catalyst mit den Designanwendungen aus dem Hause Adobe ist, zeigt bereits Illustrator bei der Erstellung eines neuen Dokumen­ tes. Dort können Sie ein für Flash Catalyst angelegtes Dokumetenpro­ fil auswählen. Illustrator führt dabei Monitorgrössen auf, schaltet Pixelma­ sse ein, richtet neue Objekte automa­ tisch an Pixelraster aus und führt die Farben in RGB auf. In Photoshop kann man mit der Vorgabe Web ein Doku­ ment 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 aus­ blenden 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 Dokumentes. Über das Menü Status kann in Flash Catalyst eine Seite dupliziert werden. Im nächsten Schritt werden die ent­ sprechenden Ebenen ein- oder ausge­ blendet, die für die Darstellung der nächsten Seite verantwortlich sind. Sie können auch einen leeren Status hinzu­ fügen um beispielsweise einen Inhalt zu importieren oder mit Komponenten zu ergänzen. Der gesamte Vorgang ist logisch, bedingt aber eine gute kon­ zeptionelle 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

Der Autor Andreas Burkard arbeitet in der Mediengestaltung, der Medienproduktion und der Ausbildung. Er macht seit vielen Jahren individuelle Beratung rund um das Thema Publishing und ist Fachbereichs­ leiter und Dozent bei der Digicomp Academy AG. www.BurkardPublishing.ch

Interaktionen leiten auf einen entsprechenden Seitenstaus.

anderer Seitenstatus angesprochen werden. Meistens möchte man die Weiterlei­ tung ab einem bestimmten Navigati­ onspunkt. Wenn der Navigationspunkt beispielsweise ein Text ist, so kann dieser Text im HUD in eine Schaltflä­ che umgewandelt werden. Die Darstel­ lung 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, so dass der Anwender eine sichtbaren Effekt vorfindet, wenn er sich über der Schaltfläche befindet. Diese Filter sind im Übrigen 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 Schrift­ darstellung von anderen Designan­ wendungen übernommen. In Flash Catalyst können Sie Texte auch selber eingeben, aber mit der Formatierung happert es beträchtlich. Das Bedien­ feld Eigenschaften ist mit spärlichen typografische Einstellungen bestückt. Hier muss wohl in kommenden Versio­ nen noch nachgebessert werden. Lange Texte unterzubringen erfor­ dert eine Scrollmöglichkeit. Lange Texte werden vorteilhaft von einem anderen Programmen über die Zwi­ schenablage auf einen Seitenstatus eingefügt. Ein Textrahmen in Flash Catalyst hat ähnliche Symbole wie ein Textrahmen in InDesign. Der Textrah­

Mit der Auswahl des Textrahmens und der Laufleiste entsteht im HUD ein Bedienfeld mit Bildlauf. Die Einträge im HUD passen sich danach dem neuen Zustand an.

Im nächsten Schritt wird im HUD mitgeteilt, dass man nun Teile bearbeiten möchte.

Nun wird der Textrahmen ausgewählt. Jetzt müssen Sie nur noch den ausgewählten Textrahmen im HUD als Bildlaufinhalt (erforderlich) definieren und danach die ESC-Taste drücken.

Der Scolltext ist fertig und kann mit dem Befehl Projekt ausführen direkt im Browser getestet werden.

25


Publishing

Ein eigener Scrollbalken besteht beispielsweise aus einen Rechteck (Spur) …

… und einem Verschiebungsbereich (Stelloder Verschiebungsknopf)

Beide werden im HUD erst mal als vertikale Bildlaufleiste festgelegt.

Danach werden im HUD die Teile bearbeitet.

Der Stellknopf wird im HUD als Miniatur (erforderlich) definiert …

… und der Verschiebungsbereich zur Spur.

Unterrubrik

Publisher 6 · 2011

men 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 WireframeKomponenten neben dem Textrahmen eine vertikale Bildlaufleiste in passen­ der Höhe. Dazu müssen Sie im Bedien­ feld 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 Verschiebungskonopf erstellen. Sind beide Elemente erstellt, so müssen diese erst mal 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 (erfolderlich) definiert. Danach wird das Rechteck wird 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 Cata­ lyst kann Illustrator-Dokumente impor­ tieren. Ein importierter Scrollbalken können Sie in Flash Catalyst bearbei­ ten. Möchte Sie wiederum in Illustrator eine Änderung machen, so 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 Scroll­ bereich unterbringen. Dazu müssen die Bilder erstmals über die 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 glei­ chen Art und Weise in eine Leiste inte­ grieren, wie beim Scrolltext. Mit den interaktiven Möglichkeiten können Sie ansprechende Bildergale­ rien auch in InDesign CS5 und höher entwerfen. Die übereinander gestapel­ ten 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 swfDatei. Flash Catalyst kann die swfDatei importieren, zeigt hier aber eine sehr befremdende Eigenheit: Die

Steuerung von Video und Audio in den Eigenschaften.

swf-Datei wird nicht angezeigt! Sie ist zwar voll funktionstüchtig, doch es wäre ganz nett, diese im Flash Cata­ lyst-Dokument auch zu sehen. Flash Catalyst CS5.5 hat diesbezüglich keine Neuerung. Dennoch, die Möglichkeit, in InDesign exportierte swf-Dateien zu verwenden, erweitert Flash Catalyst für Animationen, Bildergalierien und anderen interaktiven Vorgängen. Eingabe von Web- und Maillink ohne Code.

Video und Audio Flash Catalyst kann Videodateien mit den Endungen .flv und .f4v sowie Audio­dateien vom Typ .mp3 verarbei­ ten. Wenn Sie eine einzelne Video­datei importieren, wird ein neues Video­ player-Objekt in der Zeichenfläche hinzugefügt. Das Quellvideo wird in der Projektbibliothek gespeichert. Beim Importieren von gleichzeitig mehreren Video- und Audiodateien, werden die Dateien bis zur Verwendung zuerst in die Bibliothek gespeichert. Web- und Maillinks Problemlos können Sie in Flash Cata­ lyst Web- und Maillinks hinzufügen. Dazu können Sie einen Text in eine Schaltfläche umwandeln und im Bedienfeld Interaktion als URL defi­ nieren. Bei einem Maillink muss im URL-Eingabefeld der Vorspann mailto: vor der Mailadresse stehen. Flash Catalyst für Prototyping Kreative stehen oft vor der Herausfor­ derung, dem Kunden das Look & Feel einer Web-Site, einer Navigationstruk­ tur oder eines interaktiven Teilberei­ ches realitätsnah und wirkungsvoll zu präsentieren. Zunehmend erarbeiten namhafte Agenturen die Web-Projekte in den Programmen, welche die Krea­ tiven beherrschen. Dies sind nun mal Illustrator und Photoshop, beides Pro­ gramme, welche in den letzten Ver­ sionen durch pixelgenaues arbeiten erweitert wurden. Später werden die Inhalte mit einem Slicevorgang aufge­ teilt und der HTML-Programmierung,

Ob Texte oder Bilder: Alles lässt sich in Bildlaufleisten unterbringen.

der linken Hirnhälfte so zu sagen, über­ geben. Was liegt demzufolge nun näher, als ein Look & Feel in Flash Catalyst aufzu­ bauen? Dies kann auch für Vorhaben interessant sein, welche letztendlich nicht als Flashprojekte weitergeführt werden. Flash Catalyst CS5.5 kommt mit einer Neuerung diesem Bedürfnis sogar entgegen. Ein neues Projekt in Flash-Catayst CS5.5 kann optional Skalierbar sein. Wireframe-Komponenten, platzierte Grafiken und Videos sowie Textfelder, können in Bezug zur Fens­ terseite festgesetzt werden. Ändert sich die Fenstergrösse, so laufen die festge­ setzten Objekte automatisch mit. Ab hier auch linke Hirnhälfte So praktisch und vielseitig Flash Cata­ lyst ist, so hat es auch seine Grenzen. Flash Catalyst ist ein Entwurfspro­ gramm und nicht eine Entwicklungs­ umgebung. Flash Catalyst hat zwar eine Codeanzeige, doch da hat der Anwender keine Schreibrechte. Man kann in Flash Catalyst Tex­ teingabe und Optionsfelder erstellen, um beispielsweise ein Eingabeformular zu gestalten. Der Code zum Erfassen, Speichern und Weiterleiten der Infor­ mationen wird aber im Flash Builder hinzugefügt. Der Flash Builder 4.5 (früher Adobe Flex Builder) ist eine Ent­ wicklungsumgebung für plattformüber­ greifende, datengesteuerte Inhalte. Als Programmiersprache kommt im Wesentlichen Action Script zum Zuge.

Fester Bezug zur Grössenanpassung des Browserfensters.

26

Fachartikel Flash Catalyst  

Fachartikel Publisher 6 2011 über Flash Catalyst

Read more
Read more
Similar to
Popular now
Just for you