Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

Good_Punk · 12-01-2009, 14:15

Also ich hab ein Flash in eine html Seite integriert und es soll zentriert vor schwarzem Hintergrund dargstellt werden. Die Auflösung der Flashseite ist 1024x768.

Wenn die Seite in den Browser paßt (bei 1280x1024 zB) ist sie zentriert und alles wunderbar. Geh ich 1-2 Auflösungsstufen runter und sie paßt nicht mehr bekomme ich Scrollbalken was auch kein Problem ist.

Erst bei 1024x768 geht irgendwas schief und die Seite wird am oberen Teil abgeschnitten. Der Scrollbalken ist ganz oben, aber es fehlt immer noch ein Teil, der nicht angezeigt wird und zu dem man auch nicht hinscrollen kann.

Hier mal der html Code, den ich benutze (und woanders her habe, selbst kenn ich mich damit wenig aus leider ^^)

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript" src="swfObject/swfobject.js"></script>
<title>Bewerbungshomepage</title>

</head>

<body>

<style type="text/css">
	
	body {
		background-color: #000000;
	}

	#flashcontent {
    position: absolute;
    width: 1024px;
    height: 768px;
    left: 50%;
    top: 50%;
    margin-left: -512px;
    margin-top: -384px;
  }

</style>

  <div id="flashcontent">

  </div>
	
	<script type="text/javascript">
     var so = new SWFObject("Bewerbung2_9.swf", "inhalt", "1024", "768", "8", "#000000");
     so.write("flashcontent");
  </script>

</body>
</html>

richtsteiger · 12-01-2009, 16:36

Ja, das passiert leider bei der absoluten Positionierung des Containers. Um das
zu vermeiden bzw. sicher zu stellen, dass dein Flash immer schön mittig platziert
wird, gibt's für SWFObject ein nützliches Addon namens SWFForceSize. Damit
solltest du dein Problem in den Griff bekommen.

Ok, dazu musst du dein Flash halt als Full-Flash anlegen, aber das sollte ja nicht
das Problem sein. Ansonsten kommst du nicht umhin, die Auflösung mittels
Javascript zu bestimmen und den Container dann entsprechend zu platzieren.

Good_Punk · 12-01-2009, 18:03

Zitat:

Zitat von richtsteiger

Ansonsten kommst du nicht umhin, die Auflösung mittels
Javascript zu bestimmen und den Container dann entsprechend zu platzieren.

Und wie geht das ?
Ich hab mal ein wenig gegoogelt und gefunden, wie man in Javascript die Auflösung ausliest, aber wie ich jetzt mit ner JS Variable das Aussehen der Seite veränder hab ich leider kein Plan ^^

richtsteiger · 13-01-2009, 10:29

So, ich hab mal ein bisschen gekramt und auch was gefunden. Hatte ich
nämlich schon mal gebraucht. Hab das Script jetzt mal etwas angepasst, so
müsste dass jetzt also funktionieren. Getestet hab ich es in FF und IE6. Müsste
aber auch in den anderen Browsern funktionieren.

