Know-how für Kreative.

Inhaltsverzeichnis
Vorwort
1 Flash für ActionScript
2 ActionScript in Flash
3 Flash Pro für ActionScript
4 Grundlagen der Programmierung
5 Einfache Filmsteuerung
6 Bildschirme und Präsentationen
7 Drucken und das Kontextmenü
8 Textfelder
9 Tasten
10 Datum und Zeit
11 Rechnen
12 Farbe wechseln und Drag
13 Zeichnen und Zufall
14 Von Mäusen und Duplikaten
15 Kollisionstest
16 Sound
17 Video
18 Externe Filme
19 Vorladen und Player erkennen
20 Formulare und UI-Komponenten
21 Komponenten anpassen
22 Formulare versenden
23 Warenkorb
24 Ausblick auf ActionScript 3
Stichwort
Download: - ZIP, ca. 14,4 MB
Ihre Meinung?
<< zurück | Galileo Design / <openbook> /Einstieg in ActionScript | vor >>
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler Aktuell zu Flash 8
Einstieg in ActionScript brosch., mit CD und QuickFinder und Referenz 416 S., 24,90 Euro Galileo Design ISBN 978-3-89842-774-6 |
| 13 Zeichnen und Zufall
|  | 13.1 Zeichnen
|  | 13.2 Tiefe
|  | 13.3 Fortlaufende Animation mit setInterval oder onEnterFrame?
|  | 13.4 Zufall und Animation
|  | 13.5 Alles in einem
## 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. Hier klicken, um das Bild zu vergrößern 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. Hier klicken, um das Bild zu vergrößern 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. Hier klicken, um das Bild zu vergrößern Hier klicken, um das Bild zu vergrößern 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. ### Ihr Kommentar Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen. >> Zum Feedback-Formular
<< zurück | <top> | vor >>
Zum Katalog
ActionScript 3 Das Praxisbuch bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| Adobe Flash CS3
| Flash fast forward
| Dreamweaver CS3
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2006
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Design]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de