Anzeige
Tutorialbeschreibung

Movieclips als Buttons verwenden

Movieclips als Buttons verwenden

Version: ab Flash MX

Niveau: Einsteiger
Vorkenntnisse: Grundlagen Flash
Lernziele: Einsatzmöglichkeiten von MovieClips als Buttons verstehen lernen.

Der Vorteil von Schaltflächen besteht eigentlich darin, daß vier vordefinierte Frames existieren, die automatisch verwendet werden. Wenn man beispielsweise mit der Maus über eine Schaltfläche fährt, zeigt Flash dessen rollOver-Zustand an, ohne daß dies geskriptet werden müßte. Die gleiche Funktionalität läßt sich allerdings auch bei MovieClips erreichen.

  1. Erstellen Sie einen neuen Film (800x600, weiß, 18 Bps).
  2. Erstellen Sie in der Zeitleiste eine neue Ebene.
  3. Benennen Sie eine Ebene „actions“, die andere Ebene „buttons“. Alle Objekte werden auf der Ebene „buttons“ erstellt, die Skripte dagegen dem ersten Frame der Ebene „actions“ zugewiesen.
  4. Zeichnen Sie einen Kreis (rot, 40x40) und positionieren ihn in der Bühnenmitte.
  5. Wandeln Sie ihn in einen MovieClip um (beliebiger Symbolname, Registrierungspunkt links oben, Instanzname „mc_button“).

 

Bilder

  1. Öffnen Sie dessen Symbolbearbeitungsmenü per Doppelklick auf den Kreis auf der Bühne oder auf das MovieClip-Icon in der Bibliothek.

Bilder

  1. Fügen Sie eine Ebene hinzu, die den Namen „marker“ erhält. Sie dient dazu, den Frames Bildmarkierungen, also Namen, zuzuweisen. Die bisherige Ebene 1 benennen Sie um in „grafik“.
  2. Klicken Sie anschließend in Frame 1 der Ebene „marker“ und benennen ihn im Eigenschaftsfenster „_up“. Wiederholen Sie diesen Vorgang für die Frames 2 („_over“) und 3 („_down“). Beachten Sie Groß- und Kleinschreibung sowie den vorangestellten Unterstrich. An den Framebezeichnungen orientiert sich Flash, um wie bei einem Schaltflächensymbol bei bestimmten Mausereignissen automatisch einen der benannten Frames anzuzeigen.

 

Bilder

  1. Auf der Ebene „grafik“ fügen Sie in den Frames 2 und 3 jeweils ein Schlüsselbild ein. Ändern Sie in beiden Frames die Füllfarbe des roten Kreises, indem Sie ihn markieren, im Eigenschaftsfenster den Farbchip für die Füllfarbe (Eimersymbol) anklicken und anschließend eine beliebige Farbe auswählen.

Bilder

  1. Kehren Sie zurück zur Hauptzeitleiste bzw. Szene 1 und fügen in Frame 1 der Ebene „actions“ dem MovieClip „mc_button“ folgendes Mausereignis zu:

mc_button.onPress = function(){ 
          trace(“gedrückt!”); 
}

Wenn Sie jetzt testen, wird Flash beim Rollover ohne weiteres Skripting in den Frame „_over“ springen und beim Mausklick zum Frame „_down“ wechseln. Der Mauszeiger ändert sich zum Fingercursor. Der MovieClip benimmt sich also so wie ein Button. Einziger Makel: vor der ersten Aktion flackert er, weil er nacheinander alle Frames anzeigt. Das liegt daran, daß Flash vor dem Auftreten des ersten Mausereignisses den MovieClip noch nicht als Schaltfläche wahrnimmt.

  1. Um das abzustellen, schreiben Sie in die erste Zeile des Skriptes, also noch vor das onPress:

mc_button.stop();

Bilder

Damit wird die Animation des MovieClips gestoppt.
Als Hotspot, d.h., als den Bereich, in dem der Button bei einem Mausereignis aktiv wird, nimmt Flash die Grafik des MovieClips. Das entspricht der Voreinstellung bei Schaltflächen. Wollte man aus welchem Grund auch immer den Hotspot ändern, so könnte man bei Schaltflächen im vierten Frame einfach eine beliebige Form einfügen. Bei MovieClips existiert diese Möglichkeit zwar nicht, doch läßt sich per Actionscript explizit ein Objekt als sensitive Fläche definieren.

  1. Erstellen Sie neben dem MovieClip einen zweiten MovieClip (Rechteck, 60x40, rot, Bibliotheksname „mc_hot“, Instanzname „mc_button_hot“).
  2. Ergänzen Sie das bestehende Skript nach der stop-Methode wie folgt:

mc_button.hitArea = mc_button_hot;

Bilder

Wenn Sie bei einem Test mit der Maus über “mc_button” fahren, wird er plötzlich nicht mehr reagieren. Ein RollOver über „mc_button_hot“ dagegen löst wie zuvor das Buttonverhalten aus. Auf diese Weise ist man sehr flexibel, wenn es darum geht, den sensitiven Bereich festzulegen. So ist es zum Beispiel möglich, ihn im Laufe einer Anwendung – etwa in einem Spiel – abhängig von den Useraktionen wechselnden Objekten zuzuweisen, während bei einem Schaltflächensymbol der Hotspot unveränderlich feststeht.

Das funktioniert auch dann, wenn der zugewiesene Hotspot unsichtbar geschaltet wird.

  1. Schreiben Sie unterhalb der eben eingefügten Zeile:

mc_button_hot._visible = false;

Beim Testen reagiert der unsichtbare Hotspot wie vorher (vorausgesetzt, Sie finden ihn wieder).

Bilder

Dagegen gleich verhalten sich MovieClip und Schaltfläche beim Handcursor sowie bei der Aktivierung/Deaktivierung ihrer Funktionalität. Der Handcursor kann ausgeschaltet werden, zum Beispiel, wenn ein Button/MovieClip nicht aktiv ist.

  1. Um die weitere Übung zu vereinfachen, kommentieren Sie die eben eingefügte Zeile aus:

// mc_button.hitArea = “mc_button_hot”;

Nun ignoriert Flash diesen Befehl, der Kommentar kann aber bei Bedarf einfach wieder aufgehoben werden, ohne daß der Befehl neu geschrieben werden müßte.

  1. Fügen Sie dem bestehenden Skript folgende Zeilen hinzu:

mc_button.onRollOver = function(){ 
          this.useHandCursor = false;
}

Bei Rollover erscheint nun kein Handcursor mehr, obwohl das onPress-Ereignis nach wie vor ausgeführt wird. Meistens bedeutet jedoch das Ausbleiben einer Cursorveränderung, daß der betreffende Button/MovieClip inaktiv ist. Auch das läßt sich per Skripting bewerkstelligen.

  1. Ergänzen Sie das Skript um folgendes Ereignis:

mc_button.onMouseUp = function(){ 
          this.enabled = false;
}

Zwar existiert das onPress-Ereignis noch, aber es wird ausgeschaltet, sobald man die Maus auf dem MovieClip drückt und losläßt. Weitere Klicks haben dann keine Auswirkungen mehr. Auch der _over-Frame wird nicht mehr angezeigt.

Das mag auf den ersten Blick unlogisch erscheinen, aber manchmal ist es notwendig, temporär die Funktionalität eines Buttons oder eines MovieClips auszuschalten. Das macht unter bestimmten Umständen beispielsweise bei einer Navigation Sinn: wenn ich mich bereits auf dem Screen „Produkte“ befinde, soll derselbe Screen nicht noch einmal aufgerufen werden können. Oder bei Klick auf einen Thumbnail wird ein Bild groß angezeigt. Dann könnte man alle Buttons solange ausschalten, bis der Anwender auf das große Bild klickt, um es wieder zu schließen.

Standardmäßig ist die Eigenschaft enabled auf true gesetzt (sonst würden ja von Anfang an kein Button und kein MovieClip auf ein Mausereignis reagieren).

  1. Um ihn nachträglich wieder zu aktivieren, fügen Sie links von „mc_button“ eine weitere Instanz von „mc_hot“ ein und benennen Sie „aktivieren“. Anschließend ergänzen Sie das Skript:

aktivieren.onRollOver = function(){ 
          mc_button.enabled = true;
}

Bilder

Wenn Sie erst auf den “mc_button” klicken, wird er im Nachrichtenfenster wie zuvor den Text „gedrückt“ ausgeben. Ein zweiter Klick allerdings bleibt ohne Reaktion. Erst bei einem Rollover über „mc_button_hot“ kann auch wieder auf „mc_button“ geklickt werden.

Der MovieClip ist also flexibler als das Schaltflächensymbol. Er hat jedoch noch einen entscheidenden Vorteil: er verfügt er über eine eigene, unabhängige Zeitleiste, in der beliebige Objekte per Actionscript angesprochen werden können. Im Gegensatz dazu ist die Zeitleiste einer Schaltfläche fix vorgegeben. Objekte, die sich in deren Frames befinden, sind für Actionscript nicht erreichbar. Das erweist sich beispielsweise dann als Nachteil, wenn eine Navigation dynamisch aufgebaut werden soll und die Buttonbeschriftung aus einem Array oder einer externen Datenquelle eingelesen wird.

  1. Um den Überblick nicht zu verlieren, erstellen Sie eine neue Datei mit den gleichen Eigenschaften wie die vorhergehende oder löschen Sie alle Objekte auf der Bühne und die Skripte.
  2. Erstellen Sie ein Rechteck (orange, 80x20) und wandeln es in ein Schaltflächensymbol (Registrierungspunkt links oben, Bibliotheksname beliebig, Instanzname „b_test“) um.
  3. Öffnen Sie den Symbolbearbeitungsmodus des Buttons, benennen dessen einzige Ebene „grafik“ und fügen eine neue Ebene namens „info“ hinzu.
  4. Dort erstellen Sie ein dynamisches Textfeld (Schrift sans, 12, schwarz, Text nicht auswählbar, kein Rahmen, Ausrichtung zentriert) und benennen es „to_info“. Das Präfix „to“ steht für text output und gibt durch den Namen eine erste Orientierung auf die Funktionalität des Textfeldes.
  5. Positionieren Sie das Textfeld auf der orangefarbenen Grafik.

Die Schaltfläche müßte im Symbolbearbeitungsmodus jetzt so aussehen:

Bilder

  1. Kehren Sie zurück zur Szene 1 und schreiben folgenden Code:

trace(b_test.to_info._x);

Wir wollen uns eine Eigenschaft des in der Zeitleiste der Schaltfläche eingefügten Textes anzeigen lassen. Beim Testen gibt das Nachrichtenfenster jedoch „undefined“ aus. Denn die Zeitleiste ist, wie erwähnt, nicht unabhängig, sondern lediglich auf die Buttonzustände hin bezogen. Daher bleibt auch der Versuch, dem Textfeld dynamisch einen Text als Buttonbeschriftung zuzuweisen, erfolglos.

  1. Schreiben Sie in die nächste Zeile nach trace:

b_test.to_info.text = “Produkte”;

Beim Testen bleibt das Textfeld nach wie vor leer.

  1. Das gleiche wollen wir nun mit einem MovieClip ausprobieren. Erstellen Sie unter dem orangefarbenen Button ein Rechteck (blau, 80x20) und wandeln es in einen MovieClip (Registrierungspunkt links oben, Bibliotheksname beliebig, Instanzname „mc_test“) um.
  2. Öffnen Sie den Symbolbearbeitungsmodus des MovieClips und fügen eine neue Ebene namens „info“ hinzu.
  3. Dort erstellen Sie ein dynamisches Textfeld (Schrift sans, 12, schwarz, Text nicht auswählbar, kein Rahmen, Ausrichtung zentriert) und benennen es „to_info“. Sie dürfen hier denselben Namen verwenden wie beim Button. Dieses Textfeld liegt in einer anderen Zeitleiste als das Textfeld des Buttons. Daher sind es für Flash zwei verschiedene Objekte. Sollten Sie jetzt mißtrauisch geworden sein, dürfen Sie gerne auch einen anderen Namen wählen. Achten Sie dann jedoch darauf, auch im nachfolgenden Skript den Namen entsprechend zu ändern.
  4. Positionieren Sie das Textfeld auf der blauen Grafik.
  5. Kehren Sie zurück zur Szene 1 und fügen unterhalb der bestehenden Skriptzeilen folgendes ein:

trace(mc_test.to_info._x);

Anders als beim Button müßte jetzt eine Zahl angezeigt werden, z.B. 357 – die in Ihrem Fall sicher von meinem Wert abweicht. Entscheidend ist nur, daß Flash nicht erneut ein „undefined“ ausgibt.

  1. Erweitern Sie das Skript:

mc_test.to_info.text = „Produkte“;

Bilder

Bilder

Jetzt wird auch auf dem MovieClip der Text angezeigt. Wollten wir ihn als Navigationsbutton verwenden, müßten wir ihm nur noch ein entsprechendes Skript zuweisen, z.B.:

mc_test.onPress = function(){ 
          getURL(irgendeineWebseite);
}

oder bei einer vollständig aus Flash aufgebauten Webseite:

mc_test.onPress = function(){ 
          loadMovie(irgendeinswf,stufe);
}

MovieClips erweisen sich Schaltflächen also in jeder Hinsicht als überlegen. Daher empfiehlt es sich, möglichst vollständig auf Schaltflächen zugunsten von MovieClips zu verzichten.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Franciska
  • 29.04.2012 - 09:28

Super genau, was ich gesucht habe.

Portrait von mistajam
  • 01.05.2010 - 01:37

Danke, hab wieder was dazu gelernt, gut geschrieben :)

Portrait von bo2221
  • 22.11.2009 - 18:37

Geil danke danach habe ich gesucht

Portrait von Litti
  • 30.10.2009 - 19:58

sehr sinnvoll, gut erklärt, Danke

Portrait von miroli
  • 04.02.2009 - 12:40

Sehr hilfreich, gut erklärt- vielen Dank ! =)

Portrait von kighta
  • 18.07.2008 - 11:46

Super erklärt, ür den Anfang genau das richtige! Danke!

Portrait von Epulse
  • 27.04.2008 - 19:37

Gutes Tut, sehr gut erklärt, danke!

Portrait von roger1
  • 06.01.2008 - 12:58

Hallo,
klasse Tutorial, aber mal ne Frage, das müßte hier doch

loadMovieNum(irgendeinswf,stufe); heißen oder?

mc_test.onPress = function(){
loadMovie(irgendeinswf,stufe);

Portrait von Patricio
  • 12.10.2007 - 11:56

wow, wieder mal viel dazugelernt, perfektes turorial - alle schritte genau und auch für anfänger verständlich erklärt. danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.03.2007 - 10:48

Super erklärt, habe ganz genau sowas gesucht.
Danke!

Portrait von pinsel77
  • 13.01.2007 - 14:02

Super Tuttorial, sehr gut Beschrieben. THX´s!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 28.12.2006 - 11:34

Super Einsteiger Workshop.

Portrait von verlunkid
  • 14.12.2006 - 11:17

Da hast du dir sehr viel Mühe gegeben und es hat sich gelohnt.

Portrait von h07d0q
  • 02.06.2006 - 16:30

Danke, sehr gut erklärt und übersichtlich!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.04.2006 - 15:36

das geht doch gar net
hab 4mal versucht!! :-(

Portrait von Aimed
  • 14.04.2006 - 12:43

ich kriegs einfach net hin :'( obwohl ich alles genau gleich mache..

Portrait von dapoldi
  • 12.11.2005 - 07:33

Danke,<br>
sehr verständlich gemacht, bin Anfänger und sehr dankbar für solch gute Erklärungen, macht Mut weiter zu machen.<br>
<br>
daPoldi

Portrait von jay_one
  • 17.10.2005 - 10:40

guter workshop ! hat mir den einstieg leichter gemacht und so manche rätsel gelöst ;-)<br>
<br>
thx + weiter so !

x
×
×