Flash verliert mit der zunehmenden Verbreitung von HTML5 immer mehr an Boden. Nicht zuletzt weil Apple Flash aus dem iOS verbannt hat. Ob das nun gut oder schlecht ist mag ich hier gar nicht bewerten aber offenbar hat Adobe die Zeichen der Zeit erkannt und stellt nun mit Wallaby ein Konvertierungs-Tool für Flash-Dokumente bereit.

In den Adobe Labs kann die Air-Anwendung Wallaby kostenlos heruntergeladen werden.

Zu beachten ist jedoch dass Wallaby sich noch im Stadium des Release Candidate befindet - also nicht fehlerfrei ist. Adobe selbst schreibt dazu:

"Wallaby" is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. Wallaby is not a final product and is still in the testing and validation phase. We are not yet able to commit to a roadmap for this experimental technology.

Nichts desto trotz funktioniert die App erstaunlich gut und konvertiert Flash-Dokumente per Klick in HTML5. Ihr solltet jedoch bedenken, dass auch HTML5 nicht alle Möglichkeiten von Flash abdeckt. Je komplexer die Flash-Datei also ist, desto schwieriger wird es das Dokument zu konvertieren.

Ihr könnt Adobe Wallaby in den Adobe Labs herunterladen.

• Adobe Wallaby Download

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe hat am Montag um 17 Uhr MEZ den Start der Creative Suite 5 eingeleitet. Die gängigen Blogs, Twitter und Facebook waren in Windeseile mit den neusten Features gefüllt so dass der Launch wohl kaum unbemerkt an Euch vorbeigegangen sein dürfte.
Zwei Tage nach dem Event ist es nun möglich eine erste Bilanz der Reaktionen zu ziehen und den ganzen Hype mit etwas Abstand zu betrachten. Wie bereits bei den letzten beiden Creative Suits wurden auch diesmal die Icons der Programme massiv kritisiert. Ein Grund für mich einen Post von Adobe aufzugreifen und Euch einmal zu zeigen warum die Damen und Herren die Icons so entworfen haben wie sie nun einmal jetzt aussehen.

Inspiration durch Otl Aicher

Die Grundüberlegungen der Adobe-Splash-Screens gehen auf den berühmten Typografen und Gestalter Otl Aicher (1922 - 1991) zurück. Zu den Werken Aichers gehört unter anderem das Corporate Design der Sparkasse und der Lufthansa, die Entwicklung der Schriftart Rotis, sowie die Erstellung der Piktogramme für die Olympischen Spiele 1972. Für diese weltberühmten Piktogramme schuf Aicher zunächst ein Raster aus welchem er anschließen die Symbole entwickeln konnte. Die Icons und vor allem die Splash-Screens der CS5-Familie sind auf Grundlage eben jenes Rasters entwickelt worden.

Zunächst wurden einige Entwürfe umgesetzt die über Transparenz und eine sehr ausgeprägte Geometrie verfügten. Hier einige frühe experimentelle Prototypen der Splash-Screens von Photoshop und InDesign.

Anschließend wurden auf Grundlage des Rasters einige Basiselemente entworfen die später in unterschiedlichsten Konstellationen in der Gestaltung der Splash-Screens verwendet wurden.

Splash-Screen Finishing

Auf dieser Basis wurden nun entsprechend der Farbschemata die Verläufe hinzugefügt und die Farben festgelegt. Insbesondere die Ausarbeitung der Verläufe hat enorm viel Zeit in Anspruch genommen. Hier erneut einige Beispiele für Splash-Screens der CS5.

Icon-History

Die Icons der Creative Suite waren bis zur Version CS3 ein illustratives Icon; meist wurde das "Photoshop Eye" aufgegriffen. Ich erinnere mich noch genau als ich auf einer Messe zum ersten Mal die Icons der CS3 sah. Ich muss zugeben, dass ich nicht gerade begeistert war. Erst als Adobe die CS4 veröffentlichte konnte ich mich mit den Icons anfreunden, gefiehl mir der schwarze "Aufdruck" doch deutlich besser als der weiße Text der CS3.
Die Icons der CS5 sind denen der CS3 und CS4 sehr ähnlich. Was die Grundüberlegungen der Icon-Designer angeht so hat sich hier jedoch einiges getan. So wurde beispielsweise erstmals in dieser Produktlinie eine weitere Farbe und eine weitere Dimension eingefügt um die einzelnen Programme besser unterscheiden zu können. Das die Icons für manche Betrachter wie ein Buch wirken ist übrigens nicht beabsichtigt.

Und noch einmal alle Programmicons im direkten Vergleich.

Über 10.000 Dateien

Insgesamt wurden in unter 6 Monaten über 10.000 Grafiken für die Programme der Creative Suite angefertigt. Hier ein kleiner Auszug aus dem Bereich Flash.

Feedback

Wie gefallen Euch die Icons bzw. das Design der Creative Suite 5? Ich für meinen Teil finde die neuen Icons sehr gelungen - auch wenn ich einige Zeit gebraucht habe um mich an den allgemeinen Stil zu gewöhnen.

Dieser Artikel und alle verwendeten Grafiken basiert fast vollständig auf Envolving the System Part 2 von Adobe Inspire.

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Flash CS5 ist momentan in aller Munde. Klar, die angekündigte iPhone Unterstützung macht das Programm brennend interessant. Wer sich einen Eindruck verschaffen möchte wie sich Flash CS5 anfühlt, dem sei folgendes Video ans Herz gelegt. Lee Brimelow zeigt in diesem X minütigen Tutorial alle neuen Features von Flash CS5 - insbesondere im Hinblick auf das iPhone.

• Sneak Peak of Flash CS5

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Wer kennt das Problem nicht. Da hat man einen Blog oder eine Website, will ein YouTube-Video einbinden und das von YouTube bereitgestellte Snippet ist invalide. Nun heißt es googlen und von irgendeinem x-beliebigen Blog den validen Sourcecode kopieren im das Video sauber einzubinden. Ich habe beim stöbern im Netz einen Online-Generator gefunden der all dies für uns erledigt. Inkl. der Option die spätere Ausgabegröße zu bestimmen. Einziger Nachteil: Auch als Profi muss man sich auf eine Seite mit dem demütigenden Titel Tools4Noobs begeben...

Achtung: kopiert nur den Code von object bis /object, sonst fügt Ihr auch noch gratis Werbung ein!

• YouTube-Video Validator

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe bietet im Marketplace eine Air-Application an die für Euch eine vollständige Liste aller Shortcuts der Creative Suite 4 bereit hält. Nach der Installation könnt Ihr alle Shortcuts von Illustrator, Photoshop Extended, InDesign, Flash Professional, Dreamweaver, SoundBooth, Fireworks, Contribute, After Effects, Premiere Pro, Encore und Acrobat für Mac sowie für PC nachschlagen.
Die Shortcuts können in zwei Kategorien (Essentials, All) betrachtet sowie zu den Favoriten hinzugefügt werden. Eine Suchfunktion hilft dabei schnell den gesuchten Shortcut zu finden. Besonders praktisch finde ich, dass alle Listen direkt als PDF-Cheetsheat angezeigt werden können.

Download: Adobe Shortcut App

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Im ersten Teil zur Public Beta von Adobe Flash Catalyst habt Ihr ein paar Infos zu Installation und Interface des Programms erfahren. Nun ist es höchste Zeit eine interaktive Anwendung zu erstellen.
In diesem Artikel lernt Ihr Schritt für Schritt eine dreiseitige Catalyst Anwendung mit Navigation zu erstellen. Da sich Catalyst in erster Linie an Designer wendet geht alles sehr schnell und einfach.

Demo anschauen

1. Photoshop-Datei vorbereiten

