Archive for the "Adobe Flash Dersleri" Category

Flash butona HTML linki verme

Tümü Flash olan bi uygulamada bu hadise kolayken işin içine HTML girince şöyle bişi yapmak gerekiyor.

- Önce hızlıca bir buton yapalım. Şöyle alelade bir rectangle çiziyorum. Bunun köşelerini yuvarlatmak içinse sol tuş basılıyken yani rectangle’i çizip tam eli kaldıracakken o pozisyonda yukarı ya da aşağı oklarına basmak gerekiyor. İçe ya da dışa doğru yuvarlatmak mümkün.- Yazısını da yazalım. Hala Scenedeyiz ona göre daha alt tabakalara inmedik.

- Hala Scene deyiz. Henüz rectangle ve yazımız ayrı ayrı şeyler ve buton değil bunlara buton niteliği kazandıralım. ikisini beraber seçip sağ tıklayıp “Convert to symbol”a basıyoruz

- Açılan pencereden “Button”ı seçip Ok diyoruz. Artık text ve rectangleimiz buton oldu. Dikkat hala scene deyiz.

- Şimdi buton oldu ya şekil. Onun üstüne gelip çift tıklıyoruz ve Scene’den button seviyesine iniyoruz. Flash’ın mantığı bu alt seviyeye inmede yatıyor zaten. Butonun içine girince timeline’da 4 alan görünecek : Up, Over, Down diye. Up butonun normal dururkenki hali, over üstüne mausla gelince hali, down da basıldığındaki hali. Burda oynayabilirsiniz istediğiniz gibi. Ama buralara efekt koymadan önce, hangi alanlarla uğraşılacaksa oralara sağ tıklanıp “Insert Keyframe” yapılmalıdır. Kısayolu da F6. Bunu yapınca Up, over ve down alanlarında siyah içi dolu noktalar çıkacak her birine gelip istediğiniz efekti yaparsınız. Konumuz bu değil neyse. Devam edelim.

- Artık butonumuz hazır. En üst seviye olan Scene’e geri dönüyoruz. Bunun için sahnenin boş bi yerine çift tıklayabilirsiniz. Yani üstteki maddede butonun içine girmiştik ya ondan tekrar çıktık şimdi. Çıktıktan sonra sıra geldi butona link vermeye. Flash’ın actionscript’inde bunun hazır bir fonksiyonu var getURL diye. Onu kullanacağız.

Burası önemli küçük bi noktayı kaçırırsanız link olmuyor. Sizin de akıl sağlınız için dikkatli izleyin:D Bu kodu yazmak için Scene’deyken önce sahnenin boş bi yerine tıklıyoruz. Hiç bişeyin seçili olmamasına dikkat edelim. Ettik mi tamam. Buton seçili olmasın yani. Sonra timeline’dan ilk frame’i tıklıyoruz. İçi dolu siyah nokta vardır zaten. Sonra az önce yaptığımız butona tıklıyoruz. Sonra Actions sekmesine gidiyoruz oraya aşağıdaki kodu yazıyoruz:


on (release) {
 getURL("http://www.devdala.com", "_blank");
}

Misal:

Butonumuz şu şekilde oluyore:

Çalmayın olum bak yazıyı.

-Hakan Uysal

http://www.devdala.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/google_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/twitter_48.png

Adobe Flash Dersleri 19(Kaydırma çubuğu-Scrollbar- yapma)

  1. ActionScript 2.0 açılır
  2. Text tool seçilir. İlk seçimde “Properties” panelinde textin türü “Static Text”tir. Ancak kaydırma çubuğu yapılacağı için çalışması gereken tip “Dynamic Text”tir
  3. Text tool ile yazı yazılacak alan belirlenir
  4. Seçim aracı ile az önce ayrılan alan tıklanıp “Properties” panelinden texte bir “Instance name” verilir. “Properties” panelinden “Behavior”ın da “Multiline” yapılır
  5. “Window” sekmesinden “Components”e girilir. Karşıya bir pencere çıkar. Burdan “User interface”in alt menüsü açılır ve alt menüden “UIScrollbar” tutup sürüklenerek sahneye eklenir
  6. Eklenen çubuğa tıklanıp “Parameters” panelinden _targetinstancename’e bakılır eğer daha önce text için verilen instance name ile aynıysa sorun yoktur
  7. Text için yer ayrılmış yere yazı yazılır. Yazı uzun olsun ki çubuğun çalıştığı anlaşılsın
  8. Ctrl+enter
