Aktiver Flash automatisk og fjern den grimme ramme omkring SWF film
marts 30th, 2007. Kategori: Flash, WebudviklingDen grimme ramme omkring Flash
For godt og vel et års tid siden opdaterede Microsoft deres Internet Explorer, så aktivt indhold skulle aktiveres, inden man kunne bruge det. Det betyder, at man nu skal klikke på på en flash film inden den bliver aktiv.
Det giver flere problemer. For det første er det grimt, når der på ens hjemmeside dukker en tilfældig ramme op omkring ens SWF-fil. Endvidere oplever man, at når man klikker på SWF filen, så sker der ingenting. Mindre erfarne brugere, der ikke umiddelbart genkender elementet som et flash objekt forledes til at tror, at objektet ikke er klikbart.
Det vil være ideelt at kunne lave en automatisk aktivering af flash.
Løsningen
Løsningen på dette problem er ganske enkel. Du får et simpelt JavaScript til med document.write() at skrive de XHTML tags, som afspilningen af Flash filmen behøver. Dette JavaScript SKAL placeres externt. Og derefter hentes in i headeren på XHTML’en og funktionen kaldes nede i body’en. Og voilsa rammen er væk og flashobjektet er aktivt og klart til brug.
Det kan lyde som en større process, men er egentlig ganske let. Jeg vil forsøge at forklare det meget udførligt, så også folk uden kendskab til JavaScript programmering kan bruge denne løsning.
XHTML
Her er først et eksempel på hvordan dine tags i html dokumentet typisk ville se ud. (nedenstående validerer forøvrigt I XHTML 1.1, hvilket også kan være problematisk)
<object type=”application/x-shockwave-flash” data=”flash/minflashfilm.swf” width=”200px” height=”180px” id=”flashfilm”>
<param name=”movie” value=”flash/minflashfilm.swf” />
<param name=”wmode” value=”transparent” />
</object>
JavaScript
Løsningen går i al sin enkelthed ud på at du nu vil få JavaScript til at skrive de ovenstående tags. Det gør du ved at copy-paste ovenstående ind i følgende script:
function skriv_flash_tags(){ //funktionen oprettes. ændr ikke noget her
document.write(‘ dine html tags her \n’); //indsæt dine tags her. en linie af gangen
document.write(‘ dine html tags her \n’); //indsæt dine tags her. en linie af gangen
document.write(‘ dine html tags her \n’); //indsæt dine tags her. en linie af gangen
document.write(‘ dine html tags her \n’); //indsæt dine tags her. en linie af gangen
} // funktionen afsluttes her
Hvis du har flere eller færre linier i dit XHTML tilføjer eller fjerne du bare document.write linier efter behov. I mit eksempel giver det følgende script:
function skriv_flash_tags(){
document.write(‘<object type=”application/x-shockwave-flash” data=”flash/minflashfilm.swf” width=”200px” height=”180px” id=”blaster”>\n’);
document.write(‘<param name=”movie” value=”flash/minflashfilm.swf” />\n’);
document.write(‘<param name=”wmode” value=”transparent” />\n’);
document.write(‘</object>\n’);
}
Gem så scriptet under navnet flash_aktivator.js. I headeren på dit XHTML dokument henter du nu dit gemte JavaScript med følgende:
<script type=”text/javascript” src=”minjvavscriptmappe/flash_aktivator.js” mce_src=”minjvavscriptmappe/flash_aktivator.js” ></script>
Og endelig skriver du følgende i nede i body’en for at kalde/starte funktionen:
<script type=”text/javascript”>skriv_flash_tags();</script>
Eksempel
Og så skulle du gerne være kørende. Du kan se et eksempel her på det færdige resultat her: http://nielsgamborg.dk/mix/events.php Ghettoblasteren i det nedre højre hjørne er lavet i Flash og bliver automatisk aktiveret.
Vær opmærksom på at være vanvittig præcis med navne, tegn etc. Selv meget små fejl, vil (som altid når det gælder programmering) medføre, at det ikke virker.
Hvis du har haft glæde af denne artikel, så smid lige en kommentar og gør også mig glad. Hvis du oplever problemer så smid også en kommentar, så kigger vi på det.
Læs mere om Aktivering af flash på min hjemmeside Automatisk aktivering af Flash