Flash'ta foto galeri yapalım

Adobe Flash programı ile yapacağınız websitelerinde basit bir foto galeri yapmak oldukça kolay.

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 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.

Bu çalışmamdaki html, swf, fla dosyalarını aşağıdaki linkten indirebilirsiniz.


  • Etiketler;
Ercan Altuğ Yılmaz
1981 İstanbul doğumlu. Öğrencilik kariyerine Maltepe Üniversitesinde e-MBA yaparak devam etmektedir. <p>Eğitmenliğe 2000 yılında Akademi-İstanbul'da Web Tasarımı eğitimleri vermekle başladı. İznik Akademisi, Digiturk, Medyasoft, SmartPRO gibi yerlerden sonra, şu an Netron Bilişim Akademisi Web & Grafik Tasarım Ürünleri Eğitmenidir. <p> Sanalkurs.net üzerindeki dersleriyle de sizlere yol göstermeye devam edecek.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

teşekkürler... anlatımınız çok güzel.:gul:
Tsk ederim hocam.
hocam gerçekten çok güzel ve faydalı dersler veriyorsunuz. teşekkürler. derslerinizin devamını bakliyoruz:kirp:
Elinize sağlık hocam basit( ögrenince ) ama cok güzel
tskler hocam faydali bilgileriniz icin...:gul:
teşekkur ederim hocam faydalı bilgileri bizlere uygulamalı olarak izah ettiğiniz için.sağlıcakla kalın:D
Teşekkürler hocam faydalı bilgiydi.işime yaradı. sizden öğreneceğimiz çok şey var sanırım.
hocam büyüyen resmin yanına acıklama metnini nasıl koyabiliriz??? teşekkürler,iyi çalışmalar
Merhaba yeni bir layer eklersiniz sadece o framelerde gösterirsiniz. Timeline kısmına hakimseniz rahatça yapabilirsiniz.
güzel çalışma tşkr
yeni bir dosya yaratalım ve masaüstündeki 4 fotoğrafı da File-Import to Library ile çağıralım. burada takıldım yaa arkadaşlar yeni bir dosya yapıyorum improt to libray yapıyorum fotoğrafı seciyorum fakat fotolar gelmiyor..yeni bir dosyayı nasıl acıyoruz.file new diyerek acıyorum...
hocam ben de aynılarını yaptım ama butonların ilki ile sonuncusu çalışmıyor:( test movie deyince çıkan playerda "play1 e tıkladıktan sonra oynuyor( niçün?
hocam ben de aynılarını yaptım ama butonların ilki ile sonuncusu çalışmıyor:( test movie deyince çıkan playerda "play1 e tıkladıktan sonra oynuyor( niçün?
ya hocam öncelikl teekür ederim am a şu kod kısımlrı anlamadk biras aydınlatıranız sevinirim bide bu ytınızda deneyeyim eim ama bendeki rsimler fazla napıcazz?
Kıvılcım baştaki ve sondaki frame'lere stop() ekle.fuki tekrar yap gayet basit aslında actionsları.resimler fazla ise alt tarafa 2-3 şerit yapabilirsin veya yana da ekleyebilirsin,küçük önizlemeleri küçültebilirsn sana kalmış
bu yardım için çok teşekkür ederim gerçekten çok açık yalnız takıldığım bir yer var ; batch process kadar geldim resim seçtim ama farklı kaydetmede takıldım deshtop dedim ama Batch aktif deil yardımcı olursanız çok sevinirim bu bilgiye ihtiyacım var şimdiden teşekkür ederim
bunun otomotik değişmesi için ne yapabiliriz
arkadaşlar bende bu çalışmayı denedim ama ben küçük resimlerim çok fazla bunları nasıl bir yön tuşuyla kontrol edilebilir yapabilirim bide ben resimlere tıkladıgımda resim açılıyor ama bu sefer de küçük resimlerim kayboluyor.lütfen yardım !!!
uygulamı indiremed.Yardım
saolasınn eywallhh..
teşekkürler..
Emeğinize sağlık hocam, yaptım oldu ve işime yaradı teşekkürler :)
hocam biliyorum zor olucak ama kaynak dosyayı tekrar yükleme gibi bir şansımız var mı? acaba.. :-dusun:
Kaynak dosya linki kırık sanırım ... Yenilenirse iyi olur ... ;)

Yukarı Git