Verplaatsen van flash naar html5

In november 2011 kondigde Adobe aan dat het de ontwikkeling van zijn Flash Player voor mobiele apparaten zou stopzetten na de release van Flash Player 11.1 voor Android-apparaten en de BlackBerry Playbook, in plaats daarvan zich te concentreren op hulpmiddelen voor het bouwen van HTML5-applicaties voor mobiele apparaten. Hoewel Adobe de ondersteuning van Flash Player voor pc-browsers herhaalde, denken velen dat het slechts een kwestie van tijd is voordat Adobe ook de ondersteuning voor de pc-versie beëindigt. Dit is slecht nieuws voor bedrijven die veel in Flash-applicaties hebben geïnvesteerd, maar ook voor ontwikkelaars die tijd hebben geïnvesteerd in het verwerven van de programmeervaardigheden die nodig zijn om Flash-applicaties te bouwen.

Laten we eens kijken naar enkele van de verschillen tussen Flash en HTML5 en enkele tips en hulpmiddelen geven om de overgang tussen deze twee platforms te vergemakkelijken.

Basisprincipes van Flash Platform

Flash wordt vaak gebruikt als een overkoepelende term om te verwijzen naar een eigen Adobe-platform dat eigenlijk bestaat uit de volgende componenten:

• Flash: een hulpmiddel dat voornamelijk wordt gebruikt voor het ontwerpen en maken van animaties
• Flex: de ontwikkelomgeving die wordt gebruikt om applicaties te bouwen, inclusief een software development kit (SDK)
• MXML: opmaaktaal gebruikt in Flash-projecten
• ActionScript: een scripttaal

Als u een Flash-toepassing in een webbrowser wilt uitvoeren, moet de Flash Player-invoegtoepassing worden gedownload. Als alternatief kan een Flash-toepassing worden gecompileerd om te worden uitgevoerd in de Adobe AIR desktop runtime-omgeving. Nogmaals, Adobe AIR moet op de computer van de gebruiker zijn geïnstalleerd om een ​​AIR-toepassing te kunnen uitvoeren.

Flash gebruikt de volgende hoofdbestandsindelingen:

• .fla: Flash-projectbestand
• .flv: Flash-videobestand
• .swf: gecompileerd Flash / Flex-toepassingsbestand dat mogelijk .flv-bestanden bevat

Basisprincipes van HTML5-platform

HTML5 is een open standaardplatform dat bestaat uit het volgende:

• HTML5: opmaaktaal die wordt gebruikt om webpagina's te maken
• Cascading Style Sheets 3 (CSS3): Style sheet-taal die wordt gebruikt om de opmaak voor objecten op een HTML5-webpagina op te geven
• Application Programming Interfaces (API): API's ter ondersteuning van functies zoals drag-and-drop en cross-document messaging
• JavaScript: scripttaal die wordt gebruikt met HTML5 om animatie in te schakelen

Een van de voordelen van HTML5 is dat het op native browsers draait en geen plug-in vereist. Om goed te kunnen werken, moet een browser echter HTML5- en CSS3-functies voor een HTML5-webpagina ondersteunen. De belangrijkste browsers hebben verschillende ondersteuningsniveaus voor HTML5 en CSS3 en de implementatie is niet compleet. JavaScript wordt bijna universeel ondersteund door browsers; Gebruikers hebben echter de optie om JavaScript uit te schakelen. In dat geval worden client-side scripts die met JavaScript zijn gemaakt, niet uitgevoerd.

HTML5-bestandsindelingen omvatten het volgende:

• .htm / .html: HTML5-webpagina-bestand
• .css: CSS3-stijlbladbestand

Vanaf 2011 specificeert de huidige HTML5-specificatie geen ondersteunde videobestandsindelingen, waardoor het aan individuele browsers wordt overgelaten om te kiezen welke indelingen moeten worden ondersteund. Huidige ondersteunde indelingen zijn onder meer:

• .mp4: MPEG 4-videobestand met H.264-videocodec en AAC-audiocodec
• .webm: WebM-videobestand met VP8-videocodec en Vorbis-audiocodec
• .ogg: Ogg-videobestand met Theora-videocodec en Vorbis-audiocodec

Flash-projecten converteren naar HTML5

Het handmatig omzetten van een complex Flash-project naar HTML5 is een arbeidsintensief en tijdrovend proces vanwege platformverschillen. De ontwikkelaar moet animaties die zijn gemaakt met Flash en ActionScript converteren naar HTML5 en JavaScript. Gelukkig zijn er een paar tools die de conversie van Flash naar HTML5 helpen automatiseren.

Adobe heeft Wallaby uitgebracht, een experimentele tool die gratis kan worden gedownload van de Adobe Labs-website. Wallaby neemt een Flash-projectbestand (.fla) als invoer en exporteert HTML5 en ondersteunt CSS- en JavaScript-bestanden. De release-opmerkingen van Wallaby bevatten echter een vrij lange lijst met functies die niet worden geconverteerd - de belangrijkste daarvan zijn ActionScript, films en geluid. Wallaby is een beperkte tool die primair is ontworpen om geanimeerde grafische inhoud om te zetten in HTML5, zodat deze kan worden geïntegreerd in webpagina's met behulp van een ontwerptool voor webpagina's.

Google Labs heeft Swiffy uitgebracht, een gratis webgebaseerde tool die een gecompileerd Flash-toepassingsbestand (.swf) converteert naar HTML5. De uitvoer kan vervolgens worden ingesloten in een webpagina, maar is niet gemakkelijk voor een ontwikkelaar om te bewerken. Net als Wallaby converteert Swiffy niet alle Flash-functies. Swiffy ondersteunt ActionScript-conversie, maar alleen versie 2.0 (ActionScript is momenteel versie 3.0). De Swiffy-uitvoer werkt alleen op browsers die Scalable Vector Graphics (SVG) ondersteunen.

Edge, een nieuwe ontwikkelingstool voor HTML5

Naarmate HTML5 het favoriete platform wordt, ontstaan ​​er nieuwe tools voor ontwerp- en ontwikkelomgevingen die HTML5, CSS3 en JavaScript integreren.

In augustus 2011 heeft Adobe een preview-versie van de Edge-ontwikkelingstool uitgebracht. Edge stelt een ontwerper in staat HTML5-animaties te maken en animaties toe te voegen aan bestaande HTML5-projecten. Flash-ontwerpers herkennen enkele vertrouwde elementen in de Edge-gebruikersinterface, waaronder het werkgebied, het venster met eigenschappen en de tijdlijn van de animatie. Edge genereert echter CSS- en JavaScript-bestanden en de animatie-inhoud wordt opgeslagen in een JSON-gegevensstructuur (JavaScript Object Notation).

Ten tijde van dit schrijven anticipeerde Edge op de vierde release van de preview. Aan elke release worden nieuwe functies toegevoegd.

YouTube converteren naar HTML5

Een teken van de overstap naar HTML5 is dat YouTube nu de optie biedt om een ​​HTML5-videospeler te gebruiken om video's te bekijken.

Voordat de HTML5-optie werd aangeboden, werden alle YouTube-video's geleverd via een Flash-videospeler. Gebruikers konden videobestanden in bijna elk formaat uploaden en YouTube converteerde elke video vervolgens naar het vereiste Flash-formaat (.flv).

YouTube codeert nu ook video's met de H.264-videocodec en het WebM-formaat voor HTML5-levering. Als u video's in HTML5-indeling wilt bekijken, moet u een browser hebben die de HTML5-videotag ondersteunt en een video-indeling die wordt gebruikt door YouTube.

De erfenis van Flash

Zoals eerder opgemerkt, blijft Adobe voorlopig doorgaan met de ontwikkeling van de pc-versie van Flash Player. Zelfs als Adobe in de toekomst stopt met het ondersteunen van Flash Player, blijven oudere Flash-applicaties op het web worden ondersteund - waarschijnlijk jarenlang. Flash gaat dus niet snel helemaal weg. Er zijn tools beschikbaar om Flash-applicaties te converteren naar HTML5-applicaties, maar momenteel ondersteunen deze tools niet de conversie van alle Flash-functies. Naarmate de HTML5-standaard dominant wordt, is het waarschijnlijk dat Flash-bestandsconversietools geavanceerder zullen worden, en nieuwe tools zullen worden gemaakt om inhoud met het HTML5-platform te ontwikkelen.