Flash: Orchester interaktiv Nicolas Ruh

Transkript

1 Import von Sounds Wie kommt man zu Tönen? Es gibt eine Reihe von Webseiten, von denen man sich viele lizenzfreie Sounds gratis oder für wenig Geld herunterladen kann. Am besten suchen sie sich solche Websites mit Google, indem sie die Begriffe "Sound" "download" und "free" eingeben. Die Suche dauert dann ein wenig, weil man leider auch viele schlechte Töne findet und dann die Spreu vom Weizen trennen muss. Hier einige Links zu Seiten, mit denen ich recht gute Erfahrungen gemacht habe: Ein weitere Möglichkeit ist, sich im Fachhandel eine CD zu kaufen, auf denen Sounds gespeichert sind. Solche CDs gibt es mittlerweile zu allen nur erdenklichen Themen und Musikstilen. Der Vorteil von CDs ist es, dass die Töne in den meisten Fällen in verschiedenen Formaten angeboten werden, was einem das mühsame Konvertieren vom einen ins andere Format erspart. Welche Formate frisst Flash? Auf welchem Betriebssystem man auch immer arbeitet, MP3 kann Flash jederzeit verarbeiten. Aber: MP3 ist ein Format, dass schon komprimiert ist. Wenn man einen Sound in Flash beim Veröffentlichen eines Filmes noch mehr komprimieren möchte, kann das in einigen Fällen zu bösen Überraschungen führen. Arbeitet man unter Windows, kann man das Format WAV in Flash importieren. In der Regel gibt das die besseren Resultate als beim Verarbeiten von MP3- Sounds. MAC- User verwenden am besten das AIFF- Format. Aber keine Sorge, auch WAV kann importiert werden, falls QuickTime installiert ist, was ja in der Regel der Fall ist. Import von Bildern Flash kann mit allen gängigen Bildformaten arbeiten, also mit den Webformaten JPG, GIF, PNG, aber auch mit BMP oder TIFF. In neuen Versionen ist auch der "Direktimport" - zum Beispiel mit der Zwischenablage - aus Photoshop, Fireworks und Illustrator dazugekommen, weil ja nun alle Programme unter einem Dach vereint sind. Im letzteren Fall werden sogar die Ebenen übernommen. Falls keine teure Bildbearbeitungssoftware zur Verfügung steht und man mit Transparenz arbeiten möchte, wählt man als Import- Format am besten PNG. Import wohin? Der Import erfolgt über den Hauptmenu- Befehl Datei/Importieren. Darauf muss man sich noch entscheiden, wohin importiert werden soll: In Bühne importieren... oder In Bibliothek importieren... Wenn sie sich für die Bühne entscheiden, wird die Datei auch in der Bibliothek abgelegt, was für Einsteiger in Flash etwas verwirrend wirkt, aber eigentlich durchaus logisch ist.

2 Orchesterbeispiel In dieser Übung geht es u.a. um den Import von Bildern und Sounds. Ausserdem werden wir unsichtbare Schaltflächen erstellen und Sounds auf "Befehl" des User abspielen lassen: wenn man mit der Maus auf eines der Instrumente klickt, soll der Name des Instruments angezeigt werden und der zugehörige Sound soll ertönen. Dateien importieren Als erstes bereiten wir alles vor und importieren alle nötigen Dateien. Laden sie sich dazu den Ordner Orchester.zip herunter und entpacken sie ihn auf der Festplatte. Darin befindet sich das Ausgangsmaterial für unsere Übung: ein Bild und sechs verschiedene Töne. Und so geht s los: 1. Öffnen sie Flash und stellen sie die Grösse des Dokuments auf 300 x 275 Pixel. 2. Erstellen sie zwei Ebenen, nennen sie die untere "Instrumente", die obere "Buttons" oder Schaltflaechen. 3. Mit Datei/Importieren/In Bibliothek importieren... holen sie das Bild in Flash hinein. Es sollte jetzt in der Bibliothek sichtbar sein. 4. Ziehen sie das Bild aus der Bibliothek auf die Bühne (Ebene "Instrumente"). Positionieren sie das Bild im Nullpunkt (mittig) und sperren sie dann die Ebene. 5. Importieren sie jetzt alle Sounds in die Bibliothek. Töne werden dort mit einem Lautsprecher- Icon angezeigt und können mithilfe des kleiner Pfeilbuttons im oberen Bibliotheksfenster probeweise abgespielt werden. Nun ist alles vorbereitet und sie können sich daran machen, die sechs Instrumente zum interaktiven Leben zu erwecken. Im Folgenden wird das Vorgehen am Beispiel der E- Gitarre beschrieben.

3 Schaltfläche zeichnen Das Ziel ist, dass die verschiedenen Instrumente reagieren können, wenn der Benutzer mit der Maus auf sie zeigt oder klickt. Da sich jedoch alle Instrumente in einem einzigen Bild befinden, ist es schwierig zu unterscheiden, ob auf die Gitarre oder auf den Bass geklickt wurde. Damit das trotzdem funktioniert, werden wir einen Trick anwenden: unsichtbare Schaltflächen. Zeichnen sie eine Form, die grob der Gitarre entspricht (in der Ebene Buttons ). Am einfachste ist wohl, wenn sie mit dem Freihand- Werkzeug den Umriss nachfahren (beachten sie bei den Eigenschaften die Option glätten ) und diesen anschliessend mithilfe des Farbeimer- Werkzeugs ausfüllen. Alternativ können Sie auch einfach die ganze Gitarre mit einem Pinsel ausmalen, wobei es sich ggf. lohnt, zwischendurch die Grösse anzupassen. Das muss keine sehr exakte Arbeit sein, denn die Flächen werden im fertigen Film dann unsichtbar sein. Wenn sie mit einem Instrument fertig sind, wählen sie die nachgemalte Fläche aus (z.b. Doppelklick, Fläche UND Umriss auswählen!) und machen sie ein sinnvoll benanntes Symbol (Typ: MovieClip) daraus z.b. GitarreFlaeche. Abbildung 1: Ungefähr so sollten dann die Schaltflächen für alle Instrumente aussehen. Achtung!: GitarreFlaeche ist jetzt der Name des Symbols in der Bibliothek. Die Instanz (~Kopie) des Symbols, die sich momentan in der Bühne befindet, hat bisher noch keinen Namen. Da ein solcher Instanzname aber unerlässlich ist, wenn wir mit Programmcode arbeiten wollen, sollten sie im Eigenschaftsfenster der Instanz einen vergeben, z.b. gitarre_mc 1. 1 Damit es weniger Verwirrung gibt sollten Instanznamen immer mit einem kleinen Buchstaben beginnen, Symbolnamen dagegen werden gross geschrieben.

