Flashfilm mit swfobject als Hintergurnd in einer Tabelle @ tutorials.de: Tutorials, Forum & Hilfe

Steffiberlin · 13.11.10 10:30

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-Code:


</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-Code:


<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!

Steffiberlin

mgraf · 13.11.10 12:32

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

Steffiberlin · 13.11.10 13:14

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

spicelab · 13.11.10 13:44

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/eigenscha...ng.htm#z_index) erhält, um sich in der Schichtposition über dem Objekt zu befinden - so wie von Michi im CSS demonstriert

Code css:

1 2	#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 as:

1	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

Steffiberlin · 13.11.10 15:09

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/48...tergrund/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-Code:


<!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-Code:


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

Steffiberlin · 13.11.10 15:15

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.

spicelab · 13.11.10 15:53

Für einen abschließenden erfolgreichen Wochenausklang: http://code.google.com/p/swfobject/

SWFObject 2.2 - What's new? (letztes Update stammt vom 13.06.09)

Steffiberlin · 13.11.10 16:07

Spicelab... alter Falter, verdammte Axt.... D A N K E ******************************! Es ****t

))))))))))))))))))))))))))))))))))

Steffiberlin · 13.11.10 16:08

Hihihi so geil. Warum wird das harmlose Wort ****en denn durch Sternchen ersetzt? Also nochmals WOW ich bin voll happy.

Steffiberlin · 13.11.10 16:21

Ö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

Steffiberlin · 13.11.10 17:13

Södele, jetzt hab ich mal folgendes statt 100 % geändert im Quellcode:

PHP-Code:


 swfobject.embedSWF("test.swf", "myAlternativeContent", "1000", "550", "6", false, flashvars, params, attributes);

Nun wird die swf zwar sehr schön bzw. von der Größe her korrekt angezeigt, aber sie klebt am linken Bildrand leider. Wie blöd, was mach ich denn da jetzt****?

Was ich auch nicht verstehe ist das mit dem "myAlternativeContent". Teste ich die Seite auf IE ohne Flash Player, zeigt er mir logischerweise die swf nicht an, dafür aber nach wie vor den div Container mit dem Textinhalt. Darunter dann den Adobe Flashbutton, der zur Adobe Download Site führt, der ist aber auch links oben in die Ecke gequetscht. Das Alternativbild "bea01", das ich dafür eigentlich gedacht hatte unter

PHP-Code:


var flashvars = { imageFileName: "bilder/bea01.jpg", logo: "false"};

taucht gar nicht auf. Liegt aber im richtigen Verzeichnis. Ich würde es allerdings grundsätzlich viel lieber so programmieren, dass man, wenn kein Flash Player vorhanden ist, automatisch auf eine andere (ganz neue) Seite verlinkt wird. Auf der könnte ich dann individuell einen Text, ein Hintergrundbild und einen Buttton einfügen, der den Link zum Adobe Download anbietet.

Oha, Fragen über Fragen

Liebe Grüße, Steffi

spicelab · 13.11.10 17:29

Zitat von Steffiberlin

Nun wird die swf zwar sehr schön bzw. von der Größe her korrekt angezeigt, aber sie klebt am linken Bildrand leider.Wie blöd, was mach ich denn da jetzt****?

Die CSS-Regeln der beiden Boxen umformulieren, damit die Boxen sich wie von dir gewünscht in der Fenstermitte ausrichten.

Ich hoffe, das CSS erschreckt dich jetzt nicht so früh am Abend

Code css:

#container,  #myAlternativeContent {
 position:absolute; /* absolute Positionsart */
 top:50%; /* Der obere Elementrand wird in der Fenstermitte positioniert */
 height:550px;
 margin-top:-275px; /* Die negative Hälfte von height:550px rückt das Element um die Hälfte seiner Höhe nach oben */
 left:50%; /* Der linke Elementrand wird in der Fenstermitte positioniert */
 width:1000px;
 margin-left:-500px; /* Die negative Hälfte von width:1000px rückt das Element um die Häfte seiner Breite nach links */
}
#container {
z-index:2;
}
#myAlternativeContent {
z-index:1;
}

Das Resultat http://d-graff.de/selfhtml/center1.html kommt auf den ersten Blick meiner ersten Linkempfehlung http://d-graff.de/fricca/center.html gleich. Auf den zweiten Blick offenbart diese Positionierungstechnik aber einen nicht unerheblichen Nachteil, sobald die Browserfenstergröße die Boxendimension unterschreitet, und die äußeren Seitenbereiche aus dem Sichtfeld verschwinden, wo sie für den Besucher (per Srcolllaufleiste) nicht greifbar sind.

Das Boxenverhalten bei einem zu kleinen Viewport kannst du in den beiden Demos miteinander vergleichen.

Steffiberlin · 14.11.10 14:09

Hey Spice, nochmal vielen Dank! Ich brauchte gestern Abend ne kleine Verschnaufspause. Hatte den ganzen Tag vor dem Compi gesessen, Kopfweh.

Jetzt hock ich schon wieder mehr als 3 Stunden davor, und ich muss leider sagen, das ist ganz schön schwer für mich alles. Ich habe deinen sehr brillianten Vorschlag versucht nachzubauen. Das Ergebnis ist, dass jetzt zwar der Text zentriert erscheint und der Adobe Button, aber die swf ist nun leider gar nicht mehr zu sehen,

weder im Firefox noch im IE. Heul! Was mache ich denn da bloss wieder falsch? Kannst du dir bitte meinen Quelltext nochmal ansehen bitte?

Hier ist er:

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test01</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<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", "1000", "550", "6", false, flashvars, params, attributes);
  </script>
<style type="text/css">
<!--

html, body{
  height:100%;
  margin:0;
  padding:0;
}

#spacer, #center{
  position:absolute;
  margin:0;
  padding:0;
}

#spacer{
  width:100%;        
  height:100%;
min-width:1006px;
min-height:556px;
}

html #IEspacer {
width:1006px;
height:556px;
}

#center {
padding:0;
border:1px solid #FFFFFF;
width:998px;
height:548px
position:absolute;
  top:50%;                  
  left:50%;
margin:-150px 0 0 -225px;
}

html #center {
  height:548px;
}

p, h1 {
  padding:0.5em;
  margin:0;
}

h1 {
  font-size:1.2em;
}
-->
</style>

</head>
<body>
<div id="spacer">
<div id="IEspacer">
<div id="center">
<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" class="blau">
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 />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>
</div>
</div>
</div>
</body>
</html>

Grundsätzlich verstehe ich etwas ganz Wichtiges noch nicht: Womit positioniere ich eigentlich genau den Hintergrund mit dem Flash Film und womit den Div-Container mit dem Text?

Diesen Unterschied zu erkennen und zu begreifen ist momentan mein größter Wunsch, der Kasus Knaktus sozusagen. Momentan steig ich da leider noch gar nicht durch!

Das ist vor allem auch deshalb so wichtig, weil der Hintergrund mit der swf zentriert im Browserfenster erscheinen soll. Der darauf liegende Div-Container mit dem Text soll sich diesen vorgegeben Maßen (Breite 1000px / Höhe 550px) natürlich anpassen, aber, er soll individuell mal links oder mal rechts mit einem Abstand von circa 70px zum jeweiligen Seitenrand positioniert werden, innerhalb des div-Containers soll der Text dann zentriert und mit einer bestimmten CSS-Klasse (zum Beispiel class="blau") ausgestattet sein.
Oha...ich hoffe, du kannst mir folgen und weiterhelfen.

Grüße****** Steffi

Edit: Oh, ich hab eben erst gesehen, dass man sich auch für die Hilfe bedanken kann unten in der Spalte, das habe ich natürlich sofort nachgeholt, lach! Falls das geht, ich könnte dir auch eine PN schicken mit einem Link , den ich aber nicht öffentlich posten darf, weil die Site offiziell noch nicht publiziert werden soll.

spicelab · 14.11.10 14:44

Ohne den schliessenden </style>-Tag muß <style> hier entfernt werden:

HTML-Code:

<style type="text/css">
<link href="bea01.css" rel="stylesheet" type="text/css">

Ansonsten wäre es hilfreich, den Link zur Online-Fassung zu nennen, damit wir auch im Bilde sind

Steffiberlin · 14.11.10 14:58

Hab ich entfernt. Jetzt sieht man zwar den Flashfilm aber nu er ist voll abgerutscht nach unten rechts. Lach! Ohje. Ich werde jetzt mal eine Version bauen, die ich über meinen Webaccount ins Netz stelle. Bis gleich. Grüßli, Stef

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

SWFObject und Vista IE

Automatisch Tabelle mit dem namen einer Spalte einer anderen Tabelle erstellen

SWFObject

Script von einer HTML in ein Flashfilm einbinden

Wie Flashfilm von einer Webseite speichern !

E-Mail:

Abonnieren Abbestellen