SWFObject 2

SWFObject är en metod som används för att bädda in Flash på webbplatser. Metoden bygger på ett JavaScript som kontrollerar om besökaren har den version av Flash Player som krävs för att visa det önskade innehållet.

Ladda ner SWFObject 2.2

Använda SWFObject 2

Nedan följer en svensk översättning av dokumentationen av SWFObject 2 och hur man använder metoden på bästa sätt.

Vad är SWFObject?

SWFObject 2:

  • Erbjuder två metoder att bädda in Flash: En statisk och en dynamisk.
  • Behöver bara en liten JavaScript-fil. (Storlek: 8.7Kb, GZIP: 3.4Kb)
  • En vidareutveckling av SWFObject 1.5.
  • Kommer eventuellt att ersätta Adobe Flash Player Detection Kit.
  • Verkar för att ta fram en ny standard inom inbäddning av Flash.
  • Är ett “open source“-projekt (öppen källkod) av Geoff Stearns, Michael Williams, och Bobby van der Sluis.

Varför borde jag använda SWFObject?

SWFObject 2:

  • Är mer optimerat och flexibelt än andra inbäddningsmetoder.
  • Erbjuder en lösning som är samma för alla, oavsett om man är HTML-, Flash- eller JavaScript-utvecklare.
  • Förhindrar att du blir påtvingad försäljarens inbäddningskod som inte validerar eller tillhandahåller alternativt innehåll.
  • Använder JavaScipt som inte stör.
  • Är enkelt att använda.

Artikeln, Flash Embedding Cage Match, från A List Apart förklarar allt om bakgrunden till SWFObject 2.

Varför använder SWFObject JavaScript?

SWFObject 2 använder JavaScript till att göra det som vanlig HTML inte klarar av, vilket i detta fall är:

  • Upptäcker vilken version av Flash Player som finns installerad och bestämmer om SWF-filen eller det alternativa innehållet skall visas.
  • Erbjuder alternativet att använda sig av Adobes Express Install för att ladda ner och installera Flash Player.
  • Erbjuder en genomarbetad JavaScript API för att genomföra Flash-specifika uppgifter.
  • Möjlighet till att visa och använda SWF-filen utan att behöva aktivera det aktiva innehållet.

Varför borde jag använda alternativt innehåll?

Tack vare SWFObject kan du lägga till alternativt innehåll som visas om rätt version av Flash Player inte är installerat på besökarens dator. Det alternativa innehållet kommer också vara det som sökmotorer ser då de ännu inte är så duktiga på att läsa igenom SWF-filer, vilket för det till ett bra verktyg för att skapa sökmotorvänliga webbplatser baserade på Flash. Med andra ord ska du använda alternativt innehåll när du inte vill stänga ute besökare, som inte har rätt insticksprogram, utan att informera om att innehållet också finns tillgängligt i Flash, för de som har Flash Player installerat.

Ska jag använda den statiska eller dynamsika publiceringsmetoden?

SWFObject 2 erbjuder två kraftfulla metoder för att bädda in Flash:

  1. Den statiska metoden bäddar in både Flash och det alternativa innhållet genom att använda vanlig kod och använder sedan JavaScipt som löser det som den vanliga koden inte klarar av.
  2. Den dynamiska metoden är baserad på det alternativa innehållet och sedan ersätter Flash det om den minsta gångbara versionen av Flash Player finns installerad och tillräckligt med stöd för JavaScript finns. (Liknar den tidigare versionen av SWFObject)

Fördelar med den statiska metoden

  1. Använder enligt nu gällande standarder
  2. Tekniken bakom bygger inte på scriptspråk vilket betyder att:
    • Om du har rätt Flash Player installerad men inte tillåter JavaScript så kan du fortfarande se SWF-filen.
    • Fungerar på exempelvis PSP som normalt sett har ett väldigt dåligt stöd för JavaScript.
    • Automatiserade verktyg som RSS-läsare har möjlighet att fånga upp innehåll från SWF-filen.

Fördelar med den dynamiska metoden

  1. Du slipper “click-to-activate” som annars dyker upp i Internet Explorer 6/7 och Opera 9+. (Värt att notera är att Microsoft just nu håller på att fasa ut just detta på sin webbläsare, Internet Explorer.)
  2. Fungerar bra tillsammans med annat scriptbaserat innehåll på sidan.

Hur man använder den statiska SWFObject-metoden

STEG 1: Bädda in Flash med HTML

SWFObject-koden i den statiska metoden är baserad på nästlade <object>-taggar. Den yttre är till för Internet Explorer medan den inre riktar sig till de andra webbläsarna. (Därav villkoren som bara gäller för Internet Explorer)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SWFObject 2.0 (statisk) - Steg 1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>

  <body>
    <div>

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->

        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternativt innehåll</p>
        <!--[if !IE]>-->
        </object>

        <!--<![endif]-->
      </object>

    </div>
  </body>
</html>

