Macromedia Flash 5 Dersleri 3

Düğme ile Etkileşim
Planımız önce bir menü
hazırlamak. Bu menüde iki seçenek yani iki düğme olacak. Birinci
düğmeye basıldığında birinci animasyon, ikinciye basıldığında ikinci
animasyon gösterilecek. Sonra animasyonun altında bir geri tuşu çıkacak
ve ona basılıncaya kadar beklenecek. Basılınca menüye geri dönülecek.
Bunu yapabilirseniz artık bir web sitesi yapmak için gerekli çok şeyi
öğrenmiş olacaksınız. Daha önce motion tweening ve shape tweening'li
animasyonlar hazırlamıştık. Motion tween için yarattığınız objeleri
sembollere çevirmek (Inspect > Convert to symbol), shape tweening
içinse tam tersi, sembol yada grup'larsa "break apart" (grubu seçip "
modify > break apart yada "modify > ungroup", belkşde birkaç kez)
yapmak gerektiğini bir daha hatırlatalım. Şimdi temiz bir döküman
açalım. Bir de scene ınspector'u açıp ("wındows>ınspector>scene
ınspector") add düğmesine basarak iki yeni scene ekleyelim. Birinci
animasyonun tüm timeline'ını bütün layer'larla birlikte seçip sağ
tıklayıp "copy frames" yapalım. Sonra açtığımız yeni dökümanda scene
2'ye geçip, timeline'de birinci frame üzerinde sağ tıklayıp "paste
frames" yapalım. Scene 3'e de ikinci animasyonun frameslerini
kopyalayalım. Sonra library ınspectordan yeni iki sembol isteyip iki
düğme hazırlayalım. Bu düğmeleride scene 1'e yerleştirelim. Düğme
yapmaya üşenirseniz, "libraries > buttons" dan hazır düğmeler bulup
kullanabilirsiniz. Başka bir dökümanda yaptığınız düğmeleri kullanmak
isterseniz, "file > open as library" komutunu o flash dosyasının
bütün kaynaklarını bir library penceresinde açıyor. Buradan tutup
kullanabiliyorsunuz.
Sıra geldi beklenen interaktiviteyi yaratmaya.
Birinci scene yani iki düğmenin durduğu scene gösterildikten sonra
beklenmesini istiyoruz. Bu scene'in son keyframe'inin ki sadece düğme
koyduğumuz için biradet keyframe var zaten, properties penceresinde
actions kulakçığına tıklayın. Dikkat edilmesi gereken şeylerden biride
hem stage'deki objelerin, hemde frame'lerin action özellikleri
olabiliyor. Şimdi karşınızdaki penceredeki artı düğmesine basın ve
"stop" u seçin. Böylece yeni bir emir gelene kadar scene 1'de
bekliyoruz. Bu emri uygulamasaydık scene1,2 ve 3 sırayla
gösterilecekti. Düğmelerin bağlantılarınıda yapalım. Birinci düğmeyi
seçin ve properties'ine gelin. Actions'da artıya basarak bu sefer GoTo
seçin. Yan tarafta çıkan pull down menüde scene 2'yi seçin. GoTo and
play seçeneğinin işaretli olmasına dikkat edin. Aynı işlemi ikinci
düğme ve scene 3 için yapın. Şimdi scene ınspectordan scene 2'ye
geçelim ve bu animasyonun sonuna bir geri dönüş düğmesi ekleyelim.
Düğmeyi tercihan yani bir layer'a koyalım. Yeni layer yarattıktan sonra
animasyonun son keyframe'inin hizasında düğme layer'ında da bir
keyframe yaratalım. Koyduğumuz düğmeyede GoTo scene 1 emrini verelim.
Animasyonun bittikten sonra beklemesi için son frame'e bir stop
eklemeyi unutmayın. Ve aynı işlemi scene 3'deki animasyon için de
yapalım. Ve CTRL ENTER yapıp izleyelim.
Animasyonlu Düğmeler
Üç
cins sembol olduğundan daha önce bahsetmiştik. Birincisi durağan bir
grafik, ikincisi bir düğme, üçüncüsü ise animasyondu. Sembollerin başka
semboller içerebileceğini de anlatmıştık. Şimdi bu bilgileri kullanma
ve bu sayede biraz daha havalı bir düğme yapmanın zamanı geldi. Havalı
düğmeden kasıt, üzerine gelince veya basınca yada hiç birşey
yapmadığınız zaman bile bir animasyon gösteren düğmeler. Yukarıdaki
bilgilerden tahmin edebileceğiniz gibi, böyle şeyleri düğmenin gerekli
frame'ine başka bir sembol ancak bu sefer bir "movie clip"
yerleştirerek yapıyoruz. Bu "movie clip" sembollerini de her zamanki
gibi stage'de yaratıp yani sembol ekleme sahnesine kopyalayabilir yada
sıfırdan sembol editöründe yapabiliriz. Az önce yaptığımız düğmeyi daha
da şıklaştıralım. Şimdilik basit bir animasyon ekleyelim. Düğme basılı
iken etrafıda bir top dönsün. Düğmenin üstteki yuvarlatılmış
dikdötgenin kenarını seçelim. CTRL C ile kopyalayalım. Yeni bir sembol
açalım. İsim verdikten sonra behaviour olarak "movie clip" vermeyi
unutmayalım. Bu yeni sembolün ilk layerine bir adet top yerleştirelim.
Ve bu topuda bir sembol haline getirelim. Şu anda bir sembolün içine
başka bir sembol yerleştirmiş bulunuyorsunuz. Şimdi yaklaşık 20 frame
sonrasına bir keyframe koyalım. Sonra layer ismine sağ tıklayıp "Add
Motion Guide" seçelim. Yeni bir layer oluşmuş olmalı. Bu layer seçili
iken CTRL SHIFT V basarak "Paste in Place" yapalım. Bu komut,
kopyaladığınız nesneyi ekranın neresinden aldıysanız oraya
yapıştırıyor. Normal CTRL V yaparsanız ekranın tam ortasına koyuyor ve
sizi uzun uzun onion skinlerle herşeyi yeniden üstüste getirmek zorunda
bırakıyor. Düğmenin kenarları şu anda top” için motion guide olarak
layerine yerleşmiş durumda olmalı. Motion guide'ın bir çizgi haline
dönüşmesi için sol üst köşesinden bir parçayı silgiyle silelim. Şimdi
birinci frame'e gidelim, topu tutup dikdörtgen çizginin başlangıcına
yerleştirelim. ("view > snap" açık olmalı) sonrada son frame'e gidip
sonuna yerleştirelim. Enter'e basıp topun dönüp dönmediğini kontrol
edin.
Sıra geldi dönen topumuzu düğmeye eklemeye. Timeline'ın sağ
üst köşesindeki düğmeye basarak biraz evvel yaptığınız düğmeyi seçin.
Yeni bir layer yaratın ve down frame'e gelin. Library'den dönen topu
alıp stage'e taşıyın. Onion skinning ile tam dikdörgenin üzerine
oturtun. Düğmenizi çalışırken görmek için bu sefer "Control > Enable
Buttons"un açık olması yetmiyor. Mutlaka CTRL ENTER basıp animasyonu
test etmelisiniz.

