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 12 Farbe wechseln und Drag
  Pfeil 12.1 Animation mit ActionScript
  Pfeil 12.2 Wechselspiele
  Pfeil 12.3 Drag
  Pfeil 12.4 Schieberegler


Rheinwerk Computing - Zum Seitenanfang

12.4 Schieberegler  topZur vorigen Überschrift

Ein Element des Chamäleon-Beispiels blieb bisher unbeachtet: der Schieberegler an der rechten Seite der Palette. Ein Schieberegler gehört zu den häufiger benötigten Elementen, dennoch besteht das Vorurteil, es sei schwierig einen eigenen zu realisieren. Doch mit Ihrem bisher angesammelten Wissen können Sie sich durchaus an seine Gestaltung wagen. Der Schieberegler in der Palette soll die Deckkraft des Chamäleons anpassen, das heißt die Farbintensität des Chamäleons wird damit festgelegt. Die Deckkraft selbst ist eine Eigenschaft namens _alpha des MovieClip-Objekts und wird in Prozent von 0 (keine Deckkraft) bis 100  % (volle Deckkraft) angegeben.


Deckkraft und Transparenz

Deckkraft ist das Gegenteil von Transparenz; hat ein Element 100  % Deckkraft, besitzt es 0  % Transparenz. Bei 0  % Deckkraft ist ein Element unsichtbar und damit 100  % transparent.


Abbildung 12.9 Der Registrierungspunkt (1) des Schiebereglers befindet sich im Ursprungspunkt des untergeordneten Transparenzreglers.

Bevor Sie aber beginnen, werfen Sie einen kurzen Blick auf den Aufbau des Schiebereglers: Der Schieberegler ist ein MovieClip. In unserem Beispiel trägt er den Instanznamen schieberegler_mc. Ihm untergeordnet finden Sie einen eigenen MovieClip für den eigentlichen Regler (transparenzregler_mc). Dieser Regler muss bewegt werden und entscheidet dann mit seiner Position über die Transparenz des Chamäleons. Die Position des Transparenzreglers ist immer relativ zum Registrierungspunkt des übergeordneten Schiebereglers. Der Einfachheit halber haben wir in der Ausgangssituation den Registrierungspunkt des Schiebereglers genau am Ursprung des Transparenzreglers gewählt. Dadurch hat der Transparenzregler die Ausgangsposition _x = 0 und _y = 0.

Schritt für Schritt: Schieberegler

Sollten Sie die letzten Schritte nicht praktisch nachvollzogen haben, finden Sie die Ausgangsdatei unter dem Namen chamaeleon_dragdrop_AS2.fla auf der CD-ROM.

Aktivieren Sie den MovieClip für den Transparenzregler und wechseln Sie in das Aktionen-Bedienfeld, um dort den Code einzutragen:

Abbildung 12.10 Im Aktionen-Bedienfeld erkennen Sie unten, dass Sie sich beim Transparenzregler befinden.

Wir haben der Übersichtlichkeit halber auf den Einsatz von Ereignisprozeduren verzichtet. Wenn Sie trotzdem mit einer Ereignisprozedur arbeiten möchten, finden Sie den Transparenzregler unter der Adresse: _root.palette_mc.schieberegler_mc.transparenzregler_mc

Beim Laden des MovieClips mit dem Transparenzregler legen Sie einige Werte fest, die später bei Drag & Drop zum Einsatz kommen:

onClipEvent (load) {
   var regOben_num:Number = this._y – 100;
   var regUnten_num:Number = this._y;
   var regLinks_num:Number = this._x;
   var regRechts_num:Number = this._x;
}

regOben_num speichert die obere Begrenzung des Reglers und übernimmt als Wert die Ausgangskoordinate des Transparenzreglers (hier 0) minus 100. Das heißt, die obere Begrenzung liegt 100 Pixel über der aktuellen Position des Transparenzreglers. Die untere Begrenzung (regUnten_num) gibt die aktuelle Position an. Nach links und rechts darf der Transparenzregler nicht verschoben werden, deswegen sind beide Begrenzungen auf die aktuelle x-Koordinate gesetzt.

Fügen Sie als Nächstes das Ereignis press hinzu:

on (press) {

Damit fangen Sie das Tastaturereignis ab, wenn der Nutzer den Transparenzregler anklickt und Sie können Drag & Drop starten.

Öffnen Sie das Auge des Chamäleons mit folgendem Code:

_root.augezu_mc._visible = false;

Jetzt wird das Chamäleon immer »wach«, wenn der Nutzer die Deckkraft seiner Farben verändert. Außerdem müssen Sie so nicht die Deckkraft des Auges mit verändern.

Starten Sie Drag & Drop und verwenden Sie als Begrenzung die Werte, die Sie für den Transparenzregler vorbereitet haben:

startDrag(this, false, regLinks_num, regOben_num, regRechts_num, regUnten_num);
}

Mit diesen Werten bewegt sich der Transparenregler nur zwischen den y-Koordinaten 0 und –100, aber auf der x-Achse überhaupt nicht.

Drag & Drop beenden Sie, wenn der Nutzer die Maustaste loslässt:

on (release, releaseOutside) {
   stopDrag();
}

Zum Schluss ändern Sie die Transparenz, und zwar in Abhängigkeit von der aktuellen Position des Transparenzreglers. Hierzu verwenden Sie das Ereignis enterFrame:

onClipEvent (enterFrame) {
   _root.koerperfarbe_mc._alpha = (this._y – regOben_num);
}

Zwei Dinge bedürfen hier der Erklärung: Zum einen wird enterFrame verwendet, da dieses Ereignis laufend eintritt. In unserem Fall wird bei diesem Ereignis laufend die Deckkraft geändert, und zwar auf die aktuelle Position des Transparenzreglers.

Zum anderen wollen wir erklären, wie sich die Deckkraft aus der Position des Schiebereglers berechnet. Wird der Regler nach oben verschoben, ist die Position negativ (z.  B. –10); davon ziehen Sie die obere Begrenzung ab (minus 100). Aus der Rechnung –10 – (-100) ergibt sich eine Deckkraft von 90  %. Je weiter der Regler nach oben verschoben wird, desto niedriger ist die Deckkraft.

Abbildung 12.11 Nach einem Klick auf den Transparenzregler geht das Auge des Chamäleons auf und der Hintergrund scheint durch.

Nun müssen Sie sich vom Chamäleon verabschieden. Sie finden es in seiner ganzen Pracht mit dem kompletten Code auf der CD-ROM unter chamaeleon_komplett_AS2.fla. Als Besonderheit haben wir in der Variante chamaeleon_ereignisprozeduren_AS2.fla für Drag & Drop und für den Schieberegler auch Lösungen mit Ereignisprozeduren eingebaut. Im Ordner FlashMX zum Kapitel finden Sie beide Versionen auch für ActionScript 1. Damit bieten wir Ihnen die Möglichkeit selbst zu vergleichen, welche Variante Ihnen besser gefällt.

 



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