Tsekkaa myös 30 Scripts For Galleries, Slideshows and Lightboxes

• Breadcrumb tulostetaan topvan-elementtiin. Elementin voi muokata CSS:llä halutun laiseksi.
• Scripti nimeää kotisivun nimellä “home”. Tämä on mahdollista kuitenkin muuttaa.
• Scripti olettaa, että kotisivu (home) sijaitsee palvelimen juuressa.
• Jokaisessa kansiossa täytyy olla index.htm- tiedosto (tai vastaava)
• Ei toimi freimien kanssa

PS. Mikä on suomalainen vastike sanalle “breadcrumb“?

Sen sijaan SWFFix project pyrkii korvaamaan SWFObjectin embed-standardina. Adobe ei ollut kovin innostunut projektin nimestä, koska se antaa ymmärtää, että SWF-formaatti on jotenkin rikki . No nimihän päätettiin sitten vaihtaa uuteen ja tämän kuun alusta se ristittiin omaperäisesti nimellä SWFObject.

SWFFix on julkaissut SWFObjectista uuden version 2.0 beta 1 ja sen voi ladata täältä.

• Laajemmat ohjeet (suomeksi)

Express Install

SWFObject sisältää täyden tuen Adoben Flash Player Express Install- ominaisuudelle. Tämä tarkoittaa käytännössä sitä, että sivulla kävijän ei tarvitse poistua sivulta voidakseen päivittää Flash Playerin.

Käyttääksesi Express Install-ominaisuutta, sinun tulee ladata expressinstall.swf (tiedosto mukana .zipissä) palvelimellesi ja käyttää useExpressInstall-metodia määrittääksesi oikean tiedostopolun. Jos polkua ei määritellä, SWFObject etsii tiedostoa samasta kansiosta, jossa itse HTML-tiedosto sijaitsee.

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.write("flashcontent");
</script>

Jos haluat testata ExpressInstall:n toimintaa, asenna koneellesi FP7 (tai 6.0.65) ja vieraile täällä.

Jos haluat muokata Express Installin toimintaa, lähdekoodi (FLA) on sisällytetty mukaan pakettiin.
Jos Flash esityksesi aukeaa popupiin, tai haluat ohjata käyttäjän eri osoitteeseen Express Install- päivityksen jälkeen, voit käyttää xiRedirectUrl attribuuttia.

<script type="text/javascript">
var so = new SWFObject("movie.swf", "mymovie", "200", "100", "8", "#336699");
so.useExpressInstall('expressinstall.swf');
so.setAttribute('xiRedirectUrl', 'http://www.example.com/upgradefinished.html'); // must be the absolute URL to your site
so.write("flashcontent");
</script>

Tutustu uusiin ominaisuuksiin deconceptin sivuilla.

• SWFObject 1.3 Released [en]
• SWFObject suomeksi

Eli, jos suunnittelet naulitsevasi elementin sivulle käyttäen fixed:ä, tarvitset avuksi jotain kättä pidempää. Tässä tapauksessa “kättä pidempää” tarjoaa Andrew Clover (doxdesk [en]).

Tarvittavan javascriptin voit ladata doxdeskin sivulta:

fixed.js

Lataat vain skriptin palvelimelle ja lisäät linkin sivulle.

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

• getURL()
• Popupin avaaminen Flashista

getURL()

Kun käytät getURL():a esityksessäsi kutsumaan JavaScript-funktiota HTML-sivulla, jonne Flash-esityksesi on embeddattu, voit käyttää seuraavaa syntaksia:

_root.getURL("javascript:funktioNimi([parametrit])");

Esimerkiksi:

_root.getURL("javascript:alert('Tämä on varoitus')");

Popupin avaaminen Flashista

Popupin avaaminen Fashista aivan samalla tavalla kuin jo edellä mainittiin. HTML-sivulle kirjoitetaan seuraava skripti.

<script type="text/javascript"><!--mce:0--></script>

Fashista voit siis kutsua openwin- funktiota seuraavasti:

