Güzel Bir Photo Slide Yapalım

Bu derste sizlerle Flash'ta bir slide hazırlayalım.

Bu derste sizlerle Flash'ta bir slide hazırlayalım.

1.ADIM

450x350 px boyutlarında bir doküman açıyoruz. Diğer değerler aşağıdaki gibi olacak..



2.ADIM

Rectangle Tool (R) 2u alıp Properties Panel (Ctrl +F3) ine gidiyoruzAşağıdaki ayarları giriyoruz.

1. #C0C0C0 çizgi rengimiz
2. Dolgu rengimiz yok.
3.çizgi kalınlığımız 5 ve rengimizde gri.
4.Stroke hinting değeri de seçili olacak.



305x230 px boyutlarında, bir dikdörtgen çiziyoruz ve resimdeki gibi yerleştiriyoruz. Bu çerçeve içinde fotoğrafımızın büyük boyutunu göreceğiz.



3.ADIM

Rectangle Tool (R)' u tekrar alıyoruz ve , Properties Panel 'inde aşağıdaki değerleri giriyoruz.
1. Çizgi rengimiz olmayacak.
2. #ECECEC dolgu rengimiz.

445x92px ebatlarında bir dikdörtgen çiziyoruz ve aşağıdaki gibi yerelştiriyoruz.



Bu dikdötgenimiz içinde de küçük fotolarımızı göreceğiz.

4.ADIM

İki adet dosya açıyoruz. Biri " large pictures" diğeri " small pictures" olacak. Large Picture dosyasındaki foto ebatları 300x225 px ; küçük fotolarımızın ebadı da, 90x68 px olmalı. 4 adet fotoğraf seçiyoruz. ( fotoğraf ebatlarını photoshop'ta ayarlayabilirsiniz.)


5.ADIM

Flash'a dönüyoruz File > Import > Import to Library diyoruz ve tüm küçük fotoğraflarımızı kütüphanemize alıyoruz.



6.ADIM

sürükle- bırak yöntemini kullanarak, tüm küçük fotoğraflarımızı sahnemize alıyoruz. Resimde görüldüğü gibi.


7.ADIM

fotoğraflar arasındaki uzaklığı ayarlayabilmek için Align panelinden yardım alıyoruz ve resimdeki butonlara tıklayarak, hizalamasını yapıyoruz
1. to stage bölümü kapalı olacak.
2. Distribute horizontal center buton larına basıyoruz.



8.ADIM

İlk fotoğrafımızı seçip F8'e basıyoruz ve resmimizi butona dönüştürüyoruz..




9.ADIM


Yeni butonumuz hala seçili iken, actionscript paneline gidiyoruz ve aşağıdaki kodları giriyoruz.
on (release) {
gotoAndPlay(2);
}

10.ADIM

Şimdi 30. frame'e tıklayıp F5 basıp bir frame ekliyoruz. Sonra, yeni bir layer alıyoruz ve ismine de "img1" diyoruz. Bu layer'ın 2. frame inde bir keyframe ekliyoruz. F6 ile.

11.ADIM

2.Frame deyken File > Import > Import to Stage diyerek, ilk büyük fotoğrafımızı ,sahneye yerleştiriyoruz. (ilk yaptığımız çerçeveye.)



12.ADIM

Büyük fotomuz seçili iken, F8 'e basıyoruz ve movie Clip'e dönüştüyoruz.



13.ADIM

img1 layer'ının 15. Frame'ine F6 ile bir keyframe ekliyoruz ve Actionscript paneline gidiyoruz. Şu kodu gireceğiz.


stop();



14.ADIM

2. Frame 'e dönüyoruz ve Selection Tool (V) ' u alıyoruz. Fotomuza bir kez tıklayıp Properties Panel (Ctrl+F3)' indeki Color Menüsünden "Advanced" seçeneğini seçiyoruz ve "settings" butonuna tıklıyoruz. Değerler aşağıdaki gibi olmalı.






15.ADIM

2. ve 15. frame ler arasındaki gri bölüme sağ tıklayıp, motion tween oluşturuyoruz.

16.ADIM

ikinci küçük fotomuzu seçip F8 ile yine butona dönüştürüyoruz.



17.ADIM

Yeni butonumuz seçili iken, Action Script Panel (F9) ine gidip şu kodu giriyoruz.


on (release) {

gotoAndPlay(16);

}



18.ADIM

Yeni bir layer oluşturuyoruz. Adı ; img2 olsun.



19.ADIM

16. frame' e tıklayıp F6 ile bir keyframe oluşturalım. Sonra, choose File > Import > Import to Stage diyerek ikinci büyük fotomuzu sahneye yerleştiriyoruz.



20.ADIM

Büyük fotomuz seçil iken, F8 'e basıp movie clip'e dönüştürüyoruz..

21.ADIM

30. frame ' e F6 ile bir keyframe ekliyoruz ve (F9 ) Actionscript paneline şu kodu yazıyoruz.


stop();



22.ADIM

16. frame'e dönüyoruz Selection Tool (V) u alıyoruz ve fotomuza bir kez tıklıyoruz. Properties Panel (Ctrl+F3) indeki color menüsündeki Advanced sekmesine tıklıyoruz. Settings sekmesine tıklayıp aşağıdaki değerleri doğruluyoruz.



23.ADIM

16. ve 30. frameler arasındaki alana sağ tıklayıp , motion tween oluşturuyoruz.



Şimdi, ilk iki fotoğrafımızı oluşturmuş olduk. Yukarıdaki adımları takip ederek, diğer fotolarınızıda oluşturabilirsiniz.

24.ADIM

En sonda, bir layer daha oluşturup , ismini "action" olarak belirleyin ve Actions panel' ine şu kodu girin:


stop();



Bu kadar : )

NOT: Flashvault.net sitesinden çevirdim.

  • Etiketler;
Yorum Yaz

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

başarılı ve yararlı bir çeviri olmuş, çok teşekkürler...
Güzel Düşünmüşsün Saol Kardeş
Arkadaşım cok guzel bı paylaşım olmus ama bı tek 4 tane foto deıl de bayabı cok fotoyu koyalım.onlar yan yana ılerı gıdıp gelsın bır yardım edersen cok sevınırım bana ulasırmısın?
çok güzel olmuş teşekkürler
çok teşekkür ederim desteğiniz ve teşekkürleriniz için arkadaşlar. Benim sitelrde aradığım ve bulmakta zorlandığım örnekleri seçip, sizlerle paylaşmaya çalışıyorum. Tamtam arkadaşımızın istediği de sanırım, kayan menü dediğimiz şey. Onun örneğini de sizinle en kısa zamanda paylaşmaya çalışacağım.sizin teşekkürlerinizle daha da hevesleniyorum :kirp:
güzel olmuş devamını bekliyoruz...:D
Eyw...
cok güzel olmus altdaki kücük resimlerin saga sola kaymasini nasil yapacagiz (yani 4 resimden fazla resmimiz varsa) oda olsa daha güzel olurdu.tesekkürler
hocam bir sorum olacak http://www.gold.com.tr/ burdaki resimler neyle yapılmış hocam yardım ederseniz sevinirim
üstad ellerine sağlık.yalnız ben bunlara tıklamadan direk kendi kendine akan bi slide shov yapmak istiyorum yardımcı olursan çok sevinirim
üstad ellerine sağlık.yalnız ben bunlara tıklamadan direk kendi kendine akan bi slide shov yapmak istiyorum yardımcı olursan çok sevinirim
merhaba benim bu çalışmayla ilgili bir sorum olucaktı.Ufak resimlerin üzerine mause ile gelindiğinde açılmasını istiyorum ben onu nasıl yapabilriz.tıklamak yerine küçük resmin üzerine mause üzerine geldiğinde büyük resmin açılmasını istiyorm cvp gelirse sevinicem
ya ben dosya açıyoruz demişsinz ya orayı anlamadım:uzul:yardımcı olursanız sevinirim.tskrlr...
teşekkürler
Güzelmiş
4 resim değilde 20 resili nasıl oluşturuyoruz
arkadaş güzel bi noktaya deginmiş daha fazla resim ekledigimiz zaman parantez içindeki koda hangi sayiyi yazıcaz onun mantıgını anlıyamadım birde otomatik nasıl degişecen bu resimler bi kod varmı varsa nereye yazılcak yardım edebilirmisiniz
evet 4den fazla resim ekledigimizde butonların koduna ne yazcak birde resimler arası otomatik geçiş nasıl olucak yardım edebilen varmı
Çok güzel, :) işime yarayacak bir paylaşım teşekkürler.

Yukarı Git