Anzeige
Tutorialbeschreibung

Objekte per Actionscript einfügen

Objekte per Actionscript einfügen

Version: ab Flash MX
Niveau: Einsteiger
Vorkenntnisse: Grundlagen Flash, Grundlagen Actionscript, Animation mit Actionscript
Lernziel: zur Laufzeit dynamisch Bibliotheksobjekte in Flash einfügen können; AS-Befehle attachMovie()/removeMovieClip() verwenden können

Mit Hilfe von Actionscript ist es möglich, zur Laufzeit Objekte aus der Bibliothek zu laden, so daß sich ein Flashfilm im Prinzip mit einer völlig leeren Zeitleiste alleine durch Skripting aufbauen läßt. Beispielsweise kann ein Menü dynamisch aufgebaut oder Spieleobjekte abhängig von einer Useraktion eingeblendet werden. Zugleich lassen sich mit dieser Methode interessante Effekte erzielen.

Dazu wird die Methode mc.attachMovie(Exportname, Instanzname, Tiefe) verwendet. Sie benötigt drei Parameter:

  • Export- oder Verknüpfungsname des aus der Bibliothek auf die Bühne zu exportierenden Objektes.
  • Instanzname des neuen Objektes, das jetzt auf der Bühne liegt.
  • Tiefe dieses Objektes.

Instanzname und Tiefe müssen eindeutig sein und dürfen nicht bereits anderweitig verwendet worden sein.

Einsatzbeispiel:
Bei Mausklick an einer beliebigen Stelle des Screens wird ein Objekt aus der Bibliothek eingefügt.

  1. Erstellen Sie einen neuen Film, Größe 800 x 600, 18 Bps, Hintergrund weiß.
  2. Erstellen Sie ein blaues Rechteck, Größe 60 x 60, und verwandeln es in ein MovieClip-Symbol namens „mc_recht“ mit dem Registrierungspunkt in der Mitte. Weisen Sie den gleichen Namen als Export- bzw. Verknüpfungsnamen zu (Screen 2).
  3. Löschen Sie anschließend das Objekt auf der Bühne, so daß sie vollständig leer ist. Der „mc_recht“ muß natürlich in der Bibliothek erhalten bleiben.
  4. Benennen Sie die Ebene 1 um in „actions“.
  5. Fügen Sie im Skripteditor für Frame 1, Ebene „actions“ folgendes Skript ein:

this.onMouseDown = function(){ 
          this.attachMovie(“mc_recht”,”recht”,1);
}

Testen Sie den Film und klicken dabei auf eine beliebige Stelle des Screens. Wenn Sie alles richtig gemacht haben, wird in der linken oberen Ecke das blaue Rechteck eingefügt.

Erklärung: der Hauptzeitleiste bzw. der Szene 1 wird ein mouseDown-Ereignis zugewiesen, d.h. jedesmal, wenn irgendwo auf die Bühne geklickt wird, führt Flash die nach dem Ereignis genannten Aktionen aus. Das Schlüsselwort this bezieht sich hier auf _root, also die Hauptzeitleiste bzw. Szene 1. Die zweite Skriptzeile führt dazu, daß auf der Bühne ein Objekt mit dem Exportnamen „mc_recht“ eingefügt wird, wobei es den Instanznamen „recht“ erhält. Dieser neue Name ist wichtig, um es später mit Actionscript ansprechen zu können.

Abgelegt wird das Rechteck auf der Ebene 1. Achtung: diese Ebene hat nichts mit den Ebenen der Zeitleiste zu tun. Jedes Objekt besitzt in Flash eine rein virtuelle Ebene, die festlegt, welches Objekt ein anderes überdeckt. Wird ein Objekt händisch auf der Bühne eingefügt, bekommt es einen Ebenenwert zugewiesen, der kleiner 0 ist. So liegt das erste Objekt beispielsweise auf der Ebene –16383. Je größer die Zahl, desto weiter vorne liegt das Objekt.