http://www.devdala.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/google_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/twitter_48.png

Adobe Flash Dersleri 18(Arka planı buton ile değiştirme)

  1. ActionScript 2.0 açılır
  2. File – Import – Import to Library yolunu izleyerek arka plan olması istenen resimler kütüphaneye eklenir
  3. Arka plan dinamik olacağı için bunu movie clip yapmak gerekir
  4. Katmanın üzerine rectangle tool ile sayfayı tamamen kaplayacak şekilde bir dikdörtgen çizilir ve seçilip F8 veya “Convert to Symbol” yardımıyla “Movie clip” haline getirilir. (Bu işlemden sonra dikdörtgenin “Properties” panelindeki “Instance name”i kesinlikle doldurulmalıdır. Kod yazarken gerekli bir işlemdir.)
  5. Movie clip haline gelen dikdörtgenin ortasında bir yuvarlak belirir. Buraya çift tıklayarak movie clipin içine girilir. Girildiği zaman Flash ilk açıldığında çıkan ekrana benzer bir ekran çıkar. (Tek bir katman)
  6. Burada dikdörtgen seçilip silinir. Çünkü artık işimiz kalmamıştır
  7. 1inci karedeyken kütüphaneye daha önceden konan arka plan resimlerden ilki çağrılır
  8. Resim konduktan sonra 2. kareye sağ tıklanıp “Insert keyframe” yapılır. Böylece 2. karede de siyah noktadan oluşur.
  9. 2nci kareye tıklanıp ardından resmin üstüne tıklandığında “Properties” panelinden “Swap bitmap” butonuna basılır. Ekrana kütüphanede bulunan resimlerin listesi çıkar. Sıradaki arka plan resmi seçilir
  10. 3üncü kare için de aynı işlem uygulanır. Böylece 3 kareye 3 ayrı arka plan eklenmiş olur
  11. Şu anda ctrl+enter yapılırsa resimlerin hızlı bir şekilde slayt gibi geçtiği görülür. Bunu durdurmak için 1. kareye tıklanıp “Actions” paneline gelip stop(); yazılır
  12. Timeline’in üstündeki Scene1′e basılarak movie clipin içinden çıkılıp ana sahneye tekrar dönülür
  13. Yeni bir katman oluşturulur. Bu buton ile arka plan değişikliğinin kontrolü sağlanacaktır
  14. Buton katmanına gelip fazla büyük olmayan bir dikdörtgen çizilir. Bunun içine arka plan resimlerinin önizlemesi konulacaktır
  15. Dikdörtgene tıklanıp F8 veya “Convert to Symbol” ile dikdörtgen nesne “movie clip”e çevrilir(Instance name unutulmamalıdır)
  16. Çift tıklanıp şimdi çevrilen movie clipin içine girilir
  17. Yeni bir katman oluşturulur. Buraya buton yapılmak üzere arka planların küçük halleri eklenecektir
  18. Arka plan resimlerinin küçük halleri kütüphaneye eklenir.(Ya da önceden yüklenen arka planlar elle tekrar boyutlandırılabilir). Resimler dikdörtgenin içine sırayla konur
  19. Her bir resim ayrı ayrı sırayla seçilip F8′e basıp “Button”a çevrilir
  20. İlk resmin küçük hali olan butonu seçip “Actions” paneline girilir. Bunun birinci arka planı göstermesi istendiği için kodu şöyledir:
  21. 1nci arka plan için 1. küçük resme yazılacak kod:

on(release){

_root.arka.gotoAndStop(1);

}

2nci arka plan için 2. küçük resme yazılacak kod:

on(release){

_root.arka.gotoAndStop(2);

}

3üncü arka plan için 3. küçük resme yazılacak kod:

on(release){

_root.arka.gotoAndStop(3);

}

**Buradaki “arka” benim arka plan “movie clip”ine verdiğim “instance name”dir.

http://www.devdala.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/google_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/twitter_48.png

Adobe Flash Dersleri 17(Gizli butonla açılır menü)

