Çalışmamızda önceki dersimizde yaptığımız çalışmadan biraz farklı Flash template hazırlamaya çalışacağız flash sitem olsun diyen herkesin faydalanacağı dersimize başlayalım. İlk olarak yeni bir çalışma sayfası açalım. 900X700 px olsun çalışmamızda kullanmak için photoshop ile hazırladığım çalışmayı import ediyoruz. Sizlerde eklenen headeri PSD buradan indirebilirsiniz.

1-Headeri sahnenin üst kısmına ayarlayalım seçili yaparak F8 graphic yapalım name header_shape olsun. Seçili durumda tekrar F8 movie clip yapalım name kısmına ana_klip yazalım bu klip bizim çalışmamızı yapacağımız klip olacak. Klip içine girelim headrein olduğu layeri isimlendirelim header_bg olsun. Sıra ile 4,8,12,16,17,19 framelere keyframe ekleyelim. 1. Framede proerties panelden color kutusundan Advanced seçeneğini açalım örnek resimdeki ayarları yapalım.

2-1 ve 4 frame arasına create motion tween verelim. 4 framede tekrar advenced penceresinde ayarları değişelim R+85 G+59 B+79 Alpa=31 oluyor 4 ve 8 frame arasına motion verelim.
3-8 framede advanced ayarlarını tekrar değişelim R+48 G+33 B+50 Alpa=61 olarak değişelim 8 ve 12 frame arasına motion verelim.
4-12 framede advanced ayarları değişelim R+21 G+15 B+29 Alpa=83 oluyor 12 ve 16 frame arasına motion verelim.
5-16 framede advanced ayarları değişelim R+5 G+4 B+17 Alpa=96 oluyor 16 ve 17 arasına motion verelim.
6-17 framede advanced ayarları değişelim R+3 G+2 B+15 Alpa=98 olsun 17 ve 19 frame arasına motion verelim.
7- 19 frsamede advancet ayarları değişelim R+0 G+0 B+13 Alpa=100 oluyor son olarak 20 frameye key frame ekleyelim F6 24 frameye key ekleyelim F5 layer görüntümüz

8-Footer alt kısım için photoshop ile hazırladığım resmi import ediyoruz sizde buradan PSD olarak indirebilirsiniz çalışma sahnemizin alt kenarına ayarlayalım 19 ve 20 framelere key frame ekleyelim 1 frameye gelelim color kutusundan advanced seçeneğini seçelim Alpa 0 yapalım hazırladığımız footeri sahnenin dışına kaydıralım alt tuşu ile 1 ve 19 frame arasına create motion verelim.

9-Yeni layer ekleyelim 20 frameye keyframe ekleyelim layer adı arka_bg olsun Rectangle Tool aracını seçelim proeperties panleden rectangle corner tool kısmına 12 yazalım sahnede oluşturacağımız dikdörtgenin kenarlarını oval yapacağız renk olarak #FFFFCC seçelim seçili durumda F8 movie clip yapalım name arka_mc olsun properties filters drop verelim örnek resmimiz.

10-Yeni layer ekleyelim layer adı sayfa arkası olsun 20 frameye keyframe ekleyelim photoshop ile hazırladığım 3D yazıyı import ederek çalışma alanına alıyoruz hazırladığıma benzer kendi icon logo vs sizde hazırlayıp alabilirsiniz. Sahnede ayarlama yaptıktan sonra resmi seçerek F8 graphic yapalım name orta_shape olsun. Advanced Alpa 17 yapalım.

11-Gelelim butonları hazırlamaya bildiğiniz gibi photoshop ile hazırladığız barda çizgiler yapmıştım aralarına butonları ekleyeceğiz ilk buton için rectangle tool aracı ile dikdörtgen oluşturalım renk beyaz olsun kenar çizgisi olmayacak seçimi seçili yapalım F8 movie clip yapalım name but1_mc(over) olsun klip içine girelim 24 frameye keyframe ekleyelim 1 frameye gelip color panelden Alpa değerini 0 yapalım 24 framede type linear seçelim kenar renkler Alpa 0 orta renk Alpa 35 olsun 1 ve 24 arasına shape tween verelim 25 frameye keyframe ekleyelim yeni layer ekleyelim layer actiomn layer 25 frameye keyframe ekleyip actions paneli açarak stop(); ekleyelim örnek resim.

12-Tekrar aynı büyüklükte dikdörtgen oluşturalım F8 graphic yapalım name buton_shape(Hit) olsun verdiğimiz isimlerden analayacağınız gibi buton yaparken over ve hit kısımlarda kullanacağız.
13-Insert new symbol button oluşturalım name but1 olsun button içine girelim Up alanı boş kalacak over kısmına kütüphaneden hazırladığımız but1_mc(over) klip alarak ekleyelim Down boş kalıyor Hit kısmına hazırladığımız buton_shape(Hit) kütüphaneden alarak ekleyelim. Buton hazırlandı.

14-Ana_klip gelelim butonlar için layerler ekleyeceğiz yeni layer ekleyip 20 frameye keyframe ekleyelim layer adını buton1 olarak yazalım. Kütüphaneden hazırladığımız but1 buttonu alarak yerleştirelim örnek resim.

