Prelazak s flash na html5

U studenom 2011. Adobe je objavio da će prekinuti razvoj svog Flash Player-a za mobilne uređaje nakon izdavanja Flash Player-a 11.1 za Android uređaje i BlackBerry Playbook, odlučivši se umjesto toga usredotočiti se na alate za izgradnju HTML5 aplikacija za mobilne uređaje. Iako je Adobe ponovio svoju podršku Flash Playeru za preglednike osobnih računala, mnogi misle da je samo pitanje vremena prije nego što i Adobe ukine podršku za PC verziju. Ovo je loša vijest za tvrtke koje uvelike ulažu u Flash aplikacije, kao i programere koji su uložili vrijeme u stjecanje programerskih vještina potrebnih za izradu Flash aplikacija.

Pogledajmo neke razlike između Flash-a i HTML5-a i pružimo nekoliko savjeta i alata koji će vam olakšati prijelaz između ove dvije platforme.

Osnove Flash platforme

Flash se često koristi kao krovni izraz za označavanje vlasničke Adobe platforme koja se zapravo sastoji od sljedećih komponenti:

• Flash: Alat koji se uglavnom koristi za oblikovanje i stvaranje animacija
• Fleks: razvojno okruženje koje se koristi za izradu aplikacija, uključujući razvojni paket softvera (SDK)
• MXML: Jezik za označavanje koji se koristi u Flash projektima
• ActionScript: skriptni jezik

Za pokretanje Flash aplikacije u web-pregledniku, mora se preuzeti dodatak Flash Player. Kao alternativa, može se sastaviti Flash program koji će se izvoditi u okruženju za vrijeme izvođenja Adobe AIR radne površine. Opet, na korisnikovom računalu mora biti instaliran Adobe AIR za pokretanje AIR aplikacije.

Flash koristi sljedeće glavne formate datoteka:

• .fla: Datoteka Flash projekta
• .flv: Flash video datoteka
• .swf: Sastavljena Flash / Flex aplikacijska datoteka koja može sadržavati .flv datoteke

Osnove platforme HTML5

HTML5 je otvorena standardna platforma koja se sastoji od sljedećeg:

• HTML5: jezik za označavanje koji se koristi za izradu web stranica
• Kaskadne tablice stila 3 (CSS3): jezik listova stila koji se koristi za određivanje oblikovanja objekata na web stranici HTML5
• Aplikacijska programska sučelja (API): API-ji za podršku značajki poput drag-and-drop i cross-document poruka
• JavaScript: jezik skripte koji se koristi s HTML5 za omogućavanje animacije

Jedna od prednosti HTML5 je ta što se on izvorno pokreće na web preglednicima i ne zahtijeva dodatak. Međutim, za ispravno pokretanje preglednik mora podržavati HTML5 i CSS3 značajke za HTML5 web stranicu. Glavni preglednici imaju različite razine podrške za HTML5 i CSS3, a implementacija nije potpuna. Preglednici gotovo univerzalno podržavaju JavaScript; Međutim, korisnici imaju mogućnost "isključiti" JavaScript, u ​​kojem se slučaju skripte na strani klijenta stvorene s JavaScript-om ne pokreću.

HTML5 formati datoteka uključuju sljedeće:

• .htm / .html: Datoteka HTML5 web stranica
• .css: Datoteka tablice sa CSS3 stilom

Od 2011. godine trenutna specifikacija HTML5 ne određuje podržane formate video datoteka, ostavljajući ih na pojedinim preglednicima da odaberu koje formate treba podržati. Trenutni podržani formati uključuju sljedeće:

• .mp4: MPEG 4 video datoteka s H.264 video kodekom i AAC audio kodekom
• .webm: WebM video datoteka s VP8 video kodekom i Vorbis audio kodekom
• .ogg: Ogg video datoteka s video kodekom Theora i Vorbis audio kodekom

Pretvaranje Flash projekata u HTML5

