Ali OGUL – Blog

Tag: Adobe

  • 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

  • Flash Ödülleri 2012

    Flash Ödülleri 2012 (http://www.flashodulleri.com) sonuclandiktan sonra yarisma ile ilgili ve gelecek yil ile ilgili hicbir calisma yapmadim. Suana kadar 4 kez duzenlenen bu yarisma,  ozellikle Adobe‘den gerekli destegi almamakla beraber yine Adobe ile bir takim sorunlar yasanmasindan dolayi oldukca zor sartlarda gerceklestirildi.

    Yarismayi bilmeyenler ve detayli bilgi almak isteyenler yarisma sitesi olan http://www.flashodulleri.com adresini ziyaret edebilirler.

    Bu sebepten oturu yarismayi 5. kez duzenleme konusunda ozellikle gecen yil yasanan sponsor destegi sorunu yuzunden tereddutlere girdik.

    Yarisma her yil şubat ayinda gerceklestiriliyor. Olasi FO 2012 de Şubat 2012 de gerceklesecek. Henuz vakit var gibi gorunse de kesin bir karar olmadigindan bir calisma da gerceklestirilemedi.

    Kisacasi bu yarisma tamamen sponsorlarin (Ana sponsorluk, isim sponsorlugu, odul sponsorlugu, odul sponsorlugu, tanitim sponsorlugu) ilgisine gore ya 2012′de de devam edecek ya da son bulacak.

    Sponsorluk ile ilgili iletisime gecmek isterseniz [email protected] adresini kullanabilirsiniz.

    http://www.flashodulleri.com

  • 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…

  • Illustrator notları

    Bu dönem Digital Image Making and Manipulation (ilginç isim evet) dersinde vizede teslim edilmek üzere yaptığım birkaç çalışmayı aşağıda sunuyorum. Vize geride kaldığı için 🙂

    Hepsi varolan görseller üzerinden çizildi.

    Büyütmek için tıklayabilirsiniz.

  • Adobe Promosyonları (Defter, Kalem, Etiket)

    Bilindiği gibi FlashArsivi.com Adobe Flash Kullanıcı Grubu ve ben de bu grubun yöneticiyim.

    Adobe’un güzel uygulamalarından biri de Grup Yöneticilerine yılda 2 defa promosyon ürünler görmesi.

    2009 ilk yarısında bu hakkımı kullanmamıştım. Ama 2009 bitmeden 2. hakkımı kullandım.

    Geçenlerde bu promosyonlar elime ulaştı. Paketten şunlar çıktı;

    Resimde gördüğünüz defterden 3 tane.
    Resimde gördüğünüz Kalem paketinden 2 tane.
    Resimde gördüğünüz etiketler.

    Resmi aşağıda sunuyor Adobe ‘ a teşekkür ediyorum 🙂

    Adobe promosyonları