WEB'E TRANSFER

Web Ortamına Aktarma
Artık
yaptığımız animasyonları web ortamına aktaralım. Yaptığınız animasyon
herşeyiyle bittiğinden eminseniz, onu "swf" uzantılı olarak export
etmek lazım. Ancak bu şekilde herhangi bir browser'a okutabiliriz. Acak
yaptığınız animasyonun birde "fla" uzantılı olan bir kopyasını
kaydetmeyi unutmayın. Flash'ta menü çubuğundaki File > Export
Movie'ye bastığınız zaman size nereye ve hangi isimde kaydedeceğinizi
soran bir pencere çıkacaktır. Bunları belirttikten sonra "swf" uzantılı
flash animasyonunuz hazır demektir. Eğer bir HTML editörü
kullanıyorsanız işiniz çok basit. Mesela FrontPage için yaptığımız
animasyon bir plug-in'dir, yani eklentidir. Menü çubuğundan Insert >
Advanced > Plug-in'e basın. Karşınıza çıkacak pencereden, Browse
yani gözat'ı tıklayın animasyonun yerini söyledikten sonra boyutlarını
belirtin. Burada dikkat edeciğiniz bir şey var. Animasyonun boyutu ne
kadar büyürse büyüsün dosyanızın boyutu değişmez, ancak ekran kartından
doğabilecek sorunları da çözmez. Yani kullanıcının ekran kartının RAM
kapasitesi düşükse animasyonu oynatmakta zorluk çekecektir. Bu yüzden
animasyonu ergonomik kullanmak gerekir. Plug-in properties
penceresindeki diğer seçenekler kenarlıklarla ve nereye yanaşık olacağı
ile ilgilidir. OK düğmesine bastığınızda, sayfanızda elektrik fişine
benzer bir şekil kalacaktır. Alttaki sekmelerden Preview sekmesine
tıkladığınızda animasyonu izleyebilirsiniz.
Buraya kadar kolay ancak
bazıları HTML sever. Sevmeyenlerinde okumasında fayda var. Yaptığınız
animasyonun HTML kodlarını öğrenmek için Flash programında File >
Publish Preview > HTML'ye basarak bulabilirsiniz. Karşınıza sürekli
kullandığınız browser açılacak. Buradan View > Source (Görünüm >
Kaynak) ile tüm kodları kullanabilirsiniz.
Link Verme

