photoders » flash site yapımı

Flash Tema Yapımı

admin — Fri, 19 Mar 2010 14:31:05 +0000

Flash çalışmamızda flash template yapacağız daha önce farklı uygulamalar ile tema hazırlamıştık. Yeni çalışmamızın flash tema tasarlamak isteyen meraklılara örnek olacağı kanısındayım. İlk olarak arka plan hazırlayalım. Fash temamızın ebatları 900X600 pixels olacağı için hazırladığım arka plan resmini isterseniz buradan indirebilirsiniz.

Flash çalışma sayfamızı açalım 900x600px hazırladığımız arka planı sahneye alalım.

1-Arka plan resmimizi sahneye ortalayalım F8 graphic yapalım layer adı bg yazalım.
2-İlk olarak bir buton yapalım butonu istediğiniz şekilde yapabilirsiniz. Buton yapımını anlatmıyorum basit bir buton hazırlamanız yeterlidir. Unutmadan hazırlanan butonları movie clip yapacağız. Butonu hazırladığımıza göre bg layer üzrine yeni bir layer ekleyelim layer adı b1 olsun buton seçili instance name kutusuna p1 yazalım tüm 11 frameye keyframe ekleyelim. Frameler arasına create motion tween verelim 1.framede alpa değerini 0 yapalım.

3-Hazırladığımız butonu movie klip yapmıştık ben klip için btn_mc1 adını kullandım kütüphanede buton klipi çoğaltalım çalışmamızda 6 adet buton olacağı için sırası ile çoğaltalım btn_mc1, btn_mc2 sırası ile isimlendirebiliriz.
4-b1 layer üzerine sırası ile yeni layerler ekleyerek b1 layerdeki işlemi tekrarlayalım. Her movie klip sahnede seçili durumda iken instance name kutusuna sırası ile p1,p2,p3,p4,p5,p6 isimlendirelim. Kolay anlamanız için kütüphanedeki görünümüde ekledim. Sizi aldatmasın ben butonu animasyonlu yapmak için Up, Over yerleri için klip oluşturdum.

5-Hazırladığım arka plan resimde üst sağ köşeye 2 buton yeri oluşturmuştum şimdi oraya buton hazırlayıp ekleyelim b6 layer üzerine layer ekleyelip layer adlarını üstbut-1 ve üstbut-2 olsun.Unutmayalım hazırladığınız butonları “movie clip” yapalım. İnstance name kutularına aynı sıralamayı takip ederek p7 ve p8 yazalım.

6-Butonları hazırlamış olduk sayfalarımızı düzenledikten sonra sayfalara yönlendirme kodunu ekleyeceğiz.
Şimdi sayfaları yapalım.üstbuton layer üzerinde yeni layer ekleyelim 11 frameye keyframe ekeleyeip text tool aracını seçip dynamic text yazımızı ekleyelim. Uzun yazı eklemek için scrollbar ekleyelim Windows>Components penceresinde UIScrollbar yazımızın yanına ekleyelim. Örnek resim

7- Eklediğimiz scrollbar seçili yapıp properties panelden parameters açalım “targetİnstanceName“ kutusuna scrollbar yazalım. Şimdi yazıyı seçili yapıp instance name kutusuna “scrollbar”yazalım.

8-Sağ boş yere resim ekleyelim Sayfa layer 11 framede yaptığımız işlemeri seçili yapalım F8 movie clip yapalım name olarak “sayfalar” yazalım. Sayfalar klipin içine girelim layer1 adını değişelim layer adı text olsun. Yeni layer ekleyelim layer adı “photo” olsun text laere eklediğimiz resmi oradan silip photo layerde aynı yere ekleyelim. Text layer 11.frameye keyframe ekleyelim 6 frameye gelip insert blank keyframe ekleyelim 1.frameye gelelim şimdi sayfa başlığı yazıyı notrmal text yazalım. photo layerinde 11 framesine keyframe ekleyelim.

9-11.framede aynı yazımız ekli durumda yapacağımız şey oradaki yazıyı istediğimiz yazı ile değişmek olacak photo layerin 11.framesinde resmimizi değişelim yeni resmi ekleyebiliriz text layerde yazımız değişti şimdi 21 frameye keyframe ekleyelim 16 framede insert blank keyframe ekleyelim.

10-İki sayfa hazırladık diğer sayfaları aynı uygulamayı tekrarlayarak 8 adet menümüz olduğundan 8 adet sayfayı tamamlayalım. Photo layer üzerine yeni layer ekleyelim layer adı “label” olsun 1.frameye “stop” ekleyelim frame seçili instance name kutusuna “anasayfa” yazalım 11.frameye keyframe ekleyelim instance name kutusuna “hakkimizda” yazalım 21.frameye keyframe eklip instance name kutusuna “photoshop” yazalım örnek uygulamayı 71 frameye kadar devam edelim. Örnek resmi inceleyin layer 3 görünen isimler instance name isimleri oluyor.

11- Sayfaları hazırlamış olduk ana sayfaya scene1 geri dönelim sayfalar layerinde sayfalar klipi sahnede seçili durumda instance name kutusuna “sayfa” yazalım. Sayfalar layeri üzerine yeni layer ekleyelim layer adını mask olarak yazalım 11. frameye keyframe ekleyip rectangle tool aracı ile sahneye sayfamızı kapatacak kadar dış çizgizi olmayan dikdörtgen oluşturalım. F8 graphic yapalım name “sayfamask” olsun.

12-Mask layer 23 frameye ve 37 framelere keyframe ekleyelim 11.frameye gelelim maskı yazının üst tarafına kaydıralım 23 framede yazımızı tam kapatıyor durumda 37 framede maskı yazı sayfamızın alt tarafına kaydıralım layerler arasına create motion tween verelim. Mask layer üzerine gelip sağ klik mask uygulayalım.
13- Şimdi kodlarımızı ekleyelim ilk olarak mask layer üzerinde yeni layer ekleyip layer adını action yazalım. 1.framede actions paneli açalım ekli kodları ekleyelim.

sayfalar =
p1.txt = "anasayfa";
p2.txt = "hakkimizda";
p3.txt = "photoshop";
p4.txt = "flashders";
p5.txt = "videoders";
p6.txt = "galeri";
p7.txt = "referanslar";
p8.txt = "iletisim";

14-Action layerin 11. framesine keyframe ekleyelim ekli kodları actions paneli açıp ekleyelim. 11.framede instance name kutusuna “play”yazalım

sayfa.gotoAndStop(sayfalar);
sayfa_eski = sayfalar;

15-23.frameye keyframe ekleyip actions paneli açıp stop ekleyelim.

stop();

16-24 frameye keyframe ekleyip actions panele ekli kodları ekleyelim.

if( sayfalar == sayfa_eski )
{
	prevFrame();
}

16-37 frameye keyframe ekleyip actions panele ekli kodu ekleyelim.

gotoAndPlay("play");

17- Butonlarımıza komut verelim buton kliplere scene1 sahnede tıklayalım içine girdiğimizde buton olarak göreceğiz sahnede seçili yapıp sağ klik actions paneli açıp ekli kodu girelim.

on (release) {
	_root.sayfalar = txt;
	_root.play();
}

18-Anasayfadaki tüm buton kliplerimizin içine tek, tek girip ekli kodu ekleyelim.
19-Artık çalışmamızı bitirdik son olarak tüm layerlerin görünümünü vereyim.

20-Çalışmayı test edelim F12 direk sayfa üzerinden izleyebilirsiniz veya Ctrl +Enter
21-Çalışmada boş kalan yerler logo header kısmıdır sizler istediğiniz çalışmayı yapabilirsiniz. İzlediğiniz örnek çalışmada farklılıkları görebilirsiniz.

Örnek Çalışmayı İzle

Bu Yazıyı Paylaşın

Flash Template Web Site Hazırlama

admin — Wed, 29 Jul 2009 12:17:50 +0000

Flash çalışmamızda sizlerle flash site tasarlayacağız yapacağımız çalışmayı uygulayarak kendi flash sitenizi hazırlayabilirsiniz ilk olarak yeni bir çalışma sayfası açalım benim tercihim 800×600 px oldu background color isteğinize göre ayarlayabilirsiniz benim renk kodum #333333

2-layer1 adını değişelim sidebar olsun Rectangle Tool aracı ile gradient linear renk seçimi yaptıktan sonra dikdörtgen hazırlayalım. Sahmede sidebar seçili F8 graphic yapalım name sidebar_shape olsun.

3-sahnedeki graphic tekrar F8movieclip yapalım name sidebar_mc olsun. Sidebar layerin 30 framesine keyframe ekleyelim F6 1 frameye gelelim klip sol tarafa kaydıralım sahnenein dışına almış oluyoruz. 1frameye gelelim create motion tween verelim ease değerini 100 olarak ayarlıyoruz.

4-150 frameye gelelim key ekleyelim F5 yeni layer ekleyelim layer adını logo olarak isimlendirelim 30 frameye keyframe ekleyelim örnek resimdeki veya kendi isteğinize göre bir çizim oluşturalım devamında seçili durumda F8 graphic yapalım name logo_shape olsun.

5-Logo seçili tekrar F8 movieClip yapalım name logo_mc olsun. Logo layerin 55 framesine keyframe ekleyelim 1 framede hazırladığımız logoyu sidebar uygulamasında olduğu gibi sahnenin soluna boş alalım. 1 framede motion ekleyelim ease değerini 100 yapalım.

6-Şimdi butonları hazırlayalım. Insert> New Symbol button oluşturalım name anasayfa olsun anasayfa button içine girelim Up konumunda rectangle tool aracı ile dış çizgisi olmayan dikdörtgen oluşturalım color #333333 olsun W 215 H 26 px olsun properties panelden ayarlayabiliriz over keyframe ekleyelim sahnedeki butonun rengini değişelim #000000 olsun. Down ve Hit boş kalıyor yeni layer ekleyelim up kısmına Yazımızı yazalım Anasayfa oluyor over alanında key oluştu down ve hit alanı boş kalıyor. Yeni layer ekleyelim over kısmına keyframe ekleyelim daha sonra over kısmına isterseniz ses ekleyebilirsiniz.

7-Kütüphanede butonumuz hazır şimdi 4 adet daha aynı butondan yapaçağız fakat kısadan yapmak için kütüphanede çoğaltalım duplicate açılan pencerede name kısmına isimleri verelim Hakkımızda,Hizmetler,Referanslar,İletişim isimlerini şeklinde olabilir toplam 5 button oluşturuyoruz. Tek tek butonların içine girelim yazıları düzenleyelim.

8-Yeni layer ekleyelim layer adı anasayfa olsun 110 frameye key frame ekleyelim kütüphaneden Anasayfa butonu alarak ekleyelim.120 frameye keyframe ekleyelim 120 framede butonu kendi eni kadar alt kısma kaydıralım frame aralarına motion verelim örnek resim.

9-Yeni layer ekleyelim layer adı hakkımızda olsun. 100 frameye keyframe ekleyelim hakkımızda butonu ekleyelim 113 frameye keyframe ekleyelim sahnedeki hizmetler butonunu anasayfa butonu altına kadar kaydıralım frame aralarına motion verelim. Guides çizgileri inceleyin.

10-Yeni layer ekleyelim layer adı referanslar olsun 90 frameye keyframe ekleyelim referanslar butonu alarak ekleyelim. 107 frameye key frame ekleyelim butonu hakkımızda butonun en son geldiği yerin altına gelecek şekilde kaydıralım. Frame aralarına motion verelim. Her butonun geldiği noktada guides çizgi eklersek kaydırma işlemi düzenli olur. Örnek resimde görülen son frame 120 anasayfa butonun son noktası diğer butonlarda son noktadaki durumları resimde görülmekte çizgiler oluşturarak yapın uyarımı resim üzerinde inceleyin.

11-Yeni layer ekleyelim layer adı hizmetler olsun 80 frameye key frame ekleyip hizmetler butonunu ekleyelim ekleme noktamız ilk başlangıçta oluşturduğumuz nokta oluyor tüm butonları ilk olarak buradaki çizgiye göre ayarlayalım. 97 frameye keyframe ekleyelim resimde ok ile gösterdiğim şekilde referanslar butonun bitiş noktasına eklediğim çizginin altına kaydırıyoruz. Frame aralarına motion verelim.

12-Yeni layer ekleyelim layer adı iletişim olsun 70 frameye keyframe ekleyelim iletişim butonu ekleyelim en üst çizginin üst kısmına göre 90 frameye keyframe ekleyelim hizmetler butonun alt noktasında çizgiye göre kaydıralım frameler arasına motion verelim. Butonları yerleştirdik frame aralarına create motion tween uyguladık tek, tek her butonun ilk framesi seçili properties panelden ease değerini 80 yapalım. Anasayfa layere gelelim en son frmemiz 120 frameydiş actions paneli açalım stop ekleyelim. Butonlar eklendikten sonraki layer ve sahnedeki görüntümüz. Çalışmayı test ederek kontrol edebilirsiniz Ctrl+Enter

13-Yeni layer ekleyelim layer adı masked olsun 70 frameye keyframe ekleyelim rectangle tool aracı ile butonları kapataçak şekilde bir dikdörtgen oluşturalaım dış çizgisi olmasın.

14-Masked layer üzerinde sağ klik mask uygulayalım ilk layer mask içine girdi diğerler buton layerleri mask içine ekleyelim. Geldik sayfaları hazırlamaya yeni layer ekleyelim en üstte oluyor 120 frameye key frame ekleyelim hazırladığımız web sayfa düzenimizin orta kısmını Guides çizgilerle ayarlayaıp Text Tool aracı ile yazılarımızı yazalım seçili durumda F8 graphic yapalım name anasayfa_text olsun örnek resim.

15-Anasayfa_text seçili tekrar F8 Bu sefer movie clip yapalım name anasayfa_mc olsun seçili durumda scene1 ana sahnemizde klip üzerinde çift tıklama yaparak klip içine girelim 30 frameye keyframe ekleyelim 1 frameye gelelim movie clip’i sol tarafa doğru taşıyalım frame aralarına motion verelim ease değeri 100 olarak ayarlayalım.

16-Yeni layer ekleyelim 1.framede yazımızı kapatacak şekilde rectangle tool aracı kullanarak kare oluşturalım mask uygulayacağız. Kare oluşturduktan sonra layer üzerinde sağ klik mask uygulayalım text layer üzerine gelelim 30 frameye stop ekleyelim. Artık anasayfamızda 120 framede oluşturduğumuz anasayfa isimli sayfamız oluştu.

17-Scene1 sahnemize gelelim çalışmamızı test edelim göreceğiniz gibi ilk sayfamız oluştu. 121 frameye keyframe ekleyelim tabiî ki bu framede ilk hazırladığımız sayfada eklenmiş oldu bu durumda delete diyerek 121 frameden silelim tekrar text tool aracı ile hakkımızda konulu sayfamızın içeriğini yazalım. Kısaca bir önceki anasayfa_text hazırlarken yaptıklarımızı tekrar ediyoruz sadece klip içinde değişim olacak . Örnek olarak resmi ekledim isterseniz sizde sayfalara resim ekleyebilirsiniz resim ekleyebilirsiniz. Sizlere anlatığım gibi 121 framede text tool aracı ile yazımı yazdım resmi import ettim Break Apart uygulayarak resmi parçaladım Ctrl+B sayfa tasarım bitince F8 graphic yaptım name hakkımızda_text yazdım.

18- Tekrar seçili durumda movie clip yapıyoruz name hakkımızda_mc yazıyoruz. Bu sefer 35 frameye keyframe ekliyoruz 1.frameye gelelim klibi sol tarafa kaydıralım diğer kaysdırmadan farklı olarak side barın orta kısmına kadar kaydıralım örnek resim.

19-yeni layer ekleyelim daha önce yaptığımız şekilde mask oluşturalım text layerin 35 framesine stop ekleyelim unutmayalım bu sayfamızda bitmiş oldu. Scene 1 sahneye dönelim 122 frameye keyframe ekleyelim eklediğimizde 121 frameyi taşımış oluyoruz delete diyerek 122 frameyi temizleyelim sıradaki sayfamızı yapalım referanslar sayfamız olacak text tool aracı ile gerekli içeriği ekleyeceğimiz resimleri ekleyelim hakkımızda sayfayı nasıl hazırladıysak aynen uyguluyoruz mneü içeriğimizde olan sayfalarıda aynen uygulayalım.
20-120,121,122,123,124 framelerde sayfalarımızı anlatığım gibi hazırladık şimdi butonlara kod ekleyeceğiz. Scene 1 sahnemize gelelim ilk olarak anasayfa butona kod ekleyelim 120 framede butonu seçili yapalım actions paneli açalım ekli kodu ekleyelim.

on (release) {
gotoAndStop(120);

}

21-121 frame seçili hakkımızdaki butonu seçelim sağ klik actions paneli açıp ekli kodu ekleyelim.

on (release) {
gotoAndStop(121);

}

22-Diğer butonlar içinde aynen uygulamayı tekrar edip kodu ekleyelim sadece kod içindeki sayıyı değişelim çalışmayı test edelim.
23-Logo layere gelelim klip üzerine tıklayalım clip içine girelim tekrar tıklayıp graphic içine girelim layer ekleyip text tool aracı ile yazımızı yazalım. Sahnedeki son görüntümüz.

24-Artık kendi flash sitemizi yapabiliriz sitenize müzik eklemek isterseniz site içinde ses aç kapa dersleriniş aynen uygulayarak kütüphaneye alıp web sayfanıza ekleyebilirsiniz giriş için loading eklemek için yeni layer ekleyip sitede anlatılan derslerden faydalanabilirsiniz.

FLA İndir

Çalışmayı İzle

Bu Yazıyı Paylaşın

Flash Intro ve Site Yapma Programı

admin — Mon, 27 Apr 2009 19:47:05 +0000

Flash siteleri ve İntroları kolaylıkla yapabilirsiniz. Programımız Amara Flash Intro and Banner Builder 2.1. Program ile yapacağınız çalışmalarda Animasyon hazırlamak için Flash bilgisine ihtiyacınız olmayacak. Actionscript hakkında bilgi sahibi olmazsanızda güzel çalışmalar elde edebilirsiniz. Programı indirip inceleyebilirsiniz.
İndirmek için Tıklayın!

Bu Yazıyı Paylaşın