Het publiceren van een Flashmovie in HTML en xhtml

Het publiceren van een Flashmovie in HTML en xhtml

In dit artikel komen een aantal codes aan bod om een flashmovie in een (x)htmlpagina
te zetten. Voor veel nieuwe gebruikers van Flash, of als je een flashbutton aangeleverd
krijgt is dit in eerste instantie een onduidelijke zaak. Tevens beschrijven we het verschil voor HTML en XHTML zodat uw pagina toch valid blijft.

We gaan er van uit dat uw pagina de index.html is en dat de movie
intro.swf is, deze twee zetten we in de zelfde (sub)directorie.
In deze voorbeelden gebruiken we Flash versie 8, en de flash movie “intro.swf” is 400×300 pixels.

Code in HTML:

<objectclassid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″
width=”400″ height=”300″ id=”intro” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”intro.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<embed src=”intro.swf” quality=”high” bgcolor=”#ffffff” width=”400″ height=”300″
name=”intro” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>

De code die we hier boven beschreven wordt herkend door iedere browser zolang u gebruik maakt van HTML, tevens is uw pagina HTML valid.

Code in (X)HTML:

<objectclassid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″
codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″
width=”400″ height=”300″ id=”intro” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”intro.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
</object>

De code die we hier boven beschreven wordt herkend door Internet Explower en uw pagina is XHTML valid. Omdat de <embed …. /> tag niet wordt herkend in XHMTL, wordt uw pagina niet weergegeven in FireFox als u gebruik maakt van een flash movie. Dit kunt u verkomen door gebruik te maken met de Code in combinatie met JavaScript. Uw pagina en flash movie wordt dan ook weergeven in FireFox en is tevens XHTML valid. Ook kunt u gebruik maken van de application/x-shockwave-flash, deze optie zullen we later beschrijven.

Code in (X)HTML met script:

<object classid=”clsid:d27cdb6e-ae6d-11cf-96B8-444553540000″
codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″

width=”400″ height=”300″ id=”intro” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”intro.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#ffffff” />
<script type=”text/javascript”>
//<![CDATA[
if (navigator.mimeTypes && navigator.mimeTypes[“application/x-shockwave-flash”]){
document.write(‘<embed src=”intro.swf” quality=”high” bgcolor=”#ffffff”
allowScriptAccess=”sameDomain”‘);
document.write(‘width=”400″ height=”300″ name=”intro”
align=”middle”  allowScriptAccess=”sameDomain”
type=”application/x-shockwave-flash”‘);
document.write(‘pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash”
/>’);
} else {
document.write(‘<a href=”http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash”
target=”_blank”><img src=”geenflash.gif” width=”400″ height=”300″ alt=”Geen
flash – Download flash player” />’);
};
//]]></script>

Wat gebuurt er in deze code met het script?
Zodra een bezoeker uw pagina bezoekt en heeft geen flashplayer voor zijn
browser, krijgt hij een image “geenflash.gif”  te zien, klikt hij nu op
deze image dan word hij verwezen naar de macromedia flashplayer voor zijn
browser.
U kunt bijvoorbeeld in deze image een tekst schrijven bijvoorbeeld: Om deze
pagina volledig te bekijken, heeft u een flashplayer nodig, klik hier om deze
player te downloaden!
Deze image kunt u ook kleiner of groter maken, verander dan de width=”400″ height=”300″
in de onderste regel.

Code in extern JavaScript (bestand.js):

<!– Begin

document.write (“<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″
codebase=”download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″
width=”400″ height=”300″ id=”intro”><param name=”allowScriptAccess”
value=”sameDomain” /><param name=”movie” value=”intro.swf” /><param
name=”quality” value=”high” /><param name=”bgcolor” value=”#ffffff” /><embed
src=”intro.swf” quality=high bgcolor=#ffffff width=400 height=300 name=intro
TYPE=”application/x-shockwave-flash” PLUGINSPAGE=”www.macromedia.com/shockwave/download/index.cgi?P1
_Prod_Version=ShockwaveFlash</a>” /></object>”)

// Einde –>

Als u gebruik maakt van de externe JavaScript (bestand.js) vermeld dan wel in uw pagina tussen de <head> en de </head> de volgende regel:
<script type="text/javascript" src="bestand.js"></script>

Gebruik maken van (application/x-shockwave-flash):

Als eerste maken we een flash movie en plaatsen de volgende aktie op het eerste frame _root.loadmovie("movie.swf", 0); we saven deze movie nu als c.swf en doen hem tevens publisheren.

Code (X)HTML met shockwave:

<object type="application/x-shockwave-flash”
data="c.swf?path=intro.swf" width="400" height="300"
<param name="movie" value="c.swf?path=intro.swf" />
</object>”)

In de eerdere codes stond de volgende regel vermeld: objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
Deze wordt nu vervangen door: type="application/x-shockwave-flash"

Wat u nu nog als extra kunt vermelden in de code is dat zodra de browser geen shockwave wilt afspelen er een image wordt weergegeven met als inhoud (no flash). De code ziet er dan als volgt uit.

Code (X)HTML met shockwave en NoFlash Image:

<object type="application/x-shockwave-flash”
data="c.swf?path=intro.swf" width="400" height="300"
<param name="movie" value="c.swf?path=intro.swf" />
<img src="noflash.gif" width="400" height="300" als=" " />
</object>”)

Als u meer wilt weten over javascript en flash detection, bezoek dan eens de volgende pagina: deconcept

Is het geheel wat we hier aan codes vermelden niet duidelijk?
Dan kunt u ook zodra u een flash movie wilt publiseren gebruik maken van de standaard flash detection in Macromedia Flash 8. Zodra u de volgende instelling sellecteert FILE > PUBLISH SETTINGS of toets combinatie (CTRL+SHIFT+F12) en nu onder HTML aanvinken DETECT FLASH VERSION, zal er automaties in de html pagina een hele rits Javascripts worden geplaats die er voor zorgen dat er een flash detect wordt uitgevoerd voor dat uw movie wordt afgespeelt, tevens is uw pagina dan ook XHTML valid. Nadeel van deze optie is dat zelf geen overzicht meer heeft op de hele source code!

          Leuk als je dit artikel deelt:
Share

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *