„Flash ist ein Mädchen“

[Großfassung hier]

Ich hab's ja schon immer gesagt...

christiansparrow.com

www.christiansparrow.com ist ein FLASH- basierendes Internetportfolio eines amerikanischen Mediendesigners. Gestaltet ist die Seite von Christian Sparrow selbst, programmiert vom schwedischen Programmierer Erik Hallander. Die gut strukturierte und übersichtliche Homepage enthält Elemente zur Privatperson, aber auch zu seinen Arbeiten und seinem Werdegang und richtet sich somit nicht nur an Freunde und Bekannte, sondern ebenso an potentielle Auftraggeber.
Die Navigation ist einfach und funktioniert zum Beispiel im PORTFOLIO in den Untermenüs zum Aufklappen oder Anwählen von Unterpunkten durch die Anlehnung an klassische PC- oder MAC-Pragrammfenster ohne großes Web-Wissen. Die gezeichneten Elemente wirken trotz Zeichenstrich übersichtlich und sauber. Selbst die Linien und Kästen sind im „Zeichenbord-Look“ gehalten, wirken aber nicht störend krakelig. Die klare und runde Form der Typography ist trotz der Tatsache, dass sie keine 0-8-15-Schrift ist, angenehm zu lesen.
In jedem Menüfenster befinden sich mehr oder weniger animierte Grafikelemente, an denen der Ursprung der Webseite aus FLASH am deutlichsten wird. Schon das Laden der Sequenzen beginnt nicht mit einem Ladebalken sondern die Elemente „fallen“ förmlich auf den Bildschirmhintergrund, wobei diese Webseite trotz feiner grafischer Elemente auch auf langsamen Rechnern flüssig läuft. Bei den Grafikelementen wird ebenso die Ebenenanmutung von FLASH deutlich, da Vorder-, Mittel- und Hintergrund klar voneinander zu unterscheiden sind.
Dieses Portfolio weckt das Interesse beim User und überzeugt durch sein Ästhetik, der man ihren FLASH-Ursprung ansieht, kombiniert den Entertainment-Auftritt aber mit klarer Struktur und einfacher Benutz- und Bedienbarkeit.

Felix

cyrkam_airtos

Es ist ein wenig spät und ich will jetzt alle vom Arbeiten abhalten. Und zwar mit diesem Spiel welches mich eben kurz vom Arbeiten abgehalten hat... und das tut es indem es eine weitere Arbeitsalternative simuliert... und das, wie ich finde, recht nett gemacht.
Haben uns ja im Kurs eher in Richtung Flash-Page orientiert, aber ein nettes Flash-Spiel zwischen durch ist ja auch mal was.

Gute Nacht
Pascal

Interaktive Animation per ActionScript

Hier zur Abwechslung 2 Varianten der klassischen Mouse-Follower-Aufgabe, die FLA-Dateien dazu kommen aufbereitet und kommentiert am 28.6.

Folien 21.06.2007

Hier die Inhalte vom 21.06.2007.

Functions & Prototypes

Die FLA-Datei zum unspektakulären Film oben.

MS Surface und Mercedes C-Klasse

Über Microsoft Surface haben wir ja schon im Seminar gesprochen, die Website dazu ist ein schönes Beispiel für gute Animation und Videointegration in Flash. Ganz anders und einfach schön ist die neue britische Website für die C-Klasse von Daimler Benz.

Bildergalerien mit externen Bildern und Daten

Und hier die besprochenen FLAs:
Das Bilderstreifen alleine
Komplette Bildergalerie als Zip

plasticparticles.de

plasticparticles.de ist eine Art Sammlerstückkatalog verpackt in einem Jump’n’Run à la Super Mario nur mit Affe und ohne Pilze und Röhren.

