Baggrund
Som de fleste af jer nok allerede har hørt, udgav Microsoft for nylig en opdatering til Internet Explorer, som tvinger os flashfolk til at ændre den måde vi embedder swf filer i html.

(Det skal siges at det faktisk ikke er Microsoft der er skurken i denne sag. De blev sagsøgt og tabte. Webstandards.org har mere om historien.)

Patchen gør at brugeren ikke kan benytte Microsoft ActiveX kontroller (applet, embed og object) uden først at aktiverer dem med et klik. Istedet vil brugeren blive mødt at dette syn.

Jeg har lavet en lille test der viser patchen i aktion (kræver en PC med IE6).

Heldigvis kan vi relativt nemt omgå problemet. Det eneste det kræver er, at vi begynder at embedde vores swf-filer med javascript.

SWFObject
Der findes mange forskellige måder at embedde på via javascript, men en løsning skiller sig ud fra de andre og er hurtigt ved at blive de facto standarden: SWFObject.

Nogle af fordelene ved SWFObject scriptet er at:

  1. Det kan detecte Flash plug-in i alle størrere browsere (både PC og Mac).
  2. Det er nemt at bruge.
  3. Det er søgemaskine venligt.
  4. Det validere i HTML and XHTML 1.0 dokumenter.
  5. Det er fremtidssikret.

Sådan gør du
Start med at downloade SWFObject.

Opret et nyt html dokument og kopier nedenstående kode ind, for at oprette en meget skrabet html side:

1

2

3

4

5

6

7

8

9

10


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

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>SWFObject embed</title>

</head>

 

<body>

</body>

</html>

I dit head tag inkludere du flashobject.js:
<script type="text/javascript" src="js/swfobject.js"></script>(bemærk at jeg har min version af swfobject.js liggende i en mappe der hedder "js". Hvis du har din version et andet sted, skal du huske at ændre stien til filen.)

I din body skal du oprette et html element (i eksemplet her benytter vi et div-tag) og give det id'et "flashcontent":
<div id="flashcontent">For at se denne side skal du have Flash Player version 7 eller højere og JavaScript slået til.</div>
Indholdet af div elementet vil blive erstattet af swf-filen. Brugere med den rigtige version af Flash Player vil altså aldrig se indholdet af elementet.
Til gengæld vil søgemaskinerne (som ikke forstår javascript) indekser indholdet. På den måde er det muligt at gøre sine flashsider søgemaskine venlige.

For at benytte scriptet skal vi oprette et SWFObject og sende de krævede variabler til det. Det gør vi sådan her:

1

2

3

4


<script type="text/javascript">
   var so = new SWFObject("test.swf", "soTest", "550", "400", "7", "#ffffff");

   so.write("flashcontent");

</script>

Variablerne vi sender til scriptet er:

  1. swf - Stien il og navn på din swf fil.
  2. id - Id'et på dit object eller embed tag.
  3. bredde - Bredden på din swf.
  4. højde - Højden på din swf.
  5. version - Den krævede Flash Player version.
  6. baggrundsfarve - Baggrundsfarven på din swf i Hex format.

Så mangler vi bare at skrive swf'en til det div-tag vi oprettede tidligere:
so.write("flashcontent");
(Bemærk at vi refererer til div tagget via dets id, det er derfor vigtigt at id'et på div tagget og id'et vi bruger i SWFObject'et stemmer over ens.)

Den samlede kode kommer altså til at se sådan her ud:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18


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

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<title>SWFObject embed</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/screen.css" />

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

</head>

 

<body>

<div id="flashcontent">For at se denne side skal du have Flash Player version 7 eller højere og JavaScript slået til.</div>

 

<script type="text/javascript">

   var so = new SWFObject("swf/movie.swf", "soMovie", "550", "400", "7", "#ffffff");

   so.write("flashcontent");

</script>

</body>

</html>

For en god ordens skyld har jeg inkluderet et stylesheet, der sætter margin til 0, samt gør det muligt at vise fullscreen swf'er i Firefox.
Indholdet af stylesheetet ser sådan her ud:

1

2

3

4

5

6

7

8


html,body,#flashcontent {
  height:100%;

  }

  

body {

  margin:0;

  padding:0;

  }

Du kan også hente stylesheetet her.
(bemærk at jeg har mit stylesheet i en mappe der hedder "css". Hvis du har din version et andet sted, skal du huske at ændre stien til filen.)

Eksempler
Her er nogle eksempler der viser brugen af SWFObject

Almindelig embed.

Fullscreen embed.

Dette eksempel kræver Flash Player 10 (hvilket du med stor sandsynlighed ikke har Smile), det alternative indhold vil derfor blive vist istedet.

Tilføj parameter
Med SWFObject er det også let at tilføje parameter til din swf fil. Vil vi f.eks lave baggrunden på swf'en gennesigtig skriver vi bare:

1
2
3
4
5

<script type="text/javascript">
   var so = new SWFObject("swf/transparent.swf", "soMovie", "550", "400", "7", "#ffffff");
   so.addParam("wmode", "transparent");
   so.write("flashcontent");
</script>

Eksemplet her viser brugeren af parametere.

Tilføj variabler
Lige som med parametre, er det også let at sende variabler til flash.

1
2
3
4

<script type="text/javascript">   var so = new SWFObject("swf/var.swf", "soMovie", "550", "400", "7", "#ffffff");
   so.addVariable("tekst", "Hej, jeg er tekst sendt fra html til flash");
   so.write("flashcontent");
</script>

Eksemplet her viser brugeren af variabler.

Downloads
Hent alle filer brugt i denne tutorial.

Videre læsning
Geoff Stearns (udvikleren af SWFObject) har en udførlig guide til SWFObject, hvor han bl.a. også gennemgår scriptets mere advancerede features.

Læs mere på:
http://blog.deconcept.com/swfobject/