Flash'tan html5'e geçiş

Kasım 2011'de Adobe, Android cihazlar ve BlackBerry Playbook için Flash Player 11.1'in piyasaya sürülmesinden sonra mobil cihazlar için Flash Player'ı geliştirmeyi bırakacağını, bunun yerine mobil cihazlar için HTML5 uygulamaları oluşturma araçlarına odaklanmayı seçeceğini açıkladı. Adobe, kişisel bilgisayar tarayıcıları için Flash Player desteğini tekrarlasa da, birçoğu Adobe'nin PC sürümü desteğini de sonlandırmasının sadece bir zaman meselesi olduğunu düşünüyor. Bu, Flash uygulamalarına yoğun yatırım yapan şirketler ve Flash uygulamaları oluşturmak için gerekli programlama becerilerini edinme konusunda zaman harcayan geliştiriciler için kötü bir haber.

Flash ve HTML5 arasındaki bazı farklılıklara bakalım ve bu iki platform arasındaki geçişi kolaylaştırmaya yardımcı olacak bazı ipuçları ve araçlar sağlayalım.

Flash Platform Temel Bilgileri

Flash genellikle aşağıdaki bileşenlerden oluşan tescilli bir Adobe platformuna atıfta bulunmak için bir şemsiye terim olarak kullanılır:

• Flash: Öncelikle animasyonlar tasarlamak ve oluşturmak için kullanılan bir araç
• Esnek: Yazılım geliştirme kiti (SDK) dahil olmak üzere uygulama oluşturmak için kullanılan geliştirme ortamı
• MXML: Flash projelerinde kullanılan işaretleme dili
• ActionScript: Bir komut dosyası dili

Bir Flash uygulamasını Web tarayıcısında çalıştırmak için Flash Player eklentisi indirilmelidir. Alternatif olarak, bir Flash uygulaması Adobe AIR masaüstü çalışma zamanı ortamında çalışacak şekilde derlenebilir. AIR uygulamasının çalışması için yine kullanıcının bilgisayarında Adobe AIR yüklü olmalıdır.

Flash aşağıdaki ana dosya biçimlerini kullanır:

• .fla: Flash proje dosyası
• .flv: Flash video dosyası
• .swf: .flv dosyaları içerebilecek derlenmiş Flash / Flex uygulama dosyası

HTML5 Platformuyla İlgili Temel Bilgiler

HTML5, aşağıdakilerden oluşan açık bir standart platformdur:

• HTML5: Web sayfaları oluşturmak için kullanılan biçimlendirme dili
• Basamaklı Stil Sayfaları 3 (CSS3): HTML5 Web sayfasındaki nesnelerin biçimlendirmesini belirtmek için kullanılan stil sayfası dili
• Uygulama Programlama Arabirimleri (API): Sürükle ve bırak ve belgeler arası mesajlaşma gibi özellikleri destekleyen API'ler
• JavaScript: Animasyonu etkinleştirmek için HTML5 ile kullanılan komut dosyası dili

HTML5'in avantajlarından biri, yerel olarak Web tarayıcılarında çalışması ve bir eklenti gerektirmemesidir. Ancak, düzgün çalışması için bir tarayıcının HTML5 Web sayfası için HTML5 ve CSS3 özelliklerini desteklemesi gerekir. Büyük tarayıcıların HTML5 ve CSS3 için farklı destek düzeyleri vardır ve uygulama tamamlanmamıştır. JavaScript neredeyse evrensel olarak tarayıcılar tarafından desteklenir; ancak kullanıcılar JavaScript'i "kapatma" seçeneğine sahiptir; bu durumda JavaScript ile oluşturulan istemci tarafı komut dosyaları çalışmaz.

HTML5 dosya biçimleri şunları içerir:

• .htm / .html: HTML5 Web sayfası dosyası
• .css: CSS3 stil sayfası dosyası

2011'den itibaren, geçerli HTML5 belirtimi desteklenen video dosyası biçimlerini belirtmez ve hangi biçimleri destekleyeceğini seçmek için tek tek tarayıcılara bırakır. Mevcut desteklenen biçimler aşağıdakileri içerir:

• .mp4: H.264 video codec bileşeni ve AAC ses codec bileşeni içeren MPEG 4 video dosyası
• .webm: VP8 video codec bileşeni ve Vorbis ses codec bileşeni içeren WebM video dosyası
• .ogg: Theora video codec bileşeni ve Vorbis ses codec bileşeni ile Ogg video dosyası

Flash Projeleri HTML5'e Dönüştürme

Karmaşık bir Flash projesini manuel olarak HTML5'e dönüştürmek, platform farklılıkları nedeniyle yoğun ve zaman alıcı bir işlemdir. Geliştirici, Flash ve ActionScript ile oluşturulan animasyonları HTML5 ve JavaScript'e dönüştürmelidir. Neyse ki, Flash'tan HTML5'e dönüştürmeyi otomatikleştirmeye yardımcı olan birkaç araç var.

Adobe, Adobe Labs web sitesinden ücretsiz olarak indirilebilen deneysel bir araç olan Wallaby'yi yayınladı. Wallaby, bir Flash proje dosyasını (.fla) girdi olarak alır ve HTML5'i ve CSS ve JavaScript dosyalarını destekler. Bununla birlikte, Wallaby sürüm notları dönüştürülmemiş oldukça uzun özelliklerin bir listesini içerir - en önemlisi ActionScript, filmler ve ses. Wallaby, öncelikle animasyonlu grafik içeriği HTML5'e dönüştürmek için tasarlanmış sınırlı bir araçtır, böylece bir Web sayfası tasarım aracı kullanılarak Web sayfalarına entegre edilebilir.

Google Labs, derlenmiş bir Flash uygulama dosyasını (.swf) HTML5'e dönüştüren ücretsiz bir Web tabanlı araç olan Swiffy'yi yayınladı. Çıktı daha sonra bir Web sayfasına gömülebilir, ancak bir geliştiricinin düzenlemesi kolay değildir. Wallaby gibi Swiffy de tüm Flash özelliklerini dönüştürmez. Swiffy, ActionScript dönüştürmeyi destekler, ancak yalnızca sürüm 2.0 (ActionScript şu anda sürüm 3.0'dadır). Swiffy çıkışı yalnızca Ölçeklenebilir Vektör Grafiklerini (SVG) destekleyen tarayıcılarda çalışır.

Edge, HTML5 için Yeni Bir Geliştirme Aracı

HTML5 tercih edilen platform haline geldikçe, HTML5, CSS3 ve JavaScript'i entegre eden tasarım ve geliştirme ortamları sağlamak için yeni araçlar ortaya çıkıyor.

Ağustos 2011'de Adobe, Edge geliştirme aracının önizleme sürümünü yayınladı. Edge, bir tasarımcının HTML5 animasyonları oluşturmasına ve mevcut HTML5 projelerine animasyon eklemesine olanak tanır. Flash tasarımcıları, sahne alanı, özellikler penceresi ve animasyon zaman çizgisi de dahil olmak üzere Edge kullanıcı arayüzündeki bazı tanıdık öğeleri tanıyacaktır. Ancak Edge, CSS ve JavaScript dosyaları oluşturur ve animasyon içeriği bir JavaScript Nesne Gösterimi (JSON) veri yapısında saklanır.

Bu yazı yazıldığı sırada Edge, dördüncü önizleme yayınını bekliyordu. Her sürüme yeni özellikler ekleniyor.

YouTube'u HTML5'e dönüştürme

HTML5'e geçişin bir işareti, YouTube'un artık videoları görüntülemek için bir HTML5 video oynatıcı kullanma seçeneği sunmasıdır.

HTML5 seçeneğini sunmadan önce, tüm YouTube videoları bir Flash video oynatıcı aracılığıyla yayınlandı. Kullanıcılar video dosyalarını hemen hemen her biçimde yükleyebilir ve YouTube daha sonra her videoyu gerekli Flash (.flv) biçimine dönüştürür.

YouTube artık videoları H.264 video codec bileşeni ve HTML5 dağıtımı için WebM biçimiyle kodlamaktadır. Videoları HTML5 biçiminde görüntülemek için, HTML5 video etiketini destekleyen bir tarayıcınız ve YouTube tarafından kullanılan bir video biçiminiz olmalıdır.

Flash Mirası

Daha önce de belirtildiği gibi, Adobe şu an için Flash Player'ın PC sürümünde geliştirmeye devam ediyor. Adobe gelecekte Flash Player'ı desteklemeyi bıraksa bile, eski Flash uygulamaları Web'de desteklenmeye devam edecektir - muhtemelen yıllarca. Bu yüzden, Flash yakın zamanda tamamen ortadan kalkmayacak. Flash uygulamalarını HTML5 uygulamalarına dönüştürmek için araçlar mevcuttur, ancak şu anda bu araçlar tüm Flash özelliklerinin dönüştürülmesini desteklememektedir. HTML5 standardı baskın hale geldikçe, Flash dosya dönüştürme araçları daha karmaşık hale gelecek ve HTML5 platformuyla içerik geliştirmek için yeni araçlar oluşturulacaktır.