Düğme ile Etkileşim

Düğmeleri yaptıktan sonra şimdi onlara anlam katalım. 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.