4 Jetzt können wir mit gitarre_mc arbeiten, z.b. indem wir festlegen was passieren soll, wenn jemand mit der Maus darauf klickt: gitarre_mc.addeventlistener(mouseevent.click, ongitarre) function ongitarre(e:mouseevent):void { } Sound-Movies benutzen // hier wird die Reaktion auf dem Mausklick definiert Was also soll durch einen Klick auf die Gitarre ausgelöst werden? Der entsprechende Sound soll abgespielt werden, sie haben ihn ja bereits in die Bibliothek importiert. Dummerweise kann man Sounds (genau wie andere Symbole) aber nicht direkt aus der Bibliothek heraus benutzen, auch hier muss man zunächst eine Instanz in die Bühne importieren. Für Sounds (und oftmals auch für andere Symbole) macht man das am einfachsten direkt mit Code. Damit das funktioniert braucht es allerdings noch eine weitere Vorbereitung: Machen sie einen Rechts- Klick auf ein Sound- Symbol in der Bibliothek (z.b. guitar.mp3) und öffnen sie Eigenschaften.... Hier gibt es ein Register ActionScript, in dem sie die Tick- Box Export für ActionScript aktivieren müssen damit sollte Export in Bild 1 ebenfalls aktiv sein. Ausserdem sollten Klassennamen immer gross geschrieben sein, also nennen sie die Klasse z.b. Gitarre. Mit diesen Einstellungen haben sie sozusagen die Erlaubnis gegeben, dass dieser Sound vom Code in die Bühne geholt werden darf und sie haben auch den Namen festgelegt, den es dafür braucht. So, jetzt sind wir bereit, der unsichtbaren Gitarren- Schaltfläche zu sagen, was sie tun soll: var gitarre_snd:sound = new Gitarre(); gitarre_snd.play(); Erklärung: Die erste Zeile erschafft eine neue Variable mit dem Namen gitarre_snd und dem Typ Sound. In diese Variable/Kiste wird eine neue Instanz des Bass- Sounds gespeichert man kann also jetzt dieser Instanz sagen, was sie tun soll. Ein Beispiel dafür ist die folgende Zeile, die der eben erschaffenen Instanz befiehlt, ihren Sound abzuspielen. Damit es keine Verwirrungen gibt, sollten sie auch für den Code eine eigene Ebene ( actions oder code ) erstellen. Aktivieren sie dort das erste Schlüsselbild und wechseln sie in das Fenster Aktionen. Hier platzieren sie nun diese zwei Zeilen innerhalb der ongitarre- Funktion (s. Code weiter oben), dann testen sie ihr Werk. Im Moment überdeckt die Schaltfläche wahrscheinlich noch die Gitarre im Orchesterbild, aber das ist einfach zu ändern. Aktivieren sie die Schaltfläche (man sollte den blauen Rahmen sehen der angibt, dass es sich um ein Symbol handelt) und suchen sie im Eigenschaftsfenster nach der Eigenschaft alpha (=Transparenz). Wenn sie diesen Wert auf 0% setzen ist die Schaltfläche völlig durchsichtig, sie sollte aber noch genauso funktionieren wie vorher testen sie das. Achtung: durchsichtig ist nicht dasselbe wie unsichtbar (visible = false), unsichtbare Objekte reagieren nicht auf (Maus- ) Ereignisse.

5 Textfelder benutzen Jetzt wollen wir noch dafür sorgen, dass der Name jedes Instruments angezeigt wird, wenn sich die Maus über der entsprechenden (unsichtbaren) Schaltfläche befindet. Um Verwirrung zu vermeiden sollten sie die Instrumentennamen wieder auf einer eigenen Ebene platzieren, am besten eine, die sich unterhalb der Buttons- Ebene befindet. Jetzt braucht es zunächst einmal den Namen, sie können ihn einfach mit dem Textwerkzeug erstellen und so formatieren (und positionieren), wie es ihrem Geschmack entspricht. Genau genommen erstellen sie dabei ein Textfeld, welches den Namen darstellt ganz ähnlich wie ein Symbol eine Form oder eine Bitmap als Aussehen haben kann. Dynamische Textfelder 2 verhalten sich in vielerlei Hinsicht genau wie Symbole, daher können sie sich entscheiden, ob sie im Folgenden mit einem dynamischen Textfeld weiterarbeiten, oder den Text zunächst in ein Symbol umwandeln für dieses Beispiel sollte es keinen Unterschied machen. Also, entweder unter Eigenschaften dynamisches Textfeld einstellen, oder den Text in ein Symbol umwandeln. Wichtig ist in beiden Fällen, dass sie wieder einen Instanznamen vergeben sagen wir gitarrelabel. Jetzt gibt es also das entsprechende Label und wir müssen nur noch den Code schreiben, der dafür sorgt, dass das Label nur dann gezeigt wird, wenn sich der Mauszeiger über der Schaltfläche befindet. Symbole (oder auch Textfelder) sichtbar und unsichtbar zu machen ist sehr einfach, es muss nur die Eigenschaft visible entweder auf true (=wahr, also sichtbar) oder false (=falsch, also nicht sichtbar) gesetzt werden. Und weil das dann passieren soll, wenn der Mauszeiger die (unsichtbare) Schaltfläche betritt oder verlässt, braucht es die beiden Ereignisse MOUSE_OVER und MOUSE_OUT, die genau in diesen Fällen ausgelöst werden. Der folgende Code sorgt also dafür, dass der Name ausgeblendet wird, wenn der Mauszeiger die Gitarre verlässt: gitarre_mc.addeventlistener(mouseevent.mouse_out, onmouseout) function onmouseout(e:mouseevent):void { } gitarrelabel.visible = false; Ich bin sicher, sie können sich den Code für das Einblenden des Namens inzwischen zusammenreimen. Hinweis: eigentlich sollen die Labels ja ganz zu Beginn nicht angezeigt werden. Um das einzustellen, gibt es zwei Möglichkeiten: entweder man setzt die Eigenschaft visible im Eigenschaftsfenster auf false, oder man schreibt die Zeile gitarrelabel.visible = false; in den Code, z.b. ganz Oben. Da diese Zeile nicht an ein Ereignis gekoppelt ist, wird sie einfach zu Beginn ausgeführt, also gleich nach dem Laden der Flash- Animation. 2 Statischer Text ist dagegen eher wie eine Form, d.h. es fehlen die Eigenschaften, die wir zum Programmieren so gut gebrauchen können.

