5 The Matrix

Thema:
Christian Hof's Variablen Tutorial
Description:
Variablen in allen Variationen
Keywords:
Flash, Set Variable, Dynamik, Interaktivität, Steuern, Filminstanz, Movie Clip, Level, Aktionen, Befehle
Author:
Christian Hof
Date:
04.01.2000
Doc-ID:
30-005
URL:
http://www.flashworker.de/tutorial/30/005.html
Version:
1.0
Änderungen:

Erstellung

Anforderungen:
Flash 4
Vorkenntnisse:
Flash Grundkenntnisse
Download:
--

1 Einleitung

2 Grundlagen

3 Textfelder

4 Standardbefehle

5 The Matrix
  Die Idee
  Die Ziffer
  Das Raster
  Die Fäden
  Der Zufall
  Das Stocken
  Die Fortsetzung

6 Ausblicke


5 The Matrix

Die Idee
Jeder von Ihnen wird wohl den Film "The Matrix" mit Keanu Reeves und Lawrence Fishburne im Kino oder auf Video oder DVD gesehen haben. Eine Schlüsselsequenz im Film sind dabei die immer wieder auftretenden kryptischen Zahlenreihen, die die Bildschirme unruhig herunterpurzeln. So war es nicht verwunderlich, dass schon bald dieser Effekt unter http://www.legus.ru im Internet zu bewundern war. Wir wollen uns nun Gedanken darüber machen, wie soch ein Effekt nachgebaut werden kann. Wenn man den Originalschauplatz dieser Animation besucht, so fällt auf, dass die Zahlenreihen in einem zufälligen Muster entstehen, wobei aber immer zuerst wenige lange Zahlenfäden auftreten, bis der Rest der Zahlen ins Rutschen kommt.
Um uns die Sache besser vorstellen zu können, soll hier ein kleiner Eindruck präsentiert werden: The Matrix.

Wie kann so eine Zahlenbewegung erzeugt werden? Wir könnten wirklich die Fäden schrittweise von oben nach unten bewegen. Wenn wir aber jede Ziffer einzeln bewegen wollen, wird die gesamte Animation sehr träge. Wenn wir die Zahlen in den Fäden positionieren und dann den Faden bewegen, haben wird das Problem, dass die Ziffern in einer Art Ring von unten nach oben durchrotieren müssen. Eine zweite Möglichkeit wäre, eine Portion Textfelder nach dem Raster zu erzeugen und die Inhalte immer eins weiterzuschieben. Das stellt keinen so grossen Programmieraufwand dar und erfordert keine grafische Bewegung. Dieser Weg ist deswegen attraktiv, weil die Anzahl entstehender Instanzen konstant bleibt.



Die Ziffer
Der Kern der ganzen Animation liegt in der einzelnen Ziffer. Erzeugen wir uns also zuerst einmal ein Textfeld, das solch eine Ziffer tragen soll. Das Textfeld darf natürlich nicht editierbar und auswählbar sein, sollte nur Ziffern als Fonts eingebunden haben und mit der OCR Schrift bestückt sein. Der Vorteil dieser Schrift liegt darin, dass die Einbindung der True Type Abbildung in die Shockwave Bibliothek nicht so viel Speicherplatz benötigt. Der Name des Feldes soll number sein. Dieses Textfeld konvertieren wir nun in ein Symbol mit Namen color und dieses in ein Symbol mit Namen basic. Auf diese Weise können wir auch später verschieden auf die Darstellung Einfluss nehmen und jede Zahl verschieden stark leuchten lassen. So entsteht eine gespenstische Atmosphäre. Man muss natürlich auch die Instanzen entsprechend der Symbolnamen benennen, um sie programmgesteuet ansprechen zu können. Eine Instanz von basic holen wir nun unter dem gleichen Instanznamen in den Hauptfilm. Wir müssen uns über die Sichtbarkeit dieses "Bauplans" keine Gedanken machen, da ja nichts im Textfeld drinsteht.




Das Raster
Jetzt werden wir uns überlegen, wie wir das Zahlenraster mit Hilfe der Symbolinstanz basic aufbauen können. Ein Raster muss eine Anzahl von Zeilen und Spalten besitzen, die wir in Variablen flexibel halten wollen.
Wir erzeugen also in Bild 1 des Hauptfilmes eine Ebene für das ActionScript und legen folgende zwei Variablen fest:

Set Variable: "ycount" = 15
Set Variable: "xcount" = 15
 

Unsere Matrix soll also aus 15 Zeilen und 15 Spalten bestehen. Jetzt müssen diese Elemente per Befehlssequenz erzeugt werden, die folgendermassen aussehen muss:
Set Variable: "i" = 1
Loop While (i <= xcount)
  Set Variable: "j" = 1
  Loop While (j <= ycount)
    Duplicate Movie Clip ("/basic", "numberx" & i &"y" &j, 15*i + j + 1)
    Set Property ("numberx" & i &"y" &j, Y Position) = 20 * j
    Set Property ("numberx" & i &"y" &j, X Position) = 10 * i
    Set Property ("numberx" & i &"y" &j, Alpha) = random(50)+50
    Set Variable: "j" = j+1
  End Loop
  Set Variable: "i" = i+1
End Loop
Was passiert hier? Zwei ineinander geschachtelte Loop Anweisungen erzeugen ein rechteckiges Schema, in dem mit Hilfe der Anweisung Duplicate Movie Clip neue Instanzen des Textfeldes erzeugt werden.
Dabei heisst in unserem Fall das Element links oben numberx1y1, das nächste Element der ersten Zeile numberx1y2 und das Element rechts unten numberx15y15. Es muss penibel genau darauf geachtet werden, dass die Ebenentiefe der nacheinander erzeugten Elemente kontinuierlich grösser wird. Wenn man hier einen Felher macht so kann es sein, dass ein erzeugter Ziffernhalter später von einem anderen erzeugten Ziffernhalter überschrieben wird. Die Ziffernnamen werden dabei dynamisch als Stringkette zusammengebaut.
Natürlich muss auch beachtet werden, dass die Ziffern nicht alle am gleichen Fleck positioniert werden, sondern sauber verteilt sind. Die ersten beiden Set Property Anweisungen sind genau dafür zuständig.
Die dritte Set Property Anweisung stellt nun die Transparenz solch eines Ziffernhalters zufällig ein, wobei der Faktor zwischen 50 und 100 liegt. So schaut die ganze Zahlengeschichte nachher etwas gespenstisch aus.




Die Fäden
Wir wollen uns jetzt überlegen, wie die Zahlen lernen sollen, zufällig herunter zu rieseln. Prinzipiell werden wir so vorgehen, dass jedes Element einer Zeile sich den Textinhalt des genau über ihm plazierten Elementes holt und in der ersten Reihe dann neue Zahlen zufällig plaziert werden. Dabei soll diese Bewegung fadenweise ablaufen. Folgendes Actionscript kann das realisieren:

Set Variable: i = 1
Loop While (i <= xcount)
  Set Variable: "j" = ycount
  Loop While (j > 1)
    Set Variable: "k" = j-1
    Set Variable: "numberx" &i &"y" &j &"/color:number"
                  = EVAL("numberx"&i  &"y" &k &"/color:number")
    Set Variable: "j" = j-1
  End Loop
  Set Variable: "numberx" &i &"y" &"1/color:number" = random(10)
  Set Variable: "i" = i + 1
End Loop
Dieser Code erzeugt nun ein Zahlenfeld das immer weiter nach unten rutscht. Wie aber erzeugt man Reihen, bei denen in einem Faden oft die gleichen Ziffern aufeinander folgen? Folgende Erweiterung kann helfen:
Set Variable: "i" = 1
Loop While (i <= xcount)
  Set Variable: "j" = ycount
  Loop While (j > 1)
    Set Variable: "k" = j-1
    Set Variable: "numberx" &i &"y" &j &"/color:number"
                  = EVAL("numberx"&i  &"y" &k &"/color:number")
    Set Variable: "j" = j-1
  End Loop
  If (random(samechar) > 3)
    Set Variable: "numberx" &i &"y" &"1/color:number"
                  = eval("numberx" &i &"y" &"2/color:number")
  Else
    Set Variable: "r" = random(10)
    Set Variable: "numberx" &i &"y" &"1/color:number" = r
  End If
  Set Variable: "i" = i + 1
