Ha van vmi amit sikerül sokaknak a leggyakrabban elszúrni egy weblapkészítése során, az az oldalba beillesztendő flash tartalom kódja. Még mindig sokan használják az <embed> tagot (minden böngésző azonosítás nélkül), illetve a fantáziadús, de nemlétező paramétéreket értékkel, miegymással, rossz helyen, rossz időben. Az invalid kód pedig igencsak megnehezíti egy esetleges másik critical hiba feltárását (,hogy csak egy példát mondjak).

A helyzetet bonyolítja az Internet Explorer (és igen az új Opera is ilyen!) új frissítései során szembesülő aktivációs probléma is, ekkor ugyanis minden hagyományos úton beillesztett flash csak egy plusz kattintás során lesz elérhető és aktív.
Ez különösen zavaró lehet pl. egy menüsornál vagy egy bannernál vagy akárminél. Viszont van rá gyógyszer(ami ráadásul elég régóta létezik), amit most megvizsgálunk közelebbről.

A dolog lényege a következő: egy javascript segítségével, illesztjük be az oldalunkon használni kívánt tartalmat és ez a script gondoskodik majd róla, hogy a böngésző megkapja az ehhez szükséges adatokat. Magát a script-et amit használni kívánunk úgy hívják hogy SWFobject (régebben FLASHobject volt a neve) és a linkre kattintva bejön a hivatalos oldala, eme írás ennek egy rövidített, javított, magyarul beszélő kivonata lesz.

Maga a használat egyszerű:

  1. töltsük le az oldalon található scriptet
  2. illeszzük be az oldalunkra – javasolt a head részbe
  3. a kívánt helyre – ahová a flash tartalmat szeretnénk elhelyezni – készítsünk egy div-es containert
  4. majd alá a illesszünk be alá egy pár sorból álló javascriptet – itt töltjük ki az átadni kívánt paramétereket

Javascript nélkül valahogy így tennénk be az oldalra az swf-ünket:

<object type="application/x-shockwave-flash" id="mymovie" data="mymovie.swf?variable1=value1true" width="400" height="300">
<param name="movie" value="mymovie.swf?variable1=value1" />
<param name="quality" value="best" />
<param name="wmode" value="transparent" />
A tartalom megtekintéséhez flashplayer szükséges / Nem elérhető a tartalom
</object>

Mivel nem árt tudni, milyen paramétereket kell/lehet megadnunk, akkor nézzük is meg mit ír erről a flash dokumentáció – az Adobe honlapján.

Szóval nagyjából így valid, így helyes, de sajnos ott van az a fránya Explorer és az aktivációs probléma. Most akkor nézzük, hogy megy ez az SWFObject-tel:

(ezt betesszük egyszer a forrás tetjére (<head> </head> közé).
<script type="text/javascript" src="swfobject.js"></script>

majd a lapon belül ahol szeretnénk a flasht betenni:

<div id="flashcontent">
Ennek a szövegnek a helyére fog kerülni a flash tartalom. Az előző példából kiindulva: A tartalom megtekintéséhez flashplayer szükséges / Nem elérhető a tartalom.
</div>

majd a szkript ami kitölti:
<script type="text/javascript">
var so = new SWFObject("mymovie.swf?variable1=value1", "mymovie", "200", "100", "7", "#336699");
so.addParam("quality", "best");
so.addParam("wmode", "transparent");
so.addParam("salign", "t");
so.write("flashcontent");
</script>

És ennyi. Na most jöjön pár magyarázat ill. felmerülő kérdés:

  1. Mivan ha több flash is van az oldalunkon? Semmi gond: a lényeg, hogy az adott dives container id-je ugyanaz legyen mint a so.write sor paramétere. Ne legyen két egyforma azonosítójú div az oldalon.
  2. A szkript első sorában definiáljuk az objektumot, a paraméterek sorrendben a következők:
    • forrásnév(swf),
    • ID (azonostás pl swfliveconnect esetén ill. más kommunikációs mókák esetén),
    • szélesség,
    • magasság,
    • verzó – milyen player jó hozzá (a script detektál is és ha nem egyezik updatért sír!,
    • háttérszín.
    • Lehetnek még más speckó paraméterek is – erről az oldalon olvashattok, de alapba ennyi elég.
  3. A so.addParam részből lehet több is, értékei (2) a param tagoknak értékeinek (name, value) felelnek meg, ebből annyit használsz amennyire egyébként szükséged van.
  4. Páran biztos nem értik miért ilyen ronda a forrás név (mymovie.swf?variable1=value1) nos ez csak egy példa miként lehet flashváltozónak értéket átadni (erre alapban van ám az Adobe-nak egy flashvars nevű paramétere amit az object tagban használni lehet. A script biztosít egyébként erre egy külön lehetőséget, a fenti példából kiindulva használhatjuk a so.addVariable(“variable1″, “value1″); ekkor forrásként elég a mymovie.swf. (Természetesen működik a so.addParam(“flashvars”, “variable1=value1″); megoldás is.)
  5. A detektálásra van egy kellemes példa van a letöltött script csomagban, amennyiben jelezni szeretnénk milyen verzió számú player van a felhasználó gépén a kevetkező sort illesszük be a szöveges javascriptbe:
    var version = deconcept.SWFObjectUtil.getPlayerVersion();
    if (document.getElementById && (version['major'] > 0)) {
    document.getElementById('flashcontent').innerHTML = "Jelenleg a következő verzió számú Flash lejátszó van a gépedre telepítve: "+ version['major'] +"."+ version['minor'] +"."+ version['rev'] +" <a href =\"http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash&promoid=BIOW\" >Kattints ide a legfrissebb letöltéséhez...</a>";
    }

Végezetül pedig mintának és kezdőknek pedig javaslom http://www.kirupa.com/developer/flash8/flash_fix.htm oldalát ahol egy egyszerű bannerhoz beillesztendő kódot megkaphatjuk az űrlap kitöltésével.

Itt pedig egy példa a Yourube clip beillesztésére: SWFOBJECT: Youtube test

Update: Csináltam egy verziót a javascriptből, ami most már mindenképpen valid kódot tol be, Win és Maci alatt minden modernebb és frissebb böngésző alatt szaladt – bonyolultabb feladatoknál, mondjuk azért nem vállalnék rá garanciát, hogy minden rendben, de az átlag felhasználás mellet sztem ez így használható. A fent bemutatott “SWFOBJECT: Youtube test” is már ezt használja.

Popularity: 5% [?]