Ausrichtung im Browserfenster

[n.stirner]

Hallo zusammen. Hätte da mal ne Frage an die Spezialisten.

Bin gerade dabei eine HP zu realisieren, bei der sich das „swf“ an die Browsergröße anpasst. Auf dieser Seite, soll sich das „footer_menue“ immer horizontal im Browserfenster zentrieren. Soweit nichts Außergewöhnliches.

Habe das mit folgendem Script gelöst:


//////////////

Stage.scaleMode = "noScale";
Stage.align = "LT";


footer_instanz.onResize = function() {
this._width = Stage.width;
this._y = (Stage.height - 35)
};

Stage.addListener(footer_instanz);
footer_instanz.onResize();


footer_menue_instanz.onResize = function() {
this._x = Stage.width/2-this._width/2;
this._y = (Stage.height - 35)
};

Stage.addListener(footer_menue_instanz);
footer_menue_instanz.onResize();

//////////////////


Funktioniert auch ganz gut soweit. (Siehe Anhang)

Meine Frage: Wie kann ich das anstellen, dass sich das „footer_menue“ nicht sofort neu ausrichtet wenn ich die Fenstergröße verändere, sondern erst nach kurzer Verzögerung langsam die neue Position einnimmt. Als Beispiel fällt mir da folgende Site ein: http://green.colorize.net/

Hat da jemand ne Idee? Wäre euch sehr dankbar.

[Der Frager]

Hallo!

Such mal nach "Easing". Ein einfaches Beispiel:

PHP-Code:

this.mc.onEnterFrame = function() {
    if (Math.round(this._x) != 400) {
        this._x += (400-this._x)/10;
    } else {
        this._x = 400;
        delete this.onEnterFrame;
    }
}; 


[AVisioN]

Also erstmal könntest Du mal auf 31 fps gehen

Ich hab die neue Datei angehängt.
Hier der Code:

PHP-Code:

Stage.scaleMode = "noScale";
Stage.align = "LT";


footer_instanz.onResize = function() {
    this._width = Stage.width;
    this._y = (Stage.height - 35)
};

Stage.addListener(footer_instanz);
footer_instanz.onResize();


footer_menue_instanz.onResize = function() {
    //this._x = Stage.width/2-this._width/2;
    //this._y = (Stage.height - 35)
    tx = Stage.width/2-this._width/2;
    ty = (Stage.height - 35)
    newTween(this,tx,ty);
}

Stage.addListener(footer_menue_instanz);
footer_menue_instanz.onResize();

function newTween(mc,x,y){
    mc.tweenX.stop();
    mc.tweenY.stop();
    trace(mc+"  "+x+"   "+y);
    var easeType = mx.transitions.easing.Regular.easeOut;
    var time = 1;
    var targetX = x;
    var targetY = y;
    mc.tweenX = new mx.transitions.Tween(mc, "_x", easeType, mc._x, targetX, time, true);    
    mc.tweenY = new mx.transitions.Tween(mc, "_y", easeType, mc._y, targetY, time, true);
} 


[n.stirner]

„AVisioN“,vielen Dank für deine rasche Antwort.

Dein Script bringt mich schon mal ein gutes Stück weiter, auch wenn ich es nicht zu 100% nachvollziehen kann. Bin halt eher Grafiker… Bei all zu viel Logik steig ich wohl geistig aus.

Was ich vergessen hatte zu erwähnen. Das Menue darf sich nur in der Horizontalen ausrichten. Es muß also ständig innerhalb des schwarzen Rahmens bleiben. Hab`s grad schon probiert anzupassen. Na ja, beim Probieren ist es bis jetzt auch geblieben. Krieg`s nicht auf die Reihe.

[AVisioN]

So vielleicht ?:

// Der Part ist klar denke ich
Stage.scaleMode = "noScale";
Stage.align = "LT";
 
//Auch klar denke ich - Wir legen fest dass der Footer "hören" soll ob die Stage "geresized";) wird---------------------------------
footer_instanz.onResize = function() {
    this._width = Stage.width; // machen den Footer so breit wie die Bühne
    this._y = (Stage.height - 35) // Footer y Position soll um 35pix kleiner sein als die Bühnenhöhe
};
 
Stage.addListener(footer_instanz); // Hier sagen wir ihm endgültig dass er "hören" soll ob Bühne ...
footer_instanz.onResize(); // Hier rufen wir das resize Ding mauell auf da dass beim ersten Aufruf der swf Datei nicht passiert
//-----------------------------------------
 
