SWFObject er en liten Javascript fil brukt til innleggelse av Adobe Flash innhold. Skriptet sørger for at Flash pluginen er oppdaget I alle aktuelle nettleserer (på Mac og PC) og er laget for å gjøre bruk av Flash så lett som mulig. Skriptet fungerer også bra med søkemotorer, degraderer grasiøst, kan bli brukt I gyldig HTML og XHTML 1.0 dokumenter* og er frammover-kompatibel, slik at den burde fungere langt inn I fremtiden.
*Sider sent som text/html, ikke application/xhtml+xml.
Vennligst bemerk: SWFObject er SWF integrering skriptet kjent tidligere som FlashObject. Navnet måtte skiftes på lovmessige/varemerke grunner. For mer informasjon, les dette.
For en full liste av forandringer, vennligst les SWFObject 1.5 blog post.
[übernerder kan lese rene Javascripten her.]
Det er lett å bruke SWFObject. Bare inkluder Javascript filen swfobject.js og bruk litt Javascript på siden din for å integrere Flash filmen. Her er et eksempel som demonstrerer bruk av SWFObject med kun koden som trengs og minst mulig valgmuligheter:
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashinnhold">
Teksten her blir ombyttet med Flash filmen.
</div>
<script type="text/javascript">
var so = new SWFObject("film.swf", "minfilm", "400", "200", "8", "#336699");
so.write("flashinnhold");
</script>Skritt for skritt forklaring av hva koden gjør:
<div id="flashinnhold">[...]</div>Forbereder ett HTML element som innholder Flash filmen. Teksten I "flashinnhold" området blir erstattet med Flash filmen, slik at brukere med Flash pluginen installert aldri ser innholdet I dette området, kun dem uten Flash installert. I tillegg gjør dette området det mulig for søkemotorer å lese det alternative innholdet.
var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);
Forbered en ny SWFObject og send med nødvendige valgmuligheter:
Valgmuligheter:
so.write("flashinnhold");
Forteller SWFObject skriptet til å legge inn Flash innholdet på siden (om den rette versjonen av Flash pluginen er installert på brukeren sitt system) med å erstatte innholdet I det spesifiserte HTML elementet med Flash filmen.
SWFObject fungerer stilt og rolig I bakgrunnen av HTML dokumentet ditt. Når man lager sider som tar bruk av SWFObject burde man starte med å lage innholdet som sees av dem uten Flash. Få sidene dine till å fungere uten Flash filmene først, deretter kan Flash filmene erstatte det alternative innholdet med bruk av Javascript. Dette forsikrer at søkemotorer kan lese det alternative innholdet, og at brukere uten Flash pluginen ikke ser en HTML side som mangler deler. Om du vil inkludere oppdatering eller installasjons instruksjoner til brukere uten Flash pluginen er opp til deg. Dersom det alternative innholdet er tilstrekkelig er det kanskje ikke nødvendig å fortelle brukeren at noe må installeres eller oppdateres for å se siden din.
SWFObject fungerer I alle aktuelle nettleserer, inkludert, på PC: IE5/5.5/6, Netscape 7/8, Firefox, Mozilla, og Opera. På Mac: IE5.2, Safari, Firefox, Netscape 6/7, Mozilla, og Opera 7.5+. Skriptet hører også til å fungere langt inn i fremtiden.
SWFObject oppdager Flash versjonen i disse nettleserne fra og med versjon 3, og tillater vekselvirkning med Flash innhold uten å “aktivere” først. For mer informasjon om dette, les denne blog-posten om Internet Explorer Eolas patent omstriden.
SWFObject kan også oppdage mindre og revisionsversjoner av Flash spilleren, bare med å fortelle skriptet hvilken versjon man vil forlange. For eksempel, å påkreve Flash versjon v.6.0 r65 (eller 6,0,65,0) blir:
var so = new SWFObject("film.swf", "minfilm", "200", "100", "6.0.65", "#336699");
SWFObject sin innebygget plugin-oppdagelse kan også unngås. Dersom en ny nettleser åpnes eller plugin oppdagelsen ikke fungerer av en eller annen grunn så kan man inkludere en lenke som unngår oppdagelse av Flash, og sørger for at Flash filmen alltid blir skrevet til siden. For å bruke slik en lenke inkluderer man bare en enkel URL variabel som heter ‘detectflash’ og setter den som ‘false’. Her er et eksempel av hva en slik lenke kan se ut som:
<a href="minside.html?detectflash=false">unngå Flash Oppdagelse</a>
Eksempelet ovenfor er det minste man trenger for å bruke SWFObject, men hva om man har lyst till å utnytte flere parametre som Flash pluginen har å tilby? SWFObject gjør det svært enkelt å tilføre enhver ekstra parameter som man kan trenge. Eksemplene nedenfor viser forskjellige måter man kan legge inn Flash innhold på.
<script type="text/javascript">
var so = new SWFObject("film.swf", "minfilm", "400", "100%", "8", "#336699");
so.addParam("quality", "low");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashinnhold");
</script>Her finnes en full liste av mulige parameter og deres mulige verdiger på adobe.com.
Flashvars er den enkleste måten å få data fra HTML inn I Flash filmene dine, men man kan bare sende dataen til filmen når den først lastes. Vanligvis tilføyer man en parameter som kalles "flashvars" og for verdien sender man navn/verdi par slik:
variabel1=verdi1&variabel2=verdi2&variabel3=verdi3
SWFObject gjør dette en del enklere ved å tillate så mange variabler eller navn/Verdi par som man trenger på den samme måten som andre parametere sendes. Her er et eksempel som bruker Flashvars til å sende verdier til en Flash film:
<script type="text/javascript">
var so = new SWFObject("film.swf", "minfilm", "400", "200", "8", "#336699");
so.addVariable("variable1", "verdi1");
so.addVariable("variable2", "verdi2");
so.addVariable("variable3", "verdi3");
so.write("flashcontent");
</script>På denne måten blir alle variablene som sendes øyeblikkelig tilgjengelige inne I Flash filmen, bare bruk dem slik som enhver variable på _root tidelinjen.
SWFObject skriptet kommer også med en ekstra funksjon som tillater at man bruker variabler fra URLen. Et eksempel er om man har en URL som ser slik ut:
http://www.eksempel.com/side.html?variable1=verdi1&variable2=verdi2
Ved bruk av funksjonen getQueryParamValue() kan man lett bruke verdiene fra URLen og sende dem til Flash filmen. Her er et eksempel som antar at URLen ser ut som den ovenfor:
<script type="text/javascript">
var so = new SWFObject("film.swf", "minfilm", "400", "200", "8", "#336699");
so.addVariable("variable1", getQueryParamValue("variable1"));
so.addVariable("variable2", getQueryParamValue("variable2"));
so.write("flashcontent");
</script>Funksjonen getQueryParamValue() støtter også variabler fra location.hash, ofte brukt når man lenker dypt inn I Flash applikasjoner. For et eksempel av hvordan man lenker dypt inn I Flash filmer ved bruk av location.hash, ta en titt på denne demonstrasjonen av Slideshow Pro, som bruker SWFObject.
SWFObject har full støtte for Adobe Flash Player Express Install. Brukerne dine trenger aldri å forlate siden din for å oppgradere Flash spilleren deres.
For å bruke ExpressInstall må man først opplaste expressinstall.swf filen til webserveren din. Deretter bruker man useExpressInstall variabelen for å spesifisere hvor expressinstall.swf filen ligger. Om ingen Verdi er spesifisert så leter SWFObject I samme mappen som HTML filen finnes i.
<script type="text/javascript">
var so = new SWFObject("film.swf", "minfilm", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent");
</script>Dersom du ønsker å så in installasjon som utnytter ExpressInstall kan du installere versjon 7 (eller 6.0.65) av Flash spilleren og besøke denne siden.
FLA filen til expressinstall.swf er inkludert med SWFObject dersom man ønsker å tilpassere ExpressInstall til sine behov.
I tilfelle Flash filmen skal åpnes I et popup vindu, eller man ønsker å omdirigere brukere etter ExpressInstall oppdateringer så kan man utnytte xiRedirectUrl parameteren for a omdirigere brukere tilbake til siden med lenke til Flash filmen, istedenfor siden som spiller filmen.
<script type="text/javascript">
var so = new SWFObject("film.swf", "minfilm", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
// må være hele URLen til siden
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html');
so.write("flashcontent");
</script>SWFObject er utgitt under MIT Lisens. Dette betyr (for det meste) at du kan bruke skriptet for hva som helst, uten begrensninger.
Last ned SWFObject 1.5 - Zip fil, inkluderer swfobject.js og HTML eksemplene listet nedenfor.
Eller, om du vil se og få en følelse for fungerende eksempler, kan du ta en titt på de følgene eksempler:
*Sider sent som text/html, ikke application/xhtml+xml.
Trenger du hjelp med SWFObject? Prøv å spør etter hjelp på SWFObject forumet!
I det siste har det har vært mange måter å oppdage Flash versjoner og innlegge Flash filmer I HTML dokumenter. Denne seksjonen tar en titt på enhver av de mest brukte og populære metodene og forklarer problemene med dem.
Alle kjenner till den vanlige måten å innlegge Flash som Adobe tilfører. Den består av en <object> med en <embed> inni for nettleserer å falle tilbake på. Dette er den vanligste måten å innlegge Flash, og er vanligvis metoden brukt for Flash filmer som er utgitt fra Adobe Flash IDE. Denne metoden er mest kompatibel og fungerer I flest antall nettleserer. Her er et eksempel av koden til vanlig Flash innleggelse:
<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="film" value="minfilm.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<embed src="minfilm.swf" quality="high" bgcolor="#ffffff" width="550"
height="400" name="minfilm" align="middle" allowScriptAccess="sameDomain"
type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" />
</object>Selv om dette er den vanligste metoden for innleggelse av Flash filmer så har den en del ulemper:
Denne metoden ble populær etter en artikkel i A List Apart ble utgitt i 2002. Her er to eksempler av innleggelse med kun object-tag og "Flash satay":
<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.adobe.com/go/getflashplayer">
FAIL (nettleseren hørrer til å vise Flash innhold, ikke dette).
</object>
<!--> <![endif]-->
</object><object type="application/x-shockwave-flash
data="c.swf?path=film.swf"
width="400" height="300">
<param name="movie"
value="c.swf?path=film.swf" />
<img src="noflash.gif"
width="200" height="100" alt="" />
</object>Denne metoden involverer en eneste Flash film som blir innlagt på index siden av web siden din (hjemmesiden) som sjekker $version variabelen i Flash spilleren til brukeren og omdirigerer dem enten videre inn i web siden, eller til en plass der brukeren kan oppgradere Flash spilleren sin.
Problemene med denne metoden inkluderer:
Adobe har gjort en utmerket oppgave med sin nye Flash 8 Detection Kit – men dessverre ikke utmerket nok. Den innholder to forskjellige måter å oppdage Flash pluginen:
Du kan lese mer om dette på deconcept.
Det er vanskelig å kritisere denne metoden siden den har tendens til å variere fra web side til web side, men de fleste Flash oppdagelse skriptene som jeg har funnet har ofte liknende feil:
SWFObject har fått seg forum, for dem som vil ha hjelp med a implementere skriptet. Om du har spørsmål gjeldene funksjoner eller bruk av SWFObject vær snill å bruk forumet - det er mange dyktige som kan hjelpe deg der.
Har du enda problem? Prøv å lese igjennom forrige SWFObject forum poster [1, 2, 3] på deconcept (spesielt kommentarene), der man kan finne svar på mange forskjellige spørsmål.
Toby Boudreaux gav tonnevis med gode råd, hjalp med å lage koden til SWFObject mye renere og utførte 'name spacing' med det samme.