Randlos glücklich

Thema:
Randlos glücklich
Description:
Die perfekte Einbindung von Flash in HTML - ohne Rand und Scrollbalken
Keywords:
Flash, JavaScript, HTML, Ränder, PopUp
Author:
Daniel Schulten
Date:
16.11.1999
Doc-ID:
20-001
URL:
http://www.flashworker.de/tutorial/20/001.html
Version:
1.0
Änderungen:
n/a
Anforderungen:
alle Flashversionen
Vorkenntnisse:
Flash Grundkenntnisse
HTML Grundkenntnisse
JavaScript nützlich

Download:
PC: "randlos.zip", 10 kB

Einführung

Vorarbeiten

Außer Rand und Band
  In einem Teil des Fensters

  Fensterfüllend

Alt oder neu?
  Im gleichen Fenster

  In einem neuen Fenster


Einführung

Endlich ist der Flashfilm fertig an dem man so lange gebastelt hat und man fragt sich, wie man diesen am geschicktesten ins Internet bringen kann.
Es reicht nicht aus, die Datei einfach auf den Server zu spielen, ich muss, wie bei Grafiken, einer HTML Datei sagen wo mein Flashfilm stehen soll.

Ein Flashfilm kann entweder als einzelnes Objekt auf einer Seite stehen, genauso wie eine gewöhnliche Grafik auch. Den dazu notwendigen Code kann ich mit Aftershock (Flash3) oder "Publish" (Flash4) einfach erzeugen lassen und per Cut + Paste an die passende Stelle einfügen (oder z.B. in Dreamweaver wie eine Grafik einfügen).

Ich kann meinen Flashfilm aber auch fensterfüllend anzeigen lassen, d.h. ein Browserfenster vollkommen damit ausfüllen, oder auch nur einen Teil dessen indem ich ein Frameset erstelle und einen Frame mit meinem Flashchen fülle. Wer dies per Aftershock/Publish schon einmal gemacht hat wird feststellen, dass er einen cirka 5 Pixel breiten Rand rund um den Flashfilm erhalten wird, außerdem wird ein eigentlich überflüssiger Scrollbalken auftauchen.

Wie man nun rand- und scollbalkenlos glücklich wird, wie ich mein Flashchen in einem neuen Fenster öffne, in einem Teil des Bildschirms oder im Vollbild, hier kommt's!




Vorarbeiten

Nachdem der Flashfilm fertiggestellt ist, solltet Ihr diesen mittels Aftershock/Publish automatisch in eine HTML Datei einbinden lassen.
Anhand von Publish in Flash4 erläutere ich die einzelnen Schritte, bei Flash3 und Aftershock ist es aber äquivalent.

In den "Publish Settings" sollte folgendes eingestellt sein:

Registerkarte "Format": Flash und HTML. Wenn die Namen nicht modifiziert werden sollen an dieser Stelle den Namen der HTML-Datei merken! In diesem Beispiel flash.htm
     
Registerkarte "Flash": Braucht nicht modifiziert zu werden.
     
Registerkarte "HTML": Dimensions: Percent Width/Height jeweils 100
   
  Alle weiteren Einträge können beibehalten werden, ggf. kann man die Einstellungen unter Scale ändern. Dabei bedeutet...
  "Default (Show all)" Mein Flashfilm wird soweit groß oder klein skaliert wird bis das eine Dimension meines Filmes den Fensterrand erreicht, also z.B. die horizontale Ausrichtung maximal ist. In der anderen Richtung wird man über den Rand der Bühnengröße hinausblicken. Dies gilt es bei der Positionierung von Elementen außerhalb der Bühne zu beachten! Die Seitenverhältnisse bleiben erhalten.
  "No Border" Ähnlich wie "Default", allerdings können Teile des Films abgeschnitten werden. Die Seitenverhältnisse bleiben ebenfalls erhalten
  "Exact fit" Hierbei wird der Film in beide Richtungen maximal eingepasst, mit der Folge das der Film verzerrt werden könnten. Bereiche außerhalb der Bühne sind nicht sichtbar.
   
  Meiner Meinung nach fährt man mit der Default-Einstellung am besten.

Danach kann man mit "Publish" die swf- und html-Datei erzeugen lassen.


Außer Rand und Band: In einem Teil des Fensters

Wenn ich z.B. eine Navigation mit Flash erstellt habe die in einem Teil der Seite permanent zu sehen sein soll kann ich wie auch unter HTML mit einem Frameset arbeiten. Dabei ist es dann egal ob in den anderen Frames normale HTML Seiten stehen oder ebenfalls Flashfilme abgespielt werden sollen. Wichtig ist, dieses Frameset korrekt zu tunen.

