Einleitung
 Was bringt dieses Tutorial?



Aufbau
Vorbereitung
Symbole erstellen
Auf der Buehne platzieren
Action Script


Aussichten
 Was kann man damit machen
 Wo im Internet kann man das sehen

Was bringt dieses Tutorial?

Wir alle wissen dass Action Script unglaublich viele Moeglichkeiten bietet anspruchsvolle Projekte zu erstellen. Navigationen, Spiele, Counter und Formulare sind nur ein Teil davon. In diesem Tutorial moechte ich zeigen dass man mit AS auch interessante Bewegungs // Verfolgungs Effekte programmieren kann.

In dem Beispiel wird das Viereck von mehreren Formen Verfolgt, halten Sie die linke Maustaste ueber dem Viereck gedrueckt und ziehen Sie es an eine andere Stelle:

Die Datei hat nur 5 kb. Diese und weitere Produktionen zu sehen bei ESCARION.DE


Aufbau

 Die Arbeit beginnt damit dass wir in Flash eine neue Datei erstellen und minsdestens zwei Ebenen Festlegen. Eine nennen wir 'Actions' - hier wird sich nur Action Script befinden. Die Zweite Ebene kann beliebig genannt werden, sie wird alle Instanzen beinhalten. Alle Ebenen sollen eine Laenge von 3 Frames haben. Jedes der drei Bilder der Action Ebene machen wir zu einem Schluesselbild. (Markieren und F7 Druecken).

Bis jetzt ganz einfach. Nun werden wir die Frames mit Inhalt fuellen.

Symbole erstellen
Wir brauchen zwei Arten von Symbolen - das grosse Viereck (Ich nenne es ab jetzt 'quad1') dem viele kleinere Objekte folgen, und eben die kleineren Objekte.

Auf der Buehne zeichnen wir ein schoenes Viereck und konvertieren es in ein Symbol mit dem Namen 'Quad1' (markieren und F8 Druecken). Dieses erste Symbol wird als erstes vom Benutzer Bewegt. In meinem Beispiel kann es per Click And Drag verschoben werden, es wird also wie in Windows ueblich bei gedrueckter Maustaste bewegt. Damit es so funktioniert brauchen wir eine Schaltflaeche die auf "Press" reagiert und folgenden Script aufruft:

on (press) {
       startDrag ("");
       }

 on (release) {
       stopDrag ();
       }

Diese Schaltflaeche platzieren wir jetzt im Symbol Quad1, der Script wird dann auf das gesammte Movie clip angewendet.

Jetzt erstellen wir ein Symbol fuer die kleineren Objekte, wir koennen es nacher beliebig oft verwenden. Wir zeichnen einfach mal eine Form auf der Buehne und machen ein Symbol daraus. Nennen wir es doch einfach mal 'Quad'

.Alle Objekte sollen zusaetzlich mit einer Linie verbunden werden. Dazu muessen wir in Quad eine Linie zeichnen, sie in ein Symbol verwandeln ('Line' benennen) und - sehr wichtig - Als Instanznamen "line" vergeben !

( Die Linie darf weder horizontal noch vertikal verlaufen)

Symbole auf der Buehne platzieren
Das "fuehrende" Symbol Quad1 soll im sichtbaren Bereich der Buehne platziert werden und - wichtig - den Instanznamen "quad0" kriegen. (Ja ich weiss, in der Bibliothek heisst es "Quad1" und jetzt kriegt es den Instannamen "quad0", es ist aber nicht weiter schlimm, denn die Bezeichnungen in der Bibliothek haben ueberhaupt keine Bedeutung fuer Action Script ;-)

Von den kleinen Symbolen koennen wir beliebig viele auf der Buehne verteilen, die Position ist vollkommen egal, diese Objekte werden nacher mit Action Script ausgerichtet. Dafuer muessen wir jede einzelne Instanz mit "quad1", "quad2" bis "quadx" bennenen. x steht fuer Anzahl der Objekte. in meinem Beispiel sind es 7.

Action Script
Nach der langen und anstrengenden Vorbereitungsphase kommen wir nun endlich zum wesentlichen - Die Action Script Programmierung.

Im ersten Frame der Hauptbuehne soll folgendes stehen:

Frame1:

//anzahl der einheiten
numberquads = 7;
//verzoegerung
speed = 10;

Erklaerung: Hier werden einige Variablen definiert die das 
Bewegungsverhalten der Objekte steuern. Wichtig ist 'numberquads',             
der Wert soll mindestens so gross wie die Anzahl der kleineren                    
Verfolgungsobjekte sein.
      

Frame2:

//for schleife, lauft bis u die anzahl der einheiten erreicht hat,
//also bis alle einheiten bewegt wurden  

for (u=1; u<=numberquads; u++) {
// quad movement
_root["quad"+u]._x += (_root["quad"+(u-1)]._x-_root["quad"+u]._x)/speed+random(2);
_root["quad"+u]._y += (_root["quad"+(u-1)]._y-_root["quad"+u]._y)/speed+random(2);
         
// line script
_root["quad"+u].line._xscale = _root["quad"+(u-1)]._x-_root["quad"+u]._x;
_root["quad"+u].line._yscale = _root["quad"+(u-1)]._y-_root["quad"+u]._y;
}

Erklaerung: Hier wird der Script in der For Schleife solange 
ausgefuehrt bis der wert der Variablen u die Anzahl der 
Objekte erreicht hat. Weitere Einzelheiten werden unten erklaert.

Frame3:

//benutzt den script aus dem zweiten frame
//und geht wieder in den zweiten frame
call (2);
gotoAndPlay (2);

Erklaerung: Wiederholt den Script im zweiten Frame und geht wieder                
zurueck zum Frame 2.

Die Funktion der Scripts im ersten und dritten Frame ist selbsterklaerend. Die Programmierung im zweiten Frame muss noch kurz erklaert werden.

Die jeweils untereinanderstehenden Anweisungszeilen von // quad movement und // line script unterscheiden sich nur in der _x bzw _y Koordinate, deswegen reicht es wenn die erste beschrieben wird.

// quad movement

_root["quad"+u]
ist die adresse des Objekts, wenn u=1 wird die Instanz mit dem Namen 'quad1' angesprochen, wenn die Schleife durchlauft und u=7 wird, spricht die Anweisung 'quad7' an. u wird in der For schleife alle runden Werte von 1 bis 7 annehmen.

_root["quad"+(u-1)]._x-_root["quad"+u]._x
hier wird der Abstand zw den nacheinander folgenden Objekten errechnet. wenn zum Beispiel u=7 wird hier der Abstand zw 'quad6' und 'quad7' bestimmt

dieser Wert wird durch speed geteilt, wodurch eine Verzoegerung entsteht. Probieren Sie doch einfach mal unterschiedliche Werte und Kombinationen aus ;-)

random(2)
diese Anweisung erzeugt einen Zufallswert, der in die _x bzw _y Koordinate miteinbezogen wird, er bewirkt das unruhige Verhalten der Objekte. Sie koennen diesen Teil des Scripts ruhig weglassen.

Alle Bilder werden dann hintereinander in der Zeitleiste und uebereinander auf der Buehne platziert.

Es wird also der Abstand zw quad0 und quad1 errechnet, danach der _x Wert von quad1 dem von quad0 angepasst, quad1 verfolgt praktisch quad0. In der Schleife wird dieses System an alle nachfolgenden Objekte angewandt, quad3 verfolgt quad2 und so weiter.

// line script

_root["quad"+u].line._xscale
wenn u=1 wird hier die Eigenschaft _xscale der Instanz 'line' in der Instanz 'quad1' der Rootebene angesprochen.

_root["quad"+(u-1)]._x-_root["quad"+u]._x
bei u=1 nimmt die Linie die Breite zw quad0 und quad1 an, sie wird also genau so lang sein wie Abstand zw den beiden Objekten.

Aussichten

Einsatzmoeglichkeiten dieses Scripts sind vielfaeltig. Spiele,Comics, Interessante Navigationen, Bildschirmschoner ...Und vor allem ist es eine gute Grundlage sich spielerisch Action Script anzueignen. Veraendern Sie diesen Code nach Ihren Wuenschen - fuegen Sie random Funktionen ein oder Variiren Sie die Werte fuer Bewegung. Eine Kette aus 20-30 Einheiten sieht ziemlich organisch aus. Oder vielleicht eine Reihe von zusammenhaengenden Bildern ? Kontaktieren Sie mich einfach unter tim.pasch@escarion.de

Auf meiner Seite sind einige Arbeit zu diesem Thema Vorgestellt: WWW.ESCARION.DE

andere Sites im Internet:

praystation
ultrashock