Flash'ta 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) Şimdi bize gerekli olan bir dünya fotoğrafı. File Menüsü altından Import ordan da Import to Stage.. komutunu verelim; Dünya fotoğrafının olduğu yere gidelim ve dosyayı işaretleyip, "open" komutuna basalım. (örnek EarthMap.jpg dunya_donuyor.rar uzantılı dosya içinde var!) Fotoğrafın boyutlarına dikkat edelim; Boşluğa tıklayalım ve aşağıdaki "size" bölümüne tıklayıp; 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.) Align menüsünden (Ctrl+K) "To stage" (İşaret 1) aktif olacak şekilde yatay ve dikey ortalamasını yapalım. (İşaret 2 ve 3); Fotoğrafımız aktifken "Modify" menüsünden "Convert to Symbol" (F8 kısayolu) komutunu verelim; Açılan "Conver to Symbol" menüsünden adını= dunya, Type = Movie Clip olarak değiştirelim. Movie üzerine sağ tıklayıp "Edit in Place" komutunu verelim; Timeline üzerinde 60. frame'e sağ tıklayıp (İşaret 1) "Insert Keyframe" komutunu verelim. (İşaret 2) 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!) "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.; 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.; 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. Tekrar Timeline'a dönüp Layer1 üzerinde orta bir frame'e sağ tıklayıp "Create Motion Tween" komutunu verelim: 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; Tüm Layer1 frame'lerini seçelim (işaret 1) ve sağ tıklayıp "Copy Frames" komutunu verelim (işaret 2); 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; 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); 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?; 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); 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.; 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; 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. 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); Elipsi oluşturduğumuz layer4 üzerine sağ tıklayıp "Mask" komutunu veriyoruz ; Boşlukta kalan Layer1'i de Mask yapılmış Layer4 altına taşıyoruz (videoda ayrıntılı görebilirsiniz); "Control" menüsü altından "Test Movie" komutunu verelim; Animasyonu bir görelim, hızı vs nasıl bir inceleyelim; 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 ;) 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; Yeni bir layer açıp (İşaret 1) "BUTON" adı verelim (İşaret 2) ve ilk frame'ini aktif edelim (İşaret 3); Edit Menüsü'nden "Paste in Place" komutunu verelim ki (Ctrl+Shift+V) tam kopyaladığımız yerdeki koordinatlara otursun; 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); Butonumuz aktif ve hemen Actions bölümünden action script kod penceremizi açalım (Kısayolu= F9); Açılan pencereye hemen şu kodları yazalım;

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