İnteraktif Film Şeritli Foto-Galeri Tasarımı
Yazar : E.Altuğ YILMAZ
Son adımımızda bu menüden tıklanınca gösterilecek anasahnemizi tasarlamaya geldi sıra. Anasahneye çıkıyoruz ve ilk frame'e bir stop veriyoruzki 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 çekilebilinir 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 framelerde uygulayın.
Merhaba arkadaşlar ;
Bugün öğrencilerimin projelerinde keyifle kullandığı film şeridi projesinin nasıl yapılabileceğini anlatacağım. Öncelikle bir film şeridine ihtiyacımız var,vektörel olması da tabiiki tercihimiz.Bu projedekini indirmek için tıklayın.
http://ercanaltug.googlepages.com/Filmstrip.rar
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ür.Ben örneğimde sadece rakamlar ile göstereceğimki Loop mantığı da ç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 iin 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 ta 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üşünrek ekleyelim.Buradaki rollover kodu animasyonun üzerine gelince durduracak,rollout yani geri çekincede tekrar animasyonu kaldığı yerden oynatacak ve tıklanınca bir movie klip içerisindeyiz bu yüzden anasahnede bir link vermek istediğimizden movie klip içerisinden anasahneye gotoAndPlay veya Stop'un başına _root. yazarak tıklanıncada gösterilcek frame labelını yazdık.
Daha sonraki adımda bende mesela 5 adet fotoğraf var bunları aynı şekilde alt tarafada 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 gidip ben 250.keyframe'e F6 ile bu şeridi ekliyoruz ve Shift'e basılı halde yukarı doğru alttaki gibi konumlandıracak şekilde taşıyoruz.
Burada animasyonu verirken bir şeye dikkat etmek gerekiyor. Alttaki gibi Motion Tween verirken sağdaki gibi aradaki frame'lere 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 1e dönerkenki konumunda 195.keyframede aslında 1.keyframe'deki konumunda olacağından 194.keyframe'den sonra 1.keyframe'i göstertmek suretiyle loopu 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.
Anlatımımın yeni başlayanlara göre olmadığını biliyorum ancak daha da uzaması gerekecek anlatırken diğer türlü o yüzden anlatımımda darlıklar var ise üzgünüm,lütfen Flash temellerini tam oturtmuş olursak çok rahat bir uygulama bu.
Örnek çalışmamın fla dosyasını indirmek için tıklayın :
http://ercanaltug.googlepages.com/film.fla
Faydalı olması dileğiyle...
6/4/08
teşekkürler hocam ellerinize sağlık sitemde yaptım zaten gerçi :)