Türkiye Haritası


Çok sık istek aldığı için bu örneğe yer verilmiştir. Genel istek; il üzerine fare ile gelindiğinde renk değiştirmesi veya öne protrüze olması, tıklandığında ilin büyütülmüş görüntüsünün ayrı bir sayfa olarak açılması şeklinde idi.

Actionscript açısından basit kodlar kullanılır. Asıl zorluk haritanın çizimindedir. Bunun için en iyi yöntem grafik tabletlerinin kullanımıdır. Veya harita flash içine import edildikten sonra bulunduğu layer üzerine yeni bir layer eklenir. Line aracı ile alttaki illerin çizimleri işlenir, işlem bitince alttaki layer silinir.

Çalışmamızdaki örnek http://www.meb.gov.tr/ adresinden alınıp uyarlanmıştır.

Uyarı: Her il için bir sayfa hazırlama zahmetli olacağından il üzerine tıklandığında açılacak sayfa hazırlanmadığından sayfa açılamadı şeklinde uyarı alacaksınız. Çalışmanın sonunda her il için hazırlanacak sayfanın adı yazılacaktır.Kodlara göre sayfa adı verileceğinden açılacak sayfa isimlerinin size yazılanlardan farklı olmamasına dikkat etmelisiniz.

 

 

DOSYAYI İNDİR

Uygulama:

Çalışmayı incelediğinizde çok fazla anlatılacak bir dosya olmadığını göreceksiniz.Burada en önemli konu çizimin yapılabilmesidir.Sahneye yerleştirilen her il bir film klibi şeklindedir ve bu klip üzerine gelindiğinde 2.kareye geçiş yaparak bir renk değişim efekti verir. Bu nedenle çalışmada sadece kodlardan bahsedilecek ve uyarlamayı nasıl yapacağınız tanımlanacaktır.

Fla dosyası açtığınızda sahnede harita adında tek bir klip ve bunun altında deniz ve kara çizgisini belirleyen bir arkaplan vardır. Harita klibine çift tıkladığınızda asıl çalışmanın içine girmiş olursunuz.Tüm kodlar bu bölümdedir. Burada alt layera dış kenarları çizilmiş haritamız yerleşmiş bunun üstünde de tüm şehir klipleri tek tek ilgili kısma eklenmiştir. Ayrıca sahne dışına şehirlerin isminin atanacağı bir dinamik kutu içeren film klibi eklenir.Bu klibin instance name`i balon` dur.

Şehir kliplerini tek tek seçerek baktığınızda hepsinde de aynı kodların bulunduğunu göreceksiniz. Bu kodlar birazdan anlatacağımız timeline üzerinde actionscript layerına yerleştirilmiş fonksiyonları çalıştırmaktadır.

on (rollOver) {
y = new String(_name);
a = y.slice(1, 3);
_parent.rbtxt(a);
}
on (rollOut) {
_parent.rbalon(a);
}
on (release) {
_parent.rpress(a);
}


Yukarıdaki kodları incelemeden evvel şehir kliplerine tek tek tıklayarak instance name alanına bakarsanız tüm kliplere önce x sonra plaka numarasının eklendiğini göreceksiniz. Örneğin Samsun il klibinin instance name`i x55 , İstanbul`un x34 dür. Bu isimlendirme çok önemlidir. Çünkü daha sonra yazılacak fonksiyonlarda bu kliplere ait x karakterinden sonra gelen rakam alınarak kullanılacaktır. Şimdi kodları irdeleyelim:

on (rollOver) {
y = new String(_name);
a = y.slice(1, 3);
_parent.rbtxt(a);
}
// Fare klip üzerine geldiğinde y değişkenine klibin adı atanıyor.Örneğin Samsun için y değişkeni x55 adını alır. Daha sonra a değişkenine slice metodu ile y değişken değerinin son iki karaktere atanıyor. Bu Samsun için 55 olur. a değişkenine ait 55 değeri daha sonra timelineda tanımlanacak olan rbtxt adlı fonksiyona gönderilecek ve bu fonksiyon çalıştırılacaktır.

on (rollOut) {
_parent.rbalon(a);
}

// Fare klip üzerinden çekildiğinde yine daha sonra anlatılacak olan rbalon fonksiyonuna a değeri gönderilip çalıştırılacaktır.

on (release) {
_parent.rpress(a);
}

// Klip tıklandığında rpress fonksiyonuna a değeri gönderilerek çalıştırılır.

Şimdi bunlar çalıştığında ne olacağını anlamak için timeline üzerindeki kodlara bakalım:

//Etiket için şehir isimleri
ilad = "a,Adana,Adıyaman,Afyon,Ağrı,Amasya,Ankara,Antalya,Artvin,Aydın,Balıkesir,Bilecik,Bingöl,Bitlis,Bolu,Burdur,Bursa,
Çanakkale,Çankırı,Çorum,Denizli,Diyarbakır,Edirne,Elazığ,Erzincan,Erzurum,Eskişehir,Gaziantep,Giresun,Gümüşhane,Hakkari,
Hatay,Isparta,Mersin,İstanbul,İzmir,Kars,Kastamonu,Kayseri,Kırklareli,Kırşehir,Kocaeli,Konya,Kütahya,Malatya,Manisa,Kahramanmaraş,
Mardin,Muğla,Muş,Nevşehir,Niğde,Ordu,Rize,Sakarya,Samsun,Siirt,Sinop,Sivas,Tekirdağ,Tokat,Trabzon,Tunceli,ŞanlıUrfa,Uşak,Van,Yozgat,
Zonguldak,Aksaray,Bayburt,Karaman,Kırıkkale,Batman,Şırnak,Bartın,Ardahan,Iğdır,Yalova,Karabük,Kilis,Osmaniye,Düzce";

//Gidilecek adres için şehir isimleri
ilurl = "a,adana,adiyaman,afyon,agri,amasya,ankara,antalya,artvin,aydin,balikesir,bilecik,bingol,bitlis,bolu,burdur,bursa,
canakkale,cankiri,corum,denizli,diyarbakir,edirne,elazig,erzincan,erzurum,eskisehir,gaziantep,giresun,gumushane,hakkari,
hatay,isparta,mersin,istanbul,izmir,kars,kastamonu,kayseri,kirklareli,kirsehir,kocaeli,konya,kutahya,malatya,manisa,kmaras,
mardin,mugla,mus,nevsehir,nigde,ordu,rize,sakarya,samsun,siirt,sinop,sivas,tekirdag,tokat,trabzon,tunceli,sanliurfa,usak,van,
yozgat,zonguldak,aksaray,bayburt,karaman,kirikkale,batman,sirnak,bartin,ardahan,igdir,yalova,karabuk,kilis,osmaniye,duzce";

//Buton üzerine gelince çalışacak olan fonksiyon
function rbtxt(a) {
var Register_1_ = a;
var Register_2_ = this;
balon._visible = true;
arbtxt = ilad.split(",");
balon.txt.text = arbtxt[Register_1_];
Register_2_[("x" + Register_1_)].play();
balon._x = Register_2_[("x" + Register_1_)]._x;
balon._y = (Register_2_[("x" + Register_1_)]._y - Register_2_[("x" + Register_1_)]._height / 2) - 25;
}

//Buton üzerinden ayrılınca çalışacak olan fonksiyon
function rbalon(a) {
balon._visible = false;
this[("x" + a)].gotoAndStop(1);
}

//Butona tıklanınca çalışacak olan fonksiyon
function rpress(a) {
arburl = ilurl.split(",");
getURL(arburl[a] + ".html", "_blank");
}

Önce ilad isimli bir değişkene tek bir string şeklinde tüm şehir adları virgül ile ayrılarak yazılır. Bu değer daha sonra split komutu ile virgülden itibaren ayrılacak. Ve tüm isimler arbtxt adlı bir dizi oluşturacaklardır. Bu dizi fare ile şehirler üzerine gelindiğinde isminin yazıldığı balon klibi içindeki dinamik metin kutusuna aktarılmak için kullanılacaktır.

Split komutu kullanılmadan da şehir isimleri doğrudan bir diziye aktarılarak kodlama yapılabilirdi ama hazırlayan yazarın tercihi bu yönde olduğundan değiştirilmedi. Çalışmaının sonunda split komutu kullanılmadan daha temiz bir kod grubu yazılacaktır

ilurl = yine aynı yöntemle ayrılarak şehir üzerine tıklandığında gidilecek adresin bir parçasını oluşturacaktır.

Yukarıdaki fonksiyonların ne amaçla oluşturulduğu üzerinde yazılmaktadır. Biz tüm çalışmanın oluşumunu bir örnekle anlatalım. Fare ile Samsun klibi üzerine geldiğimizde hangi fonksiyonlar çalışır ve neler olur bunu inceleyelim. Samsun klibi üzerine geldiğimizde bu klibe atanan rollOver kodları çalışır:,

