Stage horizontal und vertikal zentrieren mit fixer größe

flochiller · 09.07.2009

Hi!

Ich habe jetzt schon länger das Internet durchforstet und mich mit CSS sowie ActionScript 2.0 herumgespielt komme aber nicht zu dem Ergebniss, welches ich gerne hätte.

Folgende Aufgabenstellung:
Die Flashbühne hat eine größe von 900x600.
Diese soll sich nicht verändern.
Die Bühne soll immer horizontal und vertikal zentriert sein.
Ich habe im moment 2 Flashfiles:
index.swf und Main_scale.swf
index.swf dient nur der verschiebung der eigentlichen Bühne Main_scale.
In diesem Versuch hab ich ohne CSS gearbeitet.

Spielwiese:

Code:

_root.createEmptyMovieClip("index_mc",0);
index_mc.loadMovie("Main_scale.swf");
Stage.align = "TL";
Stage.scaleMode = "noScale";
var stageListener:Object = new Object();
stageListener.onResize = function() {
    rootwidth = 900;
    rootheight = 600;
    StageWidth = Stage.width;
    StageHeight = Stage.height;
    trace(StageWidth+"    "+Stage.width+"   "+StageHeight+"    "+Stage.height);
    _root.text1_txt.text = StageWidth+"   "+StageHeight+"   ";
    Xlimit = StageWidth/2-rootwidth/2-10;
    Ylimit = StageHeight/2-rootheight/2-5;
    if (StageWidth>=rootwidth) {
        _root.index_mc._x = Xlimit;
    } else {
        _root.index_mc._x = 0;
    }
    if (StageHeight>=rootheight) {
        _root.index_mc._y = Ylimit;
    } else {
        _root.index_mc._y = 0;
    }
};
Stage.addListener(stageListener);
stageListener.onResize();

Was hier nun das Problem ist: sobald der Browser kleiner als 900x600 wird kann man nicht nach rechts scrollen um den rest der Bühne zu sehen. Gibt es eine Möglichkeit HTML und Flash das ganze so zu verklickern, dass man erstens im Flash per Mousewheel und 2. die ganze bühne scrollen kann?

tia

Flo

Jeopardize · 10.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

Ich denke mal es sollte gehen wenn man die SWF in einen Div-Container verpackt der die gleiche Größe wie die SWF hat.

Code:

<div style="height:600px; width:900px; overflow:scroll;"> <!-- SWF --> </div>

flochiller · 10.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

Nein klappt leider auch nicht.
Sobald das Fenster kleiner als die Bühne wird, schneidet er ab und man srollt ins nichts.
Der IE zeigt überhaupt nur ausgegraute Scrollbars.

Sinn und Zweck der Übung ist ja das eine fixe Größe auch für kleinere Monitore, man muss da zwar scrollen aber man sieht zumindest den Content. Was ja bei Skalierung nicht klappt, da irgendwann alles unleserlich ist.

SineTempore · 10.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

bei mir (ff3) funktionierts, wenn ich das div in dem der film steckt einfach eine feste größe gebe. also wie das beispiel von jeopardize nur ohne das overflow alternativ den overflow auf visible setzen.
habs jetzt aber nur mal mit dem addon firebug ausprobiert ... aber da funktionierts so einwandfrei

flochiller · 11.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

hmm Stimmt mit visible gehts

jetzt ist die seile aber leider nimmer zentriert...

SineTempore · 11.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

mach in dem div noch zusätzlich margin: auto;
also <div style="...; margin: auto;">

flochiller · 11.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

mit
<div style="position:absolute; left:50%; top:50%; margin:auto;">
<div style="position:absolute; left:-50%; top:-300px; height:602px; width:902px; overflow:visible; margin:auto;">
ist es nun zwar zentriert allerdings kann man nicht nach links sondern die 900 nach rechts scrollen.
und der linke Rand des Flash Files ist abgeschnitten.
Ich denke ich komm nicht um eine Flash interne Lösung herum

SineTempore · 11.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

ok.... ich frag mich wie du auf das gekommen bist xD
also mach mal nur ein einziges div, sprich lösch eines.
das style attribut des übrigen divs setzt sich folgender maßen zusammen:
style="margin: auto; overflow: visible; height: 602px; width: 902px;"
damit ist das div dann vom linken und rechten rand gleich weit entfernt

btw des flash intern zu lösen wird nicht wirklich einfacher...

flochiller · 11.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

SineTempore schrieb:
ok.... ich frag mich wie du auf das gekommen bist xD
also mach mal nur ein einziges div, sprich lösch eines.
das style attribut des übrigen divs setzt sich folgender maßen zusammen:
style="margin: auto; overflow: visible; height: 602px; width: 902px;"
damit ist das div dann vom linken und rechten rand gleich weit entfernt

btw des flash intern zu lösen wird nicht wirklich einfacher...

Wieso 2 div? ? weil das ganze zwar horizontal aber nicht vertikal zentriert ist...
Ok sieht ja schon mal fein aus! leider funktioniert das mit der vertikalen zentrierung noch nicht.

cebito · 11.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

Du kannst auch mit js zentrieren:

Code:

<html>
<head>
<script type="text/javascript">
function zentrieren(){
    if (window.innerWidth > 900){
    document.getElementById('mitte').style.left = (window.innerWidth - 900)/2 + "px";
    }
    else {
    document.getElementById('mitte').style.left = 0;
    }
    if (window.innerHeight > 600){
    document.getElementById('mitte').style.top = (window.innerHeight - 600)/2 + "px";
    }
    else {
    document.getElementById('mitte').style.top = 0;
    }
}
</script>
</head>
<body onLoad="zentrieren();" onResize="zentrieren();">
<div id="mitte" style="position:absolute; top:0; left:0; width:900px; height:600px;">

<!-- hier den Flashfilm rein -->

</div>
</body>
</html>

SineTempore · 13.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

ok vertikale zentrierung geht so:
<div style="position: absolute; top: 50%; left: 50%; width:900px; height: 600px; margin-left: -450px; margin-top: -300px;">
-Flash-
</div>

sollte theoretisch so funktionieren allerdings gibts dann zumindest bei mir probleme wenn der bildschirm nicht genügend platz in der höhe hat.

btw
@cebito: schöne lösung

flochiller · 13.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

@SineTempore: das gibt wieder mein vorher angesprochenes Problem mit nicht nach links scrollen können.

Ich denke ich werde wohl nicht um diese hübsche JS Lösung herumkommen...
Leider muss ich grad feststellen, dass der IE garnichts macht.
Warum muss Webdesign
so mühsam sein?

sokie · 13.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

ist es gar nicht.

Code:

html,body{
  height: 100%;
}
#container{
  height: 600px;
  width: 900px;
  margin: auto;
}

jetzt noch eine der beiden im IE funktionierenden Doctypes verwenden und das funktioniert.

der Haken bei der Javascriptlösung ist der, dass es kein onResize event gibt, wenn das Browserfenster von vornherein in der volldarstellung kleiner als 900px in der Breite ist.

flochiller · 13.07.2009

AW: Stage horizontal und vertikal zentrieren mit fixer größe

@sokie: bei dem gibts aber keine Vertikale zentrierung... Danke für den DOCTYPE Tipp