Flash Dönen Dünya Animasyonu Yapmak
DERS ADI
:
Flash Dönen Dünya Animasyonu Yapmak
DERS KODU
:
adobe flash
MARKA
:
Flash Dönen Dünya Animasyonu Yapmak
İÇERİK
:
macromedia flash spinning world
Açıklama
:
Flash Dönen Dünya Animasyonu Yapmak

Flash programı ile tek bir fotoğraf kullanıp; motion tween, mask kullanımlarıyla dönen dünya animasyonu gerçekleştireceğiz. Ayrıca yan bilgi olarak; align, filter, convert to symbols, button düzenleme, frame copy/paste, silme konuları da açıklamalı anlatılacaktır. (Videoyu kesinlikle izleyiniz.)
 
 
 
 
Flash programında dünya dönüyor animasyonunu oluşturmaya başlayalım. Öncelikle yeni bir döküman açalım;
File Menüsü --> New (Ctrl+N)
 


http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_01.jpg

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_02.jpg

Şimdi bize gerekli olan bir dünya fotoğrafı. File Menüsü altından Import ordan da Import to Stage.. komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_03.jpg

Dünya fotoğrafının olduğu yere gidelim ve dosyayı işaretleyip, "open" komutuna basalım. 

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_04.jpg

Fotoğrafın boyutlarına dikkat edelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_05.jpg

Boşluğa tıklayalım ve aşağıdaki "size" bölümüne tıklayıp;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_06.jpg

Açılan "Document Properties" penceresinden şu değerleri girelim; (Fotoğrafın boyutlarını birebir giriyoruz. "Frame Rate" değerine dikkat 24 olursa animasyonumuz daha akışkan olur.)

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_07.jpg

Align menüsünden (Ctrl+K) "To stage" (İşaret 1) aktif olacak şekilde yatay ve dikey ortalamasını yapalım. (İşaret 2 ve 3);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_08.jpg

Fotoğrafımız aktifken "Modify" menüsünden "Convert to Symbol" (F8 kısayolu) komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_09.jpg

Açılan "Conver to Symbol" menüsünden adını= dunya, Type = Movie Clip olarak değiştirelim.

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_10.jpg

Movie üzerine sağ tıklayıp "Edit in Place" komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_11.jpg

Timeline üzerinde 60. frame'e sağ tıklayıp (İşaret 1) "Insert Keyframe" komutunu verelim. (İşaret 2)

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_12.jpg

Ardından Timeline sol altında bulunan sembole tıklayıp yeni bir layer yapılmasını sağlayalım. (İşaret 1), oluşan layer'a "hizalama" adını verelim (İşaret 2), burda oluşturacağımız şekiller yapacağımız motion tween bitiş ve başlangıç nesnelerinin sahneye tam sıfır noktalarından yapışmasını sağlayacaktır. (Snaplerin açık olduğundan emin olunuz!)

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_13.jpg

"Hizalama" adını verdiğimiz layer üzerinde araç kutusundan kare aracını seçip (İşaret 1) basit bir dikdörtgen oluşturalım (İşaret 2) ve sahne sağ yanına snap yardımı ile yaslayalım.;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_14.jpg

Free Transform aracını aktif edelim ve nesnenin sol dikeyindeki transform kutucuğundan tutup sağ yana çekelim, bu sıfır noktasından sahnenin dışına doğru bir hiza almamızı sağlayacak.;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_15.jpg

Daha sonra Alt ve Shift tuşları yardımıyla (Alt tuşu kopyalamayı, Shift ise taşırken hizadan kaçırmamayı sağlar.) nesneyi sol tarafa kopyalayarak yine aynı şekilde bu sefer sola çekelim, bu da sahne solunda bir sıfır noktası hizalama konumu yaratacaktır.

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_16.jpg
http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_17.jpg

Tekrar Timeline'a dönüp Layer1 üzerinde orta bir frame'e sağ tıklayıp "Create Motion Tween" komutunu verelim:

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_18.jpg

Animasyonumuzun ilk adımı oluşmuş oldu, şimdi 60 kareyi aktif edelim (İşaret 1) ve Shift tuşu yardımıyla sağ üstteki kırmızı kareye snaplenecek şekilde nesneyi taşıyalım;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_19.jpg

