flexible wabbelnde navigation

[esia]

hi,

am besten erstmal anschauen.

http://www.projektil.org/flash/detailbilder2.html

wie man sieht möchte ich ein wabbelnde navigation bauen. nur wie ichs bis jetzt zu lösen versuchte ists etwas ruckelig.
warum ist mir klar. ich habe mit tweens die vergrößerungen der einzelnen kästchen festgelegt und lasse nur per as die frames in die eine oder andere richtung laufen.

auf den kästchen liegt as der die variable aktiv den jeweiligen wert des berührten kästchen zuweißt und mein as der in einer schleife liegt lautet wie folgt:

PHP-Code:

if (aktiv>0) {
    if (eval("detailbild"+aktiv)._currentframe<20) {
        eval("detailbild"+aktiv).nextFrame();
    }
    for (i=1; i<=6; i++) {
        if (i == aktiv) {
            //nichts
        } else if (i == (aktiv-1)) {
            if (eval("detailbild"+i)._currentframe>10) {
                eval("detailbild"+i).prevFrame();
            } else if (eval("detailbild"+i)._currentframe<10) {
                eval("detailbild"+i).nextFrame();
            }
        } else if (i == (aktiv+1)) {
            if (eval("detailbild"+i)._currentframe>10) {
                eval("detailbild"+i).prevFrame();
            } else if (eval("detailbild"+i)._currentframe<10) {
                eval("detailbild"+i).nextFrame();
            }
        } else if (i == (aktiv+2)) {
            if (eval("detailbild"+i)._currentframe>8) {
                eval("detailbild"+i).prevFrame();
            } else if (eval("detailbild"+i)._currentframe<8) {
                eval("detailbild"+i).nextFrame();
            }
            } else if (i == (aktiv-2)) {
            if (eval("detailbild"+i)._currentframe>8) {
                eval("detailbild"+i).prevFrame();
            } else if (eval("detailbild"+i)._currentframe<8) {
                eval("detailbild"+i).nextFrame();
            }
        } else if (eval("detailbild"+i)._currentframe>1) {
            eval("detailbild"+i).prevFrame();
        }
    }
} else {
    for (i=1; i<=6; i++) {
        eval("detailbild"+i).prevFrame();
    }
}
mehr = 0;
for (i=1; i<=6; i++) {
    eval("detailbild"+i)._x = 10-(eval("detailbild"+i)._height)/2;
    eval("detailbild"+i)._y = mehr;
    mehr += eval("detailbild"+i)._height+abstand;
    this._y = starty+(hoehe-this._height)/2;
} 


ich glaube ich hab das viel zu umständlich gelöst. aber bei dem versuch die größen und abstände komplett dynamisch per as zu regeln bin ich leider gescheitert.

kann mir da wer helfen?

das problem ist nähmlich, das die kästchen nciht nur schaltflächen sind, sondern es geplant ist, wenn die navigation aktiv ist kleine bilder in den kästchen auftauchen zu lassen.


?

mfg esia

[esia]

bitte hat keine ahnung oder nen link zu nem tutorial oder so?

[tomtom69]

ist eval net veraltet?

[tomtom69]

… kann man net vom Prinzip so machen:

• Hast nen MC 10x10 px groß
• dann onClipEvent(MouseOver) if (dein_mc._width < x && dein_mc._height < y);
• dabei immer in Schleife abfragen, welche Größe der MC hat
• wenn Größe net erreicht, vergrößer weiter, wenn erreicht, hör auf.
• für das ganze brauchst Du noch ein Interval, damit's gleichmäßig läuft
• updateAfterEvent

Soviel zum Gedankenkonstrukt (in der Kürze) - das Script kann ich Dir leider net liefern, bin kein progger

Aber hier im FF findest Du sicherlich das passende

Greetz

[lasic+]

instaliere dir mal irgendein TweenPrototypen, oder mach einfach eine Funktion, die deine Kästchen skaliert, hier findeste was:

http://sephiroth.it/

ich würde deine Menüpunkte in einem Array verwalten:

menu = ["home", "work", usw.]

auf jedem der Buttons liegt ´ne Action, die ihn skaliert. Auserdem brauchste eine Variable, die den aktuellen (vergrößerten Button) enthält. Nun kannste bei onRollOver die Skalierungen vornehmen, so ungefähr (nur gescribbelt ;-))

