Rheinwerk Design < openbook > Rheinwerk Design - Know-how für Kreative.
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
Ihre Meinung?

Spacer
 <<   zurück
Einstieg in ActionScript von Christian Wenz, Tobias Hauser, Armin Kappler
Aktuell zu Flash 8
Buch: Einstieg in ActionScript

Einstieg in ActionScript
brosch., mit CD und QuickFinder und Referenz
416 S., 24,90 Euro
Rheinwerk Design
ISBN 978-3-89842-774-6
Pfeil 13 Zeichnen und Zufall
  Pfeil 13.1 Zeichnen
  Pfeil 13.2 Tiefe
  Pfeil 13.3 Fortlaufende Animation mit setInterval oder onEnterFrame?
  Pfeil 13.4 Zufall und Animation
  Pfeil 13.5 Alles in einem

13 Zeichnen und Zufall

Animieren mit Hilfe des Zufalls und der Zeichenfunktionen

Sie werden lernen:

  • Wie zeichnen Sie einfache Formen mit ActionScript?
  • Wie entsteht eine fortlaufende Animation?
  • Wie lässt sich der Zufall für das Animieren verwenden?

Die zwei größten Tyrannen der Erde: der Zufall und die Zeit. – Herder

Zeichnen mit ActionScript, das klingt in den Ohren eines Designers etwas merkwürdig. Normalerweise gestalten Sie Vektorformen mit den Zeichenwerkzeugen oder mit einem Vektorgrafikprogramm wie FreeHand oder Illustrator. Manchmal lohnt es sich aber, Formen zu programmieren. Auf diese Weise können Sie Formen dynamisch erstellen, vielleicht ein wenig mit dem Zufall spielen und daraus ganze Animationen basteln.

Dieses Kapitel zeigt Ihnen die Grundlagen für das programmierte Zeichnen, stellt die verschiedenen Möglichkeiten für eine fortlaufende Animation vor und bringt den Zufall ins Spiel. Aus allen drei Komponenten entsteht ein Anwendungsbeispiel mit einer interessanten Animation. Quasi im Vorübergehen erfahren Sie, wie Sie einen neuen, leeren MovieClip erstellen und was es mit dem Konzept der Tiefe auf sich hat.


Rheinwerk Computing - Zum Seitenanfang

13.1 Zeichnen  topZur vorigen Überschrift

Für das Zeichnen bietet ActionScript verschiedene Methoden. Diese Methoden sind der MovieClip-Klasse untergeordnet. Sie finden Sie im Aktionen-Bedienfeld unter Integrierte Klassen • Film • MovieClip • Zeichnungsmethoden.

Die Grundlage für das Zeichnen ist ein MovieClip: Nur innerhalb eines MovieClips können Sie die Zeichnungsmethoden einsetzen. Eigentlich handelt es sich hier um die bereits bekannten Methoden der MovieClip-Klasse. Die Zeichnungsmethoden haben nur wegen ihrer besonderen Funktion im Aktionen-Bedienfeld eine eigene Sparte bekommen.

Die Zeichnungsmethoden gibt es erst seit Flash MX, in Flash 5 müssen Sie darauf verzichten.

In der Praxis verwenden Sie die Zeichnungsmethoden nicht mit einem bestehenden MovieClip, sondern mit einem neuen, leeren MovieClip. Sie erzeugen ihn mit der Methode createEmptyMovieClip(Name, Tiefe); diese Methode gehört auch zur MovieClip-Klasse. Das heißt, Sie benötigen ein MovieClip-Objekt, an das Sie den neuen, leeren MovieClip anhängen:

_root.createEmptyMovieClip("neu_mc", 1);

Die obige Zeile hängt den neuen MovieClip mit dem Namen neu_mc an den Hauptfilm. Der MovieClip landet auf einer eigenen Tiefe. Das Konzept der Tiefe erklären wir Ihnen im nächsten Abschnitt.

Abbildung 13.1 Die Zeichnungsmethoden im Aktionen-Bedienfeld

Nun können Sie diesen MovieClip mit den bekannten Eigenschaften und Methoden verändern. Wir positionieren den MovieClip neu (_x für die x-Koordinate, _y für die y-Koordinate):

