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 15 Kollisionstest
  Pfeil 15.1 Kollisionen abfangen
  Pfeil 15.2 Aus Kollisionen wird eine Anwendung


Rheinwerk Computing - Zum Seitenanfang

15.2 Aus Kollisionen wird eine Anwendung  topZur vorigen Überschrift

Nach viel Theorie und einigen kleinen Beispielen haben Sie etwas Abwechslung verdient. Was ist da besser geeignet als eine fantasievolle Anwendung. Die Ausgangsdatei finden Sie auf der CD-ROM unter dem Namen kollisionstest.fla für Flash 8, MX 2004 und Flash MX.

Abbildung 15.7 Ein Porträt, das sich nach Haaren sehnt

Der Flash-Film besteht aus einem Gemälde auf der linken Seite und drei Haarteilen mit passenden Bärten auf der rechten Seite.

Flash-technisch sind die Haare und Bärte MovieClips (schwarzeHaare_mc, brauneHaare_mc etc.); sie soll der Nutzer nun auf den Kopf beziehungsweise über den Mund des Porträtierten ziehen können.

Auf dem kahlen Heinz im Gemälde gibt es für Haare und Bart zwei rote Zonen (dropzone1_mc und dropzone2_mc); sie sind die MovieClips für die Kollisionsabfrage und Anfangs noch sichtbar. Wenn Haarteil und Bart in die Zonen gelangen, sollen sie exakt an der richtigen Stelle im Gesicht landen.

Abbildung 15.8 Der Aufbau des Kollisionsbeispiels

Die zwei letzten MovieClips im Gemälde sind die beiden Pupillen des abgebildeten Mannes; sie sollen den Bewegungen der Maus folgen. Soweit die Anforderungen, jetzt machen Sie sich an die Arbeit mit ActionScript.

Schritt für Schritt: Friseur per Kollisionstest

In dem Beispiel verwenden wir eine Mischung aus Ereignisprozeduren und Ereignissen in den Aktionen der MovieClips: Die Augenbewegungen realisieren Sie als Ereignisprozeduren, die Bewegung und Kollisionsabfrage der Haarteile landet in den Aktionen für die MovieClips, da sie dort etwas übersichtlicher aufgehoben sind.

Blenden Sie zuerst die beiden roten Bereiche aus. Der Code landet im ersten Schlüsselbild des Hauptfilms (auf der Ebene ActionScript), da das Ausblenden gleich beim Start geschehen soll.

this.dropzone1_mc._visible = false;
this.dropzone2_mc._visible = false;

Abbildung 15.9 Haare weg: Ohne Bart und Perücke wirkt unser Porträt noch kahler.

Als Nächstes speichern Sie die Koordinaten der Haarteile und Bärte in Variablen:

var xposHaareschwarz:Number = this.schwarzeHaare_mc._x;
var yposHaareschwarz:Number = this.schwarzeHaare_mc._y;
var xposHaarebraun:Number = this.brauneHaare_mc._x;
var yposHaarebraun:Number = this.brauneHaare_mc._y;
var xposHaaregrau:Number = this.graueHaare_mc._x;
var yposHaaregrau:Number = this.graueHaare_mc._y;
var xposBartschwarz:Number = this.schwarzerBart_mc._x;
var yposBartschwarz:Number = this.schwarzerBart_mc._y;
var xposBartbraun:Number = this.braunerBart_mc._x;
var yposBartbraun:Number = this.braunerBart_mc._y;
var xposBartgrau:Number = this.grauerBart_mc._x;
var yposBartgrau:Number = this.grauerBart_mc._y;

Sie benötigen diese Anfangswerte später, um die haarigen MovieClips jederzeit wieder an die Ursprungsposition zurücksetzen zu können.

Fügen Sie die folgende Ereignisprozedur ein:

this.onMouseMove = function() {
   this.linkePupille_mc._x = _xmouse / 100;
   this.linkePupille_mc._y = _ymouse / 20;
   this.rechtePupille_mc._x = _xmouse / 60;
   this.rechtePupille_mc._y = _ymouse / 20;
};

Wenn sich die Maus bewegt, ändert sich automatisch die Position der beiden Pupillen. Damit die Pupillen nicht über das gesamte Feld fliegen, teilen Sie die Koordinaten der Mausposition durch entsprechende Werte.

Abbildung 15.10 Die Augen folgen der Maus.

Nun verlassen Sie das erste Schlüsselbild und wechseln in die Aktion des schwarzen Haarteils rechts oben. Dort starten Sie Drag & Drop, wenn der Nutzer die Maustaste drückt:

on (press) {
   startDrag(this);
}

Abbildung 15.11 Das erste Haarteil ist per Drag & Drop ziehbar.

Jetzt fügen Sie für den MovieClip das Ereignis hinzu, wenn der Nutzer die Maustaste loslässt, und beenden damit Drag & Drop:

on (release, releaseOutside) {
   stopDrag();

Dies alleine reicht aber nicht, der nächste Schritt muss noch ausgeführt werden.

Prüfen Sie, ob der Nutzer die Maustaste über der roten Zone (MovieClip dropzone1_mc) für das Haarteil losgelassen hat:

if (this.hitTest(this._parent.dropzone1_mc)) {

Setzen Sie entsprechend die Koordinaten. Wenn der Nutzer das Haarteil über dem Bereich für die Haare losgelassen hat, positionieren Sie es dort (hier sind das die Koordinaten 0, 0):

this._x = 0;
this._y = 0;

Vergessen Sie nicht, die anderen Haarteile an ihre Ursprungsposition zu setzen, damit der arme Mann im Porträt nicht mehrere Perücken trägt.

this._parent.brauneHaare_mc._x = this._parent.xposHaarebraun;
this._parent.brauneHaare_mc._y = this._parent.yposHaarebraun;
this._parent.graueHaare_mc._x = this._parent.xposHaaregrau;
this._parent.graueHaare_mc._y = this._parent.yposHaaregrau;

War der Kollisionstest nicht erfolgreich, hat das Haarteil also den roten Bereich nicht erreicht, setzen Sie es wieder auf die ursprünglichen Koordinaten, so dass es auf der rechten Seite in seinem Kästchen landet:

} else {
      this._x = this._parent.xposHaareschwarz;
      this._y = this._parent.yposHaareschwarz;
   }
}

Vorsicht, die Variablen mit der ursprünglichen Position haben Sie im ersten Schlüsselbild des Hauptfilms angelegt. Nun befinden Sie sich aber in der Aktion des MovieClips, also in einer anderen Zeitleiste. Um die Variable korrekt zu adressieren, müssen Sie zurück zur Hauptzeitleiste (this._parent). Alternativ können Sie natürlich auch globale Variablen einsetzen (siehe Kapitel 4, »Grundlagen der Programmierung«).

Die Schritte 4 bis 7 wiederholen Sie nun für die übrigen zwei Haarteile. Im Code ändert sich lediglich, welche Haarteile jeweils zurückgesetzt werden.

Für die Bärte dienen ebenfalls die Schritte 4 bis 7 als Grundlage. Sie müssen hier allerdings den zweiten MovieClip für den Kollisionstest (dropzone2_mc) an Stelle des ersten verwenden.

Die fertige Datei auf der CD-ROM trägt den Namen kollisionstest_AS2.fla bzw. für Flash MX kollisionstest_AS1.fla. Für Interessierte haben wir in der Datei kollisionstest_handgeschrieben_AS2.fla bzw. kollisionstest_handgeschrieben_AS1.fla den braunen Haarschopf mit einer exakten Kollisionsabfrage versehen. Sie wird über kleine unsichtbare MovieClips realisiert.

 



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