23.3 Praxis HTML
 
23.3.1 Rahmenlos
HTML\Rahmenlos
Wenn ein Flash Player-Film (SWF) innerhalb eines HTML-Dokumentes dargestellt wird, dann zeigt der Browser normalerweise um den Film herum Ränder in der Farbe des HTML-Dokumentes an – selbst wenn Sie für den Flash Player-Film innerhalb des Registers HTML im Menü Datei • Einstellungen für Veröffentlichungen festlegen, dass der Film 100 Prozent des Browserfensters einnehmen soll.
Eine Lösung ist die direkte Anzeige des Flash Player-Films im Browser ohne ein HTML-Dokument. Dies hat aber den Nachteil, dass sich einige Optionen für Flash-Filme nicht festlegen lassen. Dazu zählen z.B. das Kontextmenü oder Einstellungen für die Shockmachine. Besonders unangenehm bei dieser Lösung ist, dass keine Plug-in-Überprüfung oder kein automatischer Plug-in-Download möglich ist und der Browser die dann unbekannte Datei zum Speichern auf der lokalen Festplatte anbietet.
Die Raender bestimmen Sie seit dem Internet Explorer 2 im HTML-Code innerhalb des Body-Tags durch die Parameter leftmargin fuer links und rechts und topmargin fuer unten und oben. <BODY leftmargin=0 topmargin=0> verhindert die Raender um einen Flash Player-Film, aber leider nicht bei den Netscape-Browsern. Durch die Angabe von marginwidth und marginheight wird erreicht, dass der Flash Player-Film auch im Netscape Navigator 4 immerhin seinen linken und oberen Rand weglaesst: <body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>. Der rechte und der untere Rand sind noch vorhanden, da Netscape dort normalerweise die Scrollbalken anzeigt – wenn Sie den Flash-Film groesser skalieren (z. B. auf 120%), werden die Scrollbalken eingeblendet, und dadurch faellt der Rand weg.
Hier klicken, um das Bild zu Vergrößern
Abbildung 23.1
Flash-Film im Browser mit Rand
Das Festlegen der Ränder über Cascading Style Sheets ist eine weitere Alternative, die durch das W3-Konsortium festgelegt wurde. Z. B. durch <style type="text/css">body { margin-top: 0px; margin-left: 0px} </style> wird für den Internet Explorer sichergestellt, dass keine Ränder übrig bleiben.
Da das Style-Tag leider nicht von älteren Browsern unterstützt wird, bietet sich der Einsatz der dritten Methode an: Frames. Diese werden ab dem Internet Explorer 3 und ab dem Netscape Navigator 2 dargestellt. Falls Sie Ihren Flash-Film trotz allem auch in Browsern ohne Frames anzeigen wollen, können Sie ja <BODY leftmargin=0 topmargin=0 marginwidth=0 marginheight=0> wie oben beschrieben innerhalb des Noframes-Bereiches verwenden.
Durch den Einsatz von Frames lassen sich die Ränder um einen Flash-Film zuverlässig verhindern. Zuerst muss der Flash Player-Film sowohl horizontal als auch vertikal mit 100% dargestellt werden, was Sie seit Flash 4 unter Datei • Einstellungen für das Veröffentlichen festlegen können. Natürlich können Sie auch direkt im HTML-Code die Werte für Breite und Höhe auf 100 Prozent setzen (width="100 %" height="100 %"). Da der Netscape Navigator keine Framesets aus nur einem Frame darstellen kann, werden mindestens zwei Frames benötigt. Der erste Frame enthält ein HTML-Dokument mit dem Flash Player-Film und der zweite ein leeres HTML-Dokument (die Angabe des leeren HTML-Dokumentes kann auch weggelassen werden, solange der zweite Frame definiert bleibt). Ob die beiden Frames spaltenweise nebeneinander oder zeilenweise übereinander liegen, ist Geschmackssache – in diesem Beispiel werden die Frames zeilenweise angeordnet.
Damit der leere Frame moeglichst nicht zu sehen ist, bekommt er die relative Hoehe 1, der Frame mit dem Flash-Film erhaelt die Hoehe 100 Prozent (rows="100 %,*"). Um zu verhindern, dass spaeter ein Betrachter Ihrer Site auf die Idee kommt, die Groesse der Frames zu veraendern, sollten Sie den Parameter noresize einsetzen.
Hier klicken, um das Bild zu Vergrößern
Abbildung 23.2
Flash-Film im Browser ohne Rand
Innerhalb des Dokumentes mit dem Frameset lassen sich für jeden Frame die Ränder (marginwidth="0" marginheight="0") ausschalten. Um auch die Bereiche für die Scrollbalken zu deaktivieren, kann der Parameter scrolling="no" verwendet werden. Der Rahmen für die Frames wird durch die Parameter frameborder="NO" border="0" framespacing="0" im Frameset-Tag deaktiviert. Der HTML-Code des fertigen Framesets könnte dann wie folgt aussehen:
<HTML>
<head>
<title>Flash ohne Rand</title>
</head>
<frameset rows="100 %, *" border="0" framespacing="0"
frameborder="NO">
<frame src="flash.html" name="Flash" marginwidth="0"
marginheight="0" scrolling="NO" noresize>
<frame src="blank.html" name="Leer" marginwidth="0"
marginheight="0" scrolling="NO" noresize>
</frameset>
<noframes>
<body bgcolor="#FFFFFF">
</body>
</noframes>
</html>
23.3.2 Zentrieren
Hier klicken, um das Bild zu Vergrößern
Abbildung 23.3
Die Werte für die Ränder und das Zentrieren von Inhalten geben Sie mit Dreamweaver komfortabel an – auch ohne HTML-Kenntnisse.
Aufgrund von gestalterischen Einschränkungen und ästhetischen Anforderungen gepaart mit technischen Voraussetzungen wie Performance kommt es häufig vor, dass sich eine Flash-Anwendung nicht dem Browser anpassen, sondern immer in der Originalgröße dargestellt werden soll. Dies bedingt dann meist, dass die Anwendung im Browser zentriert werden muss. Ist die horizontale Zentrierung noch einfach durch HTML-Tags in der Form <div align="center">content</div> zu realisieren, benötigt die vertikale Richtung schon mehr Aufwand. Hier bieten sich Tabellen an, deren Inhalt sich sowohl horizontal (align="center") als auch vertikal (valign="middle") auf die Mitte positionieren lässt:
<TABLE WIDTH="100 %" HEIGHT="100 %" BORDER="0">
<TR align="center" valign="middle">
<TD>content</TD>
</TR>
</TABLE>
Falls das Ganze dann noch ohne störende Ränder gewünscht ist, dann reicht es nicht, nur die Tabelle durch border="0" »randlos« zu schalten. Auch das HTML-Dokument benötigt entsprechende Anweisungen, die am einfachsten direkt mit dem BODY-Tag verbunden werden:
<HEAD>
<TITLE>Meine Seite</TITLE>
</HEAD>
<BODY marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">
<TABLE WIDTH="100 %" HEIGHT="100 %" BORDER="0">
<TR align="center" valign="middle">
<TD>content</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Im Zusammenspiel mit Flash erleichtert die kostenlose Erweiterung namens »Center in Browser« diese Einstellungen (http://dynamic.macromedia.com/bin/MM/exchange/extension_detail.jsp?extOid=139598).
Hier klicken, um das Bild zu Vergrößern
Abbildung 23.4
Um Flash-Filme im Webbrowser zentriert oder ohne Ränder zu zeigen, bietet Macromedia
auf der Website »Macromedia Exchange« (http://www.macromedia.com/cfusion/exchange) kostenlose Erweiterungen.
Zentrieren nur mit ActionScript
Das Zentrieren einer Flash-Anwendung gelingt auch mit ActionScript ohne den Einsatz von HTML. Stellen Sie dafür unter Datei • Einstellungen für Veröffentlichungen im Register HTML ein, dass sich die Anwendung dem Browserfenster zu 100 Prozent anpassen soll. Durch das statische Objekt Stage haben Sie nun in ActionScript die Möglichkeit, die Anwendung davon unabhängig doch nicht zu skalieren (Stage.scaleMode = "noScale";) und zu zentrieren (Stage.align = "";).
23.3.3 Flash-Layer
Eine Kombination von HTML und Flash stellen transparente Flash-Anwendungen dar. Unter der Bezeichnung Flash-Layer sind diese jedoch als aggressive Werbeform in Verruf geraten. Ursprünglich sind transparente Flash-Anwendungen nur unter Windows und nur im Internet Explorer möglich. Erst seit dem Flash-Player der Version 6.0.60.48 funktioniert der fensterlose Modus auch mit den folgenden Browsern und Betriebssystemen:
|
Windows Internet Explorer 3 oder höher |
|
|
Windows Netscape 7.0 oder höher |
|
|
Windows AOL oder höher |
|
|
Windows Mozilla 1.0 oder höher |
|
|
Windows CompuServe |
|
|
Mac OS X Internet Explorer 5.1 oder höher |
|
|
Mac OS X Netscape 7.0 oder höher |
|
|
Mac OS X AOL oder höher |
|
|
Mac OS X Mozilla 1.0 oder höher |
|
|
Mac OS X CompuServe |
Flash-Layer unterscheiden dabei im Wesentlichen nur zwei Punkte von »normal« eingebetteten Flash-Anwendungen. Das ist zum einen der Einsatz von Ebenen im HTML-Dokument und der Fenstermodus-Parameter für die Flash-Anwendung, der ebenfalls im HTML-Dokument vorgenommen wird.
Bei der Verwendung eines HTML-Editors wie Dreamweaver ziehen Sie die Ebene (Layer) in Ihr Dokument und stellen die Position sowie die Größe ein. Um die gesamte Browserfläche zu verwenden, wählen Sie für die linke und obere Position jeweils 0 und für die Breite und Höhe jeweils 100%. Sollten Sie die manuelle Eingabe von HTML-Code bevorzugen, sieht dieser ungefähr wie folgt aus:
<div id="layer" style="position:absolute; left:0; top:0; width:100 %; height:100 %; z-index:1">content</div>
Anschließend platzieren Sie die Flash-Anwendung in der Ebene und geben dieser die notwendigen Parameter mit. Neben der Größe ist das in erster Linie der Fenstermodus (wmode). Als Wert für den Fenstermodus sind die folgenden Einstellungen erlaubt:
|
|
Opaque: Diese Einstellung bietet sich an, falls andere Elemente vor dem Flash Player-Film platziert werden sollen (z.B. mit Ebenen in dynamischem HTML). |
|
|
Transparent: Diese Einstellung stellt Alphakanäle im Webbrowser dar: Zum Beispiel kann ein Hintergrund platziert werden, der an den durchsichtigen Stellen des Flash Player-Films zu erkennen ist. Diese Einstellung wählen Sie normalerweise für Flash-Layer. |
|
|
Window: Diese Einstellung animiert Flash Player-Filme am schnellsten. Der Flash-Film wird in einem eigenen Fenster abgespielt. Window ist ebenfalls der Standardwert. |
Für den Fall, dass Sie die händische Angabe des HTML-Codes bevorzugen, erhalten Sie eine Ebene mit einem transparenten Flash-Film durch die folgenden Angaben:
<div id="layer" style="position:absolute; left:0; top:0; width:100 %; height:100 %; z-index:1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="100
%" height="100 %">
<param name="movie" value="flash-layer.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="flash-layer.swf" width="100 %" height="100 %" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"
wmode="transparent"></embed>
</object>
</div>
Weitere Informationen zu diesem Thema finden Sie auch direkt bei Macromedia – etwa darüber, wie man einen Flash-Film mit transparentem Hintergrund erzeugt (http://www.macromedia.com/support/flash/ts/documents/wmode.htm) oder wie Flash-Inhalte oberhalb aller DHTML-Ebenen erscheinen (http://www.macromedia.com/support/flash/ts/documents/flash_top_layer.htm).
|
