[Stuff] Release-Status für Buttons

[sonar]

So, nachdem ja in letzter Zeit wieder vermehrt Anfragen zum Thema "Release-Status bei Buttons"/"Overstatus behalten" und so kamen, hier mal ein kleiner Beitrag zu diesem Thema (hab in der Tut-Sektion nicht wirklich was dazu gefunden...). Erweiterungen/Verbesserungsvorschläge jederzeit gerne.

Ziel:
Ziel soll es sein, eine Reihe von Navigationselementen - nennen wir sie "Buttons" - mit einer folgender Interaktivität zu versehen:
Null-Zustand: Die Maus befindet sich außerhalb des Buttons und der Button wurde nicht angeklickt
Over-Status: Die Maus befindet sich über dem Button, der Button ändert sein Aussehen
Release-Status: Der Button wurde angeklickt, verändert sein Aussehen und behält dieses bei, nachdem die
Maus ihn verlassen hat. Er soll bis zu dem Zeitpunkt, wenn ein anderer Button angeklickt wurde, kein Button mehr sein (d.h. er reagiert nicht auf Mouseover und Klick, kein Hand-Cursor).

Vorbemerkung:
Ich benutze bewusst keine dynamisch generierten/duplizierten Objekte, um den Ball (für non-AS-Professionals) einigermaßen flach zu halten.
Dieses Tutorial ist für Flash MX gedacht, die Methodik funktioniert (leicht bis mittel) abgewandelt aber auch in Flash 5. Anfragen hierzu bitte gesondert an mich.

"Materialbedarf":
Für das Beispiel brauchen wir 5 Movieclips (keine Buttons – mit denen wird’s nix...). Der Einfachheit halber nehmen wir fünf rote Rechtecke, der Over-Zustand soll blau, der Release Zustand grün sein. Also flugs einen MC mit diesen drei Frames und jeweils darin befindlichen Stops erstellt, und diesen viermal auf der Bühne dupliziert. Instanznamen vergeben: mc1 bis mc5 (was sonst...)

Prinzip:
Der Button-MC, der gerade geklickt wurde, meldet sich in einer "zentralen Verwaltungsinstanz" an, führt seine Navigations-Aktion aus, geht in den Release-Status und reagiert nicht mehr auf sämtliche Mausaktionen. Wird ein anderer Button-MC geklickt, schmeisst dieser den vorigen bei der Verwaltung raus und setzt sich selbst rein. Der zuvor angeklickte Button wird wieder "normal", reagiert wieder auf Mausaktionen usw. Diese Verwaltungs-Funktion übernimmt eine schlichte Variable, die ich "clicked" nenne. Here we go...

//frame 1 auf _root
var clicked;
//
for(var i = 1;i <= 5;i++) {
this["mc"+i ].onRollOver = function() {
if(this != _root.clicked) {
this.gotoAndStop(2);
}
};
this["mc"+i].onRollOut = this["mc"+i].onReleaseOutside = function() {
if(this != _root.clicked) {
this.gotoAndStop(1);
}
};
this["mc"+i].onRelease = function() {
if(this != _root.clicked) {
//hier die Navigations-Aktion
this.gotoAndStop(3);
_root.clicked.gotoAndStop(1);
_root.clicked.useHandCursor = true;
_root.clicked = this;
this.useHandCursor = false;
}
};
} 

Gruß,
Tom

[abcde12345]

wo muss das untere script denn hin? auch ins erste frame von root oder in jeden button?
wenn ich das in den button packe, sagt er, dass das for noch in ein on event rein muss..
und auf der root leiste funzt das irgendwie nicht.. hm ??

[sonar]

Das Skript gehört in ein frame auf der Zeitleiste, in der die Button-MCs leben. Ich häng dir mal ein Beispiel an.

[abcde12345]

aaah, gepeilt
hey danke es funzt

[harego]

hi sonar,

nicht schlecht. Habe es bis heut immer mit einer Hilfsvari
gemacht. Dein Weg hier ist aber eleganter.

Hier noch ein Vorschlag mit directer Farbzuweisung:

//frame 1 auf _root
var clicked;
//
for (var i = 1; i <= 4; i++) {
    this["mc" + i].onRollOver = function () {
        if (this != _root.clicked) {
            (new Color (this)).setRGB (0xffffff);
        }
    };
    this["mc" + i].onRollOut = this["mc" + i].onReleaseOutside = function () {
        if (this != _root.clicked) {
            (new Color (this)).setRGB (0x000000);
        }
    };
    this["mc" + i].onRelease = function () {
        if (this != _root.clicked) {
            (new Color (this)).setRGB (0x000fff);
            (new Color (_root.clicked)).setRGB (0x000000);
            _root.clicked.useHandCursor = true;
            _root.clicked = this;
            this.useHandCursor = false;
        }
    };
} 

[L.M.]

