Zum Inhalt springen
Der Guide für ein smartes Leben.
Programmierte Bewegung

Teil 3: Workshop: Flash Tweening mit Actionscript 2

Autoren: Redaktion pcmagazin und Frank Puscher • 27.4.2009 • ca. 2:45 Min

Experimentieren Sie mit anderen Zeichnungsfunktionen anstelle von lineTo. So können Sie mit curveTo auch Kurven hinter der Maus zeichnen. Sie benötigen aber noch zwei weitere Parameter, die die Abweichung von einer Geraden definieren. Übrigens: Das lineStyle-Attribut ist sehr komplex und kann g...

Experimentieren Sie mit anderen Zeichnungsfunktionen anstelle von lineTo. So können Sie mit curveTo auch Kurven hinter der Maus zeichnen. Sie benötigen aber noch zwei weitere Parameter, die die Abweichung von einer Geraden definieren.

Übrigens: Das lineStyle-Attribut ist sehr komplex und kann ganz viele verschiedene Strichvarianten und Linienenden ausgeben. So erzeugt

lineStyle(25, 0xFF0000, 100, true,
"none", "none", "round");

eine Art rote Girlande mit feinen Segmenten.

Dynamischer Pinsel

Ausgehend von dieser einfachen Grundfunktion ist es nicht mehr weit, dem User eine kleine Zeichenanwendung zur Verfügung zu stellen.

Sie können jeden Parameter in der DrawAPI durch Actionscript modifizieren. Somit können Sie auch dem User die Kontrolle in die Hand geben, wenn Sie Interface-Elemente entwickeln, die dem Nutzer die Bedienung anschaulich vorführen.

Exemplarisch werden wir im Folgenden zwei unterschiedliche Interface-Varianten wählen, eine mit Buttons und eine mit einem Schieberegler. Verwenden Sie einfach den fertigen Film aus dem vorherigen Kapitel. Wenn Sie keinen erstellt haben, dann legen Sie einen neuen Film an und erzeugen Sie zwei ganz einfache Buttons.

Flash-Workshop
Der Schieberegler bestimmt die Deckkraft.
© Archiv

Der eine zeigt einen schwarzen, gefüllten Kreis, der andere ein schwarzes Quadrat. Ziehen Sie je eine Instanz davon auf die Bühne, klicken Sie sie mit der rechten Maustaste an und öffnen Sie das Actionscript-Fenster. Der Kreis bekommt folgende Programmierung:

on(press){
linienStaerke = 25;
}

Er ist also für die Manipulation der Strich-dicke zuständig. Das Quadrat reagiert auf:

on(press){
linienFarbe = "0x000000";
}

Die Wirkungsweise ist ziemlich offensichtlich. Nun erzeugen Sie vom Kreis vier Kopien und vom Quadrat sechs. Verkleinern Sie die Kreise auf 80, 60, 40 und 20 Prozent und richten Sie sie an der Seite gleichmäßig aus.

Verändern Sie die Programmierungen in den neuen Instanzen so, dass die Linienstärke in jedem Button fünf Pixel kleiner wird. Im kleinsten hat sie sogar nur zwei Pixel.

Bei den Quadraten erzeugen Sie sechs Duplikate. Drei für die Vollfarben Rot, Grün, Blau und weitere drei für die echten Mischfarben Gelb, Magenta und Cyan. Hier müssen die Programmierungen mit den passenden Hexadezimalwerten ausgestattet sein, also beispielsweise 0xFF0000 für Rot.

Der Schieberegler

Für die Veränderung der Deckkraft der Linien erzeugen wir ein etwas variableres Interface. Erzeugen Sie zunächst ein Rechteck mit abgerundeten Ecken als Anfasser für unseren Schieberegler.

Wandeln Sie dieses in einen Movieclip namens slider um und geben Sie ihm auch den gleichen Instanznamen (Eigenschaftsinspektor). Nun wandeln Sie den fertigen Clip sofort wieder in einen Movieclip um und nennen diesen sowohl als Symbol als auch als Instanz alpha_slider.

Doppelklicken Sie auf diesen Movieclip, um in seinen Bearbeitungsmodus zu gelangen. Erstellen Sie eine neue Ebene, ziehen Sie diese nach unten und zeichnen Sie eine 200 Pixel lange, horizontale Linie unter den Slider. Das ist die optische Entsprechung einer Schiene. Positionieren Sie diese auf den Koordinaten (-100,0), also mittig im Movieclip und richten Sie den slider am rechten Ende aus.

Erzeugen Sie eine weitere neue Ebene und schreiben Sie "Alpha =" in ein statisches Textfeld. Daneben legen Sie ein dynamisches Textfeld, das an die Variable _root.alpha_anzeige gekoppelt ist.

Die Programmierung des Slider

Alles Weitere sind ein paar Zeilen Action-script im ersten Frame in Szene 1. Sie sehen hier das gesamte Script, das teilweise identisch mit dem aus dem ersten Kapitel ist. Veränderungen sind rot markiert und nur diese werden jetzt noch erläutert.

button.onRelease = loeschen;
var linienStaerke:Number = 5;
var linienFarbe:String = "0xFF0000";
var linienAlpha:Number = 100;
var alpha_anzeige:Number = 100;
this.createEmptyMovieClip
("arbeitsflaeche", 999);

Zu Beginn des Films initialisieren wir vier Variablen. Drei davon verändern die Linie, eine die Alpha-Anzeige.

arbeitsflaeche.swapDepths(button);
arbeitsflaeche.onMouseDown = malen;
function malen() {
arbeitsflaeche.moveTo(_xmouse,
_ymouse);
arbeitsflaeche.onEnterFrame =
function(){
arbeitsflaeche.onMouseMove =
function(){
arbeitsflaeche.lineStyle
(_root.linienStaerke,
_root.linienFarbe, _root.
linienAlpha);