y = new String(_name); klibin adı x55 olduğundan y değeri x55 olur.
a = y.slice(1, 3); y değişkeninin 2. ve 3. karakteri a değişkenine atandığından a=55 olur.
_parent.rbtxt(a);parent klibin bir üst seviyesini tanımlamak için kullanılır.(yani harita klibinin timeline`ını).55 olan a değeri rbtxt fonksiyonuna gönderilir ve bu fonksiyon çalıştırılır. Fonksiyon çalıştırıldığında:(fonksiyonun tamamı üstte yazılmıştır)

var Register_1_ = a; yani Register_1_ değeri 55 olur.(Çünkü klipten bu değer gönderilmişti.)
arbtxt = ilad.split(","); komutu ile en üstte yazılan isimler dizi haline getirilir.
balon.txt.text = arbtxt[Register_1_]; Sahne dışına eklediğimiz balon klibi içindeki txt adlı dinamik metin kutusuna arbtxt[Register_1_];
dizisinin adı yazdırılır. Register_1_ a değerine yani 55 e eşit olduğundan dizinin 55. elemanı olan Samsun adı dinamik metin kutusuna yazdırılır, diğer kodlarla da x ve y koordinatı ayarlanarak klibin adı kullanıcya gösterilmiş olur.Register_2_[("x" + Register_1_)].play(); bunun açılımı this.x55.play(); şeklindedir ve doğal olarak klip renk değişimi efekti verecektir.

Fareyi klip üzerinden çektiğimizde rollOut kodları çalışır. balon._visible = false; balon klibi yani yazı kaybolur ve this[("x" + a)].gotoAndStop(1); yani this.x55.gotoAndStop(1) ile klip eski rengine döner.

Son olarak fareyi tıkladığınızda çalışacak fonksiyon grubu:

function rpress(a) {
arburl = ilurl.split(",");
getURL(arburl[a] + ".html", "_blank");
}

a değerini 55 kabul etmiştik. Yine diğer fonksiyon gibi arburl adlı bir diziye split metodu ile bölünen ilurl isimleri atanır. arburl[a] + ".html" kodu şunu tanımlar arburl dizisinin 55. elemanını çağırır.Biz bunu samsun olarak yazdığımızdan o değer döner ve .html ile birleşerek şu adresi verir. samsun.html. Yani açılım:

getURL("samsun.html", "_blank"); olur. Ve bu sayfa blank olarak açılır. İstanbul tıklanırsa istanbul.html sayfası açılır.

ÖNEMLİ NOT: Sayfayı editlerken yani her tıklandığında açılacak şehir detaylarını gösteren sayfaların ismini üstte anlattığım nedenlerden dolayı ilurl değişkenindeki isimlerle aynı olmasına dikkat etmelisiniz. Örneğin Adıyaman ili tıklandığında açılacak sayfanın adı adiyaman.html , Elazığ için elazig.html şeklinde olmalıdır. Başka isimler yazılırsa anlatılan nedenlerden dolayı sayfa açılmayacaktır.

Uygun kodlama aşağıdaki gibidir:

Harita klibinin 1.karesinde bir seri gerek olmayan kod grubu vardır.Özellikle kullanılan split komutu flash`ı zorlayan komutlardandır ve amacı bir string`den aradaki bir ayraçı (burada virgül kullanıldı) kullanarak dizi yaratmaktır .O halde stringi yazmadan ve split komutunu kullanmadan ve gereği olmayan fazladan değişkenleri atarak (Register_1_ ,Register_2_, arbtxt ,arburl gibi) daha temiz bir kod grubu oluşturulabilir.1.karedeki kodları aşağıdakilerle değiştirip kullanabilirsiniz:

//Etiket için şehir isimleri
ilad =["","Adana","Adıyaman","Afyon",.........diğer 80 şehir adınıda girmelisiniz...............];
//Sadece 3 şehir yazılmıştır virgülden sonra diğer şehir isimlerini de eklemelisiniz

//Gidilecek adres için şehir isimleri
ilurl =["","adana","adiyaman","afyon",.........diğer 80 şehir adınıda girmelisiniz...............];
//Sadece 3 şehir yazılmıştır virgülden sonra diğer şehir isimlerini de eklemelisiniz

//Buton üzerine gelince çalışacak olan fonksiyon
function rbtxt(a) {
balon._visible = true;
balon.txt.text = ilad[a];
this[("x" + a)].play();
balon._x = this[("x" + a)]._x;
balon._y = (this[("x" + a)]._y - this[("x" + a)]._height / 2) - 25;
}

//Buton üzerinden ayrılınca çalışacak olan fonksiyon
function rbalon(a) {
balon._visible = false;
this[("x" + a)].gotoAndStop(1);
}

//Butona tıklanınca çalışacak olan fonksiyon
function rpress(a) {
getURL(ilurl[a] + ".html", "_blank");
}

Son olarak bu kod grubunda dizi içinde gördüğünüz ilk karakter olan "" ve yukarıda çalışmayı hazırlayan otörün eklediği a karakterinin nedeni şudur. Dizilerde ilk karakterin indexi sıfırdan başlar. Biz kliplerimizde şehir plakalarını esas aldığımızdan kodlama 1 den başlamaktadır.Bu nedenle ilk karakter hatalı okuma olmaması için boş bırakılmıştır veya a gibi kullanılmayan bir karakter eklenmiştir.