ActionScript-Animation und Interaktion erstellen

ActionScript kann ein hervorragendes Werkzeug zur Verbesserung Ihrer Animationen sein. In diesem Lernprogramm werden die Grundlagen der ActionScript-Animation behandelt. Wir werden einen Blick darauf werfen, wie ein Movieclip mit ActionScript tatsächlich verschoben wird, verschiedene Formen der Kollisionserkennung und wie diese Techniken verwendet werden, um Ihren Flash-Filmen Interaktion hinzuzufügen. Lass uns anfangen!


Schritt 1 - Einrichten unserer Datei

Beginnen wir mit dem Erstellen eines neuen Flash-Films (ActionScript 3.0). Verwenden Sie das Eigenschaftenfenster, um die Abmessungen auf 600px x 350px bei einer Bildrate von 30fps festzulegen. Wir werden unseren Code in die Hauptzeitleiste schreiben, um die Dinge einfach zu halten. Wenn Sie bereits wissen, wie Sie Ihren Code in Klassen organisieren, sollte es nicht schwer sein, dieses Wissen auf dieses Lernprogramm anzuwenden.

Schritt 2 - Zeichnen unseres Hintergrunds

Bevor wir anfangen, unser ActionScript zu schreiben, benötigen wir einige Grafiken, um damit zu arbeiten. Wir werden sie ziemlich einfach halten, da wir uns heute hauptsächlich für ActionScript interessieren.

Beginnen Sie mit der Umbenennung unserer Ebene. Doppelklicken Sie auf den Layernamen und benennen Sie ihn in "Hintergrund" um..

Wir werden das Rechteckwerkzeug (r) verwenden, um ein Rechteck zu zeichnen. Mach dir keine Sorgen über die Größe oder Farbe.

Schritt 3 - Ändern der Hintergrundgröße

Doppelklicken Sie auf Ihr Rechteck, um die Füllung und den Rand auszuwählen. Öffnen Sie den Eigenschaftenbereich, um die Abmessungen Ihres Rechtecks ​​anzupassen.

Ändern Sie die Breite und Höhe auf die gleichen Werte wie die Breite und Höhe Ihrer Bühne, und stellen Sie sicher, dass die x- und y-Position auf 0 eingestellt sind. Jetzt entspricht unser Rechteck perfekt unserer Bühne.

Schritt 4 - Anpassen unserer Hintergrundfarbe

Wählen Sie die Füllfarbe des Rechtecks ​​aus, indem Sie einmal darauf klicken. Wir werden es etwas interessanter machen, indem wir einen Farbverlauf hinzufügen.

Öffnen Sie bei ausgewähltem Rechteck das Farbfeld und ändern Sie die Füllfarbe von "fest" auf "radial". Die Füllung des Rechtecks ​​wurde jetzt in einen radialen Verlauf geändert. Sie können die Farben des Verlaufs ändern, indem Sie auf die kleinen Farbfelder in der Verlaufsleiste im Farbbereich klicken. Doppelklicken Sie auf das linke Farbfeld, um es blau zu ändern. Machen Sie dasselbe für das rechte Farbfeld, um es in ein ähnliches, aber dunkleres Blau zu ändern.

Um den Verlauf ein wenig subtiler zu gestalten, passen wir den Verlauf mit dem Verlaufstransformationstool leicht an. Wählen Sie das Farbverlaufstransformations-Werkzeug (f) aus und klicken Sie auf den Farbverlauf, um ihn auszuwählen.

Das Verlaufstransformationstool zeigt mehrere Ziehpunkte. Eine in der Mitte zum Bewegen des gesamten Farbverlaufs und drei am Rand. Eine zum Drehen des Gradienten, eine zum Skalieren des Gradienten und eine zum Komprimieren des Gradienten.

Drehen Sie zuerst den Farbverlauf so, dass seine Achse senkrecht steht. Komprimieren Sie dann den Farbverlauf in ein Oval, damit er der Form unseres Rechtecks ​​besser entspricht.

Zum Abschluss skalieren Sie den Farbverlauf so lange, bis nur die Ecken unseres Rechtecks ​​dunkler als die Mitte erscheinen (dieser Schritt ist einfacher, wenn Sie von der Bühne etwas herauszoomen). Sie sollten am Ende etwas Ähnliches wie das Bild unten finden:

Schritt 5 - Der Ball

Die nächste Grafik, die wir brauchen, ist der Movie-Clip, den wir animieren werden. Wir werden einen Kreis benutzen.