Überraschend mag auf den ersten Blick die Position des Objektes sein: es liegt nach dem Mausklick in der linken oberen Ecke, nicht aber, wie wir vielleicht gehofft haben, an der Position des Mauscursors. Aus Sicht von Flash macht das allerdings Sinn: Wir haben ja nicht mitgeteilt, wo wir das Rechteck einfügen wollen. Fehlt eine derartige Angabe, legt Flash es einfach auf die Standardposition x = 0 und y = 0, also links oben.

  1. Daher ergänzen Sie das Skript nach der Zeile attachMovie wie folgt:

recht._x = 400;
recht._y = 300;

Wenn Sie jetzt testen, wird das Rechteck mittig auf der Bühne eingefügt.

  1. Um es auf die Mausposition zu setzen, ändern Sie die eben ergänzten Zeilen folgendermaßen, und testen anschließend:

recht._x = this._xmouse;
recht._y = this._ymouse;

Da das mouseDown _root zugeordnet wurde, können Sie auch vor _xmouse und _ymouse das this. weglassen. Anstelle eines festen Wertes wird jetzt dem Rechteck jeweils die x- und y-Position der Maus zugewiesen.
Ein so eingefügtes Objekt kann auf einfache Weise auch wieder gelöscht werden. Dazu dient die Methode mc.removeMovieClip().

  1. Nach der schließenden Klammer des ersten Skripts fügen Sie ein weiteres Skript ein:  

this.onMouseUp = function(){ 
          recht.removeMovieClip();
}

Wenn Sie jetzt testen, wird bei mouseDown das Rechteck eingeblendet, aber bei mouseUp löscht Flash es direkt wieder.

Momentan kann nur ein Objekt eingeblendet werden, da jedes neue Objekt den gleichen Namen erhält wie das vorhergehende und alle liegen auf der gleichen Ebene. 

  1. Um das zu ändern, fügen Sie vor dem bisherigen Skript folgende Zeile ein:  

tiefe = 1;

Damit wird eine Variable mit dem Wert 1 initialisiert. Sie dient uns dazu, sowohl eindeutige Instanznamen wie auch eindeutige Tiefen zu generieren.

  1. Ändern Sie das mouseDown-Skript wie folgt:

this.onMouseDown = function(){ 
          this.attachMovie(“mc_recht”,”recht”+tiefe,tiefe); 
          this[”recht”+tiefe]._x = this._xmouse; 
          this[”recht”+tiefe]._y = this._ymouse; 
          tiefe++;
}

  1. Löschen Sie das mouseUp-Ereignis mit der zugehörigen Aktion komplett, da es jetzt keinen Sinn mehr macht. Wenn Sie testen, müßte jetzt bei jedem Klick ein Objekt eingeblendet werden, ohne daß Flash es wieder löscht.

Durch die Variable tiefe erhält nun jedes eingeblendete Rechteck einen eindeutigen Namen, z.B. „recht1“, wenn tiefe den Wert 1 hat, „recht2“, wenn tiefe 2 beträgt, usw. Der Ausdruck „recht“+tiefe bewirkt in Flash eine Konkatenation, also das Zusammenziehen von Strings – simpel ausgedrückt: es wird ein Text zusammengesetzt, bestehend aus „recht“ und einer Zahl. Die vorletzte Zeile tiefe++ sorgt dafür, daß die Variable tiefe bei jedem Klick um eins inkrementiert, also hochgezählt wird. Etwas komplizierter ist der Instanzname, aus dem Flash einen Objektpfad erstellen muß, um das eingeblendete Rechteck korrekt ansprechen zu können. Der Ausdruck this[„recht“+tiefe] weist daher Flash durch die eckigen Klammern an, den zusammengesetzten String als einen Instanznamen zu behandeln. Der Inhalt der eckigen Klammern muß dabei identisch sein mit dem zweiten Parameter, den man bei attachMovie übergibt, hier also: „recht“+tiefe. Ein bißchen Bewegung kann nicht schaden. 

  1. Daher fügen Sie eine Zeile vor dem Inkrementieren von tiefe folgendes ein:
this[„recht“+tiefe].onEnterFrame = function(){ 
          this._x += 5; 
          this._y += 5;
}

