SWFObject

En aquest article no em pararé a comentar sobre la conveniència o no de fer webs íntegrament amb Flash. És cert que per segons quin tipus de producte el client és força escèptic amb el seu ús, ja que el refusa o com a molt accepta tenir una capçalera, un bàner o algun detall fet amb Flash. I per a d’altres trobo que és un mitjà la mar de vàlid.

Anem al tema.

Moltes pàgines web tenen elements Flash. De sempre molts clients s’han preguntat què apareix quan els visitants no tenen el plugin de Flash instal·lat al seu navegador. Un altre problema és que hi ha navegadors que, endurint alguns aspectes de la seguretat, boquegen alguns components (p.e. ActiveX) que poden donar algun problema amb la visualització de continguts Flash. I el darrer problema és que el codi HTML utilitzat per defecte per incorporar pel·lícules Flash (concretament l’etiqueta embed) no validen segons les especificacions d’HTML o XHTML de la World Wide Web Consortium.

I finalment, per qüestions legals sobre patents i plugins, les darreres versions d’Internet Explorer estan donant certs problemes amb la càrrega de pel·lícules Flash.

Per resoldre aquests problemes, el senyor Geoff Stearns va trobar una solució anomenada SWFObject, un javascript que detecta el plugin de Flash i el carrega dins una layer al codi HTML. A més a més, el codi resultant és vàlid per la W3C. Fantàstic, oi?

Com utilitzar SWFObject:

És lliure i és de franc. Cal descarregar SWFObject, anomenat flashobject.js, i copiar-lo al directori del web.

Per importar flashobject.js a la nostra pàgina web cal afegir això dins del Head:

<script type=”text/javascript” xsrc=”swfobject.js” mce_src=”swfobject.js” ></script>

Un cop fet això, i ja dins el body de la pàgina, creem aquesta capa:

<div id=”flashcontent”>Aquest text es canvia per una descripció acurada de la pel·lícula o contingut del Flash</div>

Es pot posar text o el que es vulgui dins d’aquesta capa “flashcontent”. Aquesta capa serà on se situarà la pel·lícula Flash. Però el fet de posar-hi text a dins farà que els motors de cerca puguin indexar el que hi trobin, per això s’ha de posar una bona descripció amb el màxim de paraules clau possibles.

Tot just després de la capa “flashcontent” hem d’enganxar aquest script:

<script type=”text/javascript”>var so = new SWFObject(“movie.swf”, “mymovie”, “500″, “100″, “6″, “#003399″); so.write(“flashcontent”); </script>

Aquest script és el que passa els paràmetres principals dins la capa “flashcontent” i fa que SWFObject pugui mostrar la pel·lícula. Aquests són els elements que trobem dins l’script que us he copiat abans:

• movie.swf = el nom de la pel·lícula Flash)
• mymovie = vindria a ser com la etiqueta “Alt” o “title”)
• 500 = amplada de la pel·lícula Flash)
• 100 = alçada de la pel·lícula Flash)
• 6 = la versió del plugin que s’exigeix)
• #003399 = el color de fons)
• so.write(“flashcontent”); = canvia “flashcontent” pel nom del div ID, si l’has canviat

Buscant per Internet es poden trobar més atributs per incorporar dins l’script, com per exemple fer que tingui fons transparent, etc.

Aquest és el bloc d’en Geoff Stearns, i s’hi pot trobar tota aquesta informació de primera mà, això sí, en anglès