Grafik ve Animasyon Adobe Flash Hafta-10

Adobe Flash Bileşen Uygulamaları

Grafik ve Animasyon Adobe Flash Hafta-10 dersimizde sık kullanılan flash bileşenlerini (button, checkbox, combobox, radiobutton) ActionScript kodları ile nasıl yönetebileceğimizi öğreneceğiz.

Uygulama 1: Buton Tıklamasıyla Kareler Arası Geçiş

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ı “emoji” olarak değiştirin. Emojileri buradan indirebilirsiniz. Emoji-1 indir. Emoji-2 indir.

Adım 3: “emoji” katmanı 1.kareye Emoji-1’i, 2. kareye de ( önce F7 ile boş anahtar kare ekleyin.) Emoji-2’yi ekleyin. Emojilerin boyutlarını ayarlayın ve sahnenin tam ortasına hizalayın. (Boyutları ayarlarken en/boy oranlarını kilitleyin daha sonra ayarları aşağıdaki gibi 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) “İleri“, örnek adını da “buton_ileri” 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) “Geri“, örnek adını da “buton_geri” olarak değiştirin.

Adım 7: Zaman çizelgesinde “buton” katmanı 1.karedeki “İleri” 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.

Adım 8: Açılan pencerede “Ekle” düğmesine basın ve “Eylemler” Paneline gidin. Eylemler panelindeki kodları inceleyin ve açıklama satırlarını silin (sade olması için). İleri butonuna ait kodlar aşağıdaki gibi olmalıdır. Not: “ileri_git” bizim belirlediğimiz fonksiyon ismidir. Hazır kod parçacığındaki fonksiyonun adı “fl_ClickToGoToAndPlayFromFrame_1” bunun gibidir. Bu ismin anlaşılır olması için “fl_ClickToGoToAndPlayFromFrame_1” ismini silip yerine “ileri_git” yazdık.

buton_ileri.addEventListener(MouseEvent.CLICK, ileri_git);
function ileri_git(event:MouseEvent):void
{
	gotoAndPlay(2);
}

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

buton_ileri.addEventListener(MouseEvent.CLICK, ileri_git);
function ileri_git(event:MouseEvent):void 
{ 
        gotoAndPlay(2);
} 
stop();

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

Adım 11: “Eylemler” Paneline gidin. Eylemler panelindeki kodları inceleyin ve açıklama satırlarını silin (sade olması için). Geri butonuna ait kodlar aşağıdaki gibi olmalıdır. Not: “geri_git” bizim belirlediğimiz fonksiyon ismidir. Hazır kod parçacığındaki fonksiyonun adı “fl_ClickToGoToAndPlayFromFrame_1” bunun gibidir. Bu ismin anlaşılır olması için “fl_ClickToGoToAndPlayFromFrame_1” ismini silip yerine “geri_git” yazdık.

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

buton_geri.addEventListener(MouseEvent.CLICK, geri_git);
function geri_git(event:MouseEvent):void 
{ 
        gotoAndPlay(1);
} 
stop();

Adım 13: Animasyonunuzu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız. Sonuç aşağıdakine benzer olmalıdır. Not: Flash uygulamasını göremiyorsanız “Adobe Flash Player eklentisini etkinleştirmek için tıklayın” yazan yere tıklayın ve açılan pencereden izin ver’e tıklayın.

ActionScript Buton Bileşeni ile Kareler Arası Geçiş Uygulaması Dosyalarını indir. (FLA-SWF)

Uygulama 2: RadioButton Bileşenini Kullanarak Sınav Sorusu Hazırlama

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

Adım 2: Katmanın adını “soru” olarak değiştirin ve bu katmana soruyu yazmak için 1 tane Klasik-Statik Metin (Text), cevaplar için 4 tane RadioButton, verilen cevabın doğru mu yanlış mı olduğu bildirimi için 1 tane de Klasik-Dinamik Metin (Text) ekleyin. Sahnemizin görünümü aşağıdakine benzer olacaktır.

Adım 3: Sahneye eklediğimiz RadioButton’ların “Örnek Adlarını” sırası ile “radio1”,
“radio2”,“radio3” ve “radio4” olarak değiştirelim.

Adım 4: Sahneye eklediğimiz Klasik-Dinamik Metnin Örnek Adını da “mesaj” olarak değiştirelim.

Adım 5: “radio1” örnek adlı radiobutton’u seçelim ve “Eylemler Paneli/Kod Parçacıkları/Olay İşleyiciler/Fare Tıklatma Olayını” seçelim veya çift tıklayalım ve kodu Eylemler Panelinden aşağıdaki gibi düzenleyelim.

radio1.addEventListener(MouseEvent.CLICK, cevap1);
function cevap1(event:MouseEvent):void
{
	mesaj.text="Cevabınız: Doğru";
}

Adım 6: Eylemler panelinden “radio1” radio butonuna ait kodları diğer radio butonlar için kopyalayın, gerekli değişiklikleri yapalım (radio2, radio3, radio4 ve mesaj yazısı). Kodların son hali aşağıdaki gibi olacaktır.
Not: “cevap1“, “cevap2“, “cevap3“, “cevap4” bizim belirlediğimiz fonksiyon isimleridir. Hazır kod parçacığındaki fonksiyonun adı “fl_MouseClickHandler_1” bunun gibidir. Bu ismin anlaşılır olması için “fl_MouseClickHandler_1” ismini silip yerine “cevap1“, diğerleri için de “cevap2“, “cevap3“, “cevap4” yazdık.

radio1.addEventListener(MouseEvent.CLICK, cevap1);
function cevap1(event:MouseEvent):void
{
	mesaj.text = "Cevabınız: Doğru";
}

radio2.addEventListener(MouseEvent.CLICK, cevap2);
function cevap2(event:MouseEvent):void
{
	mesaj.text = "Cevabınız: Yanlış";
}

radio3.addEventListener(MouseEvent.CLICK, cevap3);
function cevap3(event:MouseEvent):void
{
	mesaj.text = "Cevabınız: Yanlış";
}

radio4.addEventListener(MouseEvent.CLICK, cevap4);
function cevap4(event:MouseEvent):void
{
	mesaj.text = "Cevabınız: Yanlış";
}

Adım 7: Animasyonunuzu test etmek için “Ctrl + Enter”  tuş kombinasyonunu kullanınız. Sonuç aşağıdakine benzer olmalıdır. Not: Flash uygulamasını göremiyorsanız “Adobe Flash Player eklentisini etkinleştirmek için tıklayın” yazan yere tıklayın ve açılan pencereden izin ver’e tıklayın.

ActionScript RadioButton Uygulaması Dosyalarını indir. (FLA-SWF)