End Loop
 
Über die von uns erzeugte Variable samechar kann also gesteuert werden wie zufällig die gleiche Ziffer noch einmal erscheinen soll. Wie aber kriegen wir die Löcher? Hier muss dem Zufall etwas auf die Sprünge geholfen werden.





Der Zufall
Wie also machen wir die Löcher in die Zahlenreihen. Folgende Idee hilft weiter:
Set Variable: "i" = 1
Loop While (i <= xcount+1-int(h/2) and i > 0+int(h/2))
  Set Variable: "j" = ycount +1
  Loop While (j > 1)
    Set Variable: "k" = j-1
    Set Variable: "numberx" &i &"y" &j &"/color:number"
                  = EVAL("numberx"&i  &"y" &k &"/color:number")
    Set Variable: "j" = j-1
  End Loop
  If (random(holerandom) < 3
      and EVAL("numberx" &i &"y2" &"/color:number") eq "")
    Set Variable: "r" = ""
  Else
    If (random(samechar) > 3)
      Set Variable: "numberx" &i &"y" &"1/color:number"
                    = eval("numberx" &i &"y" &"2/color:number")
      Else
        Set Variable: "r" = random(holechar+10)
      If (r > 9)
        Set Variable: "r" = ""
      End If
      Set Variable: "numberx" &i &"y" &"1/color:number" = r
    End If
  End If  
  Set Variable: "piece" = random(movestep)+1
  Set Variable: "i" = i + 1
  End If
End Loop
 
Hier greifen gleich zwei Prozesse ineinander. Zum einen hätten wir gerne, dass mehr Einzellöcher erscheinen, was durch die Variable holechar realisiert wird. zum anderen wäre es ganz nett wenn ein Faden auch ein längeres Loch aufweisen kann, was holerandom bewerkstelligt





Das Stocken
Wie schaffen wir es jetzt noch, dass Fäden immer wieder ins Stocken geraten? Ein Weg um das zu lösen wäre der folgende:
If (h> 0)
  Set Variable: "h" = h-1
End If
If (random(holeswitcher) < 2)
  If (hole = 1)
    Set Variable: "hole" = 0
  Else
    Set Variable: "hole" = 1
  End If
End If
Set Variable: "i" = 1
Loop While (i <= xcount)
  Set Variable: "j" = ycount
  Loop While (j > 1)
    Set Variable: "k" = j-1
    Set Variable: "numberx" &i &"y" &j &"/color:number"
                  = EVAL("numberx"&i  &"y" &k &"/color:number")
    Set Variable: "j" = j-1
  End Loop
  If (hole = 1)
    Set Variable: "numberx" &i &"y" &"1/color:number" = ""
  Else
    If (random(holerandom) < 3
        and EVAL("numberx" &i &"y2" &"/color:number") eq "")
      Set Variable: "r" = ""
    Else
      If (random(samechar) > 3)
        Set Variable: "numberx" &i &"y" &"1/color:number"
                      = eval("numberx" &i &"y" &"2/color:number")
      Else
        Set Variable: "r" = random(holechar+10)
        If (r > 9)
          Set Variable: "r" = ""
        End If
        Set Variable: "numberx" &i &"y" &"1/color:number" = r
      End If
    End If
  End If
  Set Variable: "piece" = random(movestep)+1
  If (plus = 1)
    Set Variable: "i" = i + piece
  End If
End Loop
 
Zwei Dinge werden hier kontrolliert. Die Variable hole checkt, ob nicht mal alle Fäden ein Leerzeichen erhalten sollen, wobei die Blockungsdichte mit Hilfe von holeswitcher beeinflusst werden kann. Die Variable piece entscheidet hingegen, ob man nicht mal eine Faden bei der Abwärtsbewegung auslassen soll.





Die Fortsetzung
Wie man es nun bewerkstelligt, dass die Fäden in der Mitte zuerst rieseln, soll Ihrer eigenen Kreativität überlassen bleiben. Ich verabschiede mit aus der Matrix und folge Keanu Reeves in das innere der VR :-)




Weiter