Bis zu einem bestimmten Punkt ist es möglich die Seite ohne eine Maus zu verwenden zu erkunden. Mit den Pfeiltasten lässt sich ein kleiner Affe durch die Seite steuern. An bestimmten Stellen wird, ausgehend vom Aufenthaltsort des Affens Text gescrollt, an anderen erscheinen Kästchen in der Luft, welche für jeweils einen Artikel aus dem Katalog stehen. Lässt man den Affen darauf springen wird in einer Sprechblase der jeweilige Artikel samt Beschreibung gezeigt. Drückt man nun eine Nummer auf der Tastatur wird entsprechend der gedrückten Taste eine Bestellmenge für den Artikel eingetragen. Dadurch lassen sich lediglich Nummern zwischen 0 und 9 eingeben. Sobald sich Artikel im "Wagen" befinden lässt sich dieser über einen am oberen Bildrand erscheinenden Button mit der Maus erreichen.
Neben den Elementen durch welche man zusammen mit dem Affen den eingetlichen Inhalt der Seite enthüllen kann sind auch ein paar Spielereien enthalten, z.B. Sprungfedern, welche den Affen bei Betreten in die Lus
ft schleudern, Wolken, welche sich sobald sich der Affe darauf befindet Seitlich in Bewegung setzen oder Figuren im Hintergrund die AUf die Anwesenheit des Affens reagieren.
Die Seite ist sehr übersichtlich. Das trifft leider auch auf die zu entdeckenden Gimmicks zu wodurch sie auch schnell durchforstet ist. Die Idee eine Homepage wie ein Jump'n'Run anzulegen ist allerdings recht lustig.

Pascal

(Vertikal) Scrollen

Die ganz einfache Lösung mittels AS2 und der Textfeld-Eigenschaft „scrollable“: In der Anmutung nicht grade eben elegant, dafür denkbar einfach und winzig klein (<1 KB!) [FLA]

Dieselbe Lösung, ein klein wenig verändert, damit kontinuierliches Scrollen möglich ist [FLA]:

Weiter gehts mit einem dragable Scrollbar zwischen den Buttons. Dazu kommt noch in diesem Fall im Textfeld ein dynamischer Text aus einer Variable. [FLA]

Deutlich besser ist dann nochmal diese Variante hier: Sie erlaubt weiches (smoothes) Scrolling, der Scrollbar ändert seine Höhe im Verhältnis von Textfeld-/Maskenhöhe zu Textmenge, man kann überall in den Scrollbereich klicken um direkt an eine Textstelle zu springen,... [FLA]

TBWA hakuhodo.co.jp

www.tbwahakuhodo.co.jp ist die Homepage einer japanischen Agentur. Man betritt die Seite und zwei Hände bastlen die Seite wie ein Collage zusammen, drücken auf den "Startknopf" und das Ganze erwacht zum Leben. Jetzt hat man als Besucher die Möglichkeit über einen Naviationsbalken unten auf der Seite oder durch anklicken verschiedener Gegenstände/Gebäude auf der Collage zu navigieren. Hat man etwas Anklickbares gefunden erscheint eine Animation und daraufhin ein Fahrstuhl, der eigendlich nur als Preloader fungiert. Man wartet also auf den Fahrstuhl, er kommt öffnet sich und man landet in einer neuen Landschaft. Ein Fernsehstudio, eine Präsentation, ein Flughafen (?) usw. in denen man wiederum entweder über die Navigation unten oder durchs klicken im Bild PopUps öffnen kann, in weitere Räume kommt...

Die Homepage animiert dazu erstmal alles anzuklicken, alle Seiten durchzusehen. In jeder Landschaft passiert sehr viel. Nebenbei nimmt man dann aber doch die Informationen auf die auf dieser Seite zu finden sind.

Kennt man die Homepage schon und man möchte nur an bestimmte Infos, kommt man schnell über das Balken Menü auf die gewünschte Seite, allerdings muss man jedesmal die Ladezeiten in kauf nehmen.

Folien 31.05.07

Hier die Inhalte vom 31.05.2007 - ein kleiner Einstieg in Web Design, GUI Elements,...

kahrashin.com

Sabrina schreibt noch was über Kah-Ra-Shin

Verbreitung des Flash Players

Da es mehrfach gefragt wurde: Hier einige (Adobe) Zahlen zur aktuellen Marktdurchdringung des Flash Players/-Plugins in verschiedenen Versionen.

Creative Mind

Emilia schreibt noch was über Creative Mind

Lotto-Übung

FLA-Datei zur Lotto-Übung

Folien 24.05.07

Hier die Inhalte vom 24.05.2007 (Strings, Arrays, ...), die eigentlich schon für den 10.5. geplant waren - JETZT AUCH TIPPFEHLERFREI!

