zweites Mal auf Schaltfläche klicken

Jormungand · 19.12.2009

Hallo zusammen,
ich bastel gerade an einem Flash-Portfolio und stoße als Anfänger auf ein Problem, das ich nicht allein gelöst bekomme:
Meine Navigation hat Buttons, die "onPress" ein Dropdownmenü auslösen.
Ich möchte, dass auf einen zweiten Klick auf dieselbe Fläche das Dropdownmenü wieder einfährt.
Lief bisher halt alles nicht so gut:

Code:

// Transitions importieren

    import mx.transitions.Tween; 
    import mx.transitions.easing.*; 

// Variablendeklaration

i=0;

    
//    Über mich Button (Funktion und Animation)  ////////////////////////////
if (i==0) {
    _root.uebermich.onPress = function (){
        
    var pos1 = {x:400, y:375, speed:20}; 
    new Tween(_root.portfolio, "_x", Strong.easeOut, _root.portfolio._x, pos1.x, pos1.speed); 
    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1.y, pos1.speed);

    var pos2 = {x:400, y:400, speed:20}; 
    new Tween(_root.kontakt, "_x", Strong.easeOut, _root.kontakt._x, pos2.x, pos2.speed); 
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2.y, pos2.speed);
        
    i=1;
    }
}
    else {
        var pos5 = {x:400, y:325, speed:20}; 
    new Tween(_root.portfolio, "_x", Strong.easeOut, _root.portfolio._x, pos5.x, pos5.speed); 
    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos5.y, pos5.speed);

    var pos6 = {x:400, y:350, speed:20}; 
    new Tween(_root.kontakt, "_x", Strong.easeOut, _root.kontakt._x, pos6.x, pos6.speed); 
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos6.y, pos6.speed);
        _root.uebermich.gotoAndPlay("out");
    
    i=0;
    }

    
//Rollout    
    _root.uebermich.onRollOut = function (){
        
        var pos5 = {x:400, y:325, speed:20}; 
    new Tween(_root.portfolio, "_x", Strong.easeOut, _root.portfolio._x, pos5.x, pos5.speed); 
    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos5.y, pos5.speed);

    var pos6 = {x:400, y:350, speed:20}; 
    new Tween(_root.kontakt, "_x", Strong.easeOut, _root.kontakt._x, pos6.x, pos6.speed); 
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos6.y, pos6.speed);
        _root.uebermich.gotoAndPlay("out");
    i=0;
    
    }
// Rollover
    _root.uebermich.onRollOver = function(){
        _root.uebermich.gotoAndPlay("in");
    }
// Release
    _root.uebermich.onRelease = function (){
        _root.gotoAndPlay("uebermich");
    }
    ////////////////////////////////////////////////////////////////////

Mit "i" habe ich versucht zwei Button-Zustände zu erstellen, die gewechselt werden.
Im Moment funktioniert das Rollout zum kollabieren des Dropdown, aber nicht der zweite Klick auf den Button.
Kann mir jemand nen Tipp geben? (mein Gehirn glüht schon

)

Danke und Gruß
Jormungand
PS: erst morgen wieder online

ernstl · 19.12.2009

AW: zweites Mal auf Schaltfläche klicken

Ohne jetzt auf dein AS geguckt zu haben, hier die Theorie:
Der Button zum Aus/Einfahren mit einer IF-Else Abfrage versehen. Diese fragt eine Variable ab: 0/1. Bei 0 wird ausgefahren, bei 1 umgekehrt. Dem entsprechend wird natürlich die Variable geändert, d.h. ist sie 1 wird daraus 0 und umgekehrt. Das Aus/Einfahren in eine extra Funktion setzen und entsprechend ausführen.

Ich hoffe verständlich, ist nämlich schon spät und ich bin auf´n Sprung...

4uwak · 20.12.2009

AW: zweites Mal auf Schaltfläche klicken

also bevor dein Kopf jetzt noch anfängt zu rauchen lade ich dir mal ein bsp. hoch, was ich mal schon vor längerer zeit erstellt hab, also ohne deinen Code jetzt auf fehler zu überprüfen muss ich einfach sagen du denks viel zu Komplex bei sowas einfaches, ich könnte dir das auch alles kompellt mit AS machen, aber da ich nicht viel zeit hab muss dir die Normal variante auch reichen und ich denke es ist alles leicht verständlich.

Gruß Super4uwak

PS: kannst ja deine seite mal zeigen wenn sie fertig ist, würde gerne kritik üben und könnte dir sicherlich noch ein paar tipps geben

Jormungand · 20.12.2009

AW: zweites Mal auf Schaltfläche klicken

@ernstl: Danke für den Tipp. Genau die Strategie hatte ich schon versucht, bin aber gescheitert, weil ich igendwo nen Denkfehler habe. Deshalb habe ich mich ans Forum gewandt.

@4uwak: Danke für die fla, davon kann ich was lernen, aber ich glaube, in meinem Fall hilft sie nicht weiter.
Um meine Website klein zu halten, lade ich alle Elemente über Actionscript rein, d.h. ich kann auf die MCs kein AS legen. Drum stopf ich möglichst alles in ein Schlüsselbild.

4uwak · 20.12.2009

AW: zweites Mal auf Schaltfläche klicken

also grundsetzlich würde ich dir das nicht empfehlen alles ins erste Frame zu schreiben, da du mit AS 2.0 arbeitest muss dir klar sein das es die Performents viel langsamer ist als AS 3.0 und wenn du alles ins erste Frame reinstopfst gehst du gefahr das eine Functionen an anfang nicht verfügbar sind weil das Script so lang ist, ich empfehle dir lieber einen preloader rein zu stellen und nur so wenig wie möglich rein zu laden, weil der gast am anfang sieht wie der preloader die seite ladet und wartet aber wenn später die functionen oder die animationen nicht functionieren weil das script noch nicht fertig geladen ist dann wird es kein gast verstehen wieso etwas nicht functioniert.

PS: größe gering halten, wieso schreibst du oben beim tween die y und die x achse rein wenn du aber nur einen animierst das ist doch auch überflüssig, nur als tipp lieber raus damit

Gruß Super4uwak

ernstl · 20.12.2009

AW: zweites Mal auf Schaltfläche klicken

4uwak schrieb:
also grundsetzlich würde ich dir das nicht empfehlen alles ins erste Frame zu schreiben, da du mit AS 2.0 arbeitest muss dir klar sein das es die Performents viel langsamer ist als AS 3.0 und wenn du alles ins erste Frame reinstopfst gehst du gefahr das eine Functionen an anfang nicht verfügbar sind weil das Script so lang ist, ich empfehle dir lieber einen preloader rein zu stellen und nur so wenig wie möglich rein zu laden, weil der gast am anfang sieht wie der preloader die seite ladet und wartet aber wenn später die functionen oder die animationen nicht functionieren weil das script noch nicht fertig geladen ist dann wird es kein gast verstehen wieso etwas nicht functioniert.

Naja, er sagte ja nicht, dass er alles ins erste Frame setzt, sondern nur, dass er alles in ein Frame gesetzt hat. Ansonsten stimme ich Dir nicht zu was die Länge eines Scriptes angeht. An ein Limit wird man nicht so schnell gelangen.
Das mit der Performance ist zwar soweit richtig, dass AS3 schneller ist, wird aber bei einer solchen Anwendung überhaupt nicht zum Tragen kommen. AS3 und die Geschwindigkeit machen sich erst bei richtigen 3D-Anwendungen und laufzeit Entwicklungen bemerkbar. Alles andere ist sehr wohl mit AS2 performant erreichbar -und i.d.R. auch schneller erstellt...

@Jormungand: Poste doch mal die FLA. Ich muss im Übrigen 4uwak recht geben was Dein Vorgehen angeht. Es ist wirklich sehr komplitziert aufgebaut.

Jormungand · 20.12.2009

AW: zweites Mal auf Schaltfläche klicken

@4uwak & ernstl
AS3 würde ich auch gern können, aber im Moment habe ich keine Möglichkeit, mich da durchzubeißen.
Ich habe mich falsch ausgedrückt: Ich habe eine AS-Leiste, in der alle MCs reingeladen werden. Es liegt nicht alles auf dem ersten Frame. Einen Preloader habe ich.

PS: größe gering halten, wieso schreibst du oben beim tween die y und die x achse rein wenn du aber nur einen animierst das ist doch auch überflüssig, nur als tipp lieber raus damit

... Es ist wirklich sehr komplitziert aufgebaut.

Super Tipps, hab ich gleich umgesetzt:

Code:

// Transitions importieren

import mx.transitions.Tween;
import mx.transitions.easing.*;

// Variablendeklaration

var uebermich_offen = false;
var portfolio_offen = false;
var kontakt_offen = false;
var pos1auf = {y:375};
var pos2auf = {y:400};
var pos1zu = {y:325};
var pos2zu = {y:350};
var tempo = 15;


// ************************* Über mich Button *************************
if (uebermich_offen == false) {
    // Portfolio und Kontakt werden nach unten verschoben - onPress

    _root.uebermich.onPress = function() {


        new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1auf.y, tempo);
        new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2auf.y, tempo);

        uebermich_offen = true;
    };
} else {

    // Portfolio und Kontakt bewegen sich zum ihrem Ursprung - onPress
    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);

    _root.uebermich.gotoAndPlay("out");

    uebermich_offen = false;
}
// Portfolio und Kontakt bewegen sich zum ihrem Ursprung - onRollOut
_root.uebermich.onRollOut = function() {


    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);

    _root.uebermich.gotoAndPlay("out");

    uebermich_offen = false;
};
// Buttonanimation 
_root.uebermich.onRollOver = function() {
    _root.uebermich.gotoAndPlay("in");
};
// Sprung zum Bezeichner Uebermich
_root.uebermich.onRelease = function() {
    _root.gotoAndPlay("uebermich");
};



