Archiv für Postings mit dem Tag ‘flash’
Montag, 29.03.2004
Die einwöchige Flash-Einführung aus dem BMC-Kurs liegt schon etwas zurück: Matthias
zeigte uns im letzten Juli das wichtigste, um uns einen Überblick zu geben.
Ab heute steht wieder Flash auf dem Stundenplan, diesmal jedoch im »richtigen« CMD-Kurs. Diese und die nächsten vier Wochen bringt uns erneut Matthias von den
Gameworkern alles Wissenswerte zum Programm und seiner Programmiersprache »Actionscript« näher.
Da der Erstkontakt wie erwähnt bereits einige Zeit her ist, gab es heute zunächst eine Wiederholung im Schnelldurchlauf. Mit der Hausaufgabe, daheim nochmals zu üben. Er zeigte uns die drei verschiedenen Symbole in Flash – Movieclip, Button und Graphic –, welches man für welchen Zweck benötigt und was sie können und was nicht. Das wichtigste Symbol ist der Movieclip (»MC«), denn er spielt unabhängig von anderen Zeitleisten und ist per Actionscript steuerbar; daher ist er die Verpackung für Animationen.
Zum Thema Symbole gehört natürlich auch die Library und eine Aufklärung darüber, wie in Flash mit Originalen und Instanzen gearbeitet wird.
Nach den Infos zu den verschiedenen Symbole ging es an einfache Animationen, denn auch da gibt es unterschiedliche Arten:
- Das Motion-Tweening, das nur mit Symbolen funktioniert
- Die Masken-Animation, eine spezielle Form des Motion-Tweenings: Teile des Films werden durch Masken verdeckt/sichtbar.
- Die Pfad-Animation, ebenfalls eine Sonderform des Motion-Tweenings: Ein Symbol wird an einem Pfad entlang bewegt.
- Das Shape-Tweening, das Gegenstück zum Motion-Tweening: Shape-Tweening arbeitet mit Shapes.
Nach der Pause erhielt jeder das vierte Buch: Nach dem Photoshop- und dem Director-Buch sowie einem von zwei Büchern zu Cinema (Galileo oder Maxon-Referenz und -Tutorial) gab es jetzt das Flash-Buch: Und zwar das Standardwerk, das »Wolter-Buch«.
Natürlich ging es dann auch mit dem Unterricht weiter: Auf dem Programm stand »multi-dimensionales Tweening«. Einfach gesagt braucht man das, um ein animiertes Objekt (z.B. ein Vogel, der mit den Flügeln schlägt), nochmals zu animieren (der Vogel bewegt sich über die Bühne).
Als nächstes sahen wir uns die Möglichkeiten des »Easing« an, mit dem eine Bewegung nicht-linear ablaufen kann (sondern am Anfang schnell und am Ende der Bewegung langsam, oder umgekehrt: anfangs langsam, am Ende schnell). Das ist wichtig, um Bewegungen abbremsen zu können und ihnen so einen natürlicheren Ablauf zu geben. Beispiel: Ein Ball, der auf dem Boden aufschlägt, fährt ja nicht wie ein Fahrstuhl hoch und runter.
Weiter ging’s mit den Buttons, genauer: Multistate-Buttons, mit denen z.B. eine Animation an- und abgeschaltet werden kann.
Ein rasanter Einstieg in Flash, aber es macht Spaß!
Hier noch ein Beispiel für eine Masken-Animation mit Outlines:
Erschienen am Montag, 29.03.2004 @ 22:03
| Kommentare deaktiviert
Tags: flash, SAE
Dienstag, 30.03.2004
Zweiter Tag des Flash-Unterrichts bei Matthias in der SAE. Nach der zügigen Einführung von
gestern ging es heute mit einem Einstieg in Actionscript weiter, der Scriptsprache von Flash. Matthias zeigte uns die Event-Handler von Movieclips und verglich sie mit denen von Lingo/Director, die wir ja schon kennen. Ein Event-Handler
onClipEvent(load) wird gleich anschaulicher, wenn man weiß, dass sein Lingo-Pendant
on beginSprite me ist.
Nach den Event-Handlern ging es mit ausgewählten Properties wie
_x und einigen Infos zu Kurschreibweisen weiter. Letztere sind uns von
Javascript schon einigermaßen bekannt. Sachen wie
zahl++; statt
zahl = zahl + 1;.
Erste Übung heute: Drag’n'Drop. Zunächst ein paar Vorkenntnisse, worauf sich Actions bei einem Movieclip und einem Button beziehen, die man an unterschiedlichen Stellen notiert.
Drag’n'Drop ist in Flash, im Gegensatz zu Director, ziemlich einfach. Folgende Action auch einen Button gelegt:
on(press) {
this.startDrag();
}
on(release) {
stopDrag();
}
Sieht cool aus, ist es aber nicht: Da der Button sich selbst nicht kennt und sich auf die Ebene darüber bezieht, wird nicht der Button gedraggt, sondern die ganze Bühne. Lösung: Der Button muss noch in einen Movieclip gepackt werden, dann verschiebt der Button den übergeordneten Movieclip und die Bühne bleibt, wo sie ist.
Wir schrieben dann eine einfachere Variante, die ab Flash 5 funktioniert (einfacher, weil die Struktur flacher ist). Dabei verwenden wir keinen Button, sondern direkt einen Movieclip, der die onClipEvents mouseDown und mouseUp bekommt.
Problem dabei: Das Draggen »funktioniert« auch, wenn irgendwo auf der Bühne geklickt wird. Die Lösung ist eine kleine Kollisionsabfrage, die man mit hitTest realisiert (in Lingo: intersect). Bei der Gelegenheit gab uns Matthias ein paar Tips zum Actionscript-Dictonary (der Online-Referenz): Alles, was wir wissen wollen, steht nicht unter dem Buchstaben, den wir vermuten, sondern unter M wie Movieclip: »M wie ‘hitTest’.«
Dem hitTest wird noch ein auf »true« geschaltetes Shape-Flag mitgegeben, damit ein Kreis auch wirklich nur dann verschoben werden kann, wenn der Kreis angeklickt ist, und nicht bereits die Bounding-Box um den Kreis herum.
Matthias erklärte uns noch, weswegen wir bei startDrag ein »this« davor brauchen und bei stopDrag nicht.
Nach der Pause gab es massig Buchempfehlungen für unterschiedliche Einsatzbereiche: Von der Datenbank-Anbindung bis zum Game-Design, Referenzen und Tutorials. Ich überlege ja, ob ich mir u.a. das »Actionscript Cookbook« von ORA zulegen soll (das Opossum-Buch).
Die nächste Übung: Ein Mausverfolger. Das ist so einfach, ich kann’s nicht glauben! :-)
Soweit Actionscript für heute. In der restlichen Zeit befassten wir uns mit der Frage, welche Bild- und Ton-Formate idealerweise wie in Flash eingebunden werden (kurze Version: so hochwertig wie möglich, also TIFF und PNG für Bilder, WAV/AIFF für Sounds; Flash kümmert sich selbst um Kompression). In diesem Zusammenhang: Der Zauberstab ist in Flash eine nette Sache. Damit kann man sehr schnell solche Dinge machen:
Zu sehen auf der Seite des Täuschungskünstlers Werner Fleischer, www.wernerfleischer.de (eine Site von Matthias’ Gameworkern).
Zum Abschluss des heutigen Tages gab es noch einige Infos zu den Publish-Settings und zum Streaming von Flash (für die Ausgabe als Video, oder wenn etwas ohne Preloader gestreamt werden soll, muss man auf der Hauptzeitleiste animieren).
Eine Hausaufgabe bis nächste Woche gab’s auch noch: Multi-dimensionales Tweening, noch kein Actionscript.
»Und wenn Ihr wollt, dass Euer Code so cool eingerückt ist wie meiner, dann drückt auf ‘Auto-Format’.«
Erschienen am Dienstag, 30.03.2004 @ 18:11
| Kommentare deaktiviert
Tags: flash, SAE
Sonntag, 11.04.2004
Mit etwas Verspätung hier der Bericht zum SAE-Unterricht vom letzten Montag, 5. April. Die zweite von fünf Wochen Flash-Unterricht.
Das Thema hieß: »Movieclips im Speicher duplizieren« und es ging um das Erzeugen und Löschen von MovieClip-Instanzen. Um es etwas zu veranschaulichen:
Die Maus in der Fläche bewegen und dabei klicken.
Die neuen Kreise sind Instanzen eines Template-MovieClips. Nach dem Ausblenden eines gezeichneten Kreises wird die MovieClip-Instanz wieder aus dem Speicher gelöscht, damit nicht tausend unsichtbare Kreise im Speicher hängen und die Performance leidet.
Bei diesem Beispiel gibt es ein Problem: Alle Kreise heißen »Paul«. Es gibt keine Möglichkeit, um von 40 Kreisen den 36. anzusprechen. Dieses Problems nahmen wir uns in der nächsten Übung an.
Der Knopf > fügt ein Element zur Kette hinzu, der Knopf < löscht eines. Der Knopf unten setzt die ganze Kette zurück.
Das ist natürlich nur eine Spielerei und bestenfalls ein abstraktes Beispiel. Auch haben alle duplizierten MovieClips der Kette den gleichen Namen (»eck«), zusätzlich bekommen sie aber noch eine individuelle Zahl mit. Dadurch ist es leicht, das letzte Element der Kette zu löschen, da man es gezielt ansprechen kann. Verwirklicht wird die Sache mit dynamischen Pfaden, und sowas braucht man bei allen dynamischen Dingen: Anzahl Einträge in einem Gästebuch, Anzahl von Bildern…
Zum Abschluss noch der Hinweis von Matthias, wie wir die bereits aus Director bekannten Framelabels einsetzen. Es ist schlauer, in der Timeline zu einem Punkt »produkte« zu springen, statt zu einem bestimmten Frame (»Frame 42«). Besser deswegen, falls nachher Frames in der Zeitleiste verschoben, oder andere eingefügt oder gelöscht werden.
Erschienen am Sonntag, 11.04.2004 @ 12:20
| Kommentare deaktiviert
Tags: flash, SAE
Matthias begrüßte uns am Dienstag mit den Worten:
»Heute ist die wichtigste Stunde Eures Lebens.«
Wir bauen ein kleines Projekt und sehen uns dabei an, wie man Ordnung in sein File bekommt. Ausgangspunkt: Der Kunde hat eben angerufen, wie fang ich jetzt an.
Wir bauten eine kleine Mini-Site mit drei Bereichen, und Matthias gab uns massig Tipps zum Workflow: Einfaches, schnelles und performance-schonendes Arbeiten. Dazu: Arbeiten mit dem Bandwidth-Profiler, und wie man für das Streaming des Films sorgt. Denn eigentlich will man ja einen Preloader vermeiden, und deswegen darf man nie ein Intro in einen MovieClip packen (ein MC streamt nicht). Außerdem sollen wir den Einsatz von Szenen vermeiden, da sie buggy und kompliziert im Preloaden und der Adressierung sind; allenfalls dürfen wir ein Intro in eine Szene packen.
Danach bauten wir noch einen Preloader, falls es doch mal mehr zu laden gibt. Ziemlich einfache Sache, hätte ich nicht gedacht.
Ganz zum Schluss zeigte uns Matthias, wie externe Filme eingeladen werden, und welche Probleme es dabei in Zusammenhang mit der Hauptzeitleiste _root gibt (in externen Files daher mit relativer Adressierung _this und _parent arbeiten).
»Deswegen habe ich Euch nie dieses Menü gezeigt.«
Erschienen am Sonntag, 11.04.2004 @ 12:52
| Kommentare deaktiviert
Tags: flash, SAE
Mittwoch, 14.04.2004
Am Montag war Ostermontag, und deswegen tritt in der SAE die Feiertagsregelung in Kraft: Die SAE bleibt geschlossen, der Montagsunterricht wird am Dienstag nachgeholt (es geht nichts verloren!). Das bedeutet: Gestern Unterricht nicht nur von 10 bis 13 Uhr, sondern von 10 bis 16 Uhr – die dritte von fünf Wochen Flash-Unterricht bei Matthias.
Themen dieses Mal: Infos über Textfelder, Variablen, ein Quiz, Textscrolling, Videosteuerung, Kleinzeug. Ein Haufen Holz.
Flash kennt unterschiedliche Arten von Text: Statische Textfelder, Input-Text und dynamischer Text. Da gibt es nicht nur zu wissen, wann welche Sorte eingesetzt wird, sondern auch, wie Flash Buchstaben speichert und darstellt: Soll die Schrift eines Eingabefeldes anti-alised angezeigt werden, muss man in den Properties angeben, welche Glyphen in den Film eingebettet werden sollen. Das sollte mit Bedacht geschehen, da zum Beispiel alle Zeichen der Arial 20 K in einem SWF-File verbrauchen. Und man wird eher selten das komplette lateinische Alphabet, das griechische, kyrillische und ich-weiß-nicht-was Alphabet benötigen. Wenn man mal eben fünf Schriftarten anti-aliased verwendet und alle Zeichen einbettet, kann das leicht auf 100 K Speicherverbrauch zugehen.
Dynamischer Text ist eine coole Sache: Im Property-Inspector dem Textfeld einfach eine Variable zuweise, und schon gibt Flash in dem Textfeld den Inhalt der Variable aus.
Ein dynamisches Textfeld in Flash, darunter die Palette »Property-Inspector«. Das Textfeld gibt den Inhalt der Variable »output« aus, die ich im Feld »Var« angegeben habe.
Klickt man im Property-Inspector auf den Button »Character«, kann man festlegen, welche Glyphen Flash speichern soll. Im folgenden Bild werden 8 Zeichen für die kantengeglättete Anzeige des Wortes »Platzhalter« gespeichert.
Bei dynamischen Textfeldern oder Input-Text gibt man sinnvollerweise einen Bereich an, zum Beispiel alle Ziffern für ein Postleitzahlen-Feld.
Der Character-Dialog von Flash MX2004.
Zur Veranschaulichung bauten wir schnell einen kleinen Taschenrechner zusammen.
In der nächsten, größeren Übung erstellten wir ein Quiz: Zum Einsatz kamen dynamische Textfelder für die Frage und vier Antwortmöglichkeiten (die gleichzeitig Buttons sind). Fragen, Antworten und die jeweils richtige Lösung für einige beispielhafte Fragen werden in Arrays gespeichert.
Das Quiz beschäftigte uns länger: Es ist komplizierter, als es sich anhört.
Nächste Übung: Mittels Schaltflächen soll ein Text nach oben und unten verschoben werden.
Anschließend kamen wir zu meinem Lieblingsthema: Video! Matthias wies uns auf einige wichtige Dinge beim Import hin, ehe es an die Steuerung via ActionScript ging. Die Syntax ist im Vergleich zu Director etwas anders. Bei den Buttons zum Spulen muss auf den MovieClip, der gesteuert werden soll, ein zusätzliches onClipEvent(enterFrame).
Etwas wie movierate gibt es leider nicht, dafür lässt sich leicht die Gesamtspieldauer (_totalframes) und die aktuelle Position des Abspielkopfes abfragen (_currentframe). Ein bisschen rechnen, mit Math.round() runden und mit String() die Zahlen in eine Zeichenkette umwandeln, fertig ist die Laufzeitanzeige.
Am Schluss noch kleinere Infos: Footage ersetzen, Libraries aus anderen Flash-Dateien importieren, Ordnung in die Library bringen, Bitmaps in Vektoren umrechnen, Flash-Detection.
Linktipp: www.closedminds.com – nette Spielereien mit Typographie, und ein gutes Beispiel, was man mit After Effects in Flash machen kann.
Erschienen am Mittwoch, 14.04.2004 @ 14:55
| Kommentare deaktiviert
Tags: flash, SAE
Freitag, 16.04.2004
Von Flash bin ich ziemlich begeistert: Endlich wieder was zu programmieren! Man glaubt es ja kaum, aber ich mag es, Probleme in Teilaufgaben zu zerlegen und sie Schritt für Schritt anzugehen. Das beste ist aber das Gefühl das man hat, wenn sich die Dinge zusammenfügen und alles so läuft, wie man es sich vorstellt.
Der Weg dahin ist leichter, wenn man bestimmte Dinge nachschlagen kann. Gestern war ich wegen verschiedener Dinge in der Stadt und habe einen Abstecher zu
Lehmanns gemacht. An sich hatte ich ja das Buch am Vorabend bei Amazon bestellt, aber ich dachte mir: Kann ich ja mal probieren. Und tatsächlich: Sie hatten es da, und mit dem 10%-igen Rabatt auf englisch-sprachige O’Reilly-Bücher war es sogar ein paar Euro günstiger als bei Amazon: »
ActionScript Cookbook«
Gekauft und zurück daheim die Amazon-Bestellung storniert. Der Preis bei Lehmanns für das »Opossum-Buch«: 43 Euro.
Nächste Woche hole ich mir noch für rund 50 Euro das »Salamander-Buch«: »ActionScript for Flash MX: The Definitive Guide, 2nd Edition« von Colin Moock. Mein Konto ächzt, aber das muss sein.
Von beiden Büchern gibt es auf der ORA-Website wie immer Inhaltsverzeichnis, Index, sowie Beispielkapitel. Den »Definitive Guide« habe ich noch nicht gleich gekauft, weil ich mir noch nicht sicher war, ob nicht evtl das bei Flash mitgelieferte ActionScript-Dictonary ausreichend ist. Nachdem ich mir das Beispielkapitel zu MovieClips angesehen und Leute gefragt habe denke ich, dass das Moock-Buch ausführlicher ist.
Hmm, evtl noch das im Vergleich zu Amazon gesparte Geld in die Pocket-Referenz stecken, um schnell mal was nachschlagen zu können?
Dann ist aber wieder gut mit Fachbüchern: Zu After Effects will ich noch die zweibändige Bibel »Creating Motion Graphics« (1, 2; für Oktober sind Nachfolger angekündigt) durchlesen und durcharbeiten (ebenfalls 100 Euro, die jetzt in Form von toten Bäumen im Regal liegen). Im Cookbook und im Definitve Guide zu ActionScript sind Beispiele drin, die bearbeitet werden wollen. Für die Facharbeit muss ich noch vier CSS-Bücher durchlesen und durcharbeiten: DWWS, »Designing CSS Web Pages«, »Eric Meyer on CSS« und den kürzlich angekündigten Nachfolger »More Eric Meyer on CSS« (Erics Neuauflage des Definitive Guide zu CSSist zwar auch Primärliteratur, aber für die Facharbeit nicht so wichtig).
Wenn das alles durch ist, stehen schon wieder Flash-Bücher auf meiner Wunschliste: »Flash MX Game Design Demystified« (bzw. Nachfolger), »Object-Oriented Programming with ActionScript« und »Flash Games Studio«.
Die Bücher zu ActionScript 2.0 müssen denke ich noch nicht sein. Bis sich der aktuelle Flash-Player 7 durchgesetzt hat, der AS2.0 versteht, ist es wohl noch etwas hin.
Übrigens: Vom Definitive Guide zu AS gibt es auch eine zweibändige deutsche Übersetzung, aber ich werde das englische Original nehmen. Bei einer Übersetzung können sich wieder Fehler einschleichen, außerdem arbeite ich in der SAE und zu Hause mit den englischen Programmversionen.
Erschienen am Freitag, 16.04.2004 @ 10:49
| Kommentare deaktiviert
Tags: flash, SAE
Sonntag, 18.04.2004
Am Dienstag gab es ja im Flash-Unterricht an der SAE das Thema Videosteuerung. Wir bekamen eine kleine Hausaufgabe auf: Einen solchen Videoplayer nochmal selbst bauen. Ich wollte es etwas genauer wissen und habe mir etwas mehr Arbeit gemacht:
- Im Sinne einer guten/durchdachten Steuerung werden nur notwendige Buttons angezeigt. Der Pause-Button wird nur dargestellt, wenn das Video aktuell läuft und man es anhalten kann. Wenn das Video steht, ist an der gleichen Stelle statt eines Pause-Buttons ein Play-Button.
- Unter dem Video gibt es zwei anzeigen zur verstrichenen Zeit und zur verbleibenden Zeit.
- Die Buttons sind selbst zusammengebaut und keine fertigen Komponenten.
- Wegen der Größe gibt es zuvor einen Preloader.
Das Ergebnis (Achtung, 2 MB!):
Nach dem Vorladen muss das Video durch Klick auf den Play-Button gestartet werden, es läuft nicht von allein los (Absicht). Voraussetzung: Flash-Player 6. Größe: 2 MB.
Ja, besonders schön ist es nicht. Die Buttons stammen aus meinem ersten SAE-Projekt, »Project Mayhem« (die Enhanced-CD zum Film »Fight Club«), da haben sie ganz gut gepasst. Ich weiß, das Video wird etwas pixelig angezeigt. Das liegt daran, dass ich es mit einer niedrigen Auflösung importiert habe (240×192), und in Flash anschließend auf 150% hochskaliert habe. Spart Speicherplatz. Hätte ich es von vornherein in der besseren Größe importiert und die Skalierung bei 100% belassen, wäre das File noch ein MB größer.
Es war teilweise ein ziemliches Gefrickel, aber Übung macht den Meister! Dank an Holger für hilfreiche Tipps.
Was ich an Flash allerdings nicht mag, ist das Drunter und Drüber: Director ist da primitiver, aber auch übersichtlicher: Es gibt nur eine Zeitleiste mit vielen Frames auf der X-Achse und Sprite-Kanälen auf der Y-Achse.
In Flash gibt es drei verschiedene Symbole: MovieClip (MC), Button und Graphic. Das Grafik-Symbol braucht man so gut wie gar nicht. Wie in Director gibt es auch in Flash eine Bühne, auf der die Elemente angeordnet sind, außerdem hat die Bühne natürlich eine Zeitleiste (_root). Eine Animation sollte aus verschiedenen Gründen in einen MC gepackt werden. Dieser MC hat ebenfalls eine Zeitleiste. Mein Play-/Pause-Button steckt in so einem MC. In Frame 1 ist der Play-Button, in Frame 2 der Pause-Button. Die beiden Button-Symbole haben schon wieder eine eigene Zeitleiste, wenn auch eine verkürzte (für die Stati Up, Over, Down und Hit). Das Video, das ich eigentlich steuern möchte, befindet sich ebenfalls in einem MC, wieder mit eigener Zeitleiste.
Man muss nicht nur wissen, wo was ist: Richtig lustig wird’s, wenn es an die Steuerung/Programmierung per ActionScript geht: Die verschiedenen MovieClips müssen mit _root, _this und _parent adressiert werden, dazwischen kommen noch die Instanznamen der MovieClips. Einmal vergessen, einem MC einen Instanznamen zu geben oder ein Fehler in der Adressierung, und nichts läuft mehr. :-(
Beispiel: Ich klicke auf den Start-Button (der ganz links, der das Video an den Anfang »spult« und anhält), der diese Action hat:
on(press) {
_root.play_pause_button_mc.gotoAndStop(1);
video.gotoAndStop(1);
}
Bedeutet: Wenn er gedrückt wird (Event on(press)), wird die Zeitleiste des MovieClips mit dem Video angehalten und der Abspielkopf springt zurück in den ersten Frame (video.gotoAndStop(1);, der Instanzname des MC ist »video«). Gleichzeitig muss die Grafik des Pause-Buttons durch ein Bild des Play-Buttons ausgetauscht werden, da man das Video ja jetzt wieder starten kann. Dafür sorgt die Zeile, die mit »_root« beginnt: _root ist die Hauptzeitleiste der Bühne, play_pause_button_mc ist der Instanzname des MovieClips mit den Play-/Pause-Buttons und gotoAndPlay ist der Befehl zum Springen und Abspielen in der Zeitleiste des MC.
Und hey, das ist noch ein einfaches Beispiel.
Ah ja, was ich ebenfalls in Flash vermisse ist die Möglichkeit, Member auszutauschen. Andererseits sind in Flash auch viele Dinge einfacher als in Director.
Insgesamt macht’s schon Spaß!
Erschienen am Sonntag, 18.04.2004 @ 21:38
| Kommentare deaktiviert
Tags: flash, SAE
Montag, 19.04.2004
Wir sind auf der Zielgeraden im Flash-Unterricht in der SAE: Die vierte von fünf Wochen mit diesem Thema. Unterrichtsinhalte waren heute kleinere Dinge: Import von externen AS-Dateien, in welchem Fall publiziere ich für welche Flash-Version, was bedeuten die Einstellungen im Publizieren-Dialog und bei der Einbindung in die HTML-Datei, welche Stolperfallen gibt es bei der Einbindung in HTML.
Ein größerer Block war die »Kommunikation mit der Welt da draußen« via getURL. Die einfachste Anwendung dafür ist, aus Flash heraus ein neues Browserfenster zu öffnen. Etwas fortgeschrittener wäre ein Javascript-Funktionsaufruf. Man kann sogar aus Flash Director steuern und Lingo-Befehle übergeben:
on (release) {
getURL("Lingo: put the Frame");
}
Nächster Punkt: »Fake-Physik«. Mit ein paar Tricks kann man natürlich wirkende Bewegungen erzeugen, ohne komplizierte Berechnungen anstellen zu müssen. Beispiel: Ein Ball, der von oben auf den Bühnenboden fällt, wieder hochspringt und nach einiger Zeit zum Liegen kommt.
Zum Schluss sahen wir uns noch ein wenig im Gebiet »Sound« in Flash um. Die wichtigsten AS-Befehle für den Sound sind attachSound() zum »Anhängen eines Sounds aus der Library an ein Objekt auf der Bühne, setPan() für das Panorama, setVolume() für die Lautstärke und start() bzw. stop() zum Starten oder Stoppen.
Um Sounds verwenden zu können, müssen sie mit einem Identifier angesprochen werden, der zuvor im Kontextmenü des Libraryeintrags festgelegt wurde (»Linkage, Export for ActionScript«).
Da Flash pro Timeline nur einen Sound verwalten kann, sollte jeder Sound auf einem eigenen MovieClip erzeugt werden (MovieClips haben ja ihre eigene Timeline). Hält man sich nicht daran, legt z.B. drei Sounds in die Hauptzeitleiste _root und möchte dann einen bestimmten Sound stoppen, dann werden die beiden anderen Sounds ebenfalls angehalten.
Flash kann bis zu acht Soundkanäle verwalten. Alles darüber wird zusammengemixt und in Kanal 8 gelegt.
Matthias zeigte uns zur Veranschaulichung die »soundengines« von Holger (1, 2, 3).
Feine Sache!
Erschienen am Montag, 19.04.2004 @ 20:17
| Kommentare deaktiviert
Tags: flash, SAE
Dienstag, 20.04.2004
Der zweite Tag Flash-Unterricht in dieser Woche. Heute waren wir komplett mit einer Aufgabe beschäftigt: Wir bauen uns ein Menü. Nicht irgendein Menü, sondern ein Yugop-Menü, und nicht irgendwie schnell hingeschludert, sondern komplett dynamisch.
Yugo Nakamura, die Älteren werden sich erinnern, bastelte 1998 mit »mono*crafts« ein Menü, das für damalige Verhältnisse bahnbrechend war: den Yugop-Slider. Sowas gab’s vorher nicht, und es wurde in Flash 4 realisiert, das bezüglich ActionScript noch völlig in den Kinderschuhen steckte.
Heute zieht so ein Menü niemanden mehr vom Stuhl: Hunderte Tutorials haben sich mit dem Aufbau befasst und Pro7 hat den Stil für sein On-Air-Design geklaut. Dennoch: Es sieht immer noch schick aus, ist auf seine Weise durchaus funktional und es ist nicht ganz trivial zusammenzubauen.
Mangels Zeit beschränken wir uns allerdings darauf, das Menü nach links und rechts sliden zu lassen, wenn man seine Maus nach rechts bzw. links bewegt. Das Ein- und Auszoomen, wenn man mit der Maus nach oben oder unten fährt, lassen wir weg.
Der Clou ist, dass wir das Menü dynamisch aufbauen. Bedeutet: Die Reihenfolge und Beschriftung der Buttons ist nicht fix. Eine kleine Änderung im Script genügt. Und da wir nicht jeden Button einzeln zeichnen, sondern ein MovieClip duplizieren, sind Änderungen am Aussehen der Schaltflächen ebenfalls simpel: Einmal die Vorlage ändern, schon zieht sich die Anpassung bei allen Instanzen durch.
Oder wie Matthias sagt:
»Auch wenn Ihr eine Viertelstunde Rollover-Animation drauf habt, könnt Ihr jeden Morgen zum Frühstück Eure Buttons ändern.«
Der Vorteil liegt auf der Hand: Kunde ruft an und wünscht eine Änderung, am besten bis gestern. Eine Sache von zwei Minuten. Für so eine Aufgabe kommen wieder Arrays, Funktionen und dynamische Pfade zum Einsatz, außerdem natürlich for-Schleifen, eine for-in-Schleife und eine if-Abfrage.
Die entscheidende Zeile, um das Menü jeden Morgen ändern zu können, ist diese hier:
button_array = new Array("Anfang", "Produkte", "Referenzen",
"Profil", "Impressum", "Gewinnspiel", "Downloads", "Trailer", "Ende");
[»Anfang« und »Ende« sind natürlich keine sinnvollen Namen für eine Navigation, sie dienen nur zur Veranschaulichung, wo das Menü aufhört.]
Um eine lange Geschichte kurz zu machen: Das ist das Ergebnis des heutigen Unterrichts:
Gut, ist nicht perfekt, aber ein guter Anfang, oder?
Ob man einen Yugop-Slider baut oder ein senkrechtes Menü, bei dem sich nichts bewegt, ist egal: Die Technik ist die selbe.
Zum Schluss bekamen wir noch die nächste Pflichtübung, ein kleines Spiel in Flash (»Bier-germeister«). Paar if-Abfragen, Kollisionsabfrage, Drag’n'Drop. Übrigens die neunte von elf Übungen. Die geplante Netzwerk-Übung fällt aus. Abgesehen von der jetzigen Flash-Übung stehen noch an: »Advanced Authoring« (Lingo-3D und Imaging-Lingo) und »PHP«. Bisher habe ich alle Übungen bestanden, außer die Cinema-Übung, die ich nicht gemacht habe. Maximal darf man drei Übungen verpassen bzw. nicht bestehen.
Wer mag, kann zusätzlich eine freiwillige Übung machen, die durchaus knackig ist:
Klicksdu auf den Böppel. Infos gibt’s dann auf dem Fragezeichen. Ansonsten viel Spaß beim Erkunden!
Ansonsten: Es gab Noten! Dritte Prüfung, Theorie: 82%. Der Praxistest mit After Effects: 92%. Außerdem die Note des zweiten Projekts: 89%. Ich fand’s ja nicht so prickelnd und vorzeigbar, aber technisch hat’s wohl einigermaßen gepasst.
Erschienen am Dienstag, 20.04.2004 @ 19:46
| Kommentare deaktiviert
Tags: flash, SAE
Donnerstag, 22.04.2004
Sorry, dass es hier in letzter Zeit etwas flashlastig zugeht. Flash ist seit vier Wochen und noch in der nächsten Woche
Unterrichtsthema in der
SAE.
Um einen Flash-Film in ein HTML-Dokument einzubetten, verwendet man für gewöhnlich den folgenden Code, der so von Macromedia Flash erzeugt wird:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="500" height="200" id="yugop_slider" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="dateiname.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="dateiname.swf" quality="high" bgcolor="#ffffff"
width="500" height="200" name="dateiname" align="middle"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
Was der ganze Summs bewirkt, kann man hier und dort nachlesen.
Ein Haufen Zeug. Es gibt ein weiteres Problem für Standards-Puristen wie mich: Der Code ist nicht standard-konform. Was kann man unternehmen, um Flash-Filme einerseits kompakt und andererseits gemäß den Webstandards einzubinden?
Es gibt einen Ansatz von Drew McLellan, die er im November 2002 im Artikel »Flash Satay« auf A List Apart vorgestellt hat. [In dem Artikel steht auch, weswegen der obige Code-Block nicht standard-konform ist.]
Die dort beschriebene Methode hat einen entscheidenden Nachteil, wie in der Diskussion zum Artikel zu lesen ist: IE/Win streamt so eingebundene Flash-Filme nicht mehr.
Streaming bedeutet, dass der Film sofort zu spielen anfängt, während der Rest noch aus dem Web nachgeladen wird. Wenn man sich einigermaßen geschickt anstellt, kann man so in vielen Fällen die lästigen Preloader vermeiden. Mit der McLellan-Methode funktioniert das nicht: Der Film beginnt erst zu spielen, wenn er komplett geladen ist.
Doch verzagt nicht, meine Freunde! Es gibt eine Alternative: die Javascript-Methode.
Sie kam auf, als es um den Rechtsstreit zwischen Microsoft und Eolas ging. Eolas verklagte Microsoft wegen eines Patents zur Einbindung von Plug-ins in Webseiten. Ein Workaround bestand darin, nicht die <object>- und <embed>-Tags zu verwenden, sondern eine Javascript-Funktion aufzurufen, die die HTML-Tags quasi nachträglich in die HTML-Datei schreibt, bevor sie vom Browser angezeigt wird.
Die Ansprüche von Eolas sind vorerst abgewehrt, doch die Methode lässt sich nach wie vor verwenden.
Macromedia hatte eine recht ausführliche Sektion zu diesem Thema auf ihrer Website, aber die Helden haben den Bereich stillgelegt, ohne das weitere Potential der Technik zu erkennen. Bei Apple und Real – deren Plugins Quicktime-Player und Real-Player vom Eolas-Patent ebenso betroffen waren – gibt es allerdings noch ausführliche Texte, die sich beinahe auf’s Wort gleichen.
Die Anleitungen dort und die zur Verfügung gestellten Javascript-Dateien sind ziemlich kompliziert. Mein Freund Holger hat sie vereinfacht und verwendet diese Methode, um Flash standard-konform in HTML-Dateien einzubinden.
Er bindet Flash auf diese Weise in der HTML-Datei ein:
<script language="JavaScript" type="text/javascript">insertflash ();</script>
<noscript>Diese Version der Website benötigt Javascsript und Macromedia Flash.
Eine Version in HTML finden Sie auf der <a href="http://www.hs-2.de">Startseite</a>.</noscript>
Damit Holger den Funktionsaufruf insertflash(); verwenden kann, muss er natürlich irgendwo hernehmen. Dazu baut er innerhalb des <head>-Bereichs folgendes ein:
<script type="text/javascript" language="JavaScript" src="scripts.js"></script>
Das bewirkt, dass eine externe Javascript-Datei zugeladen wird. Das Auslagern in eine externe Datei bietet sich an, da der User dann den selben Code nicht ständig mitladen muss, wenn er weitere Seiten der Domain besucht und der Code jedes Mal im <head> steht. Außerdem wird eine externe Datei gecacht.
In der Datei steht unser bekannter Code von vorhin. Natürlich umgarnt von Javascript-Befehlen, die die bekannten HTML-Tags auf die Seite schreiben:
function insertflash () {
document.write ('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"
width="100%" height="100%" id="hs-2" align="">');
document.write ('<param name="movie" value="hs-2.swf" />');
document.write ('<param name="quality" value="high" />');
document.write ('<param name="scale" value="noscale" />');
document.write ('<param name="bgcolor" value="#FFFFFF" />');
document.write ('<embed src="hs-2.swf" quality="high"
scale="noscale" bgcolor="#FFFFFF" width="100%" height="100%"
name="hs-2" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write ('</object>');
}
Ich konnte Holgers Ansatz noch nicht 1:1 übernehmen, da ich nicht nur einen Flash-Film einbetten wollte wie er auf seiner »dienstlichen Website« HS-2 – ich will öfter Flash einbinden, da ich im Rahmen von my two cents ja über den Flash-Unterricht in der SAE berichte.
Bei mir würden sich also die Dateinamen laufend ändern, weil meine diversen Flash-Filme ja nicht alle hs-2.swf heißen. Eine Möglichkeit wäre, bei jedem einzubindenden Flash-Film eine andere Funktion aufzurufen: insertflash1();, insertflash2(); und so weiter. Aber das wäre einigermaßen dämlich, wenn man schon eine Funktion vor der Nase hat. Eine Funktion baut man immer dann, um gleichartige Probleme auf die selbe Weise zu lösen, ohne jedes Mal das Rad neu zu erfinden.
Um dieses Dilemma zu umgehen, gibt es in der Programmierung eine geile Sache, die nennt sich »Funktionsaufruf mit Parameterübergabe«. Beim Aufrufen der Funktion insertflash(); in der HTML-Datei übergebe ich dieser Funktion in den runden Klammern die Parameter, die sich in verschiedenen Szenarien ändern können.
Für mich hat es sich als praktisch erwiesen, die folgenden Parameter zu übergeben:
- Den Dateinamen (src)
- Die Breite des Flash-Films (width)
- Die Höhe des Flash-Films (height)
- Die Mindestvoraussetzung bzgl des Flash-Players (version)
- Die Hintergrundfarbe (bgcolor), da ein Flash-Film quasi durchsichtig ist
Man könnte noch weitere Parameter übergeben wie z.B. die Tag-Attribute id und name (wenn man das Movie per Javascript ansprechen möchte), aber das brauche ich im Moment nicht.
Ich übergebe auch nur den Dateinamen, nicht den kompletten Pfad, da sich bei mir alle Flash-Filme im gleichen Verzeichnis befinden (daher habe ich den Pfad »fest verdrahtet« in die Javascript-Datei geschrieben).
Die Einbindung im <head>-Bereich passiert wie gehabt:
<script type="text/javascript" language="JavaScript" src="insertflash.js"></script>
An den Stellen in den HTML-Dateien, wo ich Flash-Filme anzeigen lassen möchte, setzte ich einen Funktionsaufruf wie folgt:
<div align="center">
<script language="JavaScript"
type="text/javascript">insertflash('yugop_slider.swf','500','200','6','ffffff');</script>
</div>
[Ich verzichte auf einen <noscript>-Bereich, da sich der Inhalt des Flash-Films aus dem Kontext des umgebenden Weblog-Eintrags ergibt.]
Auf diese Weise habe ich zum Beispiel den Film yugop_slider.swf in meinem Eintrag »Yugop« eingebunden. Das <div>-Tag sorgt für eine horizontale Zentrierung innerhalb des übergeordneten Elements (bei mir ein anderes <div>), dann kommt der Funktionsaufruf. Es werden die Parameter src (’yugop_slider.swf’), width (’500′), height (’200′), version (’6′) und bgcolor (’ffffff’) übergeben.
Die hinzugeladene Javascript-Datei übernimmt diese Parameter in der Funktion insertflash();. Der Javascript-Code sieht jetzt ein bisschen anders aus, da ja einige Dinge nicht mehr fix sind:
function insertflash(src,width,height,version,bgcolor) {
document.write ('<object style="border:1px solid black"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version='
+ version + ',0,0,0" width="' + width + '"
height="' + height + '" id="" align="">');
document.write ('<param name="movie" value="http://www.my-two-cents.de/swf/' + src + '" />');
document.write ('<param name="quality" value="high" />');
document.write ('<param name="scale" value="noscale" />');
document.write ('<param name="bgcolor" value="#' + bgcolor + '" />');
document.write ('<embed src="http://www.my-two-cents.de/swf/'
+ src + '" quality="high" scale="noscale" bgcolor="#'
+ bgcolor + '" width="' + width + '" height="'
+ height + '" name="" align="" type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />');
document.write ('</object>');
}
Die Werte, die aus der Parameterübergabe ankommen, werden per String-Verknüpfung in die Javascript-Befehle eingeflochten (das bewirken die ganzen Hochkommata ‘ und die Plus-Zeichen).
+++
Jehova!
Fazit: Die ganze Aktion bringt drei Vorteile. Erstens spart man sich und den Usern eine Menge an Code, die Sache ist sehr kompakt. Zweitens funktioniert diese »Macromedia-Methode« auf allen wichtigen Browsern, und auch IE/Win streamt die Flash-Filme. Drittens kommen die Seiten dennoch durch den Validator, da dieser den »unsauberen« gar nicht zu Gesicht bekommt.
Daneben gibt es leider auch zwei Nachteile. Den ersten kann man mit diesem uns allen bekannten Spruch beschreiben:
»Ihr macht die Hausaufgaben nicht für die Schule, sondern für Euch.«
Soll heißen: Es ist zwar schön, dass unsere Seiten jetzt trotz Flash wieder validieren, aber das liegt nur daran, dass wir den bösen Code vor dem Validator verstecken. Nach wie vor verfüttert man damit den nicht-validen Code an die Browser (deswegen sollte der Validator verwendet werden: um Fehler im Code aufzuspüren, bevor man diesen an die Browser gibt). Es ist eine Art Hack, aber ich finde ihn legitim. Eine endgültige Lösung kann es nur geben, wenn Macromedia bzw. Microsoft dafür sorgen, dass IE/Win mit einer standard-konformen Flash-Einbindung klar kommen.
Holger sagt:
»Für die Verfechter der Reinen Lehre ™ ist es nicht ganz koscher, weil ich ja über Javascript wieder ein Embed-Tag einbinde. Der Code, den der Browser am Ende bekommt, ist also nicht reines XHTML.«
Der zweite Nachteil ist, dass die Lösung auf Javascript beruht. Wessen Browser kein Javascript interpretieren kann, oder wer Javascript z.B. aus Sicherheitsgründen deaktiviert hat – wobei JS nicht an sich unsicher ist, sondern »nur« mangelhafte Implementierungen, allen voran im IE –, der bekommt den Flash-Film nicht zu sehen.
Ich behaupte jedoch mal kühn, dass, wer Javascript nicht interpretieren kann oder will, auch kein Flash-Plugin installiert hat bzw. auf Flash-Filme keinen Wert legt.
Über diese Nachteile muss man sich bewusst sein und sie abwägen, ehe man diese Methode einsetzt.
Hier der direkte Link zu meinem Javascript-File, das die Funktion mit Parameterübergabe enthält: www.my-two-cents.de/insertflash.js
Erschienen am Donnerstag, 22.04.2004 @ 21:08
| Kommentare deaktiviert
Tags: flash, SAE
Montag, 26.04.2004
Heute Morgen bin ich mal wieder mit dem Rad in die Stadt gefahren, ehe es mit dem Zug nach München zur SAE weiter ging. T-Shirt unter der Übergangsjacke; war mit 5 Grad zwar recht frisch, aber mit dünnen Lederhandschuhen und
Gore-Ärmlingen ging’s eigentlich.
Der erste von zwei Tagen in der fünften und letzten Woche des Flash-Unterrichts bei Matthias. Jetzt kommt nichts prüfungsrelevantes mehr, dafür lauter cooles Zeug!
Wir sahen uns ein paar Objekte an, zum Beispiel das Color-Objekt. Auf zwei Arten (setRGB und setTransform) kann man per ActionScript Dinge auf der Bühne einfärben. setTransform ist dabei besonders interessant, da es Duotone ermöglicht und die »Oberflächenstruktur« des einzufärbenden Symbols erhält. Matthias zeigte uns ein älteres Projekt, in dem es neun Quiz-Spiele gibt (ein Symbol in Flash ist ein MovieClip oder Button). Die unterschiedlichen Farben (und die Fragen und Antworten) kamen aus einem XML-File.
Bei der Gelegenheit kurz das random()-Objekt, danach das Mouse-Objekt. Mittels Mouse.hide kann der Cursor des Benutzers versteckt werden, um ihm einen eigenen Cursor zu geben, zum Beispiel ein Fadenkreuz in einem Egoshooter oder einen besonderen Pfeil- oder Handcursor.
Der Hammer schlechthin ist jedoch die Drawing-API, die es ab Flash MX gibt. Vereinfacht gesagt: Ich kann per AS Dinge auf die Bühne zeichnen. Die Bühne im Open-File ist komplett leer, es gibt nur ein Script, das hierfür sorgt:
Ist jetzt nur eine Spielerei zur Veranschaulichung, aber es gibt unendliche Möglichkeiten!
Wir sahen uns auch noch an, wie man aus dem Nichts einen MovieClip erzeugt (_root.createEmptyMovieClip), und wie innerhalb von z.B. Event-Handlern with eingesetzt wird, um sich ein bisschen Tipparbeit bzw. Copy/Paste zu sparen.
Hier ein paar abgefahrene Beispiele für den Einsatz der Drawing-API, von Matthias:
Richtig Hardcore wird’s bei den Sachen auf polyaktiv.de, der anscheinend »Flash MX Game Design Demystified« cover to cover durchgearbeitet hat und wohl sonst keine Freunde hat. :-)
Auf polyaktiv.de anschauen: 3D-Pinman, 3D-Flugzeug, 3D-Wände 2, 3D-Park, Iso-Infected. Ich sag’s nochmal: In den Open-Files ist die Bühne komplett leer! Alles nur AS-Code.
Weitere Beispiele für die Drawing-API gibt es auf Matthias’ und Andis Gameworker-Seite unter »Guiding, Tutorials, Drawing API«. Dort »magic cube« und »drawing board«.
Die Gameworker haben es mal auf die Spitze getrieben und festgestellt, dass die Drawing-API sehr viel performanter ist als die MovieClip-Technik (in etwa doppelt so schnell).
+++
Nächstes Thema nach der Drawing-API: Eine andere Möglichkeit, mit Event-Handlern zu arbeiten. Normalerweise schreibt man auf einen MovieClip eine Action wie folgt:
onClipEvent(enterFrame) {
[Actions]
}
Alternativ kann man sämtliche Actions in den Frame eines separaten Layers packen und folgendes schreiben:
my_movieclip.onEnterFrame = function() {
[Actions]
};
Vorteil: Der AS-Code ist nicht über tausend MovieClips, Buttons und Frames verstreut, sondern befindet sich an einem Ort. Diese Arbeitsweise eignet sich auch gut, um mit mehreren Leuten im Team am Code zu arbeiten.
Ein weiterer Pluspunkt: Dadurch, dass man Events von außen auf Symbole setzen kann, kann man sie erst dann drauf packen, wenn sie gebraucht werden. Das spart Performance und unzählige Flag-Variablen. Wenn man den Event-Handler nicht mehr braucht, schreibt man:
delete.my_movieclip.onEnterFrame;
+++
Letzter Akt: Prototyping. Es gibt ein Rudel Methoden und Properties für MovieClips, aber es gibt leider nicht alles, was das Herz begehrt. Kein Problem: Man kann sich einfach seine eigenen Methoden und Properties schreiben!
Etwas, was man zum Beispiel immer wieder braucht, ist diese Zeile hier:
if (this.hitTest(_root._xmouse,_root._ymouse,true))
Die Abfrage prüft, ob man sich mit der Maus über einem Symbol befindet. Man braucht es immer wieder, und es nervt! :-)
Abhilfe: Einmal eine eigene Property »mouseHit« in einem Actions-Layer basteln:
MovieClip.prototype.mouseHit = function() {
if (this.hitTest(_root._xmouse, _root._ymouse, true)) {
return true;
} else {
return false;
}
};
Zum Einsatz kommt die hausgemachte Property wie folgt:
if (mouseHit())
Schon ein bisschen kürzer!
Man kann Prototyping für alles mögliche einsetzen. Matthias und Andi haben sich zum Beispiel Code-Schnipsel zum Ein- und Ausfaden (»fadeTo«) und zum Wobbeln (»wobbl«) gebastelt. Um etwas wobbeln zu lassen, genügt fortan nur noch eine Zeile mit drei Parametern. Coole Sache!
Tutorials auf der Gameworker-Seite (»Guiding, Tutorials, Prototype«).
Erschienen am Montag, 26.04.2004 @ 19:38
| Kommentare deaktiviert
Tags: flash, SAE
Dienstag, 27.04.2004
Der letzte Tag Flash-Unterricht bei Matthias. In ein paar Wochen schaut er allerdings nochmal rein, wenn wir bei Andi mehr über PHP und Datenbanken gelernt haben, und es um Flash und Datenbanken geht.
Der PHP-Unterricht wurde sinnigerweiße vorgezogen, da es jetzt langsam auf das Abschlussprojekt zugeht, und wir darin PHP ganz sicher brauchen, Imaging-Lingo aber eher weniger. Ab nächster Woche haben wir also sieben Wochen lang PHP und SQL bei Andi, die letzten drei Wochen zeigt uns (wieder) Andi Imaging-Lingo, Lingo-3D, Shockwave und Director-Xtras im »Advanced Authoring«-Unterricht.
In Flash machten wir jedenfalls erstmal da weiter, wo wir gestern aufgehört hatten: Prototyping. Eine sehr gute Seite zu dem Thema ist übrigens www.proto.layer51.com. Wir machten noch weitere Beispiele: Eine _z-Property für das Abfragen und Setzen der Tiefenebene mit getDepth() und swapDepths() sowie eine Methode zum horizontalen Spiegeln.
Weiter ging’s mit einer sehr netten Möglichkeit, in Flash Daten zu speichern: Objekte. Normalerweise verwendet man dazu Arrays:
red = new Array (255,0,0);
green = new Array (0,255,10);
blue = new Array (0,0,255);
farben = new Array (red,green,blue);
Die ersten drei Arrays speichern für drei Farben die jeweiligen RGB-Anteile. Bei »green« haben wir ein nicht ganz reines Grün (Rot-Kanal auf 0, Grün-Kanal vollen 255, Blau-Anteile 10). Im farben-Array werden die vorangegangenen Arrays verwaltet. Will man jetzt z.B. auf den Blau-Wert von green zugreifen, schreibt man folgendes:
trace(farben[1][2]);
Das ist natürlich nicht besonders schön, denn wenn man eine Nacht drüber geschlafen hat, weiß man nicht mehr, an welcher Index-Position was in welchem Array steht. Lösung: Schreibst Du cool Objekt:
red = new Object();
red.r = 255;
red.g = 0;
red.b = 0;
//
green = new Object();
green.r = 0;
green.g = 255;
green.b = 10;
//
blue = new Object();
blue.r = 0;
blue.g = 0;
blue.b = 255;
//
farben = new Object();
farben.red = red;
farben.green = green;
farben.blue = blue;
Wenn man sich etwas Schreibarbeit sparen will, schreibt man den ersten Block als »assoziatives Array«:
red = {r:255,g:0,b:0};
Das bewirkt das selbe. Jetzt kommt der Clou: Will ich auf den Blau-Wert von »green« zugreifen, muss ich mir keine Array-Inhalte und Index-Positionen merken, sondern schreibe:
trace(farben.green.b);
Coole Sache!
Nach der Pause erklärte uns Matthias, was für die nächste Prüfung in der Woche des 24. Mai unbedingt sitzen muss: duplicate, dynamische Pfade, Drag’n'Drop, hitTest. Im Prinzip die »Bier-germeister«-Übung, die wir machen müssen.
Die Gameworker (Matthias und Andi) bauten im Februar die Website für den Film »Das geheime Fenster« mit Johnny Depp, der diese Woche hierzulande anläuft. Jemand aus dem Kurs wollte in der Pause von Matthias wissen, wie sie den Effekt mit den auseinanderspringenden Buchstaben gemacht haben, und wie das Puzzle funktioniert.
Ersteres war etwas komplizierter, ein einfaches Puzzle klickte uns Matthias schnell zusammen: Simple Sache, wenn man weiß, wie’s geht. Für ein Puzzle kann man übrigens eine selbst per Prototyping definierte _z-Property gut gebrauchen: Wenn der User ein Puzzleteil anklickt und über die Bühne schiebt, soll es ja ganz oben liegen und nicht unter den anderen Teilen verschoben werden. Daher muss man per ActionScript den Tiefenwert ändern, um es nach ganz oben zu stapeln.
Zum Ausklang erhielten wir von Jochen, dem Kursleiter, die Vorgaben für unser Abschlussprojekt: Satte drei Seiten, plus eine Seite mit Hinweisen zum Notensystem. Dazu mehr in einem eigenen Eintrag.
Erschienen am Dienstag, 27.04.2004 @ 20:52
| Kommentare deaktiviert
Tags: flash, SAE
Freitag, 12.11.2004
Es ist zwar nicht mehr ganz taufrisch, trotzdem hier nochmal die Infos und Links zur nächsten Version von Flash.
Die Videos
Ich hatte noch keine Gelegenheit, mir die beiden Keynote-Videos auf macromedia.com anzusehen, die jeweils immerhin knapp 2 Stunden dauern. Von daher keine Ahnung, was es taugt. Die beiden anderen Videos allerdings, bei Colin und Josh, die taugen. Falls es in der Flasher-Community noch jemanden gibt, der noch nicht die Videos zum neuen Player (Maelstrom) und zum neuen Authoring-Tool (8Ball) kennt: Anschauen! Bei Colin wird Maelstrom gezeigt, aufgenommen auf einer Konferenz in Tokio Ende Oktober. Bei Josh gibt’s 8Ball zu sehen (und ein paar nette Flex-Anwendungen), aufgenommen auf der MAX-Konferenz Anfang November.
Bislang war es immer so, dass es einige Zeit dauerte, ehe ein neuer Player eine genügend große Verbreitung gefunden hatte und die Entwickler die neuen Features nutzten. Ein halbes bis ein Jahr vielleicht.
Ich bin davon überzeugt, dass es bei Flash 8 anders sein wird: Die Entwickler werden dieses Mal nicht auf die langsame »Adaptionsrate« warten, sondern sofort die neuen Funktionen verwenden. Flash 8 wird aus dem Stand zum neuen de-facto Standard bei Flash-Playern werden, und um alles unterhalb dieser Baseline wird sich kein Mensch mehr kümmern. Die Anwender werden »gezwungenermaßen« den neuen Player installieren, wenn sie neue Flash-Inhalte sehen wollen.
[Ok, es wird etwas dauern, bis sich die Flasher mit den neuen Funktionen vertraut gemacht haben.]
Warum könnte es dieses Mal anders laufen? Um es klar zu sagen: Flash 8 rockt die Scheiße. Das wichtigste neue Feature ist Performance. Performance bis zum Abwinken. Die Videos dazu waren exrem beeindruckend: In Tokio wurde erst eine herkömmliche Animation mit ein paar hundert Movieclips auf der Bühne gezeigt, die mit 14 Frames vor sich hin plätscherte. Dann wurde »Bitmap Caching« aktiviert und die Abspielgeschwindigkeit stieg rasant: nicht um das Doppelte oder Dreifache, sie verzehnfachte sich!
Dazu kommen neue Möglichkeiten im Compositing:
- Photoshop-ähnliche Blend-Modes in Echtzeit (auch per Actionscript steuerbar!)
- Schlagschatten, Glows und dergleichen in Echtzeit
- Eine neue Text-Rendering-Engine
- Bessere Videokompression
- Unterstützung eines Alphakanals bei Video (in der Demo konnte Text hinter einem Video eingegeben und markiert werden)
Zum Abschluss: Die Texte (chronologisch aufsteigend)
Erschienen am Freitag, 12.11.2004 @ 12:27
| Kommentare deaktiviert
Tags: flash, SAE
Montag, 28.02.2005
Wenn in Flash Texte aus einer externen Datei zur Laufzeit per LoadVars() nachgeladen werden sollen, dürfen Zeichen wie Plus
+, Istgleich
= oder Ampersand
& nicht einfach so in den Text geschrieben werden. Stattdessen müssen die
Hex-Codes der ASCII-Zeichen verwendet werden:
- %26 für &
- %2B für +
- %3D für =
Seit Flash MX (=Flash 6) sind Sonderzeichen wie Umlaute oder é in externen Textdateien kein Problem mehr: Einfach die Datei als Unicode speichern (UTF-8 ohne BOM). Den Character-Options eines Textfeldes müssen diese Sonderzeichen aber dennoch mitgegeben werden.
Erschienen am Montag, 28.02.2005 @ 10:07
| Kommentare deaktiviert
Tags: flash, SAE
Samstag, 16.07.2005
Das Release von Flash 8 rückt näher: Vom neuen Flash-Player (Arbeitstitel »Maelstrom«) gibt es seit ein paar Tagen eine
öffentliche Beta. Madokan hat im Flashforum einen Link zu einigen Beispielen
gepostet, die Filter sowie Bitmap- und Text-Effekte
demonstrieren. Im
Flashblog gibt es weitere Beispiele sowie eine
Dokumentation der neuen Actionscript-Objekte für die Filter.
Erschienen am Samstag, 16.07.2005 @ 16:39
| Kommentare deaktiviert
Tags: flash, SAE
Montag, 14.04.2008
Alessandro Crugnola hat ein nettes kleines Firefox-Plugin programmiert: Mit »Flash Switcher« kann man per Mausklick die Version des Flash-Players wechseln oder den Player vorübergehend deinstallieren – nützlich um z.B. auf die Schnelle die Fallback-Variante einer Website zu testen.
Erschienen am Montag, 14.04.2008 @ 22:12
| Kommentar schreiben
Tags: flash, webdesign
Donnerstag, 05.02.2009
Dieses Plug-in schickt der Himmel: ClickToFlash unterbindet Flash-Filme in Safari. Um einen Flash-Film zu sehen, muss man zunächst einen Platzhalter-Kasten anklicken. Nervtötende Flash-Werbebanner muss ich mir jetzt nur noch ansehen wenn ich in der Stimmung dafür bin, und auch Videos auf Websites laufen nicht mehr ungefragt los. Und: Ich habe es zwar nicht gemessen, aber mich würde nicht wundern wenn sich das Plug-in positiv auf die Rechner-Performance auswirkt – vor allem wenn man wie ich permanent 100 Tabs oder mehr offen hat.
[via John Gruber]
Erschienen am Donnerstag, 05.02.2009 @ 20:02
| 1 Kommentar
Tags: flash, Mac, Plug-in, Safari
