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;
- wordAnimation.html
- wordAnimation2.html
- Test.html
- Wheel.html
- csAd004.html
- Edge_sample_solarsystem.html
- Edge_sample_planetEarth.html
- 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.
Ortada 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
Sahne 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
- Seçim aracı,
- Kare veya dikdörtgen çizme aracı,
- Kenarları yuvarlar kare veya dikdörtgen çizme aracı ve
- Yazı yazma aracı.
Ayarlar Panelleri
Her 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
