SWFobject – valid, és aktiváció mentes flash tartalom

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:

1
2
3
4
5
6

<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é).

1

<script type="text/javascript" src="swfobject.js"></script>

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

1
2
3

<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:

1
2
3
4
5
6
7

<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:

1
2
3
4

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 Yourtube clip beillesztésére: SWFOBJECT: Yourtube 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: Yourtube test” is már ezt használja.

Írta: tomsolo
Forrás: http://www.cloneshit.hu/2006/07/09/swfobject-valid-es-aktivacio-mentes-flash-tartalom

Tutorial.hu Szerkesztőség
Tutorial.hu Szerkesztőség
http://3276.hu

KAPCSOLÓDÓ CIKKEKTÖBB A SZERZŐTŐL

12 HOZZÁSZÓLÁS

  3. …csak szólnék hogy ez a leírás/megoldás már sajna eléggé outdated, illetve ha konkrétan ezt ezt használod akkor ie alatt egy csomó hiba előjöhet hála a magasszintű DOM kezelésének. (pl Operation cancelled stb)

    Közbe volt verzióváltás a fent említett pluginnál de amellet hogy – nekem rohadtul nem szimpi módon változott meg az api, úgyanúgy hajlamaos bugzani.

    Jelenleg nekem jquery alatt a jquery media plugin jön be ezt kb úgyanúgy kell használni mint fennt. Sajna jqueryt nem éppen tanácsos scriptoalous alatt használni szal a wp-sek meg keressenek rá hogy ahhoz a library hoz éppen mi van (mert van) ami hasonlyt a legjobban az swfobjectre.

    ts

  5. Nekem ez a kód nem reagál semmit hiába írom be csak a szöveg jelenik meg a linkből a javascript mintha nem csinálna semmit, a firebug azt írja swfobject is not defined.. nemmegy így sem és azzal a generátor progival sem, flash 8ról van szó ötlet?

  7. nekem az lenne a bajom hogy beillesztem csak nem nyitja meg és egyépként nekem nem js hanem kla kiterjeszésű filem van de nem jó segítségek kérnék

  8. ]_PSG_[ | INTRO by ]_PSG_[MaTe

    egyépként ez a kód volna az ha valaki tudná akkor kijavítaná vagy segítene benne???? pls

  12. Üdv,
    nagyon kezdő vagyok és ezért kérem a segítségeteket.
    Van egy flash alapú weboldal, különféle swf. file-okkal. Azt szeretném megoldani, hogy a menüben lévő about-ra kattintva előjöjjön egy másik swf objektum és ne kelljen másik lapra átmennem. Jelenleg a próbavezióban úgy oldottam meg, hogy news-rákattint és kinyilik egy másik ablakban az, amit szeretnék a lapok közt látni és nem külön.
    A gond az, hogy az about is egy swf-re épül. Azzal a megoldással is elégedett lennék, ha valahogy betudnám szúrni a lapra a teljes news tartalmat, anélkül, hogy elnavigálnék máshova.
    Ez itt az about most:
    

    1

    Brave - the way to success

    És itt a gyártó által küldött kód, amit be kellene paszíroznom, de nem műkődik:

    1
2
3
4
5
6
7
8
9
10
11

     
 
 var flashvars = {};
 var params = {};
 params.base = "";
 params.scale = "noscale";
 params.salign = "tl";
 params.wmode = "transparent";
 params.allowFullScreen = "true";
 params.allowScriptAccess = "always";
 swfobject.embedSWF("AccordionNewsReaderFX.swf", "DivAccordionNewsReaderFX", "600", "380", "9.0.0", false, flashvars, params);

    Nagyon köszönöm

HOZZÁSZÓLOK A CIKKHEZ

Kérjük, írja be véleményét!
írja be ide nevét