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.

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 

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

Her bir çizim veya yazı yazarken aşağıda Timeline’da her biri için bir Layer oluşturuluyor.

-Soldaki görselde yer aldığı gibi.-

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