Anzeige

Stage horizontal und vertikal zentrieren mit fixer größe

Stage horizontal und vertikal zentrieren mit fixer größe | PSD-Tutorials.de

Erstellt von flochiller, 09.07.2009.

  1. flochiller

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    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: Testseite

    Code (Text):
    1. _root.createEmptyMovieClip("index_mc",0);
    2. index_mc.loadMovie("Main_scale.swf");
    3. Stage.align = "TL";
    4. Stage.scaleMode = "noScale";
    5. var stageListener:Object = new Object();
    6. stageListener.onResize = function() {
    7.     rootwidth = 900;
    8.     rootheight = 600;
    9.     StageWidth = Stage.width;
    10.     StageHeight = Stage.height;
    11.     trace(StageWidth+"    "+Stage.width+"   "+StageHeight+"    "+Stage.height);
    12.     _root.text1_txt.text = StageWidth+"   "+StageHeight+"   ";
    13.     Xlimit = StageWidth/2-rootwidth/2-10;
    14.     Ylimit = StageHeight/2-rootheight/2-5;
    15.     if (StageWidth>=rootwidth) {
    16.         _root.index_mc._x = Xlimit;
    17.     } else {
    18.         _root.index_mc._x = 0;
    19.     }
    20.     if (StageHeight>=rootheight) {
    21.         _root.index_mc._y = Ylimit;
    22.     } else {
    23.         _root.index_mc._y = 0;
    24.     }
    25. };
    26. Stage.addListener(stageListener);
    27. 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
     
    #1      
  2. Jeopardize

    Jeopardize Noch nicht viel geschrieben

    Dabei seit:
    14.05.2009
    Beiträge:
    27
    Geschlecht:
    männlich
    Stage horizontal und vertikal zentrieren mit fixer größe
    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 (Text):
    1. <div style="height:600px; width:900px; overflow:scroll;"> <!-- SWF --> </div>
     
    #2      
  3. flochiller

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    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.
     
    #3      
  4. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    Stage horizontal und vertikal zentrieren mit fixer größe
    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
     
    #4      
  5. flochiller

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    AW: Stage horizontal und vertikal zentrieren mit fixer größe

    hmm Stimmt mit visible gehts ;)
    jetzt ist die seile aber leider nimmer zentriert...
     
    #5      
  6. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    Stage horizontal und vertikal zentrieren mit fixer größe
    AW: Stage horizontal und vertikal zentrieren mit fixer größe

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

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    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
     
    #7      
  8. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    Stage horizontal und vertikal zentrieren mit fixer größe
    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...
     
    #8      
  9. flochiller

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    AW: Stage horizontal und vertikal zentrieren mit fixer größe

    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.
     
    #9      
  10. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.316
    Geschlecht:
    männlich
    Ort:
    Dresden
    Kameratyp:
    zum durchgucken
    Stage horizontal und vertikal zentrieren mit fixer größe
    AW: Stage horizontal und vertikal zentrieren mit fixer größe

    Du kannst auch mit js zentrieren:

    Code (Text):
    1. <html>
    2. <head>
    3. <script type="text/javascript">
    4. function zentrieren(){
    5.     if (window.innerWidth > 900){
    6.     document.getElementById('mitte').style.left = (window.innerWidth - 900)/2 + "px";
    7.     }
    8.     else {
    9.     document.getElementById('mitte').style.left = 0;
    10.     }
    11.     if (window.innerHeight > 600){
    12.     document.getElementById('mitte').style.top = (window.innerHeight - 600)/2 + "px";
    13.     }
    14.     else {
    15.     document.getElementById('mitte').style.top = 0;
    16.     }
    17. }
    18. </script>
    19. </head>
    20. <body onLoad="zentrieren();" onResize="zentrieren();">
    21. <div id="mitte" style="position:absolute; top:0; left:0; width:900px; height:600px;">
    22.  
    23. <!-- hier den Flashfilm rein -->
    24.  
    25. </div>
    26. </body>
    27. </html>
     
    Zuletzt bearbeitet: 11.07.2009
    #10      
  11. SineTempore

    SineTempore Nicht mehr ganz neu hier

    Dabei seit:
    25.01.2007
    Beiträge:
    201
    Geschlecht:
    männlich
    Stage horizontal und vertikal zentrieren mit fixer größe
    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 :)
     
    #11      
  12. flochiller

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    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?
     
    #12      
  13. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Stage horizontal und vertikal zentrieren mit fixer größe
    AW: Stage horizontal und vertikal zentrieren mit fixer größe

    ist es gar nicht.
    Code (Text):
    1.  
    2. html,body{
    3.   height: 100%;
    4. }
    5. #container{
    6.   height: 600px;
    7.   width: 900px;
    8.   margin: auto;
    9. }
    10.  
    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.
     
    #13      
  14. flochiller

    flochiller Nicht mehr ganz neu hier

    Dabei seit:
    01.11.2008
    Beiträge:
    81
    Geschlecht:
    männlich
    Ort:
    .at
    Software:
    LR 5, C4D
    Kameratyp:
    Canon 40D; Sony RX100M2
    Stage horizontal und vertikal zentrieren mit fixer größe
    AW: Stage horizontal und vertikal zentrieren mit fixer größe

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