|
 Flash’ta basit bir Foto Galeri (Foto Albüm) hazırlayalım…
Herhangi bir klasör içerisindeki resimleri kodlar aracılığı ile çağıracağız ve oluşturacağımız butonlar aracılığı ile “ileri” ve “geri” işlemlerini uygulayacağız.
1. İstediğimiz boyutlarda boş bir Flash sayfası açalım (Action Script 2.0). Bu çalışmamızı bir yere kaydedelim. Flash çalışmamızı kaydettiğimiz yere “resimler” isminde bir klasör açalım ve içerisine resimlerimizi koyalım. Resimlerimizin boyutlarını da ayarlayalım tabiki isteklerimiz doğrultusunda. Ben burada resimleri 600 * 400, flash ekranını ise 620 * 420 olarak ayarladım.
Resimler ekrana geldiğinde etrafında çerçeve olsun diye. Resimler klasörü içerisine koyduğum resimlerin isimlerini de resim0.jpg, resim1.jpg, resim2.jpg, resim3.jpg, resim4.jpg, resim5.jpg … olarak ayarladım. Siz hem klasör hem de resim isimlerini istediğiniz gibi değiştirebilirsiniz. Ancak aşağıda kullanacak olduğumuz kodlarda bu değişiklikleri yapmayı unutmayın.
Şimdi gelelim çalışmamıza. Flash ekranımızın boyutlarını ayarladıktan sonra içerisine resimlerimizi göstermek istediğimiz boyutta bir dikdörtgen, kare vb. çizelim. Ben 600 * 400 boyutunda çizdim çünkü resimlerimi o boyutta hazırlayıp resimler klasörüne koydum.
2. Daha sonra bu şeklimizi sembole dönüştürmek için (şekil seçili iken) üst menüden “Modify > Convert to symbol” veya “F8” kısa yol tuşunu kullanalım ve “Movie clip” olarak işaretleyip kaydedelim.
3. Daha sonra Özellikler (Properties) kısmında “instance name” ismini photo olarak verelim. Bu ekran eski versiyonlarda ekranın altında yer alır. Bu dersinizdeki resimler Adobe Flash CS4 kullanılarak çekilmiştir.
4. Yeni bir layer oluşturalım ve bu layerin ismini kodlar olarak adlandıralım. Buraya albüm için gerekli kodları koyacağız.
5. Kodlar layerimizin birinci karesi işaretli iken Actions penceresini açalım. Actions penceresini Flash CS4’te kodlar layerinin ilk karesinde sağ tıklayarak açılan menüden veya F9 kısa yol tuşu ile açabiliriz. Eski versiyonlarda ekranın alt kısmında yer alır. İstersek aynı pencereye üst menüden “Window” > “Actions” tıkalyarak da ulaşabiliriz.
6. açılan ekrana aşağıdaki kodları yapıştıralım. Kod içerisinde değişiklik yapabileceğiniz yerlerde gerekli açıklamalar yapılmıştır. Fotograf isimleri, fotograf yolu vb.
Kodlar
//Buradaki ayarları istediğiniz gibi değiştirebilirsiniz. )
this.pathToPics = "resimler/"; //resim klasörümüzün yolu
// klasörümüzdeki resimlerin isimlerini buraya yazıyoruz.
this.pArray = ["resim0.jpg", "resim1.jpg", "resim2.jpg", "resim3.jpg", "resim4.jpg", "resim5.jpg"];
this.fadeSpeed = 20;
this.pIndex = 0;
//Resim Yüklenme kodları
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
// make sure pIndex falls within pArray.length
this.pIndex = (this.pIndex+d)%this.pArray.length;
if (this.pIndex<0) {
this.pIndex += this.pArray.length;
}
this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
if (this.photo._alpha>this.fadeSpeed) {
this.photo._alpha -= this.fadeSpeed;
} else {
this.loadPhoto();
}
};
MovieClip.prototype.loadPhoto = function() {
var p = _root.photo;
//------------------------------------------
p._alpha = 0;
p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
var i, l, t;
l = this.photo.getBytesLoaded();
t = this.photo.getBytesTotal();
if (t>0 && t == l) {
this.onEnterFrame = fadeIn;
} else {
trace(l/t);
}
};
MovieClip.prototype.fadeIn = function() {
if (this.photo._alpha<100-this.fadeSpeed) {
this.photo._alpha += this.fadeSpeed;
} else {
this.photo._alpha = 100;
this.onEnterFrame = null;
}
};
// Klavye kısayol hareketleri
//(klavye ile resimlerimizi ileri – geri hareket ettirebiliriz.
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
if (Key.getCode() == Key.LEFT) {
this.changePhoto(-1);
} else if (Key.getCode() == Key.RIGHT) {
this.changePhoto(1);
}
};
Key.addListener(this);
Şu ana kadar aslında bir çok şeyi başarmış bulunmaktayız. Şu an Ctrl + Enter yaptığınızda albümünüzün çalıştığını göreceksiniz fakat ileri geri butonları şu an için mevcut değil. Şu an klavyenin sağ sol tuşları ile resimlerinizi hareket ettirebilirsiniz. Çünkü kodlarımızın arasında klavye hareketleri (İlri – Geri) de eklenmiştir.
7. Şimdi ise resimlerimizi ileri geri hareket ettirmek için buton ekleyeceğiz.
Butonumuzu istediğimiz şekilde oluşturabiliriz. İster bir şekil çizerek istersek direk ileri, geri yazısı yazarak bunları butona dönüştürebiliriz.
Şimdi biz “İleri” “Geri” yazıları ile buton oluşturacağız. Butonlar için yeni bir layer oluşturalım ve bu layerin ismini butonlar olarak adlandıralım.
8. Daha sonra ekranımızın sağ alt tarafına “İleri”, sol alt tarafına ise “Geri” yazalım ve bunları butona dönüştürelim.
Yazıları butona dönüştürmek için yazı seçili iken F8’e tıklayarak açılan ekrandan buton sekmesini işaretleyerek kaydedelim. Her iki buton için de bu işlemi tek tek uygulayalım.
9. Şimdi butonlarımızın çalışması için bunlara kod ekleyeceğiz.
Geri butonu seçili içen Action penceresini açalım (F9) ve aşağıdaki kodları ekleyelim.
Geri butonu kodları:
on (release) {
_root.changePhoto(-1);
}
10. İleri butonu seçili iken yine Action penceresine aşağıdaki kodları ekleyelim.
İleri butonu kodları:
on (release) {
_root.changePhoto(1);
}
Şu an albüm işlemimiz sona ermiş ulunmaktadır. Herhangi bir işlem veya uygulamayı gözden kaçmadı iseniz şu an albümümüzün çalışıyor olması gerekir. Ctrl + Enter tuşlarını tıklatarak önizleme yapabiliriz…
Yukarıda basit olarak, genel hatlarıyla bir “Flash Foto Albüm” yapmayı öğrendik. Sayfa, renk ve buton özelliklerini (renk, şekil, boyut vb.) siz istediğiniz gibi ayarlayabilir, farklı ve daha güzel sonuçlar elde edebilirsiniz.
Bu dersin örnek dosyalarına buradan ulaşabilirsiniz.
Faydalı olması dileğiyle…
Kerim Sarıgül – www.kerimsarigul.com ***Bu yazı 3576 defa okunmustur.*** |
Yorumlar
Her frame e bir foto koyarak yaptım bu sefer de çok hızlı geçiyor.Bu geçişi yavaşlatmanın mümkünü var mıdır acaba ? Alıntı
dreamweaver da beyaz görünebilir, html olarak kaydedip çalıştırdığınız da normal olması lazım… Alıntı
RSS beslemesi, bu iletideki yorumlar için.