Know-how für Kreative

Inhaltsverzeichnis
1 Erste Schritte
2 Versionen
3 Einführung in die Programmierung
4 Die Entwicklungsumgebung
5 Regeln
6 Anweisungen und Aktionen
7 Werte und Datentypen
8 Ausdrücke und Operatoren
9 Funktionen
10 Kontrollstrukturen
11 Dokumenten-Objektmodell und Gültigkeitsbereich (Scope)
12 Ereignisse
13 Objekterstellung
14 Vererbung
15 Movieclips
16 ActionScript 2.0
17 Komponenten
18 Codedesign und Konzeption
19 Flashdetection
20 Aussergewoehnliche Benutzerfuehrung
21 D mit Flash
22 Macromedia Central
23 HTML
24 JavaScript, ActiveX und Java
25 Flash undokumentiert
26 Vergangenheit, Gegenwart und Zukunft
27 Kurzreferenz
28 Buchtipps
29 Links
30 Die CD-ROM zum Buch
Index
Download: - ZIP, ca. 9,8 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Design / <openbook> / ActionScript | vor >>
ActionScript 1 und 2 von Sascha Wolter (http://www.saschawolter.de/) Objektorientierung und Codedesign mit Flash MX 2004
ActionScript 1 und 2 672 S., mit CD, Referenzkarte, 44,90 Euro Galileo Design ISBN 3-89842-221-6 |
| Kapitel 20 Aussergewoehnliche Benutzerfuehrung
|  | 20.1 Tastatur
|  | 20.2 Maus
|  | 20.3 Ton
|  | 20.4 Bewegung
## 20.2 Maus Grafisch orientierte Anwender bevorzugen die Bedienung durch die Maus und weniger per Kommandozeile, so wie es die meisten modernen Benutzeroberflächen inspiriert vom Xerox Parc (http://www.parc.xerox.com/) und Apple (http://www.apple.com/) vormachen. Hier klicken, um das Bild zu Vergrößern Abbildung 20.4 Ein Mausverfolger kann bereits mit nur zwei Anweisungen realisiert werden. ##### Mausverfolger Ein etwas abgegriffener Klassiker ist der Mausverfolger, der bereits mit wenigen Zeilen Programmcode erreicht wird. Dieser basiert auf der Idee, dass sich ein Objekt der Maus langsam annähert. Der zugrunde liegende Algorithmus ermittelt dazu bei jedem Bildwechsel den horizontalen und vertikalen Abstand zwischen Mauszeiger und Objekt und nähert das Objekt dem Mauszeiger um jeweils einen Bruchteil dieses Abstandes an: ##### mausver-folger.fla
    // Einfache Ereignismethode für Mausverfolger
    monster_mc.onEnterFrame = function () {
       // Lege "Verzögerung" fest
       var delay = 16;
       // Ermittle Abstand zur Maus
       var dx = this._xmouse;
       var dy = this._ymouse;
       // Nähere Objekt der Maus an
       this._x = this._x + (dx/delay);
       this._y = this._y + (dy/delay);
    }
Falls Sie den Mausverfolger auf die horizontale oder vertikale Bewegung einschränken, kann dies z.B. für Navigationsleisten à la Yugop (http://yugop.com/ver2/) verwendet werden. ##### Yugop Ein Klassiker bei der Verwendung innovativer Navigationsformen ist die Site »MONO*crafts« von Yugo Nakamura, kurz Yugop (http://yugop.com/ver2/). ##### Mausposition Die Mausposition lässt sich aber nicht nur direkt mit Positionsangaben verbinden, sondern dient auf Wunsch als Wertelieferant für beliebige andere Eigenschaften. Beispielsweise lässt sich mit Hilfe der Mausposition ein Sound von links nach rechts verändern: ##### soundsteuerung.fla
    this.my_sound = new Sound(_root);
    this.onEnterFrame = function () {
       // Verwende alternativ setTransform
       this.my_sound.setPan((this._xmouse-275)/2.75);
    }
oder die Farbigkeit eines Objekts variieren ##### farbigkeit.fla
    this.my_color = new Color(monster_mc);
    this.onEnterFrame = function () {
       // Verwende alternativ setTransform
       this.my_color.setRGB(this._xmouse);
    }
##### Drag and Drop Eine weitere Variante der Maussteuerung ist Drag and Drop. Das Ziehen und Loslassen von Objekten bietet sich beispielsweise bei Lernsystemen an. Aber auch Rollbalken (engl. Scrollbars) machen Gebrauch davon. Das Ziehen eines Objekts starten Sie mit Hilfe der Methode startDrag, sobald der Anwender auf das Objekt klickt. Die Methode erfordert von Ihnen als ersten Parameter, ob das Objekt direkt unter dem Mauszeiger liegen soll (true) oder sich relativ zum Mauszeiger bewegt (false). Für Drag and Drop bietet sich meist eine relative Bewegung zum Mauszeiger an, da ja ohnehin direkt auf das betreffende Objekt geklickt wird: ##### drag.fla
    monster_mc.onPress = function () {
       this.startDrag(false);
    }
Um ein Objekt nun loslassen zu können, kommen die Methode stopDrag und das Ereignis onRelease (beim Loslassen) zum Einsatz: ##### drag and drop.fla
    monster_mc.onRelease = function() {
       this.stopDrag();
    };
Bei Anwendern mit einer schnellen »Maushand« kann es bei diesem Skript jedoch vorkommen, dass die Maus schneller als das eigentlich gezogene Objekt ist und sich das Objekt beim Loslassen noch gar nicht unter dem Mauszeiger befindet. Dies führt dazu, dass das Objekt dann weiterhin am Mauszeiger klebt. Ein einfacher Trick zur Lösung des Problems ist, dass das Ziehen auch dann beendet wird, wenn die Maustaste außerhalb losgelassen wird (onReleaseOutside). Da es sich in diesem Fall um dieselbe Funktion handelt wie beim normalen Loslassen, kann diese gleich doppelt verwendet werden: ##### drag and drop komplett.fla
    // Drag...
    monster_mc.onPress = function() {
       this.startDrag(false);
    };
    // ...and Drop
    monster_mc.onRelease = function() {
       this.stopDrag();
    };
    monster_mc.onReleaseOutside = monster_mc.onRelease;
##### Rollbalken Beinahe dasselbe Skript kommt für die bereits erwähnten Rollbalken zum Einsatz. Dabei machen Sie sich vier weitere optionale Parameter der startDrag-Methode zu Eigen, mit denen Sie einen Bereich bestimmen, in dem sich das Objekt befinden darf. Das Ziehen eines Objekts kann auf einen rechteckigen Bereich beschränkt werden. Den Bereich legen Sie anhand der linken, oberen, rechten und unteren Kante in Pixel fest:
    this.startDrag(false, 75, 50, 475, 350);
##### drag and drop beschränkt.fla Wenn Sie nun diesen rechteckigen Bereich zu einer Linie schrumpfen lassen, dann haben Sie einen Rollbalken, dessen Position letztendlich dem eingestellten Wert entspricht. Rollbalken sind eigentlich nichts anderes als Drag and Drop. Diesen Wert können Sie dann zur Steuerung anderer Eigenschaften mit ein wenig Dreisatz übernehmen: ##### scrollbar.fla
    button_mc.onPress = function() {
    ___this.startDrag(true,_320,_80,_320,_280);
    };
    button_mc.onRelease_=_function()_{
    ___this.stopDrag();
    ___//_Uebernehme_eingestellten_Wert
    ___var_value_=_(this._y-80)/200;
    ___trace(value);
    ___monster_mc.rightArm_mc._rotation_=_value*360;
    };
    button_mc.onReleaseOutside_=_button_mc.onRelease;
Besonders flexibel ist es, wenn Sie einen Rollbalken in einen Movieclip in Form einer wieder verwendbaren Komponente packen. Denn in diesem Fall beziehen sich die gesamte Programmierung und die Ermittlung des Wertes auf den Movieclip, so dass Sie diesen ohne Auswirkung beinahe beliebig transformieren dürfen. Um die Werte nutzen zu können, verwenden Sie innerhalb der Komponente den Aufruf einer selbst definierten onChange-Methode:
    button_mc.onRelease = function() {
       this.stopDrag();
       // Übernehme eingestellten Wert
       var value = this._y/200;
       onChange(value);
    };
##### scrollbar als einfache komponente.fla Die onChange-Methode nutzen Sie dann direkt aus Ihrem Projekt heraus in der folgenden Form:
    scrollbar1_mc.onChange_=_function_(value)_{
    ___monster_mc._yscale_=_value_*_100;
    }
    scrollbar2_mc.onChange_=_function_(value)_{
    ___monster_mc._rotation_=_value_*_360;
    }
Hier klicken, um das Bild zu Vergrößern Abbildung 20.5 Es muss nicht immer eine Maus sein: Auch Trackballs und andere Eingabegeräte sind erlaubt. ##### Trackballs Die Maus kann aber auch durch andere Eingabeinstrumente wie Trackballs ersetzt werden. Und einige Messgeräte erlauben es, dass Sie Ihre Daten wie Mausbewegungen an den Rechner schicken, denn letztendlich können die Werte für die X- und Y-Bewegung der Maus mit der Hilfe eines geschickten Bastlers auch von einem Temperatur- oder Feuchtigkeitsmesser generiert werden.
<< zurück | <top> | vor >>
Zum Katalog
ActionScript 1 und 2 bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| Einstieg in ActionScript
| Einstieg in Flash 8
| Flash 8 und PHP
| Flash 8-Tutorials
| Dreamweaver 8
| Webseiten programmieren und gestalten
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press GmbH 2005
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.

[Galileo Design]
Galileo Press GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de