Anzeige
Tutorialbeschreibung

Flash Grundlagen Tutorials Teil 11 - Actionscripts II auf Movieclips anwenden

Flash Grundlagen Tutorials Teil 11 - Actionscripts II auf Movieclips anwenden

Hi Leute, hier gibts den 11 Teil meiner Grundlagen Serie in Flash. Diesmal gehts hauptsächlich ums Actionscript (2).

Viel Spaß beim Tutorial!


 

Und los gehts:

Diesmal wollen wir ein bisschen mehr auf Actionscript eingehen und wie man es auf Movieclips anwenden kann.

 

Voreinstellungen: 30 Bilder pro Sekunde
                                 Größe: Standardgröße (reicht aus)

 

1. Erstellt das Dokument mit den oben angegebenen Voreinstellungen.

2. Zeichnet einen Kreis und konvertiert ihn zu einem Movieclip.

  -->Klickt auf das Ellipsenwerkzeug
  -->Zieht eine Ellipse in der Bühne und haltet dabei Shift gedrückt.
  -->Makiert den Kreis und drückt F8 um daraus einen Movieclip zu erstellen. (weitere Infos dazu in älteren Tuts)

 3. Gebt dem Movieclip eine ID

In diesem Flash zeige ich euch wie man einem Movieclip eine ID geben kann:

 

Entfernt nun noch den Movieclip aus der Bühne (nicht aus der Bibliothek!) indem ihr einfach draufklickt und Entfernen drückt. 

Kommen wir zum Actionscript:

4. Erstellt eine neue Ebene auf die das Actionscript soll.

 

 

 

Wichtig: Ich benutze Actionscript2

 

5. Geht in das Aktionsfenster und schreibt Folgendes rein:

 attachMovie("mc", "mein_objekt", 1);

Mit der Methode attachMovie kann man ein Symbol (oder auch Movieclip) verknüpfen und damit auf die Bühne importieren. Diese Mehtode benötigt 3 Parameter (Parameter auch Eigenschaften kommen immer zwischen den Klammern und werden mit einem Komma getrennt)

Der erste Parameter ist die ID des Symbols (oder Movieclips) wir haben sie mc benannt also müssen wir dort "mc" reinschreiben.

Der zweite Parameter wird der Instanzname des mc´s. ich nenne ihn einfach mal mein_objekt. Dadurch können wir ihn wie gewohnt durch Actionscript mit dem Instanznamen ansprechen und Funktionen zuweisen.

Der dritte und letzte Parameter ist die Tiefe. Ich habe 1 geschrieben also ist der mc ganz vorne, mit 2 oder höher kommt er weiter in den Hintergrund, da wir aber nur ein Objekt also den mc auf der Bühne haben werden ist das nicht relevant.

Wenn wir jetzt das Dokument testen dann wird man nur einen Virtel des Kreises oben links erkennen können, da wir keine Breite und Höhe bestimmt haben. Wenn wir die Breite und Höhe bestimmen wollen, müssen wir einfach nur die normalen Eigenschaften über Actionscript verändern.

Die Eigenschaften _x und _y können die Position bestimmen. Wenn wir jetzt zum Beispiel unseren Kreis auf 200px Breite und 200px Höhe haben wollen schreiben wir:

mein_objekt._x = 200;
mein_objekt._y = 200;

Damit kommt unser mc auf 200px Breite und 200px Höhe.

Jetzt kann man damit rumspielen und eine for Schleife reinbringen oder ein onEnterFrame Event reinbringen.

Ich zeige euch jetzt mal wie eine for Schleife funktioniert:

Eine for Schleife funktioniert solange wie ihr wollt. Man kann einstellen wie oft eine Aktion ausgeführt werden soll.

Wenn man will das eine Aktion 20 mal ausgeführt werden soll schreibt man so:

for(i=1; i<20; i++)

 

Die Schleife for benötigt 3 Parameter:

Der erste Parameter ist für die Initalisierung, da in der for Schleife mit einer Variablen gearbeitet wird müssen wir eine bestimmen. Unsere Variable heißt i und hat den Wert 0.

Der zweite Parameter ist die Bedingung damit die Schleife aufhört die Funktion die sie beinhaltet auszuführen. Wir stellen i<20, das bedeutet das wenn die Variable i größer als 20 wird soll die Schleife aufhören die Aktion auszuführen.

Der dritte und letzte Parameter ist für die Aktualisierung. Wenn die Variable nicht größer wird, gibts auch keine Grenze die sie überschreiten kann. Ich habe geschrieben i++, durch die zwei Plus-Zeichen wird automatisch jedesmal wenn die Aktion ausgeführt wird der Wert der Variable i um einen größer.

 

unser bisheriges Skript würde dann so aussehen:

