Basit bir uygulama

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:

  1. Dosya > Yeni'yi seçin.

  2. Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.

    Yeni bir Flash penceresi açılır.

  3. Dosya > Kaydet seçeneklerini belirleyin, Flash dosyasını Greetings.fla olarak adlandırın ve Kaydet düğmesini tıklatın.

  4. Flash Bileşenleri panelinde bir TextArea bileşenini seçin ve Sahne Alanı'na sürükleyin.

  5. Ö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.

  6. 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.

  7. Üç 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.

  8. 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.

  9. Dosyayı kaydedin.

  10. 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.

  11. 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();
  12. 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.

  13. 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.

  14. 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.

  15. 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:

  1. Dosya > Yeni'yi seçin.

  2. Yeni Belge iletişim kutusunda Flash Dosyası (ActionScript 3.0) öğesini seçip Tamam'ı tıklatın.

    Yeni bir Flash penceresi açılır.

  3. Dosya > Kaydet seçeneklerini belirleyin, Flash dosyasını Greetings2.fla olarak adlandırın ve Kaydet düğmesini tıklatın.

  4. Ş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.

  5. Ö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.

  6. Greetings2.fla dosyasını kaydedin.

  7. Dosya > Yeni'yi seçin.

  8. Yeni Belge iletişim kutusunda ActionScript Dosyası'nı seçin ve Tamam'ı tıklatın.

    Yeni bir komut dosyası penceresi açılır.

  9. Ş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.

  10. Dosya > Kaydet seçeneklerini belirleyin, dosyayı Greetings2.as olarak adlandırın ve Kaydet düğmesini tıklatın.

  11. Şu kod satırlarını Greeting2() işlevine ekleyin:

        createUI(); 
        setUpHandlers(); 
    }

    Şimdi işlevin şöyle görünmesi gerekir:

    public function Greetings2() { 
        createUI(); 
        setUpHandlers(); 
    }
  12. 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.

  13. 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.

  14. Dosyayı kaydetmek için Dosya > Kaydet seçeneklerini belirleyin.

  15. 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.