Flash ile kara-kalem çizim animasyonu

Adobe Flash ile herhangi bir görseli Photoshop ile karakalem çalışması izlenimi verip daha sonra bunu Flash ile çiziliyormuş izlenimi kazandırmak.



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...
  • Etiketler;
Ercan Altuğ Yılmaz
1981 İstanbul doğumlu. Öğrencilik kariyerine Maltepe Üniversitesinde e-MBA yaparak devam etmektedir. <p>Eğitmenliğe 2000 yılında Akademi-İstanbul'da Web Tasarımı eğitimleri vermekle başladı. İznik Akademisi, Digiturk, Medyasoft, SmartPRO gibi yerlerden sonra, şu an Netron Bilişim Akademisi Web & Grafik Tasarım Ürünleri Eğitmenidir. <p> Sanalkurs.net üzerindeki dersleriyle de sizlere yol göstermeye devam edecek.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

Teşekkürler iyi bir çalışma.
çok hoş bir ders olmuş eline sağlık
faydalı olmazmı. yeni bır teknik ögrendim. tesekkürler kardesim.
çok güzel olmuş ellerine sağlık bilgiler için sağol imza örneği süper :D
çok güzel bir çalışma eline sağlık. Böyle hareketli çalışmlar bir başka oluyor yahu:kirp:
yapılan çalışmaların herbiri harika.çalışmaya devam
Çok faydalı bi ders. Teşekkürler. Elinize sağlık...
ellerinize sağlık çok sağlam bir ders olmuş
Aklıma takılan konulardan bi tanesiydi, emeğinize sağlık..
gerçekten teşekkürler..
Gerçekten çok harika teşekkürler
super bi s iite olmus cok faydalı bilgiler var.Yapanların eline sağlık....:D
çok güzel bir çalışma teşekkürler
Bunu normal yazı yazıpta yapabilirmiyiz.Ben denedimde yazıyı silemiyorum Eraser Tool ile
Yazıyı full seçin o vektörel gelir CTRL-b Break apart yapıp shape(şekli) yapın ve devam...
teşekkürler..
slm. Flash da yaptığımız swf animasyonları,Front Peace de hazırladığımız sayfamıza nasıl ekleriz .cevap lütfen.
SLM .Teşekkür ediyorum ateş,Sağol
ellerine saglık cok guzel bı çalısma :gul::gul::gul::gul:
HOCAM ŞUANAA KADAR YAPTIÐIMIZ HİÇ BİŞİ DOÐRU ÇIKMADII adaletmi bu???*
ellerın dert gormesın cok saolasın
elinize sağlık gerçekten çok işime yarıyacak.
çoktşkler güzel çalışma
çookk saoll çok ilginç ama işe yarayan bi çalışma
merhaba şahane bişi bu... tesekkurler.:):D:gul:
paylaşım için çok teşekkür ederiz...süper
MRB BU ÇİZİMİ YAPMAK İÇİN ADOPE FLASH PROGRAMI GEREKLİYSE BEN BU PROGRAMI BİLGİSAYARIMA NASIL YÜKLİYCEM YARDIMCI OLURMUSUNUZ

Yukarı Git