Anzeige
Tutorialbeschreibung

Flash Grundlagen Teil 5 - Actionscript Teil II

Flash Grundlagen Teil 5 - Actionscript Teil II

Hi Leute,

Hier gibts den 5. Teil meiner Grundlagen Tutorials.

Diesmal gehts wie in Teil 2 um Actionscript.


So, wir machen mal wieder AS womit man die Eigenschaften vom mc verändern kann.

Zuerst erstellen wir einen Stern.
Das geht folgendermaßen:
Drückt und haltet 2-3 Sekunden mit mit der linken Maustaste auf das Rechtecks-Werkzeug, und wählt Folgendes aus:
Bilder


Jetzt müssen wir noch kurz die Eigenschaften verändern damit es auch ein Stern wird, klickt dazu bei den Eigenschaften auf Optionen:
Bilder


Jetzt stellt ein das es ein Stern seien soll und er 32 Seiten hat. (Man kann natürlich auch weniger nehmen) (Bild)
Bilder


so jetzt zeichnet einen Stern, indem ihr auf der Bühne einmal mit der linken Maus klickt, haltet und bis zur gewünschten Stelle zieht. (Bild)
Bilder


So jetzt markiert den kompletten Stern und drückt F8, um ihn zu einen mc zu konvertieren.
Bilder


So.
Jetzt klickt ihr einmal auf den mc um ihn anzuwählen.
Unter den Eigenschaften geben wir ihm den Instanznamen mc. (Bild)
Bilder



Jetzt kommt endlich das ActionScript.
Klickt einmal auf das erste (und auch einzige) Bild in der Zeitleiste um das ActionScript auch wirklich nur auf dem Bild zu schreiben, deswegen haben wir dem mc ja auch den Instanznamen gegeben.
Also:
So einen Stern könnte man gut drehen, also machen wir das mal mit ActionScript.

mc._rotation

Das ist der Augenblickliche Rotationswert von unserem mc.
mc.  damit spricht man den mc an. (da er ja mc heißt müssen wir mc. schreiben, wenn ihr hans nimmt müsst ihr hans. schreiben)
wenn wir ihn veändern wollen schreiben wir einfach mc._rotation = 1;
Damit dreht sich der Kreis ein kleines Stück.
Aber er soll sich ja ständig drehen.
also mc._rotation += 1;
damit wird die _rotation (die ja auch einen Wert hat) miteinbezogen und immer wieder einen neuen Wert zugeteilt.
Das machen wir jetzt einfach mal wenn man die Maus bewegt:

onMouseMove = function(){
    mc._rotation += 1;
}

am besten ist es wenn ihr die Bildrate unter den Einstellungen noch auf 30 damit es flüssig läuft.

Wenn ihr es testet, müsste sich der mc immer wenn ihr die Maus ein Stück bewegt, drehen:


Zur Kontrolle siehts so in Flash aus:
Bilder


So jetzt arbeiten wir mal mit Variablen.

Zuerst müssen wir dafür zwei Buttons erstellen die die Variable verändern soll.
Klicken sie auf das Textwerkzeug und schreiben sie zwei Texte:  langsamer  und  schneller. (Bild)
Bilder


Jetzt machen sie aus beiden Texten jeweils einen mc, mit der Eigenschaft Schaltfläche. (Bild)
Bilder



Das sieht dann so aus:
Bilder


Also wie man schon sieht ist der erste Button langsamer, under der zweite schneller.

Klickt einmal auf das (immer noch) erste (und einzige) Bild in der Zeitleiste und schreibt vor dem Skript: speed = 1;
und damit können wir die 1 als Wert für die rotation auch wegmachen und ersetzen.

Also so:

speed = 1;
onMouseMove = function(){
    mc._rotation += speed;
}

Unsere Variable hier heißt speed, und sie hat den Wert 1.
Diesen Wert werden wir aber ändern wenn man auf den Button drückt.
Also klickt einmal auf den Button langsamer und schreibt Folgendes rein:
on(release){
    speed += -0.1;
}

Also wenn man draufdrückt verändern sich der Wert um -0.1.
und in dem Button schneller schreiben wir das gleiche rein nur halt ohne dem minus:
on(release){
    speed += 0.1;
}
jetzt siehts so aus:


Es ist aber besser wenn ihr das bewegen jetzt onEnterFrame macht, damit es sich ständig dreht:
das ganze skript sähe dann so aus:

speed = 1;
onEnterFrame = function(){
    mc._rotation += speed;
}

Dann würde es so aussehen:



Jetzt machen wir aus dem Stern einen Mausverfolger.

Dazu schreiben sie Folgendes AS in die onEnterFrame Aktionen:

    mc._x += (_xmouse - mc._x) * 0.02;
    mc._y += (_ymouse - mc._y) * 0.02;


Also so sieht das ganze Skript aus:

speed = 1;
onEnterFrame = function(){
    mc._rotation += speed;
    mc._x += (_xmouse - mc._x) * 0.05;
    mc._y += (_ymouse - mc._y) * 0.05;
}

Diese Art von Mausverfolger nennt man Easing.
Dabei verfolgt der mc die Maus immer langsamer je näher er sie gekommen ist.
In dem Skript wird der Wert der Maus (x und y) minus der Position vom mc genommen und mal 0.05 gerechnet.
Dadurch ergibt sich der Effekt
Dann würde es so aussehen:



So das wärs dann ;-)
Hoffe ihr habt alles verstanden.
Nächstes mal werde ich euch wahrscheinlich zeigen wie man richtig mit Variablen arbeitet.

WAER.

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.09.2010 - 14:30

Coolio *thumbs up* :D

Portrait von crusher_shorty
  • 30.06.2010 - 10:59

ich habe die Button noch nicht wirklich hinbekommen... er macht die nicht zu Button sondern zu einfachem Text obwohl ich die als Schaltfläche angegeben habe..

Hilfe wäre nett

Portrait von putzili2609
  • 16.12.2009 - 19:06

Wow, verdammt coole Sache, bin ja noch ein Anfänger, aber ich bin im wahrsten Sinne des Wortes geFLAHed ;o) !!!

Portrait von JuMee
  • 06.11.2009 - 15:09

Noch so ein tolles Spieldingsi, das muss ich doch gleich mal ausprobieren ^.^
Danke auch hierfür :)

Portrait von Dbspez
  • 20.09.2009 - 15:48

für blondinen gemacht der mausverfolger... finds aber witzig

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.08.2009 - 19:03

tolle sachen :) stundenlanger spielspaß xD

Portrait von waer
  • 13.08.2009 - 21:56

Krass xD, das freut mich :)

Portrait von paul_schmidt
  • 22.07.2009 - 01:56

Wie auch schon bei den vorangegangenen Tutorials: gut und kompetent erklärt.
Danke dafür
Paul

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.07.2009 - 16:15

und nocheinmal: klasse workshop!!!

Portrait von Camui
  • 25.05.2009 - 18:59

Supertoll erklärt. Hab auf den Stern (Hab nur Linien ohne Füllung gewählt) noch Filter angewendet. Sieht dann noch schöner aus. Hab noch keine Ahnung wo ich das neue wissen anwenden werde. Aber gut zu wissen ist es allemale

Portrait von Kavita
  • 25.03.2009 - 08:45

Ganau das brauchte ich. Vielen Dank!

Portrait von Morano
  • 17.03.2009 - 11:37

Gefällt offensichtlich nicht nur mir ;-) TOP

Portrait von suslik87
  • 09.02.2009 - 14:43

Auch gut verständlich!

Portrait von LRG
LRG
  • 05.02.2009 - 23:11

auch wieder sehr geil, bis jetzt alles verstanden, ist ein super workshop

Portrait von Glueckskatze
  • 31.01.2009 - 21:46

hurra, klappt, toll, danke!

Portrait von Nerevar25
  • 20.01.2009 - 16:35

Super erklärt, danke.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 19.01.2009 - 15:37

Super erklärt - FÜNF STERNE UND NOCH MEHR :D

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.10.2008 - 17:06

fett man echt gut gemacht :D

Portrait von p3rTa3d3T
  • 27.06.2008 - 13:57

Bei mir funktioniert das irgendwie nicht, die Buttons kann ich nicht anklicken, beim drüberfahren mit der Maus kommt der Textcurser, obwohl ich extra Schaltfläche ausgewählt habe! Wenn ich die Btns in Movieclips konvertiere hat es einmal funktioniert, keine Ahnung warum aber das krieg ich jetzt auch nicht mehr hin... argh

Portrait von waer
  • 04.07.2008 - 15:58

Ich kann dir so deinen Fehler nicht sagen! Du könntest mir per PM deine fla datei geben dann kann ich dir sagen was du falsch gemacht hast. LG

x
×
×