Folien 03.05.07

Hier die Inhalte vom 03.05.2007 (Basics, Variablen, Schleifen,...)

ff0000.com

http://www.ff0000.com/ ist die Website der Red Interactive Agency, also eigentlich eine Art Portofolioseite. Das interssante an der Seite ist, dass sobald man sie betritt eine Figure(Avatar...?) zugewiesen bekommt. Mit dieser Figure kann man mittles der Tastaur nun auf der Seite rumlaufen, rumfliegen, mit anderen anwesenden Usern chatten oder auch sich boxen wenn man lust hat. Wenn man lang genung nach links oder rechts geht kommt man auch wieder am Anfang an, die Landschaft fügt sich also zu einem endlos Loop zusammen. Ausser Boxen kann man auch noch andere sachen machen, z.B Tanzen und Posen, diese Sachen muss man allerdings ein bischen suchen auf der Tastatursteuerung.
Die Interaktivität auf dieser Seite is wirklich schön und man kann die eine oder andere Minute drauf verbringen. Bei der ganzen Spielerei vergisst man allerdings schnell mal, sich auch noch andere Sachen der Agentur anzuschauen, aber die Seite bleibt auf jeden Fall im Kopf und ich finde sie im ziemlich gelungen. (Hab grad gesehen, dass auf der Seite auch manchmal nen Pferd rumlaüft, das is neu so wie ich das sehe, also einfach ab und zu mal draufgucken....)

Felix

Website-Vorstellungen

19.04.07 --- Meine Ausgefallene findet Ihr hier
26.04.07 --- Felix Franz
03.05.07 --- Emilia Forstreuter
10.05.07 --- LEIDER AUSGEFALLEN WEGEN KRANKHEIT
24.05.07 --- Pascal Reitz und/oder Jörn Gröticke
31.05.07 --- Julia Henkel und Sabrina Wolter
07.06.07 --- Felix Weitekamp
14.06.07 --- Stephanie Wolf
21.06.07 --- Svenja Beiersdorf
28.06.07 --- Gesine Hildebrandt
04.07.07 --- Anna Bonnke und Anna Braun

Wenn jemand sein Termin so gar nicht paßt bitte selbstständig untereinander tauschen und an diesem Post in die Kommentare schreiben.

gotoAndLearn();

