Tutorialbeschreibung

Buttons mit Aktiv-Zustand

Buttons mit Aktiv-Zustand

 

In diesem kleinen Tutorial möchte ich zeigen, wie man ganz einfach und mit wenig Aktionskript Movieclip-Buttons erstellen kann, die bei ‚Klick’ ihren Aktivzustand beibehalten.


 


1. Dazu erstelle ich ein neues Flash-Dokument. In diesem Dokument lege ich zwei Ebenen an, eine Ebene für meine Buttons und eine Ebene für meinen Actionscript Code.

Bilder


2. Auf meiner Button-Ebene erstelle ich jetzt meinen ersten Button. Dazu ziehe ich auf der Bühne ein Rechteck auf. Ich nehme ein blaues Rechteck mit einem schwarzen Rahmen. Dieses Rechteck dupliziere ich jetzt dreimal, da ich drei Buttons erstellen möchte.

Bilder


3. Jetzt mache ich aus dem ersten Rechteck einen Movieclip. Dazu wähle ich das Rechteck aus und wähle in der Menüleiste ‚Modifizieren’ -> ‚In Symbol konvertieren’. In dem Dialogfenster gebe ich einen Namen für meinen Button ein und wähle Movieclip aus.

Bilder


4. Durch Doppelklicken auf das erstellte Symbol gelange ich nun in die Moviclip-Instanz des Buttons, den ich  gerade erstellt habe  (in meinem Fall heißt dieser ‚button1’). Auch hier erstelle ich wieder eine  AS-Ebene. Zusätzlich erstelle ich noch eine dritte Ebene für meinen Button-Text.

Bilder


5. Im zweiten Frame erstelle ich nun von jeder Ebene ein neues Schlüsselbild. Das wird mein späterer Aktiv-Zustand. Hier kann ich nun die einzelnen Inhalte der Schlüsselbilder nach Belieben verändern. In meinem Beispiel ändere ich die Hintergrundfarbe und stelle meinen Text auf ‚Bold’.

Bilder


6. Jetzt gehe ich in die AS-Ebene und gebe in jedem Schlüsselbild den ‚stop();’- Befehl ein. Damit ist mein erster Button fertig.

Bilder


7. Die Schritte drei bis sechs wende ich jetzt auch auf meine anderen beiden Buttons an.

Danach habe ich auf meiner Bühne drei Movieclips (meine Buttons).

8. Jetzt müssen die zukünftigen Buttons Instanznamen bekommen, damit sie mit AS angesprochen werden können. Dazu wähle ich einen Button aus und tippe den Instanznamen in das dafür vorgesehene Feld. Das mache ich mit allen drei Buttons.

Ich gebe den Buttons immer recht einfache Namen.

Bilder


9. Nun muss ich nur noch den AS-Code in mein AS-Schlüsselbild einfügen.

AS:

// RollOver-funktion

 

function buttonOver()

 

{

 

            trace(this + " RollOver");

 

            this.gotoAndStop(2);

 

}

 

// RollOut-funktion

 

function buttonOut()

 

{

 

            trace(this + " RollOut");

 

            // Ist dieser Button aktiv??

            if (_root.aktiv != this)

            {

                        //wenn nicht aktiv ->

                        this.gotoAndStop(1);

            }

 

}

 

// buttonbefehle ->>

 

_root.but1.onRollOver = buttonOver;

 

_root.but1.onRollOut = buttonOut;

 

_root.but1.onRelease = function()

 

{

 

            trace(this + " Release");

 

            if (_root.aktiv != this)

 

            {

                        //ist dieser button nicht aktiv, wird der jetzt aktive button auf nicht aktiv gesetzt

                        _root.aktiv.gotoAndStop(1);

                        //und dieser auf aktiv

                        _root.aktiv = this;

                        // hier können nun weitere Befehle eingegeben werden, die

                        //button ausführen soll

                        //...

            }

};

_root.but2.onRollOver = buttonOver;

_root.but2.onRollOut = buttonOut;

_root.but2.onRelease = function()

 

{

 

            trace(this + " Release");

 

            if (_root.aktiv != this)

            {

                        //ist dieser button nicht aktiv, wird der jetzt aktive button auf nicht aktiv gesetzt

                        _root.aktiv.gotoAndStop(1);

                        //und dieser auf aktiv

                        _root.aktiv = this;

                        // hier können nun weitere Befehle eingegeben werden, die

                        //button ausführen soll

                        //...

            }

};

_root.but3.onRollOver = buttonOver;

_root.but3.onRollOut = buttonOut;

_root.but3.onRelease = function()

 

{

 

            trace(this + " Release");

 

            if (_root.aktiv != this)

            {

                        //ist dieser button nicht aktiv, wird der jetzt aktive button auf nicht aktiv gesetzt

                        _root.aktiv.gotoAndStop(1);

                        //und dieser auf aktiv

                        _root.aktiv = this;

                        // hier können nun weitere Befehle eingegeben werden, die

                        //button ausführen soll

                        //...

            }

};

Hier die Erklärung zu meinem AS-Code:

// RollOver- funktion

 

function buttonOver()

 

{

 

            trace(this + " RollOver");

 

            this.gotoAndStop(2);

 

}

 

// RollOut-funktion

 

function buttonOut()

 

{

 

            trace(this + " RollOut");

 

            // Ist dieser Button aktiv??

 

            if (_root.aktiv != this)

 

            {

                        //wenn nicht aktiv ->

                        this.gotoAndStop(1);

            }

 

}

 


Diese beiden Funktionen sind für die RollOver- bzw. RollOut-Befehle. Die kann man in eine Funktion schreiben, da sie bei allen drei Buttons gleich ist.

Der Befehl if (_root.aktiv != this) -> verhindert, dass der Button in den Nicht-Aktiv- Zustand geht, wenn er geklickt wurde.                  

 

Die trace-Anweisung steht nur drin, damit klar wird, welcher Button bzw. welche Funktion aufgerufen wird, und sollte auch das ‚this’ erklären.

Kann später einfach auskommentiert oder rausgeschmissen werden.

 

_root.but1.onRollOver = buttonOver;

 

_root.but1.onRollOut = buttonOut;

 

 

Hier werden die oben erstellten Funktionen aufgerufen.

_root.but1.onRelease = function()

 

{

 

            trace(this + " Release");

 

            if (_root.aktiv != this)

 

            {

                        //ist dieser button nicht aktiv, wird der jetzt aktive button auf nicht aktiv gesetzt

                        _root.aktiv.gotoAndStop(1);

                        //und dieser auf aktiv

                        _root.aktiv = this;

                        // hier können nun weitere Befehle eingegeben werden, die

                        //button ausführen soll

                        //...

            }

};

Dieser Teil ist der eigentliche Aktionsteil des Buttons. Den habe ich für jeden Button einzeln geschrieben, da ja jeder Button eine andere Aktion ausführen soll.

if (_root.aktiv != this)

Hiermit wird verhindert, dass der Button noch mal seine Befehle ausführt, wenn er schon mal geklickt wurde.

 

 

_root.aktiv.gotoAndStop(1);

 

Hier wird der aktuell aktive Button in seinen nicht aktiven Zustand gebracht

und mit _root.aktiv = this; wird dieser Butten nun auf aktiv gesetzt.

 

Ich hoffe, dass dieses Tutorial verständlich ist. Wenn ihr Fragen dazu habt,  könnt ihr mir gerne eine pm schicken. Viel Spaß damit.

-->Hier die Komplette  .fla<--


 


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von seikona
  • 11.03.2007 - 22:51

habe nach ewigem Suchen heute dieses Tut gefunden. Finde es soweit gut erklärt - jetzt kommt die Anfängerfrage - Ich lege die Buttos in meinen Hauptfilm Von dort aus lade ich externe SWF´s in einen Container. Wo genau muß die Anweisung stehen, dass z.B. Button 1 das externe Movie (Photos.SWF) anspricht?

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 11.02.2007 - 06:27

