Merhaba arkadaşlar ;

Adobe Flash programı ile yapacağınız websitelerinde yukarıda gördüğünüz gibi basit bir foto galeri yapmak oldukça kolay.Öncelikle foto-galeri yapmak istediğiniz fotoğraflarınızın tümünü aynı boyuta getirelim. Bunun için hemde ek-bilgi olması amacıyla Fireworks programının Batch Process komutunu kullanacağım.Batch Process ,Photoshop'ta da benzeri olan Batch Commands gibi bir işlemi birden çok dosyaya uygulamak için size kolaylık sağlayan bir uygulamadır. Bunun için Fireworks açıp File-Batch Process diyelim.Ben projemizdeki 4 Windows XP örnek fotoğraflarını aynı boyuta getirmeyi istiyorum.Bunları seçtim,siz de projenizde kullanacağınız fotoğrafları seçerek Next diyin,daha sonraki adımda Batch Options kısmında yapabileceğimiz işlemler yer alıyor.Mesela adını değiştirmeniz gereken yüzlerce dosya olsa buradan rename diyerek veya diğer komutlardan döndürmek gibi işlemleri seçerek çok sayıda dosyaya uygulayabilirsiniz.Ben buradan ben Scale seçip Add diyerek sola ekleyelim. Daha sonra altta gösterdiğim gibi aşağıda çıkan kısımdan "Scale to Size " seçelim ve 400 x 300 yazalım.

Sonraki adımda işlemler yapıldıktan sonra oluşturulan dosyalarımızın orjinal dosyalar üzerinemi yoksa farklı bir klasöremi koyulmasını soran ekranımız gelecek.Buradan da desktop seçelim ve Batch diyelim.
Böylelikle seçtiğiniz tüm dosyalara seçtiğiniz işlemi Fireworks uygulayacaktır.


Batch Process ile elimizde bulunan kullanmak istediğimiz dosyaları aynı boyutlara getirdik. Şimdi Flash programında bunları ithal etmemiz gerekiyor. Flash programını açalım, yeni bir dosya yaratalım ve masaüstündeki 4 fotoğrafı da File-Import to Library ile çağıralım. Library'deki 4 fotoğrafı da sahneye bırakalım ve alt tarafa doğru yerleştirelim. Bu görselleri teker teker alttaki gibi F8 basarak Buton yapalım ve 80'e 60 ölçülerine getirelim. Bunlar görselin önizlemeleri (thumbnial) olacak. Daha sonra da altta sağda gördüğünüz Align yani hizalamak işlemini yapalım.Bunun için Window-Align panelinden alttaki gibi "Distribute Horizontal"diyelim.


Şimdiye kadar olan kısımda arayüzü tamamladık. Bu kısımda animasyonumuzu vermeye başlayacağız. Öncelikle menuyu tutan layera alt_menu adını verip yeni bir layer ekleyelim.Adını da 1.foto verelim.
alt_menu layerının 1.frame'ine stop() komutunu verelim.Daha sonra 1.fotonun 2.frame'ini keyframe yapalım(F6) .Keyframe olduktan sonra anasahneye 1.fotomuzu libraryden kendi boyutunda ( 400 x 300 ) sahneye getirelim ve ortalayalım. Ortaladıktan sonra seçerek onu bir movie klip haline getirin.Daha sonra da aynı layerda 10 frame ilerisine 12.frame ilerleyerek F6 ile keyframe ekleyelim.

Tekrar 2.frame'e dönelim ve sahnedeki büyük movie klipe bir kere tıklayalım.Burada bu movie klipteki görüntünün geliş efektini vereceğiz. Bunun için alttaki gibi Properties panelinde beliren Color sekmesinden Advanced seçelim yanındaki Settings tıklayalım.Red:255 ; Green : 255 ; Blue : 255 ayarlayın.
Bu ayarlar fotomuzu yoktan görünür kılarken beyazımsı bir efektle getirmemizi sağlayacak.En sonunda da animasyonumuzu vermek için 2. ve 12.ci keyframeler arasına sağ tıklayarak Create Motion Tween diyelim ve 12.frame'e de animasyon tamamlandığında durması için Actions'tan stop(); verelim.

Fotoğrafımızın yukarıda gelme efektini tamamladık.En başta yarattığımız butondan 1.ci olanın Actions kısmına girerek ona tıklanınca (onRelease) bu animasyonu göstermesini sağlamalıyız.Bunun için o butona tıklanınca(onRelease) gotoAndPlay(2) actions veriyoruz.

Aynı şekilde geriye kalan 3 fotoğraf içinde geriye kalan framelerde mesela 2.foto için 13ile 23.frame ler arasında(13.frame çünkü 1.cinin bitiş noktası)(10 frame çünkü 1.ci animasyonla aynı sürede olmalı) bu efekti veren animasyonu tekrarlayıp alt_menudeki 2.butona da gotoAndPlay(13) actions vermeliyiz.

Yukarıda gösterdiğim kısımda bir Buton'un actions kısmı bulunuyor.Burada ek bir bilgi de vermek istiyorum.Flash'ta butonların trigger'ları(tetikleyicileri) vardır. Yani o butona verdiğiniz aksiyon mesela tıklayınca çalışır.Butona sağ tıklayıp actions kısmında(script assist açık iken) yukarıda gördüğünüz butona verebileceğiniz diğer tetikleyiciler listelenir.Default olarak bu sık kullanılan release de durur.Release butona tıklandıktan sonra bırakılınca çalış demektir.Bunun gibi tıklar tıklamaz çalışsın isterseniz press diyebiliriz,release outside tıkladıktan sonra butonun hit alanından çıkınca çalışsın diyebiliriz,key press ile bir tuşa basıldığında çalıştırabiliriz,veya benim örneğimde kullandığım Roll Over dersek butonun üzerine geldiğinde bunu çalıştır diyebiliriz.Drag ise bastıktan sonra basılı şekilde mouse'un taşınması anlamındadır.Yeri geldiğinde özellikle oyunlarda bunlar da kullanılır.Bu kısımda Release seçimini kaldırıp 4 buton içinde RollOver tetiklemesini ekleyelimki üzerine gelince fotoğrafın geliş animasyonu çalışsın.


Flash ile fotoğraflarımızla Galerimizi yarattıktan sonra geriye Dreamweaver ile bu galerimizi yayınlamamız kalıyor. Bunun için
flash galerimizi gösteren swf ve html dosyalarına ihtiyacımız var.
Dreamweaver da yeni bir html dosyası açalım ve masaüstüne flash_galeri.htm olarak kaydedelim.Flash projemizi çalışmamıza eklemek için swf dosyamızı da masaüstüne kopyaladıktan sonra Dreamweaver'da Insert-Media-Flash diyelim ve swf dosyasını gösterelim.Böylelikle bir html sayfamıza flash galerimizi ekledik. html ve swf dosyası internete eklendiğinde flash galeriniz gösterilecektir.swf oluşturan fla dosyası flash çalışmanızın kaynak dosyası olup yüksek boyutlu olması nedeniyle internete eklenmez,sadece yedeklenir.

Bu çalışmamdaki html,swf,fla dosyalarını indirmek için tıklayın.

Bu projede fotoğraflara efekt kazandırarak butonlara atama mantığını anladıysanız arayüzü farklı çok daha değişik foto galeriler tasarlamak artık sizin hayal gücünüzde. İyi tasarımlar.