OBS! SWFObject 2.0 har nu lanserats och jag hänvisar till SWFObject 2.0 och dess dokumentation för den senaste versionen och tillämpningen av skriptet.

Du läser den svenska översättningen av FlashObject: Javascript Flash detection and embed script.

FlashObject är ett litet JavaScript som används för att infoga Flash-innehåll. Detta skript kan detektera insticksprogrammet Flash på alla större webbläsare (på Mac och PC) och är utformat för att göra infogningen av Flash-innehåll så enkelt som möjligt.

Skriptet funkar också bra ihop med sökmotorer, äldre webbläsare och kan användas i giltig HTML och XHTML 1.0*. Det är också framåt-kompatibelt och bör alltså fungera i åratal framöver.

* Sidor som skickas som text/html, ej application/xhtml+xml.

Innehåll

Den senaste versionen

Den senaste versionen av FlashObject hittar du alltid hos deconcept.

Så här funkar det

[Tekniknördar kan kolla in det råa skriptet direkt]

Att använda FlashObject är enkelt. Inkludera flashobject.js och använd sedan en liten andel JavaScript på sidan för att infoga Flash-filmen. Här är ett exempel på den minsta möjliga koden du behöver för att infoga en Flash-film:

<script type="text/javascript" src="flashobject.js"></script>
		
<div id="flashcontent">
  This text is replaced by the Flash movie.
</div>

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.write("flashcontent");
</script>

Här beskrivs steg-för-steg vad koden gör:

<div id="flashcontent">[...]</div>

Förbered ett HTML-block som innehåller Flash-filmen. Innehåll som placeras i blocket kommer att ersättas av Flash-filmen, så att användare som har Flash installerat kommer aldrig se innehållet i detta block. Denna egenskap gör det också möjligt för sökmotorer att indexera det alternativa innehållet(!)

var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");

Skapa ett nytt FlashObject och skicka med de nödvändiga parametrarna:

  • swf – Sökvägen och namnet på din swf-fil.
  • id – ID-namnet på din object eller embed-tag. Embed-taggen kommer också ha värdet som sitt name-attribut för filer som använder swliveconnect.
  • width – Bredden på din Flash-film.
  • height – Höjden på din Flash-film.
  • version – Den version av Flash player som krävs för ditt Flash-innehåll. Detta kan vara en sträng enligt formatet ‘majorVersion.minorVersion.revision’. Ett exempel är: "6.0.65". Eller så kan du bara kräva en huvudversion, som "6".
  • background color – Hex-värdet för Flash-filmens bakgrundsfärg.

Valfria parametrar är:

  • useExpressInstall – Om du vill uppgradera användare med hjälp av egenskapen ExpressInstall, sätt detta värde till ‘true’.
  • quality – Kvaliteten som du vill att din Flash-film ska spela på. Om inget anges är ”high” förvalt.
  • xiRedirectUrl – Om du vill omdirigera användare som fullföljer ExpressInstall till en alternativ adress, så kan du ange en alternativ URL här.
  • redirectUrl – Om du vill omdirigera användare som inte har den korrekta versionen av Flash player, använd den här parametern.
  • detectKey – Det här är variabelnamnet i länken som FlashObject tittar efter om du vill kringgå detekteringen av Flash. Exempel: För att kringgå Flash-detekteringen och helt enkelt skriva Flash-filmen till sidan så kan du lägga till ?detectflash=false på adressen för sidan som innehåller Flash-filmen.
fo.write("flashcontent");

Tala om för FlashObject att skriva ut Flash-innehållet till sidan (om den korrekta versionen av insticksprogrammet är installerat på användarens system) genom att ersätta innehållet i det angivna HTML-blocket.

Detaljerna

FlashObject arbetar stillsamt i bakgrunden av ditt HTML-dokument. När du utvecklar webbsidor som använder FlashObject bör du skapa ditt alternativa (icke-Flash) innehåll först.

