Bilişim İzle | Bilişim Teknolojileri Sitesi

Eylem Kodları İle Etkileşimli Animasyonlar

Eylem Kodları İle Etkileşimli Animasyonlar Staj Defteri Doldurma Etkinliği İşletmelerde Beceri Eğitimi Dersi Staj Dosyası Konuları kapsamında ActionScript dilinin gelişimi, Eylemler Panelinin incelenmesi, Eylemler Paneli Araçları, ActionScript Yazım Kuralları, ActionScript ile Fonksiyon Tanımlama, ActionScript Olaylar (Evet), Fare Tıklama Uygulamaları, Bölgelerimizin Yüz Ölçümü Sıralaması Uygulaması, Buton ile Lamba Renk Değiştirme uygulama faaliyetleri gibi staj dosyasına yazılacak konuları içerir. Yazımızın sonunda dosyaların indirme linkleri mevcuttur.

Eylem Kodları İle Etkileşimli Animasyonlar

Eylem Kodları İle Etkileşimli Animasyonlar Staj Defteri Doldurma Etkinliği

Eylem Kodları İle Etkileşimli Animasyonlar Staj Defteri Doldurma Etkinliği İşletmelerde Beceri Eğitimi Dersi Staj Dosyası Konuları kapsamında ActionScript dilinin gelişimi, Eylemler Panelinin incelenmesi, Eylemler Paneli Araçları, ActionScript Yazım Kuralları, ActionScript ile Fonksiyon Tanımlama, ActionScript Olaylar (Evet), Fare Tıklama Uygulamaları, Bölgelerimizin Yüz Ölçümü Sıralaması Uygulaması, Buton ile Lamba Renk Değiştirme uygulama faaliyetleri gibi staj dosyasına yazılacak konuları içerir. Yazımızın sonunda dosyaların indirme linkleri mevcuttur.

ActionScript

1995 yılında ilk olarak ortaya çıkan animasyon yazılımında kullanılan komutlar temel animasyon ve yönlendirme komutları olarak (toplamda 12 temel komut) kullanıcıya sunulmuştur. Her yeni versiyonla bu komutlara, yeni komut setleri eklenmiş ve her versiyonda farklı ihtiyaçlara karşılık vermiştir. Animasyon yazılımının 5. versiyonunda tam olarak bir uygulama diline dönüşmüş ve ActionScript ismini almıştır. Animasyon yazılımı geliştikçe ActionScript dili de gelişmiş, ActionScript 2.0 ve ActionScript 3.0 versiyonuna ulaşmıştır.

ActionScript ile zaman çizgisini kontrol edebilirsiniz. Yaptığınız animasyonlara etkileşim veya çeşitli şartlar ekleyebilir, animasyonun istediğiniz şekilde akmasını sağlayabilirsiniz. Sahneye düğmeler, yazı kutuları vb. form bileşenleri ekleyip kullanıcı ile etkileşime girebilirsiniz. Yapılabilecekleriniz hayal gücünüzle sınırlıdır. ActionScript 3.0 diliyle ActionScript yeni bir boyuta taşınmış ve güçlü bir programlama dili olmuştur. ActionScript 3.0 nesne tabanlı (OOP) bir programlama dilidir. Sunucu tarafında çalışan çeşitli internet programlama dilleri (php,asp,asp.net,java vb.) ile uyumlu çalışabilmektedir.

ActionScript ile zaman çizgisini kontrol edebilir, yaptığınız animasyonlara etkileşim veya çeşitli şartlar ekleyebilir, animasyonun istediğiniz şekilde akmasını sağlayabilirsiniz. Sahneye düğmeler, yazı kutuları vb. form bileşenleri ekleyip kullanıcı ile etkileşime girebilirsiniz.

Eylemler Paneli

Eylemler paneli, animasyon yazılımı içerisinde Script yazmak için geliştirilmiş editördür. ActionScript 3.0 ile kod tamamlama özelliği daha da gelişmiştir. Programlama yapıldığı esnada kodları tamamlamak için çeşitli seçenekler çıkar ve programcıya kod yazarken büyük kolaylıklar sağlar.

Eylem panelini açmak için:

– Pencere > Eylemler (F9) komutunu kullanabilirsiniz.

Eylemler Paneli ve Penceresi
Eylemler Paneli ve Penceresi

Panel Bölümleri

Script Elemanları

Bu bölümde,tüm ActionScript sınıfları gruplandırılmış olarak bulunur. İstediğimiz komut seçilerek yazma alanına eklenebilir. Uygulama içerisinde kullanılabilen tüm özellik ve metotlar bu pencere altında saklanır.