_root.getURL("javascript:openwin('polku/tiedosto.html', 'ikkunannimi', 'width=760, height=420')";

Download SWFObject

SWFObject on pieni JavaScript- tiedosto, jonka avulla flashesitys lisätään sivulle. Skripti osaa tunnistaa Flash- laajennuksen kaikissa käytetyimmissä selaimissa (Mac ja PC) ja se on suunniteltu helpottamaan Flash- esitysten lisäämistä sivuille. SWFObject on myös “hakukoneystävällinen”, sitä voidaan käyttää valideissa HTML- ja XHTML 1.0 dokumenteissa ja on eteenpäinyhteensopiva.

Sisältö:

• Miten se toimii
• Lisätietoa
• Miksi se on parempi kuin muut

Miten se toimii

Käyttö on varsin helppoa. Sivulle sisällytetään “swfobject.js”- javascripttiedosto ja lisätään pieni embeddauskoodi itse flashia varten. Tässä esimerkki koodista, joka tarvitaan lisäämään esitys sivulle.

<script src="swfobject.js" type="text/javascript"><!--mce:0--></script>
<div id="flashcontent">
Tämä teksti korvataan flash-esityksellä</div>
<script type="text/javascript"><!--mce:1--></script>

Tässä selvitys skriptin toiminnasta

<div id="flashcontent">[...]</div>

Alustetaan HTML- elementti, joka tulee sisältämään flash- esityksen. Sisältö, joka kirjoitetaan tähän elementtiin, korvataan varsinaisella flash-esityksellä, joten käyttäjät, joiden koneilta löytyy tarvittava flash-plugin, eivät koskaan näe tätä sisältöä. Juuri tämä ominaisuus antaa hakukoneille mahdollisuuden indeksoida vaihtoehtoisen sisällön.

var fo = new SWFObject("movie.swf", "mymovie", "200", "100",  "#ffffff");

Luodaan uusi SWFObject ja syötetään tarvittavat parametrit:

• swf – tiedoston polku ja nimi
• id – embed- tagin ID
• leveys – esityksen leveys
• korkeus – esityksen korkeus
• versio – Vaadittava playerin versio. Esim. “7″ tai “6.0.65″
• taustaväri – esityksen taustaväri

Valinnaiset parametrit ovat:

• quality – esityksen laatu. Jos parametria ei anneta käytetään oletusarvoa “high“
• redirectUrl – Käyttäjät, joiden koneelta löytyy vanha pluginversio tai ei löydy pluginia ollenkaan, voidaan ohjata halutulle sivulle

fo.write("flashcontent");

Kommennetaan SWFObject- skriptiä kirjoittamaan sivulle (jos oikea fp- versio löytyy käyttäjän koneelta)

Lisätietoa

Kun rakennat sivustoa, jolla käytät SWFObjectia embeddaukseen, sinun tulisi aloittaa vaihtoehtoisen sisällön (ei Flash) suunnittelulla. Tee sivuistasi toimivat ilman flashia, ja lisää vasta sitten javascript. Näin varmistat, että hakukoneet indeksoivat vaihtoehtoisen sisällön, ja että kävijät joilla ei ole tarvittavaa player- versiota koneellaan, näkevät toimivan HTML- sivun. Jos näin käy, on hyvä ilmoittaa siitä kävijälle ja kertoa miten playerin päivitys tapahtuu. Toisaalta, jos vaihtoehtoinen sisältö riittää korvaamaan flash-esityksen, ei ilmoitus välttämättä ole tarpeellinen.

SWFObject tunnistaa fp:n mainituilla selaimilla versiosta 3 uusimpaan jos selain käyttää Netscapen pluginarkkitehtuuria (Firefox, Safari Opera, Netscape, Mozilla) ja versiosta 4 uusimpaan jos kyseessä on IE (Active X plugin).

SWFObjectin fp-tunnistin on myös mahdollista ohittaa. Jos tulevaisuudessa julkaistaan esim. uusi selain tai tunnistin jostain muusta syystä epäonnistuu tehtävässään, voit lisätä sivulle “ohitus“-linkin, joka hylkää tunnistimen ja korvaa vaihtoehtoisen sisällön flash-esityksellä. Linkki voisi olla seuraavanlainen:

<a href="mypage.html?detectflash=false">Tunnistuksen ohitus</a>

Miksi se on parempi kuin muut

Vuosien varrella on ollut monenlaisia metodeja fp:n tarkistukseen ja esitysten embeddaukseen HTML-sivulle. Seuraavassa katsaus suosituimpiin metodeihin ja niiden ongelmat.

1) Macromedian oletusembeddaus
Tämän varmasti kaikki tietävät. Se koostuu object-tagista sekä sen sisälle “varmistukseksi” kirjoitetusta embed-tagista. Tämä on suosistuin tapa sisällyttää esitys sivulle ja flash julkaisee esitykset oletuksena käyttäen juuri kyseistä metodia.