6 Das restliche Orchester Zumindest die Gitarre funktioniert inzwischen hoffentlich wie gewünscht, jetzt müssen sie diesen Prozess nur noch für die anderen Instrumente wiederholen. Versuchen sie dabei, immer weniger auf die Anleitung zu schauen und vergessen sie nicht die Vorbereitungsschritte, d.h. die Vergabe von Instanznamen und die Exporterlaubnis für die Sounds. Qualität der Sounds anpassen Sehr wahrscheinlich klingen die Sounds jetzt noch etwas komisch. Das liegt daran, dass Flash versucht, immer möglichst kleine Dateien zu produzieren, da der Haupteinsatzbereich ja das Internet ist. Die Qualität kann aber natürlich verbessert werden: Wählen sie Datei/Einstellungen für Veröffentlichungen... Wechseln sie im sich nun öffnenden Fenster auf den Reiter Flash. Unter Audio- Stream kann man verschiedene Einstellungen für die Komprimierung der Sounds wählen: Klickt man auf Einstellungen, kann man die Qualität für die Sounds genau bestimmen. Komprimierung: mp3 würde ich lassen, weil wir Musik- Sounds haben. Vorverarbeitung: Mono reicht für unsere Anwendung alleweil (Mono braucht naturgemäss nur halb so viel Speicherplatz wie Stereo). Bitrate: Veränderungen bei dieser Einstellung bringen in der Regel die meisten Verbesserungen in der Qualität des Sounds. Probieren sie aus, was passiert, wenn sie die Zahl schrittweise erhöhen. Qualität: Hier wählen sie für unser Beispiel am besten Optimal aus. Hinweis: Die Einstellungen haben einen sehr direkten Einfluss auf die Grösse der swf- Datei. Leider ist es so, dass die Datei umso grösser wird, je besser die Sounds sind. Insbesondere wenn das Ergebnis im Internet zur Verfügung gestellt werden soll, muss man hier also einen guten Kompromiss zwischen Grösse und Qualität finden. Diese Export- Einstellungen betreffen übrigens nur die Grösse der.swf- Datei, also des fertigen und nicht mehr veränderbaren Produkts ihrer Bemühungen. In der.fla- Datei, in der sie ihr Projekt bearbeiten, bleiben alle Sounds (und auch Bilder) in der Qualität erhalten, in der sie importiert wurden. Erweiterungen Natürlich kann man das Orchester- Projekt jetzt noch auf verschiedene Arten verbessern. So könnte man z.b. dafür sorgen, dass ein Sound erst dann erneut gestartet werden kann, wenn er zu Ende gespielt hat (s. SnippetsAS3) Auch möglich wäre, die einzelnen Saite des Basses mit Tönen zu belegen, die man einfach durch Zeigen mit der Maus abspielen kann Oder denken sie sich einfach selbst eine Erweiterung aus...