Anzeige
Tutorialbeschreibung

ein simpler Moustracker (Mausverfolger)

ein simpler Moustracker (Mausverfolger)

In diesem Tutorial zeige ich euch wie man ganz einfach einen Maustracker macht.

Das geht natürlich nur mit ActionScript...


Dokumenteigenschaften: Bps (Bilder pro Sekunde) = 30

In dem Sinne werden MovieClips auf der Position der Maus erstellt und animiert. Wenn die Animation von den einzelnen MovieClips zu Ende animiert sind werden sie von der Bühne gelöscht.

Und das geht folgendermaßen:

1. Erstellen sie mit dem Ellipsenwerkzeug einen Kreis. (Bild)

Bilder

 
2. Machen sie aus dem Kreis einen MovieClip, indem sie den Kreis anwählen oder anklicken und dann F8 drücken. (Bild)

Bilder

 
3. Gehen sie in den mc, indem sie zweimal auf in klicken.

4. Machen sie aus dem Kreis wieder ein mc mit F8.

5. Gehen sie in der Zeitleiste auf Bild 10 und drücken sie F6 um ein Schlüsselbild zu erstellen.

6. Machen sie das Gleiche in Bild 20 auch. (Bild)

Bilder

7. Jetzt wird der Kreis animiert:

Gehen sie in der Zeitleiste auf das erste Schlüsselbild (ein Bild vor dem zehnten Bild). Klicken sie auf den mc und machen sie ihn unter den Einstellungen ein bisschen kleiner. (Bild)

Bilder

Jetzt ist der mc nicht mehr ganz in der Mitte. Zentrieren sie ihn indem Sie auf folgendes klicken:
Bilder



Jetzt ändern sie unter Farbe noch den Alphawert von dem mc. (Bild)
Bilder



8. Machen sie das Gleiche in Bild 20 auch, also Größe verändern, zentrieren, Alpha ändern.

9. Streichen sie in der Zeitleiste alle Bilder an und Machen sie unter Einstellungen daraus ein Bewegungstween. (Bild)
Bilder


10. Gehen sie auf ein Bild vor dem 10.
      Gehen sie unter den Einstellungen bei Beschleunigung auf 100.

11. Gehen sie auf ein Bild nach dem 10.
      Gehen sie unter den Einstellungen bei Beschleunigung auf -100.

12.Erstellen sie eine neue Ebene. (Bild)
Bilder


13. Gehen sie in die zweite Ebene und erstellen sie im 20. Bild mit F6 ein Schlüsselbild.

14. Öffnen sie die Aktionen mit F9 und schreiben sie Folgendes rein:
          this.removeMovieClip();

Das bedeutet das der MovieClip entfernt wird wenn dieses Bild eintritt.

15. Gehen sie aus dem mc und entfernen sie ihn NUR von der Bühne , indem sie einmal auf sie klicken und Entfernen drücken.

16. Der mc muss in der Bibliothek noch enthalten sein.

17. Klicken sie mit der rechten Maustaste in der Bibliothek auf den mc und klicken sie auf Verknüpfung. (Bild)
Bilder


18. Die Verknüpfung für unseren mc soll particle heißen. Also schreiben wir es hier rein:
Bilder


19. Jetzt öffnen sie wieder das Akionsfenster mit F9 und schreiben folgendes rein:

counter = 0;
onMouseMove = function(){
        attachMovie("particle","p"+counter,counter);
        this["p"+counter]._x = _xmouse;
        this["p"+counter]._y = _ymouse;
        counter++;
}

counter = 0; ist eine Variable.
onMouseMove bedeutet wenn man die Maus bewegt.
attachMovie("particle","p"+counter,counter); das erstellt den mc und gibt ihm ein Instanzname und Tiefe, und da man nicht nur eine Tiefe haben will (weil sonst nur ein mc erstellt wird) brauchen wir die variable counter dessen wert im unteren verändert wird.
this["p"+counter]._x = _xmouse;
this["p"+counter]._y = _ymouse;
Damit bestimmt man die Position der einzelnen mc´s die ja immer an der Maus seien soll und deswegen _xmouse und _ymouse.

counter++; das verändert den wert von counter jedesmal um 1.

Das hier wär was für Fortgeschrittene, also muss man nicht unbedingt verstehen...