Ručno pretvaranje složenog Flash projekta u HTML5 dugotrajan je i dugotrajan proces, zbog razlika u platformi. Programer mora pretvoriti animacije stvorene Flash-om i ActionScript-om u HTML5 i JavaScript. Srećom, postoji nekoliko alata koji pomažu automatizirati pretvorbu iz Flasha u HTML5.

Adobe je objavio Wallaby, eksperimentalni alat koji se može besplatno preuzeti s web stranice Adobe Labs. Wallaby uzima datoteku projekta Flash (.fla) kao ulaz i izvoz HTML5 i podršku za CSS i JavaScript datoteke. No, napomene o izdanju Wallaby sadrže prilično dugačak popis značajki koje se ne pretvaraju - od kojih su najvažnije ActionScript, filmovi i zvuk. Wallaby je ograničeni alat koji je prvenstveno namijenjen pretvaranju animiranog grafičkog sadržaja u HTML5 tako da se on može integrirati u web stranice pomoću alata za dizajn web stranica.

Google Labs objavio je Swiffy, besplatni web-alat koji pretvara sastavljenu datoteku Flash aplikacije (.swf) u HTML5. Izlaz tada može biti ugrađen u web stranicu, ali programeru nije lako uređivati. Kao i Wallaby, Swiffy ne pretvara sve Flash značajke. Swiffy podržava ActionScript pretvorbu, ali samo inačicu 2.0 (ActionScript je trenutno u verziji 3.0). Swiffy izlaz radi samo na preglednicima koji podržavaju skalabilnu vektorsku grafiku (SVG).

Edge, novi alat za razvoj HTML5-a

Kako HTML5 postaje platforma izbora, pojavljuju se novi alati za pružanje okruženja za dizajn i razvoj koja integriraju HTML5, CSS3 i JavaScript.

Adobe je u kolovozu 2011. objavio verziju alata za razvoj Edgea. Edge omogućuje dizajneru da stvori HTML5 animacije i doda animacije postojećim HTML5 projektima. Dizajneri Flash prepoznat će neke poznate elemente u korisničkom sučelju Edge, uključujući pozornicu, prozor svojstava i vremensku liniju za animaciju. Edge, međutim, stvara CSS i JavaScript datoteke, a njegov animacijski sadržaj pohranjuje se u strukturu podataka JavaScript Object Notation (JSON).

U vrijeme pisanja ovog pisma Edge je očekivao četvrto izdanje pregleda. Svakom izdanju dodaju se nove značajke.

Pretvaranje YouTubea u HTML5

Jedan znak prelaska na HTML5 jest taj što YouTube sada nudi mogućnost korištenja HTML5 video playera za gledanje videozapisa.

Prije nego što je ponudio HTML5 opciju, svi YouTube videozapisi isporučeni su putem Flash video playera. Korisnici bi mogli prenijeti video datoteke u gotovo bilo kojem formatu, a YouTube bi zatim pretvorio svaki video u potrebni Flash (.flv) format.

YouTube sada također kodira video zapise s H.264 video kodekom i WebM formatom za isporuku HTML5. Da biste pogledali videozapise u HTML5 formatu, morate imati preglednik koji podržava HTML5 video oznaku i video format koji koristi YouTube.

Naslijeđe Flash-a

Kao što je ranije napomenuto, Adobe za sada nastavlja razvoj na PC verziji Flash Player-a. Čak i ako Adobe u budućnosti prestane podržavati Flash Player, naslijeđene Flash aplikacije i dalje će se podržavati na webu - vjerojatno još godinama. Dakle, Flash uskoro neće potpuno nestati. Dostupni su alati za pretvorbu Flash aplikacija u HTML5 programe, ali trenutno ovi alati ne podržavaju pretvorbu svih Flash značajki. Kako HTML5 postaje dominantan, vjerojatno će Flash alati za pretvorbu datoteka postati sofisticiraniji i stvorit će se novi alati za razvoj sadržaja s HTML5 platformom.