13.5 Alles in einem 

Das große Finale dieses Kapitels bildet ein Beispiel, das die drei einzelnen Themen zusammenführt. Ziel ist, eine optisch beeindruckende Animation zu schaffen. Bevor Sie eine Animation an Ihrem Computer erstellen, sollten Sie zuerst einige Überlegungen per Hand zu Papier bringen.

Unsere Überlegungen bei diesem Beispiel waren folgende: Wir wollen verschiedenfarbige, halbtransparente Dreiecke nach und nach übereinander legen. Die Dreiecke sollen allerdings nicht wild durch den Raum fliegen, sondern ein Zentrum haben.

Abbildung 13.4 Das Ziel ist eine Animation, in der sich verschiedenfarbige Dreiecke ausgehend von einer Geraden aufbauen.

Die Abbildung greift ein wenig voraus und zeigt einen möglichen Zustand der Animation. Sie sehen, die Gerade in der Mitte ist allen Dreiecken gemeinsam. Das heißt, zwei Punkte sind fest, nur die dritte Spitze des Dreiecks lässt sich flexibel verschieben. Was bedeutet das für eine Animation? Denken Sie an die zwei Teile, aus denen eine Animation besteht: aus fortlaufenden Aufrufen und einem oder mehreren sich ändernden Werten. Jeder Aufruf soll ein Dreieck erzeugen, eine Änderung (bei jedem Aufruf) ist die Koordinate der dritten Spitze. Sie wird also zufällig festgelegt.

In der Animation soll noch ein wenig mehr Zufall vorkommen. Die zwei Punkte für die zentrale Gerade sind ebenso zufällig gewählt, allerdings vor den wiederholten Aufrufen (da sie sich sonst immer ändern würden). Außerdem ist die Farbe der Dreiecke zufallsgesteuert.

Schritt für Schritt: Zufällige Formen animieren

In diesem Beispiel gibt es keine Ausgangsdatei, da alle Objekte per ActionScript erzeugt werden. Die Datei ist 550 * 400 Pixel groß und hat die Hintergrundfarbe #FF6600. Der komplette Code landet im ersten Schlüsselbild des Hauptfilms.

Zuerst legen Sie einige Variablen an und versehen sie mit Werten. Die Zählervariable i dient dazu, den leeren MovieClips, in denen die Dreiecke landen, Namen zu geben:

var i:Number = 0;

alpha_num bestimmt die Transparenz der Dreiecke. Wenn Sie möchten, können Sie den Wert verändern.

var alpha_num:Number = 55;

Nun folgen die zufälligen Koordinaten für die beiden Punkte, die die zentrale Gerade aller Dreiecke bilden sollen:

var posX1_num:Number = Math.floor(Math.random() * 551);
var posY1_num:Number = Math.floor(Math.random() * 401);
var posX2_num:Number = Math.floor(Math.random() * 551);
var posY2_num:Number = Math.floor(Math.random() * 401);
var posX3_num:Number, posY3_num:Number;

Die Variablen für die Koordinate der flexiblen Spitze definieren Sie der Ordnung halber bereits hier.

Anschließend starten Sie die Animation, indem Sie in regelmäßigen Abständen (hier 50 Millisekunden) die Funktion zeichnen() aufrufen:

var id_num:Number = setInterval(zeichnen, 50);

Hier kommt setInterval() zum Einsatz, da sich mit dieser Funktion die Animationsgeschwindigkeit flexibel einstellen lässt.

Wollen Sie die Geschwindigkeit der Animation variieren, ändern Sie einfach das Intervall.

Die bereits definierten Variablen für den Zähler, die Transparenz und die Koordinaten übergeben Sie nicht als Parameter; sie wurden nämlich in derselben Zeitleiste und sogar in demselben Schlüsselbild wie die Funktion zeichnen() definiert. Also stehen sie in der Funktion bereits als nicht-lokale Variablen zur Verfügung.

Im nächsten Schritt beginnen Sie mit der Funktion zeichnen():

function zeichnen() {
   //Farbe und dritte Position zufällig bestimmen
   posX3_num = Math.floor(Math.random() * 551);
   posY3_num = Math.floor(Math.random() * 401);

Zuerst bestimmen Sie die zufälligen Koordinaten für den dritten Punkt des Dreiecks. Da dies am Anfang der Funktion passiert, die regelmäßig aufgerufen wird, ändert sich die Koordinate bei jedem Aufruf.

Nun definieren Sie eine Variable für die Farbe des Dreiecks:

var farbe:String = "0x" + farbe();

Die Farbe muss zufällig bestimmt werden. Dies erledigt die Funktion farbe(), die Sie noch schreiben müssen (siehe Schritt 9).

Tipp: Wenn Sie wissen, dass Sie eine Funktion schreiben wollen, fügen Sie den Aufruf gleich ein. Beim Testen meldet Ihnen der ActionScript-Interpreter allerdings einen Fehler, da die Funktion noch fehlt. Fügen Sie deswegen einen Testwert ein oder kommentieren Sie die entsprechende Stelle aus (einzeiliger Kommentar: //).

Als Nächstes erstellen Sie einen neuen, leeren MovieClip:

_root.createEmptyMovieClip("dreieck" +  i + "_mc", i);

Sehen Sie den Trick in dieser Zeile? Wir bilden den Namen des MovieClips aus Zeichenketten und dem Wert der Zählervariablen i. Die Tiefe des MovieClips besteht ebenfalls aus dem Wert von i. Der Hintergrund: i können Sie bei jedem Funktionsaufruf verändern (siehe Schritt 8), dadurch heißt jeder MovieClip anders und hat eine eigene Tiefe. Alle MovieClips lassen sich so übereinander lagern.

Greifen Sie mit der with()-Anweisung auf den neuen, leeren MovieClip zu:

with (_root["dreieck" +  i + "_mc"]) {

Die Syntax für den Zugriff ist sehr praktisch: In eckigen Klammern können Sie den Namen des MovieClips als String zusammensetzen und die Variable i dazu verwenden. In der normalen Punktsyntax (_root.movieclip_mc) wäre dies nicht möglich.

Anschließend zeichnen Sie das Dreieck mit den Koordinaten der drei Punkte und füllen es mit der zufällig gewählten Farbe:

   lineStyle(1, "0x505050", alpha_num);
   beginFill(farbe, alpha_num – 35);
   moveTo(posX3_num, posY3_num);
   lineTo(posX2_num, posY2_num);
   lineTo(posX1_num, posY1_num);
   lineTo(posX3_num, posY3_num);
   endFill()
}

Vergessen Sie nicht, die with ()-Anweisung wieder zu schließen.

Am Ende der Funktion zeichnen() erhöhen Sie den Zähler i um 1 und schließen die Funktion mit der geschweiften Klammer (}):

i++;
}