Über die bereits kennen gelernten Werkzeuge von Catalyst lassen sich simple Grafiken im Handumdrehen erstellen. Für dieses Tutorial nutzen wir jedoch eine Photoshop-Datei mit drei Screenshots dieser Seite als Grundlage. Diese Datei beinhaltet alle drei Screenshots, je einen auf einer Ebene. Um Euch einen besseren Anhaltspunkt zu geben und Zeit zu ersparen könnt Ihr Euch alle verwendeten Dateien zu diesem Tutorial hier herunterladen.

Download der Demo-Dateien

2. Dateien importieren und positionieren

Zunächst erstellen wir eine neue Catalyst-Datei. Dazu klickt Ihr im Willkommens-Screen des Programms auf "Adobe Flash Catalyst Project" und gebt im nachfolgenden Screen einen Dateinamen sowie eine Breite und Höhe von 400 Pixeln ein. Als Hintergrundfarbe wählt Ihr ein dunkles Grau (#1f252c). Klickt dafür zunächst auf das Farbfeld und tragt anschließend im oberen Bereich den Hexadezimalwert der Farbe ein. Leider scheint Copy-and-Paste (noch?) nicht zu funktionieren.

Als nächstes wollen wir unsere vorbereiteten Photoshop-Datei importieren. Dafür wählt Ihr aus der Programmleiste "Datei > Bildmaterial importieren" und sucht anschließend die entsprechende Photoshop-Datei aus. Im darauf folgenden Dialog stellt Ihr überall "Auf eine Ebene reduzieren" ein. Catalyst importiert nun alle drei Ebenen in einen neuen Ordner.

Positioniert nun die Screenshot-Ebenen zentriert auf Eurer Arbeitsfläche. Achtet bitte darauf, dass die Ebenen sich nicht wie aus Photoshop gewohnt verhalten. Die gesamte Funktionalität erinnert eher an Illustrator wo eine Ebene mehrere Objekte enthalten kann. Habt Ihr eine oder mehrere Ebenen/Objekte markiert könnt Ihr über [Cmd] + [Klick]/[Rechtsklick] auf die entsprechende Ebene in der Arbeitsfläche das Kontextmenü öffnen. Hier wählt Ihr anschließend "Ausrichten > Horizontal zentrieren/Vertikal zentrieren" um eine automatische Ausrichtung anzuwenden.

3. Navigationsflächen gestalten

Wählt nun das Ellipse-Werkzeug und erstellt eine beliebige Form. Anschließend stellt Ihr sicher, dass die Form auf der Arbeitsfläche markiert ist und vergebt im Bedienfeld Einstellungen folgende Werte: Als Breite und Höhe (W, H) wählt Ihr 15 Pixel. Anschließend deaktiviert Ihr über einen Klick auf das weiße Feld mit dem Querstrich den "Strich" (Kontur). Als Füllfarbe vergebt Ihr ein mittleres Grau (#808080). Positioniert den Kreis anschließend mittig unter dem Screenshot. Über "Edit > Kopieren" [Cmd/Strg] + [C] und anschließend "Edit > Einfügen" [Cmd/Strg] + [V] erstellt Ihr eine Kopie des Kreises. Verschiebt diesen links neben den ersten und erstellt anschließend eine zweite Kopie die Ihr rechts des Quellkreises positioniert.

4. Schaltflächen erstellen

Wir haben nun alle Elemente die benötigt werden erstellt, jetzt fehlt nur noch die Interaktion. Markiert zunächst den linken Kreis und wählt anschließend aus der Programmleiste "Fenster > HUD" [F7]. In nun angezeigten schwebenden Bedienfeld, dem sog. Head Up Display (HUD), wählt Ihr unter "Convert Artwork" "Bildmaterial in Komponente konvertieren > Schaltfläche". Euer Kreis wurde nun automatisch in eine Schaltfläche umgewandelt.

Wie aus Flash bekannt verfügen Schaltflächen über verschiedene Zustände die auch alle bereits im HUD angezeigt werden. Wählt hier nun "Darüber" aus; im Bereich der Seiten/Statusanzeige ganz oben im Programm werden nun die verschiedenen Zustände angezeigt. Klickt Ihr einen der Zustände an, so könnt Ihr die Eigenschaften des Kreises innerhalb des ausgewählten Zustandes verändern. Vergewissert Euch, dass der Zustand "Darüber" sowie der Kreis auf der Arbeitsfläche markiert ist und vergebt anschließend in den Einstellungen als Füllfarbe ein etwas helleres Grau (#d8d8d8). Anschließend wechselt Ihr in den Status "Gedrückt" und vergebt als Füllfarbe weiß (#ffffff). Der Status "Deaktiviert" kommt in diesem Tutorial nicht vor und muss daher nicht weiter beachtet werden.
In der schwarzen Leiste unterhalb der Status-Anzeige könnt Ihr über den kleinen Pfeil zurück in die Ausgangsdarstellung navigieren. Alternativ gelangt Ihr über einen Doppelklick auf der Arbeitsfläche dorthin. Wählt nun nacheinander die anderen beiden Kreise aus, wandelt sie ebenfalls über das HUD in eine Schaltfläche um und gestaltet anschließend die verschiedenen Zustände.

5. Seiten erstellen

Nun müssen wir die verschiedenen Screens unseres Tutorials erstellen. Stellt zunächst sicher, dass Ihr Euch direkt in der höchsten Statusebene befindet und nicht noch innerhalb einer Schaltfläche arbeitet. Dort wo zuvor noch die verschiedenen Stadien der Schaltflächen gewählt werden konnten findet Ihr nun eine Auflistung der unterschiedlichen Seiten Eures Projektes; in diesem Fall eine.
Erstellt nun zwei neue "doppelte Stadien" über den Button direkt unterhalb der Statusanzeige. Die verschiedenen Stadien verhalten sich genauso wie die Stadien einer Schaltfläche. Markiert zunächst den mittleren Status und blendet anschließend in der Ebenenpalette den Screenshot "Daylight" aus. Anschließend wechselt Ihr in den dritten Status und blendet dort alle Screenshots bis auf "Winter" aus. Per Klick auf die Stadien könnt Ihr nun die einzelnen Seiten des Projektes kontrollieren.

6. Buttons mit Stadien verknüpfen

Im vorletzten Arbeitsschritt verknüpfen wir die einzelnen Seiten bzw. Stadien mit den drei zuvor erstellten Schaltflächen. Markiert die linke Schaltfläche, sowie die erste Seite und klickt anschließend im HUD [F7] auf das Plus-Icon neben "Benutzerdefinierte Interaktionen". Im folgenden Menü wählt Ihr "On Click" aus. Es erscheint eine weitere Zeile im HUD in welcher Ihr nun festlegen könnt was passieren soll wenn geklickt wird: Wählt im linken Auswahlfeld "Übergang zu Status wiedergeben" und im rechten Feld "Page1" bzw. den Namen Eurer ersten Seite. Das war's auch schon.
Markiert nun die mittlere Schaltfläche und stellt auf die gleiche Art wie soeben beschrieben einen On-Click-Wechsel zu "Page2" ein. Der rechte Button soll auf "Page3" verweisen.

7. Glatte Seitenübergänge hinzufügen

Über die Zeitleiste habt Ihr die Möglichkeit zwei Stadien glatt ineinander überblenden zu lassen. Öffnet zunächst die Zeitleiste am unteren Bildschirmrand und entfernt als erstes die automatische Filterung. Neben dem Suchfeld auf der linken Seite könnt Ihr den Filter deaktivieren. Ihr seht nun eine Übersicht aller Statusübergänge des Projektes. Markiert den ersten Übergang und wählt anschließend den Button "Glatter Übergang" am unteren Ende der Zeitleiste; Es wird eine Übergangsanzeige in der Zeitliste eingefügt. Klickt Ihr diese an, so könnt Ihr die Dauer des Übergangs verändern. Verlängert nun die Dauer auf eine Sekunde. Jetzt müsst Ihr nur noch alle verbliebenen Statusübergänge markieren, einen glatten Verlauf hinzufügen und die Dauer auf eine Sekunde erhöhen.

8. Datei anschauen und veröffentlichen

Ihr habt nun die erste kleine Catalyst Anwendung erstellt. Wählt zunächst "Datei > Projekt ausführen" um die Datei im Primärbrowser anzuschauen. Wenn Ihr Eure Datei als Ausgabeprojekt abspeichern wollt, so wählt "Datei > In SWF veröffentlichen". Flash Catalyst erstellt nun automatisch einige Ordner, Grafiken, JavaScripte und Flash-Inhalte. Die Start-Datei findet Ihr anschließend im Ordner "run-local" unter dem Namen "Haupt.html".

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Adobe hat vor einigen Tagen unter Adobe Labs die Public Beta des neuen Programms Flash Catalyst zum Download bereitgestellt.
Flash Catalyst soll die Schnittstelle zwischen Design und Interaktions-Developement vereinfachen. In diesem Artikel erfahrt Ihr die Basics über Download, Installation, Interface und Werkzeuge von Catalyst. Im nächsten Beitrag erstellt Ihr eine Interaktive Anwendung!

Die Installation

Die Installation funktioniert absolut ohne Probleme. Unter Adobe Labs ladet Ihr Euch zunächst die entsprechende Programmversion (Mac/PC) herunter. Um die ca. 335MB große Datei zu erhalten benötigt Ihr jedoch einen Account bei Adobe. Solltet Ihr über keinen Account verfügen so könnt Ihr Euch hier anmelden.
Nach dem Download funktioniert alles wie gewohnt: Datei entpacken, Setup starten, fertig. Die Seriennummern für die entsprechenden Versionen findet Ihr auf der Download-Page von Adobe. Da ich Sie jedoch auch übersehen habe poste ich sie hier der Vollständigkeit halber noch einmal.

• Macintosh — 1395-0008-4467-2145-8771-1212
• Windows — 1395-1003-6369-7619-0587-6556

Die Programmoberfläche (Interface)

Das Interface von Catalyst ist ähnlich aufgebaut wie Flash CS4 Professional und ist natürlich auch optisch im look-and-feel der gesamten Creative Suite. Sobald das Programm gestartet wurde müssen wir uns entscheiden wie wir vorgehen möchten. Ihr könnt eine leere Arbeitsfläche erstellen oder eine bereits existierende Datei öffnen. In der Public Beta habt Ihr hier die Auswahl zwischen Photoshop-, Illustrator- und FXG-Dateien.
Im oberen Bereich des Programms findet Ihr die verschiedenen Screens/Stadien Eures Projektes. Direkt darunter befindet sich die Arbeitsfläche die Ihr über F4 vergrößern könnt. Die Zeitleiste wurde anders als in Flash am unteren Ende des Programms positioniert. Auf der rechen Seite findet Ihr die bekannten Bedienfelder. Leider lassen sich diese bisher nur über einen Klick auf die Überschrift verkleinern, jedoch (noch) nicht ausdocken. Zu den verfügbaren Bedienfeldern zählt die Werkzeugpalette (sehr ungewohnt auf der rechten Seite), die Ebenen, Wireframes, Bibliothek, Designzeitdaten und Eigenschaften. In der oberen rechten Ecke kann zwischen einer Design- und einer Code-Ansicht gewählt werden.
Die gesamte Usability ist noch etwas schwerfällig und wirkt mitunter wie eine Rich Internet Application, allerdings handelt es sich bei Catalyst ja auch noch um eine Beta.

Werkzeuge & Elemente

Wie bereits erwähnt befindet sich die Werkzeugleiste nun in der rechten oberen Seitenleiste. Im Folgenden erkläre ich kurz und knackig die bisher verfügbaren Funktionen.

• Das erste Werkzeug (von links) ist das Auswahl-Werkzeug. Hiermit wählt Ihr Objekt oder Gruppen aus.
• Das Direktauswahl-Werkzeug wählt innerhalb von Gruppen einzelne Objekte aus.
• Mit der Lupe zoomt Ihr per Klick an die Arbeitsfläche heran oder Ihr zieht einen Rahmen auf um den ausgewählten Bildausschnitt zu vergrößern.
• Die Form-Werkzeuge Rechteck, abgerundetes Rechteck, Ellipse, Linie und Dreieck erstellen eine entsprechende Form. Anschließend könnt Ihr in den Einstellungen rechts unten Konturen, Füllungen, Verläufe, Deckkraft etc. definieren.
• Mit dem Textwerkzeug erstellt Ihr einen Textbereich. In der Beta-Version könnt Ihr den Text noch nicht über einen Doppelklick in das Textfeld hinein editieren sondern müsst diesen ebenfalls im Einstellungen-Bedienfeld eingeben.
• Das Transformieren-Werkzeug ermöglicht es Euch Objekte zu drehen.

Adobe Flash Catalyst Tutorial

Im nächsten Teil zu Adobe Flash Catalyst Public Beta lernt Ihr wie Ihr eine interaktive Anwendung mit Schaltflächen und drei Unterseiten erstellt. Ihr wollt diesen Beitrag nicht verpassen? Dann abonniert meinen RSS-Feed!

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Heute zeigte mir ein Kollege die neue Full-Flash-Werbekampagne von Mini Cooper. Er war begeistert - und das soll was heißen. Ich war es auch.
Mini Cooper hat Din-A4-Anzeigen geschaltet um das neue Cabrio-Modell zu promoten. Die Anzeige selbst sagt nicht viel aus, die Werbung an sich leistet jedoch erstaunliches: Sofern man über die Mindestvoraussetzungen (Windows-Rechner und Internet Explorer 6+ sowie Webcam) verfügt, taucht man mit dieser Werbung in eine Welt der bisher nie da gewesenen Produktpräsentation ein.

Faszinierend

Der Trick ist folgender: Man begibt sich mit der Anzeige (oder einem Ausdruck der Anzeige) in der Hand auf die Website von Mini, aktiviert seine Webcam und hält die Anzeige in die Linse. Man sieht sich selbst auf dem Monitor, doch es erscheint zusätzlich das neue Cabrio-Modell als 3D-Rendering auf der Anzeige stehend. Je nachdem wie man die Anzeige hält oder dreht, ändert sich auch der Blickwinkel auf das Auto-Modell. Eine - wie ich finde - bombastische Idee!
Absolut nachteilig ist hingegen, dass die Werbung nur von Windows-Usern mit Webcam und Internet Explorer gesehen werden kann; was auf mich leider nicht zutrifft. Ich wollte Euch eigentlich ein selbst gedrehtes Video der Kampagne zeigen, leider verfügten die zwei Windows Rechner die mir heute zur Verfügung standen nicht über eine Webcam - mein Mac nicht über Windows/Internet Explorer ... das ist mehr als nur bedauerlich...

Da bleibt mir leider nicht viel mehr als Euch auf das "Making-Of" der Kampagne zu verweisen. Zumindest ist dieses Video ebenfalls absolut sehenswert. Sofern Ihr die Aktion ausprobiert habt, würde ich mich natürlich über ein Feedback freuen ob das in der Realität auch so gut funktioniert.

Links zum Artikel

Download: Werbeanzeige als PDF-Dokument

Link zur Produktseite: http://www.mini.de/webcam

Jetzt bist Du gefragt

Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.