Hvordan embedde et flashbanner på en nettside?

Les også:
Hva er clickTAG?
Hvordan legge til clickTAG i et flashbanner?
Klikkbar flash uten clickTAG med clicklayer

Når man plasserer et bilde på en nettside er det ganske enkelt:

<img src="bilde.jpg" />

Man skulle kanskje tro at man kunne gjøre det samme med et flashbanner:

<img src="flash.swf" />

Og selv om det er feil vil det i enkelte tilfeller dessverre kunne fungere.

Plassering = Embedding

Plassering av et flashbanner i HTML kalles ofte for «embedding». Slike embed-koder gir mange muligheter, og det er neppe mange som går rundt og husker på en slik komplett kode.

Nedenfor er det enkleste eksempelet for embedding:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash/cabs/swflash.cab#version=6,0,0,0" width="180" height="150" >
	<param name="movie" value="http://hardcode.no/img/banner_180x150.swf">
	<embed src="http://hardcode.no/img/banner_180x150.swf" width="180" height="150" type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>

Som du kan se oppgis dataene stort sett to ganger i scriptet overfor.
Grunnen til dette er at Internet Explorer bruker <object> og <param>, mens andre nettlesere bruker <embed>.
Så hvis en flash vises riktig i én nettleser, men absolutt ikke gir noen mening i en annen, kan dette være årsaken.
Leker du deg med nye embedscript sørg derfor for å teste i flere nettlesere.

Noe av eksempelet overfor er selvforklarende, men her er noen punkter det er viktig å ta i betraktning:

Verdien for «classid» må være korrekt. Selv forskjell i store og små bokstaver her kan skape trøbbel. Dette er en unik ID som angir at dette er snakk om et flashobjekt. Har man noe feil her kan det blant annet poppe opp feilmeldinger og varsel om oppdateringer og tilleggsinstalleringer i Internet Explorer.
I eksempelet mitt ser man «version=6,0,0,0» i slutten av «codebase». Dette angir hvilken versjon av Flash Player man må ha for å se flashbanneret, i dette tilfellet versjon 6. Har man versjon 5 får man da opp et varsel om installering av en nyere versjon.
«type» og «pluginspage» i embed-taggen har noe av samme hensikt som «classid» og «codebase» har for object-taggen (men altså for andre nettlesere enn IE).

Det er mange ting scriptet mitt overfor mangler. En av disse tingene er «id» i object-taggen og «name» i embed-taggen. Dette er blant annet nødvendig for at flere flashobjekter på samme side kan kommunisere med hverandre (for eksempel synkronisering av innholdet).
I resten av eksemplene nedenfor har jeg lagt til denne informasjonen i embeddingen.

Embedding med clickTAG

Det er to måter man kan embedde en flash med clickTAG.
I mitt eksempel vil jeg at clickTAG skal være http://no.wikipedia.org/wiki/Sirkel

Den første måte å gjøre det på er ved å angi clickTAG-variabelen i URL-en til swf-fila:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash/cabs/swflash.cab#version=6,0,0,0" width="180" height="150" >
	<param name="movie" value="http://hardcode.no/img/banner_180x150.swf?clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel">
	<embed src="http://hardcode.no/img/banner_180x150.swf?clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel" width="180" height="150" type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></embed>
</object>

Den andre måten å gjøre det på er å legge til parameteret «flashvars» i scriptet.
Legg merke til at det gjøres to steder:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://active.macromedia.com/flash/cabs/swflash.cab#version=6,0,0,0" width="180" height="150" >
	<param name="movie" value="http://hardcode.no/img/banner_180x150.swf">
	<param name="flashvars" value="clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel">
	<embed src="http://hardcode.no/img/banner_180x150.swf" width="180" height="150" type="application/x-shockwave-flash"
	pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
	flashvars="clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel"></embed>
</object>

wmode

Parameteret «wmode» angir hvordan flashbanneret plasseres i forhold til andre elementer på nettsiden.
Man har tre mulige valg: window, opaque og transparent. window er standard verdi.

Ved bruk av window vil flashbanneret embeddes i sin egen lille firkant hvor den lever sitt eget liv. window bruker minst CPU av de tre alternativene.
Ulempen er at det ikke er mulig å vise annen HTML over flashbanneret.

