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
Download: - ZIP, ca. 14,4 MB
Ihre Meinung?
<< zurück | Galileo Design / <openbook> /Einstieg in ActionScript | vor >>
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler Aktuell zu Flash 8
Einstieg in ActionScript brosch., mit CD und QuickFinder und Referenz 416 S., 24,90 Euro Galileo Design ISBN 978-3-89842-774-6 |
| 15 Kollisionstest
|  | 15.1 Kollisionen abfangen
|  | 15.2 Aus Kollisionen wird eine Anwendung
## 15.2 Aus Kollisionen wird eine Anwendung 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. Hier klicken, um das Bild zu vergrößern 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. Hier klicken, um das Bild zu vergrößern 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;
Hier klicken, um das Bild zu vergrößern 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. Hier klicken, um das Bild zu vergrößern Hier klicken, um das Bild zu vergrößern 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);
    }
Hier klicken, um das Bild zu vergrößern 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. ### Ihr Kommentar Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück | <top> | vor >>
Zum Katalog
ActionScript 3 Das Praxisbuch bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| Adobe Flash CS3
| Flash fast forward
| Dreamweaver CS3
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 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.

[Galileo Design]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de