Analóg óra készítése Photoshop és Flash segítségével, SWFObject rész

Írta: | 2011. július 02. | kategóriák: (X)HTML, JavaScript

Az előző részekben létrehoztunk egy analóg órát Photoshop segítségével, a mutatókat „elindítottuk” ActionScript-el. A mostani részben Javascript kódot használva beágyazzuk a HTML kódba.

III. rész SWFObject

Az SWFObject – mostantól csak so – egy nyílt forrású Javascript könyvtár, amit a Flash tartalmak gyors és egyszerű beágyazására használhatsz a weblapodon. Nem kell az <object> vagy az <embed> tag-ekkel bajlódni – ez utóbbi nem is standard! A böngészők közti különbségről nem is beszélve, ezért hát elég macerás olyan kódot írni, ami a főbb böngészőkben megfelelően működik. Hogy ezzel ne kelljen szórakozni, segítségül hívjuk a so objektumot. A so csak egy pár sor adatot kér, a többit majd ő intézi (böngésző és Flash player detektálás stb.).

Ez a gyakorlatban úgy néz ki, hogy el kell helyezned egy tárolót (container) a HTML kódod azon pontján ahová a Flash tartalmat meg szeretnéd jeleníteni, majd ebbe a tárolóba fogja a so a megfelelő kódot helyezni.
A tárolónak – ami egy <div> elem lesz – kell adnod egy azonosítót (id), ez alapján tudja a so, hogy ez lesz a Flash tartalom helye.

<div id="ora_helye"></div>

Ahhoz, hogy a so objektumot használni is tudjuk, létre kell hoznunk! Az SWFObject argumentum listája:

var so = new SWFObject(swf, id, width, height, version, background-color [, quality, xiRedirectUrl, redirectUrl, detectKey]);

Ebből a szép listából csak az első 6 paraméter a kötelező, a többi opcionális – bővebben a fentebb linkelt oldalon.

  • swf – Ez lesz maga a Flash mozi
  • id – Ezt az értéket kapja az embed és object tag. A mi esetünkben most lényegtelen, bármi lehet.
  • width – A mozi szélessége
  • height – A mozi magassága
  • version – A szükséges player verzió. Például “10”
  • background-color – A Flash mozi háttér színét lehet vele megadni

Tehát az objektum létrehozása így fog kinézni:

var so = new SWFObject("AnalogClock.swf", "flash", "300", "300", "10", "#FFFFFF");

Megadhatunk különböző paramétereket is az <object> és <ebmed> tag-eknek. Ezeknek a listáját az Adobe oldalán megtalálod. Én most csak a quality (minőség) értékét adom meg.

so.addParam("quality","high");

Végül az utolsó sor, ami beágyazza a mozinkat a megadott tárolóba:

so.write("ora_helye");

Egy teljese HTML kód a teszteléshez.

< !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>
    <title>SWFObject</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
     <script src="./js/swfobject.js"></script>
  </head>
  <body>
    <h2>Flash óra</h2>
    <div id="ora_helye"></div>
    <script>
      var so = new SWFObject("./swf/AnalogClock.swf", 'flash', '300','300','10', '#FFFFFF');
      so.addParam("quality","high");
      so.write("ora_helye");
    </script>
  </body>
</html>


Értékeld a bejegyzést!

Loading ... Loading ...

A bejegyzésre érkező kommenteket elérheted RSS 2.0 formájában vagy emailben is:

A bejegyzéshez tartozó trackback cím, illetve a permalink.

A megjegyzéseket kérlek, tedd fel érthető és illendő módon, ne fikázz le másokat, mert nem tudnak valamit, amit te már igen. A kommentár lehetőleg függjön a bejegyzéshez :)

kötelező
kötelező, titok marad
ha nincs, maradjon üres