Leider mußte ich feststellen, das gotoAndLearn.com bis auf weiteres wegen größerer Umbauarbeiten nicht online ist - schade eigentlich :(

Es lohnt sich aber, da gelegentlich vorbeizuschauen, ob sie (in anderer Form) wieder da ist, ich werds dann ggf. auch im Kurs verkünden.

Get the Glass!

gettheglass.com ist eine Begleitwebsite zu einer klassischen Werbekampagne. Dementsprechend sind auch die TV-Commercials als Flash-Videos in der Website anschaubar, dazu gibt es den üblichen Download-Kram (Wallpaper,etc.)

Eigentlich interessant ist das Online-Spiel: Spielmechanik ist "Spiel des Lebens", "Monopoly", o.ä. also ein Brettspiel, was ungewöhnlich ist für ein webbasiertes Flash-Spiel. Man kann sich das Spielbrett angucken (MAP) und es gibt eine Online-Bestenliste (Leader Board) die bereits gehackt ist (es ist aber auch beinahe unmöglich, ein flash-basiertes Online-Spiel mit einer sicher Bestenliste zu versehen ;)

Das Spiel selbst ist m.M. nach außergewöhnlich: Eine sehr aufwendige Mischung aus Video und 3D in Flash, die Videoproduktion ist für eine reine Online-Verwendung extrem aufwendig: Das Spielbrett ist dreidimensional als eine liebevolle hochdetailierte Modellbaulandschaft (eine Insel) erstellt und real gefilmt worden. Nachträglich wurden 3D-Effekte für Wasser, Wetter,usw. eingefügt.

Auf der Insel/dem Spielplan bewegt man sich auf den Feldern einer Straße vorwärts in einem Modellbauauto, dessen Insassen als 3D-Charakters animiert wurden. Sie entsprechen den Charakteren, die in den TV-Spots durch reale Schauspieler dargestellt werden. Unter den verschiedenen Feldern gibt es Monopoly-artig Aktionsfelder, die zu Mini-Spielchen führen, und es werden Ereigniskarten gezogen ("Gehe ins Gefängnis" ).Die Karten liegen unter dem Spielplan und werden gezogen und über den schicken Videos des Geschehens auf der Insel ausgespielt. Das Video bzw. die Monitor-Oberfläche an sich wird visuell nochmals besonders als Spielbrett in Szene gesetzt. da man auf Ihr würfelt! Mitten auf der Website liegt ein klassischer weißer 6-seitiger Würfel, der mit dem Mauscursor bedient wird. Er "würfelt" sehr anschaulich mittels einer in Flash programmierten 3D-Engine (Papervision3D, kurz PV3D). Man spielt gegen einen Computergegner in Gestalt eines Polizeiwagens, warum man von der Polizei verfolgt wird ist Teil der Hintergrundstory. Diese ist zwar witzig aber relativ unwichtig und hat mit dem beworbenen Produkt (nochmal zur Erinnerung: eigentlich dreht sich die Website um Milch) eher nichts zu tun, daher gehen ich darauf hier auch nicht näher ein.

Die Website hat m.M. nach einen extrem hohen Schauwert und dementsprechend auch schon für reichlich Furore im Web gesorgt und wohl somit (trotz der teils sehr happigen Ladezeiten) ihren Zweck wohl voll erfüllt.
Wer mehr über die Produktion erfahren will, gucke sich hier das Making-Of an mit div Produktionsfotos, Testrenderings, Videos, usw.

Die Website: gettheglass.com
Agentur: Goodby, Silverstein & Partners und North Kingdom
Für: CA Fluid Milk Processors
(Making of: How the Glass was built)

1 Klick.jp

Roxik.com Toy 1

SWFAddress - Deep linking in Flash

SWFAdress ist ein kleines Script, das einzelne 'deep links' in Flashfilme ermöglicht (hier ein Beispiel). Das kann für die Benutzbarkeit einer Flash-Website eine deutlich verbesserung sein! Das Script ist eine hervorragende Ergänzung zum ähnliche angelegten SWFOject, auf dieser Website ausführlich (auf englisch) erklärt.

SWF Object SO-Tester

Hier für alle die kein Flash 8 benutzen die Datei so_tester.fla zum SWF Object von Geoff Stearns als Flash 7-Version.

Stage Resize und Align

In dieser FLA-Datei ist nochmal exemplarisch gezeigt, wie man einen Flashfilm für die Anzeige im Browserfenster vorbereitet - interessant z.B. zum Gestalten eines Flash-Banners für die HBK-Website.

Actionscript Variablen-Handling

Hier die Vorlagendatei zu Umgang/Weitergabe mit Variablen kreuz und quer durch einen Flashfilm.

Monoface

Da kann man lange Fratzen zusammenklicken :)

Dubois meets Fugger + IAAH

Zwei schöne, durchanimerte Navigationen mit viel Variation und Ton (ganz so aufwendig muß die Navigation der Semesteraufgaben natürlich nicht sein)

Übungsaufgabe 6 (die letzte :)

Als letztes solltet Ihr die Aufgaben mit einem Menü zusammenfassen und navigierbar machen. Also bietet es sich an, eine Datei „start.swf“ (Bühnengröße z.B. 800x600px?) mit den von Euch gestalteten Navigation zu erstellen. In diese werden dann mittels 'loadMovie()' die swfs der anderen Aufgaben nachgeladen.

Zusätzlich solltet Ihr noch einen 6.Navigationspunkt vorsehen, dort verlinkt Ihr einen kurzen Text, in dem Euer Name, Matrikelnummer, Kursname, Semester, ... stehen, vernünftig lesbar gesetzt (wer will auch gern mit Foto, animiert,... um es gestalterisch etwas interessanter zu machen).

Alles zusammen brennt Ihr bitte auf CD, die Ihr mit Eurem Namen und „Digitales Entwerfen Flash WS 06/07“ beschriftet im IMF zu Händen Prof. Eku Wand abgebt - und zwar bis Ende des Semesters (also erste Aprilwoche 2007 glaube ich ;)

Bei Fragen einfach fragen, ansonsten VIEL SPASS!

Übungsaufgabe 5