neu_mc._x = 150;
neu_mc._y = 30;

Nun kommen die Zeichnungsmethoden zum Einsatz, um den MovieClip zu füllen:

neu_mc.lineStyle(1, 0x000000, 100);
neu_mc.beginFill(0xFF2222);
neu_mc.moveTo(10,10);
neu_mc.lineTo(10,110);
neu_mc.lineTo(110,110);
neu_mc.lineTo(110,10);
neu_mc.lineTo(10,10);
neu_mc.endFill();

Können Sie sich vorstellen, was dieser Code ausgibt? Gehen wir die einzelnen Schritte durch:

  • Die Methode lineStyle(Linienstärke, Farbe, Deckkraft) legt fest, wie die Linie aller nach Anweisung gezeichneten Elemente aussieht:
neu_mc.lineStyle(1, 0x000000, 100);
  • Als Nächstes startet die Füllung des Elements. Als Parameter geben Sie eine Farbe für die Füllung an:
neu_mc.beginFill(0xFF2222);
  • Nun geht es an das Zeichnen des Elements: Zuerst bewegen Sie den (virtuellen) Zeichenstift an die Stelle, wo Ihre Zeichnung starten soll. Dazu verwenden Sie die Methode moveTo(x, y). Das Koordinatensystem bezieht sich auf den Registrierungspunkt des MovieClips – in diesem Fall handelt es sich um den leeren MovieClip.
neu_mc.moveTo(10, 10);
  • Die Methode lineTo(x, y) zieht jetzt die Linie entlang der Koordinaten. Das Ergebnis der auf der nächsten Seite folgenden vier Methodenaufrufe ist ein Quadrat.
neu_mc.lineTo(10,110);

Farben und Verläufe

Selbst gezeichnete Elemente können beliebige Farben annehmen. Die Farben werden als hexadezimale Werte angegeben. Mit der Methode beginGradientFill() lässt sich übrigens auch ein Verlauf zeichnen. In Flash 8 gibt es noch eine zusätzliche Methode: lineGradientStyle(). Mit ihr können Sie auch Linien mit einem Verlauf füllen.


neu_mc.lineTo(110,110);
neu_mc.lineTo(110,10);
neu_mc.lineTo(10,10);
  • Mit endFill() beenden Sie das Füllen des Elements:
neu_mc.endFill();

Abbildung 13.2 Das von Hand program- mierte Quadrat

Um sich Tipparbeit zu ersparen, können Sie auch eine with ()-Anweisung verwenden; damit gelten alle Zeichnungsmethoden für das Objekt innerhalb von with (Objekt):

with (neu_mc) {
   lineStyle(1, 0x000000, 100);
   beginFill(0xFF2222);
   moveTo(10, 10);
   lineTo(10, 110);
   lineTo(110, 110);
   lineTo(110, 10);
   lineTo(10, 10);
   endFill();
}

Das einfache Beispiel finden Sie auf der CD-ROM unter dem Namen zeichnungsmethoden.fla in den Ordnern Flash8, FlashMX2004 und FlashMX für die beiden Flash-Versionen.



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.

 <<   zurück
  
  Zum Rheinwerk-Shop
Zum Rheinwerk-Shop: ActionScript 3 – Das Praxisbuch
ActionScript 3
Das Praxisbuch

bestellen
 Ihre Meinung?
Wie hat Ihnen das Openbook gefallen?
Ihre Meinung

 Buchtipps
Zum Rheinwerk-Shop: JavaScript






 JavaScript


Zum Rheinwerk-Shop: jQuery






 jQuery


Zum Rheinwerk-Shop: Responsive Webdesign






 Responsive Webdesign


Zum Rheinwerk-Shop: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


Zum Rheinwerk-Shop: Schrödinger lernt HTML5, CSS3 und JavaScript






 Schrödinger lernt
 HTML5, CSS3
 und JavaScript


 Lieferung
Versandkostenfrei bestellen in Deutschland, Österreich und der Schweiz
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Rheinwerk Verlag GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de

Cookie-Einstellungen ändern