Flash-ActionScript

Türkiye'nin en yeni flash-actionscript makale sistemi.

21 Temmuz 2008 Pazartesi

İnteraktif Film Şeritli Foto Galeri Tasarımı

Bu dersimizde flash çalışmalarınızda keyifle kullanabileceğiniz film şeridi projesinin nasıl yapılabileceğini ele aldık.Bugün öğrencilerimin projelerinde keyifle kullandığı film şeridi projesinin nasıl yapılabileceğini anlatacağım.


Bu şeriti sahnede akmasını istediğimiz yere koyuyoruz ve içine de kaç adet fotoğrafımız akacak ise ekliyoruz. Burada fotoğrafları dışarıda Photoshop & Fireworks benzeri bir programla maskeleyerek film şeridinin içerisine getirmemiz daha mantıklı olacaktır.Çünkü fotoğraflarımızı Flash'a getirdiğimizde Flash'ta küçülttüğümüzde aslında o boyut olarak aynı kalıyor, sadece sahnedeki boyutu küçülüyor. Ben örneğimde sadece rakamlar ile göstereceğim ki, Loop mantığı çok daha rahat görülebilsin, siz tasarımda fotoğraflarla yapabilirsiniz.İlk frame'imizde CTRL+F8 ile yeni bir Movie Klip yaratalım ve içerisine girelim. Sonra film şeridini ve gerekli fotoğrafları getirelim ve hepsine şekil bozup ayrı ayrı buton yapabilmek için CTRL+B (Break Apart) diyelim. Daha sonra, mesela bendeki 1 ve arka tarafındaki şeritin kısımlarını seçip CTRL+F8 ile Buton yapalım ve içerisine girip Up-Over-Down-Hit kısımlarını tasarlayabilirsiniz ve tavsiyem Hit alanını baştan komple bir daire çizmeniz.Ufak da bir tavsiye: Mesela fotoğrafın üstüne gelince (Up durumu) yarı saydam fotoğrafın ortasında beyaz bir dörtgen üzerinde çıkabilir. Daha sonra 5 adet butonumuz olsaydı, herbiri için sağ tıklayıp buton actions'ına :
on (rollOver) {
stop();
}
on (rollOut) {
play();
}
on (press) {
_root.gotoAndStop("bir");
}
kodlarını yazalım, ancak 1 için "bir", 2 için "iki"... gibi düşünerek ekleyelim. Buradaki rollover kodu animasyonun üzerine gelince durduracak, rollout yani geri çekince de tekrar animasyonu kaldığı yerden oynatacak ve tıklanınca bir movie klip içerisindeyiz, bu yüzden ana sahnede bir link vermek istediğimizden movie klip içerisinden ana sahneye gotoAndPlay veya Stop'un başına _root. yazarak tıklanınca da gösterilecek frame label'ını yazdık.Daha sonraki adımda bende mesela 5 adet fotoğraf var, bunları aynı şekilde alt tarafa da kopyalıyorum. ALT tuşuna basarak ve bunların hepsini seçip CTRL-G ile gruplayın. Daha sonra rakamı tamamıyla senaryomuza ait akış hızına karar vereceğiniz keyframe'e gidin. Ben 250. keyframe'e F6 ile bu şeridi ekliyorum ve Shift'e basılı halde yukarı doğru alttaki gibi konumlandıracak şekilde taşıyorum.Burada animasyonu verirken bir şeye dikkat etmek gerekiyor. Alttaki gibi Motion Tween verirken sağdaki gibi aradaki framelere sağ tıklayıp Create Motion Tween diyebiliriz, ancak bu Motion gerekleri olan ilk ve son keyframe'deki unsurları Graphic'e çeviriyor, bu istediğimiz birşey değil bu projede. O yüzden sağda gösterdiğim yerden animasyonun ilk keyframe'ini seçip alttaki properties panelinden Tween - Motion verelim. Bu eğer tasarımdakiler grupluysa onları Graphic olarak göstermeden Motion Tweeni veriyor. Graphic olursa üzerinden biraz sonra yazacağımız Actionscript kodlarını taşıyamıyor.Bu Film şeridi Movie Klipini sahnenin sağında devamlı akacağını planlıyoruz. Üzerine gelince duracak ve üzerindeki butonu işaretleyecek ve geri çekince kaldığı yerden oynamaya devam edecek. Bu yüzden bir loop verebilmemiz lazım. Zaten 2 adet kopyalamamızın da nedeni bu. Altta göstermeye çalıştığım 2 frame'in görüntüsünde 194. keyframe'de şerit 5.ci fotodan 1'e dönerkenki konumunda 195. keyframede aslında 1. keyframe'deki konumunda olacağından 194. keyframe'den sonra 1.keyframe'i göstertmek suretiyle loop'u sağlamaya çalışacağım.Bu loop sağlayacak actions kodumuzu yeni bir actions layerı aşağıdaki gibi açıp 194.keyframe'e gotoAndPlay(1) gibi kod ile 1.keyframe'e gitmesini söyleceğiz.Son adımımızda bu menüden tıklanınca gösterilecek anasahnemizi tasarlamaya geldi sıra. Anasahneye çıkıyoruz ve ilk frame'ebir stop veriyoruz ki animasyon burada dursun bizim şerit movie klipimiz oynasın. 1.keyframe'e ben bir hoşgeldiniz yazısı ekledim.2.frame'e keyframe ekliyoruz ve sahnede açılacak büyük fotoğrafı ekliyoruz. loadMovie ile dışarıdan da çekilebilir ve mesela görünmezden görünüre olsun diye bir 10 frame'de kullanabilinir ama ben sadece 2.keyframe'e erişmeyi düşündüm basitlik açısından.2.frame'i timeline'dan seçip alttaki properties panelinde frame labelını koddaki gibi "bir" ise süslü tırnaksız bir yazıyoruz. Ve frame'e stop veriyoruz. Aynı işlemleri 3,4,5 gibi linkler içinde yan frameler için de uygulayın.Anlatımımın yeni başlayanlara göre olmadığını biliyorum, ancak aksi takdirde anlatırken daha da uzaması gerekecek. O yüzden anlatımımda darlıklar var ise üzgünüm. Flash temellerini tam olarak oturtmuş olursanız, çok rahat yapabileceğiniz bir uygulama bu. Kısaca orta düzey bir kullanıcı iseniz bu dersi kolaylıkla yapabilirsiniz diye düşünüyorum.
Faydalı olması dileğiyle...
sanalkurs

0 Yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları [Atom]

<< Ana Sayfa