Programmierte Bewegung

Teil 3: Workshop: Flash Tweening mit Actionscript 2

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

© Archiv

Der Schieberegler bestimmt die Deckkraft.

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);

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".