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 Torbenslein
  • 29.06.2008 - 12:42

Währe geil wen du die beiden noch erklären könntest bin halt nur ein anfänger aber trozdem ich habe es beim erstenmal geschaft und das motiviert ein echt super deine tutorials sind alle so einfach zu verstehen und echt klasse geschrieben ich danke dir ^^ und hoffe du hilfst mir ^^

Frage könntest du noch ein tutorial zum actionscript machen? vieleicht erklären wie man mit einem button ein event startet bzw stopt oder wie man am ende eines scriptes vielleicht nach 20 sec automatisch auf eine website weitergeleitet wird? währe echt geil von dia ^^ sry fürs geschreibe ^^

Portrait von waer
  • 04.07.2008 - 15:51

Also wenn du zb in 20 Sek eine weiterleitung haben willst dann mach einfach ein Bild pro sekunde gehst dann aufs 20 Bild und machst nen Schlüsselbild. Dann schreibst du einfach rein getURL("url")

fertig ;)

Portrait von JensenJR
  • 20.06.2008 - 18:22

Ich kann nur sagen, dass dieses Tutorial mir echt weitergeholfen hat. Danke! Gruß Sparwasser

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 13.06.2008 - 14:10

Also ich habe echt selten so ein ausführliches tutorial gelesen! Spitze!

Gruß

Tomek

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 18.05.2008 - 15:46

Hammer. Erstmal fettes Lob !!! Hier findet man echt gute anregungen um ne schöne Hp selber zu machen. Herzlichen Dank

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.05.2008 - 21:12

War sehr intressant hat mir weitergeholfen
Danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.04.2008 - 23:18

Es will bei mir nichts erscheinen, attachmovie; bringt nichts auf die Bühne o.O" Woran kann das liegen?

Portrait von waer
  • 28.04.2008 - 14:18

Ich würd mal sagen das wenn du nicht genauer erklärst was du falsch gemacht hast dann kann ich dir auch nicht helfen. Am besten du schickst mir einfach mal per PM deine .fla Datei. Dann können wir weitersehen ;)

Portrait von infernalvoice
  • 14.04.2008 - 10:12

hi, ein wirklich sehr gut erklärtes tutorial!!!

Portrait von skyflight1981
  • 12.03.2008 - 18:51

Super Tutorial! Auch bitte hiervon mehr!!!

Portrait von socken1952
  • 08.03.2008 - 19:48

Danke! Ich bin kein Action Script Profi aber diese Anleitung ließ sich einfach durcharbeiten.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.03.2008 - 19:01

Juppidu; endlich was neues :-)

Gefällt mir. Deine Tuts habe ich bisher immer sehr gern durchgearbeitet.

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 08.03.2008 - 08:16

schönes Tut, bin schon aufs nächste gespannt

Portrait von Masterslive
  • 07.03.2008 - 14:21

geniales Tutorial, vor allem das Flash Tutorial in Flash !!!!

Portrait von jojoho
  • 07.03.2008 - 14:20

Super Anleitung! Danke

x
×
×