Amaç: Bu hafta ActionScript eylemlerini kullanarak karmaşık etkileşim uygulamaları hazırlayabileceksiniz.
KARMAŞIK ETKİLEŞİME GİRMEK
Flash’ın ActionScript dili çok sayıda eylem grubu içermektedir. Bu eylem gruplarıyla ana filmdeki nesneleri düzenlemek, bazı koşulların doğruluğunu test etmek, kullanıcı girdisi oluşturmak, diğer filmlerden ve dosya tiplerinden bilgi almak, XML uygulamalarıyla web tabanlı veri sorgulaması uygulamaları gerçekleştirmek gibi pek çok eylem gerçekleştirilebilir.
Bu tür script’ler yazmanın anahtarı, değişkenlerle (variables) ve ifadelerle (expressions) çalışmaktır. Bu öğeler yardımıyla, kullanıcılara daha doğrudan ve kişisel tepkiler veren siteler yaratabilirsiniz. ActionScript dili yazım biçimi olarak (syntax düzeni) JavaScript dilini andırır. Matematiksel ve mantıksal tüm işaretler ve değişkenler neredeyse JavaScript ile aynıdır.
ActionScript Eylemlerini Kullanarak Çeşitli Uygulamalar Tasarlamak
Uygulama: Veri girişine dayalı bir uygulamanın tasarlanması
1- Yeni bir Flash filmi oluşturunuz.
2- Araç kutusundan metin aracını (Text Tool) seçiniz.
3- Çalışma alanında Yaş, Gün, Ay ve Yıl yazılarını içeren alt alta dizili dört ayrı metin kutusu oluşturunuz.
4- Properties panelinde metin türü olarak Input Text değerini seçiniz ve Yaş, Gün, Ay ve Yıl yazılarını yazdığınız metin kutularının yanında boş metin kutularıoluşturunuz.
KARMAŞIK ETKİLEŞİME GİRMEK
Flash’ın ActionScript dili çok sayıda eylem grubu içermektedir. Bu eylem gruplarıyla ana filmdeki nesneleri düzenlemek, bazı koşulların doğruluğunu test etmek, kullanıcı girdisi oluşturmak, diğer filmlerden ve dosya tiplerinden bilgi almak, XML uygulamalarıyla web tabanlı veri sorgulaması uygulamaları gerçekleştirmek gibi pek çok eylem gerçekleştirilebilir.
Bu tür script’ler yazmanın anahtarı, değişkenlerle (variables) ve ifadelerle (expressions) çalışmaktır. Bu öğeler yardımıyla, kullanıcılara daha doğrudan ve kişisel tepkiler veren siteler yaratabilirsiniz. ActionScript dili yazım biçimi olarak (syntax düzeni) JavaScript dilini andırır. Matematiksel ve mantıksal tüm işaretler ve değişkenler neredeyse JavaScript ile aynıdır.
ActionScript Eylemlerini Kullanarak Çeşitli Uygulamalar Tasarlamak
Uygulama: Veri girişine dayalı bir uygulamanın tasarlanması
1- Yeni bir Flash filmi oluşturunuz.
2- Araç kutusundan metin aracını (Text Tool) seçiniz.
3- Çalışma alanında Yaş, Gün, Ay ve Yıl yazılarını içeren alt alta dizili dört ayrı metin kutusu oluşturunuz.
4- Properties panelinde metin türü olarak Input Text değerini seçiniz ve Yaş, Gün, Ay ve Yıl yazılarını yazdığınız metin kutularının yanında boş metin kutularıoluşturunuz.
5- Yaş kelimesini içeren metin kutusunun yanında oluşturduğunuz Input Text modundaki boş metin kutusunu seçiniz ve Properties panelinde Var: etiketinin yanındaki alana yas değişken değerini giriniz.
6- Aynı şekilde Gün yazısının yanındaki metin kutusunu seçiniz ve Var: etiketinin yanındaki alana gun değişken değerini giriniz. Ay ve Yıl yazılarının yanındaki metin kutularına da sırasıyla değişken adı olarak ay ve yil değerlerini giriniz.
7- Yas değişkenli boş metin kutusunu seçiniz ve metin alanına yazılacak değerin uzunluğunu kısıtlamak için Properties panelinde Maximum Characters: etiketinin yanındaki alana 2 değerini giriniz.
8- Diğer Input Text türündeki metin kutuları için de karakter sınırlaması yapabilirsiniz. yas’, gün’, ay ve yil değişkenli metin kutuları sayısal değerler içereceğinden yanlışlıkla alfa nümerik bir karakterin girişini engellemek için şekilde gösterildiği gibi Character düğmesine tıklayınız ve çıkan iletişim penceresinde Only radyo butonunu, ardından Numerals (0-9) değerini seçiniz.
9- Ok aracını seçiniz ve çalışma alanında boş bir yere tıklayarak üzerinde çalıştığınız metin kutusunu seçili durumdan kurtarınız.
10- Metin aracını seçiniz ve çalışma alanının uygun gördüğünüz bir yerine metin kutusunu çiziniz.
11- Properties panelinde metin türü olarak Dynamic Text değerini seçiniz. Var:etiketinin yanına sanslisayi değişken adını yazınız.
6- Aynı şekilde Gün yazısının yanındaki metin kutusunu seçiniz ve Var: etiketinin yanındaki alana gun değişken değerini giriniz. Ay ve Yıl yazılarının yanındaki metin kutularına da sırasıyla değişken adı olarak ay ve yil değerlerini giriniz.
7- Yas değişkenli boş metin kutusunu seçiniz ve metin alanına yazılacak değerin uzunluğunu kısıtlamak için Properties panelinde Maximum Characters: etiketinin yanındaki alana 2 değerini giriniz.
8- Diğer Input Text türündeki metin kutuları için de karakter sınırlaması yapabilirsiniz. yas’, gün’, ay ve yil değişkenli metin kutuları sayısal değerler içereceğinden yanlışlıkla alfa nümerik bir karakterin girişini engellemek için şekilde gösterildiği gibi Character düğmesine tıklayınız ve çıkan iletişim penceresinde Only radyo butonunu, ardından Numerals (0-9) değerini seçiniz.
9- Ok aracını seçiniz ve çalışma alanında boş bir yere tıklayarak üzerinde çalıştığınız metin kutusunu seçili durumdan kurtarınız.
10- Metin aracını seçiniz ve çalışma alanının uygun gördüğünüz bir yerine metin kutusunu çiziniz.
11- Properties panelinde metin türü olarak Dynamic Text değerini seçiniz. Var:etiketinin yanına sanslisayi değişken adını yazınız.
12- Window → Common Libraries → Buttons komutunu çalıştırınız ve çalışma alanına bir buton yerleştiriniz.
13- Butonu seçiniz. Window → Acitons komutunu çalıştırınız ve karşınıza gelen eylem penceresinde - View Options düğmesine tıklayarak Normal Mode kod yazım modunu seçiniz.
14- Eylem penceresinin sol tarafında yer alan eylem listesinde Actions → Movie Control eylemlerini seçtikten sonra on deyimi üzerine çift tıklayarak kod yazım alanında on(release){ } deyiminin oluşmasını sağlayınız.15- Yine Actions eylem grubunu seçiniz ve çıkan listeden Variables eylem grubunu seçiniz. Bir değişkene değer ataması gerçekleştirmek üzere set variable eylemine çift tıklayınız.
16- Kırmızıyla vurgulanmış <not set yet> (henüz ayarlanmadı) kelimelerini görmeniz gerekir. Bu yazıyı seçiniz ve Variable (Değişken) alanına_root.sanslisayi değişken adını giriniz.17- Value alanına Number(_root.yas) + Number(_root.gun) + Number(_root.ay) + Number(_root.yil) kodunu yazınız. Value alanının sağındaki Expression (İfade) onay kutusunu işaretleyiniz. Böylece bu dört değişkenin içeriğini de toplayacak matematiksel bir ifade oluşturmuş oldunuz.
18- Control menüsünden Test Movie komutunu çalıştırın ve ilgili kutulara değerleri giriniz.19- Sonucu görmek için düğmeye tıklayınız.
Root Deyiminin Sırrı: Burada _root (kök) deyimi atıfta bulunulan değişkeninhiyerarşik düzende çalışma alanının en üst noktasında olduğunu belirtmektedir. Yazmışolduğunuz kod düğme nesnesinin içinde yer aldığı için _root deyiminin yazılmaması durumunda değişkenler düğme nesnesinin içinde aranacaktır. Böylece Flash’a söz konusudeğişkenleri düğme içinde değil, sahnenin kendi zaman doğrusunda aramasını sağlamış oluruz.
DAVRANIŞLAR
Davranışlar, ActionScript kodu yazmaya gerek bırakmadan flash filmlerine etkileşimkazandıran bir yöntemdir.
Uygulama: Davranış kullanarak bir video filmini kontrol etmek
1- Yeni bir Flash belgesi açınız ve kütüphane (Library) penceresini açaraksimgesine tıklayınız.
2- Çıkan menüden New Video komutunu veriniz ve açılan Video Propertiespenceresinde Embedded (synchronized with Timeline) değerini seçiniz.
3- Import düğmesine tıklayınız ve kütüphane listesine ekleyeceğiniz video dosyasınıseçiniz.
4- Listeden video simgesini seçiniz ve sahneye sürükleyiniz.
5- Window → Common Libraries → Buttons komutuyla düğmeler penceresiniaçınız ve listeden playback rounded düğme grubuna sağ tıklayarak ExpandFolder komutunu veriniz.
6- Çıkan listeden play ve stop düğmelerini sahneye sürükleyiniz.
7- Play düğmesini seçiniz ve Window → Behaviors komutunu veriniz.
8- Davranış ekle (Add Behavior) simgesine tıklayınız ve çıkan listeden EmbeddedVideo → Play değerini seçiniz.
13- Butonu seçiniz. Window → Acitons komutunu çalıştırınız ve karşınıza gelen eylem penceresinde - View Options düğmesine tıklayarak Normal Mode kod yazım modunu seçiniz.
14- Eylem penceresinin sol tarafında yer alan eylem listesinde Actions → Movie Control eylemlerini seçtikten sonra on deyimi üzerine çift tıklayarak kod yazım alanında on(release){ } deyiminin oluşmasını sağlayınız.15- Yine Actions eylem grubunu seçiniz ve çıkan listeden Variables eylem grubunu seçiniz. Bir değişkene değer ataması gerçekleştirmek üzere set variable eylemine çift tıklayınız.
16- Kırmızıyla vurgulanmış <not set yet> (henüz ayarlanmadı) kelimelerini görmeniz gerekir. Bu yazıyı seçiniz ve Variable (Değişken) alanına_root.sanslisayi değişken adını giriniz.17- Value alanına Number(_root.yas) + Number(_root.gun) + Number(_root.ay) + Number(_root.yil) kodunu yazınız. Value alanının sağındaki Expression (İfade) onay kutusunu işaretleyiniz. Böylece bu dört değişkenin içeriğini de toplayacak matematiksel bir ifade oluşturmuş oldunuz.
18- Control menüsünden Test Movie komutunu çalıştırın ve ilgili kutulara değerleri giriniz.19- Sonucu görmek için düğmeye tıklayınız.
Root Deyiminin Sırrı: Burada _root (kök) deyimi atıfta bulunulan değişkeninhiyerarşik düzende çalışma alanının en üst noktasında olduğunu belirtmektedir. Yazmışolduğunuz kod düğme nesnesinin içinde yer aldığı için _root deyiminin yazılmaması durumunda değişkenler düğme nesnesinin içinde aranacaktır. Böylece Flash’a söz konusudeğişkenleri düğme içinde değil, sahnenin kendi zaman doğrusunda aramasını sağlamış oluruz.
DAVRANIŞLAR
Davranışlar, ActionScript kodu yazmaya gerek bırakmadan flash filmlerine etkileşimkazandıran bir yöntemdir.
Uygulama: Davranış kullanarak bir video filmini kontrol etmek
1- Yeni bir Flash belgesi açınız ve kütüphane (Library) penceresini açaraksimgesine tıklayınız.
2- Çıkan menüden New Video komutunu veriniz ve açılan Video Propertiespenceresinde Embedded (synchronized with Timeline) değerini seçiniz.
3- Import düğmesine tıklayınız ve kütüphane listesine ekleyeceğiniz video dosyasınıseçiniz.
4- Listeden video simgesini seçiniz ve sahneye sürükleyiniz.
5- Window → Common Libraries → Buttons komutuyla düğmeler penceresiniaçınız ve listeden playback rounded düğme grubuna sağ tıklayarak ExpandFolder komutunu veriniz.
6- Çıkan listeden play ve stop düğmelerini sahneye sürükleyiniz.
7- Play düğmesini seçiniz ve Window → Behaviors komutunu veriniz.
8- Davranış ekle (Add Behavior) simgesine tıklayınız ve çıkan listeden EmbeddedVideo → Play değerini seçiniz.
9- Play video penceresi ekrana gelir. Pencere listesinden kamera simgesini seçiniz. Eğer sahneye eklediğiniz video görüntüsüne bir örnek adı (instance name) vermediyseniz, Instance Name penceresi ekrana gelir.
10- Örnek adı olarak video yazınız. İşlemlerinizi onaylayınız. Behaviors penceresine On Release | Play… davranışının eklenmiş olması gerekir.
11- Stop düğmesini seçiniz ve 7.,8.,9. adımları tekrarlayınız. Ancak play davranışı yerine stop davranışını seçiniz.
12- Filminizi oynatınız. Durdur ve oynat düğmeleriyle video filminin kontrol edildiğini görmeniz gerekir. Oynat düğmesini seçiniz ve Actions panelini açınız. Aşağıdakine benzer davranış kodunu görmeniz gerekir.
Uygulama-7.6: Davranış kullanarak JPEG resim yüklemek
1- Yeni bir Flash belgesi ve ardından Davranışlar penceresini (Behaviors) açınız.
Davranış ekleme ( ) simgesine tıklayınız.
2- Çıkan menüden Movieclip → Load Graphic değerini seçiniz.
3- Load Graphic penceresinde Enter the URL to the JPG to load metin kutusuna
yüklemek istediğiniz JPG dosyasının adını yazınız. Filmi oynattığınızda resmin
flash oynatıcısında gözükmesi gerekir.
10- Örnek adı olarak video yazınız. İşlemlerinizi onaylayınız. Behaviors penceresine On Release | Play… davranışının eklenmiş olması gerekir.
11- Stop düğmesini seçiniz ve 7.,8.,9. adımları tekrarlayınız. Ancak play davranışı yerine stop davranışını seçiniz.
12- Filminizi oynatınız. Durdur ve oynat düğmeleriyle video filminin kontrol edildiğini görmeniz gerekir. Oynat düğmesini seçiniz ve Actions panelini açınız. Aşağıdakine benzer davranış kodunu görmeniz gerekir.
on (release) {
Play video Behavior
if(this.video._parent._currentframe == this.video._parent._totalframes){
this.video._parent.gotoAndPlay(1);
} elske {
this.video._parent.play();
}
}
Kodu kısaca açıklamak gerekirse; on(release) eylem yöneticisiyle fare tuşunun tıklama hareketi denetlenmektedir. Tuşa tıklanıp bırakıldığında if…else karşılaştırma yapısıyla video isimli videonun o andaki karesinin (currentframe) nerede olduğu kontrol edilir. Eğer o andaki kare son karedeyse (_totalframes toplam kare sayısını verir) 1. kareye gidilir ve video baştan (gotoAndPlay(1)) oynatılır. Aksi takdirde (else) video oynatılmaya devam eder.
Play video Behavior
if(this.video._parent._currentframe == this.video._parent._totalframes){
this.video._parent.gotoAndPlay(1);
} elske {
this.video._parent.play();
}
}
Kodu kısaca açıklamak gerekirse; on(release) eylem yöneticisiyle fare tuşunun tıklama hareketi denetlenmektedir. Tuşa tıklanıp bırakıldığında if…else karşılaştırma yapısıyla video isimli videonun o andaki karesinin (currentframe) nerede olduğu kontrol edilir. Eğer o andaki kare son karedeyse (_totalframes toplam kare sayısını verir) 1. kareye gidilir ve video baştan (gotoAndPlay(1)) oynatılır. Aksi takdirde (else) video oynatılmaya devam eder.
Uygulama-7.6: Davranış kullanarak JPEG resim yüklemek
1- Yeni bir Flash belgesi ve ardından Davranışlar penceresini (Behaviors) açınız.
Davranış ekleme ( ) simgesine tıklayınız.
2- Çıkan menüden Movieclip → Load Graphic değerini seçiniz.
3- Load Graphic penceresinde Enter the URL to the JPG to load metin kutusuna
yüklemek istediğiniz JPG dosyasının adını yazınız. Filmi oynattığınızda resmin
flash oynatıcısında gözükmesi gerekir.
ÖLÇME VE DEĞERLENDİRME
1. Bir metin kutusuna veri gönderilebilmesi için aşağıdaki işlemlerden hangisi yapılmalıdır?
A) Metin kutusu seçilir ve dinamik (Dynamic) metin biçimine ayarlanır. Var alanına bir değişken değeri girilir.
B) Metin kutusu durgun (Static) metin biçimine ayarlanır. Hypermetin alanına bir değişken adı yazılır.
C) Metin kutusu giriş (Input) metin biçimine ayarlanır. Var alanına bir değişken değeri girilir.
D) Bütün metin türlerine değer gönderilebilir. Bir işlem yapılmasına gerek yoktur.
2. Movie Clip nesnelerinde eylem denetleyicisi olarak hangi deyim kullanılır?
A) on()
B) fscommand()
C) setProperty()
D) onClipEvent()
3. Bir Flash filminde yüklenen toplam byte miktarını ölçmek için hangi komut kullanılır?
A) getBytesLoaded()
C) _framesloaded
B) getBytesTotal()
D) _totalframes
4. Bir Flash filminde belli bir süreye kadar yüklenen kare sayısı hangi komutla hesaplanır?
A) getBytesLoaded()
C) _framesloaded
B) getBytesTotal()
D) _totalframes
5. Aşağıdaki komutlardan hangisi yeterli sayıda kareden oluşan bir Flash filminin 20. kareden itibaren oynatılmasını sağlar?
A) gotoAndStop(20)
C) stop(20)
B) play(20)
D) gotoAndPlay(20)