Erstellen Sie eine neue Ebene für den Movieclip und zeichnen Sie einen Kreis. Wählen Sie den Kreis aus und drücken Sie F8, um das Menü "In Symbol konvertieren" aufzurufen.

Benennen Sie den Movieclip "ball_mc", stellen Sie sicher, dass der Registrierungspunkt auf die Mitte eingestellt ist und das Kontrollkästchen "Export für ActionScript" markiert ist.

Wenn Sie auf OK klicken, zeigt Flash die unten abgebildete Warnung an. Dies ist kein Problem. Flash sucht nach einer benutzerdefinierten Klasse mit dem Namen "ball_mc". Da wir jedoch keine solche Klasse geschrieben haben, kann Flash sie nicht finden und warnt uns, dass beim Export unserer Datei automatisch eine generiert wird. Dies ist in Ordnung, wir haben nur das Kontrollkästchen "Export für ActionScript" markiert, damit wir unseren Movieclip dynamisch mit ActionScript platzieren können.

Löschen Sie den Movieclip von der Bühne, wir werden ihn später mit ActionScript platzieren.

Schritt 6 - Platzieren eines Movieclips mit ActionScript

Endlich Zeit zum Schreiben von Code! Wir werden in mehreren Schritten auf unser Endergebnis hinarbeiten, um einige grundlegende Konzepte zu erläutern. Wir werden immer wieder ein paar Zeilen hinzufügen, bis wir das Endergebnis erreichen.

Beginnen wir mit der Verwendung von ActionScript, um einen Movieclip aus unserer Bibliothek zu nehmen und auf der Bühne abzulegen.

Wenn Sie sich den Code unten ansehen, werden Sie drei separate Schritte feststellen. Wir erstellen eine Variable mit dem Namen "Ball", um einen Verweis auf die neu erstellte Instanz unseres Movieclips zu enthalten. Als Nächstes verwenden wir die Methode "addChild", um unseren Ball zur Anzeigeliste hinzuzufügen. Wenn Sie den letzten Schritt vergessen, erstellen Sie eine Instanz des ball_mc-Movieclips, die Sie jedoch nicht sehen können.

 var ball: MovieClip; ball = new ball_mc (); addChild (Ball);

Wenn wir den Flash-Film jetzt exportieren, sehen wir, dass der Ball in der oberen linken Ecke des Flash-Films platziert wurde. Wir haben keine Position angegeben, also an der Standardposition x, y von 0, 0.

Schritt 7 - Movieclip-Eigenschaften

Die obere linke Ecke des Bildschirms ist eine ziemlich dumme Position für unseren Ball. Wir können nur ein Viertel des Movieclips sehen! Glücklicherweise hat ein Movieclip eine Reihe von Eigenschaften, die wir ändern können.

Die Eigenschaften, die wir jetzt ändern möchten, sind die x- und y-Position des Movieclips. Sehen Sie sich das Codebeispiel unten an, um zu sehen, wie wir die Positionierung unseres Movieclips steuern können:

(Zusätzliche Zeilen: 5,6)

 var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150;

Wenn Sie jetzt Ihren Film exportieren, sehen Sie, dass sich der Movie Clip nicht mehr in der oberen linken Ecke des Bildschirms befindet, sondern an den von Ihnen angegebenen XY-Koordinaten. Movieclips haben viele andere interessante Eigenschaften, die Sie einstellen können. Sie können die Hilfedateien auf eine Liste dieser Eigenschaften überprüfen.

Durch wiederholtes Ändern der x- und y-Eigenschaften des Movieclips über einen bestimmten Zeitraum können wir den Film bewegen! Lassen Sie uns einen Blick darauf werfen, wie das geht.

Schritt 8 - Bewegen unseres Videoclips

Um unseren MovieClip zu verschieben, richten wir einen "eventListener" ein, der bei jedem Auslösen des "ENTER_FRAME" -Ereignisses eine Funktion ausführt. In unserem Fall ungefähr 30 Mal pro Sekunde.

Jedes Mal, wenn das Ereignis "ENTER_FRAME" ausgelöst wird, führt unser "eventListener" unsere Mover-Funktion aus, die 3 von den x- und y-Eigenschaften des MovieClips subtrahiert, wodurch er verschoben wird.

(Zusätzliche Zeilen: 8-13)

 var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, Mover); Funktionsverschiebung (e: Event): void ball.x - = 3; ball.y - = 3; 

Wenn Sie den Film jetzt exportieren, sehen Sie, dass sich der Videoclip mit kontinuierlicher Geschwindigkeit zum Rand des Flash-Films hin bewegt. Da wir nichts tun, um es zu stoppen oder seine Richtung zu ändern, bewegt es sich unbegrenzt in diese Richtung. Ich würde sagen, es ist an der Zeit, ein paar Grenzen hinzuzufügen.

Schritt 9 - Unsere Grenzen finden

Wenn wir verhindern möchten, dass sich der Videoclip bewegt, bis er verschwindet, müssen wir einige Grenzen festlegen. Die Ränder unseres Flash-Films scheinen perfekt für den Job zu sein. Lassen Sie uns einige Variablen für unsere Grenzen einrichten.

Wir wissen bereits, dass die y-Position der Bühne oben 0 ist, und die x-Position der rechten Seite unserer Bühne ist ebenfalls 0. Die Variablen für diese Grenzen sind daher einfach festzulegen. Wir wissen, dass unsere Bühne 600 Pixel breit ist, aber anstatt nur die rechte Grenze auf 600 Pixel festzulegen, verwenden wir ActionScript, um zu bestimmen, wie breit unsere Bühne ist. Die untere Begrenzung legen Sie auf dieselbe Weise fest, indem Sie die Höhe der Bühne mit ActionScript abfragen.

(Zusätzliche Zeilen: 1-4)

 var top: Anzahl = 0; var rechts: Anzahl = stage.stageWidth; var bottom: Anzahl = stage.stageHeight; var left: Anzahl = 0; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, Mover); Funktionsverschiebung (e: Event): void ball.x - = 3; ball.y- = 3; 

Im Moment benutzen wir die Ränder unserer Bühne als Grenzen. In Ihren eigenen Projekten können Sie Ihre Grenzen möglicherweise anders festlegen. Sie können beispielsweise einen neuen Rechteck-Movieclip erstellen und anhand der X-, Y-Position, Breite und Höhe Ihre Grenzen berechnen.

Schritt 10 - Kollisionserkennung

Wir haben unsere Grenzen bestimmt und diese Informationen in vier Variablen gespeichert. Allerdings wissen wir noch nicht, was mit diesen Informationen geschehen soll.

Da unser Movieclip perfekt rund ist, können wir leicht feststellen, wann er eine Grenze überschreitet. Wenn zum Beispiel die x-Position (der Mittelpunkt) plus die halbe Breite der x-Position der rechten Grenze entspricht oder diese überschreitet, wissen wir, dass sie diese Grenze überschreitet und wir sollten sie umdrehen.

Zu diesem Zweck speichern wir die Modifizierer in ihren x- und y-Eigenschaften in einer Reihe von Variablen, damit wir sie leicht ändern können. Wir fügen der Mover-Funktion außerdem eine Reihe von "if" -Anweisungen hinzu, um auf Randkollisionen zu prüfen.

(Zusätzliche Zeilen: 6,7 + 20-36)

 var top: Anzahl = 0; var rechts: Anzahl = stage.stageWidth; var bottom: Anzahl = stage.stageHeight; var left: Anzahl = 0; var vx: Anzahl = 3; var vy: Anzahl = 3; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, Mover); Funktionsverschiebung (e: Event): void ball.x- = vx; ball.y- = vy; if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Wenn Sie den Flash-Film jetzt exportieren, werden Sie feststellen, dass die Mover-Funktion kontinuierlich überprüft, ob der Ball mit einer der von uns festgelegten Grenzen kollidiert. Wenn eine Kollision auftritt, wird der Ball leicht verschoben, um sicherzustellen, dass er innerhalb der von uns festgelegten Grenzen bleibt und seine Richtung umgekehrt wird:

Schritt 11 - Reibung

Obwohl wir einige Grenzen gesetzt haben, um sicherzustellen, dass der Ball nicht von der Bühne fliegt, bleibt der Ball immer in Bewegung.

Wenn Sie ein Objekt von Ihrem Schreibtisch nehmen, zum Beispiel Ihre Computermaus, und einen Anstoß geben, wird es ziemlich schnell aufhören, sich zu bewegen, nachdem Sie aufgehört haben, Kraft anzuwenden. Reibung zwischen Ihrem Schreibtisch und Ihrer Maus verringert die Geschwindigkeit, bis Ihre Maus wieder stationär ist. Wir können diesen Effekt in ActionScript ziemlich leicht nachahmen.

