Photoshop Magazin
 


Flash CS3 Banner Uygulamaları / Dizi 04

01 July 2008 | Sayı: Jul 2008
 
1 2 3 4 5
 






hspace=0


 1 Banner Ölçüsü:
Banner tasarımına geçmeden önce varolan banner ölçülerine
bir bakalım;
Banner Çeşitleri ve Ölçüleri
Skyscraper: 120 X 600 Pixel
Wide Skyscraper: 160 X 600 Pixel
Rectangle: 180 X 150 Pixel
Medium Rectangle: 300 X 250 Pixel
Large Rectangle: 336 X 280 Pixel
Vertical Rectangle: 240 X 400 Pixel
Square Pop-up: 250 X 250 Pixel
Yukarıda sıraladığımız banner ölçüleri sadece tavsiye edilen
ölçülerdir. Karşılaştığınız web sitelerinin yapısından dolayı
sıklıkla bu ölçülerin dışına çıkmak durumunda kalabilirsiniz. 



hspace=0




Banner reklamcılığında amaç en kısa sürede ve en iyi şekilde reklam metnini anlattırmaktır.
Alışveriş siteleri gibi site trafiği fazla olan birimlerde
reklam bannerları için tasarıma geçmeden
önce FPS (Kare Sayısı) değerinin
düşürülmesi gerekmektedir ve uygun olan FPS değeri verilebilir.
Bunun nedeni banner boyutunun düşük tutulmasını
sağlamaktır. Bu tür projelere başlamadan önce site yöneticisi
ile görüşmekte fayda vardır
.




 

  2 Sayfa Ölçüleri:
 

Yeni bir doküman oluşturuyoruz. Açmış olduğumuz sahnenin
ölçülerini ve FPS
değerlerini değiştirmek
için sayfa özellikleri
(Document Properties)
kısmını açıp öncelikli
olarak sahnenin
yüksekliğini 120 pixel,
genişliğini de 600 pixel
olarak ayarlıyoruz.
Bu işlemi gerçekleştikten
sonra View sekmesindensayfa
cetvellerimizi (Page Rules)
aktif hale getirip açmış olduğumuz sahnenin dört bir köşesini yatay
ve dikey olmak üzere rehber çizgilerini belirliyoruz.

 hspace=0 


 hspace=0

 

Bu işlem gerçekleştirdikten sonra sayfa özellikleri diyalog penceresini
yeniden açıp (Document Properties) vermiş olduğumuz sayfa
ölçülerinden yükseklik değerini 300 pixel’e çıkartırıyoruz.
Böylece 120 pixellik bölüm banner alanının görünen kısmını,
geriye kalan 180 pixellik yükseklik ise bannerın etki alanına
giren kullanıcılar için açılacak olan bilgi bölümünü oluşturacaktır.

hspace=0

3 Bannerın Görünen Yüzü:
Şimdi animasyonu gerçekleştirelim. Öncelikli olarak tüm kullanıcılar tarafından görünecek olan birinci kısmı gerçekleştiriyorum (120x600 Pixellik bölüm). Banner da görünmesini istediğim bilgileri sırasıyla giriyorum.

hspace=0

‘Yılın Son fırsatı’ ve ‘ayrıntılar için’ diye iki yazı katmanı ve şimdilik ‘Beyaz’ bir zemin katmanı oluşturmam yeterli olacak. Artık animasyona geçebiliriz. İsteğe bağlı olarak 30 framelik bu hareket movieclip olarak da yapılabilir. Biz bu örnekte sahne üzerinde çalışıyoruz.

 hspace=0

 hspace=0  hspace=0 
 

 

 4 Birinci Bölüm Bitiyor:
Zaman çizelgesinde animasyonun sürelerini belirliyoruz. Bu işlemleri yaparken hareket etmesini istediğimiz anahtar
karelerin her birine sağ tuşla tıklayarak create Motion Tween komutunu uygulayabilirsiniz.

hspace=0

Ayrıca anahtar karelerin zaman çizelgesinde hareket aralıklarını belirledikten sonra F6 kısayol tuşu ile kopyalayabillir,
oluşan yeni anahtar karenin sahne üzerindeki koordinatlarını değiştirebilirsiniz.

hspace=0

 

30. frame’e kadar oluşturduğumuz animasyonun 30. frame animasyonun tamamını
ilgilendiren bir actions Stop ekliyoruz. Bu komutu animasyonun genelini ilgilendirdiği
için zaman çizelgesinde yazıyoruz.

hspace=0

5 Banner Açılış Kısmı:
Kullanıcılar tarafından görünecek olan birinci bölüm
30 framelik bir zaman diliminde gerçekleştirildi. Şimdi 30.
frame’den sonrası banner alanının üzerine gelen kullanıcının
banner alanını şeffaf olarak sayfa üzerine açmasını sağlayacak.
İkinci bölüme geçiş yapabiliriz.

hspace=0

Bu bölümde düşündüğümüz varolan Beyaz katmanı 60.
fareme’e kadar aşağıya uzatıyorum ve Beyaz zemin katmanını
uzattıktan sonra bu bölüme girecek olan diğer bilgi girişlerini
de yeni katmanlar açarak yapıyorum. Tabi bu bilgiler
30.frame’den sonraki kısımda başlamalı. Bu nedenle bu
layerların önünde bekleme süreleri olması gerekmektedir

hspace=0

 6 İkinci Bölüm :
Kullanıcı bannerın üzerine mouse ile giriş yaptığında açılacak olan bölümün tasarımı için biraz bilgiye ihtiyacımız var. Bunun için birkaç yazı alanı ve bir de flash simgesinin resmini kullanacağım (siz istediğiniz bilgi ve resmi girebilirsiniz).
Bu arada önemli bir ayrıntı ise açmış olduğumuz tüm katmanları 31. frame’de başlatmış olmamız gerektiğidir.

hspace=0
Bunın nedeni animasyonun ilk 30 frame’inde yeni eklediğim
bilgilerin kullanıcılara gözükmemesi gerektiğidir. Projemizin
başında oluşturduğumuz rehber çizgiler sayesinde açılan kısmı alt bölümde kolaylıkla çalışabiliriz. Bu arada animasyonda oluşacak olan hareket etkisini belirlemek içinde yine ‘create Motions Tween’ olarak oluşturduğum nesnelerin efektlerini girmem kalıyor. Ben burada ‘Alpha’ (görünebilirlik) efektini kullanıyorum. Siz dilerseniz ‘Properties’ panelinde çıkan efeklerden dilediğinizi kulanabilirsiniz.

hspace=0

 7  İkinci Bölüm Final:
60. frame’e kadar oluşturulan hareketleri tamamladıktan sonra layer katmanında oluşturmuş olduğumuz ‘Actions’ satırını 60. frame’ine F6 kısayol tuşu ile önce bir anahtar kare yerleştiriyoruz.

hspace=0

Zaman çizelgesinin 60. frame’ine Actions panelinden ‘Stop’ yerleştiriyoruz. Böylece 1.frame’de başlatmış olduğumuz banner hareketi, 30.frame ‘Stop’ actionsı ile durdurulmuş oldu. Aynı şekilde bannerın aşağıya açılış hareketini de 60.frame’de ‘Stop’ actionsı ile durdurmuş durumdayız

hspace=0

Banner animasyonumuz artık 30.frame’de ve 60. frame durmakta. Bu etkilerden kurtarmak içinönce 30.frame’e bir gizli buton katmanı açıyor ve sahnede banner alanının kapladığı alan kadar bir dikdörtgen objesi belirliyorum. F8 (Convert to Smbol) etkisini kullarak objemizi önce (gizli buton) olarak tanımlıyorum. Buton alanının üzerine iki kez tıklayarak buton alanının içine giriş yapıyor ve ‘UP’ Sekmesinde bulunan anahtar kareyi ‘HIT’ sekmesine sürüklüyerek taşıyorum. Böylece, sahneye döndüğümde gizli bir butonumun komut yazmak için sizi beklediğini görebilirsiniz. 

8 Gizli Buton:
30.frame’e yerleştirmiş olduğumuz gizli butonun üzerine sahnedeyken sağ click ile actions bölümüne geçiş yapıyor ve karşımıza çıkan diyalog penceresinde ‘goto’ actionsını kullanıyoruz.