Es soll ein Banner für die Webseite der HBK erstellt werden. Dazu können fast alle gewünschten Möglichkeiten genutzt werden (ein wenig Actionscript zu üben ist mit Sicherheit nicht von Nachteil). Einzige Einschränkungen: Bitte nur Sound verwenden, wenn auch ein Stumm-Button im Banner eingebaut wird und insgesamt etwas auf die Dateigröße achten - sowie auf das ungewöhnliche Format des Banners: 69 px Höhe und flexible Breite (800 - 1600 px!).

Die Vorlagendatei für die HBK-Banner (mit dem Logo,...) könnt Ihr hier als Flash 6- und hier als Flash 7-Datei herunterladen.

Übungsaufgabe 4

Es soll eine interaktive Animation erstellt werden. Dabei bietet es sich an, kleine Actionscripte wie etwa

onClipEvent (enterFrame) {
this._x += (_root._xmouse-this._x)/4;
this._y += (_root._ymouse-this._y)/4;
}

zu nutzen, um MovieClip-Instanzen auf der Bühne in Laufzeit (also 'onEnterFrame') relativ zur Position des Maus-Cursors (also z.B. '_root._xmouse') zu animieren.
Eine Beispieldatei findet Ihr z.B. hier.

Übungsaufgabe 3

Diesmal soll eine frei wählbare Flash-Animation/Video/... mit einer Video-Fernbedienungs-Steuerung für den User interaktiv bedienbar gemacht werden.
Es soll also eine Reihe von Grafiken erstellt werden, die als Play-, Stop-, Pause-Buttons usw. erkennbar sind (z.B. mit Textbeschriftung, Grafiksymbolen,...) Diese werden jeweils als Schaltflächen-Symbole in die Bibliothek gelegt, dann auf der Bühne passend zur Animation platziert und dann mit Scripten versehen.

Nochmal als Gedächtnisstütze hier kurz das Grundschema für ein kleines Skript auf einem der Buttons:

on (Eventart) {
Instanzname_des_zu_steuernden_Movieclips.Steuerbefehl();
}

also z.B.

on (press) {
wasserfall.gotoAndPlay(1);
}

ergibt einen Button, der die Animation namens 'wasserfall' zu Bild 1 (also dem Anfang ihrer eigenen inneren Zeitleiste) zurückspringen läßt und von dort neu abspielt.

Übungsaufgabe 2

Eine längere Animation erstellen nicht nur mit Keyframes, sondern mit blauen und grünen Tweenigs. Zur Erinnerung: Das (blaue) Bewegungstweening für gruppierte Elemente, Objekte und Symbole aus der Bibliothek - das (grüne) Formtweening für Handgezeichnetes, einzelne Linien, Flächen und offene Objekte. Dabei Möglichst jedes Objekt das einzeln gewteent werden soll auf eine eigene Ebene. Es kann eigenes Bild- und Grafikmaterial verwendet werden oder die MovieClips aus der Bibliothek der Vorlagendatei zur zweiten Aufgabe. Diese kann hier heruntergeladen werden.

Wichtig ist vor allem, die Möglichkeiten zur Verschachtelung von Objekten zu Nutzen, d.h. in einem MovieClip wiederum Grafik und Objekte zu animieren und die Animationen bewußt zueinander zeitlich zu platzieren. Verschachtelung ist der wesentliche Grundgedanke des Arbeitens in Flash - das müßt Ihr so lange probieren bis Ihr Euch damit sicher fühlt! Wenn man das nicht verstanden hat, kann man mit Flash nicht vernünftig arbeiten.

Der Film soll möglichst gezielt auf einen oder mehrere Sounds hin animiert werden, dazu könnt Ihr beliebige Geräusche/Töne verwenden (z.B. von hier). Diese einfach über DATEI > IMPORTIEREN in die Bibliothek legen und von dort auf die Bühne ziehen. In der Zeitleiste sieht man dann schon eine blaue Hüllkurve der Lautstärke als Vorschau und Hilfe zur Animation, wie lange der jeweilige Ton zu hören ist.

Übungsaufgabe 1

