Anzeige
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<--


 


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von ProdigyFaith
  • 12.10.2010 - 11:49

Danke! Hab versuch es mit Buttons zu lösen, aber ich probiere deine MC Lösung einfach mal aus :)

Portrait von brodnicas
  • 20.04.2010 - 02:34

wie sieht sieht es mit hyperlinks aus, dazu sind doch buttons, ich finde das nicht wo du das hingeschrieben hast?

suche das für mich selbst....

Portrait von jaggo
  • 10.04.2010 - 04:46

Respekt! Hilfreich, verständlich und bis ins Detail genau!!

lg julchen

Portrait von putzili2609
  • 14.01.2010 - 15:23

Super Tutorial! Hat alles bestens funktioniert. Hilfreich war auch die .fla Auflösung, so konnte ich mein Projekt gleich kontrollieren!

Portrait von Leolo
  • 15.07.2009 - 08:07

Hätt AS1 drüber gestanden, dann hätt ich mir den Text gespart *g*

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 13.02.2009 - 18:28

Bei mir heists root wird nicht unterstütz?

Portrait von kakktus
  • 13.02.2009 - 19:47

ja das ist auch as1 und nicht as3. in as3 gibt es kein root mehr. in as3 wird das so sowieso nicht funktionieren.

Portrait von kakktus
  • 13.02.2009 - 19:47

ja das ist auch as1 und nicht as3. in as3 gibt es kein root mehr. in as3 wird das so sowieso nicht funktionieren.

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 13.02.2009 - 18:28

Bei mir heists root wird nicht unterstütz?

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.10.2008 - 17:19

sehr gutes tut. klappt wunderbar und easy zu erstellen. danke

Portrait von Lycos
  • 02.08.2008 - 21:02

scönes tut auch auch malwas bei mir gefunzt ^^

Portrait von p3rTa3d3T
  • 10.06.2008 - 16:29

Super Tut, hat mir sehr geholfen! Big thx buddy!

Portrait von prolit
  • 08.03.2008 - 12:40

Cooles Tut. Vielen Dank!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 12.02.2008 - 23:47

boahhh!
hatte zwar einige probleme und musste oft neu anfangen aber das liegt danz allein daran dass ich mich mit den tools und den symbolen nocht gar nicht auskenne^^
aber es ist mir gelungen!
was für ein erfolgsgefühl hehe
sehr hilfreich!
gut gemacht!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 31.12.2007 - 14:46

hat mir weitergeholfen. Danke sehr

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 02.11.2007 - 00:39

Ein sehr interessasnter Workshop. Für mich als Einsteiger genau richtig!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 18.10.2007 - 12:42

Endlich eine einfache und verständliche Lösung!

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 10.08.2007 - 23:04

War insgesamt doch recht gut verständlich, ich kam nach ein wenig Hilfe damit klar (gut, die einzigen Fehler entstanden aus eigener Schuld...). Wäre noch cool gewesen, wenn ein dritter Status eingebaut worden wäre, und nicht der Aktiv zugleich der Rolloverstatus ist.

Portrait von marcecan
  • 12.07.2007 - 12:53

super tut danke wieter so

Portrait von Nixe
  • 04.04.2007 - 08:57

gut erklärtes tut, hat alles super geklappt... auch für mich als absoluter neuling :-)

x
×
×