HTML5 vs Flash – 2

Daha once de belirttigim gibi, PhoshopMagazin dergisi icin Zihni Babuz ile birlikte HTML5 ve Flash kiyaslamasi yapmistik.

2 bolum seklinde yayinlanan yazinin 1.bolumunu daha once blogumda paylasmistim.  Eylul-Ekim sayisinda yayinlanan 2. bolumunu de bu yazimda paylasacagim.

Yazinin ilk bolumunu merak edenler icin su linkten kiyaslamanin 1.bolumunu okuyabilirler
http://www.aliogul.com/blog/2010/06/29/html5-vs-flash

HTML5 ve FLASH – 2

Bir önceki sayıda Flash ve HTML5 konusunda Apple ile Adobe arasında yaşanan söylemleri mercek altına yatırmış ve her iki teknolojiyi teknik olarak incelemeye başlamıştık. Video ve Animasyon konularında yeteneklerine değindiğimiz Flash ve HTML5’in diğer konularda da üstünlüklerini tarafsız gözle incelemeye devam ediyoruz…

3D

3D konusu en çok karşılaştırılan kriter diyebiliriz. Flash 3D konusunda oldukça gelişmiş durumda. Flash’ın kendi API’leri dışında açık kaynaklı olarak sunulan ve gün geçtikçe yenileri geliştirilen bir çok Flash 3D API’si mevcut.
Web ortamında gördüğümüz hemen hemen her 3D animasyon Flash tabanlıdır. Bazı uygulamalar direk Flash’ta yapılsa da bazıları 3D programlarıyla daha gerçekçi görüntü elde edebilmek için modellenir ve Flash’a aktarılır.
Flash kendi içerisinde de 3D konusunda 2’ye ayrılır. ActionScript ile kodlanan 3D uygulamaların yanında objelerinize de basit anlamda çok da gerçekçi olmayan 3D efectleri verebilirsiniz. Bunun için gerekli olan araçlar Flash CS4 ve Flash CS5 versiyonlarında bulunuyor.
HTML5 ise 3D’de gelecek vadediyor. Çok hızlı gelişen HTML5’in 3D özelliğini şimdiden kullanmaya başlayan geliştiriciler Flash yerine HTML5’i tercih edebiliyor. Ancak HTML5’in henüz tam anlamıyla tarayıcılar tarafından desteklenmiyor olması sorun olabiliyor. Bununla beraber henüz yeni geliştiği için bir çok eksiği bulunuyor. Şuan HTML5’in geliştirilmekte olan bir kaç JS 3D API’leri mevcut.
Genel olarak Flash, 3D konusunda HTML5’ten üstün. HTML5 CPU bakımından Flash’tan biraz geride kalıyor. Fakat HTML5’in yeni yeni gelişiyor olması durumları değiştirebilir.
Flash 3D´nin geleceği ve yeni API her yıl düzenlenen Adobe MAX’de duyurulacak. GPU hızlandırması yeni render özellikleri gibi konular Adobe MAX 2010’de yer alacak.
CPU konusunda Adobe Flash Player 10.1 ile sistem yormalarını azalttı ve Flash´ı daha da hızlandırdı.

ARAYÜZ

Uygulama hazırlarken çalışılan alan ve arayüz oldukça önemlidir. Programın araçları , arayüz kullanılabilirliği uygulama hazırlayanlara kolaylık sağlayabilmekte.

Flash tabanlı uygulamalar hazırlamak için bir çok seçeneğiz var. Bunların başında Flash Professional geliyor. Ancak Flash Develop, Flash Builder(Flex), Flash Catalyst gibi programlarla da Flash tabanlı uygulamalar hazırlanabiliyor. Flash Professional programının avantajı grafik arayüze sahip olması ve diğer Adobe programlarıyla etkileşim içinde olması. Bu programla Flash ile ilgili istediğiniz her şeyi yapabiliyorsunuz.
Flash Develop ise daha çok ActionScript kodlama yapanlara yönetik bir AcionScript Editörü diyebiliriz. Sadece kodla uğraşanlar yine bu programla Flash tabanlı uygulamalar hazırlayabiliyorlar.
Flash Builder yani eski adıyla Flex ise yine Flash tabanlı uygulamalar hazırlamaya yarıyor. Ancak Flex’in yapısı biraz daha farklı. Flash Builder’ı HTML gibi düşünebiliriz. Açık kaynaklı kodlu farklı bir yazılımdır. (Flex ile ilgili detaylı bilgi için www.flexnedir.com sitesini ziyaret edebilirsiniz)

HTML5’i ise Dreamweaver gibi HTML editörlerinin tümüyle kodlayabilirsiniz. HTML5 derleme yapmadığı için yani her şey kodlarla yapıldığı için her programla hazırlanabilir. Notepad’te kodları yazıp html olarak kaydetmek gibi.

HTML5’in her hangi bir arayüz programı yok. Bu açıdan animasyonları rahatça oluşturmak ve test etmek Flash’a oranla eksik kalıyor olabilir.

KOD YAZMA

HTML5 bildiğimiz gibi Html versiyonunun son sürümüdür. Bu yüzden HTML&JavaScript kodlama yapısına sahip.
Flash’ın kodlama yapısı ise ActionScript. ActionScript’in günümüze kadar 3 versiyonu çıktı. AS1, AS2 ve AS3. ActionScript 3.0 son versiyon olup en sağlıklı yapıdadır.
ActionScript ve JavaScript, Ecmascript tabanlı oldukları için yapı olarak bir birlerine çok benzemektedirler. Fakat ActionScript’i , JavaScript gibi sadece kodlayıp çalıştıramayız. ActionScript’in derlenmesi gerekiyor aksi halde sadece kodu yazıp kaydetmek ile çalışmaz. Bu derlemeleri de Flash ve yardımcı programları yapmakta.

Yukarıda da bahsettiğimiz gibi HTML5’i her yerde kodlayabilirsiniz. Bu tamamen size kalmış. Aynı şekilde ActionScript’i de ancak actionscript’in çalışabilmesi için derlenmesi gerekiyor.

UYUMLULUK

Gerek HTML5’in yaygınlaşması gerekse Flash’ın yaygınlanması amacıyla uyum sağladıkları Sistemler ve Tarayıcılar çok önemlidir. Bununla beraber Mobil ortamlarda destekleniyor olması çok büyük etken haline geldi.

Flash Browser(tarayıcı)’lardan bağımsız çalışmakta. Ancak Plug-in yani eklentiye ihtiyaç duymakta. Flash Player yüklü olmayan bilgisayarlar kesinlikle Flash görüntülenmez. Ancak HTML5 böyle bir eklentiye gereksinim duymuyor fakat tarayıcıların HTML5 ile uyumlu olması gerekiyor. Şuan bu uyum henüz sağlanamamış olsa da Chrome ve Safari HTML5’i tamamiyle destkliyor. Firefox ve Internet Explorer ve diğer tarayıcıların ilerleyen versiyonlarında HTML5’i desteklemesi bekliyor.Internet Explorer’ın 9. versiyonu HTML5’i destekleyeceği biliniyor.

Flash, Microsoft Windows, Mac OS X, Linux, Solaris, Symbian, Windows Mobile, Maemo ve Android işletim sistemlerinde çalışmakta. Mobil ortamlarda Flash, Android ve BlackBerry’de tam performans sağlamakta.
HTML5 ise bütün işletim sistemleri ve mobil platformlarda çalışmakta ancak dediğimiz gibi tarayıcı desteği sorunu yüzünden henüz tam olarak bu uyum sağlanmış değil.

GİZLİLİK

HTML5, diğer bütün html versiyonları gibi açık kodludur. Html5 ile yapılan çalışmaların kodlarına herhangi bir kullanıcı rahatlıkla ulaşabilir. Bu HTML dilinin doğasında var olan bir şeydir bu yüzden HTML5 ile yaptığınız birçalışmanın kodları gizli kalmaz.

Flash’ta ise durum farklı. Flash ile yapılan çalışmarın kodları gizlenebilir. Animasyonlar aracı bir programla yapıldığı için bunları sadece izleyebiliriz. Yazılan ActionScript kodlamalarına da HTML5 gibi ulaşmak mümkün değildir.
Flash tabanlı çalışmalar SWF formatında olduğu için ve SWF dosyası bir Embed kodu ile siteye yerleştirildiği için sadece bu html embed koduna ulaşılabilir.

Ancak bununla beraber oldukça popüler olan bir takım programlarla bir Flash çalışmasının ActionScript kodlarına ulaşılabiliyor.Bu tür programlar SWF dosyasının içeriğini kodlarıyla beraber gösteren hatta bunu kaynak dosya (.fla) ‘ya çeviren programlardır.
Bir çok Flash geliştirisinin başını ağrıtan bu programlarla Flash uygulamaları kopyalamak oldukça kolay hale geldi. Fakat bu programlar hiç bir zaman %100 sonuç vermemektedirler.

Bununla beraber bu tür programların kodlara ulaşabilmesini engelleyen başka popüler “kod kilitleyici” programlar mevcut. Bu programlarla kilitlenen SWF dosyalarında yer alan kodlara yukarıda bahsettiğimiz programlarla ulaşılmaya çalışıldığında kodlar anlaşılmaz halde ve çalışmaz halde görünüyor. Bu kodlar kopyalansa bile çalışmayacaktır.

GÜVENLİK

Özellikle Flash uygulamaları güvenlik konusunda oldukça eleştiriliyor. Apple & Adobe tartışmaları sırasında Apple’ın dile en çok dile getirdiği şikayet Flash ve güvenlik sorunu. Öte yandan Symantec’in Global Internet raporunda Flash; web eklentileri ve tarıyıcı güvenliği açısından 2. sırada yer alıyor.
Adobe’nin açıklamasına göre Flash güvenliği Flash Player için öncelikli bir konu. Adobe her fırsatta bu açıkları sürekli kapatıp güncellemeler yaptığını belirtiyor.
Html5’te her ne kadar bir takım güvenlik sorunu olsa da önceki versiyonlara göre bu konuda gelişim sağlanmış.
Güvenlik konusunda bir çok şey aslında geliştirici ve kodlamasına bağlıdır. Bununla ilgili HTML5’te de Flash’ta da uyulması gereken temel kuralları internet ortamında bulmak mümkün.

MULTITOUCH

Zaten gelecek vadeden Multitouch özellikli bilgisayar ve telefonlar özellikle iPhone ve iPad ile beraber popülerliğini arttırmış durumda. Multitouch özellikli bilgisayarlar ve telefonlar hızlıca yaygınlaşıyor. Artık çoğu bilgisayar ve telefon üreticileri bu alan üzerinde çalışmalarını sıklaştırmış durumda. Multitouch özellikli ekranları Pad’leri yavaş yavaş daha çok görmeye başladık.

Bu noktada Flash ve HTML5 kıyaslamasında önemli bir yere sahip.

Flash, multitouch teknolojisinin gelişmesiyle eş zamanlı olarak bu desteği ve gelişimi gerçekleştirmeye çalışıyor.
Flash, Multitouch bilgisayar ve telefonları destekliyor. Adobe’nin açıklamasına göre Flash teknolojisi  Multitouch arayüze sahip cihazların tümünde sorunsuz şekilde çalışıyor. Flash Player 10.1 ve Air 2.5 ile Multitouch özelliği daha da gelişmiş durumda.

HTML5’te de Multitouch özelliği yer alıyor. Html5’i tamamen destekleyen tarayıcıları barındıran bütün cihazlar bu özelliği destekler.

SONUÇ

Son iki sayıda çok tartışılan HTML5 ve Flash kıyaslamasını elimizden geldiğince tarafsız bir şekilde yapmaya çalıştık.Bu süre içinde özellikle yeni çıkan bir teknoloji olmasından dolayı HTML5 hakkında kaynak ve bilgi edinme konusunda oldukça zorlandık. Bu sebepten ötürü kıyaslamalarda eksik taraflar da olmuş olabilir. HTML5 hakkında ilerleyen günlerde daha çok kaynak daha çok bilgi edinebileceğiz. Yavaş yavaş yaygın hale geldiğinde gerekli kıyaslamaları siz de gerçekleştirip seçiminizi yapabileceksiniz.

HTML5 daha iyi ya da Flash daha iyi gibi bir yorum yapmak yerine bu konuda bu sayıda ve önceki sayıda yaptığımız kıyaslamaları okuyumanızı öneriyor ve tercihi size bırakıyoruz.
Ancak bize göre HTML5 ve Flash’ı ikinsinden birini seçmek zorunda kalacağınız seçenekler olarak düşünmek yerine her ikisini de inceleyip bu iki harika teknolojiyi yakından takip etmelisiniz.
Yeri geldiğinde Flash daha iyi, yeri geldiğinde HTML5 olacaktır. İkisinin de bir arada kullanılacağı çalışmalar/siteler de olacaktır.

Ancak şu bir gerçek Flash yıllardır var olan bir teknoloji ve oldukça uyum sağlamış durumda gün geçtikçe gelişmeye de devam ediyor. Ancak HTML5 yeni çıkan bir teknoloji, bu teknolojinin yaygın hale gelmesi ve bütün sistemler tarafından desteklenmesi zaman alacaktır.
Internet Explorer 6.0 yüzünden hala bir çok sitenin .PNG kullanmadığını düşünürsek, HTML5 ‘in tarayıcı desteği yüzünden bütün kullanıcılarda sorunsuz şekilde çalışıyor hale gelebilmesi oldukça zaman alacaktır.

HTML5 vs Flash

Yazinin 2. bolumunu su linkten okuyabilirsiniz; http://www.aliogul.com/blog/2010/10/20/html5-vs-flash-2/

[Bu yazı 31 Ağustos 2010 tarihinde güncellenmiştir]

Bu aralar sıklıkla adını duyduğumuz Html’in yeni versiyonu olan Html5’in Flash’ı tamamen öldüreceğine dair dedikodular ve Flash ile Html5 savaşı devam ediyor.

Ben de sevgili Zihni Babuz ile Photoshop Magazin dergisi için, elimizden geldiğince tarafsız bir şekilde Html5 ve Flash’ın bütün detaylarıyla kıyaslanladığı 2 bölümlük bir yazı hazırladık.

Yazının ilk bölümü PhotoshopMagazin dergisinin  Temmuz-Ağustos sayısında yayınlandı.

2. Bölüm de Eylül – Ekim sayısında yer alıyor.

Merak eden Flash ve Html5 taraftarlarının bu sayıyı kaçırmamasını öneriyorum , öneriyoruz.

Aşağıda 1. bölümünü inceleyebilirsiniz. Görüşmek üzere.

HTML5 ve FLASH

Flash ve HTML5 karşılaştırmaları, son zamanlarda sıkça karşılaştığımız bir konu haline geldi. HTML5 duyurulduğundan beri sonu gelmeyen bu karşılaştırmaların tarafsız sonuçlarını sunan birilerini görmek de imkânsız hale geldi.

Özellikle Flash severler ve Flash geliştiricileri HTML5’in Flash’a rakip olmasına gülüp geçerken, HTML5´in daha hazır olmadığını ve bu nedenle Flash’ın yerini alamayacağını düşünüp yaptıkları kıyaslamalarda hep Flash’ın daha iyi olduğundan bahsederler.

Diğer yandan Flash’ın eski bir teknoloji ve hantal olduğunu düşünenler HTML5 teknolojisinin çıkmasıyla Flash’a gerek kalmadığını HTML5 ‘ in Flash’a gerek duymadan Flash’ın yaptığı her şeyi yapabileceğini iddia ediyorlar. Büyük çoğunluğu Flash’ı sevmeyenler olan HTML5 severler bu yeni teknolojinin web dünyasına çok şey katacağından ve kesinlikle Flash’ın yerini alacağından bahsederler.

Peki, bu olay nasıl başladı? Gerçekte hangisi daha iyi veya daha iyi olan biri var mı? Flash gerçekten tarih mi olacak, yoksa HTML5 sadece abartılmış bir teknoloji mi?

Biz elimizden geldiğince tarafsız bir şekilde bu kıyaslamayı yapıp sizlere detaylarıyla birlikte sunmaya çalıştık. Ama öncesinde bu olay nasıl gelişti kısaca bahsedelim.

Flash Nedir?

Flash, çoğu kişinin bildiği üzere, Macromedia firması tarafından yapılan ve daha sonra Adobe’nin Macromedia’yı satın almasıyla Adobe bünyesine geçen bir grafik animasyon ve web tasarım&uygulama programıdır.

Flash günümüzde birçok tasarımcı tarafından kullanılmaktadır. Yapılan birçok website artık ya Flash tabanlı ya da Flash öğelerini içermekte. Ayrıca Flash Player (Flash ile yapılan uygulamaları çalıştırabilmek için) bilgisayarların %90’ndan fazlasında yer almaktadır.

Flash’ın bu derecede yaygınlığıyla beraber eksikleri de mevcut. Özellikle HTML5 ile kıyaslama yapanlar tarafından en çok Flash’ın güvenlik açıklarının bulunması ve gereğinden fazla sistemi yorması şikâyetleri dile getiriliyor.

HTML5 Nedir?

HTML5, HTML dilinin son sürümüdür. Şuan kullanılan HTML sürümü 4,1’dir.  Mevcut sürümünün bazı ihtiyaçları karşılayamaması HTML5’i doğurdu. Tamamen yeni ve gelişmiş olan bu teknolojiyi Youtube da video playerları üzerinde denemektedir.

Günümüzde bazı tarayıcılar tarafından kısmen desteklenmektedir. Opera son çıkardığı sürümle HTML5 ‘i tamamen desteklemektedir.

Apple ve Adobe tartışması

HTML5’ten önce araları oldukça iyi olan Apple ve Adobe HTML5’in gelmesiyle araları açıldı.

Apple HTML5’in harika bir teknoloji olduğunu ve Flash’ın güvenlik açıklarıyla dolu, hantal ve sistemi yorduğunu dile getirmesi aradaki gerginliği başlatmış oldu.

Zaten bilindiği üzere iPhone’larda Flash Player mevcut değildi. Tam da gerginliğin arttığı dönemde Apple’ın iPad’i tanıtması ve aynı sebeplerden ötürü Flash Player’ı desteklememesi, hem Adobe ile Apple arasındaki gerginliği daha da arttırdı hem de Apple ve Adobe kullanıcılarını da karşı karşıya getirdi. İnternet ortamında Flash ve Apple hayranları bu konu üzerinde oldukça tartışıyorlar.

Hala bu gerginlik ve atışmalar devam ediyor ve henüz bu konuda iki taraftan atılmış bir adım yok.

APPLE ne diyor?

Apple’a göre Adobe çalışanları tembel ve Flash’ın eksiklerini ve güvenlik açıklarını kapatmakla uğraşmıyor.

Ayrıca Flash´ın %100 ticari bir yazılım olduğunu, eski bir teknoloji ve  kapalı bir sistem olduğunu bu yüzden  Apple´ın Flash yerine HTML5, CSS gibi açık standartları benimsediğini söylüyor. Ek olarak Google gibi şirketlerinde bu standarları benimsediğini söyleyen Apple HTML5 ile eklentiye gerek duymadan Flash ile yapılan animasyonlar yapılabileceğini iddia ediyor.

Apple, Flash’ın güvenlik açıklarıyla dolu olduğunu ve mac’lerdeki çökemelere sebep olduğunu, iPhone ve iPad için Flash gibi 3.parti teknolojileri istemediğini belirtiyor.

Flash’ın pc döneminde oluşturulmuş bir teknoloji olduğunu ve mobil platform döneminde pil ömrü ve açık web standarlarının önemli olduğunu belirtiyor.

ADOBE ne diyor?

Adobe ise bütün bu iddiaların gerçeği yansıtmadığını, Flash’ın çok kullanılan, gelişmiş bir platform olduğunu söylüyor. Ayrıca bir takım güvenlik açıklarının bulunduğunu kabul ederek bu açıklar üzerinde sürekli çalışıldığını belirtiyor.

Adobe ayrıca Flash’ı , Air, Flex ve Flash Catalyst ile daha da genişletip bir platform haline getirdi ve bu yönde çalışmalara devam ediyor.

Girişte de bahsettiğimiz gibi İnternet ortamında bu konuyla ilgili çok sayıda değerlendirme ve karşılaştırmalar mevcut ve her geçen gün yeni kıyaslamalar yapılıyor.Genelde yabancı sitelerde yer alan bu değerlendirmeler taraflı oluyor.

Biz şimdi başlıklar halinde HTML5 ve Flash ‘ın artılarından eksilerinden bahsedeceğiz.

Video

Youtube başta olmak üzere oldukça yaygın olan Video sitelerinin yanında diğer bütün sitelerde videoları yayınlamak için video player’lar kullanılır. Günümüze kadar bu videoların %95 ‘inden fazlası Flash Player kullanılarak yayınlanıyordu. Öyle ki Flash veya web tasarımı ile ilgili bilgisi olmayan ve sadece internet ortamında tüketici olan sınıf bile Youtube, Facebook vb. sitelerin Video Playerları sayesinde Flash ve Flash Player’ın ismini duyup bilgisayarlarına Flash Player yüklemişlerdir daha doğrusu yüklemek zorunda kalmışlardır.

Ancak Flash’a rakip olarak gösterilen HTML5 bu geleneği biraz bile olsa bozacağa benziyor. En azından Youtube gibi video sitelerinin bir de HTML5 player versiyonlarını desteklemesi kullanıcıları Flash Player yükleme zorunluluğundan kurtaracak ve yayıncıları Flash tekelinden kurtarmış olacak.

Bakalım Html5 ve Flash video playerlar arasında nasıl farklar var.

  • Desteklenen Video Formatları

    Flash’ın desteklediği video formatları tarayıcıdan bağımsız olarak ; flv, H.264, aac, mp3, vp6, speex  ve gelecekte destekleyeceği vp8 formatı.
  • Html5’in desteklediği formatlar ise tarayıcıya bağımlı olarak şu şekilde;

    Mozilla: Theora,  ogg, vorbis , Mozilla 4.0 ile vp8

    IE 9.0: H264

    Chrome 5: H.264 – Theora – ogg – gelecekte vp8

    Opera 10 : ogg – theora – gelecekte vp8

    Konqueror : ogg – theora

  • Video Kalitesi Video kalitesi olarak Flash ve HTML5 arasında fark yok. Aynı formatlarla yaptığımız testler sonucu Flash ve Html5’de onatılan videoların kalitesi aynı.
  • Yükleme hızı Yükleme hızı konusunda HTML5’in Flash’a oranla daha az gelişmiş olduğunu görüyoruz. Flash player ile oynatılan bir video daha hızlı yükleniyor ancak Html5 bunu daha da geliştirecektir.
  • Sistemi yorması Bununla ilgili aynı video ile yaptığımız testte ortaya çıkıyor ki HTML5 ve Flash Player ile oynatılan videolar sırasında CPU %15-25 arasında. Yani Cpu yakması açısından Flash ve Html5 arasında bir fark yok
  • Siteye ekleme kolaylığı Html5 ‘in video özelliklerini incelediğimizde bu konuda kesinlikle Flash’tan daha iyi ve rahat olduğunu gördük. Flash’ta bir video’yu yayınlamak için neredeyse ekranı kaplayacak uzunlukta satırlarca kod (bu Flash tarafından otomatik olarak oluşturulur) yazıyorken HTML5’te sadece 2 satırla siteye video eklenebilir.
  • Ekstra özellikler HTML5´de Flash´da ki gibi tam ekran olarak video izleyemiyoruz betiklerle ancak oluyor bu işlem.HTML5´in artı yönü ise mobil cihazlarda sorusuz çalışması Flash ise eklenti olmadan çalışmıyor,bu durum sadece mobil cihazlar üzerinde değil Flash eklentisi yüklü olmayan bilgisayarlarda da sorun olabiliyor fakat HTML5´de bütün tarayıcılar desteklemediği için bunda da sorun olabilir.Ek olarak Flash´ın streaming olayı çok güçlü takılmadan beklemeden videolarınız izleyebiliyorsunuz bu durum html5 de iç açıcı değil daha gelişmekte olduğu için çok zayıf düşüyor.

Animasyon

Kuşkusuz bu konuyla ilgilenen çoğu kişinin en çok ilgilendiği konu animasyondur.  Flash temelde bir animasyon programı ve tanınmasında bu özelliği büyük rol oynamıştır. Çoğu Flash sever Flash ‘a animasyona olan ilgi sayesinde merak salmıştır. Daha sonraları Flash sadece animasyon programı olmaktan çıksa da Flash’ı sadece animasyon oluşturmak için kullananların sayısı oldukça fazla.

HTML5’de de animasyonlar oluşturulabiliyor. Belki de çoğu kişinin ilgisini bu yüzden çekiyordur. Ancak fark şu ki Flash her türlü animasyon oluşturmak ve izletmek için kullanılıyor fakat HTML5 ‘te sadece web sayfalarında kullanılmak üzere animasyonlar oluşturulabiliyor.

Flash ile banner animasyonları, çizgi filmler, introlar ve hareketli herşey oluşturulabilir. Oluşturulan animasyonlar Web ortamında, Masaüstlerinde, Sunumlarda, Online veya Tv animasyonlarında hatta TV reklamlarında bile kullanılabilmektedir.

Ancak HTML5 te ise sadece web ortamında oynatılmak üzere bannerlar, çizgi filmler ve diğer animasyonlar hazırlanabiliyor.

Ayrıca Flash’ta yapılan bir animasyonu video formatında çıktı alabiliyoruz, ancak html5’te böyle bir imkânımız bulunmamakta.

Animasyonlar oluşturulurken ve yayınlanırken dikkat edilmesi gereken önemli kriterlere gelelim.

Flash animasyonları oluşturabilmek için Adobe Flash programı kullanılır. Bu programın arayüzü animasyon oluşturmaya oldukça el verişlidir.  Animasyonu kolayca oluşturabilmemiz için birçok kolaylaştırıcı tool (araç)’lar mevcut.

HTML5’te ise herhangi bir animasyon aracı yok. Hazırlanan görseller kod yardımıyla sahneye ekleniyor ve animasyon tamamen kod ile hazırlanıyor.

Flash bu konuda html5 ‘e oranla daha kullanışlı. Kod ile animasyon hazırlamak isteyenler ActionScript ile tamamen kodlarla animasyon hazırlayabiliyorlar. Bunun dışında da yukarıda bahsettiğimiz gibi arayüz ve araçlar sayesinde kod kullanmadan da animasyonlar hazırlanabiliyor.

  • FPS Ayarı Fps, saniyede ekranda görünen kare sayısıdır. Fps arttıkça , animasyonun kısalır. Fps ‘yi artıp kare sayısı da arttırılınca animasyon kalitesi daha iyi oluyor. Flash’ta da HTML5’te de Fps ayarı yapılabiliyor. Böylece animasyonların akışı ayarlanabiliyor.Ancak, Flash’ta ActionScript 3.0 sayesinde bir animasyon devam ederken bu ayar anlık değiştirilebiliyor. Böylece animasyonun bazı yerlerini hızlandırıp bazı yerlerini yavaşlatabiliyoruz.  Html5’te ise böyle seçeneğimiz bulunmuyor. Animasyon tek belirlenen tek fps ayarı ile başlayıp bitiyor.

  • Sistemi yorması Bu konuda aynı animsyon üzerinden yaptığımız testlerin sonuçları şu şekilde

