Adobe Edge ile HTML5 Animasyon Örneği

adobe edge html5 animasyonu

Bir önceki yazımı okuduysanız Adobe‘nin çıkarmış olduğu Adobe Edge adlı programından bahsetmiştim. Biraz inceledikten ve fırsat bulduktan sonra, yapılması kolay basit bir HTML5 Animasyon örneği yaptım.

Adobe Edge ile yaptığım HTML5 Animasyonunu izlemek için tıklayın.

Izleyince göreceğiniz gibi grafikler mevcut. Bu grafikleri Illustrator’da çizip, Adobe Edge programında Import ettim. ( Adobe Edge hakkındaki yazımda da bundan bahsetmiştim. )

Adobe Edge nedir?

Adobe Edge hakkında yazdığım yazı için tıklayın.

Animasyon biraz basit olabilir ama Adobe Edge geliştikçe ve bizler de uğraştıkça daha güzel animasyonlar çıkacaktır.

Yapmış olduğunuz örnekler varsa yorum olarak ekleyebilirsiniz, onları yazıya dahil edebilirim.

Teşekkürler

HTML5 aracı Adobe Edge

Adobe, HTML5, CSS3, JavaScript gibi animasyonları kolay yoldan hazırlamak icin bir araç yayınladı. Adı Adobe Edge. Aslında 2 haftayı buldu ama ben pek inceleme firsatı bulamamıştım. Geçenlerde indirip inceleme fırsatı buldum.

Genel olarak Adobe Edge programı incelendiğinde basit bir arayüze sahip olduğu görülecektir. Ozellikle Flash ve After Effect kullanmış olanlar için kullanımı çok kolay olacaktır.

Henüz beta sürecinde olduğu için adı Adobe Edge ‘Preview’. Bu araca zamanla yeni özellikler eklenecektir.

Animasyonları hazırladıktan sonra HTML formatında çıktı alabiliyorsunuz.

Öncelikle birkac örnek, Adobe Edge‘i indirme linki ve Adobe Edge hakkında yapılan e-Semineri yazmak istiyorum. Daha sonra Adobe Edge programının detaylarından bahsedeceğim.


Adobe Edge Örnekleri

Adobe Edge sayfasında yer alan örnekler;

  1. wordAnimation.html
  2. wordAnimation2.html
  3. Test.html
  4. Wheel.html
  5. csAd004.html
  6. Edge_sample_solarsystem.html
  7. Edge_sample_planetEarth.html
  8. Edge_sample_timeclock.html

Adobe Edge ile hazırladığım basit bir örnek;
http://aliogul.com/edge/edgedeneme.html

Adobe Edge Download

Adobe Edge’i indirmek için tıklayın.

E-Seminer

Geçenlerde AdobeGunlugu‘nden Halid Özgür ve Hakan Çamoğlu tarafından Adobe Edge hakkında eSeminer yapıldı. Ben izleyemesem de yapılan seminerlerin kayıtları tutuluyor.

Adobe Edge e-Semineri izlemek için tıklayın.


Açılış Ekranı

Adobe Edge ‘i  indirip açtığınızda koyu gri bir ekranla karşılaşacaksınız. Adobe programlarını kullanmış olanlar için tanıdık gelecektir.

Adobe Edge SplashOrtada yer alan ‘Get Started‘ alanında yer alan ‘Create New”i tıkladığınızda karşınıza klasik bir ekran gelecektir.

Solda ‘Properties’ paneli, ortada Flash ve AE gibi boş bir sahne ve sağda da ilgili diğer ayar panelleri.
En altta ise yine Flash gibi AE gibi bir Timeline (zaman çizelgesi) yer almakta. Bu sayede animasyonunuzu kontrol edebiliyorsunuz.

Daha önce kaydetmiş olduğunuz dosyayı da ‘Open File”i tıklayarak açabilirsiniz. Ayrıca yine her Adobe programı gibi en son açtıklarınız, şuan görselde görunmeyen alanda, sağ tarafta listeleniyor.

Import

File > Import seçeneğini tıklayıp daha önce Photoshopta, Illustrator  gibi programlarda hazırlamış olduğunuz görselleri Adobe Edge programında sahneye ekleyerek göze hoş gelen animasyonlar hazırlayabilirsiniz.

Paneller & Araçlar

Properties paneliSahne boşken veya hiçbir şey seçili degilken sol tarafta Properties panelinden sahnenin rengini, yükseklik ve genişlik ayarını yapabilir, dosyanıza isim verebilirsiniz.

Hemen bu panelin üstünde ‘Selection tool’, ‘Rectangle tool’, ‘Rounded Tool’ ve ‘Text tool’ yer almakta. Zaten şimdilik araçlar sadece bunlardan ibaret.

Daha önce bu tarz herhangi bir program kullanmış olanlar zaten bu toollara alışkın olacaklardır. Ama yine de açıklamakta fayda var; sırasıyla 

  1. Seçim aracı,
  2. Kare veya dikdörtgen çizme aracı,
  3. Kenarları yuvarlar kare veya dikdörtgen çizme aracı ve
  4. Yazı yazma aracı.

Ayarlar Panelleri

text propertiesHer bir çizim veya yazı yazarken aşağıda Timeline’da her biri için bir Layer oluşturuluyor.
Sahnede yer alan bir çizimi ya da text’i seçtiğinizde sol tarafta Properties panelinde o obje ile ilgili ayarlar çıkıyor.
-Soldaki görselde yer aldığı gibi.-
Sahnedeki text’i seçtiğimizde soldaki gibi ayarlar çıkmakta.
  • En üstte yer alan text’in adı (yazılan yazi değil)
  • Location bölümü objenin sahnedeki yerini belirliyor. X ve Y değerlerini değiştirerek objeyi belli bir yere taşıyabilirsiniz.
  • Size bölümü yine objenin genişliğini ve yüksekliğini ayarlamak için.
  • Hemen altlarında yer alan Opacity bölümü seçili objenin transparanlık ayarı.
  • Suan görselte yazı seçiliykenki hali gördüğünüz için, yazının büyüklüğü, font karakteri benzeri ayarları görmektesiniz.
  • Transform Origin bölümü ise, objeyi döndürme, büyükme, bükme gibi ayarlar için

Hepsinde gördüğünüz gibi sol taraflarında kare şeklinde bir ikon bulunmakta. Bu ikonun ne işe yaradığını merak edenler için;

Aslında bütün animasyon bu ikonlarla işlemekte. Flash kullanmış olanlar için bu yabancı gelebilir ama After Effect kullanmış olanlar için oldukça tanıdık gelecektir. Bu özellik Adobe Edge‘te de mevcut.

Bu ikonlar animasyon için keyframe eklemekte. Ornek vermek gerekirse; siz bir objeyi sol taraftan sağ tarafa anime etmek isterseniz, önce soldayken Location bölümündeki Y’nin ikonunu tıkladıktan sonra timeline da ileriye gidip tekrar bu ikonu tıklayıp objeyi sağ tarafa taşımanız yeterli oluyor.

Bütün animasyon bu mantıkla işliyor.

Timeline

Aşağıda yer alan timeline bölümü görselde gördüğünüz şekilde. Her obje için layerlar alt alta sılalanmakta.

Daha önce de dediğım gibi After Effect timeline’nına çok benziyor.

Suan sadece Text2 objesi ve Layer’ı yer almakta.
Yukarıda bahsettiğim ayarların aynısınıburada da görebilirsiniz. Yine ikonları burada da göreceksiniz ve kolayca keyframe ekleyebileceksiniz.

Görselde gördüğünüz gibi 0 noktasında Opacity’yi 0 yapıp bir keyframe oluşturdum ve ilerleyip orada da bir keyframe oluşturup Opacity’yi 100 yaptim. Böylece anımasyon ilerleyince yazmış olduğum yazı sahneye o şekilde gelmiş olacak.

Suan için yeterince araç yokmuş gibi görünse de ilerleyen zamanlarda Adobe Edge geliştirilecektir.

Yazının sonunda basit bir örnek paylaşmak istiyorum; http://aliogul.com/edge/istanbul

Teşekkürler