for(i=1; i<20; i++){
    attachMovie("mc", "mein_objekt", 1);
    mein_objekt._x = 200;
    mein_objekt._y = 200;
}

 

So werden wir jetzt 20 Kreise auf der Bühne beim testen sehen? Nein, weit gefehlt.

Es gibt noch 2 Punkte die das unmöglich machen.

Zum ersten würde jeder Kreis auf der gleichen Stelle positioniert und somit sieht man nur ein einzigen Kreis. Und zum zweiten haben wir nur eine Tiefe eingestellt, und in Flash kann im Actionscript nur ein Objekt auf einer Ebene.

Also müssen wir jetzt ein bisschen tricksen

Bilder

Da wir nur eine Konstante 1 als Tiefe benutzen, kann da nicht viel bei rauskommen. Also müssen wir eine Variable haben, die jedesmal wenn die Aktion ausgeführt wird um 1 größer wird.

Wir nennen diese Variable counter.

Also schreiben wir ganz am Anfang im Skript folgendes:

counter = 0;

Somit haben wir schnell und einfach eine Variable erstellt die counter heißt und den Wert 0 hat.

Der counter muss jetzt noch für die eins benutzt werden und aktualisiert werden

Also schreiben wir anstatt:
attachMovie("mc", "mein_objekt", 1);

Folgendes:
attachMovie("mc", "mein_objekt", counter);

 

Jetzt noch die Variable aktualisieren und zwar mit:

counter++;

Somit sieht unser komplettes Skript bisher so aus:

 

counter = 0;
for(i=1; i<20; i++){
    attachMovie("mc", "mein_objekt", counter);
    mein_objekt._x = 200;
    mein_objekt._y = 200;
    counter++;
}

 

Jetzt müssen wir nur noch zusehen das wir den Kreisen eine zufällige Position zuweisen. Da wir über Actionscript in der Hauptzeitleiste jeden mc extra bennen müssen (sprich nochmal Skript verändern) mach ichs mir da lieber einfach:

löscht folgendes aus dem Skript:

    mein_objekt._x = 200;
    mein_objekt._y = 200;

 

Jetzt geht in die Bibliothek und klickt doppelt auf den Kreis also unseren Movieclip. Dort drin kommt ein kleines aber tolles Skript. Klickt einmal irgendwo auf die Bühne aber nicht auf den Kreis, weil der soll ja nicht ausgewählt werden damit wir Actionskript in das Aktionsfenster hereinschreiben können.

Schreibt folgendes Skript rein:

_x = random(550);
_y = random(400);

Mit diesem Skript wird die _x Position also die Breite und die _y Position also die Höhe generiert.

Ich hätte genauso gut:

this._x = random(550);
this._y = random(400);

schreiben können, aber das macht keinen großen Unterschied da wir ja "this" also das ansprechen wollen. Ich könnte jetzt auch für die Profis Math.random nehmen können, aber für dieses Tutorial reicht random().

die Funktion random benötigt nur den einen Parameter und zwar die Zahl bis wie viel der Wert generiert werden soll, also wenn man eine zufällige Zahl bis 550 haben will dann kommt natürlich 550 rein, und da unsere Bühne 550x400 ist habe ich die Werte benutzt.

Wenn wir das Dokument jetzt testen dann werden die 20 Kreise irgendwo auf der Bühne verteilt. Natürlich kann es vorkommen das manche Kreise überlappen oder ganz genau auf ein dem selben Punkt sind, wenn das der Fall ist könnte man mit einem Skript das verhindern, den möchte ich aber jetzt hier nicht weiter erklären.

Da wir unseren Kreis in einem Movieclip haben, können wir den natürlich animieren.

Und das habe ich jetzt vor:

 

6. Animiert den Movieclip wie ihr wollt.

  --> Natürlich kann jeder selbst entscheiden ob er meine Animation nachmachen möchte oder eine eigene erstellt.
  --> Geht, wenn ihr im Movieclip drin seit, auf das 30 Bild in der Zeitleiste und drückt F6 um ein Schlüsselbild zu erstellen.
  --> Bewegt den Kreis zirka 100px nach rechts und verkleinert ihn auf 1px.
  --> Geht auf die Farbe und stellt dort die Alpha auf 0.
  --> Jetzt wählt einfach ein Bild an das vor unserem Schlüsselbild das wir grade bearbeitet haben ist (also vor 30)
  --> Dann im Eigenschafteninspektor Formtweening anwählen.
  --> Jetzt noch die Beschleunigung auf 100 Stellen und eure Animation wird so aussehen wie meine.
  --> Hier noch ein kleines Flash wie ich alles gemacht habe:

 


 

 

Jetzt sieht es bei mir so aus:

 

 

Jetzt bringen wir einen kleinen Effekt rein und zwar:

