Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 14 Von Mäusen und Duplikaten
  Pfeil 14.1 Mausbewegungen und mehr
  Pfeil 14.2 Duplizieren von MovieClips
  Pfeil 14.3 Von der Bibliothek zur Bühne


Rheinwerk Computing - Zum Seitenanfang

14.2 Duplizieren von MovieClips  topZur vorigen Überschrift


Fehlerquelle

Vorsicht, die Aktionen von MovieClips werden mit dupliziert. Verwenden Sie dort einen relativen Verweis mit this, gelten die Anweisungen auch für den duplizierten MovieClip. Ereignisprozeduren dagegen sind auf den Namen des MovieClips festgelegt und werden nicht mit dupliziert.


Ein neuer, leerer MovieClip, gefüllt mit den Zeichnungsmethoden aus dem letzten Kapitel, wirkt oft sehr nett, aus Sicht des Vektorgrafikexperten sind die Möglichkeiten allerdings gering und die Mühen gewaltig. Daher wäre es praktisch, einen bestehenden MovieClip einfach zu duplizieren. Der könnte dann beliebig kompliziert sein und andere MovieClips enthalten.

Dankenswerterweise gibt es diese Möglichkeit: Die Methode duplicateMovieClip(Ziel, Tiefe) der MovieClip-Klasse dupliziert den MovieClip, für den sie eingesetzt wird. Die folgende Zeile dupliziert den MovieClip mit Instanznamen movieclip_mc:

movieclip_mc.duplicateMovieClip(neu_mc, 1);

Als Parameter geben Sie das Ziel, das gleichzeitig der Name des Duplikats ist und bisher noch nicht vergeben wurde. Nachdem das Duplikat einmal angelegt ist, können Sie mit seinem Namen problemlos darauf zugreifen:

neu_mc._alpha = 50;

Der zweite Parameter ist die Tiefe. Er zeigt an, auf welcher (ActionScript-) Ebene das Duplikat eingefügt wird. Eine ausführlichere Erklärung des Prinzips der Tiefe finden Sie in Kapitel 13, »Zeichen und Zufall«.

Im Prinzip ist duplicateMovieClip() sehr einfach einzusetzen. Interessant wird es, wenn Sie einen MovieClip mehr als einmal duplizieren. Damit lassen sich Animationen und Massenszenen realisieren. Für Animationen müssen Sie einfach bei jedem Aufruf den MovieClip duplizieren, für Massenszenen generieren Sie die Unmenge an Duplikaten mit einer Schleife.

Ein einfaches Beispiel soll illustrieren, wie Sie mit vielen Duplikaten arbeiten. Wir verbinden das Beispiel gleich mit der Ereignisprozedur »Dem Mauszeiger folgen«. Ausgangssituation ist die Datei blumenmeer.fla auf der CD-ROM. Es handelt sich hier – wie beim Stern aus dem letzten Abschnitt – nur um eine einzelne Blume als MovieClip (Instanzname mausPfeil_mc). Diese Blume soll bei einer Mausbewegung mehrmals dupliziert werden, hinter der Mausspur herflattern und langsam verblassen.

Abbildung 14.3 Die Blumen flattern auf der Spur der Maus und verblassen langsam.

Schritt für Schritt: Blumenmeer hinter dem Mauszeiger

Auch in diesem Beispiel kommen Ereignisprozeduren zum Einsatz. Der Code landet im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript.

Zuerst verstecken Sie den Mauspfeil und legen den MovieClip mit der Blume auf die Koordinaten der Maus:

Mouse.hide();
_root.mausPfeil_mc._x = _root._xmouse;
_root.mausPfeil_mc._y = _root._ymouse;
var i:Number = 1;

Die Variable i ist die schon im letzten Kapitel verwendete Zählervariable.

Als Nächstes fügen Sie die Ereignisprozedur onMouseMove hinzu und setzen den MovieClip für den neuen Mauspfeil auf die Mauskoordinaten:

_root.onMouseMove = function() {
   _root.mausPfeil_mc._x = _root._xmouse;
   _root.mausPfeil_mc._y = _root._ymouse;

Nun folgt der MovieClip der Maus.

Anschließend duplizieren Sie den Mauspfeil und geben ihm einen neuen Namen:

var name:String = "mausPfeil"+i+"_mc";
_root.mausPfeil_mc.duplicateMovieClip(name, i);

Da der MovieClip bei jeder Mausbewegung dupliziert wird, müssen Sie den Namen dynamisch zusammensetzen. Deswegen bilden wir den MovieClip innerhalb einer Variablen (name) aus Strings und dem Zähler. Nun können Sie den Clip als Ziel-Parameter in duplicateMovieClip(Ziel, Tiefe) einsetzen. Die Tiefe wird ebenfalls dynamisch mit i festgelegt, so dass jedes Duplikat eine eigene Tiefe besitzt. Wenn Sie alle Duplikate auf eine Tiefe legen, würden sie sich gegenseitig überschreiben und Sie hätten immer nur ein Duplikat.

Um den MovieClip langsam verblassen zu lassen, arbeiten Sie mit setInterval():

   //Aufruf der Funktion, soll für jedes Duplikat erfolgen
   _root["id"+i] = setInterval(verblassen, 100, name, i);

Sie sehen, auch Verblassen ist eine Animation, die in der Funktion verblassen() durchgeführt wird (ab Schritt 6). Als Parameter übergeben Sie den Namen des MovieClips und den Zähler. Die Intervall-ID speichern Sie in einer Variablen, deren Namen Sie dynamisch konstruieren: _root["id"+i]. Die Variable wird direkt an den Hauptfilm gehängt, ist also eine Eigenschaft des Hauptfilms.

Zum Schluss müssen Sie den Zähler um 1 erhöhen und die Ereignisprozedur schließen:

   i++;
};

Die Erhöhung des Zählers erlaubt das dynamische Erstellen immer neuer MovieClips.

In der Funktion verblassen() nehmen Sie zuerst die beiden Parameter in Empfang und prüfen, ob der MovieClip noch sichtbar ist:

function verblassen(name:String, i:Number) {
   if (_root[name]._alpha > 0) {

Das dynamische Bilden des Variablennamens mit den Array-Zuweisungsoperatoren ([]) ersetzt setProperty(Ziel, Eigenschaft, Wert).

Diese Funktion dient ebenfalls dazu, Eigenschaften eines MovieClips zu setzen. Dies gilt allerdings als wenig elegant, weswegen wir darauf verzichten.

Ist der MovieClip noch zu erkennen, verringern Sie seine Transparenz:

   _root[name]._alpha -= 8;

Diese Eingabe sorgt für das kontinuierliche Verblassen.

Anschließend wählen Sie per Zufallszahl ein Vorzeichen (- oder +) und ändern die Position des MovieClips zufällig:

   var vorzeichen_num:Number = 1;
   if (Math.random() < 0.5) {
      vorzeichen_num = –1;
   }
   _root[name]._x += vorzeichen_num * Math.random() * 15;
   _root[name]._y += vorzeichen_num * Math.random() * 15;

Nun fangen die Blumen an zu schaukeln. Natürlich können Sie hier beliebige andere Effekte verwenden.

Auf der CD-ROM finden Sie beispielsweise die Datei blumenmeer_sinus_AS2.fla bzw. blumenmeer_sinus_AS1.fla, in der wir die Blumen mit einer Sinusfunktion kreisen lassen.

Größe und Drehwinkel der Blumen lassen sich ebenfalls zufällig anpassen:

   _root[name]._xscale += 1 + Math.round(Math.random() * 30);
   _root[name]._yscale = _root[name]._xscale;
   _root[name]._rotation += Math.floor(Math.random() * 51);

Sie sehen, es gibt viele Möglichkeiten zum Gestalten.

Sollte der MovieClip schon verblasst sein, entfernen Sie ihn und beenden den zugehörigen regelmäßigen Aufruf der Funktion verblassen():

   } else {
   _root[name].removeMovieClip();
    clearInterval(_root["id"+i]);
   }
}

Dieser Schritt ist wichtig, da er in Ihrem Computer Performance freigibt. Stellen Sie sich vor, jede Mausbewegung erzeugt einen neuen MovieClip und einen neuen Aufruf von verblassen() mit setInterval(). Wenn Sie verblasste MovieClips nicht aussortieren würden, hätten Sie schnell hunderte oder gar tausende MovieClips und ebenso viele regelmäßige Funktionsaufrufe.

Zu diesem Beispiel finden Sie eine Fülle von Dateien auf der CD-ROM: blumenmeer_AS2.fla enthält den Code, wie in diesen Schritten besprochen; blumenmeer_sinus_AS.fla realisiert die Bewegung der MovieClips mit einem Sinus; sternsuche_AS2.fla zeigt den kleinen Stern aus dem ersten Beispiel und bubble_AS.fla überrascht Sie mit einer Luftblase. Alle Beispiele finden Sie auch für ActionScript 1 im Ordner FlashMX.



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.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das Openbook denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt.
Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern