Galileo Design < openbook > Galileo Design - Know-how für Kreative.
Know-how für Kreative

 << zurück
ActionScript 1 und 2 von Sascha Wolter (http://www.saschawolter.de/)
Objektorientierung und Codedesign mit Flash MX 2004
Buch: ActionScript 1 und 2

ActionScript 1 und 2
672 S., mit CD, Referenzkarte, 44,90 Euro
Galileo Design
ISBN 3-89842-221-6
gp Kapitel 23 HTML
  gp 23.1 HTML-Tags
    gp 23.1.1 EMBED und OBJECT
    gp 23.1.2 ALIGN
    gp 23.1.3 ALLOWSCRIPTACCESS
    gp 23.1.4 BASE
    gp 23.1.5 BGCOLOR
    gp 23.1.6 CODEBASE
    gp 23.1.7 CLASSID
    gp 23.1.8 DEVICEFONT
    gp 23.1.9 FLASHVARS
    gp 23.1.10 HEIGHT
    gp 23.1.11 ID
    gp 23.1.12 LOOP
    gp 23.1.13 MENU
    gp 23.1.14 MOVIE
    gp 23.1.15 NAME
    gp 23.1.16 PLAY
    gp 23.1.17 PLUGINSPAGE
    gp 23.1.18 QUALITY
    gp 23.1.19 SALIGN
    gp 23.1.20 SCALE
    gp 23.1.21 SEAMLESSTABBING
    gp 23.1.22 SRC
    gp 23.1.23 SWLIVECONNECT
    gp 23.1.24 SWREMOTE
    gp 23.1.25 WIDTH
    gp 23.1.26 WMODE
  gp 23.2 HTML-Vorlagen
    gp 23.2.1 Beispiel
    gp 23.2.2 Vorlagenvariablen
  gp 23.3 Praxis HTML
    gp 23.3.1 Rahmenlos
    gp 23.3.2 Zentrieren
    gp 23.3.3 Flash-Layer


Galileo Design - Zum Seitenanfang

23.3 Praxis HTML  downtop


Galileo Design - Zum Seitenanfang

23.3.1 Rahmenlos  downtop

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.

Abbildung
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.

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

Galileo Design - Zum Seitenanfang

23.3.2 Zentrieren  downtop

Abbildung
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).

Abbildung
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 = "";).


Galileo Design - Zum Seitenanfang

23.3.3 Flash-Layer  toptop

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:

gp  Windows Internet Explorer 3 oder höher
gp  Windows Netscape 7.0 oder höher
gp  Windows AOL oder höher
gp  Windows Mozilla 1.0 oder höher
gp  Windows CompuServe
gp  Mac OS X Internet Explorer 5.1 oder höher
gp  Mac OS X Netscape 7.0 oder höher
gp  Mac OS X AOL oder höher
gp  Mac OS X Mozilla 1.0 oder höher
gp  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:

gp  Opaque: Diese Einstellung bietet sich an, falls andere Elemente vor dem Flash Player-Film platziert werden sollen (z.B. mit Ebenen in dynamischem HTML).
gp  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.
gp  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).

 << zurück
  
  Zum Katalog
Zum Katalog: ActionScript 1 und 2
ActionScript 1 und 2
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Einstieg in ActionScript - Aktuell zu Flash 8






 Einstieg in ActionScript


Zum Katalog: Einstieg in Flash 8






 Einstieg in Flash 8


Zum Katalog: Flash 8 und PHP






 Flash 8 und PHP


Zum Katalog: Flash 8-Tutorials






 Flash 8-Tutorials


Zum Katalog: Dreamweaver 8






 Dreamweaver 8


Zum Katalog: Webseiten programmieren und gestalten






 Webseiten programmieren und gestalten


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo





Copyright © Galileo Press GmbH 2005
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Design]

Galileo Press GmbH, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de