Der Matrix-Effekt
Thema:
|
Der Matrix-Effekt
|
Description:
|
Dynamische Änderung mehrerer Textblöcke
|
Keywords:
|
Flash, duplicateMovieClip, Textblock, Matrix, Dynamisch
|
Author:
|
Daniel Streidt
|
Date:
|
16.08.2002
|
Doc-ID:
|
59-001
|
URL:
|
http://www.flashworker.de/tutorial/59/001.html
|
Version:
|
1.0
|
Änderungen:
|
|
Anforderungen:
|
Flash 5
|
Vorkenntnisse:
|
Flash Grundkenntnisse
ActionScript nützlich
|
Download:
|
PC: "matrix.zip", 17 kB
|
|
Der Matrix-Effekt
Nach dem Einstieg in die statische, manuelle "Blocktextfelderzeugung" werden wir hier dynamisch die Textblöcke kreieren und positionieren.
1. Die Elemente
Also, neuen Film erzeugen mit den Eigenschaften 550 x 290, schwarzer Hintergrund und die Bildrate auf 10 BpS. Der Film besteht aus einem Bild (frame) und zwei MovieClips.
Der erste MovieClip "Textfield for matrix" enthält einen Textblock (ich hab auch noch den Buchstaben A drin) mit folgenden Eigenschaften: Dynamischer Text ohne Rahmen, Schrift Verdana (am besten eine Computer-OCR-Schrift nehmen, wobei eventuell die Ziffern eingebettet werden sollten), 18 Punkt, Hellgrün, fett, zentriert, nicht auswählbar und mit der Variable "varyme". Die linke obere Ecke des Textblocks ist das Zentrum des MovieClips (das kleine Kreuz).
Der zweite MovieClip "MoveTheMatrix!" enhält nichts, niente, nada...
Von beiden MovieClips je eine Instanz auf die Bühne setzen, wobei die Instanz für "Textfield for matrix" mit "clippy" bezeichnet wird.
2. Die Aktionen
Wir haben im Bild 1 der Bühne Aktionen zum Duplizieren des MovieClips "Textfield for matrix". Der MovieClip "MoveTheMatrix!" enthält Aktionen zur Bewegung der Zahlenkolonnen. Fangen wir mit den Aktionen im Bild 1 an...
Unsere Matrix ist 22 x 10 Felder groß! Wir benötigen zwei Schleifen, die gleichzeitig:
- "clippy" duplizieren und neu benennen
- das Duplikat positioniert
- das Duplikat mit einer beliebigen Zahl auffüllen
counter=1; //Zähler für die Tiefenebene
for (j=0; j<10; j++) { // 10 Reihen von 0 bis 9
for (i=0; i<22; i++) { // 22 Spalten von 0 bis 21
duplicateMovieClip("clippy", "clippy"+i+j, counter);
_root["clippy"+i+j]._x= 25*i; //Spaltenabstand von 25
_root["clippy"+i+j]._y= 25*j; //Reihenabstand von 25
_root["clippy"+i+j].varyme=random(9); // mit beliebiger Zahl füllen
counter++; // Zähler erhöhen für die Tiefenebene
}
}
clippy._visible = false;
Diese Aktion wird nur einmal ausgeführt. (siehe Bemerkung am Ende)
Die Variable "counter" wird benötigt, um jedem einzelnen MovieClip eine eindeutige Tiefenebene zuordnen zu können. Das heißt, daß keine zwei MovieClips sich auf einer Tiefenebene befinden können.
Man kann sehen, daß die MovieClips dynamisch mit duplicateMovieClip(a,b,c) erzeugt werden, aber alle (zwar in unterschiedlichen Tiefenebenen) übereinander liegen. Dynamisch deswegen, weil ich die Schleifenvariablen dem MovieClip-namen hinzufüge ("clippy"+i+j): von clippy00 bis clippy219.
Exkurs: Vielleicht wird dem einen oder anderen klar, warum wir hier auf 10 Reihen beschränkt sind... Ein "clippy111" könnte bedeuten, daß sich dieser auf Reihe 1 und Spalte 11 oder auf Reihe 11 und Spalte 1 befindet! Fortgeschrittenen rate ich, die Hexadezimale Schreibweise zu benutzen, im obigen Beispiel mit "clippy111" hätten wir dann "clippy1b" und "clippyb1" eindeutig festgelegt...
Weiter positioniert das Skript den betreffenden MovieClip in seiner x und y Zielkoordinate. Anschließend wir die Variable "varyme" (die für alle MovieClips gleich heißt und dennoch unterschiedliche Werte annehmen kann, da lokal im MovieClip und nicht global aktiv) durch die Funktion random mit einer Zahl gefüllt.
Zu guter letzt wird die "Mutter" aller MovieClips, nämlich "clippy", aus den Augen des Betrachters verbannt.
Alle Aufgaben erfüllt:
- "clippy" duplizieren und eindeutig neu benennen
- das Duplikat positionieren und mit einer beliebigen Zahl auffüllen
Die Aktionen im MovieClip "MoveTheMatrix!" wird die Zahlen einfach so runterrieseln lassen!
Man klicke den besagten MovieClip an und ruft das Aktionsfenster auf. Da die Aktion immer wieder aufgerufen werden soll, benötigt man das Ereignis onClipEvent (enterframe) {}.
Bewegen wir mal die erste Spalte nach unten und geben ein:
onClipEvent (enterframe) {
i=0; //die erste Spalte
for (j=9; j>0; j--)
_root["clippy"+i+j].varyme=_root["clippy"+i+(j-1)].varyme;
}
Die Schleife geht vom untersten Spaltenelement zum obersten. In der Schleife wird der aktuelle Textblockinhalt (an Position j) mit dem Inhalt des darüberliegenden Textblocks (von Position j-1) gefüllt. Für einen kurzen Moment haben beide Blocks den gleichen Inhalt (setzt mal die Bildrate richtig runter und seht es selbst)...
Es tut sich was, nur blöd, daß da keine Zahlen nachkommen... also ändern wir es in:
onClipEvent (enterframe) {
i=0; //die erste Spalte
for (j=9; j>0; j--)
_root["clippy"+i+j].varyme=_root["clippy"+i+(j-1)].varyme;
_root["clippy"+i+"0"].varyme=random(9); // fülle oberste Reihe mit einer beliebigen Zahl
}
Super! Und jetzt lassen wir alle Spalten runterrieseln...
onClipEvent(enterFrame) {
for (j=9; j>0; j--) {
for (i=0; i<22; i++)
_root["clippy"+i+j].varyme=_root["clippy"+i+(j-1)].varyme;
}
//fülle die oberste Reihe mit beliebigen Zahlen!
for (i=0; i<22; i++)
_root["clippy"+i+"0"].varyme=random(9);
}
Wir sind aber noch nicht fertig! Um eine "fallende" Bewegung zu simulieren, benötigt manches Auge ein wenig Hilfe, auch wie in der Intro des Films zu sehen... richtig: Leerzeichen! Ich habe die obigen random(9)-Befehle durch die Funktion randno() ausgetauscht. Diese befindet sich hinter (eigentlich egal, wo ihr sie hinsetzt) den Aktionen im ersten Bild der Bühne:
function randno() {
imm=random(19); // wähle eine beliebige Zahl zwischen 0 und 18 aus!
if (imm>9)
imm=" "; // ist die Zahl größer als 9, ersetze diese mit einem Leerzeichen
return imm;
}
Einfach die zwei random(9) Befehle sowohl in der Bildaktion als auch in der MovieClip-Aktion mit _root.randno() austauschen!
Bem.: Die Zahl "19" habe ich aus dem Gefühl heraus gewählt. Eine niedrigere Zahl ergibt weniger Leerzeichen, eine höhere ergibt größere Abstände... Ihr könnt auch die Funktion randno() so umfunktionieren, daß statt Zahlen Buchstaben rauskommen (siehe die Wirrwarr-Matrix weiter oben)... Hausaufgabe. ;-)
Das war's!
3. Bemerkung am Ende (erinnert ihr euch?)
Der gewohnte Flash-Programmierer hätte die gesamten Aktionen im leeren MovieClip "MoveTheMatrix!" im Ereignis onClipEvent(load) {} reinstecken können, da auch dieses Ereignis im Gegensatz zu enterFrame nur einmal ausgeführt wird. Falls mit Flash MX gearbeitet wird, sollte man sich jedoch an die Macromedia ActionScript Standarts halten, die unter anderem raten, Scripte so selten wie möglich direkt in MovieClips einzubinden. Anstattdessen ist es ratsam, alles auf der Hauptzeitleiste als Funktion definieren. So hätten wir alles im Bild 1 der Bühne gehabt und der Aufruf zum onClipEvent (enterFrame) würde dann lauten:
MoveTheMatrix.onEnterFrame function() = {
for (j=9; j>0; j--) {
for (i=0; i<22; i++)
_root["clippy"+i+j].varyme=_root["clippy"+i+(j-1)].varyme;
}
//fülle die oberste Reihe mit beliebigen Zahlen!
for (i=0; i<22; i++)
_root["clippy"+i+"0"].varyme=randno();
}
wobei ich hier der MovieClip-Instanz einen Namen geben muß: ”MoveTheMatrix” (ohne Ausrufezeichen). Der Effekt ist der gleiche!
Die Hauptelemente