Du bist nicht angemeldet.

[ HTML/FLASH ] Einbindung mit Fallback

memowe

Erleuchteter

  • »memowe« ist der Autor dieses Themas

Beiträge: 3 324

Vorname: Mirko

  • Private Nachricht senden

1

Montag, 28. Juli 2003, 10:52

Einbindung mit Fallback

Guten Morgen.

Aus gegebenem Anlass ist dieses Thema recht interessant. Es ging dabei konkret um eine Anfrage von Daxxtreme/Davision im Thread Flash Menü, ob und wie man denn eine Flash-Navigation sinnvoll auf einer Webseite einbinden könne. Dass Flash den entscheidenden Nachteil der Nichtzugänglichkeit für einige User insbesondere Suchmaschinen mitbringt, braucht hier nicht erneut erwähnt zu werden. Ein konstruktives Beispiel meinereiner, wie man das Problem lösen könne, scheiterte leider am Nichtfunktionieren trotz Standardkonformität im IE und an anderen Emotionalitäten, die hier nicht Thema sein sollen, letzendlich aber dazu geführt haben, dass ich diesen Beitrag zur Beitragsreihe schreibe und nicht in den alten Thread, der geschlossen ist.

Es geht also darum, solche Navigationen trotzdem nicht zur Barriere für den Inhalt der Seite werden zu lassen:

Standardkonforme Einbindung von Flash mit Fallback

Gefragt ist neben der obligatorischen Standardkonformität natürlich die optimale Zugänglichkeit für alle Benutzeragenten, auch diese, die kein Flash anbieten. Ein Fallback-Feature bietet das OBJECT-Element. Bei Nichtexistenz eines entsprechenden nötigen Plugins degeneriert es zum non-replaced-Element und zeigt ganz einfach seinen Inhalt an. Dadurch kann man dann etwa bei einer Navigation eine entsprechende HTML-Liste mit gleicher Funktionalität in das OBJECT-Element integrieren. Ist beim Benutzer das Plugin dann nicht vorhanden, wird einfach die Liste dargestellt.

Die von mir beschriebene Lösung, die das leistet, ist valides HTML 4.01 Strict und funktioniert in allen getesteten Browsern Mozilla, Opera 7, IE und Konqueror. Der IE (den ich selbst nicht testen kann) kommt angeblich sogar mit dem Fallback gut zurecht. Alles, was wir für ihn tun müssen, ist ein kleiner Workaround, den ich im Folgenden darstelle:

Zunächst das OBJECT-Element, das in ein Block-Element (in diesem Fall DIV) integriert sein muss, da es nicht allein im BODY stehen darf:

Quellcode

 
1
2
3
4
5

<div> <object	data="http://www.memowe.de/idiot/"
		type="application/x-shockwave-flash"
		width="300"
		height="300">
</object></div>
Im data-Attribut steht der URL der Animation (normalerweise irgendwas mit .swf am Ende), das type-Attribut gibt den Inhaltstyp an und die beiden letzten Attribute erklären sich von selbst.

Damit der IE damit zurecht kommt, muss der URL des Flash-Films zusätzlich in einem PARAM-Element angegeben werden:

Quellcode

 
1
2
3
4
5
6

<div> <object	data="http://www.memowe.de/idiot/"
		type="application/x-shockwave-flash"
		width="300"
		height="300">
	<param name="movie" value="http://www.memowe.de/idiot/" />
</object></div>
Innerhalb des OBJECT-Elements haben wir nun die Möglichkeit, einen alternativen Inhalt für die Flash-Animation anzugeben, was wir tunlichst machen sollten, um auch die Zugänglichkeit der Informationen zu gewährleisten. Es ist dies ganz normales HTML und sollte die Informationen des Flash-Films genau und vollständig wiedergeben. In meinem Beispiel nehme ich dafür eine einfache Liste:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<div> <object	data="http://www.memowe.de/idiot/"
		type="application/x-shockwave-flash"
		width="300"
		height="300">
	<param name="movie" value="http://www.memowe.de/idiot/" />
	<p>Alternative Navigation:</p>
	<ul>
		<li><a href="/">Startseite</a>
			<ul>
			<li><a href="/sitemap/">Sitemap</a></li>
			</ul>
		</li>
		<li><a href="/webauthoring/">Webauthoring</a></li>
		<li><a href="/privat/">Privat</a></li>
		<li><a href="/impressum/">Impressum/Kontakt</a></li>
	</ul>
</object></div>


Eine Testseite: www.memowe.de/ot/flash.html

Die Überprüfung des Fallbacks habe ich selbst durchgeführt. Auch Textbrowser kommen an die Text-Navigation:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

> lynx --dump http://www.memowe.de/ot/flash.html

                        Flesch mit alternativem Inhalt

   Hier sehen Sie, einen standardkonformen Browser vorausgesetzt, einen
   Flash-Film wenn das Plug-In bei Ihnen installiert ist, oder alternativ
   eine kleine Text-Navigation in einer Liste wenn das Plug-In nicht
   installiert ist:

   Alternative Navigation:
     * [1]Startseite
          + [2]Sitemap
     * [3]Webauthoring
     * [4]Privat
     * [5]Impressum/Kontakt

Verweise

   1. http://www.memowe.de/
   2. http://www.memowe.de/sitemap/
   3. http://www.memowe.de/webauthoring/
   4. http://www.memowe.de/privat/
   5. http://www.memowe.de/impressum/


Wir haben damit also eine mächtige Möglichkeit, Flash valide einzubinden und alternativen Inhalt bereitzustellen, ohne umständliche Brauserweichen verwenden zu müssen. Tut es!

Gruß
Mirko "memowe" Westermeier :)
Signatur von »memowe« Mirko Westermeier - Public key: 0x730E195D
Key fingerprint = 55A8 9646 9B58 60AC B5BC 9661 FDD4 93C0 730E 195D

LapisInfernalis

Super Moderator

Beiträge: 2 817

  • Private Nachricht senden

2

Montag, 18. Oktober 2004, 10:48

[q=memowe]Wir haben damit also eine mächtige Möglichkeit, Flash valide einzubinden und alternativen Inhalt bereitzustellen, ohne umständliche Brauserweichen verwenden zu müssen. Tut es![/q]
Jepp, das stimmt und habe ich auch. Mehrfach...

Aber leider hat sich herausgestellt (siehe http://www.webstyleboard.de/t4185), dass diese Art der Einbindung in der Praxis nahezu unbrauchbar ist.

Der Hintergrund: Bei vielen (eigentlich den meisten) Flash-Dateien kommen sog. Preloader zur Verwendung. Diese dienen dazu, größere Dateien vorzuladen und dem User Informationen über den Verlauf des Ladevorganges zu geben. Diese Preloader sind von unverzichtbarem Wert, da ohne sie unter Umständen lange Wartepausen enstehen, in denen nichts passiert.

Lange Rede, kurzer Sinn: Bei der Verwendung der oben beschriebenen Einbindung unterschlägt der Internet Explorer (ha, wer hätte das gedacht...?) den Preloader. Der Film wird erst komplett geladen und dann angezeigt. Da der IE aber der am weitesten verbreitete Browser ist, muss leider von der oben genannten Einbindung abgeraten werden.

Der Grund für das unsinngie Verhalten ist die Quellangabe im <object>-Tag:

Quellcode

 
1

data="pfad/datei.swf"


Ohne diese Angabe wird der Film mit Preloader geladen, da die Quelle ja im <param>-Element angegeben wird.

Aber leider versagen an dieser Stelle alle anderen Browser, welche auf die Quellangabe im <object>-Tag angewiesen sind. Die einzige Möglichkeit besteht leider darin, einen alten Netscape-Tag wieder aufleben zu lassen, und zwar der <embed>-Tag:

Quellcode

 
1
2
3
4
5
6
7
8
9
10
11

<object 
    data="rec/flash/intro.swf"
    type="application/x-shockwave-flash"
    classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   width="750" 
   height="400" 
   id="intro">
 <param name="movie" value="rec/flash/intro.swf" />
 <embed src="rec/flash/intro.swf" width="750" height="400">
</embed>
</object>


Wie man sieht, wurde zusätzlich im <object>-Element die classid für Flash angegeben.

Bedingt durch den <embed>-Tag ist es aber leider hin mit der HTML-Validität, unabhängig vom verwendeten Doctype.

Mit dem Fallback ist das auch so eine Sache... Verwendet man alternativen Inhalt innerhalb des <object>-Elements, so zeigt ausgerechnet der IE ihn brav nur an, wenn Flash nicht angezeigt werden kann, ganz wie das ganze gedacht ist. Alle anderen Browser zeigen den alternativen Inhalt immer an.

Fazit: Für kleinere Flash-Dateien eignet sich die obige Einbindung. Vor allem sollte sie verwendet werden, wenn es um wichtige Inhalte geht wie Navigationen, damit die Benutzbarkeit der Seite durch den Fallback gegeben ist.

Allerdings darf die Datenmenge der Flash-Datei nicht sehr groß sein, da sonst die oben beschriebenen Ladepausen entstehen. Für die meisten Flash-Dateien, welche einen Preloader benötigen, bleibt nichts anderes, als die hier beschriebene, nicht valide Variante zu wählen.

Auch hier ist es wichtig, alternative Inhalt bereitzustellen, leider ist dies aber etwas aufwändiger, als den entsprechenden Inhalt direkt mit einzubinden.

Wenn jemand einen Weg aus diesem Dilemma kennt, oder ich etwas neues erfahren sollte, gibt es mehr Infos an dieser Stelle. ;)