[font=Courier New][color=#007700]var clicked;
// 
for (var i = 1; i<=5; i++) {
 this["mc"+i].onRollOver = function() {
  if (this != _root.clicked) {
   this.gotoAndPlay(2);
  }
 };
 this["mc"+i].onRollOut = this["mc"+i].onReleaseOutside=function () {
  if (this != _root.clicked) {
   this.gotoAndPlay(11);
  }
 };
 this["mc"+i].onRelease = function() {
  if (this != _root.clicked) {
   // hier die Navigations-Aktion
   this.onEnterFrame = function() {
    if (this._currentframe == 10) {
     this.stop();
     delete this.onEnterFrame;
    }
   };
   _root.clicked.gotoAndPlay(11);
   _root.clicked.useHandCursor = true;
   _root.clicked = this;
   this.useHandCursor = false;
  }
 };
}
 
[/color][/font] 

siehe auch Rewind funktioniert nicht ordentlich!

[Rockhound]

wenn sich jetzt meine Buttons nicht im _root befinden sondern in einem weiteren mc namens "menu", wie oder wo muss ich da was ändern das das klappt ??

Ps. im bezug auf das erste skript

[sonar]

//1. frame auf _root:
menu.clicked = ""; 
// 
for(var i = 1;i <= 5;i++) { 
this.menu["mc"+i ].onRollOver = function() { 
if(this != this._parent.clicked) { 
this.gotoAndStop(2); 
} 
}; 
this.menu["mc"+i].onRollOut = this.menu["mc"+i].onReleaseOutside = function() { 
if(this != this._parent.clicked) { 
this.gotoAndStop(1); 
} 
}; 
this.menu["mc"+i].onRelease = function() { 
if(this != this._parent.clicked) { 
//hier die Navigations-Aktion 
this.gotoAndStop(3); 
this._parent.clicked.gotoAndStop(1); 
this._parent.clicked.useHandCursor = true; 
this._parent.clicked = this; 
this.useHandCursor = false; 
} 
}; 
} 

[Rockhound]

versteh nicht warum das nicht klappt....

hier mal die file

http://www.nooon.de/files/index.fla

[Rockhound]

Zitat von Rockhound

versteh nicht warum das nicht klappt....

hier mal die file

http://www.nooon.de/files/index.fla

ps.: es funzt bis das mc "menu" stoppt; also für ne sekunde




sorry für schwachsinnigen doppelpost

[sonar]

So, dann hätten wir hier doch noch die Flash5-Variante dazu...

[_sky]

Hi,
also, ich bin völliger Anfänger und brauch ne Erklärung für Dumme
Ich hab einen einzelnen Button, der dann im Release-Zustand bleiben soll, wenn ich geklickt habe. Wie stelle ich das denn an und wo schreib ich die Programmierung hin?
Danke schonmal für alle Antworten

[RustyCake]

Zitat von sonar

"Materialbedarf":
Für das Beispiel brauchen wir 5 Movieclips (keine Buttons – mit denen wird’s nix...). Der Einfachheit halber nehmen wir fünf rote Rechtecke, der Over-Zustand soll blau, der Release Zustand grün sein. Also flugs einen MC mit diesen drei Frames und jeweils darin befindlichen Stops erstellt, und diesen viermal auf der Bühne dupliziert. Instanznamen vergeben: mc1 bis mc5 (was sonst...)

Du darfst für diese bsp. keine normalen Button-Instanzen verwenden

[jotti]

Hi Rusty!

Ich dachte mir daß ist mal eine Aufgabe.

"Du darfst für diese bsp. keine normalen Button-Instanzen verwenden"

Ich habs hinbekommen mit normalen Instanznahmen.
Wer will den schon immer Mc1 bis Mc 10
Da kennt sich ja keiner mehr aus.

PHP-Code:

var meinArray = new Array("mc1","mx1","Home");// Instanznahmen
for (var i = 0; i<=3; i++) {
    this[meinArray[i]].onRelease = function() {
        loslassen = this;
        loslassen1(loslassen);
    };
    this[meinArray[i]].onRollOver = function() {
        darueberrollen = this;
        darueberrollen1(darueberrollen);
    };
    this[meinArray[i]].onRollOut = function() {
        rausrollen = this;
        rausrollen1(rausrollen);
    };
}
//frame 1 auf _root
var clicked;
//
darueberrollen1 = function () {
    trace(darueberrollen+" darueberrollen");
    if (darueberrollen != _root.clicked) {
        darueberrollen.gotoAndStop(2);
    }
};
rausrollen1 = function () {
    trace(rausrollen+" rausrollen");
    if (rausrollen != _root.clicked) {
        rausrollen.gotoAndStop(1);
    }
};
loslassen1 = function () {
    trace(loslassen);
    if (loslassen != _root.clicked) {
        // hier die Navigations-Aktion
        loslassen.gotoAndStop(3);
        _root.clicked.gotoAndStop(1);
        _root.clicked.useHandCursor = true;
        _root.clicked = loslassen;
        loslassen.useHandCursor = false;
    }
}; 


Viel Spass wuenscht euch Jotti

[sonar]

Gute Arbeit, jotti, aber was Kollege rusty meinte: man darf keine Schaltflächen-Instanzen verwenden... um die Instanznamen ging es dabei nicht

Aber gut, wenn man noch ne Alternative am Start hat!