Adobe Flash ile çizim animasyonu tasarımı
Yazar : E.Altuğ YILMAZ
Merhaba arkadaşlar ;
bugün size Adobe Flash ile kalem çizer gibi bir çizim çıkarmayı göstermeye çalışacağım.Bir projede şirket binasını bu şekilde yapmak gerekince Photoshop programının da desteğini alarak bu şekilde güzel sonuçlar almıştık. Umarım sizde adımları algılayıp fotoğraflarınıza uygulayabilirsiniz.Özellikle imzalara canlı atılıyormuş izlenimi verebilmek için ideal bir yöntemdir ayrıca.
Öncelikle kara-kalem ile çizilmiş veya enazından çizilmiş gibi gösterebileceğimiz bir fotoğrafa ihtiyacımız var.Bu noktada kendi çizimine güvenenler çizebilir,veya Photoshop'tan yardım alabiliriz. Öncelikle Photoshop'ta anime edeceğimiz görselimizi açalım.Ben İstanbul'un simgelerinden Kız Kulesini seçtim. Burada önemli olan unsur görüntünün arka planının olmaması veya benimki enazından beyaz olması.Eğer bir imzaya uyguluyorsanız imzayı scanledikten sonra arkasını quick selection ile seçerek temizleyin ve transparan gif olarak kaydedin ve öyle kullanın. Benim gibi bir bina görseli olacaksa arkaplanı aynı şekilde temizleyin beyaz olarak kalabilir,ancak çizilecek unsur tek başına görünmeli.
Hemen işlemlerimize başlayalım , ilk işlemimiz fotoğrafı Photoshop ile kalemle çizilmiş efekti vermek için siyah-beyaz-gri tonlara getirmek. Alttaki gibi Image-Adjustments-Desature diyelim.
Photoshop fotoğrafı gri tonlara getirecektir. Daha sonra Layer panelinden layera sağ tıklayarak Duplicate Layer diyelim ve bir kopyasını alalım.
Oluşturduğumuz kopya layerda iken Image-Adjustment-Invert ile bu renkleri tersine çevirelim.
Şimdi üstteki layera bir Blend Mode vereceğiz. O layer seçiliyken Layer panelinin üstünde yer alan Normal seçili duran Blend mode'lardan Color Dodge seçin.
Ekranda görüntü kaybolmuş gibi olabilir ancak şimdi vereceğimiz filtre ile çizim şeklini kazandıracağız. Filter-Blur-Gaussian Blur diyin.Alttaki gibi bir önekran gelecektir,bu kısım önemli.Seçtiğiniz görselin renk yoğunluğu,parlaklığı gibi birçok unsura bağlı olarak buradaki Radius değerini siz önizleyerek vereceksiniz.Mini ekranda üstüne gelirseniz görselin tamamını da görebilirsiniz.Ben 9,3 verdim.Sizde çizim efektini kazandığına inandığınız rakamı verip OK diyin.
Böylelikle Photoshop ile görselimize sanki kalemle çizilmiş izlemini kazandırdık.Bu görseli save as-jpeg olarak kaydedin.Adobe Flash programında animasyon kısmına geçeceğiz,Flashı açın ve file-import to stage ile jpeg görselinizi sahnenize getirin. Burada önemli bir konu eğer çok büyük bir dosyada çalışıyorsanız onu büyük getirip küçültmek yerine o görselin photoshop ile dosyanın özünde küçültüp getirin çünkü flash ta büyük dosya siz küçültsenizde büyük boyutlu kalacaktır ve animasyonun boyutunu büyütecektir. Fotoğrafı sahnemizdeyken seçelim.Altta göstermeye çalıştığım gibi fotoğraf seçiliyken sahneniizn altındaki Properties kısmında bir bitmap tabanlı görsel seçildiğini belirtir ve çözünürlükleri(w;h) ile konumunu(x;y) verir. Bu görsel üzerinde parça parça silerek animasyonumuzu oluşturacağımızdan bunun üzerinde oynama yapabilmemiz için bu görseli şekile çevirmemiz gerekiyor.
Bu şekile çevirme işlemini şekili seçerek CTRL-B kısayolu ile Break Apart ile yapıyoruz.Flash animasyonlarına yabancı olmayanlar böylelikle bu şeklin animasyona hazır,bizim çizdiğimiz bir daireden farkı olmadığını bilirler.CTRL-B dedikten sonra artık şekli seçtiğinizde alttaki gibi Properties sekmesi Shape yazacaktır.Böylelikle o şekil üzerinde vektörel noktada tasarıma başlayabiliriz.
Bu noktada artık Timeline üzerinde işlemlere başlayacağız.Yapacağım işlemler her yeni framede yeni bir keyframe ekleyerek görselden bir kısmı Eraser Tool ile silmek olacak. Daha sonra komple görsel kaybolduktan sonra animasyonu tersine çevirerek sanki baştan çiziliyormuş gibi göstereceğiz. Bunun için 2.frame'e sağ tıklayarak Insert Keyframe (F6 kısayolu) diyelim.
Görsel aynen geldi , 2.frame de Eraser Tool'u seçelim ve allta gösterdiğim Eraser Toollarından sizin kafanızdaki tasarıma ve görselin silinecek kısmına uygun fırça büyüklüğünü seçin. Ve ekrandaki görselin bir köşesini silin.
Bu silme işlemini her yeni keyframe'de tekrarlayalım.Size burada tavsiyem çizgiler üzerinden gitmeniz ve çok fazla keyframe kullanmamanız olacaktır.Unutmayınki her keyframe animasyonun boyutunu da büyütmektedir. Aşağıda benim 27.keyframe için yaptığım alt kesimdeki silme gözüküyor.
Silme animasyonunuzun keyframeler eklerken nasıl gittiğini enter ile timeline üzerinde CTRL-Enter ile yeni bir flash player penceresinde önizleyebilirsiniz. Tabii burada varolan bir görseli yokediyoruz,en son işlem olarak bütün frame'leri seçtikten sonra sağ tıklayarak Reverse Frame ile bu animasyonu tersine çeviriyoruz.
Animasyonunuz eğer çok hızlı veya çok yavaş geliyorsa ( aslında bu sizin silme miktarınızdan dolayı öyle oldu) her zaman flashın fps (frame per second) ayarı ile oynayarak saniye başına gösterilecek frame sayısını azaltarak yavaşlatabilir çoğaltarak hızlandırabilirsiniz. Alttaki ekran sahnenizde boş bir kısma tıkladıktan sonra Properties kısmında altta gözükecektir.
Faydalı olması dileğiyle ....
7/11/07
başarılı bir uygulama tebrikler...
15/11/07
Hocam öncelikle merhabalar
Fazla derim photoshop bilgisi olmayan ve ilk defa flash'ta bir animasyon gerçekleştiren birisi olarak sade anlatımınız ve güzel bir örnek uygulama için teşekkür ederim.
Sayenizde ilk animasyonumu yaptım ve yapmış olduğum yeni siteye seve seve ekleyeceğim. Bu yazılarımı okuyanlar için söylediklerim komik gelebilir ama flash öğrenmeye yeni başladım, hep bilgisayar program vb.net , asp.net bir yere kadar dedim ve kendimi flash'a verdim. en azından bu örnek ile frame kavramını öğrenmiş oldum. anladığım kadarıyla frame ler, photoshopdaki layer ler ile aynı işi yapıyor.
Hocam tekrar teşekkürler , çalışma için tebrik ederim