WaTcHFuL
EVERYWHERE
- Katılım
- 10 Kas 2005
- Mesajlar
- 10,456
- Reaction score
- 0
- Puanları
- 0
Diğer kodlarda olduğu gibi Flash bileşenlerine ait tüm kodlar Actionscript 3 `de değiştirilmiştir. Bu bölümde tüm Flash CS3 bileşenlerinin nasıl kullanılacağını basit örneklerle anlatacağız. Bu arada kullanılan kod gruplarında Flash`ın diğer temel kod gruplarındaki değişiklikleri de görme şansına ulaşacaksınız.
User InterFace Örnekleri
Flash CS3 Button Component:
Actionscript3 versiyonunda hemen tüm kodlar diğer versiyona göre tamamen değişmiştir. Yeni bileşen kodları anlatılırken klasik flash kodlarındaki değişimleri de görme şansınız olacaktır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir button bileşenini sahneye sürükleyip bırakın. Properties panelinden butonumuz ismini atayın.
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın(açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
function url_ac(event:MouseEvent):void {
var link:URLRequest = new URLRequest("http://www.flashokulu.com/");
navigateToURL(link);
}
butonumuz.addEventListener(MouseEvent.CLICK, url_ac);
Önce butona tıkladığınızda çalışmasını istediğiniz kod grubunu yazmalısınız.Bizim istediğimiz tıklama sonrası bir web sayfasının açılmasıdır.Fonksiyon yapısı aslında cs3 versiyonunda aynıdır.Parantez içine fonksiyonun çağrılma yöntemi yazılmaktadır.Biz bir mouse olayı yapacağımızdan bunu belirtmek için event:MouseEvent yazıyoruz.Buradaki void fonksiyon çağrıldığında bir değer dönmeyecekse eklenir. Fonksiyon içindeki:
var link:URLRequest = new URLRequest("http://www.flashokulu.com/");
navigateToURL(link);
kod dizisi actionscript 2 `ki getURL("http://www.flashokulu.com/"); kodunun tam karşılığıdır. Yani artık bir yeni sayfa açmak isterseniz bu yeni kod grubunu kullanmalısınız.
butonumuz.addEventListener(MouseEvent.CLICK, url_ac); bu dizin ile foksiyonumuzu butonumuza atıyoruz. Burada değişiklik parantez içindeki dizilimdir.Mouse olaylarından hangisini kullanmak istiyorsak onu yazıyoruz.Burada istediğimiz butona tıklama olayını yaratmaktır ve bunu MouseEvent.CLICK kodu ile tanımlamaktayız. Diğer mouse olayları yeri geldiğinde örneklerle anlatılacaktır. Daha sonra bir virgül karakteri ekleyip çalışmasını istediğiniz fonksiyonun adını yazıyoruz.
NOT= Küçük bir uyarı yapmak istiyorum.Flash CS3 de Artık semboller üzerine kod yazma şansımız kaldırılmıştır. Tüm kodlar sembole instance name atadıktan sonra timeline üzerine yazılacaktır.
Flash CS3 CheckBox Component:
Bu bölümde 2 checkBox ve bir button component kullanarak seçilen bir web sayfasını açma yönteminden bahsedilecektir.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir button ve iki checkBox bileşenini sahneye sürükleyip bırakın. Properties panelinden checkBox`lardan birine kutu1, diğerine kutu2 ismini, button bileşenine ise buton ismini atayın.
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın(açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
function check1(event:MouseEvent):void {
kutu2.selected=false;
}
function check2(event:MouseEvent):void {
kutu1.selected=false;
}
kutu1.addEventListener(MouseEvent.CLICK, check1);
kutu2.addEventListener(MouseEvent.CLICK, check2);
function url_ac(event:MouseEvent):void {
if(kutu1.selected==true){
var linkimiz:URLRequest = new URLRequest("http://www.flashokulu.com");
navigateToURL(linkimiz);
}
if(kutu2.selected==true){
var linkimiz1:URLRequest = new URLRequest("http://www.mmistanbul.com");
navigateToURL(linkimiz1);
}
}
buton.addEventListener(MouseEvent.CLICK, url_ac);
Button component`te bahsedildiği gibi fonksiyon yapısı aslında cs3 versiyonunda aynıdır.Parantez içine fonksiyonun çağrılma yöntemi yazılmaktadır.Biz bir mouse olayı yapacağımızdan bunu belirtmek için event:MouseEvent yazıyoruz.Buradaki void fonksiyon çağrıldığında bir değer dönmeyecekse eklenir.
function check1(event:MouseEvent):void {
kutu2.selected=false;
}
function check2(event:MouseEvent):void {
kutu1.selected=false;
}
check1 fonksiyonu 1.checkBox, check2 fonksiyonu ise 2.checkBox tıklandığında çalışacaktır.
kutu1 veya kutu2 .selected=false; kodlarının amacı birden fazla kutu işaretlenmesini önlemek içindir.Önce kutu1 seçildikten sonra kullanıcı daha sonra kutu2 yi seçerse bu kodlar sayesinde kutu1 deki check işareti kalkacaktır. Şayet bu kodları yazmazsanız birden fazla kutu seçilmiş olur.
kutu1.addEventListener(MouseEvent.CLICK, check1);
kutu2.addEventListener(MouseEvent.CLICK, check2);
bu dizinler ile foksiyonlarımızı heriki kutuya atıyoruz. Actionscript3 de addEventListener kodunda değişiklik yapılmıştır Değişiklik parantez içindeki dizilimdir.Mouse olaylarından hangisini kullanmak istiyorsak onu yazıyoruz.Burada istediğimiz kutuya tıklama olayını yaratmaktır ve bunu MouseEvent.CLICK kodu ile tanımlamaktayız. Diğer mouse olayları yeri geldiğinde örneklerle anlatılacaktır. Daha sonra bir virgül karakteri ekleyin çalışmasını istediğiniz fonksiyonun adını yazıyoruz.
Buraya kadar yapılanlar checkBox bileşenlerinen birini kullanıcıya seçme şansı vermeyi sağlamaktadır.Şimdi butona bu seçime ait ilgili sayfayı açma kodlarını atayacağız.
function url_ac(event:MouseEvent):void {
if(kutu1.selected==true){
var linkimiz:URLRequest = new URLRequest("http://www.flashokulu.com");
navigateToURL(linkimiz);
}
if(kutu2.selected==true){
var linkimiz1:URLRequest = new URLRequest("http://www.mmistanbul.com");
navigateToURL(linkimiz1);
}
}
buton.addEventListener(MouseEvent.CLICK, url_ac);
Bu kodlar button component kısmında anlatıldı . İsterseniz linke tıklayarak gözatabilirsiniz. Kodlarda gördüğünüz gibi if gibi sorgu kalıpları actionscript2 deki gibidir. kutu1.selected==true sorgusuyla birinci kutu seçilmişse şu linki aç, şayet kutu2.selected==true ; kutu2 seçilmişse bu linki aç denilmektedir.
Flash CS3 ColorPixer Component:
Bu bölümde dinamik olarak çizilmiş bir klip rengini ColorPixer bileşeni ile değiştirme yöntemini göreceğiz.
Uygulama:
1- Flash programını açıp sahnenin sağ yanına components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir colorPixer çekip bırakın. Properties panelinden ismini renkKutusu olarak atayın
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın (açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
import fl.events.ColorPickerEvent;
var kutu:MovieClip = new MovieClip();
kutuCiz(kutu, 0xFF0000);
addChild(kutu);
renkKutusu.addEventListener(ColorPickerEvent.CHANGE,renkDegistir);
function renkDegistir(event:ColorPickerEvent):void {
kutuCiz(kutu, event.target.selectedColor);
}
function kutuCiz(film:MovieClip,renk:uint):void {
film.graphics.beginFill(renk, 1);
film.graphics.drawRect(10, 10, 75, 50);
film.graphics.endFill();
}
Yeni bir bileşen olan ColorPixer bileşen kodları şu şekilde açıklamak mümkün:
import fl.events.ColorPickerEvent; Artık çok iyi alışmamız gereken bir kod grubu. Bu kod ile bileşene ait tüm olayları çağırmış oluyoruz. Bu kod grubunu çağırmazsanız biraz sonra anlatacağımız Change olayını çalıştırmanız mümkün olmaz. Bileşene ait olayları 4 grupta toplayabiliriz:
-ColorPickerEvent.CHANGE: Kullanıcı bileşende farklı bir renge tıkladığı zaman çalışır.
-ColorPickerEvent.ENTER: Kullanıcı bileşen üzerinde farklı bir renk üzerine fare imleçini getirip klavyeneb enter tuşuna bastığında çalışır.
-ColorPickerEvent.ITEM_ROLL_OUT: Kullanıcı bileşen üzerinde farklı bir renk üzerine fare imlecini getirdikten sonra imleci bu renk üzerinde ayırdığı an çalışır
-ColorPickerEvent.ITEM_ROLL_OVER: Kullanıcı bileşen üzerinde farklı bir renk üzerine fare imlecini getirdiği an çalışır
var kutu:MovieClip = new MovieClip();
kutuCiz(kutu, 0xFF0000);
addChild(kutu);
Üstteki kod grubu ile dinamik bir film klibi çiziyoruz ve rengini kırmızı olarak değiştiriyoruz. Bu renk dinamik çizimle sağlanan klibin sahnede ilk görüldüğü renktir. Buradaki kutuCiz bir fonksiyondur.Üstteki kodların en alt kısmında klibin dinamik çizimini sağlayan bir fonksiyondur.Bu fonksiyondaki renk parametresine 0xFF0000 yani kırmızı renk atayarak ilk görünen dinamik çizimi sağlar. addChild(kutu); Alışmanız gereken diğer bir kod grubuda budur.Tüm dinamik yöntem kullandığınız çalışmalarda bu kod grubunu kullanmak zorundasınız.Bu dinamik yöntemler sembol,çizim,metin kutusu veya bileşen ekleme olabilir. addChild kodu ile kutu isimli klibe bir üstte yazılan fonksiyonlara ait özellikler atanmış olur.
function renkDegistir(event:ColorPickerEvent):void {
kutuCiz(kutu, event.target.selectedColor);
}
Gördüğünüz gibi bu fonksiyon parantez içinde belirtilen Renk Kutusu bileşenine ait bir olay ile ( yani change=tıklama yöntemi ile) çalıştırılabilen bir fonksiyondur.Bu fonksiyon başka bir fonksiyonu çağırmaktadır.Çağrılan bu fonksiyonla parantez içinde yazılmış olan kutu adlı klibin rengini event.target.selectedColor komutu ile (Bu komut renk kutusunu tıkladığımızda o renge ait değeri döndürür) seçtiğimiz renge çevirir.
function kutuCiz(film:MovieClip,renk:uint):void {
film.graphics.beginFill(renk, 1);
film.graphics.drawRect(10, 10, 75, 50);
film.graphics.endFill();
}
İki kez çağrılan fonksiyon kodları üstteki gibidir. Fonksiyonun 2 parametresi vardır.Film fonksiyonun atanacağı sembolün bir film klibi olacağını ,renk ise kliplerin rengini oluşturacak değerleri taşıyacaktır. uint sınıfı bize 32-bit tamsayı taşıyan veri tipleri ile çalışmamızı sağlayan bir sınıftır. uint ile verilebilecek tamsayı değerleri 0 ile 4.294.967.295 rasında değişir.Ve özellikle pixel renk değerleri için kullanılırlar.Diğer kodlar bir dikdörtgen çizimini yapan as2 ye göre biraz değişmiş olduğunu gördüğünüz kod grubudur. film.graphics.beginFill(renk, 1);Burada gördüğünüz gibi bir renk ataması kullanılmamış ve renk değişkeni yazılmıştır.Film klibi ilk yüklendiğinde başta anlattığım gibi önce kutuÇiz isimli bir fonksiyon bu fonksiyonu çağırmakta idi.İki dizini alt alta koyup bakarsanız kutuCiz fonksiyonu çağrıldığında renk değişkenine kırmızı renk atandığını görürsünüz.
film.graphics.beginFill(renk, 1);
kutuCiz(kutu, 0xFF0000);
Bu nedenle ilk renk kırmızı olmaktadır.Daha sonra renk kutusundan bir renk çağrıldığında event.target.selectedColor ile elde edilen değer renk değişkenine atanıp kutu klibinin rengini değiştirmiştir.
Flash CS3 ComboBox Component:
Bu bölümde tamamen dinamik yöntemle combobox hazırlama ve herbir elemandan farklı bir web sayfası açma yönteminden bahsedilecektir. Kullanılacak olan yöntemde combobox için kullanılanacak kodların büyük bir kısmı eklenmeye çalışılmıştır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir combobox bileşenini sahneye sürükleyip bırakın.
2- Sahnedeki bu componenti seçip delete tuşuna basarak silin.Şu an sahnede hiçbir eleman yoktur.Ama kütüphaneyi açıp bakarsanız componentin burada durduğunu görürsünüz. İşte biz bu componenti dinamik yöntemle kodlarla çağırıp kullanacağız.Timeline üzerindeki mevcut tek kareyi tıklayarak seçip actionscript panelini açın ve şu kodları ekleyip filmi test edin:
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var aramamotorlari:Array = new Array(
{label:"Google",data:"http://www.google.com.tr/"}, {label:"Yahoo",data:"http://www.yahoo.com/"},
{label:"Netbul",data:"http://www.netbul.com/"}, {label:"Arabul",data:"http://www.arabul.com/"},
{label:"Altavista", data:"http://www.altavista.com/"}, {label:"Hemenbul", data:"http://www.hemenbul.com/"}
);
var combo:ComboBox = new ComboBox();
combo.dropdownWidth = 160;
combo.width = 150;
combo.move(10,10);
combo.prompt = "Bir arama motoru seçiniz";
combo.dataProvider = new DataProvider(aramamotorlari);
combo.addEventListener(Event.CHANGE, linkeGit);
addChild(combo);
function linkeGit(olay:Event):void {
var link:URLRequest = new URLRequest();
link.url = ComboBox(olay.target).selectedItem.data;
navigateToURL(link);
combo.selectedIndex = -1;
}
Filmi test ettiğinizde bileşene ait bir elemanı tıkladığınızda ilgili web sayfasını açabilirsiniz.
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL; Burada 3 sınıfa ait tüm kodlar sahneye import edilmektedir. Actionscript 3 de hangi yöntem olursa olsun bir dinamik çalışma yapacaksanız mutlaka ilgili sınıfı sahneye import etmelisiniz. Burada tüm combobox kontrol kodları, dataprovider(veri sağlayıcı:Bu bileşene ait elemanları ve ona ait verileri oluşturur) ve navigateToURL (ilgili url adresine gitmek için gereken kodları) sınıfı sahneye import edilmiştir.
var aramamotorlari:Array = new Array(
{label:"Google",data:"http://www.google.com.tr/"}, {label:"Yahoo",data:"http://www.yahoo.com/"},.............................
Burada bir dizi oluşturulmaktadır.Dizinin her elemanı 2 bölüm içermektedir.İlki combobox açıldığında görülen label isimleri, diğeri bu ismlere ait data değerleridir.data değerleri ilgili label tıklandığında gidilecek adresin ismini barındırmaktadır.
var combo:ComboBox = new ComboBox(); şayet sahnedeki combobox`u silmeyip bir isim atasaydık bu koda gerek kalmazdı. Ama biz kütüphanedeki bileşeni ancak bu komut ile çağırabiliyoruz.Dikkat ettiyseniz ona combo şeklinde bir isim de atanmıştır.
combo.dropdownWidth = 160; menü tıklanarak açıldığında bu bileşene ait alt elemanları içeren panelin genişlik değeri atanıyor(opsiyonel bir koddur)
combo.width = 150;
combo.move(10,10); Bileşenin genişiliği ve swf dosyası açıldığında bileşenin x ve y koordinatı atanıyor. Opsiyoneldir , yazmazsanız varsyılan değerler atanır.
combo.prompt = "Bir arama motoru seçiniz"; Opsiyoneldir.Bir başlık olmasını istiyorsanız yazabilirsiniz.
combo.dataProvider = new DataProvider(aramamotorlari); Dizi elemanları ve data değerleri bileşene aktarılıyor.
combo.addEventListener(Event.CHANGE, linkeGit); Bileşene ait eleman tıklandığında linkeGit isimli fonksiyonu çalıştırıyor.
addChild(combo); Dinamik bir çalışma yapmak için import komutundan sonra şart olan ikinci komut bu.Üstte yazılan tüm kodların çalışması için combo ismi verilen bu bileşene addChild komutu eklenmelidir.Bu kod sahneye bileşen eklenip properties panelinden isimlendirildiğinde kullanılmazlar.Sadece dinamik çalışmalar içindir.
Herşey tamam, geriye sadece tıklandığında çalıştırılacak fonksiyonun yazılması kaldı.
function linkeGit(olay:Event):void {
var link:URLRequest = new URLRequest();
link.url = ComboBox(olay.target).selectedItem.data;
navigateToURL(link);
combo.selectedIndex = -1;
}
Fonksiyonda parantez içinde ne amaç için kullanıldığı yazılır.Void daha önce söylenmişti. var link:URLRequest = new URLRequest(); bu dizinde diğer örneklerde vardı.Bir link içerecek olan değişkenimiz atanır.
link.url = ComboBox(olay.target).selectedItem.data;Bu dizin combobox ismine tıklandığında o ismi ait atanmış olan değeri yani dizi oluşturduğumuzda data: den sonra yazılan kısmı atar. Bu actionscript2 deki combo.selectedItem.data dizinine eşdeğerdir.
navigateToURL(link); bu dizin ilgili sayfaya ait adresin atanmasını sağlar.
combo.selectedIndex = -1; Bu opsiyonel bir koddur.Yazılmazsa varsayılan işlem yapılır.Varsayılan işlemde şu olur: Combobox açılıp diyelim 2.elemanı tıkladınız.Tıklama sonrası bu eleman ismi en üste gelir ve bir arama motoru seçiniz yazısının yerini alır.Bu değer için örneğin 1 yazarsak: İlk eleman sıfırıncı elemandır.2.eleman ise 1 nolu elemandır.Hangi seçeneği tıklarsanız tıklayın , tıklama sonrası bir arama motoru seçin yazının yerini bu eleman adı alır.Şayet bizim yaptığımız gibi -1 yazarsanız hiçbir değişiklik olmaz.Menüde nereyi tıklarsanız tıklayın bir arama motoru seçin yazısı sabit kalır.
Flash CS3 DataGrid Component:
Bu bölümde 2 sütunlu verilere sahip dataGrid component hazırlama yöntemini göreceğiz.
Uygulama:
1- Flash programını açıp sahnenin sağ yanına components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir dataGrid çekip bırakın. Properties panelinden ismini dataKutu olarak atayın
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın (açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
var birinci
ataGridColumn = new DataGridColumn("Kitap");
var ikinciataGridColumn = new DataGridColumn("Fiyat");
dataKutu.addColumn(birinci);
dataKutu.addColumn(ikinci);
var veriler_dizi:Array = new Array({Kitap:"Hastane", Fiyat:"35 YTL" }, {Kitap:"Acı Reçete", Fiyat:"55 YTL" }, {Kitap:"Mor Salkım", Fiyat:"80 YTL"})
dataKutu.dataProvider = new DataProvider(veriler_dizi);
dataKutu.rowCount = dataKutu.length;
dataKutu.width = 180;
Kodların açıklaması:
İlk kod grubu bir direktif kabul edilen import komutudur.Bir önceki versiyonda opsiyonel bir seçim iken CS3 versiyonunda kullanılması zorunlu bir komuttur.
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
Bu iki kod grubu ile DataGridColumn ve DataProvider sınfı import edilmektedir.Sınıfın çalışmaya import edilmesi demek o sınıfa ait tüm kodları kullanabileceğimiz anlamına gelmektedir. Yani çalışmaya ait heriki sutunu ve bu sutun ve satırlara girecek verileri gösterebilmek için önce bu sınıfa ait kodları sahneye import etmek zorundayız.
var birinciataGridColumn = new DataGridColumn("Kitap");
var ikinciataGridColumn = new DataGridColumn("Fiyat");
Üstteki kod grubu ile birinci ve ikinci değişken isimleri atanan 2 adet sütun oluşturuyoruz. Bunların içinde Kitap ve Fiyat etiket isimleri yazacaktır. Fakat henüz bu kodlarla alışmaya eklenmiş değildir.
dataKutu.addColumn(birinci);
dataKutu.addColumn(ikinci);
Üstteki kodlar bir evvel bahsettiğimiz sütun isimlerini dataKutu adını verdiğimiz bileşene ekler.Artık çalışmamızda bu sütun ve isimlerini görebiliriz.
var veriler_dizi:Array = new Array({Kitap:"Hastane", Fiyat:"35 YTL" }, {Kitap:"Acı Reçete", Fiyat:"55 YTL" }, {Kitap:"Mor Salkım", Fiyat:"80 YTL"})
Sütunları hazırladığımıza göre bunlara ekliyeceğimiz verilere sıra geliyor. Bir dizi oluşturulur ve bu dizi heriki sutun için oluşturulacak satırlara ait verileri içermektedir.Yani 1.satır ilk sütunda Hastane ikinci sütunda 35 YTL,2.satırda bir sonraki, üçüncü satırda diğer veriler eklenecektir. Diziyi ouşturmak verileri yerleştirdik anlamına gelmez. Şu an sadece tüm verileri içeren dizi elimizde bulunmakta. Bunları çalışmaya aktarmak için ek kodlar gereklidir.
dataKutu.dataProvider = new DataProvider(veriler_dizi);
Dizideki veriler dataprovider sınıfı ile dataKutu isimli bileşene aktarılır.dataprovider`in kabaca kelime anlamı yaptığı işi vurgulayan veri sağlayıcı `dır. Bu yöntem dışında başka yöntemle de verileri ekleyebilirsiniz. Bunu başka örneklerde ileride anlatma imkanım olacaktır.
dataKutu.rowCount = dataKutu.length;
Üstteki komut bileşenimize eklenecek bir scroll içermeden görülecek satır sayısını sağlar. dataKutu.length bize 3 değerini verir. Çünkü bizim dizimizde 3 eleman mevcuttur.Bu dizini silip yerine :
dataKutu.rowCount =2;
yazarsanız dataGrid sağ tarafına bir scroll yerleşir ve sahnede sadece 2 satır ve ona ait elemanlar görülür. Bunu deneyerek görebilirsiniz.
dataKutu.width = 180;
Son kod olan üstteki kod ile tahmin edebileceğiniz gibi bileşenin eni 180 piksel olarak ayarlanır.
Flash CS3 Label Component:
Bu bölümde label componente harici bir txt dosyasından veri yüklemeyi göreceksiniz. Veriye atanmış olan html tagları ile yüklenen metnin stilini de düzenleyebileceksiniz.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir label bileşenini sahneye sürükleyip bırakın.
2- Sahnedeki bu componenti seçip properties panelinden _label ismini atayın. Şimdi verilerin yükleneceği txt dosyasını oluşturalım.veriler.txt adını verdiğimiz txt dosyasına ilgili html taglarını ve metni yazıp UTF 8 formatında (Türkçe karakter içeriyorsa) kaydedelim.Txt dosyası ile swf dosyasının aynı dizinde olmasına dikkat edin. Şimdi alttaki kodları yazarak önce fla dosyasını txt dosyasının bulunduğu dizine kaydedip test ediniz.Fla dosyasını kaydetmeden filmi test ederseniz txt dosyası yüklenmez.
text dosyasının içeriği:
<b>........................Birinci paragraf ....................................</b>
<font color='#ff0000'> ..........................İkinci paragraf...................................... </font>
şeklindedir.
var url:String = "veriler.txt";
_label.text="Veriler yükleniyor"
_label.autoSize = TextFieldAutoSize.LEFT;
_label.width = 530;
_label.move(10, 10);
_label.wordWrap = true;
_label.selectable=false;
var yuklenen:URLLoader = new URLLoader();
yuklenen.addEventListener(Event.COMPLETE, veri_yukle);
yuklenen.load(new URLRequest(url));
function veri_yukle(olay:Event):void {
_label.htmlText = URLLoader(olay.currentTarget).data;
_label.condenseWhite=false;
}
Label componentte mümkün olan tüm kodlar kullanılarak çalışma hazırlanmaya çalışılmıştır.Şayet html özelliği kullanmayacaksanız daha sade kodlar kullanmak şansımız vardır. Kodların anlamları :
var url:String = "veriler.txt"; yüklenecek txt dosyasının yolunu gösteren bir değişken oluşturulmuştur.
_label.text="Veriler yükleniyor" Sahnedeki bileşen ilk açıldığında görülecek metindir.harici yüklemede aslında şart olan bir dizin değildir.Çünkü veri yüklendiğinde bu metin kaybolacaktır. Ama çok uzun bir metin yükleyecekseniz yükleme tamamlana kadar ki kısa bir süre için sahnede bu metin cümlesi görülecektir.
_label.autoSize = TextFieldAutoSize.LEFT; Metin yüklendiğinde metin kutusunun ne tarafa yeniden boyutlandırılacağını gösterir. LEFT: Metin kutusunu sağa ve aşağı yönde , RIGHT: Sola ve aşağıya , CENTER: Sola ve sağa doğru yeniden boyutlar. NONE: Bu seçenekte metni bileşene yüklemek için sığdırma ve yeniden boyutlandırma yapmaz.
_label.width = 530; Yüklenen metnin yer kaplayacağı genişlik pixel olarak yazılır.
_label.move(10, 10); Yüklenen metnin x ve y koordinasyonu oluşturulur.
_label.wordWrap = true; Varsayılan değeri false olduğundan birden fazla satır içeren metin varsa yazmalısınız.
_label.selectable=false; varsayılan değer false şeklindedir.Şayet yazdığınız metnin fare ile seçilebilir olmasını istiyorsanız true yazmalısınız.False yazılımı veya bu dizinin yazılmaması ilgili metnin seçilmesini engeller.
var yuklenen:URLLoader = new URLLoader();
yuklenen.addEventListener(Event.COMPLETE, veri_yukle);
yuklenen.load(new URLRequest(url)); Bir url den veri yüklemek için gereken klasik kod grubu budur.loadVariables` den ne kadar farklı olduğunu görüyorsunuz. Buarada çalışacak olan fonksiyon aşağıdadır.
function veri_yukle(olay:Event):void {
_label.htmlText = URLLoader(olay.currentTarget).data;
_label.condenseWhite=false;
}
İlk dizine artık alışmış olmalısınız.
_label.htmlText = URLLoader(olay.currentTarget).data; belirtilen URL den yine belirtilmiş olan txt dosyasına ait veriler html özelliği kullanılarak yüklenmektedir.
_label.condenseWhite=false; Bu dizin sadece html özelliği aktif olduğunda çalışır.Yüklenen metindeki boşluklar varsa false seçimi bu boşlukların korunmasını sağlar. Varsayılan değerde false olduğundan ancak ture olmasını istediğinizde yazmalısınız.True olduğunda kelime aralarındaki boşluk hariç tüm boşluklar kaybolur.
Şayet amacınız basitçe bir metni yüklemek ise en son yazılan fonksiyonu alttaki gibi değiştirmelisiniz.
function veri_yukle(olay:Event):void {
_label.text = URLLoader(olay.currentTarget).data;
}
Flash CS3 List Component:
Flash 8 de olduğu gibi CS3 versiyonunda da combobox ve list component kodları hemen hemen aynıdır. Bu nedenle kodlara ait açıklama yapılmayacaktır.Aynı kodlar combobox örneğinde anlatılmıştır. Örneğimizde dinamik yöntemle hazırlanmış olan bir list component`ten link verme yöntemi gösterilecektir.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir list bileşenini sahneye sürükleyip bırakın.
2- Sahnedeki bu componenti seçip delete tuşuna basarak silin.Şu an sahnede hiçbir eleman yoktur.Ama kütüphaneyi açıp bakarsanız componentin burada durduğunu görürsünüz. İşte biz bu componenti dinamik yöntemle kodlarla çağırıp kullanacağız.Timeline üzerindeki mevcut tek kareyi tıklayarak seçip actionscript panelini açın ve şu kodları ekleyip filmi test edin:
import fl.controls.List;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var aramamotorlari:Array = new Array(
{label:"Google",data:"http://www.google.com.tr/"},
{label:"Yahoo",data:"http://www.yahoo.com/"},
{label:"Netbul",data:"http://www.netbul.com/"},
{label:"Arabul",data:"http://www.arabul.com/"},
{label:"Altavista", data:"http://www.altavista.com/"},
{label:"Hemenbul", data:"http://www.hemenbul.com/"}
);
var _list:List = new List();
_list.width = 150;
_list.move(10,10);
_list.dataProvider = new DataProvider(aramamotorlari);
_list.addEventListener(Event.CHANGE, linkeGit);
addChild(_list);
function linkeGit(olay:Event):void {
var link:URLRequest = new URLRequest();
link.url = List(olay.target).selectedItem.data;
navigateToURL(link);
}
Flash CS3 NumericStepper Component:
Bu bölümde sadece kodlarla ve hiç kod kullanmadan aynı çalışmanın yapılışını göreceksiniz. Component kullanımında parameters panelinden birçok ayarlamayı yapma şansınızın olduğunu göstermek için bu ikinci çalışma hazırlanmıştır.Diğer component örneklerinde de bu paneli kullanarak kod kullanma oranını azaltabilirsiniz.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir NumericStepper ve bir Label component sürükleyip bırakın. Sonra sahnedeki bu iki bileşeni seçip silin. Bileşenler silinmesine rağmen kütüphanede mevcudiyetini koruyacaktır.Bunları kodlarla çağırarak kullanacağız.
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın(açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
import fl.controls.Label;
import fl.controls.NumericStepper;
var aciklama:Label = new Label();
var ayMetni:Label = new Label();
var gunMetni:Label = new Label();
var yilMetni:Label = new Label();
var ay:NumericStepper = new NumericStepper();
var gun:NumericStepper = new NumericStepper();
var yil:NumericStepper = new NumericStepper();
addChild(aciklama);
addChild(ayMetni);
addChild(gunMetni);
addChild(yilMetni);
addChild(ay);
addChild(gun);
addChild(yil);
aciklama.setSize(100, 22);
aciklama.text = "Doğum tarihiniz?:"
aciklama.move(210, 10);
ay.move(225, 40);
ay.setSize(40, 22);
ay.minimum = 1;
ay.maximum = 12;
ay.stepSize = 1;
ay.value = 1;
ayMetni.setSize(25, 22);
ayMetni.text = "Ay";
ayMetni.move(270, 40);
gun.move(150, 40);
gun.setSize(40, 22);
gun.minimum = 1;
gun.maximum = 31;
gun.stepSize = 1;
gun.value = 1;
gunMetni.setSize(25, 22);
gunMetni.text = "Gün";
gunMetni.move(195, 40);
yil.move(300, 40);
yil.setSize(55, 22);
yil.minimum = 1900;
yil.maximum = 2007;
yil.stepSize = 1;
yil.value = 1980;
yilMetni.setSize(30, 22);
yilMetni.text = "Yıl";
yilMetni.move(360, 40);
Açıklama:
import fl.controls.Label;
import fl.controls.NumericStepper; Diğer örneklerden de hatırlayacağınız gibi dinamik çalışmalarda bu komut ile her iki bileşene ait kodlar önce import edilir.
var aciklama:Label = new Label();
var ayMetni:Label = new Label();
var gunMetni:Label = new Label();
var yilMetni:Label = new Label();
var ay:NumericStepper = new NumericStepper();
var gun:NumericStepper = new NumericStepper();
var yil:NumericStepper = new NumericStepper(); Yine dinamik component çalışmasında kullanılan klasik kod grubu. Sahneye eklenen 4 label ve 3 numericStepper için isimlendirme yapılmıştır.
addChild(aciklama);
addChild(ayMetni);
addChild(gunMetni);
addChild(yilMetni);
addChild(ay);
addChild(gun);
addChild(yil);Dinamik tüm çalışmalarda uygulanacak olan kodların bileşenlere atanması için şart olan kod grubu.
aciklama.setSize(100, 22);
aciklama.text = "Doğum tarihiniz?:"
aciklama.move(210, 10); Acıklama isimli label bileşeninin boyutu, yazılacak metin ve metnin koordinatı atanmıştır.
ay.move(225, 40);
ay.setSize(40, 22);
ay.minimum = 1;
ay.maximum = 12;
ay.stepSize = 1;
ay.value = 1;
Ay isimli numericStepper`e ait elemanlar oluşturulur. Move: Koordinatları, setSize: Boyutu, minimum: Stepper`in inebileceği en alt değeri, maximum: Alınacak olan en üst değeri, stepSize:Her tıklamada sayıların kaçar kaçar artıp azalacağı, value: Dosya ilk açıldığında bileşen üzerinde görülmesini istediğiniz rakamsal değeri atamaktadır. Üstteki kodlarla ay isimli stepper ilk açıldığında 1 değerini gösterir,birer birer artar en alr rakamsal değer 1 en üst değer 12 dir.
Diğer tüm kodlar yukarıdaki sisteme göre hazırlanmıştır.
Üstteki çalışmayı hiç kod kullanmadan hazırlama yöntemi:
1- Önce sahneye 4 adet numericStepper bileşeni yerleştirelim. Her elemana ait metni üstüne veya yanına text aracı ile yazlım:
2- Properties panelinin hemen yanındaki parameters panelini açalım. Önce gün için ayarlanacak olan n.stepper bileşenini tek tıklama ile seçip parameters paneline bakalım:
Buradaki enabled true olmalıdır.False olursa çalıştırılması mümkün olmaz. Maximum görülmesini istediğiniz en üst değer,minimum en alt değer, stepSize tıklama ile atlanacak sayı değeri, value ise sahnede görmeyi istediğiniz rakamsal değeri gösterir.
Aynı işlemler ay bileşeni için yapılır.
Son olarak yıl bileşen elemanları düzenlenir.Şimdi filmi test edebilirsiniz.
Flash CS3 ProgressBar ve UILoader Component:
Bu bölümde ProgressBar ve UILoader Component kullanarak bir resim dosyasının harici yüklenmesine ait bir örnek anlatılacaktır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir tane ProgressBar, bir tane Label ve bir tane IULoader bileşenini sahneye sürükleyip bırakın. Sahnede yerleştirilen yerin önemi yoktur.Çünkü kodlarla bu koordinatlar yeniden düzenlenecektir.
2- Progressbar bileşenine bar, label bileşenine metin ve IULoader bileşenine yukleme ismini properties panelinden atayın.1.kareye şu kodları atayıp filmi test edin.
var url:String = "resmimiz.jpg";
yukleme.autoLoad = false;
yukleme.source = url;
yukleme.move(2, 2);
yukleme.scaleContent = true;
yukleme.load();
bar.source = yukleme;
bar.move(73,100);
bar.addEventListener(ProgressEvent.PROGRESS, ilerleme);
bar.addEventListener(Event.COMPLETE, sonuc);
metin.text = "veriler yükleniyor";
metin.autoSize = TextFieldAutoSize.LEFT;
metin.move(118, 120);
function ilerleme(eventrogressEvent):void {
metin.text = "%"+Math.round((event.bytesLoaded/event.bytesTotal)*100 )+ " yüklendi ";
}
function sonuc(event:Event):void {
bar.removeEventListener(ProgressEvent.PROGRESS, ilerleme);
bar.removeEventListener(Event.COMPLETE, sonuc);
removeChild(bar);
removeChild(metin);
}
Açıklama:
var url:String = "resmimiz.jpg"; Bir değişken oluşturulup değer olarak yüklenecek dosyanın yolu yazılır.
yukleme.autoLoad = false; false değeri yükleme komutunun çalışması için load komutuna ihtiyaç duyar. Şayet load komutu ile yükleme emri verilezse harici dosya yüklenemez. true değeri verilirse load komutunun verilmesine gerek duymadan otomatik yükleme yapar.
yukleme.source = url; yüklenecek kaynak dosyanın adresi yazılır.Biz bu adresi bir değişkene atadığımız için bu alana url değişkeni yazılır.isterseniz değişken kullanmadan buraya doğrudan adresi yazabilirsiniz.
yukleme.move(2, 2); yüklenecek jpg dosyasının sahnedeki x ve y koordinatları atanır.
yukleme.scaleContent = true; harici yüklenen resim dosyasının ebadları ne olursa olsun bileşenin boyutlarına ölçeklenir.Bu değeri false olarak alırsanız tüm ebadları koruyarak dosya yüklenir.
yukleme.load(); autoLoad değerini false olarak verdiğimiz için bu komutu kullanmak zorundayız. Komut olmadan yükleme yapılmaz. Şayet autoLoad değerini true yaparsanız bu komut dizinini kullanmanıza gerek yoktur.
bar.source = yukleme; Bu komut dizini progressbar ile IULoader bileşeni arasındaki ilişkiyi kurar. Bu bağlantı dizininden sonra progressbar bileşen kodlarının özellikleri atanacaktır.
bar.move(73,100); Progressbar bileşeninin sahnede görüleceği x ve y koordinatlarını oluşturur.
bar.addEventListener(ProgressEvent.PROGRESS, ilerleme); yükleme işlemi tamamlanana kadar ilerleme isimli fonksiyon çalıştırılmaktadır. Biraz sonra göreceğiniz gibi ilerleme fonksiyonunda metin isimli label bileşeninde yüklenen dosyanın yüzde değeri gösterilmektedir.
bar.addEventListener(Event.COMPLETE, sonuc); yükleme işlemi tamamlandığı an sonuc isimli bir fonksiyonu çağırır ve çalıştırır. Bu fonksiyonun içeriği az sonra açıklanacaktır.
metin.text = "veriler yükleniyor"; çok gerekli bir dizin değildir.Label bileşeni sahnede ilk gözüktüğünde içereceği metni atar. Veriler yüklendikçe bu alanda yüzde değerleri gözükecektir. Bu dizindeki metin label bileşeni sahnede gözüktüğünde ve bir nedenle veri yüklenmesi kesilmiş ise alanın boş kalmasını önler.Ama yükleme hemen başlarsa bu metni sahnede görme şansımız olmayabilir.
metin.autoSize = TextFieldAutoSize.LEFT; Metin bileşenin sol tarafına yaslanarak yüklenir.
metin.move(118, 120); label bileşeninin sahnedeki x ve y koordinatlarını atar.
function ilerleme(eventrogressEvent):void {
metin.text = "%"+Math.round((event.bytesLoaded/event.bytesTotal)*100 )+ " yüklendi ";
}
Yüklenen byte oranını label bileşeninde göstermek için kullanılan fonksiyondur.
function sonuc(event:Event):void {
bar.removeEventListener(ProgressEvent.PROGRESS, ilerleme);
bar.removeEventListener(Event.COMPLETE, sonuc);
removeChild(bar);
removeChild(metin);
}
Bu komut verilerin yüklenmesi bittikten sonra çalışacak fonksiyonu oluşturur.Bu fonksiyon çalıştığında bar isimli progressBar bileşenine atanan tüm kodlama özellikleri kaldırılır ve removeChild komutları ile progressbar ve label bileşeni sahneden silinir.
Flash CS3 RadioButton Component:
Bu bölümde sahnedeki 3 seçenekli radiobutton aracılığı ile film içindeki başka bir kareye geçiş yöntemi anlatılacaktır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir radiobutton ve bir button bileşenini sahneye sürükleyip bırakın. Kütüphaneyi açın Buradaki radiobutton bileşeninden 2 kez sahneye sürükleme yolu ile yerleştirin. Üstteki çalışmada göreceğiniz gibi sahnede alt alta duran 3 radiobutton ve hemen altında bir button bileşeni olsun. Properties panelinden radiobuttonlara sırası ile radio1, radio2 ve radio3 isimlerini atayın. Button bileşenine de butonumuz ismini verirn.
2- Ana timeline da bulunan tek frame yanına 3 adet blankframe ekleyin ve buraya 3 ayrı resmi import edin. Şimdi 1.kareyi seçip şu kodları atayın ve filmi test edin.
radio1.label = "2.kareye geç";
radio1.move(10, 10);
radio1.value="2";
radio1.addEventListener(MouseEvent.CLICK, secimSonucu);
radio2.label = "3.kareye geç";
radio2.move(10, 30);
radio2.value="3";
radio2.addEventListener(MouseEvent.CLICK, secimSonucu);
radio3.label = "4.kareye geç";
radio3.move(10, 50);
radio3.value="4";
radio3.addEventListener(MouseEvent.CLICK, secimSonucu);
butonumuz.move(10, 80);
butonumuz.label="Seçiniz"
function secimSonucu(event:MouseEvent):void {
var deger= event.currentTarget.value;
function git(event:MouseEvent):void {
gotoAndStop(deger)
}
butonumuz.addEventListener(MouseEvent.CLICK, git);
}
stop()
Açıklama:
radio1.label = "2.kareye geç"; radioButton bileşenin metnini atar.
radio1.move(10, 10); Bileşenin sahnede gözükeceği x ve y koordinatlarını oluşturur.
radio1.value="2"; Bileşene bir değer atanır.Burada radio1 bileşeni tıklandığında değer olarak 1 atanır.Bu değer daha sonra kodlarda kullanılarak değişik çalışmalar oluşturulur.
radio1.addEventListener(MouseEvent.CLICK, secimSonucu); Artık bu addEventListener koduna alışmış olmalısınız.RadioButtona fare ile tıkladığınız an secimSonucu isimli bir fonksiyon çalıştırılır.
Aynı işlemler diğer 2 bileşen içinde aynı şekilde uygulanır.
butonumuz.move(10, 80);
butonumuz.label="Seçiniz" Button bileşeni metni ve koordinatlarını oluşturur.
function secimSonucu(event:MouseEvent):void {
var deger= event.currentTarget.value;
function git(event:MouseEvent):void {
gotoAndStop(deger)
}
butonumuz.addEventListener(MouseEvent.CLICK, git);
}
Burada içiçe geçmiş 2 fonksiyon mevcut.var deger= event.currentTarget.value; Değer isimli bir değişkene radiobutton tıklandığında seçilen elemana ait değer atanır.Bu değer üstte açıklandığı gibi 2,3 veya 4 olabilir. function git(event:MouseEvent):void { Bu fonksiyon button bileşenine ait bir fonksiyondur ve button bileşeni tıklandığında çalışacak fonksiyon grubudur. gotoAndStop(deger)Button bileşeni tıklandığında deger bileşenine atanan frame numarasına ilerleme sağlanır. butonumuz.addEventListener(MouseEvent.CLICK, git); Bu kod butona basıldığında çalışacak fonksiyonu atar.
Basitçe özetlersek çalışma açıldığında 3 seçenekli bir radiobutton grubu var.örneğin siz 2.kareye gidin seçeneğini tıkladığınızda bir değişkene 2 değeri atanır.Sonra Seçiniz isimli butona bastığınızda film 2 numaralı kareye atlar.
Aynı çalışmayı bir kareye atlamak için değil de bir linki açmak için kullanmak isterseniz kodları şu şekilde değiştirebilirsiniz.
(Ana timeline içindeki 2,3 ve 4 kareleri silin sadece ilk kareyi kullanın.)
radio1.label = "Yahoo";
radio1.move(10, 10);
radio1.value="http://www.yahoo.com";
radio1.addEventListener(MouseEvent.CLICK, secimSonucu);
radio2.label = "Google";
radio2.move(10, 30);
radio2.value="http://www.google.com";
radio2.addEventListener(MouseEvent.CLICK, secimSonucu);
radio3.label = "AltaVista";
radio3.move(10, 50);
radio3.value="http://www.altavista.com";
radio3.addEventListener(MouseEvent.CLICK, secimSonucu);
butonumuz.move(10, 80);
butonumuz.label="Seçiniz"
function secimSonucu(event:MouseEvent):void {
var deger= event.currentTarget.value;
function git(event:MouseEvent):void {
var link:URLRequest = new URLRequest(deger);
navigateToURL(link);
}
butonumuz.addEventListener(MouseEvent.CLICK, git);
}
User InterFace Örnekleri
Flash CS3 Button Component:
Actionscript3 versiyonunda hemen tüm kodlar diğer versiyona göre tamamen değişmiştir. Yeni bileşen kodları anlatılırken klasik flash kodlarındaki değişimleri de görme şansınız olacaktır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir button bileşenini sahneye sürükleyip bırakın. Properties panelinden butonumuz ismini atayın.
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın(açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
function url_ac(event:MouseEvent):void {
var link:URLRequest = new URLRequest("http://www.flashokulu.com/");
navigateToURL(link);
}
butonumuz.addEventListener(MouseEvent.CLICK, url_ac);
Önce butona tıkladığınızda çalışmasını istediğiniz kod grubunu yazmalısınız.Bizim istediğimiz tıklama sonrası bir web sayfasının açılmasıdır.Fonksiyon yapısı aslında cs3 versiyonunda aynıdır.Parantez içine fonksiyonun çağrılma yöntemi yazılmaktadır.Biz bir mouse olayı yapacağımızdan bunu belirtmek için event:MouseEvent yazıyoruz.Buradaki void fonksiyon çağrıldığında bir değer dönmeyecekse eklenir. Fonksiyon içindeki:
var link:URLRequest = new URLRequest("http://www.flashokulu.com/");
navigateToURL(link);
kod dizisi actionscript 2 `ki getURL("http://www.flashokulu.com/"); kodunun tam karşılığıdır. Yani artık bir yeni sayfa açmak isterseniz bu yeni kod grubunu kullanmalısınız.
butonumuz.addEventListener(MouseEvent.CLICK, url_ac); bu dizin ile foksiyonumuzu butonumuza atıyoruz. Burada değişiklik parantez içindeki dizilimdir.Mouse olaylarından hangisini kullanmak istiyorsak onu yazıyoruz.Burada istediğimiz butona tıklama olayını yaratmaktır ve bunu MouseEvent.CLICK kodu ile tanımlamaktayız. Diğer mouse olayları yeri geldiğinde örneklerle anlatılacaktır. Daha sonra bir virgül karakteri ekleyip çalışmasını istediğiniz fonksiyonun adını yazıyoruz.
NOT= Küçük bir uyarı yapmak istiyorum.Flash CS3 de Artık semboller üzerine kod yazma şansımız kaldırılmıştır. Tüm kodlar sembole instance name atadıktan sonra timeline üzerine yazılacaktır.
Flash CS3 CheckBox Component:
Bu bölümde 2 checkBox ve bir button component kullanarak seçilen bir web sayfasını açma yönteminden bahsedilecektir.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir button ve iki checkBox bileşenini sahneye sürükleyip bırakın. Properties panelinden checkBox`lardan birine kutu1, diğerine kutu2 ismini, button bileşenine ise buton ismini atayın.
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın(açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
function check1(event:MouseEvent):void {
kutu2.selected=false;
}
function check2(event:MouseEvent):void {
kutu1.selected=false;
}
kutu1.addEventListener(MouseEvent.CLICK, check1);
kutu2.addEventListener(MouseEvent.CLICK, check2);
function url_ac(event:MouseEvent):void {
if(kutu1.selected==true){
var linkimiz:URLRequest = new URLRequest("http://www.flashokulu.com");
navigateToURL(linkimiz);
}
if(kutu2.selected==true){
var linkimiz1:URLRequest = new URLRequest("http://www.mmistanbul.com");
navigateToURL(linkimiz1);
}
}
buton.addEventListener(MouseEvent.CLICK, url_ac);
Button component`te bahsedildiği gibi fonksiyon yapısı aslında cs3 versiyonunda aynıdır.Parantez içine fonksiyonun çağrılma yöntemi yazılmaktadır.Biz bir mouse olayı yapacağımızdan bunu belirtmek için event:MouseEvent yazıyoruz.Buradaki void fonksiyon çağrıldığında bir değer dönmeyecekse eklenir.
function check1(event:MouseEvent):void {
kutu2.selected=false;
}
function check2(event:MouseEvent):void {
kutu1.selected=false;
}
check1 fonksiyonu 1.checkBox, check2 fonksiyonu ise 2.checkBox tıklandığında çalışacaktır.
kutu1 veya kutu2 .selected=false; kodlarının amacı birden fazla kutu işaretlenmesini önlemek içindir.Önce kutu1 seçildikten sonra kullanıcı daha sonra kutu2 yi seçerse bu kodlar sayesinde kutu1 deki check işareti kalkacaktır. Şayet bu kodları yazmazsanız birden fazla kutu seçilmiş olur.
kutu1.addEventListener(MouseEvent.CLICK, check1);
kutu2.addEventListener(MouseEvent.CLICK, check2);
bu dizinler ile foksiyonlarımızı heriki kutuya atıyoruz. Actionscript3 de addEventListener kodunda değişiklik yapılmıştır Değişiklik parantez içindeki dizilimdir.Mouse olaylarından hangisini kullanmak istiyorsak onu yazıyoruz.Burada istediğimiz kutuya tıklama olayını yaratmaktır ve bunu MouseEvent.CLICK kodu ile tanımlamaktayız. Diğer mouse olayları yeri geldiğinde örneklerle anlatılacaktır. Daha sonra bir virgül karakteri ekleyin çalışmasını istediğiniz fonksiyonun adını yazıyoruz.
Buraya kadar yapılanlar checkBox bileşenlerinen birini kullanıcıya seçme şansı vermeyi sağlamaktadır.Şimdi butona bu seçime ait ilgili sayfayı açma kodlarını atayacağız.
function url_ac(event:MouseEvent):void {
if(kutu1.selected==true){
var linkimiz:URLRequest = new URLRequest("http://www.flashokulu.com");
navigateToURL(linkimiz);
}
if(kutu2.selected==true){
var linkimiz1:URLRequest = new URLRequest("http://www.mmistanbul.com");
navigateToURL(linkimiz1);
}
}
buton.addEventListener(MouseEvent.CLICK, url_ac);
Bu kodlar button component kısmında anlatıldı . İsterseniz linke tıklayarak gözatabilirsiniz. Kodlarda gördüğünüz gibi if gibi sorgu kalıpları actionscript2 deki gibidir. kutu1.selected==true sorgusuyla birinci kutu seçilmişse şu linki aç, şayet kutu2.selected==true ; kutu2 seçilmişse bu linki aç denilmektedir.
Flash CS3 ColorPixer Component:
Bu bölümde dinamik olarak çizilmiş bir klip rengini ColorPixer bileşeni ile değiştirme yöntemini göreceğiz.
Uygulama:
1- Flash programını açıp sahnenin sağ yanına components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir colorPixer çekip bırakın. Properties panelinden ismini renkKutusu olarak atayın
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın (açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
import fl.events.ColorPickerEvent;
var kutu:MovieClip = new MovieClip();
kutuCiz(kutu, 0xFF0000);
addChild(kutu);
renkKutusu.addEventListener(ColorPickerEvent.CHANGE,renkDegistir);
function renkDegistir(event:ColorPickerEvent):void {
kutuCiz(kutu, event.target.selectedColor);
}
function kutuCiz(film:MovieClip,renk:uint):void {
film.graphics.beginFill(renk, 1);
film.graphics.drawRect(10, 10, 75, 50);
film.graphics.endFill();
}
Yeni bir bileşen olan ColorPixer bileşen kodları şu şekilde açıklamak mümkün:
import fl.events.ColorPickerEvent; Artık çok iyi alışmamız gereken bir kod grubu. Bu kod ile bileşene ait tüm olayları çağırmış oluyoruz. Bu kod grubunu çağırmazsanız biraz sonra anlatacağımız Change olayını çalıştırmanız mümkün olmaz. Bileşene ait olayları 4 grupta toplayabiliriz:
-ColorPickerEvent.CHANGE: Kullanıcı bileşende farklı bir renge tıkladığı zaman çalışır.
-ColorPickerEvent.ENTER: Kullanıcı bileşen üzerinde farklı bir renk üzerine fare imleçini getirip klavyeneb enter tuşuna bastığında çalışır.
-ColorPickerEvent.ITEM_ROLL_OUT: Kullanıcı bileşen üzerinde farklı bir renk üzerine fare imlecini getirdikten sonra imleci bu renk üzerinde ayırdığı an çalışır
-ColorPickerEvent.ITEM_ROLL_OVER: Kullanıcı bileşen üzerinde farklı bir renk üzerine fare imlecini getirdiği an çalışır
var kutu:MovieClip = new MovieClip();
kutuCiz(kutu, 0xFF0000);
addChild(kutu);
Üstteki kod grubu ile dinamik bir film klibi çiziyoruz ve rengini kırmızı olarak değiştiriyoruz. Bu renk dinamik çizimle sağlanan klibin sahnede ilk görüldüğü renktir. Buradaki kutuCiz bir fonksiyondur.Üstteki kodların en alt kısmında klibin dinamik çizimini sağlayan bir fonksiyondur.Bu fonksiyondaki renk parametresine 0xFF0000 yani kırmızı renk atayarak ilk görünen dinamik çizimi sağlar. addChild(kutu); Alışmanız gereken diğer bir kod grubuda budur.Tüm dinamik yöntem kullandığınız çalışmalarda bu kod grubunu kullanmak zorundasınız.Bu dinamik yöntemler sembol,çizim,metin kutusu veya bileşen ekleme olabilir. addChild kodu ile kutu isimli klibe bir üstte yazılan fonksiyonlara ait özellikler atanmış olur.
function renkDegistir(event:ColorPickerEvent):void {
kutuCiz(kutu, event.target.selectedColor);
}
Gördüğünüz gibi bu fonksiyon parantez içinde belirtilen Renk Kutusu bileşenine ait bir olay ile ( yani change=tıklama yöntemi ile) çalıştırılabilen bir fonksiyondur.Bu fonksiyon başka bir fonksiyonu çağırmaktadır.Çağrılan bu fonksiyonla parantez içinde yazılmış olan kutu adlı klibin rengini event.target.selectedColor komutu ile (Bu komut renk kutusunu tıkladığımızda o renge ait değeri döndürür) seçtiğimiz renge çevirir.
function kutuCiz(film:MovieClip,renk:uint):void {
film.graphics.beginFill(renk, 1);
film.graphics.drawRect(10, 10, 75, 50);
film.graphics.endFill();
}
İki kez çağrılan fonksiyon kodları üstteki gibidir. Fonksiyonun 2 parametresi vardır.Film fonksiyonun atanacağı sembolün bir film klibi olacağını ,renk ise kliplerin rengini oluşturacak değerleri taşıyacaktır. uint sınıfı bize 32-bit tamsayı taşıyan veri tipleri ile çalışmamızı sağlayan bir sınıftır. uint ile verilebilecek tamsayı değerleri 0 ile 4.294.967.295 rasında değişir.Ve özellikle pixel renk değerleri için kullanılırlar.Diğer kodlar bir dikdörtgen çizimini yapan as2 ye göre biraz değişmiş olduğunu gördüğünüz kod grubudur. film.graphics.beginFill(renk, 1);Burada gördüğünüz gibi bir renk ataması kullanılmamış ve renk değişkeni yazılmıştır.Film klibi ilk yüklendiğinde başta anlattığım gibi önce kutuÇiz isimli bir fonksiyon bu fonksiyonu çağırmakta idi.İki dizini alt alta koyup bakarsanız kutuCiz fonksiyonu çağrıldığında renk değişkenine kırmızı renk atandığını görürsünüz.
film.graphics.beginFill(renk, 1);
kutuCiz(kutu, 0xFF0000);
Bu nedenle ilk renk kırmızı olmaktadır.Daha sonra renk kutusundan bir renk çağrıldığında event.target.selectedColor ile elde edilen değer renk değişkenine atanıp kutu klibinin rengini değiştirmiştir.
Flash CS3 ComboBox Component:
Bu bölümde tamamen dinamik yöntemle combobox hazırlama ve herbir elemandan farklı bir web sayfası açma yönteminden bahsedilecektir. Kullanılacak olan yöntemde combobox için kullanılanacak kodların büyük bir kısmı eklenmeye çalışılmıştır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir combobox bileşenini sahneye sürükleyip bırakın.
2- Sahnedeki bu componenti seçip delete tuşuna basarak silin.Şu an sahnede hiçbir eleman yoktur.Ama kütüphaneyi açıp bakarsanız componentin burada durduğunu görürsünüz. İşte biz bu componenti dinamik yöntemle kodlarla çağırıp kullanacağız.Timeline üzerindeki mevcut tek kareyi tıklayarak seçip actionscript panelini açın ve şu kodları ekleyip filmi test edin:
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var aramamotorlari:Array = new Array(
{label:"Google",data:"http://www.google.com.tr/"}, {label:"Yahoo",data:"http://www.yahoo.com/"},
{label:"Netbul",data:"http://www.netbul.com/"}, {label:"Arabul",data:"http://www.arabul.com/"},
{label:"Altavista", data:"http://www.altavista.com/"}, {label:"Hemenbul", data:"http://www.hemenbul.com/"}
);
var combo:ComboBox = new ComboBox();
combo.dropdownWidth = 160;
combo.width = 150;
combo.move(10,10);
combo.prompt = "Bir arama motoru seçiniz";
combo.dataProvider = new DataProvider(aramamotorlari);
combo.addEventListener(Event.CHANGE, linkeGit);
addChild(combo);
function linkeGit(olay:Event):void {
var link:URLRequest = new URLRequest();
link.url = ComboBox(olay.target).selectedItem.data;
navigateToURL(link);
combo.selectedIndex = -1;
}
Filmi test ettiğinizde bileşene ait bir elemanı tıkladığınızda ilgili web sayfasını açabilirsiniz.
import fl.controls.ComboBox;
import fl.data.DataProvider;
import flash.net.navigateToURL; Burada 3 sınıfa ait tüm kodlar sahneye import edilmektedir. Actionscript 3 de hangi yöntem olursa olsun bir dinamik çalışma yapacaksanız mutlaka ilgili sınıfı sahneye import etmelisiniz. Burada tüm combobox kontrol kodları, dataprovider(veri sağlayıcı:Bu bileşene ait elemanları ve ona ait verileri oluşturur) ve navigateToURL (ilgili url adresine gitmek için gereken kodları) sınıfı sahneye import edilmiştir.
var aramamotorlari:Array = new Array(
{label:"Google",data:"http://www.google.com.tr/"}, {label:"Yahoo",data:"http://www.yahoo.com/"},.............................
Burada bir dizi oluşturulmaktadır.Dizinin her elemanı 2 bölüm içermektedir.İlki combobox açıldığında görülen label isimleri, diğeri bu ismlere ait data değerleridir.data değerleri ilgili label tıklandığında gidilecek adresin ismini barındırmaktadır.
var combo:ComboBox = new ComboBox(); şayet sahnedeki combobox`u silmeyip bir isim atasaydık bu koda gerek kalmazdı. Ama biz kütüphanedeki bileşeni ancak bu komut ile çağırabiliyoruz.Dikkat ettiyseniz ona combo şeklinde bir isim de atanmıştır.
combo.dropdownWidth = 160; menü tıklanarak açıldığında bu bileşene ait alt elemanları içeren panelin genişlik değeri atanıyor(opsiyonel bir koddur)
combo.width = 150;
combo.move(10,10); Bileşenin genişiliği ve swf dosyası açıldığında bileşenin x ve y koordinatı atanıyor. Opsiyoneldir , yazmazsanız varsyılan değerler atanır.
combo.prompt = "Bir arama motoru seçiniz"; Opsiyoneldir.Bir başlık olmasını istiyorsanız yazabilirsiniz.
combo.dataProvider = new DataProvider(aramamotorlari); Dizi elemanları ve data değerleri bileşene aktarılıyor.
combo.addEventListener(Event.CHANGE, linkeGit); Bileşene ait eleman tıklandığında linkeGit isimli fonksiyonu çalıştırıyor.
addChild(combo); Dinamik bir çalışma yapmak için import komutundan sonra şart olan ikinci komut bu.Üstte yazılan tüm kodların çalışması için combo ismi verilen bu bileşene addChild komutu eklenmelidir.Bu kod sahneye bileşen eklenip properties panelinden isimlendirildiğinde kullanılmazlar.Sadece dinamik çalışmalar içindir.
Herşey tamam, geriye sadece tıklandığında çalıştırılacak fonksiyonun yazılması kaldı.
function linkeGit(olay:Event):void {
var link:URLRequest = new URLRequest();
link.url = ComboBox(olay.target).selectedItem.data;
navigateToURL(link);
combo.selectedIndex = -1;
}
Fonksiyonda parantez içinde ne amaç için kullanıldığı yazılır.Void daha önce söylenmişti. var link:URLRequest = new URLRequest(); bu dizinde diğer örneklerde vardı.Bir link içerecek olan değişkenimiz atanır.
link.url = ComboBox(olay.target).selectedItem.data;Bu dizin combobox ismine tıklandığında o ismi ait atanmış olan değeri yani dizi oluşturduğumuzda data: den sonra yazılan kısmı atar. Bu actionscript2 deki combo.selectedItem.data dizinine eşdeğerdir.
navigateToURL(link); bu dizin ilgili sayfaya ait adresin atanmasını sağlar.
combo.selectedIndex = -1; Bu opsiyonel bir koddur.Yazılmazsa varsayılan işlem yapılır.Varsayılan işlemde şu olur: Combobox açılıp diyelim 2.elemanı tıkladınız.Tıklama sonrası bu eleman ismi en üste gelir ve bir arama motoru seçiniz yazısının yerini alır.Bu değer için örneğin 1 yazarsak: İlk eleman sıfırıncı elemandır.2.eleman ise 1 nolu elemandır.Hangi seçeneği tıklarsanız tıklayın , tıklama sonrası bir arama motoru seçin yazının yerini bu eleman adı alır.Şayet bizim yaptığımız gibi -1 yazarsanız hiçbir değişiklik olmaz.Menüde nereyi tıklarsanız tıklayın bir arama motoru seçin yazısı sabit kalır.
Flash CS3 DataGrid Component:
Bu bölümde 2 sütunlu verilere sahip dataGrid component hazırlama yöntemini göreceğiz.
Uygulama:
1- Flash programını açıp sahnenin sağ yanına components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir dataGrid çekip bırakın. Properties panelinden ismini dataKutu olarak atayın
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın (açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
var birinci
ataGridColumn = new DataGridColumn("Kitap");var ikinci
ataGridColumn = new DataGridColumn("Fiyat");dataKutu.addColumn(birinci);
dataKutu.addColumn(ikinci);
var veriler_dizi:Array = new Array({Kitap:"Hastane", Fiyat:"35 YTL" }, {Kitap:"Acı Reçete", Fiyat:"55 YTL" }, {Kitap:"Mor Salkım", Fiyat:"80 YTL"})
dataKutu.dataProvider = new DataProvider(veriler_dizi);
dataKutu.rowCount = dataKutu.length;
dataKutu.width = 180;
Kodların açıklaması:
İlk kod grubu bir direktif kabul edilen import komutudur.Bir önceki versiyonda opsiyonel bir seçim iken CS3 versiyonunda kullanılması zorunlu bir komuttur.
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
Bu iki kod grubu ile DataGridColumn ve DataProvider sınfı import edilmektedir.Sınıfın çalışmaya import edilmesi demek o sınıfa ait tüm kodları kullanabileceğimiz anlamına gelmektedir. Yani çalışmaya ait heriki sutunu ve bu sutun ve satırlara girecek verileri gösterebilmek için önce bu sınıfa ait kodları sahneye import etmek zorundayız.
var birinci
ataGridColumn = new DataGridColumn("Kitap");var ikinci
ataGridColumn = new DataGridColumn("Fiyat");Üstteki kod grubu ile birinci ve ikinci değişken isimleri atanan 2 adet sütun oluşturuyoruz. Bunların içinde Kitap ve Fiyat etiket isimleri yazacaktır. Fakat henüz bu kodlarla alışmaya eklenmiş değildir.
dataKutu.addColumn(birinci);
dataKutu.addColumn(ikinci);
Üstteki kodlar bir evvel bahsettiğimiz sütun isimlerini dataKutu adını verdiğimiz bileşene ekler.Artık çalışmamızda bu sütun ve isimlerini görebiliriz.
var veriler_dizi:Array = new Array({Kitap:"Hastane", Fiyat:"35 YTL" }, {Kitap:"Acı Reçete", Fiyat:"55 YTL" }, {Kitap:"Mor Salkım", Fiyat:"80 YTL"})
Sütunları hazırladığımıza göre bunlara ekliyeceğimiz verilere sıra geliyor. Bir dizi oluşturulur ve bu dizi heriki sutun için oluşturulacak satırlara ait verileri içermektedir.Yani 1.satır ilk sütunda Hastane ikinci sütunda 35 YTL,2.satırda bir sonraki, üçüncü satırda diğer veriler eklenecektir. Diziyi ouşturmak verileri yerleştirdik anlamına gelmez. Şu an sadece tüm verileri içeren dizi elimizde bulunmakta. Bunları çalışmaya aktarmak için ek kodlar gereklidir.
dataKutu.dataProvider = new DataProvider(veriler_dizi);
Dizideki veriler dataprovider sınıfı ile dataKutu isimli bileşene aktarılır.dataprovider`in kabaca kelime anlamı yaptığı işi vurgulayan veri sağlayıcı `dır. Bu yöntem dışında başka yöntemle de verileri ekleyebilirsiniz. Bunu başka örneklerde ileride anlatma imkanım olacaktır.
dataKutu.rowCount = dataKutu.length;
Üstteki komut bileşenimize eklenecek bir scroll içermeden görülecek satır sayısını sağlar. dataKutu.length bize 3 değerini verir. Çünkü bizim dizimizde 3 eleman mevcuttur.Bu dizini silip yerine :
dataKutu.rowCount =2;
yazarsanız dataGrid sağ tarafına bir scroll yerleşir ve sahnede sadece 2 satır ve ona ait elemanlar görülür. Bunu deneyerek görebilirsiniz.
dataKutu.width = 180;
Son kod olan üstteki kod ile tahmin edebileceğiniz gibi bileşenin eni 180 piksel olarak ayarlanır.
Flash CS3 Label Component:
Bu bölümde label componente harici bir txt dosyasından veri yüklemeyi göreceksiniz. Veriye atanmış olan html tagları ile yüklenen metnin stilini de düzenleyebileceksiniz.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir label bileşenini sahneye sürükleyip bırakın.
2- Sahnedeki bu componenti seçip properties panelinden _label ismini atayın. Şimdi verilerin yükleneceği txt dosyasını oluşturalım.veriler.txt adını verdiğimiz txt dosyasına ilgili html taglarını ve metni yazıp UTF 8 formatında (Türkçe karakter içeriyorsa) kaydedelim.Txt dosyası ile swf dosyasının aynı dizinde olmasına dikkat edin. Şimdi alttaki kodları yazarak önce fla dosyasını txt dosyasının bulunduğu dizine kaydedip test ediniz.Fla dosyasını kaydetmeden filmi test ederseniz txt dosyası yüklenmez.
text dosyasının içeriği:
<b>........................Birinci paragraf ....................................</b>
<font color='#ff0000'> ..........................İkinci paragraf...................................... </font>
şeklindedir.
var url:String = "veriler.txt";
_label.text="Veriler yükleniyor"
_label.autoSize = TextFieldAutoSize.LEFT;
_label.width = 530;
_label.move(10, 10);
_label.wordWrap = true;
_label.selectable=false;
var yuklenen:URLLoader = new URLLoader();
yuklenen.addEventListener(Event.COMPLETE, veri_yukle);
yuklenen.load(new URLRequest(url));
function veri_yukle(olay:Event):void {
_label.htmlText = URLLoader(olay.currentTarget).data;
_label.condenseWhite=false;
}
Label componentte mümkün olan tüm kodlar kullanılarak çalışma hazırlanmaya çalışılmıştır.Şayet html özelliği kullanmayacaksanız daha sade kodlar kullanmak şansımız vardır. Kodların anlamları :
var url:String = "veriler.txt"; yüklenecek txt dosyasının yolunu gösteren bir değişken oluşturulmuştur.
_label.text="Veriler yükleniyor" Sahnedeki bileşen ilk açıldığında görülecek metindir.harici yüklemede aslında şart olan bir dizin değildir.Çünkü veri yüklendiğinde bu metin kaybolacaktır. Ama çok uzun bir metin yükleyecekseniz yükleme tamamlana kadar ki kısa bir süre için sahnede bu metin cümlesi görülecektir.
_label.autoSize = TextFieldAutoSize.LEFT; Metin yüklendiğinde metin kutusunun ne tarafa yeniden boyutlandırılacağını gösterir. LEFT: Metin kutusunu sağa ve aşağı yönde , RIGHT: Sola ve aşağıya , CENTER: Sola ve sağa doğru yeniden boyutlar. NONE: Bu seçenekte metni bileşene yüklemek için sığdırma ve yeniden boyutlandırma yapmaz.
_label.width = 530; Yüklenen metnin yer kaplayacağı genişlik pixel olarak yazılır.
_label.move(10, 10); Yüklenen metnin x ve y koordinasyonu oluşturulur.
_label.wordWrap = true; Varsayılan değeri false olduğundan birden fazla satır içeren metin varsa yazmalısınız.
_label.selectable=false; varsayılan değer false şeklindedir.Şayet yazdığınız metnin fare ile seçilebilir olmasını istiyorsanız true yazmalısınız.False yazılımı veya bu dizinin yazılmaması ilgili metnin seçilmesini engeller.
var yuklenen:URLLoader = new URLLoader();
yuklenen.addEventListener(Event.COMPLETE, veri_yukle);
yuklenen.load(new URLRequest(url)); Bir url den veri yüklemek için gereken klasik kod grubu budur.loadVariables` den ne kadar farklı olduğunu görüyorsunuz. Buarada çalışacak olan fonksiyon aşağıdadır.
function veri_yukle(olay:Event):void {
_label.htmlText = URLLoader(olay.currentTarget).data;
_label.condenseWhite=false;
}
İlk dizine artık alışmış olmalısınız.
_label.htmlText = URLLoader(olay.currentTarget).data; belirtilen URL den yine belirtilmiş olan txt dosyasına ait veriler html özelliği kullanılarak yüklenmektedir.
_label.condenseWhite=false; Bu dizin sadece html özelliği aktif olduğunda çalışır.Yüklenen metindeki boşluklar varsa false seçimi bu boşlukların korunmasını sağlar. Varsayılan değerde false olduğundan ancak ture olmasını istediğinizde yazmalısınız.True olduğunda kelime aralarındaki boşluk hariç tüm boşluklar kaybolur.
Şayet amacınız basitçe bir metni yüklemek ise en son yazılan fonksiyonu alttaki gibi değiştirmelisiniz.
function veri_yukle(olay:Event):void {
_label.text = URLLoader(olay.currentTarget).data;
}
Flash CS3 List Component:
Flash 8 de olduğu gibi CS3 versiyonunda da combobox ve list component kodları hemen hemen aynıdır. Bu nedenle kodlara ait açıklama yapılmayacaktır.Aynı kodlar combobox örneğinde anlatılmıştır. Örneğimizde dinamik yöntemle hazırlanmış olan bir list component`ten link verme yöntemi gösterilecektir.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir list bileşenini sahneye sürükleyip bırakın.
2- Sahnedeki bu componenti seçip delete tuşuna basarak silin.Şu an sahnede hiçbir eleman yoktur.Ama kütüphaneyi açıp bakarsanız componentin burada durduğunu görürsünüz. İşte biz bu componenti dinamik yöntemle kodlarla çağırıp kullanacağız.Timeline üzerindeki mevcut tek kareyi tıklayarak seçip actionscript panelini açın ve şu kodları ekleyip filmi test edin:
import fl.controls.List;
import fl.data.DataProvider;
import flash.net.navigateToURL;
var aramamotorlari:Array = new Array(
{label:"Google",data:"http://www.google.com.tr/"},
{label:"Yahoo",data:"http://www.yahoo.com/"},
{label:"Netbul",data:"http://www.netbul.com/"},
{label:"Arabul",data:"http://www.arabul.com/"},
{label:"Altavista", data:"http://www.altavista.com/"},
{label:"Hemenbul", data:"http://www.hemenbul.com/"}
);
var _list:List = new List();
_list.width = 150;
_list.move(10,10);
_list.dataProvider = new DataProvider(aramamotorlari);
_list.addEventListener(Event.CHANGE, linkeGit);
addChild(_list);
function linkeGit(olay:Event):void {
var link:URLRequest = new URLRequest();
link.url = List(olay.target).selectedItem.data;
navigateToURL(link);
}
Flash CS3 NumericStepper Component:
Bu bölümde sadece kodlarla ve hiç kod kullanmadan aynı çalışmanın yapılışını göreceksiniz. Component kullanımında parameters panelinden birçok ayarlamayı yapma şansınızın olduğunu göstermek için bu ikinci çalışma hazırlanmıştır.Diğer component örneklerinde de bu paneli kullanarak kod kullanma oranını azaltabilirsiniz.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir NumericStepper ve bir Label component sürükleyip bırakın. Sonra sahnedeki bu iki bileşeni seçip silin. Bileşenler silinmesine rağmen kütüphanede mevcudiyetini koruyacaktır.Bunları kodlarla çağırarak kullanacağız.
2- Ana sahne 1.kareyi tek tıklama ile seçin ve actionscript panelini açın(açık değilse F9 tuşu ile açabilirsiniz) ve şu kodları ekleyip çalışmanızı test edin:
import fl.controls.Label;
import fl.controls.NumericStepper;
var aciklama:Label = new Label();
var ayMetni:Label = new Label();
var gunMetni:Label = new Label();
var yilMetni:Label = new Label();
var ay:NumericStepper = new NumericStepper();
var gun:NumericStepper = new NumericStepper();
var yil:NumericStepper = new NumericStepper();
addChild(aciklama);
addChild(ayMetni);
addChild(gunMetni);
addChild(yilMetni);
addChild(ay);
addChild(gun);
addChild(yil);
aciklama.setSize(100, 22);
aciklama.text = "Doğum tarihiniz?:"
aciklama.move(210, 10);
ay.move(225, 40);
ay.setSize(40, 22);
ay.minimum = 1;
ay.maximum = 12;
ay.stepSize = 1;
ay.value = 1;
ayMetni.setSize(25, 22);
ayMetni.text = "Ay";
ayMetni.move(270, 40);
gun.move(150, 40);
gun.setSize(40, 22);
gun.minimum = 1;
gun.maximum = 31;
gun.stepSize = 1;
gun.value = 1;
gunMetni.setSize(25, 22);
gunMetni.text = "Gün";
gunMetni.move(195, 40);
yil.move(300, 40);
yil.setSize(55, 22);
yil.minimum = 1900;
yil.maximum = 2007;
yil.stepSize = 1;
yil.value = 1980;
yilMetni.setSize(30, 22);
yilMetni.text = "Yıl";
yilMetni.move(360, 40);
Açıklama:
import fl.controls.Label;
import fl.controls.NumericStepper; Diğer örneklerden de hatırlayacağınız gibi dinamik çalışmalarda bu komut ile her iki bileşene ait kodlar önce import edilir.
var aciklama:Label = new Label();
var ayMetni:Label = new Label();
var gunMetni:Label = new Label();
var yilMetni:Label = new Label();
var ay:NumericStepper = new NumericStepper();
var gun:NumericStepper = new NumericStepper();
var yil:NumericStepper = new NumericStepper(); Yine dinamik component çalışmasında kullanılan klasik kod grubu. Sahneye eklenen 4 label ve 3 numericStepper için isimlendirme yapılmıştır.
addChild(aciklama);
addChild(ayMetni);
addChild(gunMetni);
addChild(yilMetni);
addChild(ay);
addChild(gun);
addChild(yil);Dinamik tüm çalışmalarda uygulanacak olan kodların bileşenlere atanması için şart olan kod grubu.
aciklama.setSize(100, 22);
aciklama.text = "Doğum tarihiniz?:"
aciklama.move(210, 10); Acıklama isimli label bileşeninin boyutu, yazılacak metin ve metnin koordinatı atanmıştır.
ay.move(225, 40);
ay.setSize(40, 22);
ay.minimum = 1;
ay.maximum = 12;
ay.stepSize = 1;
ay.value = 1;
Ay isimli numericStepper`e ait elemanlar oluşturulur. Move: Koordinatları, setSize: Boyutu, minimum: Stepper`in inebileceği en alt değeri, maximum: Alınacak olan en üst değeri, stepSize:Her tıklamada sayıların kaçar kaçar artıp azalacağı, value: Dosya ilk açıldığında bileşen üzerinde görülmesini istediğiniz rakamsal değeri atamaktadır. Üstteki kodlarla ay isimli stepper ilk açıldığında 1 değerini gösterir,birer birer artar en alr rakamsal değer 1 en üst değer 12 dir.
Diğer tüm kodlar yukarıdaki sisteme göre hazırlanmıştır.
Üstteki çalışmayı hiç kod kullanmadan hazırlama yöntemi:
1- Önce sahneye 4 adet numericStepper bileşeni yerleştirelim. Her elemana ait metni üstüne veya yanına text aracı ile yazlım:
2- Properties panelinin hemen yanındaki parameters panelini açalım. Önce gün için ayarlanacak olan n.stepper bileşenini tek tıklama ile seçip parameters paneline bakalım:
Buradaki enabled true olmalıdır.False olursa çalıştırılması mümkün olmaz. Maximum görülmesini istediğiniz en üst değer,minimum en alt değer, stepSize tıklama ile atlanacak sayı değeri, value ise sahnede görmeyi istediğiniz rakamsal değeri gösterir.
Aynı işlemler ay bileşeni için yapılır.
Son olarak yıl bileşen elemanları düzenlenir.Şimdi filmi test edebilirsiniz.
Flash CS3 ProgressBar ve UILoader Component:
Bu bölümde ProgressBar ve UILoader Component kullanarak bir resim dosyasının harici yüklenmesine ait bir örnek anlatılacaktır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir tane ProgressBar, bir tane Label ve bir tane IULoader bileşenini sahneye sürükleyip bırakın. Sahnede yerleştirilen yerin önemi yoktur.Çünkü kodlarla bu koordinatlar yeniden düzenlenecektir.
2- Progressbar bileşenine bar, label bileşenine metin ve IULoader bileşenine yukleme ismini properties panelinden atayın.1.kareye şu kodları atayıp filmi test edin.
var url:String = "resmimiz.jpg";
yukleme.autoLoad = false;
yukleme.source = url;
yukleme.move(2, 2);
yukleme.scaleContent = true;
yukleme.load();
bar.source = yukleme;
bar.move(73,100);
bar.addEventListener(ProgressEvent.PROGRESS, ilerleme);
bar.addEventListener(Event.COMPLETE, sonuc);
metin.text = "veriler yükleniyor";
metin.autoSize = TextFieldAutoSize.LEFT;
metin.move(118, 120);
function ilerleme(event
rogressEvent):void {metin.text = "%"+Math.round((event.bytesLoaded/event.bytesTotal)*100 )+ " yüklendi ";
}
function sonuc(event:Event):void {
bar.removeEventListener(ProgressEvent.PROGRESS, ilerleme);
bar.removeEventListener(Event.COMPLETE, sonuc);
removeChild(bar);
removeChild(metin);
}
Açıklama:
var url:String = "resmimiz.jpg"; Bir değişken oluşturulup değer olarak yüklenecek dosyanın yolu yazılır.
yukleme.autoLoad = false; false değeri yükleme komutunun çalışması için load komutuna ihtiyaç duyar. Şayet load komutu ile yükleme emri verilezse harici dosya yüklenemez. true değeri verilirse load komutunun verilmesine gerek duymadan otomatik yükleme yapar.
yukleme.source = url; yüklenecek kaynak dosyanın adresi yazılır.Biz bu adresi bir değişkene atadığımız için bu alana url değişkeni yazılır.isterseniz değişken kullanmadan buraya doğrudan adresi yazabilirsiniz.
yukleme.move(2, 2); yüklenecek jpg dosyasının sahnedeki x ve y koordinatları atanır.
yukleme.scaleContent = true; harici yüklenen resim dosyasının ebadları ne olursa olsun bileşenin boyutlarına ölçeklenir.Bu değeri false olarak alırsanız tüm ebadları koruyarak dosya yüklenir.
yukleme.load(); autoLoad değerini false olarak verdiğimiz için bu komutu kullanmak zorundayız. Komut olmadan yükleme yapılmaz. Şayet autoLoad değerini true yaparsanız bu komut dizinini kullanmanıza gerek yoktur.
bar.source = yukleme; Bu komut dizini progressbar ile IULoader bileşeni arasındaki ilişkiyi kurar. Bu bağlantı dizininden sonra progressbar bileşen kodlarının özellikleri atanacaktır.
bar.move(73,100); Progressbar bileşeninin sahnede görüleceği x ve y koordinatlarını oluşturur.
bar.addEventListener(ProgressEvent.PROGRESS, ilerleme); yükleme işlemi tamamlanana kadar ilerleme isimli fonksiyon çalıştırılmaktadır. Biraz sonra göreceğiniz gibi ilerleme fonksiyonunda metin isimli label bileşeninde yüklenen dosyanın yüzde değeri gösterilmektedir.
bar.addEventListener(Event.COMPLETE, sonuc); yükleme işlemi tamamlandığı an sonuc isimli bir fonksiyonu çağırır ve çalıştırır. Bu fonksiyonun içeriği az sonra açıklanacaktır.
metin.text = "veriler yükleniyor"; çok gerekli bir dizin değildir.Label bileşeni sahnede ilk gözüktüğünde içereceği metni atar. Veriler yüklendikçe bu alanda yüzde değerleri gözükecektir. Bu dizindeki metin label bileşeni sahnede gözüktüğünde ve bir nedenle veri yüklenmesi kesilmiş ise alanın boş kalmasını önler.Ama yükleme hemen başlarsa bu metni sahnede görme şansımız olmayabilir.
metin.autoSize = TextFieldAutoSize.LEFT; Metin bileşenin sol tarafına yaslanarak yüklenir.
metin.move(118, 120); label bileşeninin sahnedeki x ve y koordinatlarını atar.
function ilerleme(event
rogressEvent):void {metin.text = "%"+Math.round((event.bytesLoaded/event.bytesTotal)*100 )+ " yüklendi ";
}
Yüklenen byte oranını label bileşeninde göstermek için kullanılan fonksiyondur.
function sonuc(event:Event):void {
bar.removeEventListener(ProgressEvent.PROGRESS, ilerleme);
bar.removeEventListener(Event.COMPLETE, sonuc);
removeChild(bar);
removeChild(metin);
}
Bu komut verilerin yüklenmesi bittikten sonra çalışacak fonksiyonu oluşturur.Bu fonksiyon çalıştığında bar isimli progressBar bileşenine atanan tüm kodlama özellikleri kaldırılır ve removeChild komutları ile progressbar ve label bileşeni sahneden silinir.
Flash CS3 RadioButton Component:
Bu bölümde sahnedeki 3 seçenekli radiobutton aracılığı ile film içindeki başka bir kareye geçiş yöntemi anlatılacaktır.
Uygulama:
1- Flash programını açıp components panelinden (panel açık değilse Ctrl+F7 tuşuna basarak açabilirsiniz) bir radiobutton ve bir button bileşenini sahneye sürükleyip bırakın. Kütüphaneyi açın Buradaki radiobutton bileşeninden 2 kez sahneye sürükleme yolu ile yerleştirin. Üstteki çalışmada göreceğiniz gibi sahnede alt alta duran 3 radiobutton ve hemen altında bir button bileşeni olsun. Properties panelinden radiobuttonlara sırası ile radio1, radio2 ve radio3 isimlerini atayın. Button bileşenine de butonumuz ismini verirn.
2- Ana timeline da bulunan tek frame yanına 3 adet blankframe ekleyin ve buraya 3 ayrı resmi import edin. Şimdi 1.kareyi seçip şu kodları atayın ve filmi test edin.
radio1.label = "2.kareye geç";
radio1.move(10, 10);
radio1.value="2";
radio1.addEventListener(MouseEvent.CLICK, secimSonucu);
radio2.label = "3.kareye geç";
radio2.move(10, 30);
radio2.value="3";
radio2.addEventListener(MouseEvent.CLICK, secimSonucu);
radio3.label = "4.kareye geç";
radio3.move(10, 50);
radio3.value="4";
radio3.addEventListener(MouseEvent.CLICK, secimSonucu);
butonumuz.move(10, 80);
butonumuz.label="Seçiniz"
function secimSonucu(event:MouseEvent):void {
var deger= event.currentTarget.value;
function git(event:MouseEvent):void {
gotoAndStop(deger)
}
butonumuz.addEventListener(MouseEvent.CLICK, git);
}
stop()
Açıklama:
radio1.label = "2.kareye geç"; radioButton bileşenin metnini atar.
radio1.move(10, 10); Bileşenin sahnede gözükeceği x ve y koordinatlarını oluşturur.
radio1.value="2"; Bileşene bir değer atanır.Burada radio1 bileşeni tıklandığında değer olarak 1 atanır.Bu değer daha sonra kodlarda kullanılarak değişik çalışmalar oluşturulur.
radio1.addEventListener(MouseEvent.CLICK, secimSonucu); Artık bu addEventListener koduna alışmış olmalısınız.RadioButtona fare ile tıkladığınız an secimSonucu isimli bir fonksiyon çalıştırılır.
Aynı işlemler diğer 2 bileşen içinde aynı şekilde uygulanır.
butonumuz.move(10, 80);
butonumuz.label="Seçiniz" Button bileşeni metni ve koordinatlarını oluşturur.
function secimSonucu(event:MouseEvent):void {
var deger= event.currentTarget.value;
function git(event:MouseEvent):void {
gotoAndStop(deger)
}
butonumuz.addEventListener(MouseEvent.CLICK, git);
}
Burada içiçe geçmiş 2 fonksiyon mevcut.var deger= event.currentTarget.value; Değer isimli bir değişkene radiobutton tıklandığında seçilen elemana ait değer atanır.Bu değer üstte açıklandığı gibi 2,3 veya 4 olabilir. function git(event:MouseEvent):void { Bu fonksiyon button bileşenine ait bir fonksiyondur ve button bileşeni tıklandığında çalışacak fonksiyon grubudur. gotoAndStop(deger)Button bileşeni tıklandığında deger bileşenine atanan frame numarasına ilerleme sağlanır. butonumuz.addEventListener(MouseEvent.CLICK, git); Bu kod butona basıldığında çalışacak fonksiyonu atar.
Basitçe özetlersek çalışma açıldığında 3 seçenekli bir radiobutton grubu var.örneğin siz 2.kareye gidin seçeneğini tıkladığınızda bir değişkene 2 değeri atanır.Sonra Seçiniz isimli butona bastığınızda film 2 numaralı kareye atlar.
Aynı çalışmayı bir kareye atlamak için değil de bir linki açmak için kullanmak isterseniz kodları şu şekilde değiştirebilirsiniz.
(Ana timeline içindeki 2,3 ve 4 kareleri silin sadece ilk kareyi kullanın.)
radio1.label = "Yahoo";
radio1.move(10, 10);
radio1.value="http://www.yahoo.com";
radio1.addEventListener(MouseEvent.CLICK, secimSonucu);
radio2.label = "Google";
radio2.move(10, 30);
radio2.value="http://www.google.com";
radio2.addEventListener(MouseEvent.CLICK, secimSonucu);
radio3.label = "AltaVista";
radio3.move(10, 50);
radio3.value="http://www.altavista.com";
radio3.addEventListener(MouseEvent.CLICK, secimSonucu);
butonumuz.move(10, 80);
butonumuz.label="Seçiniz"
function secimSonucu(event:MouseEvent):void {
var deger= event.currentTarget.value;
function git(event:MouseEvent):void {
var link:URLRequest = new URLRequest(deger);
navigateToURL(link);
}
butonumuz.addEventListener(MouseEvent.CLICK, git);
}