20. Jetzt können sie das Dokument testen:




21. um das jetzt noch ein bisschen schöner zu gestalten gehen wir wieder in den mc, indem wir in der Bibliothek zweimal au f ihn klicken, und dann eine kleine Änderung vornehmen:

Geht in die erste Ebene und schreibt folgendes ins Aktionsfenster:

_rotation = random(360);

also in welche Richtung der mc geht wird per Zufall dadurch bestimmt.

22. Gehen sie auf das 10. Bild und verschieben sie den mc ein bisschen nach rechts. (Bild)
Bilder


23. Gehen sie in der Zeitleiste auf Bild 20 und verändern sie die Position noch ein bisschen mehr nach rechts.


24. Testen sie das Dokument erneut:






Das wars auch schon wieder.
Man kann alle möglichen Animationen erstellen es sieht immer wieder anders aus 
Bilder


Ich hoffe das mit dem Actionscript hat jeder verstanden ;-)

DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von sommerfugl
  • 03.03.2011 - 02:59

Super Beschreibung hat alles sofort geklappt^

Portrait von gundleyG
  • 30.12.2010 - 19:03

... schade, dass das nicht mit AS3 geht...
sieht ja wirklich schick aus ;)

Portrait von waer
  • 12.01.2011 - 16:23

Man kann alles umschreiben, aber AS3 ist was komplizierter ;)

Portrait von Lord_of_Hate
  • 04.07.2010 - 16:02

cooles tut, leicht verständlich und nen netter gimmick

Portrait von D4v16
  • 28.05.2010 - 02:52

super tutorial toll beschrieben hat mir geholfen!

Portrait von Priscilla23
  • 21.10.2009 - 09:59

Verständlich beschrieben, schnell und einfach zu erstellen. Macht Lust auf weiteres experimentieren!

Portrait von robertbit
  • 21.09.2009 - 11:45

Für den Aktionscode ist keine eigene Ebene nötig. Außerdem reicht ein Schlüsselbild in Bild 20. Auch einen Bewegungstween und die Bechleunigung vor und nach dem Schlüüselbild muss nicht angegeben werden, da der Tween nach dem Löschen des mc von der Bühne nicht mehr aktiv ist.

Portrait von waer
  • 21.09.2009 - 13:38

Erstens, die Extraebene ist für mehr Übersicht Mr. Oberschlau, und 2tens ist die Beschleunigung um die Bewegung geschmeidiger aussehen zu lassen, das hat rein gar nichts mit aktiven mc's zu tun

Portrait von seppdomin
  • 08.09.2009 - 20:03

verständlich und es hilft mir :) thx

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 03.08.2009 - 15:23

super einfach und kurz erklärt.herzlichen dank dafür :)
macht spaß mit dem so eben angelernen wissen etwas zu expiremtieren :)

Portrait von brina123
  • 10.07.2009 - 21:44

sieht super aus und auch noch einfach zu verstehen! danke

Portrait von SaLue85
  • 15.06.2009 - 14:24

Super!! Habs sofort verstanden...danke!

Portrait von jedoit
  • 27.05.2009 - 19:58

vielen dank...super zu verstehen...*freu*

Portrait von PlayhaseDiJa
  • 21.04.2009 - 13:37

schaut klasse aus aber für anfänger ist es schwer..

Portrait von biggie83
  • 30.03.2009 - 17:04

super Tutorial, leicht zu verstehen!

Portrait von schmidalov
  • 09.03.2009 - 19:23

Vielen Dank! Tolles Tut!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 27.01.2009 - 01:55

Hey, fange grade erst mit Flash an und hab noch hier und da viele Schwierigkeiten vor mit, aber hätte nicht gedacht, das es so simpel ist derart coole Effekte zu erzielen. THX für´s tut!!

Portrait von S3rij
  • 14.10.2008 - 17:06

ich mag das tutorial :)..ist sehr gut erklärt :)

Portrait von F1reF0x
  • 29.09.2008 - 11:33

Tolles Script auch direkt hinbekommen dank dieses Tuts : D Stolz auf mich selbst ^^

Portrait von SparkXP
  • 22.09.2008 - 10:19

@pcmaster: Ich hab noch nie was mit Actionscript gemacht und habe es auf anhieb hinbekommen!

THX fürs Tutorial!

x
×
×