Die Rechtecke bewegen sich jetzt alle nach rechts unten. Würden wir nun munter weiter klicken, dann würde Flash im Laufe der Zeit immer langsamer, denn jedes einzelne Objekt ist ja animiert – auch diejenigen, die sich schon längst außerhalb der Bühne befinden. Die Performance des Flashplayers ist leider nicht besonders gut, so daß sie mit einer steigenden Anzahl an Animationen schnell in die Knie geht. Daher empfiehlt es sich, die Rechtecke, sobald sie den Rand erreichen, automatisch zu löschen. 

  1. Ergänzen Sie das enterFrame-Skript vor dessen schließender Klammer um folgende Zeile und testen Sie:

 if(this._x > 800 || this._y > 600){ 
          this.removeMovieClip();
}

In beredter Prosa würden wir formulieren: wenn das Rechteck den rechten oder den unteren Rand erreicht hat, soll es gelöscht werden. Genau das tut die if-Bedingung. Sie kontrolliert, ob die x-Position des Objektes größer ist als der rechte Rand oder ob dessen y-Position größer ist als der untere Rand. In beiden Fällen wird das betreffende Objekt gelöscht. Übrigens: das Zeichen || läßt sich durch gleichzeitiges Drücken der Tasten „alt gr“ und „<“ erzeugen.

  1. Wenn Sie die Objekte drehen lassen wollen, dann ergänzen Sie das enterFrame-Ereignis um folgende Aktion:

this._rotation += 5;

Damit wird die Rotation der Objekte mit jedem enterFrame-Ereignis um 5 Grad erhöht. Das Ganze in Aktion:

Bilder

Um das Skript für weitere Aktionen, die den Rechtecken zugewiesen werden, zu vereinfachen, speichern wir den Instanznamen in einer eigenen Variablen.

  1. Schreiben Sie daher unmittelbar in die nächste Zeile nach this.attachMovie:

 var obj = this[„recht“+tiefe];

Anschließend ersetzen Sie in allen nachfolgenden Zeilen this[„recht“+tiefe] durch obj. Das Skript müsste jetzt folgendermaßen aussehen:  

tiefe = 1;
this.onMouseDown = function() { 
          this.attachMovie("mc_recht", "recht"+tiefe, tiefe); 
          var obj = this["recht"+tiefe]; 
          obj._x = _xmouse; 
          obj._y = _ymouse; 
          obj.onEnterFrame = function() { 
                    this._x += 5; 
                    this._y += 5; 
                    this._rotation += 5; 
                    if (this._x>800 || this._y>600) { 
                              this.removeMovieClip(); 
                    } 
          }; 
          tiefe++;
};

Zwar funktioniert es genauso wie vorher, aber nun sind Änderungen leichter möglich und es ist weniger fehleranfällig als vorher. Angenommen, wir würden den Instanznamen ändern wollen, dann müssten lediglich zwei Zeilen geändert werden (Parameter bei attachMovie sowie die Definition von obj). Bei Skriptergänzungen muß nicht der komplette Instanznamen wiederholt werden, sondern es kann auf die kürzere Variable obj zugegriffen werden.

Interessanter wird die Bewegung der Objekte, wenn man ihnen jeweils eine zufällige Geschwindigkeit und eine zufällige Drehung zuweist – aber das soll Teil eines anderen Workshops sein.


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von mistajam
  • 01.05.2010 - 01:26

Gutes Tut :) Danke ...sehr geil :)

Portrait von sirslayalot
  • 30.04.2010 - 11:42

Vielen dank, habe ausschnitte für ein anderes Projekt benutzt.
Gut für Anfänger.

Portrait von qdance88
  • 01.09.2008 - 13:39

Klug und gut Strukturiert aufgebaut. Für mich als Laien sehr hilfreich

Portrait von waldi7388
  • 07.01.2008 - 10:14

Also ich finde das tuto echt gut! die ausführliche beschreibung hat mir geholfen zu verstehen was ich da überhaupt mache! einfach gut!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 30.05.2006 - 15:25

Ein echt gelungenes Tutorial, meinen Glückwunsch!
Sogar eine Anregung zum selbständig weiterlernen ist dabei.
Und mir hatte echt mal jemand gesagt, DuplicateMovieClip wäre meine Funktion für so etwas.

x
×
×