for (var i=0; i<menu.lenght, i++)
{
menu[i].hitArea.onRollOver = function()
{
aktMc.deineSkalierfunktion(normal);
aktMc = this;
this.deineSkalierfunktion(gross);
}
}

aktMc ist die Variable, die dein vergrößertes mc enthält.
evtl. noch mit setIntervall arbeiten, damit erst wieder ausgezoomt wird, bevor die neue Vergrößerung stattfindet.

[tomtom69]

… so in der Richtung hab ich auch gedacht - zwar ohne Arrays

[esia]

danke für die antworten, aber ich fühl mich überfordert

vom verständnis sind mir eure vorschläge klar nur ist mein prob der code

[_kweso]

wenn das so werden soll, wie das mac osx dock, dann wuerd ich nicht mit rollOver arbeiten, sondern mit _x/_y-abstand maus zu button. also, je naeher die maus kommt umso groesser wird der mc. werd mal weiterueberlegen
bg
_k

[_kweso]

//bau einen mc mit zwei frames (der zweite ist fuer mouseOver)
//und loesch ihn von der buehne
//bibliothek: mc>>rechtsklick>>verknuepfung...>>export fuer as>>name:"button"
//dann das hier auf frame1 hauptzeitleiste:
buttons = new Array("about", "news", "projects", "clients", "contact", "downloads", "links");
//grundlage fuer die buttons
abst = 6;
//abstand zwischen den buttons
zoom = 1.3;
//vergroesserung bei mausannaeherung
for (wert in buttons) {
    //schleife fuer jeden wert im array buttons
    btn = buttons[wert];
    _root.attachMovie("button", wert, wert);
    _root[wert].nn = Number(wert);
    _root[wert].siz = _root[wert]._width;
    _root[wert].xx = wert*(_root[wert].siz+abst)+100;
    _root[wert]._y = 100.5;
    _root[wert].onRollOver = function() {
        //mouseOver effekt
        this.gotoAndStop(2);
    };
    _root[wert].onRollOut = function() {
        //mouseOver effekt
        this.gotoAndStop(1);
    };
    _root[wert].onEnterFrame = function() {
        this.abstmouse = Math.sqrt(this._xmouse*this._xmouse+this._ymouse*this._ymouse);
        if (this.abstmouse<this.siz*2) {
            this._xscale = 100+(this.siz*2-this.abstmouse)*zoom;
            this._yscale = this._xscale;
        } else {
            this._xscale = 100;
            this._yscale = 100;
        }
    };
}
mitte=Math.round(buttons.length/2)-1
_root.onEnterFrame = function() {
    for (wert in buttons) {
        if (wert == mitte) {
            _root[wert]._x = _root[wert].xx;
        } else if (wert>mitte) {
            _root[wert]._x = _root[wert-1]._x+_root[wert-1]._width/2+_root[wert]._width/2+abst;
        } else {
            _root[Number(wert)]._x = _root[Number(wert)+1]._x-_root[Number(wert)+1]._width/2-_root[Number(wert)]._width/2-abst;
        }
    }
}; 

[tomtom69]

**Fehler** Szene=Szene 1, Ebene=Ebene 1, Bild=1:Zeile 12: Syntaxfehler.
****//schleife fuer jeden wert im array buttons

**Fehler** Szene=Szene 1, Ebene=Ebene 1, Bild=1:Zeile 13: Syntaxfehler.
****btn = buttons[wert];

Anzahl der ActionScript-Fehler: 2 Gemeldete Fehler: 2

Das spukt er aus???

Hab alles so gemacht, wie geschrieben …

Greetz

[esia]

thx kweso hört sich gut an. nur laufen dann leider ganz schön viele onenterframes parallel. aber wird mit dem sbstand wesentlich smoother laufen.

ich hab hier auch ausprobiert immer noch mti button jetzt aber komplett per as:

PHP-Code:

on (rollOver, dragOver) {
    _parent.gotoAndStop(3);
    this.onEnterFrame = function() {
        aktiv = 1;
        mehr=0;
        for (i=1; i<=6; i++) {
            hoehe = eval("_parent.detailbild"+i)._height;
            if (i == aktiv) {
                if (hoehe<40) {
                    wert = (50-hoehe)/8;
                    hoehe += wert;
                    if (hoehe>40 || (40-hoehe<0.5)) {
                        hoehe = 40.5;
                    }
                }
            } else if (i == (aktiv-1) || i == (aktiv+1)) {
                if (hoehe<30.5) {
                    wert = (40-hoehe)/6;
                    hoehe += wert;
                    if (hoehe>30.5 || (30.5-hoehe<0.5)) {
                        hoehe = 30.5;
                    }
                } else {
                    wert = (hoehe-30.5)/2;
                    hoehe -= wert;
                    if (hoehe<30.5 || (hoehe-30.5<0.5)) {
                        hoehe = 30.5;
                    }
                }
            } else {
                if (hoehe>20.5) {
                    wert = (hoehe-20.5)/3;
                    hoehe -= wert;
                    if (hoehe<20.5 || (hoehe-20.5<0.5)) {
                        hoehe = 20.5;
                    }
                }
            }
            eval("_parent.detailbild"+i)._height = hoehe;
            eval("_parent.detailbild"+i)._width = hoehe;
            eval("_parent.detailbild"+i)._x = -((hoehe-20.5)/2);
            eval("_parent.detailbild"+i)._y = mehr;
            mehr += eval("_parent.detailbild"+i)._height+5;
            _parent._parent.detailbilder._y = _parent._parent.detailbilder.starty+(_parent._parent.detailbilder.hoehe-_parent._parent.detailbilder._height)/2;
        }
    };
}
on (rollOut, dragOut) {
    delete this.onEnterFrame;
} 


http://www.projektil.org/flash/detailbilder.html

funzt schon besser. aber mit der abstandsvariante sollte es am besten funktionieren. werd mal rumprobieren.


mfg esia

[_kweso]

bei mir gehts:
glaubst, dass das zu viele oEF´s sind?
mein systemleistungsmonitor registriert
den rechenaufwand gar nicht.

anbei nochmal das fla

[esia]

so hab jetzt mal deine vorlage genommen, aber komplett nach meinen bedürfnissen umgeschrieben. momentan schauts so aus:

http://www.projektil.org/flash/detailbilder3.html

eigentlich super so wie ichs wollte nur, wenn man mit der mouse rüberfährt springt auf einmal die ganze navi ein stück nach oben. und dann bei mehrmahligen rüberfahren immer noch ein wenig hoch und runter.


script schaut wie folgt aus:

PHP-Code:

on (rollOver, dragOver) {
    aus = 0;
    this.onEnterFrame = function() {
        fertig = 1;
        mehr = 0;
        for (i=1; i<=6; i++) {
            mitte = eval("detailbild"+i)._width/2;
            abstmouse = Math.sqrt((eval("detailbild"+i)._xmouse-mitte)*(eval("detailbild"+i)._xmouse-mitte)+(eval("detailbild"+i)._ymouse-mitte)*(eval("detailbild"+i)._ymouse-mitte));
            if (abstmouse>mitte*4) {
                eval("detailbild"+i)._xscale = 100;
                eval("detailbild"+i)._yscale = 100;
            } else {
                eval("detailbild"+i)._xscale = 100+(mitte*4-this.abstmouse)*1.3;
                eval("detailbild"+i)._yscale = eval("detailbild"+i)._xscale;
            }
            eval("detailbild"+i)._x = (20-20*eval("detailbild"+i)._xscale/100)/2;
            eval("detailbild"+i)._y = mehr;
            mehr += eval("detailbild"+i)._height+5*eval("detailbild"+i)._xscale/100;
            if (eval("detailbild"+i)._xscale>100) {
                fertig = 0;
            }
        }
        if (fertig == 1 && aus == 1) {
            delete this.onEnterFrame;
        }
    };
}
on (rollOut, dragOut) {
    aus = 1;
} 


rein theoretisch müsste es an den folgenden beiden zeilen liegen, aber ich finde den fehler nciht. vielleicht liegts auch wo anders.

PHP-Code:

eval("detailbild"+i)._y = mehr;
mehr += eval("detailbild"+i)._height+5*eval("detailbild"+i)._xscale/100; 


hier mal die fla zum reinschauen


http://www.projektil.org/flash/detailbilder3.fla



mfg esia

[esia]

help pls

[esia]

hmm, ich wäre wirklich dankbar wenn mir jemand wieterhelfen könnte. ich finde einfach nicht den fehler, warum die komplette navigation einmal viel nach oben und dann immer noch etwas nach oben und unten springt.

mfg esia