Tüm Layer1 frame'lerini seçelim (işaret 1) ve sağ tıklayıp "Copy Frames" komutunu verelim (işaret 2);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_20.jpg

Yeni bir layer açalım (işaret 1 ve 2), ilk frame'e sağ tıklayıp (İşaret 3) "Paste Frames" (İşaret 4) komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_21.jpg

Frameler yapıştı yalnız küçük bir sorunumuz var, hemen giderelim. 61. frame 'e sağ tıklayıp (İşaret 1) "Insert Blank Frame" komutunu verelim. (İşaret 2);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_22.jpg

61. frame'den sonra boşalan bölüme çift tıklayıp seçilmesini sağlayalım (İşaret 1) ve işaretli bölüme sağ tıklayıp "Remove Frames" (İşaret 2) komutunu verelim. 60'dan sonra hiç frame kalmadı değil mi?;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_23.jpg

Layer3 üzerinde 60. framedeki nesneyi alıp (İşaret 1) Shift tuşu yardımıyla üstteki sol ve sağ kırmızı karelere snap olacak şekilde sahnenin tam ortasına taşıyalım (işaret 2);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_24.jpg

Mantık şu; Layer 1 deki animasyon biterken Layer 3'deki animasyon onu takip edecek ve dünya sürekli dönüyormuş izlenimi verecek. Tabii Layer 3'ün ilk frame'ini de gerekli olan yere taşımamız gerekecek.;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_25.jpg

Layer3'ün ilk frame'indeki nesneyi de yine Shift tuşu yardımıyla sola doğru taşıyoruz. Sol üstteki kareye snap olmasına dikkat ediniz;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_26.jpg

Hizalama adını verdiğimiz layer ile işimiz bitti, isterseniz gözünü kapayıp sağ tıklayalım ve "Guide" komutu verelim. (swf testimizde görünmesini, animasyona girmesini engeller) yada insiyatifi size bırakıyorum, "Delete Layer" komutuyla tümden silin.

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_27.jpg

Evet dünya şeklinde bir mask alanına gereksinimimiz var. Yeni bir layer yaratıyoruz (İşaret 1), ilk frame'ini aktif ediyoruz (İşaret 2), "Elips" aracını seçiyoruz (İşaret 3) ve sahne boyunu dikeyden aşmayacak şekilde bir elips yaratıyoruz. (İşaret 4);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_28.jpg

Elipsi oluşturduğumuz layer4 üzerine sağ tıklayıp "Mask" komutunu veriyoruz ;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_29.jpg

Boşlukta kalan Layer1'i de Mask yapılmış Layer4 altına taşıyoruz (videoda ayrıntılı görebilirsiniz);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_30.jpg

"Control" menüsü altından "Test Movie" komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_31.jpg

Animasyonu bir görelim, hızı vs nasıl bir inceleyelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_32.jpg

60 frame'lik 24 fps bir animasyon hızlı görünebilir. Frame sayısını artırarak yavaşlamasını sağlayabiliriz. Burda gelişigüzel yaklaşık 30 frame'lik bir alan seçtim (İşaret 1) ve sağ tıklayarak "Insert Frame" (F5) komutunu verdim (İşaret 2), böylece frame sayısı yaklaşık 90'lara çıktı, üstüste birkaç kez daha bu komutu verip yaklaşık olarak 150 frame'in üzerine çıkmasını sağlayınız ki dünyamız fazla hızlı dönmesin ;)

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_33.jpg

Evet dersi burada dilerseniz kesebilirsiniz, animasyon mantığının nasıl olacağını kavradınız. Ama bu animasyona ileri düzey birkaç şey de ekleyebilirsiniz. Burdan sonrası sizin isteğinize kalmış, dilerseniz buyrun;

Devam etmeye karar verdiysek, bu dönen dünya animasyonu movie'si içine bir de buton ekleyelim. Bu, fare üzerine geldiğinde dünyanın durmasını, çektiğimizde ise animasyonun devam etmesini sağlayacak. Mask yaptığımız elipsin boyutu bizim için uygun, aktif ettikten sonra (aktif olmuyorsa layer bölümünden maskın kilitlerini kaldırabilirsiniz.) sağ tıklayıp "Copy" komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_34.jpg

Yeni bir layer açıp (İşaret 1) "BUTON" adı verelim (İşaret 2) ve ilk frame'ini aktif edelim (İşaret 3);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_35.jpg

Edit Menüsü'nden "Paste in Place" komutunu verelim ki (Ctrl+Shift+V) tam kopyaladığımız yerdeki koordinatlara otursun;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_36.jpg

Daireyi de karışmasın diye farklı bir renge boyadık, F8 tuşuna bastık (Convert to Symbol) ve açılan pencerede değerlerimizi girdik. (Dikkat: Tipi Button);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_37.jpg

Butonumuz aktif ve hemen Actions bölümünden action script kod penceremizi açalım (Kısayolu= F9);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_38.jpg

Açılan pencereye hemen şu kodları yazalım;
 

on (rollOver) {
    stop();
}
on (rollOut) {
    play();
} 


http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_39.jpg

F9 kısayoluna tekrar basıp action script kod penceresinin gizlenmesini sağlayalım ve butonumuzu düzenlemek için üzerine çift tıklayalım, buton time line'ında boş yerlere sağ tıklayıp (İşaret 1) "Insert Keyframe" komutunu verelim (İşaret 2), bu dairemizin Up dışında Over, Down ve Hit alanlarında da çoğalmasını sağlar. (Dilerseniz ardarda 3 kez F6 tuşuna da basıp buton framelerini doldurabilirsiniz.);

Açıklama:
Up = Butonun normal görünüş hali (Burada sileceğiz çünkü dünyanın üstünün kapanmasını istemiyoruz)
Over = Fare buton üzerindeyken butonun alacağı görüntü.
Down = Fare ile buton üzerine bastığımızda butonun görüntüsü.
Hit = Görsel olarak önemli değildir, alanı önemlidir, farenin buton üzerine geldiği alanın buton sınırlarını belirler. (gereğinden fazla büyük ve küçük yapmamakda yarar vardır.)

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_40.jpg

Evet, "Up" bölümündeki daireyi siliyoruz. (Cut komutu ile veya delete komutuyla);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_41.jpg

"Over" bölümünü aktif ettik ve dairemizi seçip F8'e bastık, tipi "Graphic" yapıyoruz, neden? Çünkü Alpha, Color, Tint vb atamalarını başka türlü yapamayız;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_42.jpg

Aşağıda Properties penceresinden Alpha'yı aktif edip, değerini de %20'lere kadar çekebiliriz. Fare buton üzerine geldiğinde soluk bir görüntü oluşacak;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_43.jpg

"Down" kısmı için de farklı bir renk ve alfa değeri girebilirsiniz, size bırakıyorum. Çok da önemli bir kısım değil. Hit alanı da animasyon alanına eşit olduğu için ellememenizde yarar var.

Evet boşluğa çift tıklayıp buton düzenlemesinden üst tarafa çıkalım (dunya movie içine döndük.);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_44.jpg

Sıkılmadıysak artı görseller katmaya devam edelim. Bu sefer yukardan ışık vuruyormuş etkisi yapacağız. Yine layer oluşturalım (işaret 1), bendeki adı Layer7 oldu, ilk frame'ini aktif edelim (İşaret 2 ve 4), elips aracını seçip (İşaret 3) bir elip oluşturalım ve beyaza boyayalım (işaret 4), F8 komutuyla (İşaret 5) beyaz elipsimizi "Movie Clip" yapalım (İşaret 6), ok'e basalım (İşaret 7);

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_45.jpg

Properties penceresinde Filter bölümüne gidelim ve "+" işaretine tıklayalım;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_46.jpg

"Glow" komutunu verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_47.jpg

Değerlerini, rengini isteğimize göre verelim;

http://www.tuncolcay.com/ders/flash/flash_dunya_spin_world_tween_48.jpg

Test Movie ile çalıştıralım, evet dünyamız dönüyor...

İyi çalışmalar, başarılar...

Flag Counter