Få dina sidor att fungera utan Flash-innehåll och lägg in dem efteråt med små JavaScript-snuttar som ersätter ditt alternativa innehåll med Flash-filmerna. Detta säkerställer att det alternativa innehåll kommer att indexeras av sökmotorer, och att användare utan Flash fortfarande kommer se en fungerande HTML-sida.

Om du erbjuder instruktioner för att uppgradera eller inte är helt upp till dig själv. Om ditt alternativa innehåll räcker, kanske det inte alls finns anledning att tala om för användarna att de missar Flash-innehåll.

FlashObject fungerar i alla aktuella webbläsare inklusive, på PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla och Opera; På Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla och Opera 7.5+. Skriptet bör också fungera långt in i framtiden.

FlashObject detekterar Flash-versioner i dessa webbläsare från version 3 upp till den senaste versionen (och kommande versioner!) om webbläsaren använder Netscapes arkitektur för insticksprogram (detta inkluderar Firefox, Safari, Opera, Netscape, Mozilla, etc.) och version 4 till nuvarande version (teoretiskt upp till version 20) på Internet Explorer (insticksprogram baserade på ActiveX).

FlashObject kan även detektera mindre versioner och revisionsversioner, genom att ange värdet för den version du vill. Ett exempel som kräver Flash Player v.6.0 r65 (eller 6,0,65,0) skulle se ut så här:

var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "6.0.65", "#336699");

FlashObjects inbyggda detektering av insticksprogram kan kringgås. Om en ny webbläsare lanseras eller av någon anledning detekteringen misslyckas på en användares system, så kan du inkludera en länk som kringgår detekteringen av insticksprogrammet, och Flash-innehållet skrivs alltid till sidan (förutsatt att användaren har JavaScript aktiverat).

För att kringgå detekteringen, länka helt enkelt till sidan och lägg till en variabel i länkadressen med namnet ‘detectflash’ och sätt värdet till ‘false’. Här är ett exempel på hur det kan se ut:

<a href="mypage.html?detectflash=false">Kringgå kontrollen av Flash</a>

FlashObject exempel

[axbom: Jag har ett fungerande exempel på hur du kan infoga Flash och bibehålla hög tillgänglighet.]

Koden ovan är vad du behöver för att FlashObject ska göra sitt jobb, men hur använda du några av de andra parametrar som FlashObject erbjuder? FlashObject gör det enkelt att lägga till de parametrar du behöver. Nedan återges exempel för några metoder du kanske vill använda för att infoga ditt Flash-innehåll.

Ett enkelt exempel med några extra parametrar

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100%", "7", "#336699");
   fo.addParam("quality", "low");
   fo.addParam("wmode", "transparent");
   fo.addParam("salign", "t");
   fo.write("flashcontent");
</script>

Här är en komplett lista över de aktuella parametrarna och deras möjliga värden på macromedia.com.

Skicka med variabler i filmerna med ”Flashvars”-parametern:

Flashvars är det enklaste sättet att få data från HTML direkt in i Flash-filmen, men du kan bara skicka med datat när filmen först laddas. Normalt lägger du till en parameter som heter ”flashvars” och sedan skickar du med namn/värde-par så här variable1=value1&variable2=value2&variable3=value3 och så vidare. FlashObject gör detta lättare genom att låta dig lägga till så många variabler du vill på samma sätt som du lägger till övriga parametrar. Här är ett exempel hur man skickar med variabler med hjälp av Flashvars:

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.addVariable("variable1", "value1");
   fo.addVariable("variable2", "value2");
   fo.addVariable("variable3", "value3");
   fo.write("flashcontent");
</script>

När dett är gjort finns alla variabler du angivit åtkomliga i Flash-filmen. Du anropar dem som alla andra variabler på tidslinjen _root.

FlashObject har också en ytterligare egenskap som låter dig fånga variabler från en länkadress. Säg att du har en länk som ser ut så här: http://www.example.com/page.html?variable1=value1&variable2=value2. Med funktionen getQueryParamValue() kan du fånga dessa variabler från länken och skicka in dem i Flash-filmen. Här är ett exempel baserat på att länken ser ut som ovan:

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
   fo.addVariable("variable1", getQueryParamValue("variable1"));
   fo.addVariable("variable2", getQueryParamValue("variable2"));
   fo.write("flashcontent");
</script>

Funktionen getQueryParamValue() har också stöd för att läsa variabler från location.hash, som ibland använd vid djuplänkning in i Flash-applikationer. För ett exempel av djuplänkning i Flash-filmer kan du titta på den här demon av Slideshow Pro, som använder FlashObject.

Använda Express Install med FlashObject

FlashObject har fullt stöd för Macromedia Flash Player Express Install. I FlashObject-skriptet finns en Actionscript-fil som tillsammans med FlashObject påbörjar uppgraderingsprocessen i Flash-filmerna. Användarna behöver inte lämna sajten för att uppgradera sin spelare, och när uppgraderingen är klar, länkas de tillbaka till sidan där uppgraderingen startade.

För att använda ExpressInstall måste du först infoga expressinstall.as-filen i din fla och i början av filmen göra en check för att se om användaren måste uppgradera:

#include "expressinstall.as"

// initialize the ExpressInstall object
var ExpressInstall = new ExpressInstall();

// if the user needs to upgrade, show the 'start upgrade' button
if (ExpressInstall.needsUpdate) {

	// this is optional, you could also automatically start the 
	// upgrade by calling ExpressInstall.init() here instead of the following lines

	// attach the custom upgrade message and center it
	var upgradeMsg = attachMovie("upgradeMsg_src", "upgradeMsg", 1);
	upgradeMsg._x = Stage.width / 2;
	upgradeMsg._y = Stage.height / 2;

	// attach the button actions that will start the ExpresInstall updater
	upgradeMsg.upgradeBtn.onRelease = function() {
		// the ExpressInstall.init() method is what kicks off the actual update
		ExpressInstall.init();
	}
	// if expressinstall is invoked, stop the timeline.
	stop();
}

Det är viktigt att inte placera innehåll i den första rutan (eller där du vill ExpressInstall ska äga rum) som kräver Flash 7 eller senare.

För ett exempel av den här koden, öppna source/fo_tester.fla som följer med FlashObjects Zip-fil. Eller om du vill se ExpressInstall ”in action” kan du installera Flash Player 7 (eller 6.0.65) och besöka den här sidan.

Om din Flash-film ligger i ett popup-fönster, eller om du vill omdirigera användaren till en annan plats efter att de fullföljt uppgraderingen, kan du använda parametern xiRedirectUrl för att dirigera användaren till valfri sida i stället för sidan med Flash-filmen.

<script type="text/javascript">
   var fo = new FlashObject("movie.swf", "mymovie", "200", "100", "8", "#336699", true);
   fo.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site
   fo.write("flashcontent");
</script>

Ladda ner

FlashObject ges under MIT License. Det betyder (ungefär) att du kan använda det till vad du vill utan restriktioner.

Ladda hem FlashObject 1.3 – Zip-fil, innehåller flashobject.js och exemplena nedan:.

Eller om du vill klämma och känna på det direkt kan du titta på Geoff Stearns exempelsidor:

* Sidor skickas som text/html, inte application/xhtml+xml.

När du ändå håller på kanske du vill gå med i FlashObject diskussionslistan.

Listan är en diskussionslista för att ställa frågor om FlashObject eller efterfråga och diskutera nya egenskaper.

Varför det är bättre än allt annat

Genom åren har det förekommit många metoder för att detektera Flash-versioner och infoga Flash-filmer i HTML-dokument. Det här avsnittet tar en titt på de populäraste metoderna och pekar ut bristerna.

1) Macromedias förvalda embed-metod

Alla känner till ”standard”-varianten.
Det handlar om en Object-tag med en Embed-tag inuti som en livlina. Det här är den populäraste tekniken för att infoga Flash och är den förvalda metoden när du publicerar Flash-filmen från Macromedia Flash IDE. Det är det mest kompatibla sättet att infoga Flash-filmen och fungerar i flest antal webbläsare. Här är ett exempel:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
   codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" 
   width="550" height="400" id="Untitled-1" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="mymovie.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="mymovie.swf" quality="high" bgcolor="#ffffff" width="550" 
   height="400" name="mymovie" align="middle" allowScriptAccess="sameDomain" 
   type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>

Trots att det är den vanligaste metoden har den ett par brister:

  • Ingen detektering av insticksprogram – Utan detektering av Flash kan användare se trasigt eller inget innehåll, och om användaren inte alls har Flash kommer de antingen se ”ActiveX install”-rutan (på IE) eller den mystiska pussel-rutan i Mozilla-baserade webbläsare. Ingen av dessa är särskilt användarvänlig och förklarar inte sig själva avseende vad man ombeds installera.
  • Det är inte giltig HTML eller XHTML – Det finns inget som heter <embed> i någon version av HTML eller XHTML. Dock, eftersom webbläsare hanterar Object-taggen olika (eller inte alls) behövdes <embed>-taggen som en livlina.

2) Endast Object-tag / Flash satay

Den här metoden blev populär efter en artikel i A List Apart år 2002.

Här är två exempel:

‘Object tag only’

<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="300" height="120">
 <param name="movie" value="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"> 
 <param name="quality" value="high">

 <param name="bgcolor" value="#FFFFFF">
 <!--[if !IE]> <-->
 <object data="http://www.macromedia.com/shockwave/download/triggerpages_mmcom/flash.swf"
		 width="300" height="120" type="application/x-shockwave-flash">
  <param name="quality" value="high">
  <param name="bgcolor" value="#FFFFFF">

  <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer">
  FAIL (the browser should render some flash content, not this).
 </object>
 <!--> <![endif]-->
</object>

Flash satay

<object type="application/x-shockwave-flash
data="c.swf?path=movie.swf" 
width="400" height="300">
<param name="movie" 
value="c.swf?path=movie.swf" />
<img src="noflash.gif" 
width="200" height="100" alt="" />
</object>
  • Brister i tillgänglighet – Med Flash Satay, kommer en del skärmläsare (som JAWS) ignorera ditt Flash-innehåll.
  • Ingen kontroll av Flash.
    – Som ovan – Utan detektering av Flash kommer vissa användare se trasigt eller inget innehåll. När Flash-spelaren stöter på en Flash-film kommer den att försöka speka den, oavsett version. Så om du har version 6 och stöter på en version 7-film, kommer din spelare försöka spela den, och eventuellt orsaka konstigt beteende.
  • Några Flash satay-metoder streamar inte filmen till spelaren
    – Denna metod kräver ibland en film som agerar ramverk som din film laddas i. Detta gör det krångligt att skicka med variabler och gör det besvärligt att underhålla Flash-innehåll eftersom antalet Flash-filmer dubbleras.
  • Äldre Safari-versioner ignorerar param taggar – Upp till version 2.0 (på Tiger) eller 1.3 (på Panther) och möjligen 1.2.8 (före Panther) ignorerade Safari helt param-taggen. Det betydde att om du försökte göra andra val med den taggen, som Flashvars eller Align, Salign, etcetas. så ser inte Safari dessa värden.

3)Detektering av Flash: Den ‘lilla Flash-filmen på index-sidan’ metoden

Den här metoden handlar om att placera en enkel Flash-film på index-sidan på din webbplats och denna Flash-film stämmer av $version-variabeln i Flash-spelaren och omdirigerar användaren antingen till Flash-innehållet eller till en sida för uppgradering.

