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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…