footer_menue_instanz.onResize = function() {
    //this._x = Stage.width/2-this._width/2;
    //this._y = (Stage.height - 35)
    tx = Stage.width/2-this._width/2; // Hier rechnen wir die passende x position aus damit das menü mittig steht 
    this._y = (Stage.height - 35) // Hier rechnen wir die passende x position aus damit das menü mittig steht UND  SETZEN SIE SOFORT
    newTween(this,tx); // Die gewünschte X- Position setzen wir nicht sofort sondern sagen dass er sich da hinbewegeb soll - dafür rufen wir new tween auf und übergeben die Ziel X Position
}
 
Stage.addListener(footer_menue_instanz);
footer_menue_instanz.onResize();
 
function newTween(mc,x,y){
    mc.tweenX.stop(); // Hier stoppen wir den alten Tweeen falls es sich gerade noch bewegt - muss man nicht - besser ists aber
    //mc.tweenY.stop();
    trace(mc+"  "+x+"   "+y);
    var easeType = mx.transitions.easing.Regular.easeOut; // Hier sagen wir WIE es sich bewegen soll - in dem Fall heisst das "Am Ende verlangsamen"
    var time = 1; // Er soll in einer Sekunde an der Position sein
    var targetX = x; // Das ist die X - Endposition
    //var targetY = y;
    mc.tweenX = new mx.transitions.Tween(mc, "_x", easeType, mc._x, targetX, time, true);   // Hier erstellen wir den Tween
    //mc ist der MovieClip der getweent werden soll, "_x" ist die Eigenschaft die getweent werden soll
    // easeType s.o. , mc._x ist der Startwert und targetX der Zielwert - heisst also "Tweene den mc von seiner jetzigen _x zu targetX
    // time ist klar und true bedeutet "sofort abspielen"
    //mc.tweenY = new mx.transitions.Tween(mc, "_y", easeType, mc._y, targetY, time, true);
} 

[n.stirner]

Ja, sehr gut. Genau so hatte ich mir das vorgestellt. Danke für deine Mühe. Möchte dich ungern noch mal damit nerven aber eine Sache fällt mir in diesem Zusammenhang noch auf.

Und zwar, dass sich das Menue beim aufrufen der „swf“ immer erstmal in die zentrierte X-Position animiert. Besser wäre, wenn das Menue von Anfang an zentriert ist (unabhängig der Browsergröße). Die Animation findet dann erst beim Vergrößern oder Verkleinern der Fenstergröße statt. Ist das realisierbar?

Hab mich wahrscheinlich jetzt etwas unglücklich ausgedrückt. Hoffe du verstehst trotzdem was ich meine. Danke nochmal...

[AVisioN]

ICh glaub ich hab schon verstanden. 10min wirds aber dauern

[AVisioN]

Je länger ich das anschau glaub ich dass eine Klasse nett wäre.
Aber so gehts auf jeden Fall mal.

Stage.scaleMode = "noScale";
Stage.align = "LT";
 
footer_instanz.onResize = function() {
    this._width = Stage.width; 
    this._y = (Stage.height - 35);
};
 
Stage.addListener(footer_instanz);
footer_instanz.onResize();
//-----------------------------------------
 
footer_menue_instanz.onResize = function() {
    tx = Stage.width/2-this._width/2;
    this._y = (Stage.height - 35);
    newTween(this,tx);
}
Stage.addListener(footer_menue_instanz);
//footer_menue_instanz.onResize(); Die sorgt dafür das sich das Ding das erste mal bewegt - das kommt jetzt weg
footer_menue_instanz.setFirstRunPosition = function(){
    this._x = Stage.width/2-this._width/2;
    this._y = (Stage.height - 35);
}
footer_menue_instanz.setFirstRunPosition();
 
function newTween(mc,x,y){
    mc.tweenX.stop();
    trace(mc+"  "+x+"   "+y);
    var easeType = mx.transitions.easing.Regular.easeOut;
    var time = 1;
    var targetX = x; 
    mc.tweenX = new mx.transitions.Tween(mc, "_x", easeType, mc._x, targetX, time, true);
} 

Ich denke das war was Du meintest.. ?

[die kleene]

hallo,

ich wollte nur mal kurz sagen das mir dein beitrag wahnsinnig viel
weitergeholfen hat.
ich suche schon seit ner ewigkeit nach dieser lösung.



vielen dank.
die kleene

[AVisioN]

Immer wieder gerne
(falls Du mich meinst)

[die kleene]

hallo,

wie schaffe ich es denn das ein mc in der rechten ecke bleibt und ein anderer in der linken ??
irgendwie klappt das bei mir nur mit einer ecke...
mein ansatz ist wahrscheinlich auch falsch...

Stage.scaleMode = "noScale";
Stage.align = "LT";


footer_instanz.onResize = function() {
	this._width = Stage.width;
	this._y = (Stage.height - 27)
};

Stage.addListener(footer_instanz);
footer_instanz.onResize();


footer_menue_instanz.onResize = function() {
	//this._x = Stage.width/2-this._width/2;
	//this._y = (Stage.height - 35)
	tx = (Stage.width - 300 )
	ty = (Stage.height - 570)
	newTween(this,tx,ty);
}

Stage.addListener(footer_menue_instanz);
footer_menue_instanz.onResize();

function newTween(mc,x,y){
	mc.tweenX.stop();
	mc.tweenY.stop();
	var easeType = mx.transitions.easing.Regular.easeOut;
	var time = 1;
	var targetX = x;
	var targetY = y;
	mc.tweenX = new mx.transitions.Tween(mc, "_x", easeType, mc._x, targetX, time, true);	
	mc.tweenY = new mx.transitions.Tween(mc, "_y", easeType, mc._y, targetY, time, true);
}
//**************bis hier ist alles cool****************


//so geht`s anscheinend nicht...
//dieses ding soll eigentlich immer in der linken ecke bleiben !

logo.onResize = function() {
	//this._x = Stage.width/2-this._width/2;
	//this._y = (Stage.height - 35)
	tx = (Stage.width - 1000 )
	ty = (Stage.height - 150)
	newTween(this,tx,ty);
}

Stage.addListener(logo);
logo.onResize();

function newTween(mc,x,y){
	mc.tweenX.stop();
	mc.tweenY.stop();
	var easeType = mx.transitions.easing.Regular.easeOut;
	var time = 1;
	var targetX = x;
	var targetY = y;
	mc.tweenX = new mx.transitions.Tween(mc, "_x", easeType, mc._x, targetX, time, true);	
	mc.tweenY = new mx.transitions.Tween(mc, "_y", easeType, mc._y, targetY, time, true);
}

[AVisioN]

Also einen linksunten und einen rechtsunten und keinen mehr in der Mitte ?

[die kleene]

ja...
geht das ?

[AVisioN]

Es geht alles

Ich musste den y-Tween noch einbauen - der war nur halb vorgesehen

Habe es Dir jetzt nochmal angehängt.
Hier sieht man aber gut dass man umbedingt eine Klasse bauen sollte. Dann könnte man z.B. sagen

PHP-Code:

var rightBox = new alignedClip(box_mc,bottomRight); 


Da würde man sich bei vielen Elementen sehr viel Arbeit sparen - und schöner wärs auch

So siehts jetzt aus (schau dir die datei auch an - da hab ich die clips eingebaut):

PHP-Code:

// Der Part ist klar denke ich
Stage.scaleMode = "noScale";
Stage.align = "LT";
//------------- nur wichtig für den footer. ich lass es mal drin --------------------------
footer_instanz.onResize = function() {
    this._width = Stage.width;
    this._y = (Stage.height - 35);
};
Stage.addListener(footer_instanz);
footer_instanz.onResize();
//-------------------------------------------------------------------

//------------------------ footer menu kram --------------------------
footer_menue_instanz.onResize = function() {
    tx = Stage.width/2-this._width/2;
    this._y = (Stage.height - 35);
    newTween(this,tx,this._y);
}
Stage.addListener(footer_menue_instanz);
footer_menue_instanz.onResize();
//----------------------------------------------------------------------

//------------------- Kram für Logo rechts/oben -------------------------
box_bottomLeft.onResize = function(){
    ty = Stage.height - this._height;
    newTween(this,this._x,ty);
}
Stage.addListener(box_bottomLeft);
box_bottomLeft.onResize();
//-----------------------------------------------------------------------

//------------------- Kram für Logo rechts/oben -------------------------
box_bottomRight.onResize = function(){
    tx = Stage.width - this._width;
    ty = Stage.height - this._height;
    newTween(this,tx,ty);
}
Stage.addListener(box_bottomRight);
box_bottomRight.onResize();
//-----------------------------------------------------------------------

//-------------------- Hilfsfunktion ------------------------------------
function newTween(mc,x,y){
    mc.tweenX.stop();
    mc.tweenY.stop();
    var easeType = mx.transitions.easing.Regular.easeOut;
    var time = 1;
    var targetX = x;
    var targetY = y;
    mc.tweenX = new mx.transitions.Tween(mc, "_x", easeType, mc._x, targetX, time, true);
    mc.tweenY = new mx.transitions.Tween(mc, "_y", easeType, mc._y, targetY, time, true);
} 


Passt ?

[die kleene]

jaaaaaaaaaaaaaaa.
danke danke.


jetzt ist alles perfekt.