Ders 5 - BITEFO FETHIYE 2007

A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
5
Animasyon
Hazırlama
Bu kısmı sabırsızlıkla bekliyordunuz değil mi? Animasyonlar oluşturmak her Macromedia
Flash kullanıcısının yapmak istediği şeydir. Animasyonlar uygulamalarınıza canlılık katar,
ziyaretçilerin yaşayacağı Web deneyimini zenginleştirir. Flash aslen bir animasyon programıdır.
Flash ile oluşturulan animasyonların en sık kullanıldığı mekân Web olsa da bu animasyonları
CD-ROM’larda, bilgisayar destekli eğitim setlerinde, mobil cihazlarda ve hatta dijital yayınlarda
da kullanabilirsiniz. Flash’ı bu denli kullanışlı ve yaygın yapan şey animasyonlarının küçük
boyutları sayesinde her platforma kolaylıkla taşınabilir olmasıdır.
Tech Bookstore
sitesindeki
animasyon
Flash 8’de animasyonlar hazırlamak çok zor değildir. Ancak yine de elinizin altındaki araçlara
alışmanız ve iyi organizasyon becerilerine sahip olmanız gerekir. Flash işin önemli bir kısmını sizin
adınıza üstlenecektir. Ayrıca programda süreci hızlandırmanıza yardımcı olacak hazır efektler
de vardır. Bu dersimizde özellikle motion tween ve shape tween tekniklerini kullanarak çeşitli
animasyonlar oluşturacağız. Ayrıca animasyonu hangi amaçlar için kullanmanız gerektiğini de
dersimiz süresince daha iyi anlayacaksınız.
Bu Derste Öğrenecekleriniz
Bu derste şunları öğreneceksiniz:
• Farklı animasyon türleri hakkında bilgi sahibi olacaksınız.
• Bir motion tween oluşturacaksınız.
• Ease değerini ayarlayarak motion tween’leri yavaşlatacak ya da hızlandıracaksınız.
• Parlaklık ve alfa değerlerini zamana bağlı olarak değiştireceksiniz.
• Bir shape tween ekleyeceksiniz.
• Basit bir kare kare animasyon oluşturacaksınız.
• Bir hareket kılavuzu kullanarak bir sembolü vektörel bir yol boyunca hareket
ettireceksiniz.
Yaklaşık Süre
Bu dersi yaklaşık 2 saatte tamamlayabilirsiniz.
Gerekli Dosyalar
Ortam Dosyaları:
Yok
Başlangıç Dosyaları:
lesson05/start/bookstore8.fla
lesson05/start/mapStarter.fla
Tamamlanmış Dosyalar:
lesson05/complete/bookstore9.fla
lesson05/complete/map.fla
126 DERS 5
Animasyonlara Giriş
Grafik ya da resim karelerinin art arda hızlı bir şekilde gösterilmesi sonucunda hareketli bir
görüntü, yani animasyon oluşur. Flash’ta animasyonu oluşturan öğeler Timeline üzerinde yer alan
ve çeşitli içerikler barındıran karelerdir. Bu içerik çizimler, fotoğraflar ve hatta ActionScript ile
hazırlanmış grafiklerden oluşabilir.
Macromedia Flash 8’de animasyonlar hazırlamanın farklı yöntemleri vardır. Ayrıca
hazırlayabileceğiniz animasyon türleri de çeşitlilik gösterir. Motion tween’ler, shape tween’ler veya
kare kare animasyonlar oluşturabilirsiniz. tween ifadesi, İngilizce’de arada, arasında anlamına gelen
“between” ifadesinin kısaltılmış halidir. Animasyon tekniklerinin gelişmeye başladığı ilk yıllarda
animatörler sadece görüntüde değişikliğin olduğu esas kareleri çizer, bunların arasında yer alacak
olan kareleri tamamlama işini de yardımcı animatörler üstlenirdi. Flash’taki tween mantığı da
bundan farklı değildir. Siz animasyonun değiştiği alanları tanımlarsınız, Flash da bu alanların
arasını doldurur.
Anahtar karelerdeki başlangıç ve bitiş noktalarını (değişikliğin başlayacağı ve sona ereceği
noktaları) tanımlamanızın ardından anahtar karelerin arasına bir motion tween uyguladığınızda
Flash, Timeline üzerinde başlangıç ve bitiş anahtar kareleri arasında kalan tüm kareleri
dolduracaktır. Benzer bir durum shape tween’ler için de geçerlidir. Ancak shape tween’in amacı
hareket değil bir nesnenin şeklinin fiziksel değişimidir. Bu derste hem motion (hareket) hem de
shape (şekil) tween’ler oluşturacağız.
Kare kare animasyonlarsa daha geleneksel bir animasyon türüdür. Flash’ın anahtar kareler arasında
tween’ler oluşturmasını, yani animasyonun önemli bir bölümünü sizin yerinize tamamlamasını
tercih etmiyor, animasyonun içerdiği her kareyi bizzat oluşturmak istiyorsanız kare kare
animasyon metodunu kullanabilirsiniz. Bu yöntemle, otomatik olarak oluşturulan tween’lere göre
çok daha karmaşık efektler üretmeniz mümkündür. Ancak kare kare animasyon yapmak tahmin
edebileceğiniz gibi hem daha çok zamanınızı alır, hem de SWF dosyanızın boyutunu artırır.
ActionScript ve klipler kullanarak da animasyonlar hazırlayabilirsiniz.
Bu teknikler kitabımızın kapsamı dışında. Ancak ActionScript’i daha
geniş bir şekilde öğrenmeye karar verirseniz onunla animasyonlar
yapabileceğinizi de bilin.
Motion Tween için Hazırlık
Motion tween, sabit bir zaman aralığında bir nesnenin konumunu değiştirmek için kullanılır.
Bunun dışında, ölçeklendirme, alfa (şeffaflık), tonlama ya da döndürme işlemleri de motion
tween kullanılarak yapılabilir. İsteğe bağlı bir hareket kılavuzu ile nesneleri bir vektör yolu
üzerinde hareketlendirme gibi daha karmaşık animasyonlar da hazırlanabilir; dersimizin ilerleyen
bölümlerinde böyle bir uygulama yapacağız. Burada dikkat etmeniz gereken bir şey var: Sadece
ANİMASYON HAZIRLAMA 127
sembollerle motion tween yapabilirsiniz. Bu nedenle motion tween yapmadan önce nesneyi bir
sembole çevirmelisiniz. Animasyon temel olarak aynı resmin biraz farklı yerlerde kopyalarının
gösterilmesiyle oluşturulan bir illüzyondur, dolayısıyla sembol kullanılması uygundur. Bu ayrıca
SWF dosyasını dışarı aktarırken (export) dosya boyutunun küçük kalmasını da sağlar. Bunun sebebi,
Flash’ın zamanı gelen her öğeyi baştan oluşturmak yerine kütüphaneden alıp tekrar kullanıma
sokabilmesidir.
Shape tween bunun tersidir: Ham verilere shape tween uygulayabilirsiniz fakat
sembol kopyalarına, gruplanmış öğelere veya bitmap resimlere uygulayamazsınız.
Bunların önce Modify > Break Apart kullanılarak ham veriye dönüştürülmeleri
gerekir. Bu dersimizde ham verilere (vektörel çizimlere) shape tween uygulamayı
da öğreneceksiniz.
Bir FLA dosyasına motion tween eklemenin birkaç yolu vardır, bunları aşağıdaki uygulamalarımızda
öğreneceksiniz. İlk uygulamamızda, önceki derslerimizde oluşturduğumuz menülere motion tween
ekleyeceğiz. İşimiz bittiğinde, menüler kullanıcı bir düğmeye basınca açılıp daha sonra kapanır
hale gelecek. Ayrıca SWF dosyası oynatılırken animasyonun sürekli gösterilmesini önlemek için bir
hareket durdurma komutu ekleyeceğiz.
1. TechBookstore klasörü içinden ya da CD-ROM’daki lesson05/start dizininden
bookstore8.fla dosyasını açın ve sabit diskinizdeki TechBookstore klasörüne
bookstore9.fla adıyla kaydedin.
Dördüncü dersimizde, bu derste hareketlendireceğimiz sembollerin çoğunu hazırladık. Önemli
değişiklikler yağacağımız için dosyamızı farklı bir isimle yeniden kaydediyoruz.
2. Stage’de mcProducts örneğini bulun, F8 tuşu ile onu başka bir klibe yerleştirin ve klibi
mcProductsMenu olarak isimlendirin.
Klibimizi neden başka bir klibin içine koyduğumuzu merak ediyor olmalısınız. Flash’ta çalışırken
bazen animasyonların dokümanın ana Timeline’ı üzerinde yer almasını istemeyiz. Bunun çözümü
de animasyonların klip sembollerinin içerisinde oluşturulması ve bu klibin bir örneğinin Stage’e
yerleştirilmesidir. Bu durumda mcProductsMenu klibi içinde bir hareket animasyonu yapmış
olacaksınız. Motion tween’leri sadece sembollerde kullanabildiğinizi unutmayın, mcProducts’ı
mcProductsMenu içine yerleştirmemizin nedeni budur.
buttons katmanı menu katmanının üstünde bulunduğu için menu kliplerini seçmek
zor olabilir. buttons katmanını kilitleyip gizleyerek menu kliplerini daha kolay
seçilebilir bir hale getirebilirsiniz.
128 DERS 5
3. mcProductsMenu’ye çift tıklayarak onu Stage’de düzenlemeye başlayın. Gerekirse
menüyü yakınlaştırın.
mcProductsMenu üzerine çift tıkladıktan sonra Stage’in geri kalanı donuklaşır ve siz de
düzenlemekte olduğunuz sembole odaklanabilirsiniz. Burada sembolün ana özellikleri elinizin
altındadır ve yaptığınız değişiklikler sembolün doküman içindeki tüm kopyalarını (örneklerini)
etkileyecektir. Stage’deki klibimizin tek bir örneği olduğundan, üzerinde düzenleme modunda
çalışmamızın herhangi bir sakıncası yoktur. Özellikle bu modda çalışacağız çünkü animasyonumuz
Stage’de belirli yerlerde başlayıp bitmek zorunda ve biz bu mod sayesinde çalışırken Stage ve tüm
grafikleri birlikte görebiliriz.
4. Layer 1’i seçin ve ona menu tween adını verin. Yeni bir katman ekleyin ve bu
katmana actions adını verin. actions katmanında 11 ve 20. karelere anahtar kareler
yerleştirin.
menu tween katmanını seçin, Insert New Layer düğmesine tıklayın ve katman ismi olarak actions
girin. 11 ve 20. karelerde anahtar kare oluşturmak için kareyi seçin ve F6 tuşuna basın. Her anahtar
karede klibin pozisyonunu değiştireceğiz. Klibin konumunu değiştirmek, anahtar karelerin arasına
tween eklerken animasyonun oluşturulmasını sağlayacaktır. Tween’leri bir sonraki uygulamamızda
ekleyeceğiz.
Klipler hakkında bilmemiz gereken önemli şeylerden biri de, bunların kendi Timeline’larının
olduğudur. Klipler küçük çocuklar gibidir: Siz söylemeden bir şey yapmazlar ya da daha kötüsü,
aksi söylenmedikçe bir şeyi yapmayı bırakmazlar. Bunun anlamı, bir klip içinde animasyon
yaptığınızda, siz ne zaman duracağını belirtmedikçe animasyon sürekli tekrar edecektir.
Animasyonunuzun aşağı açılan menü şeklinde olmasını istiyorsunuz diyelim: Kullanıcı
düğmelerden birine (Products) tıkladığında menü aşağı doğru hareketlenerek tamamen açılmalı
ve tüm seçenekler ortaya çıktığında durmalıdır. Bir seçenek tıklandığında ya da kullanıcı fareyi
uzaklaştırdığında menünün ilk baştaki haline gelmesini de istiyoruz. Bu nedenle klibimize iki farklı
noktada animasyonu durdurmasını söylemek zorundayız: 11 ve 20. karelerde.
5. Animasyonu kontrol etmek için Timeline’a durdurma eylemleri (stop action) ekleyin.
Durdurma eylemleri Actions panelinden eklenir. ActionScript’i henüz bilmiyor olsanız da basit bir
tıklama işlemiyle ActionScript’ten faydalanabilirsiniz.
Ana menüden Window > Actions’ı seçerek Actions panelini açın. Actions paneli Windows’ta
Stage’in altında ve OS X’te de yüzen panel olarak açılır. Actions panelinde üç ayrı bölüm
bulunur: Script paneli, Script listesi ve Actions bölümü. Script paneli, Script listesi ve Actions
ANİMASYON HAZIRLAMA 129
bölümünün sağındaki büyük metin alanıdır. Aşağıdaki şekilde Actions panelinin farklı bölümlerini
görüyorsunuz.
Actions araç kutusu
Script paneli
Script Assist düğmesi
Script
listesi
Script
sekmesi
actions katmanında 11. ve 20. karelere anahtar kare eklerken Script Assist’i kullanacağız.
ActionScript deneyiminiz yoksa Script Assist özelliği çok işinize yarayacaktır. Eklemek istediğiniz
eylemi seçtiğinizde Script Assist ona uygun menü seçenekleri ve düğmeleri eklemenize yardımcı
olur.
actions katmanında 11 no’lu anahtar kareyi seçin ve Actions panelinin başında Actions-Frame
yazdığından emin olun. Actions panelinin başlık çubuğundan bir kare mi yoksa bir nesne mi
seçtiğinizi anlayabilirsiniz. Script listesinde de aynı şekilde Current Selection bölümünde actions
katmanının 11. karesi görülmelidir. Script panelinin altındaki script etiketi de aynı işi görür.
130 DERS 5
Script panelinin sağ üst köşesindeki Script Assist düğmesine tıklayın. Soldaki Actions araç
kutusunda Global Functions kategorisine tıklayın ve Timeline Control’ü seçin. Timeline Control
kategorisinde stop action’a çift tıklayıp Timeline’a eklenmesini sağlayın. Script Assist, Actions
denetçisinin üstünde stop eyleminde parametre kullanılmadığını gösterecektir. Aynı yöntemle
actions katmanındaki 20. kareye de bir stop eylemi ekleyin.
Script Assist, Script panelinin sol üstündeki Actions araç çubuğunda
seçtiğiniz işlemin açıklamasını gösterir. Onun altında eylemi script’inize nasıl
ekleyebileceğiniz açıklanır.
Kareye ActionScript eklenmiş
Eklenecek eylem
Eylemin tanımı
Eylemin nasıl eklenebileceğine dair açıklamalar
ActionScript eklemeyi bitirdikten sonra, Lock Layer simgesinin altındaki noktaya tıklayarak
actions katmanını kilitleyin, böylece actions katmanında Stage’e bir şey eklenmesini önlemiş
oluyoruz. ActionScript içeren bir katmanda ham veri, sembol ve örnekleri, bileşenleri ya da diğer
öğeleri bulundurmamak çok sağlıklı bir yoldur. Kodları nesnelerle (örneğin ActionScript içeren
ANİMASYON HAZIRLAMA 131
bir bileşenle bir klibi) aynı katmana yerleştirirseniz, SWF dosyanızda kod çakışmaları yaşanabilir.
Ayrıca FLA dosyanızdaki hataları ayıklamak da güçleşebilir.
Kare eylemleri eklerken, eylemler Timeline üzerindeki diğer öğeler gibi anahtar
karelere yerleştirilmelidir. Normal bir kareye ActionScript ekleyemezsiniz.
6. Yeni bir katman oluşturun ve labels olarak adlandırın. Sonra 2 ve 12. karelere yeni
anahtar kareler ve kare etiketleri ekleyin. İşiniz bitince katmanı kilitleyin.
menu katmanını seçin ve Insert Layer düğmesine tıklayın. Yeni katmana labels ismini verin.
2. ve 12. karelerde yeni anahtar kareler oluşturmak için kareyi seçip F6 tuşuna basın. Şimdi
ActionScript’i kullanarak, Products düğmesine tıklandığında ya da animasyon sonrasında fare
menüden çekildiğinde oynatımın doğrudan bu karelere taşınmasını sağlayacaksınız. Bu iş için
ActionScript’i kullanmanın en kolay yolu anahtar karelere etiket vermektir. Bunun sebebini
aşağıdaki paragrafta açıklıyoruz.
Menülerinizin açılıp kapanma animasyonunun süresi hoşunuza gitmeyebilir ve bu yüzden
animasyonda yer alan kare sayısını değiştirmek isteyebilirsiniz. Bunu yaptığınızda, animasyonların
başlangıç ve bitişleri farklı karelere kayabilir. Eğer ActionScript’e belli numaralı bir kareye gitmesini
söylemişseniz, Actions paneline girip script’i yeni numaraları gösterecek şekilde değiştirmeniz
gerekir. Ancak, oynatım kafasını etiket verilmiş bir kareye gönderme yoluna giderseniz, başlangıç
ve bitiş kareleri hareket ettiğinde etiket de onlarla birlikte hareket eder ve Script’i değiştirmeniz
gerekmez.
labels katmanında 2 numaralı kareyi seçin ve Properties denetçisinde <Frame Label> alanına
slidedown yazın. Sonra labels katmanından Kare 12’yi seçin ve <Frame Label> kutusuna slideup
yazın. İşiniz bitince, daha önce yaptığınız gibi katmanı kilitleyerek üzerine kaza ile yeni içerik
eklenmesini önleyin.
7. menu tween katmanının 12 ve 20. karelerine yeni anahtar kareler ekleyin.
Bu kareler, menünün nasıl hareket edeceğini belirler. Kare 12, menü açılış animasyonunun sonu,
menü kapanış animasyonunun ise başlangıcıdır.
132 DERS 5
8. Kare 12’deki mcProducts klibinin konumunu değiştirin.
Kare 12’de Stage’den mcProducts’ı seçin. Klibi Shift tuşuyla birlikte aşağı ok tuşuna basarak aşağı
kaydırın ve hemen grBar’ın altına getirin. Aşağıdaki şekli inceleyin.
Klavyeden Shift ve aşağı tuşlarına bastığınızda, seçili grafik 10 piksellik birimler
halinde aşağı kayar. Tek başına aşağı ok tuşuna bastığınızda ise hareket birimi 1
piksel olur.
9. Ana Stage’e dönün ve diğer iki menü için bu adımları tekrar edin.
Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönün. 2’den 8’e kadar olan adımları
mcCompany ve mcContact için tekrar edin. İçinde bulundukları klipleri sırasıyla mcCompanyMenu
ve mcContactMenu olarak adlandırın. Tüm menülerimiz artık motion tween için hazır.
10. İşiniz bittiğinde FLA dosyanızda yaptığınız değişiklikleri kaydetmeyi unutmayın.
Böylece tüm kliplerinizi motion tween için ayarlamış bulunuyoruz.
Motion tween uygularken bir sembolün kopyasını sadece o sembolün aynı
katmandaki başka bir kopyasına doğru hareketlendirebilirsiniz. Anahtar
kareler içerisinde sadece bu sembol kopyalarının olmasına izin verilir çünkü
Flash bir anahtar karede aynı anda sadece tek bir şeye tween uygulayabilir.
Hareketlendirilecek sembolün bulunduğu kareye başka nesneler koyduğunuzda,
Flash hangi nesnenin anime edileceğini bilemez. Aynı anda birden fazla şeyi
hareketlendirmek isterseniz her animasyonu kendi katmanına koymanız gerekir.
Flash 8’le gelen Distribute to Layers özelliği, bir metin bloğunun (Modify >
Break Apart ile ayrılmış olmalı) harflerini ayrı ayrı hareketlendirmek istediğinizde
ya da FLA oluştururken bir öğeler grubunu Stage’e aktarmak istediğinizde
oldukça yararlıdır. Stage’de birden fazla nesne seçtikten sonra Modify >
Timeline > Distribute to Layers’ı seçerseniz, Flash seçili her nesneyi yeni bir
katmana yerleştirir ve isimlendirir. Fakat genelde isimleri elle kendi isteğinize
göre düzenlemeyi tercih edeceksiniz. Burada fazla kullanılmasa bile, bu özellik
FLA dosyanızı düzenli bir halde tutmanız ve geliştirme sürecini kısaltmanız için
oldukça faydalıdır.
ANİMASYON HAZIRLAMA 133
Motion Tween’lerin Eklenmesi
Yukarıda gördüğünüz gibi, motion tween kullanarak Stage’de bir sembol kopyasının konumunu,
parlaklığını, alfasını (şeffaflığını) ya da tonlamasını değiştirebilirsiniz. Properties denetçisinde yer
alan Color menüsünü kullanarak kopyanın (sembol örneğinin) parlaklık, alfa ya da tonlaması
ile oynayabilirsiniz. Motion tween uyguladığınız bir kopya varsa, bu menüden anahtar karenin
değerlerini değiştirdiğinizde yeni ayarladığınız özelliklerden başlayan ya da ona doğru giden bir
geçiş oluşturulur.
Klibinizin anahtar kareleri hazır ve kopyanın başlangıç ve bitiş pozisyonları belli olduktan sonra,
menüleri hareket ettirecek asıl motion tween’leri eklemeye hazırız demektir. Burada ayrıca motion
tween kullanarak ve Properties denetçisindeki değerleri değiştirerek menü parlaklığını da anime
edeceğiz.
1. bookstore9.fla dosyasında mcProductsMenu öğesini çift tıklayarak açın. menu tween
katmanını seçin.
Bir önceki uygulamamızda hazırladığımız klipler ve içerikle çalışacağız.
2. Menüyü aşağı hareket ettirmek için Kare 1 ve 12 arasında bir motion tween oluşturun.
menu tween katmanından 1 ve 12 arasındaki herhangi bir kareye sağ tıklayınca gelen ya da Control
tuşuna basıp tıkladığınızda açılan menüden Create Motion Tween’i (Motion Tween Oluştur) seçin.
İlk dikkat etmeniz gereken şey, karelerin zemin renginin mora yakın bir renge dönmesi ve ilk
kareden son kareye uzanan ok olmalıdır. Bu durum, tween’i katmana doğru şekilde eklediğinizi
gösterir. 3. adımdaki şekilde motion tween’lerin bulunduğu bir Timeline görülmektedir.
Yanlış bir ekleme yapmışsanız, katmanınızda kesintisiz uzun bir ok yerine kesikli
çizgiler görürsünüz. Bu genelde hareketin olmasını istediğiniz anahtar karelerin
içinde birden fazla nesne olması durumunda görülür.
Sembol içermeyen anahtar kareler arasında bir motion tween oluşturmayı
denediğinizde, Flash bu anahtar karelerdeki grafikleri Tween1, Tween2, vs.
isimlerinde grafik sembollerine dönüştürecektir. Bunu önlemek için Timeline’da
oynama yapmadan önce kendiniz grafik nesnelerini sembollere dönüştürmeyi
unutmayın.
3. İkinci bir motion tween ekleyerek menüyü yukarı hareketlendirin ve Timeline’da
gezinerek animasyonu denetleyin.
2. adımı uygulayarak 12 ve 20. kareler arasına bir motion tween ekleyin. 12 ve 20. kareler arasında
herhangi bir kareye sağ tıklayın ve açılan menüden Create Motion Tween’i seçin. İşiniz bittiğinde,
134 DERS 5
menü 1-12 no’lu kareler arasında aşağı, 12-20 no’lu kareler arasında da yukarı hareket edecektir.
Oynatım kafasını sürükleyerek animasyonu izleyin.
Bir dizi kareye motion tween uyguladıktan sonra, iki anahtar kare arasına kareler
ekleyip çıkarmak suretiyle tween süresini değiştirebilirsiniz. Tween içindeki
herhangi bir kareyi seçip F5’e tıkladığınızda kare ekleyebilir ve sağ tuş menüsünden
Remove Frames komutu ile kareleri silebilirsiniz. Flash sizin için otomatik olarak
tween’i değiştirecektir.
4. Properties denetçisinden menü motion tween’ine Ease değeri verin.
Bir motion tween’in başlangıç karesini seçtiğinizde, Properties denetçisinde Ease çubuğunu
görebilirsiniz. Bunu kullanarak, motion tween süresince animasyonu yavaşlatıp hızlandırabilirsiniz;
bu araç özellikle yerçekimi efektleri için bu çok kullanışlıdır. Standart değeri sıfırdır (ease yok).
Çubuğu pozitif bir sayıya (1-100 arasında) getirerek Flash’a animasyona hızlı başlayıp sonra
yavaşlamasını söyleyebilirsiniz. Negatif bir sayı seçtiğinizde ise animasyon yavaştan başlayıp sona
doğru hızlanacaktır. İki şekilde de animasyon süresi değişmeyecektir.
Kare 1’i seçin ve Properties denetçisini açın. Ease çubuğunu 100’e getirin, böylece menü hızlı bir
şekilde açılmaya başlayıp aşağı gelirken yavaşlayacaktır. Sonra 12. kareyi seçin ve çubuğu -100’e
getirin. Menü giderek artan bir hızla kapanacaktır.
ANİMASYON HAZIRLAMA 135
Bir motion tween yaparken, seçili sembolün yönünü ve dönüş miktarını da
ayarlayabilirsiniz. Dönüş için dört seçenek mevcuttur: None (dönüş yok), Auto
(otomatik), CW (saat yönünde) ve CCW (saat yönünün tersi). Auto’yu seçecek
olursanız, nesne en az hareket gerektiren tarafa doğru döndürülür. Son iki seçenek,
nesneyi iki yönden birine belirtilen miktarda döndürür.
5. Menüye bir parlaklık tween’i ekleyin ve Timeline’da gezinerek animasyonu denetleyin.
menu tween katmanında Kare 1’de mcProductsMenu kopyasını seçin. Parlaklık özelliğine
ulaşabilmek için kareyi değil kopyayı seçmelisiniz. Properties denetçisinde Color menüsünden
Brightness değerini %85’e getirin. Kare 12’deki mcProductsMenu kopyasını seçin ve parlaklığın 0’da
olduğundan emin olun. Timeline’daki oynatım kafasını kaydırarak animasyonun aldığı şekli izleyin.
Mümkün olduğunca alfa tween yerine parlaklık tween’i kullanmaya çalışın, çünkü
özellikle ayrıntılı bitmap resimlerde alfa tween’ler çok daha fazla işlem gücü
gerektirir. Alfa ile tween uygularken Flash’ın çok daha fazla hesaplama yapması
gerekir.
6. FLA dosyasındaki diğer iki menüye de yukarıdaki adımları uygulayın. Oynatım kafasını
hareket ettirerek animasyonun doğru çalışıp çalışmadığını kontrol edin.
FLA dosyasında kalan iki menüye de aynı işlemleri uyguladığımızda, üç menünün de animasyonu
hazır olacaktır. Animasyonları eklemeyi bitirdikten sonra oynatım imlecini Timeline’daki karelerin
üzerinde sürükleyin ve animasyonunuzu izleyin. Enter tuşuna basarak animasyonu Flash
düzenleme ortamında oynatabilirsiniz. Animasyon Stage’de başlayıp sonuna kadar gösterilecektir.
136 DERS 5
Unutmayın, oynatım kafasını fare ile Timeline üzerinde kaydırarak animasyonu
kontrol edebilirsiniz.
7. Ana Stage’e dönün. Kütüphaneyi temizleyin ve FLA dosyanızı kaydedin.
Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönün. mcProductsMenu, mcCompanyMenu
ve mcContactMenu öğelerini kütüphanedeki movie clips klasörüne taşıyarak ortalığı temizleyin.
Yaptığınız değişiklikleri kaydedin.
Alfa Seviyelerinin Animasyonu
Bir sembol kopyasının alfasını değiştirmek, kopyayı Stage’de gezdirmekten pek farklı değildir.
Bir önceki çalışmada yaptığımız parlaklık düzeyi değiştirmeyle de neredeyse aynıdır. Önceki
derslerden hatırlayacağınız gibi, alfa bir nesnenin opaklık veya şeffaflık düzeyini gösterir. Bir
nesnede alfa 0’sa nesne şeffaftır ve Stage’de görünmez. %100 alfa ise nesnenin tamamen görünür
durumda olduğunu belirtir. Motion tween uygulanmış bir sembol örneğinin alfa değerini
değiştirerek kaybolma ve belirme etkileri elde edebiliriz.
Alpha ile kaybolma/belirme efektleri fazla kullanılmamalıdır çünkü işlemciye
çok yük bindirirler. Hatta işlemciyi sömürdükleri bile söylenebilir.
Aşağıdaki uygulamada motion tween kullanarak logonun arkasındaki ışığı azaltacak ve grafiğin
büyüklüğünü değiştireceğiz. Yine bookstore9.fla dosyası ile çalışıyoruz.
1. grGlow’u seçin ve onu mcBookGlow adlı bir film klibi sembolüne dönüştürün. Layer 1’i
de glow animation olarak isimlendirin.
Gerekiyorsa düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’de bulunduğunuzdan emin olun.
mcLogo içerisinde grGlow kopyasını bulun. Bunu yapmanın en kolay yolu, kütüphanede ya da
Stage’de mcLogo üzerine çift tıklamaktır. İki şekilde de sembol düzenleme moduna girersiniz,
buradan grGlow kopyasını seçip F8’e basarak onu mcBookGlow adlı bir klip sembolüne
dönüştürün. Eklediğiniz animasyon sürekli tekrar edeceği için, grafik sembolünü klibe
dönüştürmek zorundayız. pageTurn ve logo katmanlarının kilitli olduğundan ve grGlow kopyasını
seçtiğinizden emin olun. mcBookGlow üzerine çift tıklayarak kopyayı açın ve Layer 1 olan katman
adını glow animation olarak değiştirin. Şimdi iç içe üç Timeline’a sahipsiniz. (şekle bakınız).
ANİMASYON HAZIRLAMA 137
2. glow animation katmanında 35 ve 70. karelerde anahtar kareler oluşturun.
glow animation katmanında 35. kareyi seçin ve yeni bir anahtar kare ekleyin. 1. karenin içeriği 35.
karedeki anahtar kareye kopyalanacaktır.
glow animation katmanında 70. kareye başka bir anahtar kare ekleyin. Şimdi grGlow’un alfa ve
büyüklüğünün kareler arasında değişmesini sağlayacağız.
3. Transform aracı ile grGlow’un büyüklüğünü değiştirin.
glow animation katmanında 35 no’lu kareyi seçin. Tools panelinden Transform aracını seçin ve bir
köşesinden tutup merkeze çekerek grGlow kopyasını küçültün. Sembolün bozulmasını önlemek
ve ölçü oranlarını korumak için fareyle sürükleme sırasında Shift tuşunu basılı tutun. Dördüncü
adımdaki şekilde görüldüğü gibi büyük kısmı grLogo’nun arkasında saklı kalacak kadar ufaltın.
grLogo, grGlow’un altında görünür durumdadır fakat farklı bir Timeline’da bulunduğu için açık
renktedir (yerinde düzenleme modunda iseniz).
Bunun dışında, Free Transform aracı seçili iken, Tools paneldeki Options’tan
scale (ölçekle) seçeneğini de kullanabilirsiniz. Ölçekleme seçili iken, nesnenin
köşesinden tutup oynatırken boyut oranları değişmez.
4. Properties denetçisini ve motion tween kullanarak grGlow’un şeffaflığını değiştirin.
Kare 35’teki grafik büyüklüğünü değiştirdiniz. Şimdi kopyanın alfasını değiştirelim. Yine Selection
aracıyla Kare 35’teki kopyayı seçin. Properties denetçisinde Properties sekmesindeki Color
listesinden Alpha’yı seçin ve alfa değerini %100’den %80’e indirin.
138 DERS 5
Ekrandaki görüntü istediğiniz gibi olmadıysa kopyaya verdiğiniz yeni alfa değerini değiştirin.
Unutmayın, Stage’deki kopyada yaptığınız değişiklikler kütüphanedeki sembolü
etkilemez. Kütüphaneden başka bir grGlow kopyası aldığınızda Stage’de siz
değişiklik yapmadan önceki orijinal haliyle görünecektir.
5. Grafiği boyutlandırmak için motion tween ekleyin ve sonra Timeline’daki oynatım
kafasını kaydırarak animasyonu izleyin.
Kare 1 ve 35 arasına tıklayın ve Properties denetçisini açın. Tween listesini None’dan Motion’a
getirin. Aynı adımları Kare 35 ve 70 arasında tekrarlayın. Klip şu anda parlaklığı daha geniş bir
boyutta anime etmekte ve orijinal durumuna gelmeden az önce soluklaştırmaktadır. Bu klibi ayrı
olarak (tüm SWF dosyasını izlemeden) test etmek için oynatım kafasını mcBookGlow sembolünün 1.
karesine getirip ana menüden Control > Play komutunu verebilirsiniz.
6. mcBookGlow’u kütüphanedeki Movie Clips klasörüne taşıyın. Bir sonraki çalışmadan
önce FLA dosyanızı kaydedin.
ANİMASYON HAZIRLAMA 139
Klip Düğmesinin Animasyonu
Dördüncü dersimizde iki klip düğmesi hazırlamıştık: Birisi içindekiler tablosu (table of contents),
diğeri de örnek bir bölüm (sample chapter) içindi. Şimdiki uygulamada, klip düğmesine bir
“mouse-over” efekti ekleyeceğiz. Bu efekti klibin içindeki bir parlaklık tween’i oluşturacak. Ziyaretçi
faresini düğme üzerine getirdiğinde düğme hareketlenecek, fare uzaklaşınca da orijinal parlaklığına
dönmesi için ikinci bir animasyon gerçekleşecek. Klip düğmeleri özel kare etiketleri kullanırlar,
böylece Flash her etiketli kareye bir düğme hâli olarak davranması gerektiğini bilir (aksi takdirde
normal kare gibi davranır). Bizim kullanacağımız özel etiketler _over ve _down olacak (_over
normal bir düğme sembolünün fare ile üzerine gelinmiş, _down da fare ile basılmış hâli). Bu
etiketleri dördüncü dersimizde hazırlamıştık.
Bu uygulamamızda yine bookstore9.fla dosyasıyla çalışıyoruz.
1. Kütüphaneden mcSampleChapter klibini bulun ve üzerine çift tıklayın.
Sembole çift tıkladığınızda klip sembol düzenleme modunda açılacaktır. fill katmanının kilidini
kaldırın ve animasyona devam etmeden önce diğer katmanların kilitli olduğundan emin olun,
böylece text ve stroke katmanlarını yanlışlıkla seçmeniz engellenmiş olur.
2. fill katmanını seçin ve 5, 14 ve 25. karelere (son kare) birer anahtar kare yerleştirin.
Timeline’daki 5. kare _over isimli bir karedir. Kullanıcı klip düğmesinin üzerine fareyle geldiğinde
bu kare animasyona başlayacaktır.
Kare 5’i seçip F6’ya basarak bir anahtar kare ekleyin. Aynı katmandaki 14 ve 25. kareler için bu
işlemi tekrarlayın. Biri _over, diğeri de _down hâli için olmak üzere iki animasyon hazırlanacaktır.
_over hâli animasyonunun, _down animasyonunun tam tersi olmasını istediğimiz için, _over
animasyonunun başlangıcı ve _down animasyonunun bitişi aynı kare olmalıdır.
140 DERS 5
3. grFill’e bir parlaklık tween’i ekleyin. 15 no’lu kareye bir anahtar kare ekleyin.
fill katmanında 5. kareyi seçin ve Properties denetçisini açın. Tween menüsünden Motion’ı seçerek
bir motion tween ekleyin. Kare 14’te grFill’i seçin, Properties denetçisinde Color menüsünden
Brightness’ı seçin ve değerini %85’e ayarlayın.
İşiniz bitince kare 15’e F6’ya basarak bir anahtar kare ekleyin. Properties denetçisinden Tween
olarak Motion seçimini yapın. Oynatım kafasını gezdirerek oluşturduğunuz motion tween’leri
izleyin.
Bu aşamada düğmeyi test ederseniz parlaklık tween’lerini göremezsiniz çünkü
Flash’taki klip düğmeleri her özel kare etiketine gidip duracak şekilde tasarlanmıştır.
Her bir animasyonu oynatıp animasyonun sonuna kadar gitmesi için biraz
ActionScript kodu eklemeniz gerekecek. Bunu da başka bir derste yapacağız.
4. mcToc kopyası için yukarıdaki adımları tekrarlayın
mcToc klibi aynı zamanda kütüphanede de bulunmalıdır. Kütüphanedeki sembole çift tıklayarak
sembol düzenleme modunda açılmasını sağlayın. Aynı adımları mcSampleChapter için de yaparak
düğmelerin aynı şekilde hareketlenmesini sağlayın.
5. Klibin Timeline’ında fill katmanını kilitleyin, değişiklikleri kaydedin ve ana Stage’e
dönün.
ANİMASYON HAZIRLAMA 141
Shape Tween Oluşturma
Shape tween, düzenlenebilir bir vektör grafiğin şeklini zaman içinde değiştirmenizi sağlar.
Çizgilerin uzunluğunu değiştirebilir, çizgileri bükebilir ya da bir vektör çizimini değiştirerek çok
ilginç efektler elde edebilirsiniz (renk değiştirme dahil). Flash tüm hesaplamaları üstlenerek sizi
her kareyi tekrar çizme zahmetinden kurtarır: Tek yapmanız gereken başlangıcı, şeklin değişeceği
noktaları ve bitişi belirlemektir (tıpkı motion tween gibi). Bir katmanda bir ya da birkaç şekil
bulunabilir fakat aynı anahtar kare üzerinde çok sayıda şekil bulunursa birbirlerini çok farklı
şekilde etkileyebilirler. Dikkat: Shape tween ne kadar karmaşıksa, kullanıcının bilgisayarında o
kadar işlemci gücü harcanacaktır. Ziyaretçilerinizi zor duruma sokmak istemezsiniz değil mi?
Shape tween’ler sadece ham vektör grafiklere uygulanabilir (seçildiklerinde
bir çarpı işareti görülür). Bir bitmap resmin şeklini başka bir bitmap resme
dönüştürmek için farklı yazılımlar gerekir.
Tween’in uygulanması üzerinde kontrolünüz çok az olduğu için shape tween yaparken
beklenmedik durumlarla karşılaşmak anormal sayılmaz. Bir şeklin tween başından sonuna
kadar gideceği yol tüm ekranı dolaşabilir. Şekil değişimini kontrol etmenize yardımcı olmak için
Flash 8’de şekil izleri bulunmaktadır. Bu sayede anahtar kareler arasında bir noktanın geleceği
pozisyonları belirleyebilirsiniz (başlangıç şeklindeki bir nokta sırasıyla belirlediğiniz izi takip
ederek son şekildeki yerini alır). Her şekil izinin bir harfi vardır. Dolayısıyla, bir tween başında şekil
izinde “a” harfi varsa, tween sonunda o nokta oradaki “a” harfine gelecektir.
Örneğin, köpek şeklini alması gereken bir kedi şeklimiz olsun. Kedinin kulağını temsil eden ve
kulak ucunda “a” harfi olan üçgen biçimli şekil izini ve karşılık gelen izi de köpeğin kulağına
eklediğinizde, kedinin kulağı direkt olarak köpeğin kulağına gidecek ve gereksiz yere uzun bir
yol izlemeyecektir. Ancak, şekil izlerinin sayısı arttıkça durum kötüleşir ve bu nedenle fazla
kullanmanızı tavsiye etmiyoruz. Şekil izlerini eklemek için shape tween açıkken Modify > Shape >
Add Shape Hint komutunu verebilirsiniz.
Şekil izlerinin doğru çalışması için en az dört tane kullanın ve karışık olarak
dağıtmak yerine saat yönünde a, b, c, d sırasıyla yerleştirin.
142 DERS 5
Shape tween yaparken şekil izleri dışında iki karıştırma seçeneği mevcuttur: Distributive (dağınık)
ve Angular (köşeli). İlki biraz düzensiz görünen daha yumuşak bir geçiş sağlarken, ikincisini sadece
düz çizgi ve köşeli şekillerde kullanabilirsiniz.
Şimdiki uygulamamızda Web sitemizin sol üst köşesindeki kitap logosuna sayfa çevirme efekti
ekleyeceğiz. Hâlâ bookstore9.fla dosyası ile beraberiz.
1. Stage’de mcLogo klibi içindeki mcPageTurn’ü bulun. mcPageTurn’e çift tıklayarak klibi sembol
düzenleme modunda açın ve en az %800 yakınlaştırın.
Dördüncü dersimizde hazırladığımız tek çizgiden oluşan klip sayfa çevirme animasyonu içindi.
Sayfa çevirme animasyonu iki bölümden oluşur. İlk bölüm için bu uygulamamızda bir shape tween
hazırlayacağız.
2. Layer 1’in adını animation olarak değiştirin. 10. kareye bir anahtar kare ekleyin ve yeni
anahtar karenin içeriğini düzenlemeye başlayın.
Katman adını değiştirip anahtar kare ekledikten sonra, 10. kareyi düzenlemeye başlayabilirsiniz.
10. karede basit bir çizgi bulunmaktadır. Selection aracını seçin ve zemine tıklayarak çizginin seçili
olmadığından emin olun. Fareyle çizginin üzerinde geldiğinizde sağ altta aşağıdaki gibi kavisli bir
çizgi görmelisiniz:
ANİMASYON HAZIRLAMA 143
Çizgiyi sürükleyerek bükülmesini sağlayın. Aşağıdaki şekli elde edene kadar devam edin:
Çizginin üst ucuna gelin, imleç okun yanında bir köşe şeklini alacaktır. Çizginin ucunu tutup
çekerek aşağıdaki şekli elde edin.
3. Properties denetçisinden shape tween ekleyin ve animasyonu test edin.
144 DERS 5
1. kareyi seçin ve Properties denetçisini açın. Tween listesinden shape’i seçin. animation katmanını
kapsayan yeşil ok o karelere shape tween eklendiğini gösterecektir.
Oynatım kafasını kaydırarak logoya eklenen animasyonu izleyin. Çizginin alt ucu kitabın sırtıdır ve
sabit kalmalıdır. Çevirme animasyonu bir sonraki uygulamamızda tamamlanacaktır.
4. Shape tween hazır olduğunda ana menüden File > Save ile dokümanınızda yapmış
olduğunuz değişiklikleri kaydedin.
Sıradaki uygulamamızda shape tween arkasına kare kare animasyon ekleyerek çevrilen sayfa
animasyonunu tamamlayacağız.
Kare Kare Animasyon Hazırlama
Küçükken okulda canınız sıkılınca defterinizin kenarına sayfaları çevirdikçe değişen şekiller
çizmişsinizdir. Defterin yapraklarını hızla (ve sessizce) çevirince çizgi film gibi görünen bu şekil
matematikten zayıf almanıza neden olmuşsa da (çünkü dersi dinlemiyordunuz), ilk kare-kare
animasyonunuz olması açısından önemlidir.
Tahmin edebileceğiniz gibi, bu türde animasyonları hazırlamak hem çok zamanınızı alacak hem
de dosya büyüklüğü nispeten daha büyük olacaktır. Fakat bu yöntem Flash 8 araçlarınız içinde
oldukça önemli bir yere sahip olmalıdır çünkü bu sayede tween’lere göre daha karmaşık efekt ve
animasyonlar hazırlanabilir. Tween eğlencelidir fakat her şeyi onunla yapamazsınız.
Kare-kare animasyonlar, her karede resmin farklı olması gereken karmaşık animasyon dizileri için
çok uygundur (yüz ifadeleri ya da yürüyüş gibi). Zayıf yönü ise, genelde her karede resim değiştiği
için Flash’ın bunların her birini dışarı SWF dosyasına kaydetmesi ve bunun da dosya boyutunu
artırmasıdır.
ANİMASYON HAZIRLAMA 145
Animasyonları elle çiziyorsanız, kalemli bir tablet (Wacom gibi) kullanmak
işinize yarayabilir. Tabletiniz destekliyorsa Flash kalem basıncı ve eğim gibi
özellikleri kullanabilir.
Şimdiki uygulamamızda önceki uygulamada başladığımız sayfa çevirme animasyonunu
tamamlayacağız.
1. bookstore9.fla dosyasında mcPageTurn klibini açın (önceki uygulamada oluşturduğunuz
shape tween).
1 ve 10. kareler arasında bir shape tween bulunuyor, animasyonumuzun ilk yarısı budur. İkinci
bölüme gereken detay seviyesini yakalamak için kare-kare animasyon yapacağız. Animasyonu
başka bir shape tween kullanarak da tamamlayabilirsiniz fakat yapacağımız şekilde harekete daha
hâkim olabileceksiniz. Tabii öğrenmenize de katkısı olacak.
2. Shape tween bitimine yeni bir anahtar kare ekleyin ve onion skinning’i açın.
Onion Skin Outlines düğmesine basarak onion skinning’i açın. Bu size son derece yardımı olacak
bir araçtır. Bu araç sayesinde sadece çalıştığınız kareyi değil, bir önceki ve bir sonraki kareleri
de görebilirsiniz. Böylece çizimlerinizi tam yerine oturtabilir ve yumuşak bir animasyon elde
edebilirsiniz. Üzerinde çalıştığınız kare tam renkliyken (onion skinning yokmuş gibi), komşu
kareler hafif soluk ya da ana hatlarıyla görünecektir.
Shape tween’i izleyen boş kareye (kare 11) tıklayın ve F6’ya basarak yeni bir anahtar kare ekleyin.
Önceki karenin içeriği yeni anahtar kareye kopyalanacaktır, şimdi bunu modifiye edeceksiniz.
Onion skin işaretlerini sürükleyerek daha fazla kare görebilirsiniz.
146 DERS 5
Onion Skin işaretçileri
O anda
düzenlenebilir
olan kare
Önceki karelerin
içerikleri
3. Yeni anahtar karenin içeriğini değiştirin.
Önceki uygulamamızda, bir çizgiyi bükerek sayfa dönüyormuş gibi bir görüntü elde ettik. Bu
çalışmada da her karede sayfayı daha ileri taşıyacak ve uzunluğunu biraz değiştireceğiz. Bu esnada
kitabın sırtı sabit kalacak.
Sayfa çevirme animasyonu için her anahtar karede grafik biraz değişmelidir. 2. adımda
oluşturduğunuz anahtar kareyi seçin ve Stage’de çizgiyi seçimden çıkarın. Fareyi çizginin üst
kısmına getirin ve imleç değiştiğinde çizginin ucunu kaydırarak çizginin bükülmesini sağlayın.
Şimdi karemiz bir soldakinden farklı oldu.
4. Yeni anahtar kareler ekleyin ve sayfa kitabın kapağına ulaşana dek grafiği değiştirin.
Kare 11’deki değişiklikleri tamamladığınızda kare 12’yi seçin ve F6 ile yeni bir anahtar kare ekleyin.
11. karenin içeriği 12’ye kopyalanacaktır. Kare 11’de yaptığınız gibi çizginin üst kısmını daha
sağa götürün. Gerekirse sayfayı bükün, bunun için kıvrık çizgi imleci görünecek şekilde çizgiyi
ortasından tutun ve sayfayı bükün. Fakat değişikliklerin çoğu çizginin (sayfanın) üst kısmını
oynatarak yapılabilir. Sayfanın alt kısmının oynamadığından emin olun. Çizginin sadece üst ve orta
kısımlarıyla oynayın.
ANİMASYON HAZIRLAMA 147
Onion skin özelliği ile komşu kareleri görebildiğiniz için, düzenleme sırasında animasyonun nasıl
gittiği konusunda iyi biri fikir sahibi olabilirsiniz. Oynatım kafasını Timeline’da gezdirerek de
animasyonunuzu kontrol edebilirsiniz.
Çizginin alt ucuna dokunmayın. Bunu yaparsanız, sayfa kitabın içinde
hareket ediyor gibi görünecek ve kitaptan bağımsız hale gelecektir!
Animasyon tamamlanana dek gerektiği kadar anahtar kare ekleyin. Sona yaklaşırken sayfanın
ucunu biraz dışarı kaydırarak uzun görünmesini sağlamanız gerekebilir.
Sayfa kitabın ön kapağına vardığında animasyon bitmiştir. Bunun için 9-10 kare gerekebilir.
Sayfaya fade out ekleyerek animasyonun daha güzel görünmesini
sağlayabilirsiniz. Bunun için bu çalışmada oluşturduğunuz her anahtar
karede çizginin şeffaflığını (alfa) değiştirmelisiniz. Color Mixer panelindeki
Alpha çubuğunu kullanarak bunu yapabilirsiniz. İlk kareyi seçin ve Alpha
çubuğunu %90’a getirin. Son sayfada %10 civarı olacak şekilde her kareyi
ayarlayın.
148 DERS 5
5. Sayfa çevrimleri arasına duraklama eklemek için animasyonun sonuna birkaç kare
ekleyin.
Kare 85’i seçin ve F5’e basarak bir kare ekleyin, böylece animasyon duraklayacaktır. Unutmayın, bu
bir klip olduğu için Stage’de sürekli tekrar edecektir (ActionScript’le aksi belirtilmezse). Yani sayfa
sürekli çevrilecek ve arada kısa bir duraklama olacaktır.
6. File > Save As ile dosyanızı kaydedin.
Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönün. Dosyanızı kaydedin ve kapatın. Bir
sonraki derse kadar bu dosyayla işimiz kalmadı.
Bir Yol Boyunca Animasyon Oluşturmak
Daha önce bir motion tween uyguladığınızda sembolünüz bir noktadan diğerine düz bir çizgi
üzerinde gidiyordu. Bu çoğu iş için yeterlidir fakat bazen de animasyonun dalgalı çizgi gibi daha
karmaşık bir yol izlemesini isteyebilirsiniz (sarhoş bir arı animasyonu yaptığınızı düşünün). Bunu
motion guide katmanında bir motion guide (hareket kılavuzu) kullanarak çok çabuk ve kolay bir
şekilde halledebilirsiniz. Bu özel katmanda Pencil, Pen ya da Line araçlarıyla çizgiyi çizebilir ve
motion guide altındaki katmandan bir sembolü bu çizginin iki ucundan birine iliştirebilirsiniz.
Bu yolun motion guide katmanında olması gerekir, burada yaptığınız çizimler Flash dosyası
tamamlandığında görünmeyecektir. Hareket kılavuzları ile nesneleri çember, kare, düz çizgi, eğri
ve çizebildiğiniz her türlü yol üzerinde hareketlendirebilirsiniz (şekliniz bir kenar çizgisi yani
ANİMASYON HAZIRLAMA 149
bir stroke olduğu sürece). Bu son uygulamamızda, 2. derste hazırladığınız map.fla dosyasında
birtakım değişiklikler yapacağız. Hareket kılavuzu kullanarak küçük bir sembolü harita üzerinde
gezdireceğiz.
1. CD-ROM’da lesson05/start dizinindeki mapStarter.fla dosyasını açın ve onu sabit
diskinizdeki TechBookstore klasörüne kaydedin.
Bu dosyanın ikinci dersimizde çalıştığımız dosyaya benzediğini göreceksiniz. Tek fark bu yeni
dosyanın kütüphanedeki iki grafiği kullanıyor olması. Tüm katmanlar ve konumlamalar aynı.
Uygulamanın sonunda dosyayı map.fla adıyla kaydedeceğiz. Böyle bu dosya ikinci derste
oluşturduğumuz dosyanın yerini alacak.
2. map katmanını seçin ve car adlı yeni bir katman ekleyin. Kütüphaneyi açın ve
grafik klasöründe grCar ve grTree’yi bulun. grCar’ı car katmanına, grTree’yi de map
katmanına sürükleyin.
Kütüphanedeki grCar sembolünü animasyonumuz için kullanacağız. grTree sembolü Stage’de statik
bir grafik olacak. İşe başlamadan önce map katmanının kilidini açın.
grCar’ı Stage’in solundaki Brannan Street’e yerleştirin. Ağacı haritanın sağındaki Macromedia
Park’ın sağ alt köşesine koyun. Aşağıdaki şekilden faydalanabilirsiniz.
150 DERS 5
3. Yeni bir motion guide katmanı oluşturun ve Stage’de bir yol çizin.
map katmanının kilitli olduğundan emin olun. car katmanını seçin ve Insert New Layer
düğmesinin yanındaki Add Motion Guide düğmesine tıklayın. car katmanı otomatik olarak içeri
alınır ve hareket kılavuzu uygulanır. Bu aynı 2. derste gördüğümüz maske katmanı gibidir. Yeni
katmana otomatik olarak Guide: car adı verilir ve car katmanının üzerinde yer alır.
Pencil aracını seçin ve Merge Drawing modelini kullandığınızdan emin olun. Hareket kılavuzu
çizmek için Object Drawing modelini kullanamazsınız çünkü teknik olarak grafik gruplanmış
olur ve çizdiğiniz yol sembolünüz tarafından kullanılamaz. Tools panelinin Options bölümünden
Smooth seçeneğini de seçin.
Smooth seçeneği ile fazla kırıklı olmayan çizgiler çizebilirsiniz ama isterseniz yolunuza birkaç
“tümsek” eklemenize de izin verir. Artık arabamız cetvel gibi bir çizgide gitmek zorunda değil! Eğer
yolunuzun çok akıcı olduğunu düşünüyorsanız, Smooth yerine Ink seçeneğini seçin ve yolu baştan
çizin. Böylece bir ölçüye kadar yumuşatma olsa da kenar çizgileriniz hiç değiştirilmez.
Çizimden önce diğer katmanları kilitleyerek kazara onlara çizim yapılmasını
önleyin.
Yeni Guide: car katmanı üzerine Pencil aracı ile bir yol çizin. Yol Stage’in solundaki Brannan
Street’ten sağdaki ağacın yanına gidecek. Arabanın ağaca “çarpmasını” istediğimizden yolu ağacın
gövdesinde bitirin. Yolunuz caddeyi takip etmeli ve “We Are Here” yıldızından dönerek yolun
ANİMASYON HAZIRLAMA 151
sonundaki ağaca yönelmeli. Yola birkaç kıvrım ve tümsek ekleyin. Yol ağaca ulaştığında çizgiyi
aşağıdaki şekildeki gibi yukarı bükün.
Çizim bitince motion guide katmanını (Guide: car) kilitleyin.
4. car katmanında kare 70’e bir anahtar kare ekleyin. motion guide, map star ve map
katmanlarında da kare 70’e kareler ekleyin. grCar’ı yolun her iki ucuna kenetleyin.
car katmanını seçin ve 70’teki boş kareyi seçip F6 tuşuna basarak yeni bir anahtar kare ekleyin.
Sonra map katmanında 70. kareyi seçin ve F5’e basarak bir kare ekleyin. Aynı adımı motion guide
ve map star katmanları için tekrarlayın.
Tools panelinden Selection aracını seçin ve Snap to Objects’in açık olduğundan emin olun.
car katmanında 1. karede grCar’ı tutarak Stage’in soluna, yolun bitimine sürükleyin. Nesneyi
merkezinden tutarak taşımanız daha kolay olabilir.
152 DERS 5
car katmanında kare 70’e tıklayın ve grCar’ı ortasındaki kayıt noktasından tutarak yolun sonuna
iliştirin.
5. car katmanında 1. kareyi seçin ve Properties denetçisinden bir motion tween ekleyin.
car katmanında kare 1’i seçin ve Properties denetçisini açın. Properties denetçisindeki Tween
listesinden Motion’ı seçin. Katmandaki kareler seçildiğinde, Snap kutusu seçili ve Orient to path
seçilmemiş olsun. car katmanı mor renk alacak ve motion tween’i gösteren ok animasyon karelerini
belirtecektir.
Properties denetçisinde hareket kılavuzları ve tween’leri ilgilendiren üç seçenek
bulunmaktadır: Orient to path, Sync ve Snap. Orient to path ile nesnenin yolun
istikametine göre yön değiştirmesi sağlanır. Nesne yoldaki kıvrıma göre döner.
Sync ile kopyanın animasyonu ana Timeline’a senkronize edilir. Snap ile de
nesneyi kayıt noktasından tutup hareket kılavuzu yoluna ekleyebilirsiniz.
Araba kılavuza doğru şekilde kenetlenmezse, başlangıç noktasından
hareketlenip düz bir çizgi izleyerek bitiş noktasına gidecektir. Bu durumda
arabanın kılavuza hem başlangıç hem de bitiş anahtar karelerinde doğru şekilde
iliştirildiğinden emin olun.
6. Animasyonun sonuna Ease değeri ekleyerek arabanın tween sırasında hızlanmasını
sağlayın.
Animasyonun ilk karesini seçin ve Properties denetçisini açın. Ease kutusuna -100 değerini girin,
böylece Flash Player’da animasyon oynatılırken iki anahtar kare arasında arabanın hızlanmasını
sağlarsınız. Control > Test Movie’yi seçerek animasyonu izleyin. Animasyon bu aşamada sürekli
tekrar edecektir.
7. Timeline üzerinde gezinerek animasyonu izleyin ve sonra motion tween üzerinde bir
değişiklik yapın.
Oynatım kafasını tıklayıp hareket ettirerek çizmiş olduğunuz yol boyunca motion tween’i
görebilirsiniz. Eğer araba yolu izlemiyorsa arabanın, motion guide katmanında oluşturduğunuz
çizginin her iki ucuna da iliştirildiğinden emin olun.
Hareket yolunun arabanın çarpacağı ağacın yanında istediğiniz gibi olmadığını ve arabanın ağaca
çarpmadığını göreceksiniz. İstediğimiz sonucu almak için arabayı döndürmemiz gerekiyor. car
katmanında iken, Timeline üzerinde 65 no’lu kare civarında arabanın dönmeye başlayabileceği
uygun bir nokta bulun ve F6 ile yeni bir anahtar kare ekleyin. burası animasyonun yeni bölümünün
başlayacağı yer olacak.
ANİMASYON HAZIRLAMA 153
Animasyonun sonunda 70 no’lu kareyi seçin ve ardından Tools panelinden Free Transform aracını
seçin. grCar etrafında tutacaklar belirir. Fareyi grCar’ın sağ üst köşesine getirin ve döndürme
imlecinin belirmesini sağlayın.
Arabayı döndürmek için grCar’ın köşesine tıklayın ve araba ağaca doğru yönelene dek sürükleyin.
İşiniz bittiğinde Timeline üzerinde oynatım kafasını hareket ettirerek animasyonun son halini
izleyin
154 DERS 5
8. actions adlı yeni bir katmanda en son kareye bir stop eylemi ekleyin.
Animasyonu bir SWF dosyası olarak izlerseniz sürekli tekrar ettiğini göreceksiniz. Bunu engellemek
ve animasyonu durdurmak için son kareye bir stop eylemi eklemeniz gerekir.
map star katmanını seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana çift tıklayın ve
actions adını verin. 70 no’lu kareye (veya animasyonunuzdaki son kareye) tıklayın ve F6 ile yeni
bir anahtar kare ekleyin. Yeni anahtar kareyi seçin ve Actions panelini açın. Script Assist hâlâ açıksa
Script Assist düğmesine basarak onu kapatın. Script paneline aşağıdaki ActionScript kodunu yazın:
stop();
İşiniz bittiğinde Ctrl+Enter (veya Mac’lerde Command+Enter) ile animasyonunuzu test ortamında
izleyin.
9. Dosyanızı map.fla olarak kaydedin.
Dosyanızı map.fla adıyla kaydettiğinizde bu kayıt ikinci derste oluşturduğumuz dosyanın yerini
alacaktır. Dosyanızı kaydedin ve kapatın.
ANİMASYON HAZIRLAMA 155
Bu Derste Öğrendiklerimiz
Bu derste şunları öğrendiniz:
• Kare kare animasyonlar, motion tween’ler ve shape tween’ler arasındaki farkları öğrendik.
(Sayfa 127).
• Bir klibe motion tween ekledik. (Sayfa 127-137).
• Alfa değerini zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion
tween uyguladık. (Sayfa 137-139).
• Parlaklığı zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween
uyguladık. (Sayfa 140-141).
• Sayfa çevirme animasyonu için bir shape tween uyguladık. (Sayfa 142-145).
• Bir kare kare animasyon oluşturma çalışması yaptık. (Sayfa 145-149).
• Merge Drawing Model ile çizilmiş vektörel bir yol boyunca bir sembolü hareket ettirdik.
(Sayfa 149-155).
• Bir animasyonun sürekli tekrarlanmasını önlemek için bir stop() eylemi kullandık
(Sayfa 155).
156 DERS 5