Wir erstellen eine neue Variable mit dem Namen "Reibung" und weisen ihr einen Wert etwas unter 1 zu. Ein Wert von 0,98 funktioniert ziemlich gut. Jedes Mal, wenn wir die Mover-Funktion ausführen, multiplizieren wir unsere Variablen vx und vy mit unserer Reibungsvariablen und verringern sie geringfügig.

(Zusätzliche Zeilen: 8 + 21,22)

 var top: Anzahl = 0; var rechts: Anzahl = stage.stageWidth; var bottom: Anzahl = stage.stageHeight; var left: Anzahl = 0; var vx: Anzahl = 3; var vy: Anzahl = 3; Varreibung: Anzahl = 0,98; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; addEventListener (Event.ENTER_FRAME, Mover); Funktionsverschiebung (e: Event): void vx * = Reibung; vy * = Reibung; ball.x- = vx; ball.y- = vy; if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Wenn Sie die Datei jetzt exportieren, werden Sie feststellen, dass die Reibung die Geschwindigkeit unseres Balls schnell verringert, bis er zum Stillstand kommt. Reibung hilft, Ihre Animation "realer" zu machen. Super Mario zum Beispiel kommt nicht sofort zum Stillstand, wenn Sie die Steuerung loslassen. Stattdessen rutscht er einen Moment weiter, bis die Reibung ihn zum Stillstand bringt.

Reibung ist nur eine der Möglichkeiten, wie Sie Ihre Animation beeinflussen können, indem Sie die X- und Y-Geschwindigkeit Ihres Objekts mit einem Modifikator versehen. Sie können die Schwerkraft simulieren, indem Sie zur y-Geschwindigkeit oder zum Wind hinzuaddieren oder die x- und y-Geschwindigkeit in Abhängigkeit von Ihrer gewünschten Windrichtung addieren oder von ihr abziehen.

Schritt 12 - Der Pfeil

Nun, da wir gesehen haben, wie ein Movieclip mit ActionScript platziert und verschoben wird, ist es Zeit für eine Interaktion.

Zeichnen Sie einen Pfeil mit einer Kombination der Rechteck-, Transformations- und Linienwerkzeuge:

Schritt 13 - Einrichten des Arrow Movie Clips

Wir werden aus dem Pfeil einen Movie Clip mit etwas anderen Einstellungen als unseren Ball Movie Clip machen.

Wählen Sie den Pfeil aus, drücken Sie die Taste F8, um das Fenster "In Symbol konvertieren" aufzurufen, und nennen Sie den Pfeil Movie Clip "arrow_mc". Stellen Sie sicher, dass das Kontrollkästchen "Export für ActionScript" wie zuvor markiert ist, setzen Sie jedoch den Registrierungspunkt wie in der Abbildung links auf die mittlere linke Position.

Ein Movie Clip dreht sich um seinen Registrierungspunkt und wir möchten sicherstellen, dass sich unser Pfeil um seine Spitze dreht.

Löschen Sie den Pfeil-Movieclip von der Bühne. Wir platzieren ihn mit ActionScript, genau wie der Ball.

Schritt 14 - Platzieren und Bewegen des Pfeils

Wir platzieren den Pfeil auf die Bühne auf dieselbe Weise wie unser Ball Movie Clip. Wir nennen es Zeiger.

Da wir nur sicherstellen möchten, dass sich unser Zeiger immer an derselben Position wie der Mauszeiger befindet, benötigen wir nur zwei Codezeilen. Bei jeder Ausführung unserer Mover-Funktion aktualisieren wir die x, y-Position unseres Zeigers auf die x, y-Position unseres Mauscursors.

(Zusätzliche Zeilen: 11-15 + 21,22)

 Varreibung: Anzahl = 0,98; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; var pointer: MovieClip = new arrow_mc (); addChild (Zeiger); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, Mover); Funktions-Mover (e: Event): void pointer.x = mouseX; pointer.y = mouseY; vx * = Reibung; vy * = Reibung; ball.x- = vx; ball.y- = vy; if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Schritt 15 - Mauszeiger ausblenden

Lassen Sie uns unseren normalen Mauszeiger ausblenden, so dass wir unseren Zeiger-Movieclip nur sehen können, wenn Sie mit unserem Flash-Film interagieren.

(Zusätzliche Zeile: 15)

 Varreibung: Anzahl = 0,98; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; var pointer: MovieClip = new arrow_mc (); addChild (Zeiger); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, Mover); Funktions-Mover (e: Event): void pointer.x = mouseX; pointer.y = mouseY; vx * = Reibung; vy * = Reibung; ball.x- = vx; ball.y- = vy; if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Schritt 16 - Finden des Winkels zwischen dem Zeiger und dem Ball