Butonun üstüne gelince alt menü oluşmasını sağlamak için bir yöntemdir


  1. ActionScript 2.0 açılır
  2. İlk katmanda bulunan butonun sürekli görünmesi istendiğinden(gizli buton olacaktır bu çünkü) ilk 70-80 kareye “Insert Keyframe” yapılır. Bu keyfi bir değerdir. Az gelirse daha ileriki framelere “Insert Keyframe” yapılabilir. Kısaysa da daha önceki karelere “Insert Keyframe” yapılabilir
  3. Bir tane buton oluşturulur
  4. Bir katman oluşturulup bu katmana ilk yapılan butonun altına bir tane daha buton oluşturulur
  5. Alt a oluşturulan butonun olduğu katmana gelinip 1. kareye “Create Classic Tween” yapılır ve 10. kareye “Insert Keyframe” yapılır. 1. karede önce sahneye sonra butonun üstüne tıklanıp “Properties” panelinden “Alpha” değeri 0 yapılır. Böylece buton yavaş yavaş ekranda belirecektir. Bir katman daha açılır ve 10. karesine “Insert Keyframe” yapılır. Böylece 1. alt buton animasyonu görünürken az sonra oluşturulacak olan 2. buton ekranda görünmez
  6. Buraya(2. açılan katmanın 10. karesine) bir buton daha oluşturulur
  7. Bu butona da tween eklenir. 10. kareye “Create Classic Tween” yapılır. 20. kareye “Insert keyframe” yapılır. Ardından bu katmandaki 20. kareye tıklanıp stop(); yazılır. Böylece açılır menü açıldığında kaybolmaz hemen. Çünkü aşağıda kaybolma efekti de görünme efektinin arkasına yapılacaktır. Açılır menü ana butonun üstünden fare imleci çekilmediği sürece açık kalmalıdır. Bu istendiği için kaybolma efektine gelmeden animasyon durdurulur.
  8. Önceki katmanda da 20. kareye “Insert keyframe” yapılır. Böylece önceki katmandaki buton ana butonun altında belirecek, tamamen belirince de diğer buton belirecektir
  9. Bu işlemden sonra sırayla ekrandan kaybolma işlemi yapılacaktır. Bunun için önce son belirenin ekrandan çıkması sağlanmalıdır. Bu nedenle son eklenen katmana gelinip 30. kareye “Insert keyframe” yapılır. 30. karede önce sahneye sonra butona basılıp “Properties” panelinden “Color effect”e gelinip “Alpha” değeri 0 yapılır. Böylece 20. ve 30. kareler arasında buton ekrandan kaybolacaktır.
  10. Alttaki buton kaybolurken üstteki butonda bir değişiklik olması istenmediğinden onun katmanında da 30. kareye “Insert keyframe” yapılır ve efekt eklenmeyip olduğu gibi bırakılır. Animasyon oynatıldığında ekranda önce sürekli durması gereken ana buton görünür ve yavaşça onun altında bir buton belirir. Ardından bir buton daha belirir. Sonra son beliren, en alttaki buton yavaşça ekrandan kaybolur. İlk beliren buton aynen kalır.
  11. İlk beliren butonu da ekrandan yavaşça kaybetmek için 40. kareye “Insert keyframe” yapılır ve önce sahneye sonra butona tıklanıp “Properties” panelinden “Color effect”e gelinip “Alpha” değeri 0 yapılır. Böylece artık bu buton da kaybolacaktır.
  12. Şu an için görünme ve kaybolma efektleri tamamlanmıştır. Sıra ana butona kod ekleyerek diğer iki alt butonu yönlendirmeye gelmiştir. Ancak bundan önce animasyonun otomatik olarak oynamasını engellemek için ana butonun olduğu katmandaki 1. kareye tıklayıp “Actions-Frame” panelinden stop(); yazılır
  13. Önce sahneye sonra ana butona tıklayıp “Actions-Button” panelinden ana butona kod yazılmaya başlanır
  14. on(rollOver){

    gotoAndPlay(2);

    }

    **1. karede stop(); kodu olduğu için bu kodla o aşılır ve animasyonun oynamaya başlanması sağlanır

  15. Yeni bir katman oluşturulur. Buraya gizli buton yapılacaktır
  16. 20nci kareye gelip “Insert keyframe” yapılır. Çünkü görünme efektlerinin sonu 20. karedir. Timeline’da görülen fazlalık kareler seçilip sağ tıklanıp “Remove frames” ile silinebilir
  17. Rectangle tool ile 20. kareye gelip görünen 3 butonun etrafını tamamen saracak bir şekil çizilir. Dikdörtgenler üst üste çizilirse Flash onları tek şekil olarak algılayıp işimizi kolaylaştırır
  18. Şekil çizildikten sonra şekle tıklayıp F8 veya “Convert to Symbol”e basılarak şekil, butona çevrilir
  19. Butonun üzerine çift tıklanıp içine girilir ve Up, Over, Down, Hit gibi alanlar görünür
  20. Önceki derslerin aksine bize gereken sadece Hit alanıdır. Çünkü gizli butonun üstüne gelince açılır menünün kaybolmasını istiyoruz. (Yani fare imleci ana butonun üzerinden çekilince mecburen az önce yaptığımız gizli butonun üzerinden geçecektir). Bunun için timelinedaki “Up” alanındaki noktaya tıklanıp “hit” alanına sürüklenir. Tekrar Scene1′e dönüldüğünde gizli butonun rengi değişir ve animasyonda görünmez
  21. Önce sahneye sonra gizli butona tıklanıp “Actions-Button” panelinden butona kod yazılır
  22. on(rollOver){

    play();

    }

    **20. karede yazılan stop() ; kodunu geçip kaybolma efektini oynatmak içindir

  23. Artık ana butonun veya alt menünün dışında bir yere fare imleci sürüklenirse alt menü kaybolacaktır.
  24. Ctrl+enter

http://www.devdala.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/google_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/twitter_48.png

Adobe Flash Dersleri 16(Flash ile site yapımı)

  1. ActionScript 2.0 açılır
  2. Sayfanın boyutları “Properties” panelinden 800×600 olarak ayarlanır
  3. “View” sekmesinden “Rulers”a basılarak cetveller açılır
  4. Banner, butonlar, içerik ve içeriğin sayfaya girmeden önceki kısmının hizası cetvel yardımıyla işaretlenir.(Cetvelin olduğu yerden tıklanıp istenilen yere kadar fare imleci sürüklenerek). İçeriğin ilk konumunun büyüklüğünü belirlemek için sayfanın içinde belirlenen hizanın içine rectangle tool …vb ile bir nesne çizilip onu sayfa dışına sürükleyip ona göre içeriğin ilk konumunun cetvelleri ayarlanabilir
  5. İlk katmana ilk hangi sayfa yapılmak isteniyorsa onun adı verilir. Ben “Hakkımızda” yaptım
  6. Bu katmana bir nesne çizilir(Yukarıda cetvelleri ayarlamak için kullanılan nesne de kullanılabilir)
  7. Bu nesnenin ilk konumu cetvellerle ayarlanılan sayfanın dış kısmıdır. Kayarak içeri girecektir. Bu nesnenin üstüne yazısı yazılır
  8. Yazı “dynamic text” ise “static text”e çevrilir
  9. “Hakkımızda” katmanın 1. karesinde “Create Classic Tween” yapılır(CS4 için böyle. CS3 için “Create Motion Tween”e basılır)
  10. 20nci kareye gelip “Insert Keyframe” yapılır ve daha önce yazdığımız hakkımızda yazısı ve onu kaplayan nesne sayfanın içine alınır. Hakkımızda sayfası sayfanın sağ kısmından içeri girecektir artık
  11. Yeni bir katman oluşturulur. Örneğin bu da “İletişim” olabilir
  12. Bu “Hakkımızda” ve “İletişim” sayfaları farklı karelerde yapılmalıdır. Bu nedenle “İletişim” katmanında 25. kareye “Insert keyframe” yaparak karışıklığın önüne geçilir
  13. Yine yukarıda olduğu gibi sayfanın dışında cetvelle ayarlanan bölgeye bir nesne çizilir. Onun içine “İletişim” ile ilgili yazısı yazılır.
  14. 25inci kareye sağ tıklanıp “create classic tween” yapılır ve 45. kareye gelinip “Insert keyframe” yapılır. Ardından nesne 45. karede sayfa içine alınır
  15. Yeni bir katman oluşturulur. Bu da örneğin “Referanslar” olabilir. Bu katman da karışmaması için 50. kareden başlayacaktır. Bu nedenle yukarıdaki gibi 50. kareye “Insert keyframe” yapılır
  16. Bu katmanın içeriği yukarıdaki iki sayfa gibi doldurulur. (Nesne yapılır, içine yazısı yazılır, tween uygulanıp sayfaya girmesi sağlanır.)
  17. Yeni bir katman oluştulur. Bu katman butonlar içindir
  18. 3 sayfa var bunlar için 3 de buton oluşturulur
  19. Rectangle tool …vb ile buton şekli cetvelle daha önce belirlenen alanın içine çizilir. Üstüne yazısı yazılır. Ardından butonun tamamı(yazı ve nesne) seçilerek F8 veya “Convert to symbol”e basılarak “Button” haline getirilir.
  20. İlk butonun üzerine çift tıklanarak içine girilir ve timeline üzerinde “Up”, “Over”, “Down” ve “Hit” alanları görünür. Bunlardan sadece “Up” doludur. F6 tuşu ile diğerlerinin içi doldurulur.(Up buton basılı değilken görünen hal, Over fare butonun üzerindeyken görünen hal, Down butona basıldığında görünen haldir. Bu hallere teker teker gelinip buton üzerinde değişiklik yapılarak çeşitli efektler eklenebilir.)
  21. Ben örnek için “Over” üzerine gelip butonun arka planının rengini değiştirdim. Ctrl+enter ile bakılırsa da butonun üzerine fare imlecini getirince renk değiştirdiği görünür
  22. Sahneye çift tıklanıp butonun içinden çıkılır. Diğer butona çift tıklanıp onun içine girilir. Aynı işlemler onun için de yapılır. İstenirse farklı bir efekt verilebilir.(Örneğin yazı rengini değiştirmek)
  23. Butonlara efekt ekledikten sonra sıra banner koymaya geldi. Bunun için yeni bir katman yaratılır
  24. Banner katmanında cetvelle banner için daha önceden belirlediğimiz yere rectangle tool…vb aracılığıyla bir nesne çizilir.
  25. Nesne seçilip F8 veya “Convert to symbol”e basılarak “Movie clip” haline getirilir.
  26. Nesneye “Properties” panelinden bir “Instance Name” verilir. (Bu kesinlikle yapılmalıdır. Kod yazımı sırasında kullanılacaktır)
  27. Önce sahneye tıklanıp sonra nesneye çift tıklanarak nesnenin içine girilir. Timeline Flash ilk açıldığında olduğu gibi görünür.(Tek bir katman vardır) Önceden oluşturulan nesne silinir. Onun yerine  resim konulacaktır
  28. Bir resim çağrılır.(File – Import – Import to stage)
  29. Eklenen resmin katmanında 1. kareye sağ tıklanıp tween eklenir. (“Create Classic Tween”e basılır. 20. kareye gelip “Insert keyframe”e basılır) 20. karede önce sahneye sonra nesneye tıklanır ve nesnenin “Properties” panelinden “Color effect” kısmından “Alpha” değeri 0 yapılır. Böylece 20. kareye doğru nesne yavaş yavaş sahneden kaybolacaktır. Bu efekt isteğe bağlı olarak değiştirilebilir. Önce 0 sonra 100 de olabilir.
  30. Yeni bir katman oluşturulur. Buraya ikinci resim eklenir. Buna da yukarıdaki işlemler uygulanır. Efekt istenirse değiştirilebilir. Yalnız dikkat edilecek nokta yeni eklenen resim önce eklenen ve tween uygulanmış resmin efektinin bittiği kareden başlamalıdır. Örneğin yukarıdaki resim 20. karede sahneden kaybolmaktadır. O halde 2. resmin katmanında 20. kareye “Insert keyframe” yapılır ve 21. karede tween uygulama başlatılır.
  31. Bannera kaç resim konulacaksa o kadar kez yukarıdaki işlemler tekrarlanır
  32. Artık butonlara görev eklemeye sıra geldi. Bu “Actions” panelinden kod yazarak yapılacaktır.
  33. Bundan önce animasyonların sürekli kendi kendilerine oynamasını engellemek gerekir. Bunun için de her tweenin ilk karesine gelip “Actions” panelinden stop(); yazılır.
  34. Önce sahneye sonra butona bir kez tıklanıp “Actions-Button” paneline gelip kod yazmaya başlanır. Her buton için bu yapılacaktır.
  35. Hakkımızda butonunun kodu:

    on(release){

    gotoAndPlay(2);

    }

    İletişim butonunun kodu:

    on(release){

    gotoAndPlay(26);

    }

    Referanslar butonunun kodu:

    on(release){

    gotoAndPlay(51);

    }

  36. Bu kez de tıklandıktan sonra sayfa görünüp kaybolmaktadır. Bunu engellemek için de her katmanda tweenin bittiği yerdeki kare seçilip “Actions” panelinden yine stop(); yazılır.
  37. Ctrl+enter
http://www.devdala.com/wp-content/plugins/sociofluid/images/digg_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/stumbleupon_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/delicious_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/technorati_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/google_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/myspace_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/facebook_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/yahoobuzz_48.png http://www.devdala.com/wp-content/plugins/sociofluid/images/twitter_48.png