16.3 Mehrere Sounds
Bisher haben Sie nur mit einem Sound gearbeitet. Möchten Sie mehrere Sounds einsetzen, müssen Sie sie voneinander trennen, um alle unabhängig steuern zu können. Wie das geht, führen wir anhand eines Beispiels vor. Die Grundlage ist die Datei groovemixer.fla auf der CD-ROM.
Abbildung 16.6 Ob der Groovemixer seinem groovigen Namen alle Ehre macht?
Abbildung 16.7 Die Elemente des Groovemixers
Schritt für Schritt: Ein kleiner Mixer
Der Code für die Schaltflächen landet per Ereignisprozeduren im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript. Den Code für die Regler geben Sie in den MovieClips der Regler ein.
Zuerst erstellen Sie vier neue Sound-Objekte, die Sie an jeweils eigene MovieClips binden:
drumLoop1_sound = new Sound(dloop1_mc); drumLoop2_sound = new Sound(dloop2_mc); synthiLoop1_sound = new Sound(sloop1_mc); synthiLoop2_sound = new Sound(sloop2_mc);
Das Ziel dieser Sound-Objekte sind vier MovieClips, die in unserem Beispiel als leere Instanzen auf der Ebene ActionScript liegen.
Durch dieses Zuweisen der Sound-Objekte zu eigenständigen MovieClips lassen sich alle vier Sounds einzeln steuern.
Anschließend fügen Sie die vier Sounds zu den Sound-Objekten hinzu:
drumLoop1_sound.attachSound("drums1"); drumLoop2_sound.attachSound("drums2"); synthiLoop1_sound.attachSound("synthi1"); synthiLoop2_sound.attachSound("synthi2");
Die Sounds haben wir bereits in der vorbereiteten Datei für ActionScript exportiert und mit den vier Namen drums1, drums2, synthi1 und synthi2 versehen.
Als Nächstes versehen Sie die vier Schaltflächen für die einzelnen Sounds mit Funktionalität. Hier der Code für die erste Schaltfläche der Drums:
drums1_btn.onRelease = function() { drumLoop2_sound.stop(); drumLoop1_sound.start(0, 50000); };
Der Sound für die zweiten Drums wird angehalten, der für die ersten gestartet.
Der Code für die anderen drei Schaltflächen entsteht analog, Sie müssen nur den Instanznamen der Schaltflächen und die Namen der Sounds austauschen.
Da der Start hier immer bei Position 0 erfolgt, kann ein Sound mehrmals aufgerufen werden, wenn der Nutzer die Schaltfläche öfter drückt; das führt zu neuen interessanten Effekten.
Wenn Sie dies vermeiden möchten, verwenden Sie die Methode für das Sound-Abspielen aus dem vorherigen Beispiel »Einfache Soundsteuerung«, Schritt 3.
Jetzt fügen Sie den Code für die beiden Stopp-Schaltflächen ein:
dstoppen_btn.onRelease = function() { drumLoop1_sound.stop(); drumLoop2_sound.stop(); }; sstoppen_btn.onRelease = function() { synthiLoop1_sound.stop(); synthiLoop2_sound.stop(); };
Der Schieberegler für die Lautstärke funktioniert genauso wie der Schieberegler aus dem Beispiel »Einfache Soundsteuerung«, Schritt 5:
onClipEvent (enterFrame) { _parent.drumLoop1_sound.setVolume(Math.round(100+(dposoben_num-_y))); _parent.drumLoop2_sound.setVolume(Math.round(100+(dposoben_num-_y))); }
Die einzigen Unterschiede zum vorigen Beispiel der einfachen Soundsteuerung: Der Schieberegler ist hier genau 100 Pixel hoch, deswegen kann der Wert direkt übernommen werden. Außerdem müssen Sie die Lautstärke in diesem Beispiel für beide Sound-Objekte des jeweiligen Bereichs (Drums und Synthi) festlegen.
Zum Schluss wechseln Sie in die Aktion für den MovieClip mit dem Drehregler und fügen folgenden Code hinzu:
on (press) { var mausklick:Boolean = true; } on (release, releaseOutside) { mausklick = false; } onClipEvent (mouseMove) { if (mausklick) { var rotation_num:Number = Math.atan2(_parent._ymouse – _y, _parent._xmouse – _x) * 180 / Math.PI; if (rotation_num < –150) { rotation_num = –150; this._rotation = rotation_num; _root.drumLoop1_sound.setPan(rotation_num) * 0.67; _root.drumLoop2_sound.setPan(rotation_num) * 0.67; } else if (rotation_num > 150) { rotation_num = 150; this._rotation = rotation_num; _root.drumLoop1_sound.setPan(rotation_num) * 0.67; _root.drumLoop2_sound.setPan(rotation_num) * 0.67; } else { this._rotation = rotation_num; _root.drumLoop1_sound.setPan(rotation_num) * 0.67; _root.drumLoop2_sound.setPan(rotation_num) * 0.67; } updateAfterEvent(); } }
Eine ausführliche Erklärung erhalten Sie im Exkurs zum Drehregler am Ende des Kapitels. Der Code des zweiten Drehreglers entsteht analog, nur dass die Sounds drumLoop1_sound und drumLoop2_sound durch synthiLoop1_sound und synthiLoop2_sound ersetzt werden.
Abbildung 16.8 Der Nutzer mixt die Sounds, wie er möchte.
Die fertige Datei finden Sie auf der CD-ROM unter dem Namen groovemixer_AS2.fla bzw. groovemixer_AS1.fla. Auch hier können Sie einiges verändern und anpassen. Wie wäre beispielsweise die Idee, auch die Drums zusammenzuschalten? Oder Sie bauen noch aufwendigere Sound-Transformationen ein.
Exkurs: Drehregler
Wie versprochen, zeigen wir Ihnen zum Schluss die Logik des Drehreglers. Dazu finden Sie auf der CD-ROM einen Drehregler in der Datei drehregler.fla. Er gibt nach dem Drehen seinen Winkel in ein dynamisches Textfeld aus.
Abbildung 16.9 Um 112° gedreht …
Sehen Sie sich den Code in der Aktion des MovieClips ein wenig genauer an:
1. | Zuerst überprüfen Sie mit dem Ereignis press, ob der Nutzer gerade die Maustaste auf dem Drehregler drückt. Wenn ja, erhält die Prüfvariable mausklick den Wert true: |
on (press) { var mausklick:Boolean = true; }
2. | Lässt der Nutzer die Maustaste los, geben Sie den Drehwinkel aus und schalten die Prüfvariable mausklick auf false: |
on (release, releaseOutside) { _root.anzeige_str = this._rotation; mausklick = false; }
-
- Hier sehen Sie eine Besonderheit: Wir reagieren gleichzeitig auf zwei Ereignisse. Wenn der Nutzer die Maustaste loslässt oder sie außerhalb des Drehreglers loslässt. Beides soll dasselbe bewirken. Wenn Sie nur release abfangen würden, könnte der Nutzer die Maustaste außerhalb der Grafik des Drehreglers loslassen, ohne dass die Drehbewegung beendet wird.
3. | Bewegt sich die Maus irgendwo im SWF-Film, prüfen Sie zuerst, ob die Maustaste gedrückt ist: |
onClipEvent (mouseMove) { if (mausklick) {
-
- Das ist der »große« Trick: Einerseits bedienen Sie den Drehregler nur, wenn die Maustaste auf ihm gedrückt ist, andererseits reagieren Sie auf Mausbewegungen!
4. | Nun berechnen Sie die Rotation in Abhängigkeit von der Mausbewegung. Hier kommt die Methode atan2(x, y) der Math-Klasse zum Einsatz: Sie berechnet den Winkel eines Punktes mit den Koordinaten x und y relativ zum Ursprung des Koordinatensystems. |
var rotation_num:Number = Math.atan2(_parent._ymouse – _y, _parent._xmouse – _x) * 180 / Math.PI;
-
- An dieser Stelle verwenden Sie die Mausposition abzüglich der Position des Drehreglers zur Berechnung der beiden Punkte. Deswegen muss der Registrierungspunkt des Drehreglers in seiner Mitte liegen. Der Winkel wird von atan2() als Bogenmaß geliefert und muss in einen Winkel umgerechnet werden.
5. | Nun weisen Sie die Rotation in gerundeter Form dem Drehregler zu: |
this._rotation = Math.round(rotation_num); updateAfterEvent(); } }
Das war der einfache Drehregler mit Textfeld, den Sie für beliebige Anwendungen adaptieren können. Die in Schritt 6 unseres Beispiels »Ein kleiner Mixer« eingeführten Drehregler für die Balance funktionieren analog, allerdings mit zwei Unterschieden:
Zum einen dient der Rotationswinkel (rotation_num) nicht nur der Rotation, sondern auch zur Berechnung der Balance:
_root.drumLoop1_sound.setPan(rotation_num) * 0.67;
Zum anderen schließt eine Fallunterscheidung Rotationswinkel zwischen +150° und –150° aus und setzt in solchen Fällen den Rotationswinkel auf diese Extremwerte:
if (rotation_num < –150) { rotation_num = –150;
Damit soll vermieden werden, dass der Drehregler im unteren Bereich zwischen den Extremen links und rechts (bei –150° und +150°) noch Werte annimmt.
Ihre Meinung
Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.