Wir haben jetzt einen Zeiger, der der Maus folgt, also stellen wir sicher, dass er tatsächlich auf unseren Ball zeigt. Dazu müssen wir den Winkel zwischen dem Zeiger und der Kugel ermitteln.

Wir können die Trigonometrie verwenden, um den erforderlichen Winkel zu berechnen, aber zuerst müssen wir den Abstand zwischen dem Zeiger und der Kugel entlang der X- und Y-Achse ermitteln. Leicht genug, wenn man bedenkt, dass wir beide Positionen kennen. Sehen wir uns zuerst an, wie man es berechnet, und dann fügen wir es in unseren Code ein.

 dx = mouseX - ball.x; dy = mouseY - ball.y;

Nun, da wir die erforderlichen Abstände haben, können wir den Winkel im Bogenmaß berechnen. Radiant ist die Standardeinheit der Winkelmessung in der Mathematik. Ein perfekter Kreis ist 360 Grad oder PI * 2 Radiant.

 dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx);

Radiant ist zwar die Standardmaßeinheit für Winkel in Math. Wenn Sie die Rotationseigenschaft unseres Movieclips festlegen möchten, müssen Sie den Winkel stattdessen in Grad umrechnen.

Schritt 17 - Radiant in Grad umrechnen

Das Konvertieren von Radiant in Grad oder umgekehrt ist ziemlich einfach. In ActionScript würde es so aussehen:

Grad = Radiant * 180 / Math.PI;

Bogenmaß = Grad * Math.PI / 180;

Schritt 18 - Alles zusammenstellen

Da wir den Zeiger jedes Mal drehen müssen, wenn sich der Ball oder die Maus bewegt, platzieren wir den Rotationscode in unserer Bewegungsfunktion.

(Zusätzliche Zeilen: 27-29 + 34-38)

 var top: Anzahl = 0; var rechts: Anzahl = stage.stageWidth; var bottom: Anzahl = stage.stageHeight; var left: Anzahl = 0; var vx: Anzahl = 3; var vy: Anzahl = 3; Varreibung: Anzahl = 0,98; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; var pointer: MovieClip = new arrow_mc (); addChild (Zeiger); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, Mover); Funktions-Mover (e: Event): void var dx: Number; var dy: Anzahl; var ar: Number pointer.x = mouseX; pointer.y = mouseY; dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx); var a: Number = ar * 180 / Math.PI; pointer.rotation = a; vx * = Reibung; vy * = Reibung; ball.x- = vx; ball.y- = vy; if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Schritt 19 - Den Ball stoßen

Okay, wir haben unseren Ball bewegt, wir haben unseren Zeiger bewegt, wir haben sogar den Zeiger auf den Ball gezeigt. Ich denke, es ist an der Zeit, dass etwas passiert, wenn wir den Ball berühren.

Wir haben uns bereits die entfernungsbasierte Kollisionserkennung angeschaut. Wenn der Abstand zwischen dem Mittelpunkt unseres Balls und einer Grenze weniger als die Hälfte der Breite des Balls beträgt, wissen wir, dass eine Kollision auftritt. Dies funktioniert sehr gut für perfekte Kreise, da sich der Abstand zwischen ihrem Mittelpunkt und ihrem Umfang niemals ändert. Dies funktioniert jedoch nicht so gut für unregelmäßige Formen.

Schauen wir uns eine andere Methode der Kollisionserkennung an, diesmal verwenden wir die hitTest-Methode. HitTest ist eine Standard-ActionScript-Funktion, die in zwei Ausführungen erhältlich ist. Das erste "hitTestObject" prüft, ob zwei Objekte kollidieren, indem sie prüft, ob ihre Begrenzungskästchen (diese dünnen blauen Rechtecke, die Sie bei der Auswahl von Movieclips sehen) überlappen.

Diese Methode funktioniert perfekt für rechteckige MovieClips. Da der Begrenzungsrahmen jedoch immer rechteckig ist, ist er bei unregelmäßigen Formen oder Ovalen nicht sehr genau.