<frameset cols="15%,*" frameborder="0" border=0 framespacing="0">
<frame name="flash" src="flash.htm" marginwidth="0" marginheight="0" scrolling="Auto" frameborder="0" noresize framespacing="0"> <frame name="inhalt" src="inhalt.htm" marginwidth="0" marginheight="0" scrolling="Auto" frameborder="0" noresize framespacing="0"> </frameset>

Hierbei ist die Datei "flash.htm" die von Flash4 erzeugte HTML Datei in der mein Flashfilm läuft, die Datei "inhalt.htm" kann eine normale HTML Seite sein oder auch einen Flashfilm beinhalten.
Verlinkungen aus dem Flashfilm in die Inhaltsseite kann ich per GetUrl einfügen und muss dabei lediglich als Target "inhalt" angeben.

Wichtig beim Anpassen auf die eigenen Bedürfnisse ist, das man bei den Frames die Flash enthalten unter scrolling unbedingt "No" einstellen sollte da ein Flashfilm nicht gescrollt werden braucht. Marginwidth und Marginheight sowie Frameborder schalten sowohl unter NN als auch IE die Ränder rund um den Flashfilm aus, Frameborder 0 fügt beide Frames direkt nebeneinander.




Außer Rand und Band: Fensterfüllend

Möchte ich nur einen Flashfilm im gesamten Fenster öffnen muß ich das obere Frameset nur geringfügig abändern.

<frameset cols="100%,*" frameborder="0" border=0 framespacing="0">
<frame name="haupt" src="flash.htm" marginwidth="0" marginheight="0" scrolling="Auto" frameborder="0" noresize framespacing="0"> <frame> </frameset>

So erreiche ich das meine Datei flash.htm über das gesamte Fenster angezeigt wird. Da der andere Frame eh nicht sichtbar ist brauche ich hier keinen Namen und auch keine Quelle angeben.

Doch was mache ich, wenn mein Flashfilm gar nicht auf die volle Fenstergröße skaliert werden soll? Dann gibt es wiederum zwei Möglichkeiten, die beide auf den schon erwähnten Methoden aufbauen, diese nicht ersetzen!



Alt oder neu: Im gleichen Fenster

Wenn ich kein neues Browserfenster öffnen will kann ich die oben genannten Framesets in ein weiteres Frameset "einbetten". Dabei übernimmt das drübergestülpte Framseset die Rolle eines Rahmens.

<frameset rows="*,560,*" frameborder="0" border=0 framespacing="0">
<frame> <frameset cols="*,760,*" frameborder="0" border=0 framespacing="0"> <frame> <frame name="inhaltt" src="frameset.htm" marginwidth="0" marginheight="0" scrolling="Auto" frameborder="0" noresize framespacing="0"> <frame> </frameset > <frame> </frameset>

Hierbei ist die Datei "frameset.htm" eines der beiden oben erwähnten Framesets, es funktioniert mit beiden. Im ersten Fall habe ich so eine Navigationsleiste und den Inhalt in der festen Größe, im zweiten Fall den Flashfilm komplett die Mitte des Fensters ausfüllend.

Zu beachten ist, das die äußeren Frames, der Rahmen, weiß sind. Habe ich einen Flashfilm mit einer anderen Hintergrundfarbe sollte ich hier anstelle von "<frame>" explizit Quelldateien angeben die einen passenden Hintergrund haben. Doch alle Einzelheiten die man mit Framsets hat hier aufzuzählen würden dan Rahmen dieses Tutorials sprengen und werden daher als bekannt vorausgesetzt.



Alt oder neu: In einem neuen Fenster

Diese Variante findet man sehr oft bei Flashseiten und ist mit einem kleinen JavaScript sehr einfach zu erledigen.

<script language="JavaScript">
<!--
function macheFenster()
{
var newWindow = window.open('flash.htm','flash','status=yes,menubar=yes,scrollbars=yes,width=760,height=560') }
// -->
</script>

Diese Funktion in die Seite einbauen, aus der man per Mausklick eine neues Fenster öffnen will. Dabei kann dieser Link - javascript:macheFenster() - auch in einem Flashfilm stehen und per GetUrl aufgerufen werden. Ebenfalls kann man z.B. die Größe oder die zu öffnende Url erst über den Funktionsaufruf per Variablen eingeben.

Und nun viel Spaß und Erfolg beim Ausprobieren!