opaque er gjerne det alternativet som brukes mest. Da blir flashbanneret plassert på nettsiden som et normalt HTML-element, slik at annet innhold kan plasseres foran/bak/under/over.
En ulempe er man ikke får tastet inn alfakrøll-tegnet i skjemaer i flashbanneret ved bruk av opaque (gjelder blant annet Firefox).

Hvordan transparent fungerer ligger i navnet. Deler av banneret (eller hele) kan være transparent. Nyttig hvis banneret skal ha noe annet enn en rektangulær form.
Bortsett fra dette er transparent et dårlig alternativ som bruker mye CPU.

I scriptet nedenfor har jeg brukt wmode=opaque:

<object id="uniktNavnForAkkuratDetteFlashobjektet" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="150">
	<param name="movie" value="http://hardcode.no/img/banner_180x150.swf?clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel">
	<param name="quality" value="high">
	<param name="wmode" value="opaque">
	<embed src="http://hardcode.no/img/banner_180x150.swf?clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel" name="uniktNavnForAkkuratDetteFlashobjektet" quality="high" width="180" height="150" wmode="opaque" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

allowscriptaccess, allownetworking og allowfullscreen

La oss se på tre nye parametere:
allowscriptaccess, allownetworking og allowfullscreen

«allowscriptaccess» angir om flashobjektet skal ha tillatelse til å kommunisere med andre elementer, som for eksempel javascript på nettsiden. Gyldige verdier er always, samedomain og never.

«allowscriptaccess» angir om flashobjektet skal ha tilgang til nettverksfunksjonalitet.
Man har tre mulige valg: all, internal og none.
all og none er selvforklarende. internal nekter flashobjektet tilgang til å kommunisere med browseren, men tilgang til annet innhold på nettsiden.

«allowfullscreen» kan være enten true eller false.
Denne må være satt til true om man ønsker at flashobjektet kan åpne seg i fullskjerm, som for eksempel fullskjermmodus i en videoavspiller laget i flash.

<object id="uniktNavnForAkkuratDetteFlashobjektet" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="180" height="150">
	<param name="allowscriptaccess" value="always">
	<param name="allownetworking" value="all">
	<param name="allowfullscreen" value="true">
	<param name="movie" value="http://hardcode.no/img/banner_180x150.swf?clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel">
	<param name="quality" value="high">
	<param name="wmode" value="opaque">
	<embed src="http://hardcode.no/img/banner_180x150.swf?clickTAG=http%3A%2F%2Fno.wikipedia.org%2Fwiki%2FSirkel" name="uniktNavnForAkkuratDetteFlashobjektet" quality="high" width="180" height="150" wmode="opaque" allowscriptaccess="always" allownetworking="all" allowfullscreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>

Utfyllende informasjon for flere parametere for embedding finner du her:
http://kb2.adobe.com/cps/127/tn_12701.html

Hva med de som ikke har Flash Player?

Dette var veldig aktuelt tidligere, men så hadde vi en periode hvor dette gjaldt marginalt få.
Så kom iPhone og iPad som ikke støtter flash.

I terminologien for nettannonsering har vi noe som kalles for «fallback» eller «backup-gif». Dette er rett og slett et bilde som blir vist til de brukerne som ikke har Flash Player. Dette inngår ikke som en egen del i embeddingen nevnt tidligere i denne artikkelen, men som en del av et javascript.

Et slikt javascript må sjekke om brukeren har Flash Player. Har brukeren Flash Player installert viser man flashbanneret. Har man ikke Flash Player installert viser man i stedet bildet.

I den samme logikken kan det være greit å ha støtte for hvilke versjon av Flash Player man har. Inneholder kanskje flashbanneret avansert funksjonalitet som kun støttes i Flash Player 10? Da må man levere ut et bilde til de som har Flash Player 9 eller lavere.

Slike javascript kan enten utvikles og tilpasses til eget bruk, eller man bruke den ferdige løsningen SWFObject:
http://en.wikipedia.org/wiki/SWFObject

SWFObject tar seg også av store deler av embeddingen vi har gått gjennom her, så man bare trenger å forholde seg til en forenklet funksjon hvor man oppgir de aktuelle variablene.