Wir fangen ganz einfach an: Eine einfache Animation mit Keyframes. Bühnengröße ist 550x400 Pixel mit 12 Bildern pro Sekunde. Die Animation soll loopen können, also am Ende wieder zum Anfang springen und ohne störende Ruckler durchlaufen.
Ziel der Übung ist kein abendfüllendes Flash-Kunstwerk, sondern einfach erstmal mit den Zeichenwerkzeugen, den Ebenen, Schlüsselbildern, Bildwiederholungen und einigen wichtigen Tastaturkürzel (F5, F6, F7,...) vertraut zu sein. Als Länge der Animation reichen bereits ein oder zwei Sekunden wenn Ihr Euch sicher seid, das Ihr mit und in der Zeitleiste sicher arbeiten könnt.
Ein Beispiel wie eine einfache Bild-für-Bild-Animation aussehen kann (und was man z.B. mit Tweenings schlecht hinbekommt) ist hier.

Adobe Web Events

Eine prima Gelegenheit für alle, die nebenbei was lernen wollen: Adobe Web Events sind kostenlose (!) Online-Vorlesungen, die man sich live angucken kann, inklusive Fragen stellen, usw. Es dreht sich immer um ein bestimmtes Thema zur Software von Adobe, dazu zählen neben Flash auch Photoshop, Acrobat, Dreamweaver, After Effects, Premiere, uvm.

Einen Überblick über die nächsten Seminare/Events findet Ihr hier: http://adobewebevents.de/
Dazu gibt es auch Aufzeichnungen von den bisherigen Events:
http://www.adobewebevents.de/handouts/

Klassischer Preloader

FLA-Datei

Version Check

FLA-Datei

Larry Carlsons Northvale

Ich weiß nicht genau, was das ist, aber man sollte es vielleicht gesehen haben...

Ms. Dewey weiß alles...

Die etwas andere „Suchmaschine“ mit recht lustigen Kommentare zu den Anfragen.

blackbeltgraphics.com

jonathanyuen.com

Sehr schöner Grafik-Stil.

SWF Object auf Deutsch erklärt

Hier findet Ihr eine deutsche Erklärung mit Beispielen für die Verwendung des SWFObject.

Eine Übersetzung von Geoff Stearns englischem Projekt (link) - vielen Dank dafür an die Powerflasher (link).

Darstellungsqualität

FLA-Datei

StageAlign

'Stage Align' und 'fscommand allowScale' erklärt am Beispiel von hbk-Bannern. Beispieldateien und Vorlage aus einem älteren Kurs hier.

uniqlo.com

Großartige Navigation über Bilder.

julianred.com

iam-studios.nl

gringo.nu/v2/

lab.mathieu-badimon.com

Schöne 3D Website!

DuplicateMovie - ActionScript 1

Dieses Beispiel ist nicht von der Mausbewegung des Nutzers abhängig. Nach definierten mathematischen Zufällen werden Objekte (hier ein einfacher weißer halbtransparenter Kasten) in Laufzeit des Flashfilms auf der Bühne platziert. Die kommentierte Fla-Datei liegt hier zum herunterladen.

ramdom (X) - Math.random

Die ganz simple Einstiegs-Datei liegt hier zum herunterladen, die Fla-Datei zum einfachen Entenrennen unten hier.

Einfach mal den A... abtanzen

... z.B. mit Beitrag Nummer 91371 :)

Deutsche (!) Flashseiten/-communities

Im Forum flashhilfe.de finden sich viele Einträge, Beispiele und Tutorials diverse Funktionen und Lösungen. Die Inhalte reichen von Flash 4 bis Flash 8 und von echten Einsteiger-Tutorials bis zu ziemlich mittleren fortgeschrittenen Themen!
Bei flashforum.de gibts vermutlich sogar noch mehr Enträge! Auch hier geht es sehr einsteigerfreundlich los, hier posten aber auch die „deutsche Flasher-Elite“ zu Themen die wirklich speziell und knifflig sind (hier gibts wirklich immer wen, der einem weiterhelfen kann oder das gleiche Problem schon gelöst hat :)

yugop.com

Yugo Nakamura ist Japaner und einer der interessantesten (und bekanntesten) ... naja was isser eigentlich? Experimentier-Flash-Design-Programmier-Künstler vielleicht?

Hier seine Website: http://yugop.com (leider länger nicht aktualisiert). Wer wissen will, was er aktuell so treibt guckt in seinen news-feed und in seine delicious-bookmarks

Frohes Neues :)