Anzeige
Tutorialbeschreibung

Flash Grundlagen Teil 2

Flash Grundlagen Teil 2

Das hier ist der 2.te Teil von meiner (kleinen) Serie Flash Grundlagen Tutorials.

Diesmal fangen wir auch ein bisschen mit Actionscript an, wird aber nicht schwer... ;-)


Also,

Wir fangen wieder ganz leicht an,

Wie schon im ersten Tutorial zeichnen wir einen Kreis, also wieder mit dem Ellipsenwerkzeug einen Kreis zeichen usw...
Dann machen sie daraus einen mc, indem sie ihn anwählen und F8.

======
EDIT:

Bei diesem Schritt habe ich vergessen eine kleine wichtige Sache zu erklären. Dank des neuen Tools werd ich hoffentlich nicht öfter danach gefragt ;)

Also wenn ihr den mc erstellt kann man die Registrierung einstellen, ich hab diese in der Mitte damit der Mittelpunkt des mc´s auch wirklich in der Mitte ist.
So siehts aus:
Bilder

======




Jetzt wollen wir die Größe von dem Kreis oder auch mc verändern. Aber nicht durch Bewegungstweens, sondern durch Actionscript auch AS genannt.

Es gibt jetzt zwei Möglichkeiten wo wir das AS reinschreiben.

Entweder in die Hauptzeitleiste, oder in den mc. Wenn sie das AS in die Hauptzeitleiste schreiben müssen sie jeden mc den sie eine Funktion oder Eigenschaft über AS geben wollen benennen, also einen Instanznamen geben, weil man ja sonst nicht weiß was sie ansprechen wollen.

Also wenn sie das AS in den mc schreiben ist das praktischer wenn mehrere mc´s die gleiche aussehen die gleiche Funktion haben sollen...
Genug geredet,

Klicken sie einmal auf den mc und gehen sie unter den Eigenschaften auf Instanzname und benennen sie ihn mc. (Bild)
Bilder


Und jetzt fehlt nur noch das ActionScript und wir wären fertig...

Also, öffnen sie das AktionsFenster mit F9.

So wir wollen jetzt einfach mal das der Kreis seine Größe ändert.

und wir wollen natürlich das das immer passiert. Also immer wenn man die Maus bewegt verändert sich die Größe, je nachdem wo man die Maus hinbewegt.

Also, die Funktion das eine Funktion aufgerufen wird wenn man die Maus bewegt, lautet:  onMouseMove
Damit ist es aber nicht getan.

Wir wollen ja auch das etwas passiert wenn wir die Maus bewegen.

Wir müssen schreiben mc._width = _xmouse;

mc._width bedeutet das die Breite vom mc abgefragt wird.

_xmouse ist einfach der horizontale Wert. (Werte sind übrigens immer Zahlenwerte).

In einem normalen Dokument mit der Maße  von 550x400 ist ganz links der X-wert von der Maus 0

und ganz rechts liegt er bei 550

das gleiche mit dem Y-wert

Also um das mal ein bisschen abzukürzen:


onMouseMove = function(){
    mc._width = _xmouse;
    mc._height = _ymouse;
}

Der mc ist jetzt immer genauso groß wie der x und y Wert der Maus.
Also ist z.B.die maus auf position 304x210 ist der mc 304x210 groß
So siehts aus:


ich habe hier an dem Skript noch updateAfterEvent();   hinzugefügt
Dadurch bewegt sich alles flüssiger als wenn man die Bildrate höher stellen würde ;-)

Jetzt verändern wir mal einen anderen Wert und zwar den Alphawert.
Also wieder onMouseMove = function(){
und jetzt kommt die Eigenschaft der Alpha.
das ist _alpha
und der Wert geht von 0 bis 100.
Jetzt haben wir ein kleines Problem.
Wenn wir schreiben würden.

onMouseMove = function(){
    mc._alpha = _xmouse;
}

würde der mc nur von 0 bis 100px die Alpha verändern.
und wir wollen ja das der mc von 0 bis 550 px sich verändert.
Deswegen müssen wir einfach den Wert der _xmouse teilen.
Wir teilen einfach durch 5,5 und haben erst bei 550 px die alpha auf 100.
So sieht es jetzt aus:

auch hier habe ich wieder updateAfterEvent(); hinzugefügt.


und jetzt können wir auch einen einfachen Mausverfolger machen:
wir verändern die Position von dem mc einfach.
mc._x
mc._y
das ist die aktuelle Position.
und die wird natürlich wieder von der Maus verändert also so:

onMouseMove = function(){
    mc._x = _xmouse;
    mc._y = _ymouse;
    updateAfterEvent();  //muss man nicht unbedingt schreiben ist nur optional.
}

so sieht es jetzt aus:


Jetzt können wir ja mal zwei Sachen verbinden.
Den Mausverfolger und die Alpha.

Also ganz einfach den Skript kombinieren:

onMouseMove = function(){
    mc._x = _xmouse;
    mc._y = _ymouse;
    mc._alpha = _xmouse/5,5;
}

Also alles was passieren soll wenn man die Maus bewegt schreibt ihr einfach da rein.
So sieht es jetzt  aus:


Hoffentlich konnte man das verstehen.
Hier noch ein Beispiel das zeigt wo die Maus welchen Wert hat:


War diesmal vielleicht nen bisschen zuviel Text, aber ich hoffe man konnte verstehen was ich meine...
Im nächsten Teil werde ich wohl wieder mehr ohne AS machen,
Je nachdem wie ihrs findet,
Also sagt bitte eure Meinung ;-)