15- kütüphanedeki but1 çoğaltalım duplicate name kısımlarına sırası ile but2,but3,but4,but5 yazalım toplam 5 butonumuz olacak aynı şekilde sıra ile yeni layerler ekleyip butonları sırası ile yerleştirelim. Örnek resim.

16-Text Tool aracı ile tek, tek yeni layerler ekleyerek layer isimleri menü isimleri olsun her layerin 20 framesine keyframe ekleyerek menü yazılarımızı yazalım örnek vereyim Anasayfa yazdık seçili durumda F8 graphic yapalım name anasayfa yazalım. Diğer text yazılarımızı yazalım graphic yapalım.

17-Yeni layer ekleyelim 20 frameye keyframe ekleyelim layer adı sayfalar olsun sahneye başlık yazımızı yazalım ben (web sitemize hoş geldiniz) yazdım yazı seçili F8 graphic yapalım name text1 olsun seçili durumda durumda F8 movie clip yapıyoruz name anasayfa_mc olsun klipin içine girelim ve sayfamızı burada hazırlamaya başlayalım ilk olarak bize gerekli olacak iki adet ok buton hazırlayalım scroll bar yaparken kullanacağız buton hazırlamayı bildiğinizi var sayarak anlatmıyorum. Klip içinde her yazdığımız yazı buton veya resim için yeni layerler ekleyerek yapalım.Hazırladığımız ok butonları ayrı ayrı layerlere ekleyelim. Yeni layer ekleyelim Dynamic Text oluşturalım menüden Text >Scrollable seçeneğini aktif yapalım yazımız scrollbar içine ekleyelim properties panelde var kutusuna home yazalım. Uzun yazı için scrollbar ekledik diğer yazı ları ekleyelim resimde ekleyelim. Scrollbar ok butonları tek,tek seçelim actions paneli açıp ekli kodu ekleyelim. Anasayfa sayfamız hazırlandı.

on (press)
{
    home.scroll = home.scroll + 4;
}

18- Ana_mc sahnemize gelelim 21 frameye keyframe ekleyelim Text Tool aracı ile sayfa başlığını yazalım yazı seçili durumda F8 graphic yapalım name text2 yazalım. Yazı seçili tekrar F8 movie clip yapalım name Hakkımızda_mc olsun hakkımızda sayfa klip içine girelim ilk yazımız sayfa başlığımız oluyor yeni layer ekleyelim üst ok butonu ekleyelim yeni layer ekleyelim alt ok butonu ekleyelim ben uzun metin ekleneceğini varsayarak tekrardan scroll bar ekleyeceğimiz için ok butonları ekledim size yardımı olsun diye tekrardan anlatmış oluyorum yeni layer ekleyelim DynamicText oluşturalım üst menüden Text>scrollable seçeneğini seçip yazımızı ekliyoruz görünmesini istediğimiz kısım kadar küçültelim. Unutmamamız gereken var kutusuna eklenecek yazıyı ekleyelim hakkımızda var kutusuna kimim yazalım tek,tek ok butonları seçip actionn paneli açalım ekli kodu ekleyelim.

on (press)
{
    kimim.scroll = kimim.scroll + 4;
}

Diğer ekleyeceğimiz yazıları ver resimleri tek,tek layerler ekleyerek ekleyelim.

19- Ana_mc sayfamıza gelelim tekrar yeni sayfa için 22 frameye keyframe ekleyelim ilk iki sayfadaki uygulamaları tekrar ederek oluşturmayı düşündüğümüz sayfayı hazırlayalım. 23,24 framelerede keyframe ekleyelim diğer sayfalarımızı yapalım sayfalarımızı bu şekilde oluşturalım sayfa içinde ekleyeceğimiz resim veya klipler var ise anlattığım gibi sayfa hazırlarken eklediğimiz layerlere ekleyebiliriz.
20-Yeni layer ekleyelim en üst kısımda olsun layer adı action layer olsun 20. Framede keyframe ekleyelim actions panel açıp stop ekleyelim.
21- Butonlara kodları ekleyelim anasayfa isimli butonu seçelim actions paneli açıp ekliş kodu ekleyelim.

on (release)
{
    gotoAndStop(20);
}

22-Hakkımızda butonu seçelim ekli kodu ekleyelim.

on (release)
{
    gotoAndStop(21);
}

23-Diğer butonlara eklencek kodu aynen ekleyelim sadece sayı kısmını değişelim 22,23,24 olacak.
24-Yeni layer ekleyelim logo yazımızı yapalım ben kısa bir klip yaptım siz isteğinize göre uyarlayın.
25-Her sayfada görünmesi için sayfa kenarlarına resim koymak için yeni layer ekleyelim layer adı sayfa resimleri olsun sayfa layerlerimizin karşığı olacak şekilde resimleri ekleyelim isterseniz klip hazırlayıp klipleri layerlere ekleyebilirsiniz.
26-Ana_mc layer görüntü resmini inceleyin.

27-Scene1 sahnemize gelelim ilk layere hazırladığımız ana_mc klipi ekleyelim yeni layer ekleyip layer adı action olsun actions paneli açıp stop ekleyelim.
Çalışmamız sonlandı artık test edelim Ctrl+Enter

FLA İndir

Çalışmayı izle