Godt igang med SwfObject 2.0

Kategori: Tips og tricks | Kommentarer (6)
Gemt: 2008-03-18 18:13


Som lovet i går kommer her en introduktion til SwfObject 2.0 - den bedste måde at embedde swf-filer i html.

Hvorfor egentlig SwfObject?
Se, det er en rigtig, rigtig, RIGTIG lang historie og en historie der er så betændt og så fyldt med religion at jeg ikke vil komme ind på det i denne artikel, vi har haft Muhammed-kriser nok ;-)

Kort fortalt kan man bare sige, at SwfObject i øjeblikket er den bedste måde at embedde swf-filer på, hvis man vil sikre kompatabilitet på tværs af flest mulige platforme og sikre at de brugere som ikke har den nødvendige version af, eller slet ikke har, Flash Player installeret bliver præsenteret for alternativt indhold.

Hvis du er nysgerrig og ikke er bange for at vove dig ud på det dybe vand, så kan denne artikel fra februar 2007 af Bobby Van Der Sluis anbefales:
Flash Embedding Cage Match

Step 1: Download
Første skridt for at komme igang med SwfObject 2.0 er *indsæt selv fanfare* at downloade den, og det kan ske herfra:
SwfObject download på Google Code

Du skal bare nappe den første fil, som i skrivende stund hedder swfobject_2_0.zip, gemme den og pakke den ud.

Index.html og index_dynamic.html indeholder eksempler på hvordan du bruger SwfObject 2.0 og er sådan set rigtigt nemme at gå til.

Static vs dynamic
Det gamle SwfObject havde kun en måde at embedde indhold på, men dens nye har 2 måder, henholdvis static og dynamic.

Static (som svarer til index.html) anbefales til sites hvor det er vigtigt at alting virker selvom brugeren ikke har javascript aktiveret.
Den største ulempe er, at den ikke fjerner den belastende “Klik for at aktivere”-markering i Internet Explorer og derudover er koden væsentlig mere kluntet og dermed sværere at overskue.

Dynamic (som svarer til index_dynamic.html) er den der ligger tættest op af den tidligere version af SwfObject og har som største fordel at man ikke skal klikke for at aktivere, samt at koden er meget enkel at overskue og ikke indeholder dobbeltkonfekt, altså ens værdier som skal rettes flere steder.

Hvilken metode der passer bedst til dig skal jeg ikke kunne sige, men hvis de ting du laver primært skal virke på almindelige computere, hvad enten det drejer sig om Macs eller pc’ere, så vil jeg anbefale dynamic, og det er også den metode som jeg vil gennemgå.

Hvis det er kritisk for de ting du laver at de også virker på meget alternative enheder, eksempelvis Sony PSP, så er static vejen frem.

Step 2: Struktur
For at forstå hvordan SwfObject virker, så er det vigtigt at vide at der er tale om en to-trins-raket:
En <div> placeret der på siden hvor Flash-indholdet skal vises, samt en smule javascript i toppen.

Her er grundstrukturen, som stort set svarer til index_dynamic.html, men da denne blog er super dårlig til at vise html-kode, så er den skåret lidt til for overskuelighedens skyld:

<html>
<head>
	<title>SWFObject v2.0 dynamic embed sample page</title>
	<script type="text/javascript" src="swfobject.js"></script>
	<script type="text/javascript">
	swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");
	</script>
</head>
<body>
	<div id="myContent">
		<h1>Alternative content</h1>
	</div>
</body>
</html>

Step 3: Scriptet
I toppen er der to scripts, det første sørger for at inkludere swfobject.js som indeholder al funktionaliteten, og som derfor i øvrigt også skal kopieres med ud på serveren sammen med html og swf-filerne:

<script type="text/javascript" src="swfobject.js"></script>

Den næste, og væsentligt sjovere linie er denne:

swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf");

embedSWF funktionen er den funktion som overskriver <div> med swf-filen, og dermed den funktion som får det hele til at ske.

