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.

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(); }
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.) Evet, "Up" bölümündeki daireyi siliyoruz. (Cut komutu ile veya delete komutuyla); "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; 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; "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.); 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); Properties penceresinde Filter bölümüne gidelim ve "+" işaretine tıklayalım; "Glow" komutunu verelim; Değerlerini, rengini isteğimize göre verelim; Test Movie ile çalıştıralım, evet dünyamız dönüyor... İyi çalışmalar, başarılar...

Tunç Olçay
1970 İzmir doğumlu yazar, 10 yıla yakın süren profesyonel müzisyenlik hayatına nokta koyup pc grafik hayatına (biraz geç de olsa) 1998 yılında başladı. <p>İlk çalışma alanı; Macintosh üzerinde, plotter kesim, Illustrator ve Freehand programları olmasına karşın bu işletim sistemi ve programlara ısınamadığını CorelDraw ve pc ile tanıştıktan sonra anladı. 1-2 yıl arası dizgicilik deneyimlerinden sonra kendi deyimiyle grafik üzerine dönüm noktası olan reprodüksiyon (renk ayrım/film çıkış) firmasında 2 yıla yakın çalışması sonucunda grafik ve dizgi üzerine adı geçen tüm programları hakim şekilde kullanmayı, renk ayrımını, montajı vs baskı öncesi tüm bilgileri burada öğrendi. <p>En büyük hobisi öğrenmek sayesinde programcılığa da merak saldı. Visual Basic ile bu dönemde tanıştı ve işine yarayabilecek küçük çaplı programlar yazmaya başladı. Çeşitli firmalarda Grafik Bölüm Şefliği deneyimleri yaşadıktan kısa bir süre sonra çalışmaya başladığı andaç üretimi yapan bir firmada Visual Basic altyapısı yardımıyla VBA'nın (Visual Basic Application) gücünün farkına varan yazar; Word, Excel ve CorelDraw altında otomasyon denemelerine başladı. Bu süreç içerisinde; otomatik sayfa yaptırımı, baskı öncesi hazırlık makroları üzerinde önemli kodlar geliştirdi. Buna bağlı olarak CorelDraw altında bir montaj programını da hayata geçirmiş oldu. <p>Daha sonra gelişmekte olan Web sektörüne geçiş yapıp 3 ortaklı bir firmaya dahil oldu ve; Asp, Flash, Dreamweaver, Action Script, Css, Html ve küçük çaplı 3d tasarımları üzerinde kendisini geliştirdi. <p> 2009 yılı sonunda bir firmanın davetlisi olarak gittiği Güney Amerika, Paraguay'da CorelDraw altında yaptığı VBA yazılımları ile otomasyon sistemini kurdu. Paket anlaşmanın bitmesinin ardından Türkiye'ye geri döndü. Kızının doğumu nedeniyle yurt dışı ikinci çalışma etabını iptal etmek zorunda kaldı. <p>İyi derecede İngilizce ve orta derece İspanyolca bilen yazarımız özel dershanelerde 20 yıla yakın süredir; Web Tasarım, Grafik, İşletmenlik ve 10 Parmak Klavye dallarında öğretim üyeliği mesleğini de sürdürmektedir.
Yorum Yaz

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

çok emek etmişsin... Eline koluna sağlık.
;) flash derslerinin devamı da gelecek... teşekkürler...
Bravo... Çok ciddi bir sabır gerektiren ders.
Tunç bey merhaba öncelikle katkılarından dolayı size teşekür etmek istiyorum daha doğrusu ,bilgilerini bizlerden kısıtlamayıp paylaştığnız için bütün yazar arkadaşlara teşekür etmek istiyorum: yalnız size özel bi soru sormak istiyom bu bizimle paylaştığını dosya 11,5 mb açılınca 800 mb oluyor bunu nasıl yapıyonuz:sasir: bu konuyu da bizimle paylaşırsanız sevinirim saygılarımla iyi paylaşımlar:
ben de siz sanalkurs okurlarına ilginizden dolayı teşekkür ediyorum. sorunuzun yanıtına gelince; görmüş olduğunuz üzere bu bir rar dosyası. yani herhangi özel bir şey yapmadım ama olayın mantığını öğrenmek istiyorum derseniz size şöyle açıklayabilirim. "normal" .avi uzantılı dosyalar max jpeg kaliteli yada bildiğimiz tiff vs formatlardaki yüksek kaliteli resim dosyalarının max çözünürlük karşılıklarını içlerinde barındırırlar (sıkıştırılmamış, kalite kaybı yok), her saniye karenin karşılığı bir resim formatına denk geliyor gibi düşünün (yada sn. 15-30 frame resim). şöyle ki, normal bir dvd 4 gb dolaylarında iken bunu divx formatına dönüştürdüğümüzde 700 mb değerlere kadar inebiliyor. (divx dönüşümünden sonra sesler mp3, aif, acc vs görüntülerde ve görüntü formatı da min. kalite jpeg dosya karşılıklarına geliyorlar) bu resim ve ses üzerine sıkıştırma mantığından yola çıkarak RAR sıkıştırmanın da dosya özellik ve kalitesini bozmadan güzel bir boyut küçültme yolu olduğunu söyleyebiliriz. (daha önce wmv formatına çevirip zaman ve kalite kaybı yaşıyordum, az düşünüp bu çözümü ürettim )) göreceğiniz üzere, benim video dosyalarımda seslendirme yok ve buna artı olarak görüntüdeki "beyaz" renk ağırlığı da dosyanın .rar sıkıştırılırken iyice küçülmesine yardımcı oluyor (beyaz görüntüler, siyah bölümlere oranla çok daha fazla sıkıştırılabilir) video sıkıştırma üzerine bazı makaleleri okuyup max kalite ile en fazla alan kazanım yollarını öğrenebilirsiniz. (divx, mov, mp4, wmv ve benzeri türler) tüm okurlara sevgi ve saygılarımla.
teşekkürler
merhabalar ben bir soru sormak istiyorum ben bu dünya ile ülkeleri tanıtmak istiyorum ülkeleri buton yapayım dedim olmadı üzerine yazı yazdım yazıya link verdim fakat tıklanmıyor lü
merhabalar ülkeleri tanıtım ile ilgili bir şey yapıyorum ülkeleri buton yapayım dedim olmadı yazı yazdım link verdim yine olmadı üzerine tıklanmadı yazıların sizce ne yapabilirim.Yardım ederseniz sevinirim.Saygılarımla...
fla dosyasını "ben@tuncolcay.com" mailime zipleyip atabilirsen yardımcı olmaya çalışayım. saygılar.
mail attım cevabınız bekliyorum.
yardım ederseniz çok sevinirim saygılarımla
yardım ederseniz çok sevinirim saygılarımla

Yukarı Git