Problem med metoden:

  • Ingen detektering på interna sidor. – Om en användare kommer till sajten via en länk till en annan sida i sajten så kringgår den användaren detekteringen på förstasidan..
  • Ej giltig HTML eller XHTML – Återigen, embed-taggen som krävs för att infoga filmerna kommer inte att valideras som giltig.
  • Skadar din plats i sökmotorerna – Du använder din startsida som en tom sida för att kontrollera Flash, vilket innebär att människor som söker efter dig i bland annat Google kommer se beskrivningen ”Detecting Flash Player” eller ingen beskrivning alls. Detta är ett otroligt slöseri med utrymme som bör användas för att marknadsföra företaget eller tjänster. Ofta inkluderar inte utvecklarna länkar till annat innehåll på sajten (eftersom Flash-filmen innehåller länken) så resten av sajten indexeras inte heller(!)

4) Macromedia Flash Player Detection Kit

Macromedia har gjort ett jättebra jobb med nya Flash 8 Detection Kit – men inte tillräckligt bra. Det innehåller två sätta att detektera insticksprogrammet:

  1. Klassiska ”liten Flash-film på index-sidan” – (se ovan)
  2. JavaScript
    – Japp, det är korrekt, Flash inkluderar nu JavaScript för att detektera Flash. Tyvärr är det inte användarvänligt alls: det blandar JavaScript, VBSscript och all HTML på en sida. Det har kvar massor av de nackdelar som tidigare metoder och gör inte ditt liv som Flash/HTML-utvecklare särskilt mycket enklare. Och det validerar inte som giltig XHTML och HTML (Om du bryr dig om den sortens saker).

Du kan läsa en djupare analys av Macromedia Detection Kit hos deconcept.

5) Använd rå JavaScript för att detektera och infoga filmer

Det är svårt att bedöma den här metoden eftersom den varierar från sajt till sajt. Men de kontroller av Flash med hjälp av JavaScript som jag stött på har ofta likartade brister:

  • Otillförlitlig detektering av insticksprogrammet
    – Ofta funkar bara detekteringen med aktuella versioner av Flash-spelaren och behöver manuellt uppdateras när nya versioner av spelaren släpps.
  • Lägger till mer kod på sidan
    – Gör det svårare att uppdatera eller ändra innehåll på sidan. Metoden gör det också svårare för designers och andra som arbetar med sidorna att ändra eller lägga till Flash-filmer.
  • Överarbetade, komplicerade lösningar
    – Många skript växer till enorma filstorlekar eller blir onödigt krångliga. FlashObject är medvetet skapat för att vara enkelt och litet.

FAQ

Fråga. Varför flimrar mitt alternativa innehåll innan Flash-innehållet laddas? (händer bara i IE på Windows)
Svar. Detta verkar vara relaterat till FOUC-buggen. Det kan åtgärdas genom att lägga till en link-tag i huvudet (head) på dokumentet i valfri stilmall.
Fråga. Hur kan jag få FlashObject att funka i Netscape 4.x?
Svar. Den här kommentaren har exempel på kod som hjälper dig.
Fråga. Kan jag använda FlashObject i min blogg?
Svar. Ja, det finns några insticksprogram för WordPress och Textpattern här.
Fråga. Kan jag använda FlashObject med Dreamweaver eller Golive?
Svar. Det finns ett tillägg till Dreamweaver åtkomligt på CommunityMX.
Det finns inget tillägg till Golive som jag känner till. Du bör kunna använda FlashObject utan tillägg men det blir förstås enklare med ett programspecifikt tillägg.
Fråga. Finns den här sidan på andra språk?
Svar. Här är en fransk översättning av delar av den här sidan, en italiensk översättning och en finsk översättning. Du läser just nu den svenska översättningen. Originalet på engelska hittar du här.
Fråga. Vem använder FlashObject?
Svar. Webbplatser som windows.com, snapple.com, det inkluderas med Adobe Photoshop (i Flash web photo galleries) och tusentals andra. Colin Moock föreslår det som alternativ till Macromedia Detection Kit.

Har du fortfarande problem? Försök med att läsa tidigare inlägg om FlashObject [1, 2, 3] på deconcept (speciellt kommentarerna), eftersom många frågor hanteras där.

Tack

Geoff Stearns tackar Toby Boudreaux som gav tonvis med råd och hjälpte honom göra koden för FlashObject mycket renare.