jap gutes tut. Verständlich erklärt

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 27.11.2006 - 09:32

ich fands vom thema her cool aber die beschreibung war nicht so gut für, weil ich flash beginner bin . naja trotzdem thx

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 01.09.2006 - 01:30

Finds 1A... hat super geklappt.
Hatte trotz mangelhafter Vorkenntnisse
nur minimale Probleme.
Danke

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 02.08.2006 - 20:54

tolles tutorial gut erklärt
schöne bilder

Portrait von zheuss
  • 24.07.2006 - 22:00

Hallo,
mir hat es sehr geholfen... Vorallem da ich Flash schon ewig lange nicht benutzt habe und die üblichen Schwierigkeiten wieder rein zu kommen...

Dein AS hat mir die Türen geöffnet...

Danke und Gruß

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 10.07.2006 - 11:20

thx, sehr schön :-) gibt nicht viele Hilfreiche Tuts im Netz

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.06.2006 - 23:53

NICE ...schön übersichtlich ! LG Simon

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 26.06.2006 - 23:53

NICE ...schön übersichtlich ! LG Simon

Portrait von mobi
  • 17.04.2006 - 12:41

Nice tut gut verständlich :)

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 04.04.2006 - 14:21

echt nice muss ich sagen dafür das ich grad erst mit flash anfange is das echt übersichtlich

Portrait von inababs
  • 27.02.2006 - 12:45

meine pm hat sich erledigt,
habe es herausgefunden:

es funktioniert über:

_root.gotoAndStop("abc");

trotzdem danke

Portrait von Heinzel
  • 24.02.2006 - 14:08

deine frage würde mich auch interessieren, jedoch acuh eine antwort auf meine gestellte, die nach dem unerwarteten dateiformat.

habe mal gelesen, das man in einer confi-datei etwas umschreiben muß: mvie statt film. ds habe ich auch gemacht. hat nicht den erfolg gebracht.

ich verwende flash 5 und flash mx... ???

nomadin

Portrait von inababs
  • 24.02.2006 - 14:18

ich verwende flash 8 und hatte keine probleme mit dem öffnen

Portrait von kakktus
  • 24.02.2006 - 14:19

Hi,

ich habe doch auf deine Frage geantwortet. Leider kann ich es nicht min MX-Format abspeichern. Laufen tut es aber auch unter MX. Da musst du dir halt die Mühe machen und es nachbauen. Ist ja auch eigentlich der Sinn eines Tutorials ;-)

Portrait von kakktus
  • 24.02.2006 - 14:09

HI,

habe jetzt nicht ganz verstanden wie du das meinst. Aber du kannst mir gerne eine pm schicken und es mir noch mal genauer erklären oder mir deine fla senden.

gruß
kakktus

Portrait von inababs
  • 24.02.2006 - 13:54

hallo!
schön erklärt! bin wohl doch noch ein neuling.
ich versuche gerade ein abc mit eben solchen mc-buttons zu machen, jedoch klappt es nicht, dass ich die mcs als button hernehme, ohne dass die mc ihre funktion verlieren. gibt es auch eine möglichkeit wenn man nur text als button verwenden will?

Portrait von inababs
  • 24.02.2006 - 14:00

hab vergessen zu sagen, dass jeder buchstabe zu einem frame springen soll, bei dem dann mehr text zum jeweiligen buchstabe steht.

Portrait von Heinzel
  • 23.02.2006 - 11:12

hallo, ich bin neu hier. wollte mir dein tut herunterladen und bekomme nur die fehlermeldung 'unerwartetes dateiformat'. wie kann ich dies lösen?

nomadin

Portrait von kakktus
  • 23.02.2006 - 11:24

Hi,<br>
hast du flash mx2004??<br>
Dann musst du dir das laden : www.kakktus.de/tutorials/buttonMx2004.fla

Mehr anzeigen

x
×
×