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
|
|
Was bringt dieses Tutorial?
Inspiriert von Chrisitan Hofs Set Variable Tutorial stellte ich mir selber die Aufgabe, den "Matrix-Effekt" (spaltenweise fallende Zahlen) mit Flash MX nachzuahmen. Dabei entstanden auch andere interessante Experimente...
Als allgemeine Regel gilt hier:
- erzeuge eine Matrix aus Textblöcken in einem Bild (mit unterschiedlichen Textblockvariablen) bzw. einem MovieClip, welcher ein Textblock (inkl. Textblockvariable) enthält, der später durch ein Skript als Matrix vervielfacht wird
- einem leeren MovieClip, dessen Skript den Matrix-Effekt steuert
- die Geschwindigkeit des Falles (des gesamten Films und nicht der einzelnen Spalten) wird durch die Film-Bildrate bestimmt (ich benutze in den Beispielen zwischen 10-16 BpS)
Wirrwarr-Matrix mit Textenthüllung
Dieses einfache Beispiel füttert sechzehn Textblöcke kontinuierlich mit Buchstaben. Vier spezielle Felder stoppen bei bestimmten Buchstaben, wobei die anderen Felder weiterhin gefüttert werden, im u.a. Beispiel das Wort "STOP" in der dritten Reihe. Wer schon ein cooles Feeling haben möchte, der kann die Hintergrundfarbe auf Schwarz setzen und im Textblock die Textfarbe Hellgrün nehmen.
1. Textblockmatrix 4x4 (manuell) erzeugen
In Flash neuen Film erzeugen und im ersten Bild links oben einen Textblock erzeugen mit den Eigenschaften "Dynamisch", "nicht auswählbar", "ohne Textrahmen", "zentriert" und die Variable (nicht Instanzname!) "matrfeld".
Diesen Textblock mit der Maus (und gedrückter SHIFT und STRG-Taste für eine ausgerichtete Kopie) rechts nebendran duplizieren. Diese zwei Textblöcke markieren und genauso duplizieren und so haben wir die erste Reihe. Wir markieren diese erste Reihe und duplizieren die nach unten. Alle 8 Blöcke markieren und wiederum nach unten duplizieren, so daß wir nun 16 Textblöcke haben in einer 4x4 matrix.
Jetzt jeden Textblock einzeln markieren und dessen Variable "matrfeld" von links nach rechts und oben nach unten mit einer Zahl erweitern, d.h. matrfeld1, matrfeld2, matrfeld3, ..., matrfeld16.
Warum müssen wir das manuell machen? Weil wir leider die Textblockvariablen nicht dynamisch mit ActionScript benennen können.
2. MovieClip zur Steuerung erzeugen
Mit STRG-F8 oder Einfügen -> Neues Symbol erzeugen wir ein neues MovieClip, dessen Benennung zweitrangig ist. Und kehren gleich zum Hauptfilm zurück (auf "Szene 1" klicken)! Nun erzeugen wir eine Instanz (ohne Instanznamen) mit diesem leeren MovieClip auf der Bühne, egal wo.
Das leere MovieClip anklicken und das Aktionsfenster aufrufen.
Wir benutzen hier onClipEvent (enterframe) {}, bedeutet, daß die Aktionen darin jedesmal ausgeführt werden, wenn der MovieClip im aktuellen Bild ausgeführt werden. Wir haben nur ein Bild, insofern werden die Aktionen kontinuierlich ausgeführt.
Das Alphabet hat 26 (Groß)Buchstaben, also soll eine random-Funktion einen beliebigen Buchstaben(index) auswählen. Da ich hier die Zahl in ein entsprechendes ASCII-Zeichen umwandeln möchte, muß ich erstmal mit 65 addieren (da "A" dem ASCII-Code 65 entspricht) und anschließend mit String.fromCharCode() in ein String umwandeln:
_root.matrfeld1=String.fromCharCode(random(26)+65);
Mit einer Schleife werden alle Textblöcke ausgefüllt, anbei der komplette MovieClip-Code:
onClipEvent (enterframe) {
for (i=1; i<17; i++) // Felder von 1 bis 16 durchgehen
_root["matrfeld"+i] = String.fromCharCode(random(26)+65);
}
Film jetzt testen!
Bem.: _root["matrfeld"+i] wird benutzt, um dynamisch den Variablennamen festzulegen. Bei jedem Schleifendurchgang ändert sich die Zuordnung eines beliebigen Buchstabens.
3. Es erscheine STOP!
Ich wollte nun daß bei erreichen der Buchstaben S, T, O und P in der dritten Reihe die Textblöcke nicht aktualisiert werden, also brauche ich den folgenden Code:
onClipEvent (enterframe) {
for (i=1; i<9; i++) // Felder von 1 bis 8 durchgehen
_root["matrfeld"+i] = String.fromCharCode(random(26)+65);
if (_root.matrfeld9 != "S")
_root.matrfeld9 = String.fromCharCode(random(26)+65);
if (_root.matrfeld10 != "T")
_root.matrfeld10 = String.fromCharCode(random(26)+65);
if (_root.matrfeld11 != "O")
_root.matrfeld11 = String.fromCharCode(random(26)+65);
if (_root.matrfeld12 != "P")
_root.matrfeld12 = String.fromCharCode(random(26)+65);
for (i=13; i<17; i++) // Felder von 13 bis 16 durchgehen
_root["matrfeld"+i] = String.fromCharCode(random(26)+65);
}
Was bringt dieses Tutorial?