ShitDeath
New member
Başlangıç Olarak herkesi belli bir photoshop ve Flash bilgisine sahip kabul ediyor ve ona göre anlatıyorum. Kısaca temel bazı tuşlar ve fonksiyonlar açıklanamayacak...
İlk olarak photoshopu açıp animasyonumuz için gerekli iki adet grafik yapıyoruz. Bunlardan biri Animasyonumuzda background olarak biride button olarak kullanılacak. Grafiklerimizin transparan kısımlarının flashta görüntülenebilmesi için PNG formatında kaydediyoruz.
Benimkiler burda;
Background:
Button:
Şimdi flashı açıyoruz. Yeni bir flash dökümanı açıyoruz.
Boyutlar: 460x70px
framerate: 25fps
File>import>import library komutu ile yaptığımız png leri kütüphane kısmına atıyoruz.
Eğer kütüpaneyi göremiyorsanız CTRL+L kısayolunu kullanarak görebilirsiniz...
4 tane Layer oluşturup bunları alttan üste isimlendiriyoruz. Buttons, Background, hitarea, actions...
Background için oluşturduğumuz png yi background adlı layera bırakıp F8 tuşuna basıyoruz ve bu resmi graphicSymbol şekline convert ediyoruz. Bunu yaparken "background_gfx" şeklinde isim veriyoruz. CTRL+K ile Aling Panelini açıp grafiği sahneye ortalıyoruz...
Align Panel:
Şimdi aynı işlemi Buton için yaptığımız png ye de uyguluyoruz.
Buton layerına atıyoruz. F8 ile graphicSymbol haline getirip ismini "button_gfx" yapıyoruz. Ardından tekrar F8 e basıp bunu movieclip haline getirmemiz gerekiyor. Bu sefer ismini "butAnim" şeklinde ayarlıyoruz.
Tamam şuanki görüntünün şu şekilde olması lazım:
Burası kolay kısıydı
Şimdi işin zor kısımlarına giriyoruz...
MovieClip üzerine çift tıklayarak onu editlemeye başlıyoruz. 15. ve 30. framelere F6 ile birer keyframe ekliyoruz. 15. framedeki grafiği birkaç pixel aşağıya kaydırıyoruz. Ardından birinci ve 15. framelere "Crate Motion Tween" uyguluyoruz.
Sonra action panelini açıp (F9) 1. 15. ve 30. frame lere birer
komutu ekliyoruz.
Hareketin göze daha hoş gözükmesi için 1. framedeki motion tween efektinin ease Değerini -100 15. framedeki motion tweenin ease değerini ise 100 olarak ayarlıyoruz.
Ease nedir?
Ease değeri animasyonun hızıyla ilgili bir ayardır. Ease negatif değerlerde ise ayarladığınız tween yawaş başlar hareketin sonuna doğru hızlanır. Değer pozitif ise hızlı başlayan harket tween sonuna doğru yawaşlayacaktır...
Şimdi asıl flash bölümüne geri dönüyoruz ve buton olarak ayarladığımız grafiğe çift tıklayarak onu editlemeye başlıyoruz.
Buton boyunca bir dynamic textfield ayarlıyoruz. istediğiniz fontu gözünüze ve grafiğinize uyan rengi seçmekte serbestsiniz. Ayrıca animasyonla uyum sağlaması için text ayar menüsünden "anti-alias for animation" seçeneğini seçiyoruz.
Bu bölümde her grafik için ayrı ayrı yazıda yazabiliriz ama action script özelliklerini kullanarak daha sonra editleme kolaylığı sağlayan dynamic textfield özelliğini kullanmamız iyi olacaktır..
dynamic textfield ımızın instancename'i olarak "but_txt" ayarlıyoruz.
Bu instancename olayı action sacript yazarken gerekli olacak....
Tamam şimdi tekrar ana timeline a dönebiliriz. Kaç tane buton olmasını istiyorsanız kütüphanedi movieclip leri o kadar duplucate ediyoruz ve tek tek instance name olarak "menu1", "menu2" ve "menu3" olarak isimlendiriyoruz.
Şimdi tıklama bölgemizi ayarlama zamanı geldi...
Hit_area adlı layer üzerinde çalışacağız. Burda butonumuzun üzerine kenar çizgileri olmayan basit bir kare çiziyoruz. F8 e basıp bunu movieclip şekline çeviriyoruz ve adınıda "hitArea_mc" olarak ayarlıyoruz.
Bakınız Böyle:
"hitArea_mc" adını verdiğimiz moviecliplerimizi buton sayımız kadar duplucate edip instance name lerinide "hitArea_mc1" "hitArea_mc2" "hitArea_mc2" şeklinde ayarlıyoruz...
Tamam artık Action script layerımıza geçip scriptleri yazmaya başlayabiliriz.
ilk olarak tıklama bölgelerimizi görünmez kılmamız gerekli...
Şimdi Butonlarımızın yazılarını ayarlayalım....
Şimdi çizdiğimiz dikdörtgen alanı butonumuzun tıklama bölgesi olarak ayarlıyoruz...
Ve en son olarak butonumuzun rollover yani üzerine geldiğimizde hareket edecek olmasını ve tıklandığında gideceği linki ayarlıyoruz ayarlıyoruz....
Bu işlemleri her buton için tekrar yazdığınızda şöyle bir görüntü oluşacaktır...
Sonucu Görmek için Tıklayın
Örnek Fla Dosyasını incelemek isteyenler buradan indirebilirler..
Alıntıdır... Çeviri ve bazı dipnotlar bana aittir... Kopyalamak izin vermeden kullanmak çalmak çırpmak serbesttir ancak farkedersem çok fena söverim...
İlk olarak photoshopu açıp animasyonumuz için gerekli iki adet grafik yapıyoruz. Bunlardan biri Animasyonumuzda background olarak biride button olarak kullanılacak. Grafiklerimizin transparan kısımlarının flashta görüntülenebilmesi için PNG formatında kaydediyoruz.
Benimkiler burda;
Background:
Button:
Şimdi flashı açıyoruz. Yeni bir flash dökümanı açıyoruz.
Boyutlar: 460x70px
framerate: 25fps
File>import>import library komutu ile yaptığımız png leri kütüphane kısmına atıyoruz.
Eğer kütüpaneyi göremiyorsanız CTRL+L kısayolunu kullanarak görebilirsiniz...
4 tane Layer oluşturup bunları alttan üste isimlendiriyoruz. Buttons, Background, hitarea, actions...
Background için oluşturduğumuz png yi background adlı layera bırakıp F8 tuşuna basıyoruz ve bu resmi graphicSymbol şekline convert ediyoruz. Bunu yaparken "background_gfx" şeklinde isim veriyoruz. CTRL+K ile Aling Panelini açıp grafiği sahneye ortalıyoruz...
Align Panel:
Şimdi aynı işlemi Buton için yaptığımız png ye de uyguluyoruz.
Buton layerına atıyoruz. F8 ile graphicSymbol haline getirip ismini "button_gfx" yapıyoruz. Ardından tekrar F8 e basıp bunu movieclip haline getirmemiz gerekiyor. Bu sefer ismini "butAnim" şeklinde ayarlıyoruz.
Tamam şuanki görüntünün şu şekilde olması lazım:
Burası kolay kısıydı
Şimdi işin zor kısımlarına giriyoruz...
MovieClip üzerine çift tıklayarak onu editlemeye başlıyoruz. 15. ve 30. framelere F6 ile birer keyframe ekliyoruz. 15. framedeki grafiği birkaç pixel aşağıya kaydırıyoruz. Ardından birinci ve 15. framelere "Crate Motion Tween" uyguluyoruz.
Sonra action panelini açıp (F9) 1. 15. ve 30. frame lere birer
Kod:
Stop()Hareketin göze daha hoş gözükmesi için 1. framedeki motion tween efektinin ease Değerini -100 15. framedeki motion tweenin ease değerini ise 100 olarak ayarlıyoruz.
Ease nedir?
Ease değeri animasyonun hızıyla ilgili bir ayardır. Ease negatif değerlerde ise ayarladığınız tween yawaş başlar hareketin sonuna doğru hızlanır. Değer pozitif ise hızlı başlayan harket tween sonuna doğru yawaşlayacaktır...
Şimdi asıl flash bölümüne geri dönüyoruz ve buton olarak ayarladığımız grafiğe çift tıklayarak onu editlemeye başlıyoruz.
Buton boyunca bir dynamic textfield ayarlıyoruz. istediğiniz fontu gözünüze ve grafiğinize uyan rengi seçmekte serbestsiniz. Ayrıca animasyonla uyum sağlaması için text ayar menüsünden "anti-alias for animation" seçeneğini seçiyoruz.
Bu bölümde her grafik için ayrı ayrı yazıda yazabiliriz ama action script özelliklerini kullanarak daha sonra editleme kolaylığı sağlayan dynamic textfield özelliğini kullanmamız iyi olacaktır..
dynamic textfield ımızın instancename'i olarak "but_txt" ayarlıyoruz.
Bu instancename olayı action sacript yazarken gerekli olacak....
Tamam şimdi tekrar ana timeline a dönebiliriz. Kaç tane buton olmasını istiyorsanız kütüphanedi movieclip leri o kadar duplucate ediyoruz ve tek tek instance name olarak "menu1", "menu2" ve "menu3" olarak isimlendiriyoruz.
Şimdi tıklama bölgemizi ayarlama zamanı geldi...
Hit_area adlı layer üzerinde çalışacağız. Burda butonumuzun üzerine kenar çizgileri olmayan basit bir kare çiziyoruz. F8 e basıp bunu movieclip şekline çeviriyoruz ve adınıda "hitArea_mc" olarak ayarlıyoruz.
Bakınız Böyle:
"hitArea_mc" adını verdiğimiz moviecliplerimizi buton sayımız kadar duplucate edip instance name lerinide "hitArea_mc1" "hitArea_mc2" "hitArea_mc2" şeklinde ayarlıyoruz...
Tamam artık Action script layerımıza geçip scriptleri yazmaya başlayabiliriz.
ilk olarak tıklama bölgelerimizi görünmez kılmamız gerekli...
Kod:
hitArea_mc1._visible = false;
hitArea_mc2._visible = false;
hitArea_mc3._visible = false;Şimdi Butonlarımızın yazılarını ayarlayalım....
Kod:
menu1.but_txt.text = "button 1";
menu2.but_txt.text = "button 2";
menu3.but_txt.text = "button 3";Şimdi çizdiğimiz dikdörtgen alanı butonumuzun tıklama bölgesi olarak ayarlıyoruz...
Kod:
menu1.hitArea = hitArea_mc1;Ve en son olarak butonumuzun rollover yani üzerine geldiğimizde hareket edecek olmasını ve tıklandığında gideceği linki ayarlıyoruz ayarlıyoruz....
Kod:
menu1.onRollOver = function(){
menu1.gotoAndPlay(2);
}
menu1.onRollOut = function(){
menu1.gotoAndPlay(16);
}
menu1.onRelease = function(){
menu1.getURL("http://www.siteadı.com");
}Bu işlemleri her buton için tekrar yazdığınızda şöyle bir görüntü oluşacaktır...
Kod:
// hitArea'yı görünmez yapma
hitArea_mc1._visible = false;
hitArea_mc2._visible = false;
hitArea_mc3._visible = false;
// Buton yazılarını ayarlama
menu1.but_txt.text = "this is button 1";
menu2.but_txt.text = "this is button 2";
menu3.but_txt.text = "this is button 3";
//Buttons (first)
menu1.hitArea = hitArea_mc1;
menu1.onRollOver = function(){
menu1.gotoAndPlay(2);
}
menu1.onRollOut = function(){
menu1.gotoAndPlay(16);
}
menu1.onRelease = function(){
menu1.getURL("http://www.yoursite.com/button1");
}
//Buttons (Second)
menu2.hitArea = hitArea_mc2;
menu2.onRollOver = function(){
menu2.gotoAndPlay(2);
}
menu2.onRollOut = function(){
menu2.gotoAndPlay(16);
}
menu2.onRelease = function(){
menu2.getURL("http://www.yoursite.com/button2");
}
//Buttons (third)
menu3.hitArea = hitArea_mc3;
menu3.onRollOver = function(){
menu3.gotoAndPlay(2);
}
menu3.onRollOut = function(){
menu3.gotoAndPlay(16);
}
menu3.onRelease = function(){
menu3.getURL("http://www.yoursite.com/button3");
}Sonucu Görmek için Tıklayın
Örnek Fla Dosyasını incelemek isteyenler buradan indirebilirler..
Alıntıdır... Çeviri ve bazı dipnotlar bana aittir... Kopyalamak izin vermeden kullanmak çalmak çırpmak serbesttir ancak farkedersem çok fena söverim...