LapisInfernalis
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

t-ob-i

Profi

Beiträge: 1 221

  • Private Nachricht senden

3

Montag, 18. Oktober 2004, 11:10

Du sagst er läd den Film erst komplett..

Was passiert denn wenn ich zuert einen Kurzfilm habe und dann mittels nachladen der SWF-Dateien diesen erweitere. Dann könnte ich doch zumindest den Fortschritt des ladens der einzelnen SWF-Dateien anzeigen oder nicht?

Tobias
Signatur von »t-ob-i« {SIGNATUR}

LapisInfernalis

Super Moderator

Beiträge: 2 817

  • Private Nachricht senden

4

Montag, 18. Oktober 2004, 11:57

[q=t-ob-i]Was passiert denn wenn ich zuert einen Kurzfilm habe und dann mittels nachladen der SWF-Dateien diesen erweitere.[/q]

Also ehrlich gesagt ist diese Idee schlichtweg genial! Hätte glatt von mir sein können... ;)

Vielen Dank für diesen Gedankenanstoß. Ich habe das ganze direkt einmal ausprobiert. Es funktioniert!

Siehe: Test-Einbindung mit Preloader-Workaround

Auf diese Weise kann mem's Einbindung verwendet werden, der alternative Inhalt wird problemlos untergebracht und der Preloader funktioniert in jedem Browser. Das beste ist: Das ganze ist valide und alle können wieder gut schlafen... ;)

Allerdings ist das ganze auch "nur" ein Workaround, denn man muss in der Flash Datei höllisch aufpassen. Daher:

Workaround für die Preloader-Funktionalität im IE bei der Verwendung der memowe'schen Flash-Einbindung!


1. Man erstellt eine Flash-Datei, welche als Basis für die eigentlichen Flash-Inhalte dient. diese muss die gleiche Größe und Abspielgeschwindigkeit haben, wie der Flash-Inhalt.

2. In dieser Datei erstellt man zwei Ebenen, wobei jede Ebene nur ein einziges Schlüsselbild enthält. Eine Ebene nennt man z.B. "Script" und eine "externen Daten" o.ä.

3. In der Ebene "externe Daten" erstellt man einen neuen, leeren MovieClip und plaziert diesen in der linken, oberen Ecke (wichtig!) der Bühne.

4. Nun gibt man diesem MC einen Instanznamen, z.B. "extern" o.ä.

5. In das Schlüsselbild der ersten Ebene schreibt man:

Quellcode

 
1
2

stop();
loadMovie("pfad/dateiname.swf", "extern");


Dies bewirkt, dass die Datei "dateiname.swf", welche die eigentlichen Inhalte samt Preloader enthält in den MC "extern" geladen wird.


Auf diese Weise wird zunächst die erste Datei geladen, welche ja aber bis auf zwei Bilder und ein wenig ActionScript keinen Inhalt hat. Daher ist die Ladezeit marginal und das weiter oben beschriebene Preloader-Problem kann vernachlässigt werden.

Aufpassen muss man nur bei der internen Filmsteuerung. Möchte man innerhalb der Datei auf ander MCs refernzieren, z.B. für Animationen ansprechen bzw. steuern, muss die Art der Einbindung berücksichtigt werden.

Würde man z.B. für eine Hover-Animation folgenden Code verwenden:

Quellcode

 
1
2
3
4
5
6

on(rollOver) {
     _root.mein_mc.gotoAndPlay("Start");
}
on(rollOut) {
     _root.mein_mc.gotoAndPlay("Ende");
}


müsste das dann lauten:

Quellcode

 
1
2
3
4
5
6

on(rollOver) {
     _root.extern.mein_mc.gotoAndPlay("Start");
}
on(rollOut) {
     _root.extern.mein_mc.gotoAndPlay("Ende");
}


da sonst die Steuerung nicht mehr funktioniert!

Neben dieser "Umständlichkeit" ist der größte Nachteil, dass die Animationen in der Flash-Vorschau nicht mehr funktionieren, sondern nur dann, wenn die HTML-Datei mit dem "Basis-Film" geladen wird...
Signatur von »LapisInfernalis« Eine Milde Gabe...

Der Horizont vieler Menschen ist ein Kreis mit dem Radius Null - und das nennen sie ihren Standpunkt.
Albert Einstein (1879-1955)

A common mistake people make when trying to design something completely foolproof is to underestimate the ingenuity of complete fools.
Douglas Adams (1952-2001)

Lesezeichen: