Photoshop Magazin
 


Flash CS3 Maskeleme Teknikleri / Dizi 02

01 May 2008 | Sayı: May 2008
 
1 2 3 4 5
 

hspace=0




Merhaba değerli okurlar. Bu yazımızda Flash CS3 programını kullanarak farklı maske tekniklerinin
nasıl hayata geçirildiği noktasında geçtiğimiz ay başlatmış olduğumuz diziye kaldığımız yerden devam ediyoruz. Bu sayımızda sizlerle yazıların üzerine uygulanan ışık ve resim efektlerinin yanı sıra, açılan bir menü butonu projesine bakacağız. Dilerseniz hep birlikte örneklerimizi inceleyelim.

1 Işık Efekti :
hspace=0
Açmış olduğumuz projemizin birinci frame’ine araç kutusunda bununan yazı yazma(T) aracımızı alarak yazımızı yazıyoruz. Yazmış olduğumuz yazının üzerine uygulayacağımız ışık etkisini
görebilmek için sayfamızın background rengini farklı bir renk yaparak işleme başlıyorum.
Yapmayı düşündüğümüz effekte bana gerekli olan bir renk geçişi oluşturulmasına geldi sıra. Yeni bir layer açıyorum ve açmış olduğum layerın birinci frame’ine araç kutusundan 'Kare' aracını alarak bir dikdörtgen çiziyorum. Oluşturmuş olduğumuz bu dikdörtgenin iç renk dolgusunu yine araç
kutusunda bulunan renk seçeneklerinden siyahtan, beyaza renk geçişi etkisiyle
dolduruyorum.

hspace=0

Oluşan yeni renk seçeneği standart degrade değeriyle oluştu. Şimdi oluşan bu degrade etkisini ışık efektimin uygulanabilmesi için uygun hale getireceğim. Bu işlemi gerçekleştirebilmek için araç panelinde bulunan ‘Gradient Transform Tool’ panelini kullarak oluşan renk geçişinin yönünü
ve büyüklüğünü belirliyorum. Dikdörtgenin etrafında 3 küçük noktacık belirmiş durumda. Bu noktaları kullanarak büyüklük, yön ve genişlik etkisine müdahale edebiliriz.

hspace=0


2 Değerleri Değiştirelim :

hspace=0


Oluşan degradenin şekilsel kısmını ‘Gradient Transform Tool’ aracıyla gerçekleştirdikten sonra geçişi oluşturan renklerinde ışık etkisini alabilmem için değerlerini değiştirmem gerekmekte. Bu işlemi
gerçekleştirebilmem için çizmiş olduğum dikdörtgenin seçili halde olması gerekmekte. Seçili olan objeyi oluşturan renklerin sol panelde bulunan color segmenti ile değişimini gerçekleştiriyorum. Oluşan rengin ayrı ayrı her renk tonunu seçili hale getirip panelde bulunan renk damlasının Alpha (Görünebilirlik değerini
düşürmek) Siyah renk için görünebilirlik değeri ‘% 0’, beyaz renk için görünebilirlik değeri ise ‘%80’ olarak tanımlıyorum.

hspace=0



Böylece şeffaf bir görünüm alan dikdörtgen alanı, yazı karakterimin üzerinden geçiş yaparken bana ışık etkisini vermiş olacak.

3 Işık Hareketi :
Işık etkim oluştuğuna göre artık bu etkiyi sahnede bulunan yazı alanımın üzerinden geçirebilmem mümkün olacak. Bunu gerçekleştirmek için zaman çizelgesinde (Timeline Paneli) animasyonun süresini belirliyorum. 60. Frame’i işaretleyip klavyeden ‘F6’ tuşuyla anahtar kare eklemiş oluyorum. Bu arada bu işlemi gerçekleştirmeden önce 1. framede bunulan anahtar karenin üzerinde iken mouse’a sağ tuş yaparak
'create Motion Tween' komutunu gerçekleştirmiş olmam gerekmekte. Böylece 60. Frame 'F6' dediğimde 1. Frame ile 60. Frame arasında mavilik ve ok işareti görünmesi gerekmekte.

hspace=0

 

hspace=0


4 Maske: Yazımız hazır. Işık haretimizide gerçekleştirdik ve sürelerini 60. Frame'e kadar ayarladık. Şimdi
yapmamız gereken şey yazı katmanını ışık katmanın üzerinde tutarak var olan layerın üzerinde sağ tuş
yaparak yazı katmanın 'Maske' katmanına çevirmek olacak. Böylece yazı katmanı sahneden silinip içerisinden ışık geçen bir hale dönüşecek.

hspace=0

hspace=0



5 Resim Kopyası ve Maske İşlemi
Uygulamamızı farklı bir isimle kayıt ettikten sonra bu örneğimizde de var olan ışık katmanını silerek sürekli geçiş sağlayan bir resim katmanı oluşturacağız. Bu katman bize ardı ardına yerleştirmiş olduğumuz resimlerin yazı alanımızın içerisinden geçmesine ve yazımızın sadece resimlerden oluşmasını yardımcı olacak.

hspace=0

hspace=0

Resimleri katman üzerinde yan yana yerleştirdikten sonra hareket ettirebilmek için ‘create Motions Tween’ komutunu verip zaman çizegesinden süresini belirliyorum. ‘F6’ kısa yolu ile süresini belirledikten sonra sahnede bulunan koordinatlarında resmin değişiklik yapıyorum. Resimleri yazımın üzerinden boydan boya geçmesini sağladıktan sonra yazı katmanımı 'maske' etkisine getiriyorum.

hspace=0

Bu örneğimizde de sizlerle beraber yine maske tekniğini kullanarak bir açılan menünün yapılış tekniğini incelemiş olacağız. Dilerseniz örneğimize hep birlikte bir bakalım;

hspace=0

1 Butonun Oluşturulması:
Öncelikle bir menu butonu şekli açmış olduğumuz yeni dökümanın 1. Frame’nin ilk karesinin çizimimizi gerçekleştiriyorum. Bu grafiği isterseniz başka bir grafik programından da rahatlıkla getirebilirsiniz.
Sahne üzerinde oluşturduğumuz bu buton grafiğini buton etkisi olarak kayıt etmeden önce ‘F8’ tuşuna basarak movie clip halinde (menubar) isimli olarak kütüphaneme kayıt ediyorum.

Oluşan ‘movie clip’ panelinin üzerine çift tıklayarak ‘movieclip’in içerisine geçiş yapıyorum. Bundan sonra gerçekleştireceğim tüm olgular bu movieclip’in içinde gerçekleşecek. Artık çizmiş olduğum movie clip’in içerisinde bulunan grafiği buton halinde kayıt edebilmem için tekrar F8 (Convert to Symbol) etkisini kullanıyorum.





hspace=0

hspace=0hspace=0

2 Buton hareketleri:
Oluşturduğumuz butonunda üzerine iki kez tıkladıktan sonra buton etki alanına girmiş bulunmaktayız. Burada bize butonun Up, Over, Down ve hit halleri verilmiş durumda. ‘Up’ hali butonun ilk hali, ‘Over’ hali butonun üzerine geldiğiniz hali, 'Down' hali butonun tıklanıldığı zamanki hali, 'hit' ise gizli buton. Evreleri verebilmek için 'F6' kısa yolunu kullanarak anahtar karelerinizi çoğaltıyor ve sonra oluşturduğunuz grafiklerin renklerini araç panelinden değiştiriyorum.

3 Açılan Menü:
Buton hareketimizi gerçekleştirdikten sonra tekrar 'movie clip'imizin içerisine geri dönüş yapıyoruz. Yeni bir katman oluşturup açılacak panelin şeklini yine Tool Bar araçlarını kullanarak butonların üst bölümünde oluşturuyorum.
hspace=0
Bu oluşum işlemi sırasında size yardımcı olması adına ‘View/Rulers’ panelini açarak cetvelleri
aktif yapabilir ve bu cetvellerden sahneye rehber çizgilerçekebilirsiniz. Bu da açılan menünün
kayma olasılığını sıfıra düşürmenizi sağlayan bir kolaylık olur.

4 Panel Hareketi 1:
Panel katmanı oluştuktan sonra artık bu panelin zaman çizelgesinde hareketinin verilmesine sıra geldi. Harekete geçmeden önce 1.Frame zaman çizelgesinde tıklayarak sag tuş yapıyor ve ‘create Motion Tween’ hareketi takip et etkisini veriyorum. Artık 20. Frame'mi seçili hale getirebilir ve panelin butonumun altından geçerek menü barın hemen alt kısmında oluşmasını sağlayabilirim. Bunu gerçekleştirirken rehber çizgilerimde bana yardımcı olacak.
hspace=0

5 Panel Hareketi 2:
Artık panelin menü bar butonumun üstünden geçerek Rehber çizgilerle sahnedeki koordinatlarını
değiştirebilir. Bu değişim sırasında ilk oluşturduğum menü butonu 1. framede kaldığı için bu
ekranda onu görmem mümkün olmaz
hspace=0hspace=0

hspace=0
hspace=0

6 Maske Hareketi:

Yeni bir katman açıp artık oluşan kayma hareketinin üst kısmını gizlememiz gerekmekte. Bunun için buton alanının altında bulunan bölüme açmış olduğumuz katmanın 1.frame'ne yeni bir dikdörtgen çiziyorum. Bu dikdörtgen açılacak panelimin genişliği kadar ve menu butonumun altında bulunması gerekmekte. Maske katmanını 20.Frame kadar uzattıktan sonra Maske katmanı üzerinde bu bölümü sağ tuşla 'Maske' konumuna getiriyorum.

7 Actionslar:
hspace=0

Açılan menünün geliş hareketini 20.Frame’e kadar gerçekleştirdik. Şimdi 40.Frame’e kadar bu panelin tekrar geldiği yere gidiş hareketini gerçekleştirmemiz gerekmekte. Bu işlemde yine maske katmanı içinde olmalı
ve maske katmanımızıda 40. frame kadar 'F6' tuşu ile kopyalamak gerekmekte. Bu işlemler gerçekleştirdikten sonra yeni bir katman açıp ismine ‘Actions’ katmanı diyeceğiz. Ve animasyonumuz 1. Frame de, 20.Frame ve Timeline’da sağ tuşa tıklayıp actions bölümüne girerek ‘Stop’ Actionsını
bekleyip durdurmamız gerekmekte. Animasyonumuzun ilk aşamasında oluşturduğumuz menü buton burada devreye girecek ve bu butonumuzun üzerine 1. Framedeki ‘Stop’ actionsunu bozan bir komut, yani ‘Goto’
actionsını girerek butona tıklanıldığı veya üzerine gelindiğin anda 2. Frame’e geçmesini sağlamak olacak.
hspace=0

Playback başlığımız 2. framede hareket edecek ve 20.frame kadar hiç durmadan yoluna devam
edecek. 20.Frame’de yine ‘Stop’ komutuna yakalanacak. Burada devreye sahnede çizmiş olduğumuz bir gizli buton girecek. Bu gizli buton 20.frame’de işlenecek ve bu gizli butonun üzerine de 'Goto' action’sı uygulacak.
Ama burada bir fark olacak. O fark actions’da yazan ilk satırı ‘OnRelase’ kısmını ‘Roll Out’ etkisiyle değiştirip 21.Frame geçmesini sağlayacağız. ‘Roll Out’ bize gizli butonun üzerinde çıkınca etkisini verecek. (Unutmadan bu gizli buton menü ve açılan panel genişliğinin tamamını kaplamalı) Artık animasyonun test etmek için Control+Enter tuşuna basabilirsiniz. Herkese kolay gelsin.
hspace=0

 

May 2008

 


Flash