Viktigt! Eftersom det är två <object>-taggar måste du definiera parametrarna för object två gånger för att det ska fungera!

Nödvändiga attribut:

  • classid (Yttre <object>-taggen, värdet ska alltid vara clsid:D27CDB6E-AE6D-11cf-96B8-444553540000)
  • type (Inre <object>-taggen, värdet ska alltid vara application/x-shockwave-flash)
  • data (Inre <object>-taggen, definerar URL:en till Flash-filen)
  • width (Båda <object>-taggarna, definerar bredden på Flash-filen)
  • height (Båda <object>-taggarna, definerar höjden på Flash-filen)

Nödvändiga parametrar:

  • movie (Yttre <object>-taggen, definerar URL:en till Flash-filen)

Viktigt! Vi råder dig till att inte använda attributet codebase som pekar på en URL hos Adobes server. Vi rekommenderar dig istället till att ha en text i det alternativa innehållet som upplyser besökaren om att han kan få ut mer av sidan genom att installera Flash Player.

Hur kan man använda HTML för att konfigruera SWF-filen?

Du kan lägga till attribut avsedda för <object>-taggen:

  • id
  • name
  • class
  • align

Du kan också använda de för Flash specifika parametrarna:

STEG 2: Inkludera all JavaScript som behövs

Den externa JavaScript-filen ska länkas in i head så att den laddas in och utföra det som krävs för att SWF-filen ska laddas in på rätt sätt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SWFObject 2.0 (statisk) - Steg 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

  </head>
  <body>
    <div>
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">
        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->

        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">
        <!--<![endif]-->
          <p>Alternativt innehåll</p>
        <!--[if !IE]>-->
        </object>

        <!--<![endif]-->
      </object>
    </div>
  </body>
</html>

STEG 3: Lägg till en SWF och berätta vad swfobject.js ska göra med den

Först av allt måste du ange ett unikt id till den yttre <object>-taggen som definerar ditt SWF-objekt. Lägg sedan till swfobject.registerObject innanför en ny <script>-tagg. (Du kan ha flera swfobject.registerObject innanför samma <script>-tagg):

  1. Det första (nödvändigt) är att ange det id på den <object>-taggen som du vill ersätta med SWF-filen med.
  2. Det andra (nödvändigt) som du måste ange är vilken version av Flash Player som din SWF-fil är skapad för. SWF-filen ersätter bara det alternativa innehållet om samma eller en senare version av Flash Player finns installerad. SWFObject tittar bara efter de första tre siffrorna så både “WIN 9,0,18,0″ (IE) och “Shockwave Flash 9 r18″ (alla andra webbläsare) översätts till “9.0.18″.
  3. Det tredje (frivillig) kan användas för att aktivera Adobes expressinstallation av Flash Player. För att aktivera det anger du den URL som motsvarar för sökvägen till exressinstallationsfilen. Skulle besökaren inte ha Flash Player installerat visas en standardiserad diologruta om att denna bör installera detta. Vill du inte använda den originalfilen (epressInstall.swf) som finns i paketet kan du använda expressInstall.fla och AS-fil för att komponera din egen version. Vänligen uppmärksamma att expressinstallation bara dyker upp en gång och stöds endast av Flash Player 6.0.65 eller senare på både Windows och Mac. (SWF-filen måste ha ett mått på 310×137 pixlar eller mer)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SWFObject 2.0 (statisk) - Steg 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

    <script type="text/javascript">
    swfobject.registerObject("myId", "9.0.0", "expressInstall.swf");
    </script>

  </head>
  <body>

    <div>

      <object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="780" height="420">

        <param name="movie" value="myContent.swf" />
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data="myContent.swf" width="780" height="420">

        <!--<![endif]-->
          <p>Alternativt innehåll</p>
        <!--[if !IE]>-->
        </object>
        <!--<![endif]-->

      </object>
    </div>
  </body>
</html>

Användningstips för den statiska metoden

  • Upprepa steg 1 och 3 för att bädda in flera olika SWF-filer på samma sida.
  • Det enklaste sättet att referera till ett object är genom att använda JavaScript API: swfobject.getObjectById(objectIdStr)

Hur man använder den dynamiska SWFObject-metoden

STEG 1: Välj alternativt innehåll

Den dynamiska SWFObject-metoden går ut på att ersätta (lägga sig över) innehållet i HTML, när rätt version av Flash Player finns. För att det ska fungera krävs också tillräckligt stort stöd för JavaScript. Först av allt ska du definera det alternativa innehållet och ge det ett unikt id.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SWFObject 2.0 (dynamisk) - Steg 1</title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  <body>

    <div id="myContent">
      <p>Alternativt innehåll</p>

    </div>

  </body>
</html>

STEG 2:Inkludera all JavaScript

Den externa JavaScript-filen ska länkas in i head så att den laddas in och utföra det som krävs för att Flash-filen ska laddas in på rätt sätt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>SWFObject 2.0 (dynamisk) - Steg 2</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

  </head>
  <body>
    <div id="myContent">
      <p>Alternative content</p>
    </div>

  </body>
