15.2 Fähigkeiten
Movieclips sind von Haus aus nicht nur mit einer ganzen Reihe an Eigenschaften, sondern auch mit zahlreichen Fähigkeiten ausgestattet. Die Fähigkeiten von Movieclips finden sich im ActionScript-Editor in den Ordnern Methoden und Zeichnungsmethoden innerhalb der Kategorie Eingebaute Klassen • Film • Movieclip. Dabei lassen sich diese Fähigkeiten den folgenden Kategorien zuordnen:
|
Ereignismethoden |
|
Movieclip-Methoden |
|
Zeichnungsmethoden |
Eine Sonderolle haben die Ereignismethoden, mit denen sich das Kapitel »Ereignisse« ab Seite 301 ausführlich beschäftigt. Bleiben noch Movieclip- und Zeichnungsmethoden. Die Movieclip-Methoden beeinflussen die Gestalt einer Movieclip-Instanz, die Zeichnungsmethoden beziehen sich hingegen auf die Gestaltung einer Instanz – also auf deren Inhalt. Dieses Kapitel beschäftigt sich in erster Linie mit den Movieclip-Methoden. Wie Sie in Flash malen, erfahren Sie dann ab Seite 374.
Weitere Fähigkeiten
Movieclips besitzen neben den hier aufgezählten noch weitere Fähigkeiten, die für alle Objekte in Flash gelten und von der Klasse Object geerbt sind.
15.2.1 Movieclip-Methoden
attachMovie(id:String,name:String,depth:Number,initObject:Object):MovieClip;
|
Beschreibung: Fügt ein verknüpftes Movieclip-Symbol als neue Instanz ein. |
|
Rückgabewert: Movieclip-Instanz |
|
Aktion: - |
|
Flash Player Version: 5 |
createEmptyMovieClip(name:String,depth:Number):MovieClip;
|
Beschreibung: Erstellt eine leere Movieclip-Instanz. |
|
Rückgabewert: Movieclip-Instanz |
|
Aktion: - |
|
Flash Player Version: 6 |
createTextField(instanceName:String,depth:Number,x:Number,y:Number,width:Number,height:Number):Void;
|
Beschreibung: Erstellt eine Textfield-Instanz. |
|
Rückgabewert: - |
|
Aktion: - |
|
Flash Player Version: 6 |
duplicateMovieClip(name:String,depth:Number,initObject:Object):
MovieClip;
|
Beschreibung: Dupliziert eine Movieclip-Instanz (Klonen). |
|
Rückgabewert: Movieclip-Instanz |
|
Aktion: duplicateMovieClip (seit Flash 4) |
|
Flash Player Version: 5 |
getBounds(bounds:Object):Object;
|
Beschreibung: Ermittelt das Begrenzungsrechteck einer Movieclip-Instanz. |
|
Rückgabewert: Objekt mit den Eigenschaften xMin, xMax, yMin und yMax |
|
Aktion: - |
|
Flash Player Version: 5 |
getBytesLoaded():Number;
|
Beschreibung: Ermittelt die bereits geladenen Bytes eines Movieclips. |
|
Rückgabewert: Ganzzahl |
|
Aktion: - |
|
Flash Player Version: 5 |
getBytesTotal():Number;
|
Beschreibung: Ermittelt die Größe eines Movieclips in Byte. |
|
Rückgabewert: Ganzzahl |
|
Aktion: - |
|
Flash Player Version: 5 |
getDepth():Number;
|
Beschreibung: Ermittelt die Tiefe einer Movieclip-Instanz |
|
Rückgabewert: Ganzzahl |
|
Aktion: - |
|
Flash Player Version: 6 |
getInstanceAtDepth(depth:Number):MovieClip;
|
Beschreibung: Ermittelt die Instanz in der angegebenen Tiefe. |
|
Rückgabewert: Movieclip-Instanz |
|
Aktion: - |
|
Flash Player Version: 7 |
getNextHighestDepth():Number;
|
Beschreibung: Ermittelt die nächste freie Tiefe für eine untergeordnete Movieclip-Instanz in dem Movieclip. |
|
Rückgabewert: Ganzzahl |
|
Aktion: - |
|
Flash Player Version: 7 |
getSWFVersion():Number;
|
Beschreibung: Ermittelt die Flash-Version des Movieclips oder der darin liegenden SWF-Datei. |
|
Rückgabewert: Ganzzahl |
|
Aktion: - |
|
Flash Player Version: 7 |
getTextSnapshot():TextSnapshot;
|
Beschreibung: Ermittelt den statischen Text in einem Movieclip. |
|
Rückgabewert: TextSnapshot-Instanz |
|
Aktion: - |
|
Flash Player Version: 7 |
getURL(url:String,window:String,method:String):Void;
|
Beschreibung: Ruft ein Dokument von einer URL ab. |
|
Rückgabewert: - |
|
Aktion: getURL (seit Flash 2) |
|
Flash Player Version: 5 |
globalToLocal(pt:Object):Void;
|
Beschreibung: Konvertiert einen Punkt der Bühne in einen Punkt des Koordinatensystems der Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: - |
|
Flash Player Version: 5 |
gotoAndPlay(frame:Object):Void; // frame kann String oder Zahl sein.
|
Beschreibung: Wechselt in das angegebene Bild und spielt die Movieclip-Instanz weiter ab. |
|
Rückgabewert: - |
|
Aktion: gotoAndPlay (seit Flash 2) |
|
Flash Player Version: 5 |
gotoAndStop(frame:Object):Void; // frame kann String oder Zahl sein.
|
Beschreibung: Wechselt in das angegebene Bild und stoppt die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: gotoAndStop (seit Flash 2) |
|
Flash Player Version: 5 |
hitTest():Boolean; // Die Argumente können entweder target oder x, y, shapeFlag sein.
|
Beschreibung: Überprüft die Kollisison zweier Objekte bzw. eines Punktes mit einem Objekt. |
|
Rückgabewert: Boolean |
|
Aktion: - |
|
Flash Player Version: 5 |
loadMovie(url:String,method:String):Void;
|
Beschreibung: Lädt eine SWF-Datei von der angegebenen URL in die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: loadMovie (seit Flash 3) |
|
Flash Player Version: 5 |
loadVariables(url:String,method:String):Void;
|
Beschreibung: Lädt ein Dokument von der angegebenen URL in die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: loadVariables (seit Flash 4) |
|
Flash Player Version: 5 |
localToGlobal(pt:Object):Void;
|
Beschreibung: Konvertiert einen Punkt aus dem Koordinatensystem der Movieclip-Instanz in einen Punkt auf der Bühne. |
|
Rückgabewert: - |
|
Aktion: - |
|
Flash Player Version: 5 |
nextFrame():Void;
|
Beschreibung: Wechselt in das nächste Bild und stoppt die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: nextFrame (seit Flash 2) |
|
Flash Player Version: 5 |
play():Void;
|
Beschreibung: Spielt die Movieclip-Instanz ab. |
|
Rückgabewert: - |
|
Aktion: play (seit Flash 2) |
|
Flash Player Version: 5 |
prevFrame():Void;
|
Beschreibung: Wechselt in das vorherige Bild und stoppt die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: nextFrame (seit Flash 2) |
|
Flash Player Version: 5 |
removeMovieClip():Void;
|
Beschreibung: Entfernt die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: removeMovieClip (seit Flash 4) |
|
Flash Player Version: 5 |
setMask(mc:Object):Void; // mc darf String oder ein Movieclip sein.
|
Beschreibung: Maskiert die Movieclip-Instanz |
|
Rückgabewert: - |
|
Aktion: - |
|
Flash Player Version: 6 |
startDrag(lockCenter:Boolean,left:Number,top:Number,right:Number,bottom:Number):Void;
|
Beschreibung: Hängt eine Movieclip-Instanz an den Mauszeiger. |
|
Rückgabewert: - |
|
Aktion: startDrag (seit Flash 4) |
|
Flash Player Version: 5 |
stop():Void;
|
Beschreibung: Stoppt die Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: stop (seit Flash 2) |
|
Flash Player Version: 5 |
stopDrag():Void;
|
Beschreibung: Löst eine Movieclip-Instanz vom Mauszeiger. |
|
Rückgabewert: - |
|
Aktion: stopDrag (seit Flash 4) |
|
Flash Player Version: 5 |
swapDepths(mc:Object):Void; // mc darf ein String oder eine Zahl sein.
|
Beschreibung: Verändert die Tiefe (Stapelreihenfolge) einer Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: - |
|
Flash Player Version: 5 |
unloadMovie():Void;
|
Beschreibung: Löscht den Inhalt einer Movieclip-Instanz. |
|
Rückgabewert: - |
|
Aktion: unloadMovie (seit Flash 3) |
|
Flash Player Version: 5 |
valueOf():MovieClip;
|
Beschreibung: Ermittelt den Wert des Movieclips. |
|
Rückgabewert: MovieClip-Instanz |
|
Aktion: - |
|
Flash Player Version: 5 |
15.2.2 Zeichnungsmethoden
Die Zeichnungsmethoden zählen zu den herausragenden Neuigkeiten in Flash MX. Mit diesen ist es seit dieser Version nun endlich möglich, Grafiken zur Laufzeit mit ActionScript zu erzeugen, ohne auf vorgefertigte Elemente zurückgreifen zu müssen. Die Zeichnungsmethoden für Movieclips hat Macromedia innerhalb des ActionScript-Editors unter Zeichnungsmethoden in der Kategorie Eingebaute Klassen • Film • Movieclip aufgelistet.
linientrick.fla
Aufgrund der vektororientierten Darstellung ist Flash prädestiniert für die Anzeige von dynamischen Grafiken wie zum Beispiel mathematische Graphen oder Kuchendiagramme. Bis Flash MX war dafür jedoch der so genannte Linientrick oder ein Zusatzprodukt wie der mittlerweile eingestellte Macromedia Generator notwendig. Flash MX zeichnet hingegen mit den so genannten Zeichnungsmethoden auch ohne Tricks und Zusatzprodukte. Die neuen Funktionen erweitern darüber hinaus die vielfältigen Einsatzgebiete der Flash-Technologie – egal ob es um die Visualisierung von Börsenkursen oder von technischen Zeichnungen geht, ob dreidimensionale Objekte benötigt werden oder ob Sie einfach nur künstlerisch arbeiten möchten.
Welche Zeichnungsmethoden gibt es?
beginFill(rgb:Number,alpha:Number):Void;
|
Beschreibung: Beginnt, auf der Bühne eine Füllung zu zeichnen. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
beginGradientFill(fillType:String,colors:Array,alphas:Array,ratios:Array,matrix:Object):Void;
|
Beschreibung: Beginnt, auf der Bühne einen Verlauf zu zeichnen. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
clear():Void
|
Beschreibung: Entfernt alle mit einer Movieclip-Instanz verbundenen
Zeichenbefehle. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
curveTo(controlX:Number,controlY:Number,anchorX:Number,anchorY:
Number):Void;
|
Beschreibung: Zeichnet eine Kurve mit dem zuletzt verwendeten Strichtyp. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
endFill():Void;
|
Beschreibung: Beendet eine mit beginFill oder beginGradientFill begonnene Füllung. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
lineStyle(thickness:Number,rgb:Number,alpha:Number):Void;
|
Beschreibung: Definiert den Strichtyp für mit den Methoden lineTo und curveTo erstellte Linien. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
lineTo(x:Number,y:Number):Void;
|
Beschreibung: Zeichnet eine Linie mit dem aktuellen Strichtyp. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
moveTo(x:Number,y:Number):Void;
|
Beschreibung: Verschiebt die aktuelle Zeichnungsposition an die angegebene Position. |
|
Rückgabewert: - |
|
Alternative Aktion: - |
|
Flash Player Version: 6 |
Linientrick
Da es bis Flash MX nicht möglich war, Zeichnungen frei zu erstellen, setzen viele Entwickler den Linientrick ein. Dafür wird eine Linie mit einem Winkel von 45 Grad als Movieclip benötigt – der Einfachheit halber vorzugsweise mit einer Höhe und Breite von jeweils 100 Pixeln. Dieser Movieclip dient dann als Baustein für alle weiteren Grafiken. Dabei macht sich der Entwickler die Eigenschaften wie Höhe und Breite zunutze, um die Linie den Erfordernissen anzupassen. Dieser Trick funktioniert natürlich nicht nur mit Linien, sondern auch mit anderen Grafiken. Linien haben aber den Vorteil, dass sie aufgrund ihrer schlichten geometrischen Natur recht einfach zu verwalten sind.
Übrigens verhindert der Strichstil »Haarlinie« weitestgehend die Veränderung (Vergrößerung) der Strichdicke.
Hier klicken, um das Bild zu Vergrößern
lineTo
Abbildung 15.1
Die lineTo-Methode erstellt gerade Striche.
linieTo.fla
Um den Inhalt eines Movieclips frei zu gestalten, sind in der Regel die folgenden Schritte notwendig:
1. |
1. Bestimmen Sie die Movieclip-Instanz, die als »Zeichenfläche« dient. Häufig ist es von Vorteil, eine neue Instanz speziell für das Zeichnen zu erzeugen: |
|
|
var myCanvas = _root.createEmptyMovieClip("mcCanvas", 1);
myCanvas._x = Stage.width/2;
myCanvas._y = 50;
2. |
2. Sollte bereits etwas in dem Movieclip per ActionScript gezeichnet sein, dann bietet es sich an, dies zu löschen: |
|
|
myCanvas.clear();
3. |
3. Bestimmen Sie die Attribute Strichstärke, Strichfarbe und Tranzparenz für die Linien, da die Linie sonst nicht sichtbar ist: |
|
|
myCanvas.lineStyle(0, 0x009933, 100);
4. |
4. Zeichnen Sie die Linien wie bei einem Stiftplotter, indem Sie zuerst eine Startposition festlegen, ab der eine oder mehrere Linien gezeichnet werden: |
|
|
myCanvas.moveTo(0, 0);
5. |
5. Für gerade Linien verschieben Sie die Position des virtuellen »Stifts« zu gewünschten Positionen, und fertig ist - in diesem Fall - ein Tannenbaum: |
|
|
myCanvas.lineTo(-100, 200);
myCanvas.lineTo(-25, 200);
myCanvas.lineTo(-25, 250);
myCanvas.lineTo(25, 250);
myCanvas.lineTo(25, 200);
myCanvas.lineTo(100, 200);
myCanvas.lineTo(0, 0);
curveTo
Alternativ beherrscht Flash auch die Zeichnung von Kurven mit Hilfe von Anker- und Steuerpunkten. Dabei legt der Ankerpunkt fest, bis wohin die Linie gehen soll, und der Steuerpunkt bestimmt die Krümmung. Die folgenden Zeilen erzeugen somit einen eher geschwungenen Tannenbaum:
Hier klicken, um das Bild zu Vergrößern
Abbildung 15.2
Die curveTo-Methode zeichnet Kurven.
myCanvas.moveTo(0,_0);
curveTo.fla
myCanvas.curveTo(-25,100,–100, 200);
myCanvas.lineTo(-25, 200);
myCanvas.lineTo(-25, 250);
myCanvas.lineTo(25, 250);
myCanvas.lineTo(25, 200);
myCanvas.lineTo(100, 200);
myCanvas.curveTo(25, 100, 0, 0);
Steuerpunkte
Das Verhalten der Anker- und Steuerpunkte ähnelt sehr den aus Illustrationsprogrammen bekannten Bézierkurven. Die Ankerpunkte bestimmen den Start- und Endpunkt. Die Krümmung wird hingegen nicht mit zwei, sondern mit nur einem einzigen Steuerpunkt festgelegt. Dies gilt übrigens für alle Zeichnungen in Flash und ist als quadratische Bézierkurve bekannt (http://www.macromedia.com/support/flash/ts/documents/beziers.htm). Der Vorteil dieser Methode ist eine etwas schnellere Darstellung und weniger Speicherplatzbedarf, da nur drei anstelle von vier Punkten benötigt werden. Das folgende Skript stellt sowohl die Tangenten als auch die resultierende Kurve dar:
Hier klicken, um das Bild zu Vergrößern
Abbildung 15.3
Der Steuerpunkt legt die beiden Tangenten fest, welche die Krümmung
einer Kurve bestimmen.
_root.onEnterFrame_=_function()_{
steuerpunkt.fla
// Definiere Steuerpunkt
var s = new Object();
s.x = this._xmouse;
s.y = this._ymouse;
// Definiere Ankerpunkte
var a = new Object();
a.x = Stage.width/2;
a.y = Stage.height/3;
var b = new Object();
b.x = Stage.width/2;
b.y = Stage.height*2/3;
// Lösche Graphik
this.clear();
// Setze Linienstil für Verbindungslinien
this.lineStyle(0, 0x667788, 50);
// Zeichne Verbindungslinie
this.moveTo(a.x, a.y);
this.lineTo(b.x, b.y);
this.lineTo(s.x, s.y);
this.lineTo(a.x, a.y);
// Setze Linienstil für Kurve
this.lineStyle(2, 0x880000, 50);
// Zeichne Kurve
this.moveTo(a.x, a.y);
this.curveTo(s.x, s.y, b.x, b.y);
};
Formen füllen
Um mit lineTo und curvoTo erstellte Formen nicht nur mit einer Linie zu versehen, sondern auch zu füllen, existieren zwei Möglichkeiten: Formen dürfen mit einer einzelnen Farbe oder mit einem Verlauf versehen werden. Für Verläufe stehen darüber hinaus die Alternativen geradlinig (linear) oder kreisförmig (radial) zur Verfügung.
Hier klicken, um das Bild zu Vergrößern
Abbildung 15.4
Flash beherrscht neben den Strichen auch die Darstellung von Füllungen.
Einfarbige Füllung
Eine einfarbige Füllung leiten Sie mit der Methode beginFill unter Angabe der Farbe und der Transparenz ein. Das Ende legt die Methode endFill fest. Alle Formen, die Sie dazwischen definieren, erhalten automatisch die entsprechende Füllung:
myCanvas.beginFill(0x99CC99, 100);
fill.fla
myCanvas.curveTo(-25, 100, -100, 200);
myCanvas.lineTo(-25, 200);
myCanvas.lineTo(-25, 250);
myCanvas.lineTo(25, 250);
myCanvas.lineTo(25, 200);
myCanvas.lineTo(100, 200);
myCanvas.curveTo(25, 100, 0, 0);
myCanvas.endFill();
Verlaeufe
Etwas schwieriger gestaltet sich der Einsatz von Verläufen. Diese benötigen zuerst einmal die Angabe, ob es sich um einen linearen oder radialen Verlauf handelt:
var fillType="linear";
gradiant Fill.fla
Hier klicken, um das Bild zu Vergrößern
Abbildung 15.5
Sollten einfarbige Füllungen nicht ausreichen, dann bieten sich Verläufe an.
Die Farbwerte und die zugehörigen Transparenzen legen Sie in einem Array ab. Dabei ist zu beachten, dass für jede Farbe in jedem Array genau eine Zelle verwendet wird – d.h. die Elementzahl der Arrays muss übereinstimmen:
var colors=[0x006633, 0x66FF99];
var alphas=[100,100];
Farbverteilung des Verlaufs
Bei der Farbverteilung handelt es sich ebenfalls um ein Array. In diesem legen Sie die Position der Farbe innerhalb des Verlaufs fest – ganz genauso wie im Farbmischer. Der Wert darf zwischen 0 und 255 liegen und gibt die Position im Verlauf von links nach rechts an.
var ratios=[0,255];
Größe und Richtung des Verlaufs
Die größte Herausforderung sind die Angaben für die Größe und Richtung des Verlaufs. Der einfachste Fall ist eine Box aus Position, Höhe, Breite und Drehung:
matrix.matrixType="box";
matrix.x=-100;
matrix.y=0;
matrix.w=200;
matrix.h=500;
matrix.r=0;
Alternativ darf eine Transformationsmatrix gewählt werden, die zur Anpassung von Skalierung, Verschiebung, Drehung und Neigung des Einheitsfarbverlaufs dient – Kenntnisse der Matrizenrechnung sind an dieser Stelle sicherlich von Vorteil, um die Matrix aus drei Spalten und drei Zeilen korrekt einzusetzen. Wen diese Mathematik abschreckt, dem steht ja glücklicherweise die einfachere Box-Version zur Verfügung.
var matrix=new Object();
// Transformationsmatrix
// a b c
// d e f
// g h i
// erste Spalte der Matrix
matrix.a=100;
matrix.d=0;
matrix.g=0;
// zweite Spalte der Matrix
matrix.b=0;
matrix.e=100;
matrix.h=0;
// dritte Spalte der Matrix
matrix.c=0;
matrix.f=0;
matrix.i=100;
Der Rest verhält sich wie bei den einfarbigen Verläufen. D. h. zuerst wird der Verlauf mit beginGradientFill »gestartet« und dann mit endFill »gestoppt«.
myCanvas.beginGradientFill(fillType, colors, alphas, ratios, matrix);
myCanvas.curveTo(-25, 100, -100, 200);
myCanvas.lineTo(-25, 200);
myCanvas.lineTo(-25, 250);
myCanvas.lineTo(25, 250);
myCanvas.lineTo(25, 200);
myCanvas.lineTo(100, 200);
myCanvas.curveTo(25, 100, 0, 0);
myCanvas.endFill();
Interaktive Objekte
Die Zeichnungsmethoden eignen sich aber nicht nur für statische Objekte. Kombiniert mit den neuen Ereignismethoden entsteht so in nur wenigen Zeilen zum Beispiel ein interaktives Malprogramm:
var target=_root;
malprogramm.fla
target.lineStyle(1, 0x667788, 50);
target.onMouseDown=function () {
this.moveTo(this._xmouse, this._ymouse);
this.draw=true;
}
target.onMouseUp=function () {
this.draw=false;
}
target.onMouseMove=function () {
if (this.draw) {
this.lineTo(this._xmouse, this._ymouse);
updateAfterEvent();
}
}
Hier klicken, um das Bild zu Vergrößern
Abbildung 15.6
Ein einfaches Malprogramm ist in Flash mit wenigen Zeilen Programmcode schnell erstellt.
Übrigens finden Sie die Beispiele aus diesem Kapitel auch auf der CD-ROM zum Buch. Viel Spaß beim Ausprobieren!
|