// ************************* Portfolio Button *************************
if (portfolio_offen == false) {
    //  Portfolio ist Ursprung - Kontakt wird nach unten verschoben - onPress
    _root.portfolio.onPress = function() {

        var pos1zu = {x:400, y:325, speed:20};
        new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);

        var pos2 = {x:400, y:400, speed:20};
        new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2auf.y, tempo);
        
        portfolio_offen = true;
    };
} else {
    // Portfolio und Kontakt bewegen sich zum ihrem Ursprung - onPress
    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);

    _root.portfolio.gotoAndPlay("out");

    portfolio_offen = false;
}
// Portfolio und Kontakt bewegen sich zum ihrem Ursprung - onRollOut
_root.portfolio.onRollOut = function() {

    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);

    _root.portfolio.gotoAndPlay("out");
    
    portfolio_offen = false;
};
// Buttonanimation 
_root.portfolio.onRollOver = function() {
    _root.portfolio.gotoAndPlay("in");
};
// Sprung zum Bezeichner Portfolio

_root.uebermich.onRelease = function() {
    _root.gotoAndPlay("portfolio");
};



// ************************* Kontakt & Impressum Button *************************
if (kontakt_offen == false) {
    //  Portfolio und Kontakt sind Ursprung - onPress

    _root.kontakt.onPress = function() {

        new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
        new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);
        
        kontakt_offen = true;
    };
} else {
    // Portfolio und Kontakt bewegen sich zum ihrem Ursprung - onPress
    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);

    _root.kontakt.gotoAndPlay("out");

    kontakt_offen = false;
}

_root.kontakt.onRollOut = function() {

    new Tween(_root.portfolio, "_y", Strong.easeOut, _root.portfolio._y, pos1zu.y, tempo);
    new Tween(_root.kontakt, "_y", Strong.easeOut, _root.kontakt._y, pos2zu.y, tempo);

    _root.kontakt.gotoAndPlay("out");
    
    kontakt_offen = false;
};
// Buttonanimation 
_root.kontakt.onRollOver = function() {
    _root.kontakt.gotoAndPlay("in");
};
// Sprung zum Bezeichner Kontakt

_root.uebermich.onRelease = function() {
    _root.gotoAndPlay("kontakt");
};

stop();

Der zweite Klick der Buttons, zum Schließen des Dropdowns funzt aber immer noch nicht.

ernstl · 20.12.2009

AW: zweites Mal auf Schaltfläche klicken

Habe mir jetzt mal deinen AS richtig angeschaut. Das ist soweit ja kein schlechter Ansatz. Du machst dabei nur einen Fehler:
Die If-Else Abfragen musst Du in eine Funktion packen, damit man diese auch immer wieder aufrufen kann. So wird sie lediglich einmal abgespielt.

Ich zeige Dir mal ein Beispielcode, anhand Du die Vorgehensweise erkennen kannst. Erstelle dazu einfach ein MC, dem Du den Instanznamen 'derButton_MC' gibst. Anschließend folgenden Code in den Frame setzen:

PHP:

ausfahren = function () {
    this.onEnterFrame = function() {
        derButton_MC._yscale += 20;
        if (derButton_MC._yscale >=400) {
            delete this.onEnterFrame
        }
    };
}
einfahren = function () {
    this.onEnterFrame = function() {
        derButton_MC._yscale -= 15;
        if (derButton_MC._yscale <=100) {
            delete this.onEnterFrame
        }
    };
}

derButton_MC.onRollOver = function() {
    ausfahren();
};
derButton_MC.onRollOut = function() {
    einfahren();
};
derButton_MC.onReleaseOutside = function() {
    einfahren();
};

Ich hoffe Dir wird dadurch klar, wie der Aufbau in etwa sein sollte.

PS: Ich hatte keine Lust mich durch dein AS zu kämpfen, darum nur ein Beispiel

Jormungand · 21.12.2009

AW: zweites Mal auf Schaltfläche klicken

In meinem Flashkurs liege ich ziemlich zurück, weil ich versuche "richtiges" Flash zu machen.
Um rechtzeitig fertig zu werden, habe ich meine Strategie geändert und verlege mich vorerst auf Zeitleistenakrobatik. Wahrscheinlich komme ich nach meinem Kurs hierher zurück und versuche dann die Seite gescheit hinzubekommen.
Sorry ernstl und 4uwak, dass ich hier abbreche und danke für die Erleuchtungen.

ernstl · 21.12.2009

AW: zweites Mal auf Schaltfläche klicken

Ist doch okay -immerhin sagst Du bescheid.
Das Beispiel von mir wäre aber eigentlich fast fertig, d.h. zumindest für das, wonach Du gefragt hast.