Noch ein kleiner Tipp: Wenn Sie sehen möchten, wie sich der Zähler verändert, geben Sie ihn einfach mit trace(i) aus. So können Sie auch testen, wenn etwas nicht klappt.

Abbildung 13.5 Der Zähler rast mit der Animation nach oben.

Zum Schluss schreiben Sie die Funktion für das zufällige Bestimmen der Farbe:

function farbe():String {
   //Rot-Wert: komplett zufällig
   var zr:Number = Math.floor(Math.random() * 256);
   var r1:Number = Math.floor(zr / 16);
   var r2:Number = zr % 16;
   var r:String = hexa(r1) + hexa(r2);
   //Grün-Wert: abhängig vom Rot-Wert
   var zg:Number = zr + Math.floor(Math.random() * 31);
   if(zg > 255) {
      zg = zr;
   }
   var g1:Number = Math.floor(zg / 16);
   var g2:Number = zg % 16;
   var g:String = hexa(g1) + hexa(g2);
   //Blau-Wert: abhängig vom Grün-Wert
   var zb:Number = zg + Math.floor(Math.random() * 31);
   if(zb > 255) {
      zb = zg;
   }
   var b1:Number = Math.floor(zb / 16);
   var b2:Number = zb % 16;
   var b:String = hexa(b1) + hexa(b2);
   return r + g + b;
}

Die Funktion ist etwas länger, basiert aber auf den Grundprinzipien aus dem Abschnitt »Zufall und Animation«. Wir haben nur den ersten Farbwert (Rot) komplett zufallsbasiert gewählt, die anderen beiden Farbwerte sind vom ersten Farbwert abhängig. Der zweite Wert darf sich gegenüber dem ersten maximal um 30 Einheiten verändern, der dritte gegenüber dem zweiten um maximal 30. Die Stärke der Änderung ist dabei auch zufallsbasiert. Der Zweck dieser angepassten Änderung besteht darin, extreme Farbwerte auszusortieren und nur ganz bestimmte Farben zu erhalten.

Die Funktion hexa() kommt analog zum Abschnitt »Zufall und Animation« zum Einsatz, um die RGB-Farbwerte in hexadezimale Ziffern umzuwandeln:

function hexa(x:Number):String {
   var erg_str:String;
   switch (x) {
   case 10 :
      erg_str = "A";
      break;
   case 11 :
      erg_str = "B";
      break;
   case 12 :
      erg_str = "C";
      break;
   case 13 :
      erg_str = "D";
      break;
   case 14 :
      erg_str = "E";
      break;
   case 15 :
      erg_str = "F";
      break;
   default :
      erg_str = x.toString();
   }
   return erg_str;
}

Achtung, manchmal macht der ActionScript-Interpreter Schwierigkeiten, wenn eine Funktion im Code aufgerufen wird, bevor sie definiert ist. In diesem Fall setzen Sie die Funktion einfach vor den Aufruf.

Abbildung 13.6 Aus wenigen werden viele Dreiecke.

Eine Animation mit vielen Rahmenparametern lässt sich beliebig anpassen. Die fertige Datei zum Experimentieren finden Sie auf der CD-ROM unter dem Namen zufallsanimation_AS2.fla bzw. zufallsanimation_AS1.fla. Eine der ersten Maßnahmen, die Sie ergreifen sollten, besteht darin, die Animation bei einer bestimmten Zahl an Aufrufen abzubrechen. Ansonsten belastet der wiederholte Funktionsaufruf mit dem dauernden Zeichnen neuer Elemente extrem die Performance Ihres Rechners. Dies ist bei einem Testrechner in Ordnung, freut aber den Nutzer im Netz nicht sehr. In der Datei zufallsanimation_abbrechen_AS2.fla (bzw. für Flash MX zufallsanimation_abbrechen_AS1.fla) löschen Sie den Funktionsaufruf mit clearInterval, wenn eine bestimmte Anzahl an Aufrufen erfolgt ist. Diese Anzahl haben wir mit einer Variablen (abbruch_num) änderbar gemacht.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.