Actions - Link Verme
Başlı
başına bir programla dili ile hazırlanabilen aksiyonlar sayesinde,
sınırlarınızı zorlaycak animasyonlar oluşturabilirsiniz. Programın bu
özelliğinden faydalanmak için, Actions menülerini kullanacağız.
Aksiyonlar ya mouse ile etkileşince veya klavyeden bir tuşa basınca ya
da animasyonun normal seyri sırasında, herhangi bir frame'e ulaşınca
devreye girer. Bu yüzden hangi aksiyonu nereye vereceğimizi bilmemiz
gerekir. Actions konularında biraz ilerleyince bunu daha iyi
öğreneceğiz. Önceki derslerden Actions'ın komutlarının nasıl verilmesi
gerektiğini biliyorsunuzdur. Actions sekmesine tıkladığınız zaman iki
bölümden oluşan bir pencere çıkacaktır karşınıza. Sol tarafta, artı ( )
işaretinizde basıp eklediğiniz komutların sırası ile listesi verilir.
Sağ tarafta ise bu komutların modifier'leri ve ona ait çeşitli
seçeneklerin bulunduğu bir penceredir.
Link verme
Animasyonumuzda
bazı düğmelere link vermek isteyebiliriz. Bunun için link vermek
istediğimiz düğmenin üzerinde sağ tıklayıp ( Instance Properties:
yukarıda bahsetmiştik, neye actions verilmesi gerekiyorsa onun üzerinde
sağ tıklamamız gerekir. Bu actions'ı button'a veriyoruz, frame'e
değil.) properties'ten Actions sekmesine gelin. Artı'ya basıp "Get URL"
seçeneğini işaretleyin. Yan taraftaki URL penceresine "http://"
ibaresini de yazarak link vermek istediğiniz adresi yazın. Sol
taraftaki listede "On" seçeneğinin üstüne gelin. Şimdi sağ tarafta
"Event" başlığı altında bir kaç seçenek çıktı. Bunlardan
"Press"; düğmenin üzerinde tıkladığınız zaman,
"Release"; düğmenin üzerinde tıklayıp bıraktığınız zaman,
"Release Outside"; düğmenin üzerinde tıklayıp, dışarda bıraktığınız zaman,
"Roll Over"; düğmenin üzerine geldiğiniz zaman,
"Roll Out"; düğmenin üzerine gelip, dışarı çıktığınız zaman,
"Drag Over"; düğmenin üzerinde tıklayıp, dışarı çıkıp tekrar düğmenin üzerine geldiğiniz zaman (tıklamayı bırakmadan),
"Drag Out"; düğmenin üzerine tıklayıp, dışarı çıktığınız zaman,
"Key Press"; klavyede belirteceğiniz bir tuşa bastığı zaman,
verdiğiniz
URL'ye gider. Aslında yukarıdaki listeyi iyice öğrenmekte fayda var
çünkü bu işlemi sadece link vermede kullanmayacağız. URL penceresinin
hemen altında "window" kısmında URL'nizin hangi browser penceresinde
açılacağını bildiriyorsunuz. "_self" aynı pencereye, "_blank" yeni boş
bir pencereye açıyor. Eğer frame kullanıyorsanız (animasyon frame'i
değil HTML frame'i) frame adını elinizle girmeniz gerekir. Variables
kısmı şimdilik bize yaramıyor.
Hedef Belirtme
Animasyonu yaptınız
ama eksik olan bir şeyler var. Düğmelerinizdeki etkileşimler hep aynı
yerde değilmi. Kullanıcı bir düğmeye tepki verdiğinde, başka bir yerde
bir şeyler olsun istiyorsak bunu "tell target" ile, yani hedef
söyleyerek yapabiliriz. Şimdi boş bir çalışma sayfası açıp işe
başlayalım. Sayfanın alt kısmına yuvarlak çizip içine ana sayfa
yazalım. Sonra hepsini seçip F8 tuşuna basalım. Adına ana sayfa diyerek
"button" seçeneğini işaretleyip tamam diyelim. Sonra sahnenin
görünmeyen yerine geniş bir dikdörtgen çizelim. Bunu da seçip F8 tuşu
ile animasyon adı altında "Movie clip" yapalım. Şimdi animasyon adlı
movie clip'imizi kütüphanemizden çağırarak açalım. 5. frame'e gidip
keyframe koyalım. Seçili olan dikdörtgeni silip aynı genişlikte daha
uzun bir dörtgen çizelim ve içine "tıklarsanız ana sayfaya gidersiniz"
yazalım. Sonrada "shape tween" ile animasyonu bitirelim. Sonra da ilk
ve son frame'lere Actions'tan stop değerini verelim (Bu sefer frame'e
Actions verildi!). Tekrar scene1'e dönüp, yaptığımız animasyonun
üzerinde sağ tıklayıp properties'inden "Definition" sekmesini seçelim.
Orada "Instance Name" kısmına ana sayfa yazalım. Bu, yaptığımız movie
clip'in gerçek ismidir.
Şimdi "Insert > Scene" ile bir scene daha
ekleyelim. Burayada "Şimdi ana sayfaya girmiş oldunuz" yazalım ve hemen
altına "geri dönmek için buraya tıklayın" yazalım. Son yazdığımız
yazıyı seçip F8 ile düğme yapalım. Yaptığımız bu düğmenin Actions
kısmına "On Mouse Event" yazdıralım. Sonrada "GoTo" komutunu koyalım.
"GoTo" komutuna, sağ taraftan "Scene1" diyelim. "On" komutuna da Press
diyelim ve kapatalım. Liste aşağıdaki gibi olmalı. Burada yaptığımız iş
-"geri dönmek için burayı tıklayın" yazısına tıklandığı zaman scene 1'e
git ve dur, demektir. Dur diyoruz çünkü Scene 1'de oynatılacak bir şey
yok. Eğer olsaydı, alt kısımda "goto and play" seçeneğini işaretlememiz
gerekirdi.
Tekrar Scene 1'e dönelim ve orda olan ana sayfa
düğmesinin Actions'ına geçelim. İlk önce mouse üzerine geldiği zaman
yukardaki movie clip'i oynatsın diyeceğiz. Yani hedef söyleceğiz.
Artıya basarak "tell target" seçin. Yan tarafta ana sayfa isimli movie
clip görünecektir. Eğer görünmüyorsa movie clip'in "Instance Name"
kısımına bir şey yazmamışsınızdır. Ana sayfa yazılı clip'in üzerine çit
tıklayın. Aşağıda "Target" penceresine "/ana sayfa" yazacaktır. Artık
hedef belli oldu. Şimdi yine artıya basarak "Play" komutu verelimki
movie clip oynasın. Yoksa ilk frame'e verdiğimiz stop değerinden dolayı
1. frame'de kalır. Eğer hedef movie clip'imiz karışık bir animasyon
ise, o zaman "GoTo" diyerek isdeğimiz frame'den oynatmaya
başlayabilirdik. Ama bize sadece "Play" demek yetiyor. "On" komutuna da
"Roll Over" diyelim ki mouse düğmenin üzerine geldiğinde animasyon
oynamaya başlasın. Şimdi en aşağıda kalan "End On" komutunun üzerine
gelip tekrar artıya basalım. Yine "tell target" diyelim. Bunu da mouse
düğmenin üzerinden çekildiği zaman animasyonun durması için yapalım.
Aynı şekilde hedefi "ana sayfa" seçelim ama bu sefer "GoTo" diyerek
durmasını sağlayalım. Aşağıdaki Control seçeneği "goto and play"
işaretli değilse, komut "Go To and Stop (1)" şeklinde olacaktır. Son
verdiğimiz hedefin "On" komutuna da "Roll Out" diyelim ki mouse
üzerinden çekildiği zaman movie clip oynamasın. Burada dikkat edilmesi
gereken bir nokta var. Eğer mouse düğmenin üzerinden çekildikten sonra
da movie clip'in başka bir yeri oynayacaksa frame numarasını vermek
yeterlidir. Yalnız movie clip üzerinde hangi frame'lere stop
değerlerini verdiğinizi unutmayın. Son olarak tıkladığımız zaman Scene
2'ye geçsin istiyoruz. En alttaki "End On" komutunun üzerine gelin ve
artıya basın (dikkat ederseniz komutları sırası ile vermek için,
yazacağımız komut nereye koyulacaksa onun hemen üstüne tıklamanız
gerekli). Bu sefer "On Mouse Event" komuunu seçin, ardından "GoTo"
komutunu seçin ve sağ taraftan Scene 2'yi işaretleyin. Scene 2'de
oynatılacak hiç birşey olmadığından "stop" değerinde kalıp kalmaması
önemli değildir. "On" komutunu da "Press" yaparak tıklandığı zaman
Scene 2'ye geçmesini sağlayalım ve son olarak Scene 1'deki frame'e
"Stop" değerini verelim. Bu da Scene 1 oynadıktan sonra hemen Scene
2'ye geçmesini önler. Artık aşağıdaki komut listesinde görüldüğü gibi
listemizi bitirelim. CTRL ENTER'e basarak izleyin.

Teşekkürler.