<object id="Untitled-1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="150" height="150" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="align" value="middle" /><param name="allowScriptAccess" value="sameDomain" /><param name="quality" value="high" /><param name="bgcolor" value="#ffffff" /><param name="src" value="mymovie.swf" /><param name="name" value="Untitled-1" /><embed id="Untitled-1" type="application/x-shockwave-flash" width="150" height="150" src="mymovie.swf" name="Untitled-1" bgcolor="#ffffff" quality="high" allowscriptaccess="sameDomain" align="middle"></embed></object>

Suosiostaan huolimatta, metodissa on seuraavat onglemat:

• Ei plugin- tunnistinta – Ilman tunnistinta kävijä saataa nähdä “rikkinäisen” sivun tai ei sivua ollenkaan. Jos pluginia ei ole koneella ollenkaan, kävijä saa IE:llä “ActiveX install”- valintaikkunan (moni käyttäjä vieroksuu tätä koska eivät välttämättä ymmärrä mistä on kyse) tai Mozillaan perustuvilla selaimilla “palapelin kuvan”. Kumpikaan systeemeistä ei ole kovinkaan käyttäjäystävällinen, eivätkä usein informoi käyttäjää selkeästi siitä, mitä oikein ollaan asentamassa ja miksi.
• Se ei ole validia (x)HTML:ää – embed- tagi ei kuulu validiin (x)HTML:ään.

2) Flash satay
Tämä metodi on nostanut hurjasti suosiotaan sen jälkeen kun artikkeli julkaistiin A List Apart:ssa vuonna 2002.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="400" height="300" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="c.swf?path=movie.swf" /><embed type="application/x-shockwave-flash" width="400" height="300" src="c.swf?path=movie.swf"></embed></object>

• Ei plugin- tunnistinta – Sama kuin yllä. Kun Flash Player kohtaa embeddaus koodin sivulla, se yrittää toistaa esityksen huolimatta siitä mikä versio koneelle on asennettu. Eli jos koneelta löytyvä versio on vanhempi kuin vaadittava versio, lopputulos ei välttämättä ole halutun lainen
• Jotkut Flash Satay- metodit eivät striimaa esitystä – Eli tämä metodi saataa vaatia “holder“-swf:n johon varsinainen esitys ladataan. Flash- esitysten ylläpito muuttuu hankalammaksi eikä FlashVarsienkaan käyttö tästä helpotu.
• Vanhemmat Safarin versiot jättävät <param>- tagit huomiotta – Versio 2.0 (Tiger) , 1.3 (Panther)

3) “Pieni Flash-tunnistin index- sivulla”- metodi
Perusideana on siis flash- esitys index- sivulla, jonka tarkoituksena on tarkistaa “$version“- muuttuja ja ohjata käyttjä sen mukaan oikealle sivulle. Metodissa on seuraavat ongelmat:

• Sisäsivuilla ei ole plugin- tarkistusta – Jos kävijä ei tule sivulle etusivun kautta, tunnistusta ei tehdä missään vaiheessa
• Sivuston hakukonelistaus kärsii – Koska etusivusi on nyt varattu tyhjälle flash-tunnistimelle, hakukoneen käyttäjät näkevät listauksen kuvauksessa vain tekstin “Tunnistetaan Pluginia” tai pahimmassa tapauksessa eivät mitään. Useissa tapauksissa sivujen tekijät eivät vaivaudu edes linkittämään etusivua sisältöön, koska linkki on jo tunnistimessa, eikä tällaisissa tapauksissa sisäsivujakaan indeksoida ollenkaan.

4)Macromedia Flash MX 2004 Detection Kit
Tämä metodi on kaikessa yksinkertaisuudessaan vain kauniisti paketoitu versio edellämainitusta ja kärsii siis täysin samoista epäkohdista.

5)Puolivalmiin (jalostamattoman) javascriptin käyttö tunnistukseen ja embeddaukseen
Metodia on vaikea kritisoida, koska se vaihtelee joka sivulla. Kuitenkin useimmista löytyy seuraavat onglemat:

• Epäluotettava plugin-tunnistus – Useimmiten tunnistus toimii halutulla tavalla vain kaikkein uusimpien Player- versioiden kanssa ja skripti pitää päivittä manuaalisesti aina kun uusi player julkaistaan.
• Lisää “turhaa” koodia sivulle – Luonnollisesti tämä hankaloittaa sivun ylläpitoa.

Download SWFObject