WAER

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von mewcrazy
  • 09.03.2011 - 23:13

Danke, hoffen wir mal das es mich bei meinen Aufgaben weiterbringt :)

Portrait von mmruf
  • 09.02.2011 - 18:04

Super zum einsteigen! Danke

Portrait von mort81
  • 17.01.2011 - 21:19

Funktioniert super.

Das einzige was man wissen muss ist, dass der ActionScript Code in die Zeitleiste geschrieben werden muss (siehe Kommentar von Illuminatie).
Einfach in den grauen Bereich in der Zeitleiste klicken, so dass 'Ebene 1' blau hinterlegt wird, dann F9 und Code reinhacken.
Zum ausführen des Skripts wie bereits aus dem Grundlagen Tutorial 1 bekannt Strg + Enter.

Danke.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.09.2010 - 10:57

Ich find deine Tutorials sehr verständlich :) Ist ein guter Einstieg.

Portrait von jr3012
  • 04.08.2010 - 13:39

super, sehr gut erklärt...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.07.2010 - 10:03

Ganz gutes Tutorial, jedoch scheiterte ich erst damit das man ja in die Zeitleiste klicken muss, und nicht dem mc den Quellcode reinschreibt...
Das hätte genauer erwähnt werden können,
jedoch... sobald man es wusste !top!

Portrait von crusher_shorty
  • 29.06.2010 - 13:06

Perfekte Anleitung für jeden Einsteiger. Nicht zu kompliziert und trotzdem voll auf den Punkt. Die kleinen Erklärungen für das AS fand ich gut, bitte weiter so ;)

Portrait von frances16303
  • 23.05.2010 - 23:28

schöne Anleitung, sehr verständlich. Fand auch nicht das es zuviel Text war. Und ich habe etwas schönes dazu gelernt.
Danke !!!

Portrait von Christopha
  • 01.05.2010 - 11:27

Endlich mal eine Anleitung die wirklich verständlich ist. Danke

Portrait von jaggo
  • 10.04.2010 - 05:10

sehr gut gemacht! wenn ich es nur halb so gut könnte..dann wäre ich schon zufrieden!!

lg julchen

Portrait von Cokxxie
  • 01.04.2010 - 10:08

Gut gemacht. Jeodch schlecht für Flash CS 4 benutzer. Musste erstmal auf einigen anderen Seiten stöbern, bis ich den richtigen Ansatz gefunden habe. An der Stelle wo man den Instanzname setzt und dann das Aktionsfester öffnen soll, stand bei mir nämlich immer "An die aktuelle Auswahl können keine Aktionen angefügt sein." und als ich den mc nochmal auswählte, konnte ich merkwürdiger weise Die Codeschnipsel dort hinein schreiben jedoch gab es einen Compiler-Fehler: "Anweisung muss innerhalb einer on/onClipEvent-Prozedur vorliegen". Jetzt habe ich die Aktion einfach in der Zeitlinie auf das erste Bild gesetzt

Portrait von waer
  • 02.04.2010 - 23:09

Diesen Fehler habe ich hier schon sehr oft gelesen, ein bisschen durch die Kommentare gucken und schon hast du die Lösung aber auch gut wenn du es von alleine gelöst hast :)

Portrait von kimtsch
  • 25.03.2010 - 13:32

Super für Einsteiger, selbst für Programmier-Neulinge. Sehr Hilfreich. Danke dafür

Portrait von Beware_Of_Monster
  • 18.03.2010 - 19:46

Ausgezeichnet nur leider funktioniert's bei mir nicht. Nach der Funktionseingabe berichtet mir das Programm einen Fehler. Zu Schade, denn das Tut ist klasse!

Portrait von Suplix
  • 09.02.2010 - 13:19

Ja nachdem ich den letzten Comment gelesen hatte wars auch echt gut ... is halt was älter muss man sich drauf einstellen

Aber echt gutes Tut eigentlich ;)

Portrait von trespasser
  • 09.02.2010 - 12:31

Ein ganz gutes Tutorial! Super für alle Einsteiger, auch für die Benutzer der neueren Versionen.

Portrait von putzili2609
  • 15.12.2009 - 20:26

Auch ein richtig guter Workshop, nur da ich auch eine cs3 version benutze musste ich mich erst durch die kommentare wursteln, bis ich gemerkt habe dass man das projekt auf as2.0 setzen muss, damit keine fehler auftreten.

Portrait von waer
  • 31.12.2009 - 00:01

Tut mir leid, das ist für mich klar gewesen, weil es zu dem Zeitpunkt wo ich das Tutorial gemacht habe noch kein AS3 gab^^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.12.2009 - 14:54

Also ich bin wirklich begeistert hatte vorher keine ahnung und das tutorial hat sehr geholfen

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.11.2009 - 12:54

1A wirklich toll deine tuts! :D

x
×
×