Tällä sivulla käsitellään suositusten mukaista tapaa liittää Flash-sisältöä Web-sivuille. Pyrkimyksenä on mahdollisimman yksinkertainen, kattava ja esteetön toteutus. Luonnollisesti koodin tulee olla validia. Esimerkkien koodi on XHTML-syntaksin mukaista.
Monimutkaisempaa Flash-objektien upotusta käsitellään muualla.
Käytämme koodimme perustana OBJECT-elementtiä, joka nimensä mukaisesti on suunniteltu kaikenlaisten objektien upotukseen. Flash-objektin yhteydessä elementti tarvitsee neljä attribuuttia:
type - Minkä tyyppisestä tiedostosta on kyse? Esimerkisämme tietenkin Shockwave Flash -tiedostotyypistä.data - Mistä objektitiedosto löytyy? Esimerkisämme absoluuttisena viittauksena Flash-tiedostoon.width - Paljon varataan leveyttä objektille? Esimerkissämme kuvapistemääränä.height - Paljon varataan korkeutta objektille? Esimerkissämme kuvapistemääränä.Edellinen näyttää koodina seuraavalta:
<object
type="application/x-shockwave-flash"
data="http://weppipakki.com/html/misc/flash.swf"
width="300"
height="200">
</object>
Ihaanteellisessa maailmassa asia olisi siinä. Kaikki eivät kuitenkaan kykene hyödyntämään koodiamme, joten on vielä kiinnitettävä huomiota ainakin vähintään kahteen seikkaan, eli yhteensopivuuteen ja saavutettavuuteen.
Yhteensopivuustekijät johtuvat asiakasohjelmien puutteista. Edistyneimmät selaimet ymmärtävät yllä esitetyn koodimme vaikeuksitta, mutta vanhempaan arkkitehtuuriin perustuvat Internet Explorer -selaimet (kirjoitusajankohtana IE-versiot 6 ja sitä pienemmät) eivät. Tämä johtuu puutteellisesta data-attribuutin tuesta, joka onneksi voidaan paikata PARAM-elementillä, joka tulee sijoittaa OBJECT-elementin ensimmäiseksi lapsielementiksi:
<object
type="application/x-shockwave-flash"
data="http://weppipakki.com/html/misc/flash.swf"
width="300"
height="200">
<param
name="movie"
value="http://weppipakki.com/html/misc/flash.swf" />
</object>
Näin PARAM-elementin nimi/arvo-attribuuttiparin avulla selaimista johtuvat yhteensopivuustekijät on saatettu niin kuntoon kuin yleensä mahdollista.
Saavutettavuus tai esteettömyys koskee tiedon perillemenoa myös tilanteissa, joissa Flash-tukea ei syystä tai toisesta löydy. Saavutettavuustekijät saatetaan kuntoon antamalla Flash-objektille vaihtoehtoinen sisältö, joka sijoitetaan -elementin sisälle (PARAM-elementin jälkeen). Mistä tämä vaihtoehtoinen sisältö sitten koostuu riippuu itse alkuperäisestä objektista ja sen tehtävästä. Aihe on tämän kirjoituksen ulkopuolella, mutta asiaa kannattaa pohtia, vaikkapa verkkosisällön saavutettavuusohjeisiin peilaten.
Teknisesti ajatellen OBJECT-elementti huolii sisällökseen vaikka mitä elementtejä, mutta toista objektia ei kannatta edes harkita, edellä mainitun asiakasohjelman puutteista johtuen. Tässä yksinkertaisesti ja varsin vaatimattomasti sijoitamme varmistukseksi linkin itse Flash-objektiin, jolloin koodimme on kokonaisuudessaan seuraavanlainen
<object
type="application/x-shockwave-flash"
data="http://weppipakki.com/html/misc/flash.swf"
width="300"
height="200">
<param
name="movie"
value="http://weppipakki.com/html/misc/flash.swf" />
<a
href="http://weppipakki.com/html/misc/flash.swf">Lataa
Flash-kikkare!</a>
</object>
Voit tarkastaa koodin toimivuuden upotetun Flash-objektin (65k) testisivulla.