hspace=0

 

 

hspace=0

9 Gizli Buton Actionsları:
30. frame’e yerleştirmiş olduğumuz gizli butonun üzerine mouse ile girildiğinde ki bu gizli buton alanı banner alanını 120 pixel ve 600 pixellik kısmını kapsıyor. ‘goto’ actions’ını kullanarak mouse ile üzerine gelindiğinde ilk satır sekmentinde ‘on rollover’ (Gizli buton alanını üzerine girildiğinde) etkisini ‘gotoAndPlay’ komut sekmentinde ise (Şu frame git) 31.frame’e yönlendirmemiz gerekmekte.

Çünkü zaman çizelgesinde tüm animasyonu ilgilendiren ve hareketi durduran daha önceden yerleştirdiğimiz 30.frame konumunda bir adet ‘Stop’ actionsımız bulunmakta. 31.frame’e göndermekle animasyonu ‘Stop’ etkisinden kurtarmış oluyoruz.

 hspace=0

Böylece bannerımız ayrıntılı bilgi vermek için aşağıya doğru
genişliyor. Aynı işlemi 60.frame’e yerleştirdiğimiz
Genişliği: 300
pixel Yüksekliği: 600
pixel olan gizli butona da yapıyoruz. Buradaki
actionsımız 61.frame‘e yönleniyor. Zira 60.frame’de bulunan ‘Stop’ actionsından kurtarmamız lazım.
 hspace=0


Artık bölümde açılan bannerımızı tekrar yeniden 75.frame’e kadar kapatma işlemini gerçekleştirebiliriz. 75. frame’in son bölümüne Actions koymakta gerekmemekte. Bu süreden sonra animasyon tekrar 1. frame’e dönüş yapıp ilk bölümden yeniden başlamış olacaktır.

 10 Yayına Hazırlık:
Artık Oluşturmuş olduğumuz reklam bannerını gizli butonlar ve kullanmış olduğumuz Actionslar yardımıyla kullanıcı tarafından üzerine gelindiğinde açılan, detay bilgilere ulaşılabilen, bilgileri okuduktan sonra açılan, tüm alandan mouse hareketi ile çıkış yaptığımızda panelin kapanmasını sağlayan bir reklam bannerımız oluşmuş durumda.

Animasyon sürelerini ve verilen hareketleri her türlü yöntem kullanarak değiştirmek mümkün. Bunlara tabi ki ‘Maskeleme’ teknikleri de girmekte. Oluşan animasyonu artık yayına atmanı vakti geldi. Bu işlem için farklı bir iki yöntem bulunmakta.

Bunlarında birincisi ‘File/Publish Settings’ kısmında ‘HTML’ bölümüne geçiş yapıp animasyonunuzun modunu ‘Window Mode’ kısmında ‘Transparent Windowless’ yapabilir. Hazır HTML’li de bu bölümden çıkabilirsiniz.

Bir diğer yöntem ise bu belgeyi ‘Ctrl+Enter’ (test movie) komutu ile test ettirip ‘SWF’ belgesini çıkardıktan sonra bu belgeyi editör program olan Dreamweaver CS3 programında istediğiniz hücre yapısına yerleştirebilir ve ‘SWF’ belgeniz seçili iken ‘Property’ özellikler penceresinden
‘Parameter’ bölümünden ‘Transparent’ sekmesini girerek şeffaf olma etkisini yeniden kazandırabilirsiniz

 hspace=0

Söylemiş olduğumuz bu iki yöntemden dilediğinizi seçebilir ve çalışmanızın transparent olarak oynamasını internette sağlayabilirsizin. Eğer Dreamweaver programında ‘Drag AP Div’ birimini kullanırsanız oluşturmuş olduğunuz bu reklam bannerı tüm HTML verilerinin üzerine açılacak demektir. Bu yöntemle günümüzde sıkça karşılaştığınız HTML yazıların ve alanların üzerine açılan şeffaf bannerlara sahip olduğunuz anlamına gelir. Hepinize kolay gelsin. 

 

 

July 2008

 


Flash