Share
1. Juni 2009; Das Datum, an dem Adobe ihr neuestes Tool veröffentlichte, richtete sich an "Designer und Entwickler". Das war fast der Slogan für Flash Catalyst, der zuvor als "Thermo" bezeichnet wurde..
Werfen wir einen ersten Blick auf diese leistungsstarke Anwendung, die Designern verspricht, dass sie jetzt an der Entwicklung von Flash-Anwendungen und Websites teilnehmen können.
Flash Catalyst, früher "Adobe Thermo" genannt, ist eine Anwendung, die speziell für Designer und Entwickler entwickelt wurde. Sie können jedes Photoshop- oder Illustrator-Layout auf einfache Weise in eine komplette, animierte und interaktive Website oder Rich-Internet-Anwendung auf der Flash-Plattform umwandeln. Das Endergebnis von Flash Catalyst kann von Flash Builder (vormals Flex Builder) importiert und geändert werden. Entwickler können so ein schönes Layout für die Codierung bereitstellen. Die Anwendung enthält zahlreiche Funktionen, mit denen Designer ein einfaches Layout erstellen, Effekte hinzufügen und anschließend auf der Flash-Plattform veröffentlichen können, ohne eine einzige Codezeile schreiben zu müssen! Dies ist die Stärke von Flash Catalyst.
Nach dem allerersten MAX-Vortrag über ein neues fantastisches Tool namens "Thermo" waren alle Blogs und Foren der RIA- und Flash-Community mit tollen Videos gefüllt. In diesen Videos konnte ein statisches Adobe Illustrator-Layout in wenigen Minuten in eine voll funktionsfähige Anwendung umgewandelt werden. Adobe bereitete sich darauf vor, noch mehr zu beeindrucken…
Dies war im Oktober 2007, inzwischen wurde Thermo zu Catalyst, ein weiteres Jahr verging und wir konnten auf einigen Konferenzen immer noch kaum Fotos finden. Zur gleichen Zeit begann Flex 4 mit fast wöchentlichen Nachrichten auf sich aufmerksam zu machen. Thermo schien verschwunden zu sein.
November 2008; ein unerwartetes Datum! Adobe verteilte kostenlose Vorschau-Kopien von Flash Catalyst, nur für Mac OS und Gumbo (Gumbo war der Codename für Flash Builder 4). Die Entwickler und Entwickler widmeten sich mehr den Adobe-Laboren, doch bis Juni 2009 wurde nichts mehr gehört.
Juni. 2009. Am ersten Tag des Monats (endlich) hat Adobe die erste öffentliche Betaversion von Flash Catalyst veröffentlicht. Nun fangen die Dinge hier an!
Die IDE ist gut gestaltet und aufgeteilt, sie ist intuitiv und die Elemente sind leicht zu finden. Ich werde diese Panels ein wenig weiter besprechen. Beachten Sie, dass mein Betriebssystem in Französisch ist. Wenn Sie also bereits FC kennen und Ihr Betriebssystem in einer anderen Sprache ist, werden Sie möglicherweise Unterschiede feststellen. Ich werde sie jedoch auch in Englisch nennen.
Oben links sehen wir als allererstes die "States / Pages". Dies sind die Zustände der Anwendung. Stellen Sie sich vor, Sie haben im ersten Zustand ein Anmeldefenster, im zweiten haben Sie die Hauptanwendung. Diese Zustände können leicht identifiziert werden, wie das folgende Bild zeigt!
Die Anwendung wird im ersten Status geladen. Wenn Sie in den zweiten Status wechseln möchten, müssen Sie einige Tricks ausführen (naja… nur ein Trick - currentState = "Page2"). In Flash Catalyst werden die Dinge jedoch mit Stil erstellt . Wir setzen eine einfache Schaltfläche auf die "Bühne" und ändern diese durch die OnClick-Interaktion in "Seite2".
Im zweiten Bereich legen wir alle unsere Sachen ab. Wenn Sie eine Photoshop-Datei oder eine Illustrator-Datei importieren, werden alle Elemente hier angezeigt. Wenn Sie mit Flash und Flex arbeiten, können Sie dies als Hauptphase betrachten. Sehen Sie, wie ähnlich es ist:
Sie können auch eine Schaltfläche in der oberen rechten Ecke finden, die die Bühne aktualisiert. Dies ist nützlich, wenn die Bühne viele Dinge enthält und aus irgendeinem Grund vergisst Flash Catalyst, die Änderungen automatisch zu aktualisieren.
Das dritte Panel ist das "Timelines" -Panel und hält einige große Überraschungen bereit. Flash-Katalysator hat eine Zeitleiste, aber wenn Sie davon ausgehen, dass sie wie die Zeitleiste von Flash funktioniert, werden Sie sich irren. Diese Zeitleiste ist sehr begrenzt und der Hauptzweck besteht darin, glatte Animationen zwischen Seiten (Übergang von Seite zu Seite und umgekehrt) mit einigen Elementen und einfachen Effekten wie Überblenden, Verschieben, Drehen zu erstellen. Dieses Panel ist vielleicht etwas schwer zu verstehen, aber innerhalb kurzer Zeit werden Sie anders denken. Lass uns einen Blick darauf werfen!
In diesem Fenster finden Sie links die Status- / Seitenübergänge und die Aktionssequenzen (nein, dies wurde nicht in Französisch übersetzt), in denen Sie benutzerdefinierte Aktionen und Effekte erstellen können. Wenn ein "reales" Layout geladen und in Elemente umgewandelt wird, werden sie auf dieser Timeline angezeigt. Sie können einen bestimmten Effekt nur auf eine bestimmte Komponente anwenden. Diese Zeitleiste funktioniert ähnlich wie das Flash-Animationsbedienfeld, aber hier legen Sie die Start- und Endzeit des Effekts oder Übergangs fest. Sie werden im nächsten Bild sehen, worüber ich spreche, dies wurde mit einem einfachen Layout gemacht:
Wie ich bereits erklärt habe, finden Sie auf der linken Seite die Komponenten "Seite1", in der Mitte befindet sich die Animationszeitleiste und rechts (nicht zuvor gezeigt) die Komponenten "Seite2". Sie können jeder Seitenkomponente einen eigenen Effekt hinzufügen. hier beginnen die "Page1" -Elemente mit FadeOut, dann zur Hälfte, beginnen die "Page2" -Elemente mit FadeIn, was einen sehr sanften Übergangseffekt ergibt.
Hier können Sie auch eine der besten Funktionen von Flash Catalyst sehen. die Vorschau-Schaltfläche (die kleine "Wiedergabe" -Schaltfläche in der Mitte). Wenn Sie einige Übergänge, Effekte oder Sequenzen haben, klicken Sie einfach auf diese Schaltfläche. Sie sehen die Animation auf der Bühne, ohne die IDE zu verlassen. Das ist wirklich nützlich, glaube mir!
Das nächste Panel ist das "Utils / Tools" -Feld. Hier finden Sie einige native Flash / Flex-Komponenten wie Formen, Text, Zoom und Auswahlwerkzeuge.
Im unteren Bereich dieses Fensters befindet sich das allgemeine Bedienfeld "Calques / Layer", in dem Sie Ihre Anwendungselemente organisieren können. Wenn Sie eine PSD- oder AI-Datei öffnen, bleibt die Ebenenreihenfolge gleich. alles wird am selben Ort sein. Wenn Sie in Photoshop oder Illustrator gut voneinander getrennt sind, profitieren Sie auch hier davon! Sie haben Ihr importiertes Layout hier. Wenn Sie ein Projekt aus einer leeren Vorlage erstellen, werden hier die Dinge angezeigt, wenn sie zur Bühne hinzugefügt werden. Siehe das Panel:
Das folgende Panel ist das vollständigste. Es enthält drei Hauptteile, die Komponenten, die Bibliothek und das Fenster "Daten":
Sehen Sie, wie es aussieht!
Das letzte Feld ist das "Eigenschaften / Propriétés", in dem Sie Informationen zu einem ausgewählten Element auf der Bühne finden können. Wenn Sie beispielsweise auf ein Textelement klicken, können Sie hier seine Eigenschaften wie Farbe, Schriftart, Größe usw. definieren.
Zuletzt das magische "Nameless" Panel, das ich zuvor "Element Options" genannt habe. Dies ist eigentlich das wichtigste Panel von allen; In Flash Catalyst wird die Magie voll ausgenutzt. Es ist ein hinteres / grau-schwarzes Feld, das angezeigt wird, wenn Sie etwas auf der Bühne anklicken. Wenn Sie auf einen Teil eines Layouts klicken, wird dieses Fenster geöffnet. Es enthält 3 Hauptabschnitte:
Schauen wir uns das mal an…
Nun, im Grunde wird unsere IDE vorgestellt. Wir vergessen jedoch eine Sache, etwas, an dem Designer möglicherweise nicht interessiert sind, aber es ist für Entwickler wichtig. Der Code. In der oberen rechten Ecke befindet sich eine Combobox, in der Sie die Entwurfs- oder Codeansicht auswählen können. Wenn Sie darauf klicken und sich mit flex nicht auskennen, werden Sie es wahrscheinlich sofort schließen. Wenn Sie jedoch ein Flex-Entwickler sind, sollten Sie dies sorgfältig prüfen. Sie werden viele neue Dinge (insbesondere wenn Sie in Flex 3 entwickeln) finden, die auf Flash Builder 4 ausgerichtet sind. Die Sprache ist MXML mit einigen Elementen in ActionScript. Außerdem wird ein Projekt-Explorer angezeigt, in dem Sie alles finden, was bereits in MXML-Anwendungselemente und -Komponenten konvertiert wurde, die in Flash Builder verwendet werden können. Dies ist ein ganz anderes Thema. Wenn Sie mehr erfahren möchten, sollten Sie die großartige Rezension lesen, die Jesse Freeman über Flash Builder 4 geschrieben hat.
Eine andere coole Sache ist, dass das Projekt einsatzbereit ist und auch visualisiert werden kann. Gehen Sie einfach zu Datei> Projekt ausführen (STRG + EINGABETASTE unter Windows), Ihr Projekt wird kompiliert und in einem Browser geöffnet.
Dies kann missverstanden werden. Flash Catalyst ist nicht einfach zu verwenden und kann anfangs verwirrend sein, aber ja! Es macht die Dinge wirklich einfach. Entwerfen Sie einfach Ihr Layout oder holen Sie das Layout von Ihrem Designer in eine Photoshop- oder Illustrator-Datei, wählen Sie Ihre Datei aus und erstellen Sie daraus ein neues Flash Catalyst-Projekt. In Flash Catalyst wird es genauso aussehen. Von hier aus konvertieren Sie einfach die Elemente, zu denen Sie Verhalten hinzufügen möchten, erzeugen einige Seiten, einige Übergänge, testen das Projekt und speichern es. Das ist alles! Es ist bereit für die Hände des Entwicklers!
Für Designer ist dies nicht unbedingt von Interesse, aber für Entwickler könnte dies der schwierigste Punkt in FC sein. Da alle Elemente und Eigenschaften automatisch generiert werden, muss der Code sorgfältig geprüft werden. Möglicherweise müssen einige Änderungen vorgenommen werden, um den Anforderungen des Entwicklers zu entsprechen. In Flash Catalyst sehen wir bereits die neue Flash Vector Engine in Aktion. Wenn Sie Vektoren in Flash Catalyst laden, finden Sie im Code einige Elemente "Groups", "Stroke", "Rect", "Fill" und "Path" mit einigen Daten. So gestaltet Flash Vektorelemente. Ein einfacher Vektorpfeil erzeugt diesen Code:
Bei diesen Elementen handelt es sich um die Implementierung der neuen Flash 10 / Flex-FXG-Spezifikation, mit der Entwickler XML-Stilelemente oder Elementgruppen zum Zeichnen in Flash verwenden können. Dabei werden nicht nur native Elemente als Kreise, Rechtecke, Text oder Kurven, sondern auch komplexere Grafiken verwendet Anzeigen von Vektorinformationen.
Es gibt viele Status und vor allem Flex 4 MXML-Code, der sich ein wenig von Flex 3 unterscheidet und für Flash-Entwickler oder Flex-Einsteiger völlig neu ist.
Es ist eine fantastische Anwendung! Habe keinen Zweifel!
Zunächst können wir Entwickler wirklich mit Designern zusammenarbeiten, ihnen den Entwickler-Standpunkt und einige Anwendungsinteraktionen zeigen, bevor sie zur Anwendungsentwicklung gehen, wodurch der gesamte Prozess beschleunigt wird. Es ist leicht, fantastische Anwendungen und Websites zu finden, die mit FC erstellt wurden. Die Kreativität wird nun in Rich Internet Applications eintauchen. Damit müssen die Entwickler aufpassen. Der generierte Code ist ziemlich umfangreich und jede Änderung hat Auswirkungen auf das Layout. Es ist eine Sache, Dinge in Flash Catalyst zu platzieren und schönen generierten Code zu erstellen. Wenn Sie jedoch etwas gemäß FC-Code codieren, kann dies manchmal das Gehirn eines Entwicklers verbrennen!
In Flash Catalyst gibt es viele neue Dinge zu entdecken, aber um ehrlich zu sein, habe ich mehr erwartet. Die Komponentenbibliothek wird reduziert, die Interaktion mit Elementen wird ebenfalls reduziert, importierter Text behält nicht immer seine ursprüngliche Qualität bei und einige Dinge funktionieren nicht richtig (insbesondere in der DataList mit wenigen Zeilen…). Das ist nur eine Beta, richtig ?! Wir müssen noch auf die endgültige Veröffentlichung warten.
Flash Catalyst wird definitiv die Massen erreichen, aber der generierte Code und die Interaktion mit Flash Builder 4 benötigen einige Zeit, um an Popularität zu gewinnen, hauptsächlich, weil sich die neuen Flex 4-Spezifikationen von Flex 3 unterscheiden.
Wenn Sie mehr über Flash Catalyst erfahren möchten, besuchen Sie die Catalyst Tutorial-Seite in Adobe Labs.
Danke fürs Lesen, es wäre schön zu hören, was Sie zu sagen haben!
Accentsconagua