Also, hier mal das Beispiel:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Positionierung</title>
    <style type="text/css">
      
      body {
        background-color: #000000;
        color:#fff;
      }
      
      #flashcontent {
        border:1px solid #fff; /* ein Rahmen zum Kenntlichmachen des Containers */
        position: absolute;
        width: 1024px;
        height: 768px;
        left: 50%;
        top: 50%;
        margin-left: -512px;
        margin-top: -384px;
      }
      
    </style>
    <script type="text/javascript">
      
      // Funktion zur Positionierung des Containers
      // wird sowohl beim Laden wie auch beim Resize aufgerufen
      function sizeControl(containerId, resize){
      
        // das Element bestimmen
        var elem = document.getElementById(containerId);
        
        // Zu erst holen wir uns mal die Abmessungen des Containers
        var elemHeight = elem.offsetHeight; // Höhe des Containers bestimmen
        var elemWidth = elem.offsetWidth; // Breite des Elements
        
        // Und jetzt bestimmen wir noch den zur Verfügung stehenden Platz im
        // Browserfenster, wir müssen aber eine Fallunterscheidung machen, da
        // der Internet Explorer mal wieder extra behandelt werden will
        var screenHeight;
        var screenWidth;
        var changeSize = true;
        if (window.innerWidth) {
          // Non-IE 
          screenWidth = window.innerWidth;
          screenHeight = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
          // IE 6+ in 'standards compliant mode'  
          screenWidth = document.documentElement.clientWidth;
          screenHeight = document.documentElement.clientHeight;
        } else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
          // IE 4 compatible  
          screenWidth = document.body.clientWidth;
          screenHeight = document.body.clientHeight;
        } else {
          // um sicher zu gehen, da Netscape meines Wissens nach selbst
          // document.body.clientWidth nicht unterstützt
          changeSize = false;
        }
        
        if (changeSize) {
        
          // jetzt prüfen wir, ob der Anzeigebereich ausreichend ist
          if (screenHeight < elemHeight) {
            // jetzt ändern wir die vertikale Positionierung des Containers
            elem.style.top = "0";
            elem.style.marginTop = "0";
          } else {
            if (resize) {
              // soll ja wieder schön mittig sein, wenn das Fenster wieder groß
              // gezogen wird, greift nur beim Resize
              elem.style.top = "50%";
              elem.style.marginTop = "-" + (elemHeight / 2) + "px";
            }
          }
          // das gleich jetzt halt noch mit der Breite
          if (screenWidth < elemWidth) {
            // und hier ändern wir noch die horizontale Position des Containers
            elem.style.left = "0";
            elem.style.marginLeft = "0";
          } else {
            if (resize) {
              // und auch hier wieder sorgen wir dafür, dass der Container wieder
              // schön mittig ist, wenn das Fenster nach dem Resize groß genug ist
              elem.style.left = "50%";
              elem.style.marginLeft = "-" + (elemWidth / 2) + "px";
            }
          }
          
        }
        
      }
      
      window.onload = function () {
        sizeControl('flashcontent', false);
      }
      window.onresize = function () {
        sizeControl('flashcontent', true);
      }
      
    </script>
  </head>
  <body>
    <div id="flashcontent">
      Hier kommt dann halt das Flash rein
    </div>
  </body>
</html>

Good_Punk · 14-01-2009, 10:19

Heureka, Skript tut !

Vielen Dank

12-01-2009, 14:15	#1 (permalink)
Good_Punk Neuer User Registriert seit: Dec 2007 Beiträge: 6	Zentriertes Flash abgeschnitten bei low res Also ich hab ein Flash in eine html Seite integriert und es soll zentriert vor schwarzem Hintergrund dargstellt werden. Die Auflösung der Flashseite ist 1024x768. Wenn die Seite in den Browser paßt (bei 1280x1024 zB) ist sie zentriert und alles wunderbar. Geh ich 1-2 Auflösungsstufen runter und sie paßt nicht mehr bekomme ich Scrollbalken was auch kein Problem ist. Erst bei 1024x768 geht irgendwas schief und die Seite wird am oberen Teil abgeschnitten. Der Scrollbalken ist ganz oben, aber es fehlt immer noch ein Teil, der nicht angezeigt wird und zu dem man auch nicht hinscrollen kann. Hier mal der html Code, den ich benutze (und woanders her habe, selbst kenn ich mich damit wenig aus leider ^^) Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <script type="text/javascript" src="swfObject/swfobject.js"></script> <title>Bewerbungshomepage</title> </head> <body> <style type="text/css"> body { background-color: #000000; } #flashcontent { position: absolute; width: 1024px; height: 768px; left: 50%; top: 50%; margin-left: -512px; margin-top: -384px; } </style> <div id="flashcontent"> </div> <script type="text/javascript"> var so = new SWFObject("Bewerbung2_9.swf", "inhalt", "1024", "768", "8", "#000000"); so.write("flashcontent"); </script> </body> </html>

12-01-2009, 16:36	#2 (permalink)
richtsteiger nobody is perfect Registriert seit: Jul 2004 Ort: munich Beiträge: 876	Ja, das passiert leider bei der absoluten Positionierung des Containers. Um das zu vermeiden bzw. sicher zu stellen, dass dein Flash immer schön mittig platziert wird, gibt's für SWFObject ein nützliches Addon namens SWFForceSize. Damit solltest du dein Problem in den Griff bekommen. Ok, dazu musst du dein Flash halt als Full-Flash anlegen, aber das sollte ja nicht das Problem sein. Ansonsten kommst du nicht umhin, die Auflösung mittels Javascript zu bestimmen und den Container dann entsprechend zu platzieren. __________________ XING

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

14-01-2009, 10:19	#5 (permalink)
Good_Punk Neuer User Registriert seit: Dec 2007 Beiträge: 6	Heureka, Skript tut ! Vielen Dank