Den har følgende parametre:
- Sti til swf-fil (”test.swf”)
- ID på det <div> der skal overskrives (”myContent”)
- Bredde på swf’en (”300″)
- Højde på swf’en (”120″)
- Minimums Flash Player version (”9.0.0″)
- Sti til expressInstall.swf (”expressInstall.swf)

Den eneste som måske ikke giver sig selv er expressInstall.swf, men det er en fil som gør Flash Player i stand til at opdatere sig selv til nyeste version, uden at brugere skal forlade sitet.
Medmindre du har specifik grund til andet, så hav den endelig med. Du kan læse mere om Express Install her:
Express Install FAQ

Step 4: Ekstra parametre og Flashvars
Hvis man bruger funktionen i den viste, den reneste form, så skal den nok inkludere swf-filen, men ofte har man jo brug for at stille på et eller flere af de mange parametre, eksempelvis wmode, allowscriptaccess med flere, eller brug for at kunne sende egne værdier med ind i Flash-filen, og hvad gør man så?

Til det formål byder SwfObject på to objekter, henholdsvis flashvars og params.

Params er til de indbyggede parametre, såsom wmode, mens flashvars er til dine egne værdier.

Med begge dele, kunne scriptet i toppen nu se således ud:

<script type="text/javascript">
	var flashvars = {};
	flashvars.feed = "http://www.myfeed.dk/feed.xml";

	var params = {};
	params.menu = "false";
	params.bgcolor = "#000000";
	params.allowfullscreen = "true";

	swfobject.embedSWF("test.swf", "myContent", "300", "120", "9.0.0", "expressInstall.swf", flashvars, params, false);
</script>

Step 5: Upload
Jep, det var det!

Så let er det at bruge SwfObject 2.0 og dermed at sikre maksimal kompatabilitet.

Du kan se den komplette index_dynamic.html i aktion her:
SWFObject v2.0 dynamic embed sample page

En endnu nemmere måde!
Hvis du, som jeg, synes at koden nok ser nem ud at rette i, men aldrig helt kan huske hvad de forskellige variabler hedder og aldrig lige kan finde et godt eksempel blandt dine gemte kodestumper, så er der endnu en rigtig god nyhed ved SwfObject 2.0, nemlig html-generatoren!

De har nemlig været så flinke at lave en lille applikation, hvor man kan se alle tilgængelige muligheder, stille ved dem man ønsker, trykke generate og voila, så har man den færdige html og javascript, lige til at sætte ind, nemmere bliver det ikke!

Den findes i to versioner, en i html og en i AIR og begge dele kan også downloades fra Google Code:
SwfObject download på Google Code

Herunder kan du se et screenshot af AIR version, klik for at se det i fuld størrelse:

Det var vidst det, rigtig god fornøjelse med SwfObject 2.0!


SwfObject 2.0 er på gaden!

Kategori: Nyheder | Kommentarer (0)
Gemt: 2008-03-17 12:43


Så skete det endelig, version 2.0 af vores allesammens favoritmetode til at embedde Flash-indhold er på gaden!

Projektet gik en overgang under navnet Swffix, da det skulle tage det bedste fra SwfObject 1.5 og UFO, men endte i sidste ende med at hedde SwfObject 2.0.
Hvis man kigger på den nye syntax, så kan man sagtens se hvorfor, for den minder utrolig meget om den gamle, men alligevel med lidt små justeringer.

Inden for kort tid skal jeg nok lave en lille artikel som viser hvordan man bruger SwfObject 2.0, men i første omgang ville jeg bare lige sprede den gode nyhed om den rent faktisk er på banen.

Du finder den her:
SwfObject på Google Code


FlashObject skifter navn til SwfObject

Kategori: Nyheder | Kommentarer (0)
Gemt: 2006-05-1 11:04


Adobe er åbenbart blevet inspireret af hele halløjet omkring Eolas patchen, til nu også selv at gå op i at håndhæve deres patenter og varemærke rettigheder, også i sammenhænge hvor det kommer dem selv til gavn.

Læs resten af dette indlæg