</html>

STEG 3: Bädda in Flash med JavaScript

swfobject.embedSWF(swfUrl, id, width, height, version, expressInstallSwfurl, flashvars, params, attributes) består av:

  1. swfURL (Nödvändig) specificerar URL:en till SWF-filen
  2. id (Nödvändig) specificerar det id som du har gett det HTML-element som du vill ska bli ersatt med Flash-filen
  3. width (Nödvändig) specificerar bredden av din SWF-fil
  4. height (Nödvändig) specificerar höjden av din SWF-fil
  5. version (Nödvändig) specificerar vilken version av Flash Player din SWF-fil är skapad för. (Formatet är: “major.minor.release”)
  6. expressInstallSwfurl (Frivillig) anger URL:en till den SWF-fil som ska ta hand om Adobe Express Install. Vänligen uppmärksamma att expressinstallation bara dyker upp en gång och stöds endast av Flash Player 6.0.65 eller senare på både Windows och Mac. (SWF-filen måste ha ett mått på 310×137 pixlar eller mer
  7. flashvars (Frivillig) specificerar de variabler som ska skicka till SWF-filen. (Formatet är: “name:value”)
  8. params (Frivillig) specifcerar parametrarna som ska skickas till SWF-filen. (Formatet är: “name:value”)
  9. attributes (Frivillig) specificerar attributen. (Formatet är: “name:value”)

Viktigt! Du behöver inte använda alla frivilliga parametrar med alla måste vara i rätt ordning, vilket betyder att om du vill hoppa över någon så måste du ändå skriva ut parametern och sätta värdet till “false“. Vad gäller flashvars, params och attributes kan du, istället för “false” sätta lämna blankt: {}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>SWFObject 2.0 (dynamisk) - Steg 3</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="swfobject.js"></script>

    <script type="text/javascript">
    swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
    </script>

  </head>
  <body>
    <div id="myContent">

      <p>Alternativt innehåll</p>
    </div>
  </body>
</html>

Hur kan man använda JavaScript för att anpassa SWF-filen?

Några av de vanligaste attributen som egentligen tillhör object-elementet:

  • id (När id är odefinerat ärver object automatiskt samma id som det alternativa innehållet har)
  • name
  • styleclass (används istället för class)
  • align

Du kan också använda följande parametrar som ursprungligen kommer från Flash:

Hur använder man JavaScript för att definiera attribut? (flashvars, params och object)

Det bästa sättet att definera JavaScript-objekt på är genom att göra så här:

<script type="text/javascript">

var flashvars = {};
var params = {};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Du kan lägga till “name:value”-par för att definera ett objekt: (Försäkra dig om att du sätter ett kommatecken efter det sista “name:value”-paret)

<script type="text/javascript">

var flashvars = {
  name1: "hello",
  name2: "world",
  name3: "foobar"
};
var params = {
  menu: "false"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Eller lägga till egenskaper och värden efter att dem skapats:

<script type="text/javascript">

var flashvars = {};
flashvars.name1 = "hello";
flashvars.name2 = "world";
flashvars.name3 = "foobar";

var params = {};
params.menu = "false";

var attributes = {};
attributes.id = "myDynamicContent";

attributes.name = "myDynamicContent";

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Kan också skrivas så här: (Kräver inte lika många tecken men är heller inte lättläst)

<script type="text/javascript">

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", {name1:"hello",name2:"world",name3:"foobar"}, {menu:"false"}, {id:"myDynamicContent",name:"myDynamicContent"});

</script>

Om du inte vill definiera något sätter du det till false eller lämnar det blankt:

<script type="text/javascript">

var flashvars = false;
var params = {};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

För de som inte vill skriva en massa tecken i onödan finns det också shorthand. Du kan då ange flashvars genom params:

<script type="text/javascript">

var flashvars = false;
var params = {
  menu: "false",
  flashvars: "name1=hello&name2=world&name3=foobar"
};
var attributes = {
  id: "myDynamicContent",
  name: "myDynamicContent"
};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Användningstips för den dynamiska metoden

Från SWFObject 1.5 till SWFObject 2

  1. SWFObject 2 är INTE bakåtkompatibelt med SWFObject 1.5
  2. Med SWFObject 2 sätter man med fördel in all JavaScript i head på HTML-sidan.
  3. Biblioteket är nu skrivet med små bokstäver: swfobject istället för SWFObject
  4. Metoder kan endast kommas åt genom biblioteket (istället för SWFObject-instansen i SWFObject 1.5)
  5. API:n är helt omgjord och mer genomarbetad.
  6. SWFObject 2 ersätter det alternativa innehållet som även innefattar det HTML-element som hade aktuellt idSWFObject 1.5 ersatte endast innehållet i det element som hade angivet id När du inte speificerar ett id ärver object-elementet det och id som HTML-elementet, innehållande det alternativa innehållet, har.