Bu bölüm, Flash bileşenlerini ve Flash geliştirme aracını kullanarak basit bir ActionScript 3.0 uygulaması oluşturma adımlarına sizi götürür. Bu örnek hem Zaman Çizelgesi'ne dahil edilen ActionScript koduna sahip bir FLA dosyası olarak hem de yalnızca kütüphanedeki bileşenleri içeren bir FLA dosyasına sahip harici bir ActionScript sınıf dosyası olarak sağlanır. Genelde, sınıflar ve uygulamalar arasında kodu paylaşabilmeniz ve uygulamalarınızın bakımını kolaylaştırmanız için harici sınıf dosyalarını kullanarak daha büyük uygulama geliştirmek istersiniz. ActionScript 3.0 ile programlama hakkında daha fazla bilgi için bkz.
ActionScript 3.0'ı Programlama
.
Uygulamanın tasarımı
ActionScript bileşen uygulamasına yönelik ilk örneğimiz, standart "Hello World" uygulamasının bir çeşitlemesi olup bunun tasarımı oldukça basittir:
-
Uygulama, Greetings olarak adlandırılır.
-
Bu, başlangıçta Hello World olan bir selamlamayı görüntülemek için TextArea öğesini kullanır.
-
Metnin rengini değiştirmenize olanak sağlayan ColorPicker öğesini kullanır.
-
Metnin boyutunu küçük, büyük veya daha büyük olarak ayarlamanıza olanak sağlayan üç RadioButton öğesini kullanır.
-
Açılır listeden farklı bir selamlama seçmenize olanak sağlayan ComboBox öğesini kullanır.
-
Uygulama, Bileşenler panelindeki bileşenleri kullanır ve ActionScript kodu üzerinden uygulama öğeleri oluşturur.
Bu tanım yerindeyken uygulama oluşturma işlemine başlayabilirsiniz.
Greetings uygulaması oluşturma
Aşağıdaki adımlar sayesinde, FLA dosyası oluşturmak için Flash geliştirme aracı kullanılarak Greetings uygulaması oluşturulur, Sahne Alanı'na bileşenler yerleştirilir ve Zaman Çizelgesi'ne ActionScript kodu eklenir.
FLA dosyasında Greetings uygulaması oluşturma:
-
Dosya > Yeni'yi seçin.
-
Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.
Yeni bir Flash penceresi açılır.
-
Dosya > Kaydet seçeneklerini belirleyin, Flash dosyasını
Greetings.fla
olarak adlandırın ve Kaydet düğmesini tıklatın.
-
Flash Bileşenleri panelinde bir TextArea bileşenini seçin ve Sahne Alanı'na sürükleyin.
-
Özellikler penceresinde, Sahne Alanı'nda TextArea seçili durumdayken örnek adı için
aTa
yazın ve şu bilgileri girin:
-
W (genişlik) değeri için
230
girin.
-
H (yükseklik) değeri için
44
girin.
-
X değeri (yatay konum) için
165
girin.
-
Y değeri (dikey konum) için
57
girin.
-
Parametreler sekmesi üzerinde, metin parametresi olarak
Hello World!
metnini girin.
-
Bir ColorPicker bileşenini Sahne Alanı'na sürükleyin, TextArea öğesinin soluna yerleştirin ve bu bileşene
txtCp örnek adını verin.
Özellik denetçisinde şu bilgileri girin:
-
X değeri için
96
girin.
-
Y değeri için
72
girin.
-
Üç RadioButton bileşenini Sahne Alanı'na birer birer sürükleyin ve bunlara
smallRb
,
largerRb
ve
largestRb
örnek adlarını verin. Bunlar için Özellik denetçisinde şu bilgileri girin:
-
Her birine W değeri için
100
ve H değeri için
22
girin.
-
X değeri için
155
girin.
-
smallRb'nin Y değeri için
120
, largerRb'nin Y değeri için
148
ve largestRb'nin Y değeri için
175
girin.
-
Her birinin groupName parametresi için
fontRbGrp
girin.
-
Small
,
Larger
,
Largest
öğesinin Paremetreler sekmesinde bunların etiketlerini girin.
-
Bir ComboBox bileşenini Sahne Alanı'na sürükleyin ve bu bileşene
msgCb
örnek adını verin. Bileşen için Özellik denetçisinde şu bilgileri girin:
-
W değeri için
130
girin.
-
X değeri için
265
girin.
-
Y değeri için
120
girin.
-
Parametreler sekmesinde, istem parametresi için
Greetings
girin.
-
Değerler iletişim kutusunu açmak için, dataProvider parametresinin metin alanını çift tıklatın.
-
Artı işaretini tıklatın ve etiket değerinin yerine
Hello World!
öğesini getirin.
-
Önceki adımı
Have a nice day!
ve
Top of the Morning!
etiket değerlerini eklemek için tekrarlayın.
-
Değerler iletişim kutusunu kapatmak için Tamam'ı tıklatın.
-
Dosyayı kaydedin.
-
Açık değilse,
F9
tuşuna basarak veya Pencere menüsünden Eylemler seçeneğini belirleyerek Eylemler panelini açın. Ana Zaman Çizelgesi'nde Kare 1'i tıklatın ve Eylemler paneline şu kodu ekleyin:
import flash.events.Event;
import fl.events.ComponentEvent;
import fl.events.ColorPickerEvent;
import fl.controls.RadioButtonGroup;
var rbGrp:RadioButtonGroup = RadioButtonGroup.getGroup("fontRbGrp");
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
İlk üç satır, uygulamanın kullandığı olay sınıflarını içe aktarır. Kullanıcı bileşenlerden biriyle etkileşim kurduğunda bir olay gerçekleşir. Sonraki beş satır, uygulamanın dinlemek istediği olaylar için olay işleyicilerini kaydeder. Kullanıcı üzerini tıklattığında RadioButton için bir
click
olayı gerçekleşir. Kullanıcı ColorPicker'da farklı bir renk seçtiğinde
change
olayı gerçekleşir. Kullanıcı açılır listeden farklı bir selamlama seçtiğinde, ComboBox'ta
change
olayı gerçekleşir.
Dördüncü satır RadioButtonGroup sınıfını içe aktarır, böylece uygulama her düğmeye ayrı ayrı olay dinleyicisi atamak yerine bir olay dinleyicisini RadioButtons grubuna atayabilir.
-
Uygulamanın TextArea öğesindeki metnin
size
ve
color
stil özelliklerini değiştirmek için kullandığı
tf
TextFormat nesnesini oluşturmak için Eylemler paneline şu kod satırını ekleyin.
var tf:TextFormat = new TextFormat();
-
rbHandler
olay işleme işlevini oluşturmak için şu kodu ekleyin. Bu işlev, kullanıcı RadioButton bileşenlerinden birini tıklattığında
click
olayını işler.
function rbHandler(event:MouseEvent):void {
switch(event.target.selection.name) {
case "smallRb":
tf.size = 14;
break;
case "largerRb":
tf.size = 18;
break;
case "largestRb":
tf.size = 24;
break;
}
aTa.setStyle("textFormat", tf);
}
Bu işlev, olayı tetikleyen RadioButton öğesini belirlemek üzere
event
nesnesinin
target
özelliğini incelemek için bir
switch
ifadesini kullanır.
currentTarget
özelliği, olayı tetikleyen nesnenin adını içerir. Kullanıcının tıklattığı RadioButton öğesine bağlı olarak, uygulama TextArea öğesindeki metnin boyutunu 14, 18 veya 24 nokta olarak değiştirir.
-
ColorPicker'daki değere değişiklik işleyen
cpHandler()
işlevi uygulamak için şu kodu ekleyin:
function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
aTa.setStyle("textFormat", tf);
}
Bu işlev,
tf
TextFormat nesnesinin
color
özelliğini, ColorPicker'da seçilen renge ayarlar ve sonra bunu
aTa
TextArea örneğindeki metne uygulamak için
setStyle()
öğesini çağırır.
-
ComboBox'taki seçime değişiklik işleyen
cbHandler()
işlevi uygulamak için şu kodu ekleyin:
function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.label;
}
Bu işlev, TextArea öğesindeki metnin yerine ComboBox'ta seçili metni (
event.target.selectedItem.label
) getirir.
-
Kodu derleyip Greetings uygulamasını test etmek için Kontrol Et > Filmi Test Et seçeneklerini belirleyin ve Control+Enter tuşlarına basın.
Aşağıdaki bölümde, harici bir ActionScript sınıfı ve yalnızca kütüphanedeki zorunlu bileşenlere sahip bir FLA dosyası ile aynı uygulamanın nasıl oluşturulacağı gösterilmektedir.
Greetings2 uygulamasını bir harici sınıf dosyası ile oluşturma:
-
Dosya > Yeni'yi seçin.
-
Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.
Yeni bir Flash penceresi açılır.
-
Dosya > Kaydet seçeneklerini belirleyin, Flash dosyasını
Greetings2.fla
olarak adlandırın ve Kaydet düğmesini tıklatın.
-
Şu bileşenlerin her birini Bileşenler panelinden kütüphaneye sürükleyin:
-
ColorPicker
-
ComboBox
-
RadioButton
-
TextArea
Derlenen SWF dosyası bu varlıkların her birini kullanır, bu nedenle bunları kütüphaneye eklemeniz gerekir. Bileşenleri Kütüphane panelinin alt kısmına sürükleyin. Bu bileşenleri kütüphaneye eklediğinizde, diğer varlıklar da (List, TextInput ve UIScrollBox gibi) otomatik olarak eklenir.
-
Özellikler penceresinde, Belge Sınıfı için
Greetings2
yazın.
Flash, “belge sınıfı için tanım bulunamıyor,” şeklinde bir uyarı görüntülerse, bu uyarıyı yoksayın. Greetings2 sınıfını sonraki adımlarda tanımlarsınız. Bu sınıf, uygulamanın ana işlevlerini tanımlar.
-
Greetings2.fla dosyasını kaydedin.
-
Dosya > Yeni'yi seçin.
-
Yeni Belge iletişim kutusunda ActionScript Dosyası'nı seçin ve Tamam'ı tıklatın.
Yeni bir komut dosyası penceresi açılır.
-
Şu kodu komut dosyası penceresine ekleyin:
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextFormat;
import fl.events.ComponentEvent;
import fl.events.ColorPickerEvent;
import fl.controls.ColorPicker;
import fl.controls.ComboBox;
import fl.controls.RadioButtonGroup;
import fl.controls.RadioButton;
import fl.controls.TextArea;
public class Greetings2 extends Sprite {
private var aTa:TextArea;
private var msgCb:ComboBox;
private var smallRb:RadioButton;
private var largerRb:RadioButton;
private var largestRb:RadioButton;
private var rbGrp:RadioButtonGroup;
private var txtCp:ColorPicker;
private var tf:TextFormat = new TextFormat();
public function Greetings2() {
Komut dosyası, Greetings2 adında ActionScript 3.0 sınıfını tanımlar. Komut dosyası şunları yapar:
-
Dosyada kullanılacak sınıfları içe aktarır. Normalde, kodda farklı sınıflara başvurduğunuzda bu
içe aktarma
ifadelerini eklersiniz ancak kısa sürmesi için bu örnek tümünü tek bir adımda içe aktarmaktadır.
-
Bu, koda eklenecek farklı bileşen nesnesi türlerini temsil eden değişkenleri bildirir. Başka bir değişken,
tf
TextFormat nesnesini oluşturur.
-
Sınıf için
Greetings2()
yapıcı işlevini tanımlar. Aşağıdaki adımlarda, bu işleve satırlar ekleyeceğiz ve sınıfa da başka yöntemler ekleyeceğiz.
-
Dosya > Kaydet seçeneklerini belirleyin, dosyayı
Greetings2.as
olarak adlandırın ve Kaydet düğmesini tıklatın.
-
Şu kod satırlarını
Greeting2()
işlevine ekleyin:
createUI();
setUpHandlers();
}
Şimdi işlevin şöyle görünmesi gerekir:
public function Greetings2() {
createUI();
setUpHandlers();
}
-
Greeting2()
yönteminin kapanış ayracından sonra şu kod satırlarını ekleyin:
private function createUI() {
bldTxtArea();
bldColorPicker();
bldComboBox();
bldRadioButtons();
}
private function bldTxtArea() {
aTa = new TextArea();
aTa.setSize(230, 44);
aTa.text = "Hello World!";
aTa.move(165, 57);
addChild(aTa);
}
private function bldColorPicker() {
txtCp = new ColorPicker();
txtCp.move(96, 72);
addChild(txtCp);
}
private function bldComboBox() {
msgCb = new ComboBox();
msgCb.width = 130;
msgCb.move(265, 120);
msgCb.prompt = "Greetings";
msgCb.addItem({data:"Hello.", label:"English"});
msgCb.addItem({data:"Bonjour.", label:"Français"});
msgCb.addItem({data:"¡Hola!", label:"Español"});
addChild(msgCb);
}
private function bldRadioButtons() {
rbGrp = new RadioButtonGroup("fontRbGrp");
smallRb = new RadioButton();
smallRb.setSize(100, 22);
smallRb.move(155, 120);
smallRb.group = rbGrp; //"fontRbGrp";
smallRb.label = "Small";
smallRb.name = "smallRb";
addChild(smallRb);
largerRb = new RadioButton();
largerRb.setSize(100, 22);
largerRb.move(155, 148);
largerRb.group = rbGrp;
largerRb.label = "Larger";
largerRb.name = "largerRb";
addChild(largerRb);
largestRb = new RadioButton();
largestRb.setSize(100, 22);
largestRb.move(155, 175);
largestRb.group = rbGrp;
largestRb.label = "Largest";
largestRb.name = "largestRb";
addChild(largestRb);
}
Bu satırlar şunları yapar:
-
Uygulamadan kullanılan bileşenleri başlatır.
-
Her bileşenin boyutunu, konumunu ve özelliklerini ayarlar.
-
addChild()
yöntemini kullanarak her bileşeni Sahne Alanı'na ekler.
-
bldRadioButtons()
yönteminin kapanış ayracından sonra,
setUpHandlers()
yöntemi için şu kodu ekleyin:
private function setUpHandlers():void {
rbGrp.addEventListener(MouseEvent.CLICK, rbHandler);
txtCp.addEventListener(ColorPickerEvent.CHANGE,cpHandler);
msgCb.addEventListener(Event.CHANGE, cbHandler);
}
private function rbHandler(event:MouseEvent):void {
switch(event.target.selection.name) {
case "smallRb":
tf.size = 14;
break;
case "largerRb":
tf.size = 18;
break;
case "largestRb":
tf.size = 24;
break;
}
aTa.setStyle("textFormat", tf);
}
private function cpHandler(event:ColorPickerEvent):void {
tf.color = event.target.selectedColor;
aTa.setStyle("textFormat", tf);
}
private function cbHandler(event:Event):void {
aTa.text = event.target.selectedItem.data;
}
}
}
Bu işlevler, bileşenler için olay dinleyicilerini tanımlar.
-
Dosyayı kaydetmek için Dosya > Kaydet seçeneklerini belirleyin.
-
Kodu derleyip Greetings2 uygulamasını test etmek için Kontrol Et > Filmi Test Et seçeneklerini belirleyin ve Control+Enter tuşlarına basın.
Sonraki örnekleri geliştirip çalıştırın.
Greetings uygulamasını geliştirip çalıştırdıktan sonra, bu kitapta sunulan diğer kod örneklerini çalıştırmak için gereken temel bilgilere sahip olmanız gerekir. Her örnekte ilgili ActionScript 3.0 kodu vurgulanıp ele alınacaktır ve bu kitaptaki örneklerin her birini kesip bir FLA dosyasına yapıştırabilmeniz ve derleyip çalıştırabilmeniz gerekir.
|
|
|