Tutorial: Transparante Flash en HTML

Published by Ronny on September 26th, 2007 in Flash, HTML, Tutorial. 3 Comments Tagged with , , , , , , ,

Naar aanleiding van heel wat hits op mijn site, en enkele emails om uit te leggen hoe ik het transparante pixel-teken effect op mijn portfolio-site heb gemaakt, heb ik besloten om even een korte tutorial te schrijven hiervoor.

Om de tut te volgen heb je alleen een text-editor nodig (Notepad is al genoeg. Ik gebruik Dreamweaver ;) ). Een Flashmovie kun je tijdens de tutorial zelf downloaden.

Basis kennis van HTML en ‘weten wat de Canvas in Flash is’ is vereist. ;)

Tutorial:

We willen een Flashobject in een HTML pagina laten weergeven, en de onderliggende HTML gebruiken, om het achtergrond kleur te bepalen van het geheel.

Maak een nieuw html document aan en sla het op als ‘index.htm’ .

We willen nu kunnen bepalen waar we onze Flash willen laten weergeven. Hiervoor maken we een DIV object aan in HTML waar we later onze Flashmovie inladen.

Voeg dit toe aan de BODY in je HTML:

[html4strict]<div id=”flashDIV” style=”width:500px; height:400px; margin-left:-250px; margin-top:-200px;position:absolute;top:50%;left:50%; background-color:#FF0066;”>
Download de Adobe Flash Player om de FlashMovie te zien!
</div>[/html4strict]

In bovenstaande regel zie je meteen ook wat CSS staan. Dat is mijn manier van werken als ik iets wil centreren in het browservenster. Meteen ook een achtergrondkleur ingesteld oor deze DIV. #FF0066 for a better world ;)
Om verder te gaan willen we nu (op een verantwoorde wijze) Flash in deze DIV gaan laden.
Mensen die Microsoft Internet Explorer 6 of Windows Internet Explorer 7 gebruiken zijn ongetwijfeld al op websites gestoten waar men eerst op een Flashobject moest klikken om het te activeren. Dit is een kwestie waar men veel naar verwijst als ‘Het Eolas Patent‘. Het gebeuren rond Microsoft en Eolas had als gevolg dat alle ‘ActiveX objecten‘ in de Microsoft browsers eerst moesten geactiveerd worden. Dit valt op te lossen door SWFObject of andere JavaScript oplossingen te gebruiken. Het fijne hieraan is dat we meteen ook verantwoorde markup in onze broncode hebben.

Download SWFObject.js en zet het in dezelfde map als je index.htm bestand.

Als de HTML pagina geladen wordt moet de browser weten dat we het SWFObject.js bestand willen gaan gebruiken. Dit doen we door de volgende tag in de HEAD-tag van ons HTML document te steken.

De volgende regel moet in de HEAD van je HTML document.

[html4strict]<script type=”text/javascript” src=”swfobject.js”></script>[/html4strict]

Nu hebben we nog een Flashobject nodig dat we in onze DIV willen laden.

Download deze Flashmovie en unzip deze ter hoogte van je index.htm. Je .SWF bestand staat dan in dezelfde map als je index.htm bestand.
Nota: Deze Flashmovie is niet door mij ontworpen of gemaakt. Ik eis geen rechten op.

Nu brengen we onze Flash en de DIV samen, door gebruik van SWFObject.

De volgende code komt onder de DIV in onze HTML.

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.write(“flashDIV”);
</script>[/html4strict]

Als we dit resultaat nu in een browser bekijken zien we een FlashMovie, met 3 actieve mannetjes, maar de achtergrond is nog altijd zwart (het achtergrondkleur ingesteld in Flash). Hiervoor gaan we een extra parameter meegeven aan het SWFObject.

Maak van:

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.write(“flashDIV”);
</script>[/html4strict]

het volgende:

[html4strict]<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.addParam(“wmode”,”transparent”);
so.write(“flashDIV”);
</script>[/html4strict]

Als we nu naar het resultaat kijken zien we weer de 3 actieve mannetjes, maar deze keer is de achtergrond pink! Het achtergrond kleur is nu #FF0066, wat we ingesteld hebben in onze DIV.style :)

Dit is de volledige source code die je nu zou moeten hebben.

[html4strict]<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Tutorial: Transparante Flash</title>
<script type=”text/javascript” src=”swfobject.js”></script>
</head>

<body>
<div id=”flashDIV” style=”width:500px; height:400px; margin-left:-250px; margin-top:-200px;position:absolute;top:50%;left:50%; background-color:#FF0066;”>
Download de Adobe Flash Player om de FlashMovie te zien!
</div>
<script type=”text/javascript”>
var so = new SWFObject(“dodgesquad.swf”, “flashmovie”, “500″, “400″, “8″, “#000000″,”true”);
so.addParam(“wmode”,”transparent”);
so.write(“flashDIV”);
</script>
</body>
</html>[/html4strict]

Het resultaat kun je hier downloaden of hier bekijken.

Ik hoop hiermee een aantal mensen mee verder te kunnen helpen. Veel succes en vooral veel plezier!


Posts that somehow relate to this one:

popular opinion

3 others felt like sharing their feelings about this. Feel free to do so as well.

Lynn @ 21:40 - October 30th, 2007

hallo,

ik had een vraag erover want er staat dodge man en klopoktoups 2004 op. kan dat veranderd worden of kan het niet anders.

groetjes, Lynn

bjarne @ 14:19 - November 19th, 2007

Begrijp ik goed dat ik de achtergrond kleur (pink) ook kan veranderen in de div naar een image?

Ronny @ 14:45 - November 19th, 2007

Dat begrijp je inderdaad goed.
Je moet dan gewoon het attribuut ‘background-color’ vervangen door ‘background-image’ en er de url naar de gewenste foto invullen :)

@Lynn: de SWF mag niet veranderd worden, tenzij jij de eigenaar van de SWF weet te vinden. Gezien ik deze zelf ooit maar ergens heb geplukt, kan ik je niet zeggen wie de eigenaar is. Wettelijk gezien mag je de SWF dus niet veranderen.

Freedom of speech!

Whatever it is you feel: Tell me! It's for free!