Deprecated: Assigning the return value of new by reference is deprecated in /var/www/omflash.dk/public_html/wp-includes/cache.php on line 33

Deprecated: Assigning the return value of new by reference is deprecated in /var/www/omflash.dk/public_html/wp-content/plugins/sem-subscribe-me2/sem-subscribe-me.php on line 511

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method UltimateTagWarriorActions::ultimate_query_vars() should not be called statically in /var/www/omflash.dk/public_html/wp-includes/functions.php on line 1252

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method UltimateTagWarriorActions::ultimate_posts_where() should not be called statically in /var/www/omflash.dk/public_html/wp-includes/functions.php on line 1252

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method UltimateTagWarriorActions::ultimate_posts_join() should not be called statically in /var/www/omflash.dk/public_html/wp-includes/functions.php on line 1252

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method UltimateTagWarriorActions::ultimate_tag_templates() should not be called statically in /var/www/omflash.dk/public_html/wp-includes/functions.php on line 1329
Godt igang med SwfObject 2.0 - omFlash();
Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method UltimateTagWarriorActions::ultimate_add_ajax_javascript() should not be called statically in /var/www/omflash.dk/public_html/wp-includes/functions.php on line 1329

Godt igang med SwfObject 2.0


Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

Strict Standards: call_user_func_array() expects parameter 1 to be a valid callback, non-static method UltimateTagWarriorActions::ultimate_the_content_filter() should not be called statically in /var/www/omflash.dk/public_html/wp-includes/functions.php on line 1252

Strict Standards: Non-static method UltimateTagWarriorActions::regExEscape() should not be called statically in /var/www/omflash.dk/public_html/wp-content/plugins/UltimateTagWarrior/ultimate-tag-warrior-actions.php on line 638

Strict Standards: Non-static method UltimateTagWarriorActions::regExEscape() should not be called statically in /var/www/omflash.dk/public_html/wp-content/plugins/UltimateTagWarrior/ultimate-tag-warrior-actions.php on line 638

Strict Standards: Non-static method UltimateTagWarriorActions::regExEscape() should not be called statically in /var/www/omflash.dk/public_html/wp-content/plugins/UltimateTagWarrior/ultimate-tag-warrior-actions.php on line 639

Strict Standards: Non-static method UltimateTagWarriorActions::regExEscape() should not be called statically in /var/www/omflash.dk/public_html/wp-content/plugins/UltimateTagWarrior/ultimate-tag-warrior-actions.php on line 639

Strict Standards: Non-static method UltimateTagWarriorActions::replaceTagWithLink() should not be called statically in /var/www/omflash.dk/public_html/wp-content/plugins/UltimateTagWarrior/ultimate-tag-warrior-actions.php on line 643

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!



Del:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg

6 kommentarer

  1. Michael Brydebøl siger: (19. marts 2008 kl. 10:04 )

    Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

    Hey, tak for en god gennemgang af det nye SwfObject. Glæder mig til at kaste mig over det - ser utroligt nemt ud at bruge og med den lille app som du viser til sidst kan det ikke blive nemmere :)

  2. Mads Buch Stage siger: (19. marts 2008 kl. 10:30 )

    Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

    Velbekomme, godt det kan bruges :-)

  3. Morten B. Schmidt siger: (3. april 2008 kl. 17:19 )

    Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

    YESSIR!!!

    Endelig en ordentlig detection af flashversion ;) Super!!!

    Tak Mads, hvor er det dog dejligt at lære af andre. Jeg skifter snart alt mit til swfobject 2.0. Igen, THX!!

    /mortem

  4. Morten B. Schmidt siger: (3. april 2008 kl. 17:21 )

    Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

    Ja, ok, jeg hedder MorteN, men skidt…

    Den der expressInstall.swf har jeg ikke helt fattet, men jeg bruger også linux… virker den der?

    Det ville være mesterligt hvis den gør… undersøger det nok lige ved lejlighed…

  5. Morten B. Schmidt siger: (3. april 2008 kl. 17:26 )

    Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

    OK… naturligvis ikke…. men Mac?

    Fra documentationen:
    [snip]
    expressInstallSwfurl (String, optional) specifies the URL of your express install SWF and activates Adobe express install [ http://www.adobe.com/cfusion/knowledgebase/index.cfm?id=6a253b75 ]. Please note that express install will only fire once (the first time that it is invoked), that it is only supported by Flash Player 6.0.65 or higher on Win or Mac platforms, and that it requires a minimal SWF size of 310×137px.
    [snap]

    .’(

  6. Mads Buch Stage siger: (7. april 2008 kl. 13:53 )

    Deprecated: preg_replace() [function.preg-replace]: The /e modifier is deprecated, use preg_replace_callback instead in /var/www/omflash.dk/public_html/wp-includes/functions-formatting.php on line 83

    At lige netop ExpressInstall ikke virker på Linux er nok til at overleve, i hvert fald hvis man laver ting rettet mod det brede publikum.

    Ifølge FDIM udgjorde andelen af brugere som ikke brugte XP, Vista eller Mac under 0,3% i februar 2008:
    http://fdim.dk/?pageid=90

Skriv en kommentar