7. Geht in den mc und fügt noch folgendes Skript ein:

_rotation = random(360);

Eigenschaft _rotation bestimmt die Rotation des mcs und dadurch werden sie jetzt nicht nur nach rechts sondern in allen Richtungen ausfaden.

So siehts aus:

 

 

Toller Effekt oder? ;)

Jetzt kommen wir noch kurz zu dem onEnterFrame Event. Macht einfach mal die for Schleife weg und schreibt dafür onEnterFrame ....

So würde es dann aussehen:

counter = 0;
onEnterFrame = function(){
    attachMovie("mc", "mein_objekt", counter);
    counter++;
}

 

Dann müsstet ihr noch im mc auf dem 30. Bild folgendes hinschreiben:

this.removeMovieClip();

Damit der MovieClip auch entfernt wird, weil wenn wir durch den onEnterFrame Eventhandler jede Sekunde einen neuen Movieclip auf die Bühne tun wird das nachher zu voll wenn wir die nicht wieder löschen.

 

Dann wirds so aussehen:

 

So, damit will ich euch zeigen wie man einen Movieclip auch ohne das er auf der Bühne ist erstellt, oder verdoppelt. Hier habe ich noch ein paar Beispiele, die ich bei Nachfrage auch noch erklären kann:

Beispiel 1:

 

 

Beispiel 2:

 

 

Beispiel 3:

 

 

So das wars dann für mein 11. Tutorial für meine Grundlagen Serie. Ich hoffe es hat euch gefallen und macht mir bitte ein Kommentar. Ihr findet alle Dateien in den Arbeitsdateien hier zum runterladen, auch die fla´s der Beispiele sind drin.

 

LG Waer

 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von sommerfugl
  • 28.02.2011 - 12:13

super beschrieben...habs sofort verstanden^

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.12.2010 - 17:30

gut erklärt, auf anhieb alles geklappt. vielen dank!

Portrait von WebDiver_09
  • 29.08.2010 - 17:06

Gutes Tut.! Kommt nach Folge 11 noch mehr?

Portrait von waer
  • 29.08.2010 - 20:35

Derzeit mache ich keine Flashtutorials mehr, aber ich denke schon daran an ein paar weitere Teile zu schreiben ;)

Portrait von kleinerMaler
  • 14.05.2010 - 19:38

Ein guter Einstieg für Actionscript.

Portrait von Priscilla23
  • 21.10.2009 - 13:12

Echt schick. Gern mehr davon.
Vielleicht auch, wie man sowas nur mit Actionscript macht. Also ohne den MovieClip auf der Zeitleiste zu animieren. Würd mich interessieren...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.07.2009 - 03:01

sowas in der art hatte ich gesucht habs nen bissel geändert danke danke gut erklärt

Portrait von Lonka
  • 10.06.2009 - 10:50

Toll echt supa erklärt. Das habe ich auch verstanden obwohl ich oft ganz schön begriffstutzig bin

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 05.06.2009 - 15:44

deine komplette serie ist echt genial!
mach weiter so!
gibt es dann auch noch weitere folgen, oder war das die letzte?!

Portrait von waer
  • 07.06.2009 - 13:31

Bisher hab ich mich nicht rangemacht noch einen Teil zu schreiben, aber wenn die Anfrage besteht ;-)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.05.2009 - 00:38

danke! ist echt hilfsreich was du da machst. weiter so!

Portrait von Lufia
  • 31.03.2009 - 09:11

deine ganze Tutreihe ist absolute spitze!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 06.03.2009 - 20:00

Danke, danke! von www.raidesign.de - ich bin nun bald 64 J. und habe mich mit AC
immer so ein bisschen "durchgemogelt", alter Grafiker halt. Aber dieses Tut. gibt mir
den Anstoß den "inneren Programmier-Schweinehund" zu überwinden und zu lernen.
Also nochmal: "Hut ab!" und vielen Dank.

mfg. raiuno

Portrait von Glueckskatze
Portrait von charlie824
  • 25.01.2009 - 19:48

Danke prima Sache, ich hoffe das ich es hin bekomme

Portrait von MelZu
  • 30.10.2008 - 08:16

Genial gemacht. Vielen Dank

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 15.10.2008 - 10:20

Respekt, super geschrieben. Auch für einen Actionscript Anfänger wie mich klar verständlich und nachvollziehbar.

Besten Dank für die klasse Arbeit.

Portrait von Germanboy4u
  • 26.07.2008 - 11:36

wer hätte gedacht dass das so einfach ist.

*sich ver Wear verbeug*

Portrait von waer
  • 27.07.2008 - 19:09

a und e in meinem Namen nicht VERWECHSELN! WAER nix wear ;)

Portrait von waer
  • 04.07.2008 - 15:52

Am besten schreib mir ne PM

x
×
×