Die zweite Methode prüft eine Punktposition (x, y) gegen eine Form. Viel genauer für unregelmäßige Formen, auch wenn es nicht einfach ist, eine unregelmäßige Form mit einer anderen zu vergleichen. Es ist perfekt für uns, wir haben jedoch keine rechteckige Form (unseren Ball) und einen Punkt (die Pfeilspitze), die wir miteinander überprüfen wollen. Deshalb führen wir die "hitTestPoint ()" -Methode in unserer Mover-Funktion aus, während wir unseren Ball-Movieclip und die x, y-Position unseres Pfeils als Eingabe angeben. Die Methode gibt einen booleschen Wert (wahr oder falsch) zurück, je nachdem, ob eine Kollision auftritt oder nicht.

(Zusätzliche Zeilen: 45-47)

 var top: Anzahl = 0; var rechts: Anzahl = stage.stageWidth; var bottom: Anzahl = stage.stageHeight; var left: Anzahl = 0; var vx: Anzahl = 3; var vy: Anzahl = 3; Varreibung: Anzahl = 0,98; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; var pointer: MovieClip = new arrow_mc (); addChild (Zeiger); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, Mover); Funktions-Mover (e: Event): void var dx: Number; var dy: Anzahl; var ar: Number pointer.x = mouseX; pointer.y = mouseY; dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx); var a: Number = ar * 180 / Math.PI; pointer.rotation = a; vx * = Reibung; vy * = Reibung; ball.x- = vx; ball.y- = vy; if (ball.hitTestPoint (pointer.x, pointer.y, true)) trace ('poke');  if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Wenn wir unseren Flash-Film jetzt ausführen, werden wir sehen, sobald der Pfeil den Ball berührt, beginnt der Flash-Film "Poke" im Ausgabefenster.

Schritt 20 - Den Ball mit dem Zeiger bewegen

Wir kennen bereits den Winkel zwischen dem Ball und dem Zeiger und wissen bereits, wann der Zeiger den Ball stößt. Es ist daher ein ziemlich kleiner Schritt, um den Ball direkt vom Zeiger wegzuschieben.

Erinnern Sie sich an die Variablen vx und vy, mit denen wir die Geschwindigkeit für unseren Ball einstellen? Mit Sinus und Cosinus können wir diese beiden Variablen in einen Wert ändern, der dazu führt, dass der Ball vom Zeiger weg in die von Ihnen gestoßene Richtung fliegt. Wir nehmen den Cosinus des Winkels und multiplizieren ihn mit einer Zahl, um die Geschwindigkeit entlang der x-Achse einzustellen. Wir machen dasselbe mit dem Sinus des Winkels, um eine Geschwindigkeit entlang der y-Achse einzustellen. Je höher die Zahl, die Sie verwenden, um das Cosinus- oder Sinus-Ergebnis zu multiplizieren, desto schneller wird der Ball gehen.

(Zusätzliche Zeilen: 47,48)

 var top: Anzahl = 0; var rechts: Anzahl = stage.stageWidth; var bottom: Anzahl = stage.stageHeight; var left: Anzahl = 0; var vx: Anzahl = 3; var vy: Anzahl = 3; Varreibung: Anzahl = 0,98; var ball: MovieClip; ball = new ball_mc (); addChild (Ball); Kugel x = 325; ball.y = 150; var pointer: MovieClip = new arrow_mc (); addChild (Zeiger); pointer.x = mouseX; pointer.y = mouseY; Mouse.hide (); addEventListener (Event.ENTER_FRAME, Mover); Funktions-Mover (e: Event): void var dx: Number; var dy: Anzahl; var ar: Number pointer.x = mouseX; pointer.y = mouseY; dx = mouseX - ball.x; dy = mouseY - ball.y; ar = Math.atan2 (dy, dx); var a: Number = ar * 180 / Math.PI; pointer.rotation = a; vx * = Reibung; vy * = Reibung; ball.x- = vx; ball.y- = vy; if (ball.hitTestPoint (pointer.x, pointer.y, true)) vx = Math.cos (ar) * 10; vy = Math.sin (ar) * 10;  if (ball.x rechte Kugel.breite / 2) Kugel.x = rechte Kugel.Weite / 2; vx * = -1;  wenn (ball.y Bottom - Ball.Höhe / 2) Ball.y = Bottom Ball.Höhe / 2; vy * = -1; 

Fazit

Dies sind nur die Grundlagen der ActionScript-Animation, aber ich hoffe, Sie haben Ihnen einige Ideen gegeben, wie Sie dieses Wissen in Ihren eigenen Projekten anwenden können. Durch die Erweiterung dieser Techniken können Sie viele interessante und nützliche Effekte für Ihre Flash-Projekte erstellen. Danke fürs Lesen!