Browser / Sistem windows 7 Flash 10.1 HTML5
Mozilla 3.6 Cpu:57% FPS:30 CPU:56% FPS:16
Opera 10.56 CPU: 56% FPS:30 CPU:52% FPS:28
Safari 5 CPU: 57% FPS:30 CPU: 56% FPS:9
Chrome CPU: 57% FPS:30 CPU: 53% FPS:5
IE8 CPU: 58% FPS:30 YOK

Sonuç olarak Cpu aşağı yukarı her ikisinde de aynı , ancak Flash’ın hızı yüksek, HTML5’in düşük. Bu da HTML5’in hızına oranla daha fazla sistemi yorduğunu gösteriyor

  • Animasyon kalitesi Animasyon kısmında baktığımızda Flash HTML5´in çok çok ilerisinde ama HTML5 yeni gelişen bir teknoloji ve bütün tarayıcılar desteklemiyor bu yüzden animasyonlarda istediğimiz performansı alamıyoruz animasyonlar yavaş olmasına rağmen CPU çok fazla tüketiyor tabii ki bu animasyona göre değişiyor. Flash ise bu konuda gerçekten çok başarılı çok hızlı,tarayıcıya bağlı değil ve 10.1 ile CPU sorunlarınıda aşmış gibi duruyor fakat bu da animasyona ve geliştiriciye göre değişiyor.
  • Animasyon teknikleri Flash’ın arayüz araçları sayesinde objelere kolaylıkla 3d özelliği verilebiliyor, hazırlanan çizimlere ve objelere eklem özelliği verilebiliyor bu sayede kol bacak gibi bölgeler fizik kurallarına uygun bir şekilde çok kolay bir şekilde anime edilebiliyor. Ayrıca yine paneller ve araçlar sayesinde alpha(saydamlık), renk değişimi vb. özellikler kolayca obje üzerinde kullanılabiliyor.Ayrıca ActionScript ile de animasyonlar hazırlanabiliyor.HTML5’te ise böyle araçlar mevcut değil ve animasyonlar tamamen kodlarla hazırlanıyor.
  • Çizim ortamı Flash’ta yapılan animasyonların çizimleri Flash içinde de hazırlanabiliyor, istenildiğinde Photoshop, Illustrator gibi programlarda hazırlanıp Flash’a kolayca aktarılabiliyor.Html5’te ise animasyon görselleri sadece çizim programlarıyla hazırlanıp parçalar ayrı-ayrı kaydedilip HTML5 kodlarıyla görseller bir araya getirilip anime ediliyor.Ayrıca Flash ve HTML5 vektörel çizim ve animasyonları destekliyor.
  • Text Animasyonlar (metin animasyonlar) Text (metin) animasyonlar, çoğu animasyon severin işine yarayan bir özelliktir. Flash’ta bilindiği üzere bu özellik mevcut. Flash’ta animasyon yapmak isteyenler Metni yazıp ActionScript ile bir takıp animasyonlar hazırlayabilir, ya da metni çizime dönüştürüp kodlardan bağımsız olarak istediği her türlü animasyonu hazırlayabilir. Yazıyı çizime dönüştürmek oldukça kolay bir işlemdir. Bu sayede yazı animasyonları yapmak isteyenler yazıları tek tek çizmek ve kare kare animasyonunu hazırlamaktan kurtulmuş oluyor.Html5’te de Text animasyonlar ve effectler mevcut. Ancak Flash’a oranla çok yetersiz. HTML5’te yazılan yazılar kodlarla anime ediliyor ve bu istenilen sonucu vermiyor. Çoğu yazı animasyonu bu yüzden sistemi gereğinden fazla yoruyor. Yazıyı yazıp çizime dönüştürme özelliği ise HTML5’te mevcut değil. Zaten HTML5’te yapılan bütün animasyonların görselleri Photoshop gibi programlarda hazırlanıp , parçalanıp kodlarla ayrı ayrı anime ediliyor.Bu yönleriyle incelediğimizde Text Animasyonlar konusunda Flash , HTML5’in ilerisinde görünüyor.

Önümüzdeki sayı “HTML5 ve Flash” incelememize devam edeceğimiz için şimdilik burada noktalıyoruz. Gelecek sayıda 3D, Multitouch, Arayüz, Kod Yazma, Gizlilik, Uyumluluk ve Güvenlik konularında Flash ve HTML5’i kıyaslamaya devam edeceğiz.

Adobe CS5, Flash CS5 Yenilikleri

Bildiğiz üzere Adobe CS5 ürünlerini 12 Nisanda tanıttı.

Çarşamba günü de (14 Nisan) Adobe’nin Türkiye distributörü Medyasoft tarafından parti tadında bir lansman gerçekleştirildi.

Partide bol müzik , servis ve eğlencenin yanında bir de CS5 ile gelen yeniliklerden bahsedildi. Lansmana Medyasoft ekibi ve Adobe Türkiye ekibiyle beraber kalabalık bir meraklı gelmişti.
Hakan Çamoğlu, Halid Özgür ve Erhan Meydan konuşmacı olarak bazı yeniliklerden bahsettiler.

Açıkcası Adobe tarafından bana verilen beta sürümlerini 5-6 aydır zaten kullanıyorum. Bütün programların aşağı yukarı yeniliklerinden haberdarım.

Photoshop ve AfterEffect’te çok güzel yenilikler var. Tabi bütün programların yeniliklerinden bahsedemeyeceğim. Ben ilk olarak Flash CS5 ‘in yeniliklerinden bahsetmek istiyorum.

İlerleyen zamanlarda Flash Catalyst ‘ten başlayarak diğer cs5 ürünleri hakkında yazılar yazabilirim.
Diğer bütün programların yeniliklerini konu alan videolar Vidobu’dan Hakan Çamoğlu, Halid Özgür ve Erhan Meydan tarafından hazırlandı . Bu videoları izleyip bütün programların yeniliklerini görebilirsiniz.
İzlemek için tıklayın

Flash CS5 YenilikleriBurada ilk olarak daha önceki yazımda gösterdiğim giriş ekranını göstermek istiyorum;

Evet bu giriş ekranı.. Fazlasıyla havalı.. Şimdi gelelim içine.

Arayüz olarak çok büyük değişiklikler yok ki zaten genel olarak Flash’ta çok büyük değişiklikler yapılmamış. Flash Player ve Flash Catalyst’e daha çok ağırlık verilmiş durumda.

Code Snippets

İlk olarak dikkati çeken özellik Code Snippets;

Bu özellik kodlarla uğraşmak istemeyenler için. Daha az kod yazan ve onları bile yazmak istemeyenlere..
Görüntüde görüldüğü gibi bir panelden ibaret. MovieCliplere hiç uğraşmadan listede yer alan özellikleri vermenizi sağlıyor. Mesela kod yazmadan listedeki Click go to web page ‘i tıkladığınızda seçmiş olduğunuz MovieClip’e otomatik olarak kod ekliyor ve istediğiniz adrese tıklandığında gitmesini sağlıyor.
Ekranda görüldüğü gibi kodu action paneline atıp açıklamalarını da size yazıyor.

Motion Preset

Bu özellik daha önceki versiyonda da vardı. Ancak bu versiyonda listedeki hazır tween sayısı arttırılmış gibi görünüyor (önceki versiyon şuan bende olmadığı için tam emin değilim)

Henüz bunu bilmeyenler için anlatayım, Code snippet benzeri birşey. Code yerine otomatik tweenler ekliyor. Top zıpyalıyışı animasyonu, blurlu obje animasyonu gibi.

ActionScript Paneli

Bu versiyon ile ActionScript kodları yazarken daha rahat olacaksınız. Otomatik tamamlayıcılar çok iyi geliştirilmiş.
Kodu yazmaya başladığınız anca size liste sunuyor ve yazmadan o listeden seçebiliyorsunuz. Ayrıca listede iconlarla özelliklerini ayırmış durumdalar.

Ekran görüntüsü şu şekilde ;

Iphone Uygulamaları

Flash CS5 ile artık iPhone uygulamaları hazırlayabiliyoruz. Açarken iPhone seçeneğini tıklayıp yaptığımız uygulamayı iPhone uygulaması olarak çıktısını alabiliyoruz.  Tabi bunu test etmek lazım , test edebilmek için de bir iPhone’nunuz olmalı ben 1-2 test dışında birşey yapamadım mesela çünkü iPhone’um yok 🙂

Bu konu ile ilgili Lee Brimelow ‘un bir videosu var. Onu izleyerek nasıl hazırlandığı hakkında fikir sahibi olabilirsiniz.
Video için tıklayın

Tabi bu aralar Apple ile Adobe arasında bir kavga var sonucu ne olur bilinmez. Belki ilerde bu özellik kaldırılır ya da Flash ile yapılan uygulamalar iPhone ‘da kullanılamaz hale gelir. Ya da Apple Store’a yüklenemez hale de gelebilir.

Bakalım bekleyelim…

TLF Text

Flash CS5 ile TLF Text diye birşey eklendi. Text yapıları tamamen değişti.
Yazı yazdığınızda properties panelinde Classic Text ve TLF Text diye iki seçeneğe sahipsiniz.

Classic Text zaten bildiğimiz önceki versiyonlardaki Text yapısı. TLF ‘ye gelince.

Bu text yapısı tamamen inDesign ya da Freehand ‘deki text yapısı gibi. Paragraf tasarımını çok daha kolaylaştırıyor.

inDesign ya da buna benzer diğer programları kullananlar daha iyi bilecekler. Örneğin bir paragrafı kopyalayıp sahneye tlf text alanına yapıştırdık. Aşağıda göstereceğim resimdeki gibi hepsi sığmayacak ve köşede + şeklinde kırmızı bir işaret çıkacak.
Buna tıkladığınızda yazının görünmeyen kısmını kopyalıyor daha doğrusu kesiyor. Her hangi bir yere text alanı açtığınızda da devamını oraya yazıyor.

Aynı zamanda tıpkı inDesignda olduğu gibi tek text alanında sütunlar oluşturabiliyorsunuz. Ya da yatay , dikey seçeneklerini kullanabiliyorsunuz.

Ayrıca Arapça gibi tersten okunan yazılar için sağdan başlama ayarı da eklenmiş durumda.

Aşağıdaki görselde yukarıda yazdığım yazıyı kullandım.1. paragrafa sığmadığı için bahsettiğim + işaretine tıklayıp 2. paragraf için text alanı açtığımda devamı otomatik oraya gitti. Sonra buna da sığmadığı için 2. parafraftaki + yı da tıkladıp ve 3.yü oluşturdum. Görsel 3. yü oluştururkenki hali.

Text Embed

Bu versiyonda Text Embed de bayağı geliştirilmiş. Öncelikle embed ettiğinizde o kaydediliyor ve diğer text alanları için embed panelini açtığınızda önceden kayıtlı olanı seçebiliyorsunuz.

.xfl Formatında çıktı

Eski versiyonlarda Farklı kaydet dediğimizde sadece bir önceki versiyonda kaydetmemiz için ekstra bir seçenek sunuyordu.

Flash CS5 versiyonunda xfl diye bir seçenek eklenmiş. Bu seçenekle kaydettiğinizde xml bir klasör oluşturuyor  ve xml dosyalarıyla dosyanın bilgilerini size sunuyor.  Daha sonra bunu olduğu gibi tekrar flashta açabiliyorsunuz.

Bütün flashta yaptıklarınız bu xml dosyaları içinde saklanmış oluyor. Ayrıca bu xml dosyalarını herhangi bir editör ile açabiliyorsunuz.

Bu flashtaki bütün görselleri klasöre çıktı olarak alıyor.. Aslında bu özellik diğer programlarda daha önce mevcuttu. Mesela ben inDesign’da bunu kullanmıştım.

1. si kaydederken, 2.si oluşturduğu dosya , 3.sü xml’in içindekiler

Video ve Arayüzleri

Bu versiyonda video arayüzleri biraz daha değiştirilmiş. Arayüzteki renkleri renk paletinden rahatça değiştirebiliyorsunuz.

Cue Points özelliği ile videolarınıza istediğiniz saniyelerde işaretler koyabiliyorsunuz.

Evet sanırım anlatacaklarım bitti 🙂 Aklıma şimdilik gelenler bunlar ama ilerde yeni özellikleri de yazıya dahil edebilirim.

İlerleyen zamanlarda eğer başka yerlerde bahsedilmemişse Photoshop ve illustrator daki yeniliklerden bahsetmeyi düşünüyorum.  Bu zamana kadar bu yenilikleri yazacak olan biri olursa da size linklerini sunacağım 🙂

Çok uzun oldu okuduğunuz için teşekkürler. Görüşmek üzere.

Adobe Creative Suite 5 ( CS5 ) Çıktı!

Adobe, önceden belirlediği gibi 12 nisanda creative suite 5 ‘in lansmanını online olarak yaptı.
Yeni ürünler ;
Photoshop CS5, ExtendedIllustrator CS5, InDesign CS5, Acrobat 9 Pro, Flash Catalyst CS5, ,Flash Professional CS5, Flash Builder 4, Dreamweaver CS5, Fireworks CS5, Contribute CS5, Adobe Premiere Pro CS5, After Effects CS5Soundbooth CS5, Adobe OnLocation CS5, Encore CS5

Herkes gibi ben de geri sayımı takip ettim ve derken vakti geldi. Saat 5 gibi tanıtım başladı.
Açıkcası lansman umduğumuz gibi değildi 🙂 . Aşağıda sunacağım Türkçe yenilikler serisi daha çok işinize yarayacaktır 🙂

Tanıtımı izlerken dikkatleri çeken tabi ki Apple logolarının kapatılmasıydı 🙂 Bilindiği üzere Adobe ve Apple ‘ın arası hiç de iyi değil. Neyse konumuza dönelim,

Ürünler ise her zaman olduğu gibi harika.. Bir çok yeni özellik eklenmiş..

Aşağıda CS5 ile ilgili bir takım videolar sunacağım..

Aylar önce Cs5’i test etmeye başladığımda giriş ekranlarının değiştiğini görmüştüm. İlk gün bunun bilgisayardan kaynaklı bir sorun olduğunu düşünsem de sonradan giriş ekranlarının değiştiğini anladım 🙂

Giriş ekranları aşağıdaki gibi entresan olmuş (aşağıdaki flash giriş ekranı);

Bunun gibi bütün programların giriş ekranları değişmiş. Tabi hepsi Flash gibi değil her birinin küçük bir farkı var 🙂

Videolarda da izleyeceğiniz gibi photoshop’a çok güzel yeni özellikle gelmiş.
Flash ile ilgilinenler için de özellikle kodlamada güzel yenilikler var.. Code Snippet kodlarla uğraşmak istemeyenler için ideal..
Dreamweaver ‘ın Adobe BrowserLab ile Entegrasyonu gayet güzel olmuş..

Şimdi gelelim videolara,
Lansmandan görüntüler izlemek isteyenler için;  http://cs5launch.adobe.com

Ayrıca http://tv.adobe.com adresinden de yeniliklerle ilgili videoları takip edebilirsiniz.

Vidobu ekibinden Hakan Çamoğlu, Erhan Meydan ve Halid Özgür tarafından hazırlanan Türkçe yenilikler video serisi için şu adresi ziyaret edebilirsiniz.
http://www.vidobu.com/cs5_yenilikleri/ veya http://www.vidobu.com/cs5_yenilikleri/

Bu arada Medyasoft, Çarşamba günü Adobe Creative Suite 5 özel lansman partisi düzenliyor.
Ben de orada olacağım . Katılmak isteyenler http://www.medyasoft.com.tr/Adobe/CS5_Lansman/ adresinden formu doldurabilir.

İyi seyirler , görüşmek üzere…