Script elemanları menüsü
Script elemanları menüsü

Script Ekleme – Düzenleme Alanı

Kodların yazıldığı ve daha önceden yazılmış kodların düzenlenebildiği bölümdür.

Script ekleme- düzenleme alanı
Script ekleme- düzenleme alanı

Script Gezinme Alanı

Karmaşık animasyon ve uygulamalarda kod yazılan yerler arasında hızlı geçiş yapmak için ActionScript 2.0 ile geliştirilmiş ve halen kullanılan özelliktir. Kod yazılan tüm nesneler bu bölümde listelenir.

Script gezinme alanı
Script gezinme alanı

Eylemler Paneli Araçları

Eylemler Paneli Araçları
Eylemler Paneli Araçları
  1. Yeni bir öğe ekle
  2. Bul
  3. Hedef yol ekle
  4. Söz dizimi denetimi 
  5. Otomatik biçim ( CTRL+Shift+F )
  6. Kod ipucu göster
  7. Hata ayıklama seçenekleri
  8. Parantezlerin arasını daralt
  9. Seçimi daralt
  10. Tümünü genişlet
  11. Blok yorum uygula
  12. Satır yorum uygula
  13. Yorumu kaldır
  14. Araç kutusunu göster/gizle
  15. Hazır kod parçacıları ekle
  16. Eylemler araç kutusundan öğeler seçerek komut dosyaları oluşturur.
  17. Yardım

Otomatik Düzenleme

Otomatik düzenleme çalıştırıldığında kod penceresinde yazılmış kodlar standarda göre yeniden düzenlenir, kurallara uygun girinti verilir, satır sonunda kullanılmayan noktalı virgülleri (;) gerekli yerlerde otomatik olarak yerleştirir.

Script’i kullanmak için:

– Panel içerisine aşağıdaki kodları ekleyin.

Düzensiz yazılmış kodlar
Düzensiz yazılmış kodlar

– CTRL+Shift+F komutunu ya da  simgesini kullanın.

– Uygulama otomatik olarak ActionScript söz dizilimine göre düzenleyecektir.

Otomatik düzenleme yapılmış kodlar
Otomatik düzenleme yapılmış kodlar

Kendi otomatik düzeltme ayarlarınızı yapmak için:

– Panelin sağ tarafındaki Tercihler Panelini Açma menüye tıklayarak tercihler paneli açın.

Tercihler paneli
Tercihler paneli

– İstenilen biçim ayarlandığında onaylanarak paneli kapatın.

Satır Numaralarını Gösterme

Karmaşık kod yapılarında hata bulmak için çok işe yarayan bir özelliktir.

Satır numaraları göstermek için:

– CTRL+Shift+L komutunu kullanabilir ya da panel özelliklerinden bu özelliği açıp kapatabilirsiniz.

Özellik Menüsü
Özellik Menüsü

Satır Kaydırma

Bu özellik aktifken yazılan kod, kod penceresine sığmadığında alt satıra geçer. Satır kaydırma işlemi yapılmayacağı için hızlı şekilde hatasız kodlar yazılabilir.

Script İğneleme

Birden fazla frame ile uğraşırken zaman çizgisi üzerinde frameleri seçip kod yazmaya çalışmak bazen çok sıkıcı bir hal alabilir, bu gibi durumlarda bu özellik kullanılarak kod yazılan frameler panel altında bir tab haline getirilir. Frame seçmek yerine tablar arasında geçiş yapmak daha kolay olacaktır.

Script İğneleme
Script İğneleme

Script iğneleme yapmak için:

– Kod yazdığımız ilk frame seçiliyken eylemler paneli açılır. Script iğnele
düğmesine basın.

Script İğneleme İkonu Tıklanmış Hali
Script İğneleme İkonu Tıklanmış Hali

– Diğer kod yazdığımız frame seçin ve script iğnele düğmesine tekrar tıklayın.

Diğer Script Alanının İğnelemiş Hali
Diğer Script Alanının İğnelemiş Hali

Kod İpuçları

Yazılan kodlar için ipucu kutusunu çalıştırır. Kod ile ilgili parametreler bu kutu içerisinde gösterilir.

Kod ipuçlarını göstermek için:

Eylemler panelini açın.

var i: yazın.

Açılan pencereden uint veri türü seçilir.

Kod İpuçları
Kod İpuçları

Esc tuşu ile bu pencereyi yok edebilir CTRL+Boşluk ile yeniden açabilirsiniz.

Hataları Denetle

Yazılan kodların editör aracılığı ile kontrol ettirmek istenildiğinde kullanılan bu özellik, kontrol sonucunu iletişim kutusunda detaylı olarak sunacaktır.

Hataları denetleyi çalıştırmak için:

CTRL+T komutunu ya da Hataları Denetle Düğmesi simgesini kullanın.

Hata Raporu
Hata Raporu

ActionScript Yazım Kuralları

Açıklamalar

Karmaşık ve yoğun kodlamanın olduğu projelerde, kod parçalarının ne iş yaptığını hatırlamak ya da takım çalışması yaparken takım üyelerinin kod blokları, değişkenler vb. bilgilendirmek için kullanılır. Kodların işleyişini etkilemez.

Tek satırlık açıklamalarda // işareti ile başlar.

Bloklar { }

{ } parantezleri (küme parantezi, süslü parantez, güzel parantez) arasında yazılan her kod birlikte çalışmak için bloklanır.

Nokta ( . )

Nesnelerin yol tanımlarını yapabilmek ya da sınıfların özellik ve metotlarına ulaşmak için kullanılan işarettir.

Noktalı Virgül ( ; )

Yazılan kodlarda ifadenin bittiğini göstermek amacıyla ifade sonuna konulur.

FONKSİYONLAR

Uygulama içerisinde bir komut ya da komut grubu tekrar tekrar kullanmak istenebilir. Bu gibi durumlarda aynı satırlar defalarca yazılmak zorunda kalınabilir. Birkaç yüz satır kodlamada çok büyük problem olmayacaktır. Fakat uygulama büyüdükçe hata kontrolü yapması da zorlaşacaktır. Tekrar eden kodlarda belli bir değer değiştirmek istendiğinde tüm tekrar eden satırların yeniden düzenlenmesi gerekecektir. Bu tarz durumlarda uygulama geliştiricilerin yardımına fonksiyonlar yetişmektedir. Kısaca fonksiyonlar, tekrar eden kod bloklarının alınıp paketlenmesine yarar. Uygulama içerisinde artık bu paketin ismi kullanılarak istenilen yerde bu kodlar çalıştırılabilir. Bu sayede daha sonra üstüne yapılacak değişiklikler ve hata kontrolü hızlı bir biçimde yapılabilir.

Fonksiyon Tanımlama

Fonksiyon tanımlama aşağıdaki şekilde yapılabilir: Bu şekilde fonksiyon tanımlandığında editör penceresinin istenilen yerinde fonksiyon çalıştırılabilir.

Fonksiyonu tanımlamak için:

ActionScript Fonksiyon Tanımlama
ActionScript Fonksiyon Tanımlama

Fonksiyonu çalıştırmak için:

ActionScript Fonksiyon Çalıştırma
ActionScript Fonksiyon Çalıştırma

Şeklinde yazarak istenilen yerde fonksiyon çalıştırılır. Sahnedeki örnek ismi “kutu” olan nesneyi x ekseninde 250, y ekseninde 250 px noktasına getirecek fonksiyonu yazmak için:

Yeni bir belge oluşturunuz.

Sahnemize 20* 20 px büyüklüğünde kare oluşturunuz.

Film klibi haline getirip örnek adı olarak kutu ismini veriniz.

Sahneye tıklayıp Pencere > Eylemler (F9) komutunu seçiniz.

Fonksiyon ismini ilerlet belirleyin. İsterseniz değişken tanımlama kuralları çerçevesinde istediğiniz ismi verebilirsiniz.

ActionScript Fonksiyon Tanımlama Örneği
ActionScript Fonksiyon Tanımlama Örneği

Animasyonu test ediniz.

Kutu nesnesinin yeri değiştirmeyecektir.

Fonksiyon tanımlanmış, fakat tetiklenmediği için kodlar çalışmamaktadır.

Tetiklemek için fonksiyon komutunu eylem paneline eklememiz gereklidir.

ActionScript Fonksiyon Tanımlama Örneği-2
ActionScript Fonksiyon Tanımlama Örneği

OLAYLAR (EVENT)

ActionScript Olayları

ActionScript 3.0 ile artık sahnede gerçekleşen her şey, bir olay olarak kabul edilmiştir. Örneğin; farenin herhangi bir yere tıklaması, klavyeden bir şeyler yazılması, sahnenin çalışması, zaman çizgisi üzerinde bir frame’in çalışması gibi… Her şey artık olay olarak kabul edilmektedir. Olayların gerçekleşmesi yazılmış fonksiyonların tetiklenmesini sağlar.

EventListener

Olay, dinleyicilerini sahneye eklemek ve tetikleyeceği fonksiyonu tanımlamak şu şekilde yapılır: Öncelikle olay dinleyicisini nesneye eklemek gerekir.

ActionScript 3 – MouseEvent (Fare Olayları)

MouseEvent.CLICK                       : Farenin tıklanması olayı.

MouseEvent.DOUBLE_CLICK    : Farenin çift tıklanması olayı.

MouseEvent.MOUSE_DOWN       : Farenin tıklandığındaki yani tuşun basılı tutulduğu zamanki olayı.

MouseEvent.MOUSE_UP              : Farenin tuşunun basıldıktan sonraki bırakıldığı andaki olayı.

MouseEvent.MOUSE_MOVE       : Farenin herhangi bir nesnenin üzerinde olduğu sürece yapılacak olay.

MouseEvent.MOUSE_OVER        : Fare herhangi bir nesne üzerine gelince çalışacak olay.

MouseEvent.MOUSE_OUT           : Fare nesne üzerinden ayrıldığında çalışacak olan olay.

MouseEvent.MOUSE_WHEEL     : Nesne üstündeyken farenin tekerleği oynatılınca çalışacak olan olay.

UYGULAMA FAALİYETLERİ

Uygulama Faaliyeti 1: Fare butonun üzerine geldiğinde “Fare butonun üzerinde.” yazan animasyonu ActionScript 3.0 ile oluşturalım.

Öncelikle Bileşenler penceresinden (Bu paneli Ctrl+F7 ile açabilirsiniz) bir adet buton alalım örnek adını buton1 yapalım.

1       import flash.events.MouseEvent;

2       function uzerinde(Event:MouseEvent):void

3       {

4              trace(“Fare butonun üzerinde.”);

5       }

6       buton1.addEventListener(MouseEvent.MOUSE_OVER,uzerinde);

Şimdi yazdığımız kodu inceleyelim;

Kırmızı ile yazılanlar bizim yazdığımız kısımlar olup bunları kendimiz dilediğimiz gibi değiştirebiliriz. Siyah ile yazılanlar ise kod parçalarına aittir değiştirildiğinde hata oluşacaktır.

Satır 1: MouseEvent “Fare olayı” anlamına gelir. Burada Fare olayı sınıfı kütüphaneden animasyonumuza aktarılır. Kodların çalışmasını sağlar.

Satır 2: uzerinde isimli fonksiyon tanımladık. Bu fonksiyona değer olarak fare olayı gönderilecek (Event:MouseEvent).

Satır 3: Buradaki parantez fonksiyonun başladığını gösterir.

Satır 4: trace kodu çıktı ekranına mesaj yazdırmak için kullanılır. Fare butonun üzerine geldiğinde çıktı ekranında  “Fare butonun üzerinde.” yazacak.

Satır 5: Buradaki parantez fonksiyonun bitiğini gösterir.

Satır 6: Burada ise buton1’e olay ekliyoruz. Yani farenin butonun üzerine gelmesi olayını ekliyoruz. Fare butonun üzerine gelince uzerinde fonksiyonunu çalıştıracak.

Uygulama Faaliyeti 2:   Fare ile butona tıklandığında “Butona tıklandı.” yazan animasyonu ActionScript 3.0 ile oluşturalım.

1       import flash.events.MouseEvent;

2       function tikla(Event:MouseEvent):void

3       {

4              trace(“Butona tıklandı.“)

5       }

6       buton1.addEventListener(MouseEvent.CLICK,tikla);

Benzer şekilde farenin diğer olaylarını da deneyebilirsiniz.

Uygulama Faaliyeti 3: Mesajları trace komutu ile çıktı penceresinde görmek yerine metinyaz adında bir dinamik metin kutusunda yazdıralım.

İşlem Basamakları:

1-) 1.katmana buton ekleyelim ve örnek adını buton1 yapalım.

2-) Yeni katman açalım bu katman dinamik metin ekleyelim ve örnek adını metinyaz yapalım.

3-) Yeni katman açalım ve o katman seçili iken aşağıdaki kodları eylemler panelindeki kod yazma alanına yazalım.

Uygulama Faaliyeti 4: Bölgelerimizin Yüz Ölçümü Sıralaması Uygulaması

İşlem Basamakları:

1-) Flash programında actionscript 3.0 seçiniz, yeni proje oluşturunuz.

2-) Katmana aşağıdaki gibi başlık için 1 adet Klasik Metin, 7 adet RadioButton, 1 adet label ekleyiniz. (Bileşenler panelini Ctrl+F7 ile açabilirsiniz.)

3-) Kodlarımızı yazmaya başlamadan önce RadioButton’larımıza özellikler panelinden <Örnek Adı> verelim. Ben örnek adlarını; marmara, ege, akdeniz, karadeniz, icanadolu, doguanadolu, gdanadolu olarak belirledim.

4) Şimdi kodlarımızı yazalım bunun için sahnede boş bir yere tıklayın ve F9 tuşuna basarak eylemler panelini açın.

5) Kodlarımız temel olarak aşağıdaki yapıda olacak.

nesneadi: Hangi nesneye kod yazacaksak onun adı. <Örnek Adı> kısmına yazdığınız addır.
f_adi: Çalıştırılacak olan fonksiyonun adı. İstediğiniz bir isim verebilirsiniz.

CLICK, fare tıklandığında demektir. Animasyonumuzda hangi bölgeye tıklarsak “……. BÖLGESİ YÜZ ÖLÇÜMÜ ……. BÜYÜK BÖLGEMİZDİR.” yazacaktır.

6) Kodlarımız ise şu şekilde olacak.

7) Ctrl+Enter ile çalışmamızı test edelim.

Uygulama Faaliyeti 5: ActionScript ile Buton Bileşeni Uygulaması (Buton ile Lamba Renk Değiştirme)

Eylem Kodları İle Etkileşimli Animasyonlar hazırlama uygulaması kapsamında aşağıdaki lambalara ait png dosyalarını indirin. Sarı lamba indir. Kırmızı lamba indir.

Buton ile Lamba Renk Değiştirme
Buton ile Lamba Renk Değiştirme

Adım 1: “550×400“piksel ebatlarında bir sahne açın ve sahne arkaplanını “beyaz” yapın.

Adım 2: Katmanın adını “lambalar” olarak değiştirin.

Adım 3: “lambalar” katmanı 1.kareye sarı lambayı, 2. kareye de ( önce F7 ile boş anahtar kare ekleyin.) kırmızı lambayı ekleyin. Lambaların boyutlarını ayarlayın ve sahnenin tam ortasına hizalayın. (Boyutları ayarlarken en/boy oranlarını kilitleyin lambaların boyutlarını aynı yapın.)

Adım 4:Yeni katman ekleyin ve adını “buton” olarak değiştirin.

Adım 5:buton” katmanının 1.karesine bileşenler panelinden bir buton ekleyin ve ismini (Etiket ismini) “Kırmızı Lamba” olarak, örnek adını da “buton_kirmizi” yapın.

Adım 6:buton” katmanının 2.karesine de bileşenler panelinden bir buton daha ekleyin ( önce F7 ile boş anahtar kare ekleyin.) ve ismini (Etiket ismini) “Sarı Lamba” olarak örnek adını da “buton_sari” olarak değiştirin.

Adım 7:Zaman çizelgesinde “buton” katmanı 1.karedeki “Kırmızı Lamba butonunu” seçin. Eylemler panelinden “Kod Parçacıkları” aracını açın ve “Zaman Çizelgesinde Gezinme/Kareye Gitmek ve Oynatmak için Tıklatın” seçin ve “kodu göstere” tıklayın.

Flash Hazır Kod Parçacıkları
Flash Hazır Kod Parçacıkları

Adım 8: Açılan pencerede kırmızı ile işaretli yerlerden ilki “buton_kirmizi” ön adıyla belirlediğimiz 1.karedeki butonumuz, ikinci kırmızı işaretli yer ise butona tıklatılınca kaçıncı kareye gideceğidir.

Flash Kod Parçacıkları Kareye Gitmek ve Oynatmak için Tıklat
Flash Kod Parçacıkları Kareye Gitmek ve Oynatmak için Tıklat

Adım 9: “buton” katmanı 1.karedeki butona son olarak “Bu Karede Dur” komutunu uygulayalım. “stop();

Flash Kod Parçacıkları Bu Karede Dur
Flash Kod Parçacıkları Bu Karede Dur

Adım 10: Zaman çizelgesinde “buton” katmanı 2.karedeki “Sarı Lamba butonunu” seçin ve Adım 7-8-9’u; örnek adı “buton_sari” ve gidilecek kareyi “gotoAndPlay(1);” olacak şekilde tekrar edin.

Adım 11: Animasyonunuzu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız.

Eylem Kodları İle Etkileşimli Animasyonlar

Eylem Kodları İle Etkileşimli Animasyonlar

İşletmelerde Mesleki Eğitim ( İşletmelerde Beceri Eğitimi ) Arşivi İçin Tıklayınız…

BİR YORUM YAZIN

This site uses Akismet to reduce spam. Learn how your comment data is processed.

ZİYARETÇİ YORUMLARI - 0 YORUM

Henüz yorum yapılmamış.