Siirtyminen salamasta html5: ään

Marraskuussa 2011 Adobe ilmoitti lopettavansa mobiililaitteille suunnatun Flash Playerin kehittämisen sen jälkeen, kun Android-laitteille tarkoitettu Flash Player 11.1 ja BlackBerry Playbook on julkaistu, ja keskittynyt sen sijaan työkaluihin HTML5-sovellusten rakentamiseksi mobiililaitteille. Vaikka Adobe toisti tukensa Flash Playerille henkilökohtaisille tietokoneiden selaimille, monien mielestä on vain ajan kysymys, ennen kuin Adobe lopettaa myös PC-version tuen. Tämä on huono uutinen yrityksille, jotka ovat investoineet voimakkaasti Flash-sovelluksiin, sekä kehittäjille, jotka ovat investoineet aikaa Flash-sovellusten rakentamiseen tarvittavien ohjelmointitaitojen hankkimiseen.

Tarkastellaan joitain Flashin ja HTML5: n eroja ja annetaan vinkkejä ja työkaluja, jotka helpottavat siirtymistä näiden kahden alustan välillä.

Flash-alustan perusteet

Flashia käytetään usein kattoterminä viitaten omaan Adobe-alustaan, joka todella koostuu seuraavista komponenteista:

• Flash: Työkalu, jota käytetään ensisijaisesti animaatioiden suunnitteluun ja luomiseen
• Flex: Sovellusten rakentamiseen käytetty kehitysympäristö, mukaan lukien ohjelmistokehityspaketti (SDK)
• MXML: Flash-projekteissa käytetty merkintäkieli
• ActionScript: Komentosarjakieli

Flash-sovelluksen käyttämiseksi verkkoselaimessa Flash Player -laajennus on ladattava. Vaihtoehtoisesti Flash-sovellus voidaan kääntää toimimaan Adobe AIR -työpöytäajon ympäristössä. Jälleen kerran Adobe AIR on asennettava käyttäjän tietokoneeseen, jotta AIR-sovellus voi toimia.

Flash käyttää seuraavia päätiedostomuotoja:

• .fla: Flash-projektitiedosto
• .flv: Flash-videotiedosto
• .swf: Käännetty Flash / Flex-sovellustiedosto, joka voi sisältää .flv-tiedostoja

HTML5-alustan perusteet

HTML5 on avoin vakioalusta, joka koostuu seuraavista:

• HTML5: Web-sivujen luomiseen käytetty merkintäkieli
• Cascading Style Sheets 3 (CSS3): Tyylisivun kieli, jota käytetään HTML5-verkkosivun objektien muotoilun määrittämiseen
• Sovellusohjelmointirajapinnat (API): Sovellusliittymät, jotka tukevat ominaisuuksia, kuten vetämällä ja pudottamalla ja ristikkäisiä asiakirjoja
• JavaScript: HTML5: ssä käytetty komentosarjakieli animaation sallimiseksi

Yksi HTML5: n eduista on, että se toimii web-selaimissa natiivisti eikä vaadi laajennusta. Selaimen on kuitenkin toimittava oikein HTML5- ja CSS3-ominaisuuksien tukemiseksi HTML5-verkkosivulle. Suurimmissa selaimissa on HTML5- ja CSS3-tuki eri tasoilla, ja käyttöönotto ei ole valmis. Selaimet tukevat JavaScriptiä lähes yleisesti; käyttäjillä on kuitenkin mahdollisuus “poistaa” JavaScripti käytöstä, jolloin JavaScriptillä luodut asiakaspuolen skriptit eivät toimi.

HTML5-tiedostomuodot sisältävät seuraavat:

• .htm / .html: HTML5-verkkosivutiedosto
• .css: CSS3-tyylisivutiedosto

Vuodesta 2011 lähtien nykyisessä HTML5-määrityksessä ei määritetä tuettuja videotiedostomuotoja, joten yksittäisten selainten on itse valittava tuettavat muodot. Nykyiset tuetut muodot sisältävät seuraavat:

• .mp4: MPEG 4-videotiedosto, jossa on H.264-videokoodekki ja AAC-audiokoodekki
• .webm: WebM-videotiedosto, jossa on VP8-videokoodekki ja Vorbis-audiokoodekki
• .ogg: Ogg-videotiedosto, jossa Theora-videokoodekki ja Vorbis-audiokoodekki

Flash-projektien muuntaminen HTML5: ksi

Monimutkaisen Flash-projektin manuaalinen muuntaminen HTML5: ksi on työvoimavaltainen ja aikaa vievä prosessi käyttöympäristöeroista johtuen. Kehittäjän on muunnettava Flashilla ja ActionScriptillä luodut animaatiot HTML5: ksi ja JavaScriptinä. Onneksi on olemassa muutamia työkaluja, jotka auttavat automatisoimaan muuntamisen Flashista HTML5: ksi.

Adobe on julkaissut kokeellisen työkalun Wallaby, jonka voi ladata ilmaiseksi Adobe Labs -sivustolta. Wallaby ottaa Flash-projektitiedoston (.fla) syötteenä ja vie HTML5: tä sekä CSS- ja JavaScript-tiedostoja tukevia. Wallaby-julkaisutiedot sisältävät kuitenkin melko pitkän luettelon ominaisuuksista, joita ei muuteta - joista tärkeimmät ovat ActionScript, elokuvat ja ääni. Wallaby on rajoitettu työkalu, joka on ensisijaisesti suunniteltu muuntelemaan animoitu graafinen sisältö HTML5-muotoon, jotta se voidaan integroida verkkosivuille verkkosivujen suunnittelutyökalun avulla.

Google Labs on julkaissut ilmaisen web-pohjaisen työkalun Swiffy, joka muuntaa käännetyn Flash-sovellustiedoston (.swf) HTML5: ksi. Tuotos voidaan sitten upottaa verkkosivulle, mutta kehittäjän ei ole helppoa muokata. Kuten Wallaby, Swiffy ei muunna kaikkia Flash-ominaisuuksia. Swiffy tukee ActionScript-muuntamista, mutta vain versiota 2.0 (ActionScript on tällä hetkellä versiossa 3.0). Swiffy-lähtö toimii vain selaimissa, jotka tukevat skaalautuvaa vektorigrafiikkaa (SVG).

Edge, uusi HTML5: n kehitystyökalu

Kun HTML5: stä tulee valittu alusta, uusia työkaluja syntyy tarjoamaan suunnittelu- ja kehitysympäristöjä, joissa integroidaan HTML5, CSS3 ja JavaScript.

Adobe julkaisi elokuussa 2011 esikatselun version Edge-kehitystyökalusta. Edge antaa suunnittelijalle luoda HTML5-animaatioita ja lisätä animaatioita olemassa oleviin HTML5-projekteihin. Flash-suunnittelijat tunnistavat joitain tuttuja elementtejä Edge-käyttöliittymässä, mukaan lukien vaihe, ominaisuusikkuna ja animaation aikajana. Edge kuitenkin luo CSS- ja JavaScript-tiedostoja, ja sen animaatiosisältö on tallennettu JSON (JavaScript Object Notation) -rakenteeseen.

Tätä kirjoitettaessa Edge odotti sen neljättä esikatselujulkaisua. Jokaiseen julkaisuun lisätään uusia ominaisuuksia.

YouTubeen muuntaminen HTML5: ksi

Yksi merkki siirtymisestä HTML5: ään on, että YouTube tarjoaa nyt mahdollisuuden käyttää HTML5-videotoistinta videoiden katselemiseen.

Ennen HTML5-vaihtoehdon tarjoamista kaikki YouTube-videot toimitettiin Flash-videosoittimen kautta. Käyttäjät voivat ladata videotiedostoja melkein missä tahansa muodossa, ja YouTube muuntaa sitten jokaisen videon vaadittuun Flash (.flv) -muotoon.

YouTube koodaa nyt videoita myös H.264-videokoodekilla ja WebM-muodolla HTML5-toimitusta varten. Jos haluat katsella videoita HTML5-muodossa, sinulla on oltava selain, joka tukee HTML5-videotunnistetta ja YouTuben käyttämää videomuotoa.

Salaman perintö

Kuten aiemmin todettiin, Adobe jatkaa Flash Playerin PC-version kehittämistä - toistaiseksi. Vaikka Adobe lopettaa Flash Playerin tukemisen tulevaisuudessa, vanhoja Flash-sovelluksia tuetaan edelleen verkossa - todennäköisesti vuosia. Joten, Flash ei poistu kokonaan milloin tahansa pian. Työkaluja on saatavana Flash-sovellusten muuntamiseksi HTML5-sovelluksiksi, mutta tällä hetkellä nämä työkalut eivät tue kaikkien Flash-ominaisuuksien muuntamista. Kun HTML5-standardi tulee hallitsevaksi, on todennäköistä, että Flash-tiedostojen muuntamistyökalut muuttuvat hienostuneemmiksi ja luodaan uusia työkaluja sisällön kehittämiseen HTML5-alustalla.