Flashfilm mit swfobject als Hintergurnd in einer Tabelle

S

Steffiberlin

Mitglied
Hallo ins Forum, frisch angemeldet stelle ich gleich meine erste Frage. Habe schon unter "Suchen" und einige Stunden bei Google gesucht, aber zu meinem konkreten Problem leider nichts Passendes gefunden. Hoffentlich kann mir nun hier jemand helfen. Ich arbeite an einer Website die oldschool mit einer Tabelle angelegt ist. Ich möchte nun als Hintergrund für diese Tabelle eine swf mit swfobject und wmode transparent einbinden. Darüber soll dann in der Tabelle der mit CSS formatierte Text erscheinen. Ich weiß nun leider nicht, wie und wo ich das besagte swfobject als Hintergrund für die Tabelle einbinden soll. Die Tabelle sieht momentan aus wie folgt:

PHP: 
</HEAD>
<body onLoad="warte()">
<table width="1000" height="550" border="0" align="center" cellpadding="0" cellspacing="0" class="td19">      
  
<tr>
<td width="450" height="375"></td>
<td width="550" height="375" align="center" class="blau"><div id="text1"><br>Text text text text<br>text text<br></div></td>
</tr>

<tr>
<td width="450" height="175"></td>
<td width="550" height="175" align="center" class="blau"><div id="text1"><br>Text text text text<br>text text<br></div></td>
</tr>

</table>
</body>
</html>

Das swfobject möchte ich natürlich passend in die Tabelle (also mittig, zentriert) als Hintergrund einbinden, es sieht bisher so aus:

PHP: 
<script type="text/javascript" src="swfobject.js"></script> 
<div id="flashcontent"><img src="bilder/bea02hinweis.jpg" width="1000" height="550"></div>
<script type="text/javascript">
var so = new SWFObject("flash/hintergrund.swf", "mymovie", "1000", "550", "5", "#FFFFFF"); 
so.addParam("wmode", "transparent");
so.write("flashcontent");
</script>

Ich denke, ich kann das swfobject nicht per CSS einbinden, denn das geht glaube ich leider nicht mit CSS und swfobject... oder vielleicht doch und wenn ja, wie? Bisher habe ich in der CSS ein Hintergrundbild eingebunden (siehe in der table ganz oben class="td19") das soll aber nur als Platzhalter dienen bis der Flashfilm erscheint. Dieser Effekt muss nicht sein, den könnte ich auch weglassen, denn der Flashfilm als Hintergrund ist mir auf jeden Fall wichtiger.

Ich danke im Voraus für jede Hilfe! :D

:) Steffiberlin
 
Zuletzt bearbeitet:
Hallo - und Willkommen ;-)

Gibt es einen bestimmten Grund, warum du hier eine Tabelle einsetzt?
Wenn ich dich richtig verstanden habe, ist das gleiche auch mit Divs realisierbar - und auch einfacher.
Hier ein kleines Beispiel, mangels SWF datei hab ich mir hier einfach eine "ausgeborgt" (auf dieser Seite machen die das übrigens auch und zwar ziemlich gut, wie ich finde)

Code: 
<html>
<head>
<style type="text/css">
* {margin:0; padding:0;}
html, body {width:100%: height:100%;}
#swfbg {position:absolute; top:0; left:0; background-color: #FF9900; width:100%; height:100%; z-index: 0; }
#content { position:relative; width: 50%; height: 25%; margin: 23% auto; background-color: #FF0000; z-index:99;}
</style>
</head>

<body>
<div id="swfbg">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
   width="100%" height="100%>
 <param name="movie" value="http://at.playstation.com/static/furn/portal/common/flash/background.swf">
 <param name="quality" value="high">
 <param name="bgcolor" value="#FFFFFF">
 <!--[if !IE]> <-->
 <object data="http://www.playstation.com/static/furn/portal/common/flash/background.swf"
         width="100%" height="100%" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF">
  <param name="pluginurl" value="http://www.adobe.com/go/getflashplayer">
  FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->
</object>
</div>
<div id="content"></div>
</body>
</html>

Mangels swfObject und Zeit zum ausprobieren, hab ich hier einfach das Beispiel Object von der SWFObject-Dokumentation genommen, funktioniert aber auch mit swfobject
http://blog.deconcept.com/swfobject/

lg
michi
 
Zuletzt bearbeitet:
Hey Michi, vielen Dank für deine schnelle Hilfe und die ausführliche Antwort! Ja, das Problem ist, dass ich eine bereits bestehende Site überarbeite. Die Tabelle ist daher eine Vorgabe, mit der ich wohl oder übel "irgendwie leben" muss. Kommt noch dicker, das ganze ist am Ende sogar ein Frameset. Wenn ich mir dein Beispiel ansehe, dann ist mir da auch gar nicht klar, wie und wo genau ich die <div> mit den Texten in der Html oben auf den Flashfilm drauf legen soll. Ich muss im Übrigen ja auch die Vorgaben aus der Vorlage einhalten, d.h. die von mir erstellte Site muss insgesamt width="1000" height="550" sein, damit sie schließlich in die mainSite vom Frameset reinpasst. Alles ganz schön kniffelig. Suche bei Google und so schon seit Stunden. Ohje *verzweifelt ich bin*. LG, Steffi
 
Wie du sicher bemerkt hast, kann eine SWF-Datei nicht unmittelbar als Hintergrund für ein HTML-Element definiert werden, wie es mit Grafikdateien möglich ist.

Beide (Tabelle und SWFObject) besitzen fixe Dimensionen, und sollen sich zur horizontalen u. vertikalen Fenstermitte ausrichten?

Das entspricht dann dieser Box http://d-graff.de/fricca/center.html, nur halt in doppelter Ausführung, bei der die vordere / obere Inhaltsbox einen höheren z-index-Wert (http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index) erhält, um sich in der Schichtposition über dem Objekt zu befinden - so wie von Michi im CSS demonstriert :)

CSS: 
#swfbg {position:absolute; ...; z-index: 0; } /* SWFObject */
#content { position:relative; ...; z-index:99;} /* Content */

Für das SWFObject benötigst du dann vermutlich zusätzlich diesen Parameter, damit der Inhalt es überdeckt, und nicht andersherum, trotz der festgelegten z-index-Regelungen.

Code: 
 so.addParam("wmode", "transparent");
wmode="transparent" ist z.B. auch dann vonnöten, wenn ein Navigationsmenü seine Untermenüebenen horizontal und/oder vertikal "über" solch einem Flash-File ausklappen soll ;-)
 
Zuletzt bearbeitet:
Hallo Spicelab, Dankeschön auch dir für deine Antwort. Ja, beides (Tabelle und SWFObject) besitzen fixe Dimensionen (Breite 1000, Höhe 550) und sollen zentriert übereinander in der Site liegen. Ich stehe nur leider grad total auf dem Schlauch, wie ich deine Vorschläge jetzt praktisch in Dreamweaver umsetzen soll. Kannst du mir da eventuell bitte etwas konkreter weiterhelfen? Über Google habe ich mittlerweile nach langer Sucherei ein ansatzweise passendes Beispiel gefunden unter

http://www.forum-hilfe.de/threads/48146-Flash-als-Hintergrund/page4

Ich versteh es aber leider nicht (da waren auch so richtige Cracks am Werk, davon bin ich noch Lichtjahre weit entfernt). Ich habe das Beispiel aus dem Quelltext dort mal rausgefischt und meinen Vorgaben (Name und Ort vom Flashfilm, der CSS usw.) meier Umgebung angepasst, doch es funktioniert nicht. Siehe hier:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 <head>
  <title>Testversion</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="bea01.css" rel="stylesheet" type="text/css">
<link rel="SHORTCUT ICON" href="bilder/favicon.ico">
  <script type="text/javascript" src="swfobject.js"></script>
  <script type="text/javascript">
            var mode;
            
            if (navigator.appName.indexOf("Internet Explorer") != -1)
               mode="transparent";
            else if (navigator.userAgent.indexOf("Opera") != -1)
               mode="transparent";
            else
              mode = "direct";
              
   var flashvars = { imageFileName: "bilder/bea01.jpg", logo: "false"};
   var params = {};
   params.play = "true";
   params.loop = "true";
   params.menu = "false";
   params.quality = "high";
   params.scale = "showall";
   params.wmode = mode;
   params.allowscriptaccess = "always";
   params.allownetworking = "all";
   var attributes = {};
   attributes.align = "top";
   swfobject.embedSWF("test.swf", "myAlternativeContent", "100%", "100%", "6.0.0", false, flashvars, params, attributes);
  </script>
        <style type="text/css">
<!--
* {
 margin: 0;
 padding:0;
 border: 0;
}
html, body, #container {
 height: 100%;
 background: #000;
}
html, body {
 font: 11px Verdana, Helvetica, Arial, sans-serif;
 color: #6a6a6a;
}
#container {
 height: auto;
    min-height: 100%;
 position: absolute;
 z-index: 3;
 top: 0px;
 left: 300px;
    padding-top: 50px;
    margin-bottom: 50px;
 background: transparent;
}
#content {
 background-color: #000000;
 padding: 13px 18px;
}
#myAlternativeContent {
 position: fixed;
    top: 0px;
    left: 0px;
    z-index:1;
}
-->
</style>
 </head>
 <body>
  <div id="myAlternativeContent">
   <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
   </a>
  </div>
        <div id="container">
 <div id="content">Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />Ich bin ein DIV und liege &uuml;ber dem Flashfilm<br />
 </div>
<br /><br /><br />
</div>
 </body>
</html>

Meine erste Vermutung ist, dass es evtl mit der Zeile
PHP: 
swfobject.embedSWF("test.swf", "myAlternativeContent", "100%", "100%", "6.0.0", false, flashvars, params, attributes);

zusammenhängt, da ich nämlich einen Flashfilm habe, der mit der Version 6 veröffentlicht wurde. Da hab ich eben statt "9.0.0" einfach "6.0.0" eingefügt. Keine Ahnung aber ich sehe beim Testen nur den schwarzen Hintergrund mit dem Text aus der div, nicht aber den Flashfilm test.swf, der aber auf der Festplatte bei mir an der richtigen angegebenen Stelle liegt. Hängt es evtl mit diesem fricca Dingens zusammen, muss ich das im Quelltext noch einbinden aber wie nur? Bin ganz traurig, möchte das Prob so gerne lösen. Danke im Voraus! Steffiberlin
 
PS: Hab nochmal geschaut, die swfobject.js liegt auch richtig im Hauptverzeichnis. Also an einem falschen Verweis diesbezüglich kann es auch nicht liegen. Es handelt sich allerdings um ein älteres Skript. Suche grad nach einer neuen Version von swfobject zum Herunterladen, bisher ohne Erfolg.
 
Öhm args 2 Fragen hab ich nun doch noch, sorry, also es funktioniert schon mal oh Mann das ist so klasse, Riesenfreude! Aber (in der Euphorie eben gar nicht geschnallt) im IE und in Firefox ist die swf jetzt leider viel zu groß dargestellt. Das liegt wohl an 100% in den Angaben, aber sie soll ja immer nur fixed 1000 breit und 550 hoch dargestellt werden und soll auch so bleiben bei jeder Veränderung des Browserfensters. Spice haste dazu noch eine Idee bitte? Danke, Steffi
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück