ActionScript'in Temelleri (Ders 9)

ActionScript 2.0

ActionScript 2.0, nesne yönelimli (object-oriented) bir script dilidir. Nesne yönelimli diller, belirli işlev tiplerini alıp sınıf (class) adı verilen araçlar (sınıflar, bu işlevselliği kullanması gereken öğeler için birer şablon gibi kullanılırlar) halinde organize ederek script yazanların ve programcıların hayatını kolaylaştırmak için tasarlanmıştır. Bir sınıf kullanmak istiyorsanız bu sınıfın bir örneğini (instance) oluşturursunuz; bu örnek, nesne (object) olarak adlandırılır. Nesne, kalıtım yoluyla sınıftaki bütün talimatları alır, yani ne olduğunu ve geçerli durumda neler yapabileceğini az çok bilir. Nesnelerin metotları (method), yani nesnelerin yaptığı şeyler vardır, bunun dışında kendilerini tanımlayan özellikleri (property) ve yayınlamak ya da cevap vermek için kullandıkları olayları (event) vardır. Bu konuyla ilgili ayrıntıları daha sonra göreceğiz. Şu anda bunun ActionScript 2.0’ın çalışma şeklinin bir parçası olduğunu bilmemiz gerekiyor.

ActionScript 2.0, BÜYÜK/küçük harflere duyarlıdır, yani BÜYÜK ve küçük harfleri kullanarak değişkenler (variable), fonksiyonlar (function) ve örnek isimleri (instance name) oluşturduğunuzda bu öğelere ait tüm referansların tanınabilmesi için referanslarda BÜYÜK/küçük harf yazımına kesin olarak uyulması gerekir. Ayrıca ActionScript tarafından kullanılan metotlar, özellikler ve olayların da kesin olarak bu yazım şekline uyması gerekir. getURL() metodu getUrl() ile aynı şey değildir. Eğer R ve L harflerini büyük yazmazsanız, Flash neden bahsettiğinizi ve ne yapmaya çalıştığınızı anlamayacaktır. BÜYÜK/küçük harf yazımına duyarlıdır.

ActionScript 2.0’ın belirtmek istediğimiz son özelliği, genişletilebilir (extensible) olmasıdır. Yani ona, ilk geldiğinde yapamadığı şeyleri yaptırabilirsiniz. Flash 8 Basic sadece belirli sınıflar ve becerilerle gelir. Örneğin çalışanlarla ilgili karmaşık veri yönetimi gibi gösterişli işlevlerin bu işlerden anlayan zeki geliştiriciler tarafından yaratılması gerekir. Geliştirici, Flash’ta verileri istenen şekilde yönetebilmek amacıyla kendi sınıflarını, nesnelerini, metotlarını ve olaylarını yaratabilir. Bu, ActionScript 2.0’a her şeyi yaptırabileceğiniz anlamına gelmez, ama pek çok şey yaptırmak mümkündür. Ayrıca geliştiriciler kendi ActionScript kodlarını Extension Manager’la kurulabilen davranışlara, bileşenlere ya da menü komutlarına dönüştürebilirler (Extension Manager’la ilgili ayrıntılı bilgi için, Ek A bölümüne bakınız).

İpucu: Sınıfların, metotların, özelliklerin ve özel nesnelerin oluşturulması bu kitabın kapsamı dışındadır, ama burada bu kavramlara yer vereceğiz. Kendi sınıflarınızı, metotlarınızı ve özelliklerinizi nasıl oluşturacağınızı öğrenmek için Macromedia Flash 8 ActionScript: Training from the Source kitabını inceleyebilirsiniz.

Sınıflar, Metotlar ve Özellikler

ActionScript 2.0 ve Flash 8 Basic sınıflar, nesneler ve nesne örneklerinin kullanıldığı işlevsel bir model üzerine kurulmuştur. Bu modelin çalışma şekliyle ilgili her şeyi bilmeniz gerekmez; ancak temelini oluşturan kavramları bilirseniz bunun faydasını görürsünüz, çünkü bunlar Flash 8 ve ActionScript 2.0’ın nasıl çalıştığıyla (ve sizin için nasıl çalıştığıyla) ilgili olarak hemen her noktaya değinmektedir. Ayrıca, bu konu hakkında ne kadar fazla bilgi sahibi olursanız, uygulamanızı yönetmeniz de o kadar kolay olur.

Öncelikle bir sınıfın (class) ne olduğunu anlamanız gerekir. Sınıf, ortak becerileri ve özellikleri tanımlayan script’lerden oluşan bir koleksiyondur. Sınıflar önemli bileşenlerdir, çünkü geliştiricileri, aynı ya da farklı uygulamalarda aynı işi yaparken ihtiyaç duydukları kod satırlarını her seferinde tekrar tekrar oluşturma mecburiyetinden kurtarırlar. Sınıfları işlevsellik için kullanılan birer şablon olarak düşünebilirsiniz ve programcılıkta, Flash’ta ve gerçek hayatta her şey aslında bir tür sınıfa aittir diyebiliriz.

Örneğin, diyelim ki köpekleri çok seviyorsunuz ve bir gün yavru bir köpek aldınız. Yavru köpekler Köpek sınıfına aittir ve Köpek sınıfı, dünya üzerinde bulunan ve çiçek tarhlarına zarar veren her köpeğin ana şablonudur. Bildiğiniz gibi sonuçta köpek, köpektir, çünkü ister küçük, ister büyük olsun, bütün köpekler benzer özelliklere sahiptir ve belirli bir şekilde davranır. Bir üretim çiftliğinden ya da evcil hayvan satıcısından bir köpek aldığınızda köpek sınıfının bir örneğini yaratmış olur (her ne kadar teknik olarak yavru köpek örneğini anne köpek doğurmuş olsa da) ve böylece bir köpek nesnesine sahip olursunuz. Yavru köpek, köpek şablonundan ya da köpek sınıfından oluşturulur ve kalıtım yoluyla köpeklerin doğumdan itibaren sahip oldukları bütün metotları ve özellikleri alır. Sizse sadece coşku dolu bir arkadaş edindiğinizi düşünürsünüz.

Bütün köpekler ortak metotlara sahiptir, örneğin havlamak(), salyaakitmak() ve kosmak() gibi. Metotlar, belirli bir nesnenin yaptığı şeylerdir. Köpekler ayrıca benzer özelliklere sahiptir: tuyCinsi, boy, ağırlık, cinsiyet, isim, vs. Özellikler, bir nesnenin fiziksel yapısını tanımlar. Bir köpeği eğittiğinizde ona yeni metotlar eklersiniz, köpeğin bakımını yaptığınızda ise onun özelliklerini değiştirirsiniz. Bununla birlikte, metotları çağırmak ve özellikleri değiştirmek, köpeğin temel yapısında bir değişiklik oluşturmaz. Dolayısıyla, ona ne yaparsanız yapın, ne öğretirseniz öğretin, köpek yine köpektir ve hep öyle kalacaktır. Anlaşıldı mı? Güzel. Çünkü köpek gibi bir nesnenin temel yapısını değiştirmeye başlamak istiyorsanız, kendi sınıflarınızı yaratmanız gerekecektir. Neyse ki Flash’ta bu kadar ileri gitmeniz gerekmeyecek, çünkü Flash’taki mevcut sınıflar sizin gerçekleştirmek istediğiniz işlemler için genelde yeterlidir.

Not: Kendi sınıflarınızı yaratmak istiyorsanız, bunların, uzantısı .as olan ve yayınladığınızda SWF dosyasına derlenen harici dosyalarda oluşturulması gerekir. Bu derslerdeki alıştırmalarda herhangi bir sınıf yaratmayacaksınız, ama ActionScript’in içinde mevcut olan “yerleşik sınıflar”ı kullanacaksınız. Bu sınıflar da Flash’ın install dizininde harici olarak .as dosyalarında depolanmaktadır. Bunları inceleyebilirsiniz ama sakın değişiklik yapmayın.

ActionScript 2.0, Math sınıfı, Button sınıfı ve Date sınıfı gibi bir dizi yerleşik sınıf içerir. Daha önce MovieClip sınıfını ve onun bazı metotlarını ve özelliklerini(stop ve gotoAndPlay metotları gibi) kullanmıştınız. MovieClip sınıfını, değiştirebileceğiniz ya da belirli bir örnek için yeniden ayarlayabileceğiniz özelliklere de (_visible, _width ve _height gibi) sahiptir. Aslında Stage’iniz de MovieClip sınıfının bir örneğidir. Yerleşik bir sınıfın nasıl kullanıldığını kısaca inceleyeceğiz. Flash’la gelen MovieClip, Button, TextField ve Component bileşen sınıflarını temel alan nesneler görsel olarak yaratılabilir (diğer bir deyişle bunların örnekleri oluşturulabilir). Ancak birçok Flash sınıfının örneğinin (LoadVars ve Sound gibi) ActionScript kullanılarak oluşturulması gerekir. ActionScript kullanarak bir sınıfın yeni bir örneğini yarattığınızda aslında yapılandırıcı fonksiyon (constructor function) adı verilen bir öğeyi çağırırsınız. Yapılandırıcı fonksiyon, bir sınıfını içinde tanımlanan ve nesneyi oluşturarak belleğe gönderen özel bir fonksiyon türüdür. Bunu bir otomobil fabrikasındaki montaj hattına benzetebiliriz. ActionScript kullanarak yeni bir nesne örneği yaratmak için aşağıdaki gibi bir satır yazabilirsiniz.

var rockinSound: Sound = new Sound();

Bu örnekte Sound sınıfının yeni bir örneğini yaratarak (ya da yapılandırarak) ona rockinSound örnek ismini veriyorsunuz. Böylece gerektiğinde ona göndermede bulunabilirsiniz. Sound örneği bellekte saklanır, dolayısıyla onu kullanmak için ismiyle çağırmanız gerekir. Çocuğunuzu yuvadan almaya gittiğinizde binaya girip “Haydi çocuklar, gidiyoruz!” diye bağırmazsınız, çünkü bir sürü çocuk peşinize takılabilir, ya da birkaç çocuk gelebilir veya hiçbir çocuk gelmeyebilir. Ele avuca sığmayan çocuğunuzu çağırmak için “Zeynep, haydi!” diye bağırmanız gerekir. Çocukları yuvadan alırken ortaya çıkan beklenmedik bir sonuç, aslında kötü bir sonuçtur ve bunu ActionScript’e uyarladığımızda benzer bir durum ActionScript’te de kötüdür. “Haydi Sesi”nin Flash için bir anlamı yoktur. Dolayısıyla Sound sınıfı örneğini adlandırmanız, sonra da bir şey yapmasını istediğinizde onu ismiyle çağırmanız gerekir. Stage’deki bir movie clip’in kütüphanede (Library) yer alan bir movie clip sembolünün örneği ya da kopyası olması gibi, rockinSound da Sound sınıfının sadece bellekte bulunan ve sizden alacağı komutları bekleyen bir örneğidir.

Sound sınıfı, yerleşik sınıfa bir örnektir. Yerleşik sınıf demek, Flash’la birlikte gelen, bilgisayarınıza yüklenen ve ActionScript diliyle yazılmış olan bir sınıf demektir. Sınıf ayrıca, sınıfını kendisini oluşturan önceden tanımlanmış metotlara ve özelliklere sahiptir. Macromedia’nın programcıları tarafından üretildikleri için endişelenmeniz gerekmez.

Metotlar ve Özellikler

Sınıflar, önceki bölümde gördüğünüz gibi, çeşitli metot ve özel iklerden oluşur demiştik. Metotlar (method), bir nesnenin sınıfıyla (Sound sınıfı gibi) ilişkili fonksiyonlardır ve nesnelerle belirli işlemler yapmak için kul anılırlar. ActionScript 2.0 dilinde, daha önce tanımını öğrendiğiniz yerleşik sınıflara ait yerleşik metotlar mevcuttur. Örneğin setRGB(), Color sınıfına ait bir yerleşik metottur. Bu metot, belirli bir SWF dosyasında yer alan bir örneğin on altı tabanlı renk değerini ayarlar.

Özellikler (property) de, ActionScript 2.0 ve Flash 8 Basic’le birlikte gelen sınıflarda yerleşik olarak bulunan öğelerdir. Özellikler, bir örneğin fiziksel yapısını tanımlamak için kullanılan değişkenler ya da veriler gibidir ve daha çok SWF dosyalarınızda kullandığınız değişkenlere benzerler. Örneğin 6. Ders’te aşağıdakine benzer bir kod parçası kullanmıştınız:

myMovieClip_mc._visible = true;

Bu kodda, _visible, bir örneğin görünürlük durumunu tanımlayan bir özelliktir(görünüyorsa true, görünmüyorsa false değerini alır). Koddan da anlayacağınız gibi görünürlük (visibility) özelliği, Stage’deki myMovieClip_mc örneği için kullanılmaktadır.

Not: Olayları ve olay işleyicilerini bu derste daha ileride “Olayları ve İşleyicileri Kullanmak” başlığı altında inceleyeceğiz.

Kesin Tip Belirleme Yönteminin Kullanılması

Kesin tip belirleme, bir değişken oluşturulurken, Flash’a bunun veri tipinin ne olduğunu, ne tür bir nesne olduğunu, yerleşik bir sınıfı mı, yoksa özel sınıfları mı temel aldığını açık bir şekilde bildirmek anlamına gelir. Yeni bir değişken oluşturduğunuzda (ya da bildirdiğinizde) ve bunu belirli bir sınıf (veri tipi) olarak tanımladığınızda, o sınıfın kuralları uygulanır. Flash, bu değişkende sadece bu türden bir verinin depolanmasını bekler. Örneğin String sınıfı için değişkende bir dizenin depolanmasını bekler. Kesin tip belirleme özelliğini, kendi hatalarınızdan korunmak için kullanırsınız. Sadece karakter içerebilen bir öğeye yanlışlıkla sayı bilgisi göndermeye çalıştığınızda uygulamayı dağıtmadan çok önce bir hata mesajıyla karşılaşırsınız. Uygulamayı çalışır hale getirmeden önce sorunları gidermeniz gerekir. Örneğin aşağıdaki kodda olduğu gibi yeni bir değişken bildirdiğinizde Flash’a sadece karakter depolayan benimDizem adında yeni bir değişken yaratmasını söylemiş olursunuz.

var benimDizem: String;

Değişkeni bildirirken, Flash’a sadece hangi veri tipinin kullanılacağını söylemeniz gerekir. Yani, bildirdiğiniz her değişken için kesin tip belirleme işlemini sadece başlangıçta yapmanız gerekir. Kesin tip belirleme yöntemiyle oluşturulan bir değişkende, aşağıda görüldüğü gibi farklı bir veri tipi depolamaya çalışırsanız, bu belgeyi yayınladığınızda bir hata ortaya çıkar.

var benimDizem: String;
benimDizem = 15;

Bir hatanın ortaya çıkmasının nedeni, bu değişkende bir sayı depolamaya çalışmanız ve bunun Flash tarafından kabul edilmemesidir, çünkü Flash’a bu değişkeni sadece karakterlerle kullanacağınızı söylemiştiniz. Bu, garajını kiraladığınız adamı, burada timsah beslemek konusunda ikna etmeye çalışmaya benzer. Yukarıdaki örnekte Flash, karakterlerden oluşan bir dize bekler, sayı değil. Bu yüzden buradaki sorunu gidermek için aşağıdaki kodu kullanabilirsiniz.

benimDizem = “15”;

15 sayısı artık 1 ve 5 karakterlerinden oluşmaktadır, dolayısıyla burada bir hata ortaya çıkmaz.

Actions Panelinde Kod İpuçlarını Kullanmak

Kod ipuçları (Code hints), Actions panelinde bulunan ve kendi ActionScript kodlarınızı yazarken kullanabileceğiniz bir özelliktir. Kod ipuçları, script yazarken zaman kazanmanızda yardımcı olur ve hatta script’lerinizin çalışmasını engelleyebilecek yazım yanlışlarını ve hataları azaltmanızı sağlar.


Kod ipuçları, bir metin alanına bir şey yazarken hangi özelliği kullanmanızın gerektiğini unuttuğunuzda çok işe yarayabilir. Bu açılır menüyü etkinleştirmenin iki yolu vardır: Değişkeni kesin tip belirleyerek tanımlamak ya da değişkene sonek ilave etmek. Dersler boyunca sonek ilave etmeyle ilgili çeşitli örnekler görmüştük.

Kod ipuçlarının ekranda belirmesini sağlamak için değişkenlerinizi, nesnelerinizi ve sembol örneklerinizi belirli şekillerde adlandırmanız ya da nesnelerinizi tip belirleyerek tanımlamanız gerekir. Bir değişken ismi oluşturduğunuzda, bu, bir oyunda puan olarak kullanılan bir sayıdan XML verilerine kadar herhangi bir şey için kullanılan bir değişken ismidir. Kesin tip belirleme ya da sonek yazma yöntemini kullandığınızda, Flash’a ilgili değişkenin ait olduğu veri tipini (sınıf)söylemiş olursunuz. Değişkenin veri tipini belirtirseniz, kod ipuçları ilgili sınıf için doğru metotları ve özellikleri gösterecektir. Tip belirleme konusunu bu derste daha önce görmüştünüz ve önceki şekilde, script’te tipi belirlemeyle tanımlanan bir nesneye göndermede bulunulduğunda kod ipuçlarının belirdiği bir örnek verilmiştir.

Bir değişkenin tipini tanımlamanın ikinci yolu sonek (suffix) kullanmaktır. Bu işlem, tip belirleme kadar esnek değildir, çünkü soneklerin ActionScript nesnelerine (sınıflar) göndermede bulunması gerekir (Sound sınıfıf ya da MoviClip sınıfıf gibi). FLA dosyanızdaki nesnelerin örnek isimlerinde sonek kullandığınızda, Flash bu örnekle ilgili doğru kod ipuçlarını görüntüler. Soneklere örnek olarak _mc (MovieClip), _btn (Button), _txt (TextField), _str (String) ya da _lv’yi (LoadVars) gösterebiliriz. Her sonek kod ipuçlarının görüntülenmesini sağlamasa da (_gr’de olduğu gibi, çünkü grafikler için ActionScript kodu yazamazsınız), bu adlandırma standardına uymanın önemli faydaları vardır. FLA dosyasının kütüphanesindeki her sembolün veri tipini kolayca hatırlamanızı sağlaması gibi. Aşağıda, değişkenlerde sonek kullanımıyla ilgili bir örnek görüyorsunuz.

var homeContent_lv = new LoadVars();
homeContent_lv.load(“home.txt”);

ActionScript’teki homeContent_lv değişkenini her kullanışınızda lv soneki ilave edilecektir, çünkü bu sonek değişken isminin bir parçasıdır. Her veri tipinin bir soneki olmayabilir (örneğin Object’in bir soneki yoktur). Bu yüzden, farklı değişkenlerinizin her birinde kod ipucu özelliğinden faydalanabilmek için, gerektiğinde bu bölümde anlatılan diğer yöntemleri de kullanmanız gerekebilir.


Flash’ın kod ipuçlarını görüntülemesini sağlamak için kullanabileceğiniz üçüncü bir yöntem daha vardır. Bu yöntemde veri tipini (değişkenin içerdiği verinin türü, String, Number, Movie Clip, LoadVars, vs.) ve değişken adını bir açıklamanın içine yazarsınız. Aşağıdaki örneği inceleyin.

// LoadVars homeContent;
homeContent.load(“home.txt”);

Açıklama (comment), ActionScript kodunun içine yazılan bir mesajdır. Açıklamaları, genellikle (kendinize ya da başkalarına) kodun o noktada ne işe yaradığını belirtmek ya da yapılması gereken işlemleri hatırlatmak için kullanırsınız. Açıklamalar herhangi bir kodu çalıştırmaz. Ancak bir açıklamayı bu şekilde kullandığınızda, aslında ActionScript nesnesini (burada bir LoadVars nesnesi) tip belirleme yöntemiyle tanımlamış olursunuz. Bu yüzden, siz değişken adından sonra nokta işaretini girer girmez Actions panelinde ilgili nesneye ait (yukarıdaki örnekte LoadVars) metotların ve özelliklerin yer aldığı bir liste görüntülenir.

Hangi yöntemi kullanacağınız tamamen size kalmıştır. Hangisini kullanacağınıza karar veremiyorsanız, aşağıda gördüğünüz gibi bu yöntemlerin bir bileşimini de kullanabilirsiniz.

var homeContent_lv:LoadVars = new LoadVars();

Kodu bu şekilde yazmak, sonek kullanılması dolayısıyla değişkenin ne olduğunu hatırlamanızı sağlayacağı için avantajlıdır. Bu teknik, ayrıca kesin tip belirleme yöntemini de içerdiği için, değişkeni kazara Number ya da String gibi yanlış bir veri tipine ayarlamaya çalışmanızı da önler.

Fonksiyonları ve Koşullu Deyimleri Kullanmak

Fonksiyonlar (function) tipik olarak bir FLA dosyasında tekrar tekrar kullanılan kod bloklarıdır. Fonksiyonlar, yaptıkları işi tamamladıktan sonra bir değer döndürebilir ve ayrıca çalıştırılma şekillerini değiştirmek üzere fonksiyonlara parametre aktarılabilir. Bağımsız deişken (argument) olarak da adlandırılan parametrelerle, bir fonksiyona değişmeyen (statik) bir değer veya bir değişken aktarabilirsiniz. Bundan sonra, bu değer(ler) fonksiyonunuza ait kodda kullanılabilir ve yönetilebilir. Parametreler fonksiyonunuzun çalıştırılma şeklini değiştirir.

Evde akşam yemeğinizi yaparken aslında siz bir fonksiyonu çalıştırırsınız. Bu bir fonksiyondur, çünkü doğduğunuzda yemek yapmayı bilmiyordunuz. Bunu ya babanızdan ya da büyükannenizden öğrenmişsinizdir. Yemek yapma fonksiyonunuzda değişiklik yapmak üzere “ne”, “ne zaman” ve “ne kadar” gibi parametreler kullanılabilir. Eğer kendi yemek yapma fonksiyonunuzu yazsaydınız, bu muhtemelen şöyle olurdu:

lezizYemekYap=function(ne,neZaman,neKadar)
{
sen.hazirla(ne);
FırınaKoy(neKadar);
pisir=neZaman
return ne
}

Bu örnekte lezizYemekYap, fonksiyonun adıdır. Burada ne yapacağınız yemek; neZaman, yemeği fırına koyacağınız saat ve neKadar da yemeğin fırında kalacağı sürenin miktarıdır. Bu fonksiyonu aşağıda gösterildiği şekilde çağırırsınız.

Self.lezizYemekYap(tavuk, 5:00,1hr);

Fonksiyon çalıştırıldıktan sonra tavuk sonucunu döndürür. Yani tavuk fırından cıkarılır. Mmm, tavuk, nefis.

Not: Bileşenlerin de parametre aldığına dikkat etmiş sinizdir. Yani Properties denetçisini ya da Component Inspector panelini kul anarak girdiğiniz ya da ayarladığınız parametre değerleri, aslında ActionScript’te bileşenler tarafından kullanılan belirli değerleri ayarlamaktadır. Her bileşendeki ActionScript kodu, Flash tasarım ortamında ayarladığınız değerleri temel alarak ne yapması gerektiğini anlar.

Fonksiyonlar, Flash ve ActionScript genelinde kullanılmaktadır. Birçok fonksiyon yerleşik tiptedir, ama ihtiyaçlarınıza göre kendi fonksiyonlarınızı da oluşturabilirsiniz. Daha önce basit stop fonksiyonundan LoadVars sınıfıfnın OnLoad metoduna kadar çeşitli fonksiyon örnekleri görmüştünüz. Aynı script’leri tekrar tekrar yazıyorsanız, benzer kod bloklarını tek bir fonksiyona dönüştürerek ve değişen öğeleri parametrelerle tanımlayarak ActionScript kodlarınızı daha rahat yönetebilirsiniz.

Koşullu deyim (conditional statement), fonksiyondan farklıdır ve belirli bir koşulun değeri true olursa çalışır. Koşullar bir Boolean değerini döndürür (true ya da false). Elde edilen değer, kodun çalıştırılıp çalıştırılmayacağını ya da bazen hangi kodun çalıştırılacağını belirler. Aşağıdaki örnekte bitter çikolatanın sağlığa yararlı olup olmadığını belirlemek için bir koşullu deyim kullanılmıştır. Eğer doktor sağlıklı olduğunu söylerse bitter çikolatayı yiyebilirsiniz. Aksi takdirde çikolata yiyemezsiniz.

if (bitterCikolata == saglikli) {
//eğer bu deyim doğruysa, şunu yap
self.ye(bitterCikolata);
} else {
//eğer bitter çikolata sağlıklı değilse, şunu yap
self.agla();
}

Gördüğünüz gibi koşullu mantığı normal yaşamınızda da, örneğin markete alışverişe gittiğinizde bitter çikolatayla sağlığınız açısından daha faydalı bir şey arasında seçim yaparken, kullanıyorsunuz. Normal hayatta olduğu gibi ActionScript’te de önce durumu değerlendiriyor, sonra da işlemi gerçekleştiriyorsunuz.

Not: Yukarıdaki kodda kullanılan çift eşittir işareti, iki değeri karşılaştırdığınızı gösterir. Daha doğrusu bu şekilde bir şeyin başka bir şeye eşit olup olmadığını görürsünüz. Bu işlemi eşleştirme yapma olarak düşünün.

İpucu: Kodlarda çeşitli girintilerin kullanıldığına dikkat etmiş sinizdir. Bunun yapılmasının tek amacı, kodun rahat okunmasını sağlamaktır. Girintili yazılan kodlar bazen hata ayıklamanızda da faydalı olur. Çünkü bu şekilde, kapatmayı unuttuğunuz bir parantezin olup olmadığın kolayca görebilirsiniz. Girintiler, aynı zamanda deyimlerle koşullu deyimleri birbirinden ayırmanızı sağlar. ActionScript kodlarınıza doğru bir şekilde girinti uygulamak isterseniz, Actions panelindeki Auto Format düğmesini kullanabilirsiniz.

Faaliyet Alanı

6. Derste ActionScript’i oluşturan bazı temel kavramları öğrenmiştiniz (değişkenler, anahtar sözcükler ve veri tipleri gibi). Ayrıca noktalı sözdiziminin çalışma şekli ve ActionScript satırları oluştururken bunun kullanılışı hakkında da biraz bilgi edinmiştiniz. Şimdi ActionScript’in bir FLA dosyasında nerelerde bulunduğunu göreceğiz.


ActionScript’le ilgili en önemli ve bazen de en kafa karıştırıcı konulardan biri, değişken faaliyet alanının çalışma şekliyle, bunun kod yazarken ve Flash dosyalarıyla çalışırken kullanılışıdır. Faaliyet alanı (scope), FLA dosyanızın bir değişkene başvuruda bulunabileceğiniz alanıdır. Yani bir değişken bir fonksiyonun içinde ya da bir Timeline gibi belirli bir yerde mevcutsa, faaliyet alanı da oradadır. Faaliyet alanı kavramının nasıl çalıştığını (ve değişkenlerin nerede bulunduğunu) anlamak için, biraz uygulama yapmak, sabır göstermek ve bir miktar deneyim sahibi olmak gerekir. Kendi projelerinizde farklı senaryoları test ederek, faaliyet alanı kavramının bir Flash dosyasını nasıl etkilediğini kolayca anlayabilirsiniz. Faaliyet alanı konusunu kavramak ve kodların üzerindeki etkisini anlamak için biraz uygulama yapmak gerekebilir. Bu yüzden, bu konu başlangıçta karmaşık görünürse endişelenmeyin.

6. Ders’te değişkenlerin bir veri parçasını içeren birer kaba benzediğini görmüş ve değişkenleri nasıl adlandıracağınızı öğrenmiştiniz. Unutulmaması gereken en önemli kurallardan biri, iki değişkenin aynı isme sahip olamayacağıdır. Ancak faaliyet alanları farklı olan değişkenler aynı isme sahip olabilirler. Bu da, kodun SWF dosyalarının farklı alanlarında nasıl barındığını gösterir. Aşağıda görüldüğü gibi, Flash’ta üç farklı faaliyet alanı vardır.

Yerel değişkenler: Bu değişkenler sadece bir fonksiyonun çağrılması durumunda kullanılabilir. Yerel değişkenler, bir fonksiyonun iki kıvrımlı parantezinin arasında yer alan değişkenlerdir (bunu, daha önceki bir uygulamada görmüştük). Bu fonksiyonun dışında (yani bu fonksiyon çağrılmadığında), bu değişkenler mevcut değildir.

Yerel değişkenler, var anahtar sözcüğü kullanılarak bir fonksiyonun içinde tanımlanırlar ve bu fonksiyon işini bitirerek devreden çıktığında, içindeki değişkenler ortadan kalkar. Yani bir fonksiyonun içinde kullandığınız değişkenleri, kodunuzda ya da Timeline’da başka bir yerde kullanamazsınız. Bu, özellikle ActionScript kodunuzun başka bölümlerinde aynı isme sahip başka değişkenler varsa, bunlarla çakışma olmamasını sağladığı için bir açıdan iyi bir özelliktir. Diğer avantajı, Flash’ın daha az kaynak kullanmasını sağlamasıdır. Çünkü Flash, uygulamanızda artık kullanımda olmayan çok sayıda değişkeni takip etmek zorunda kalmaz. Yerel değişkenler, sadece fonksiyon çalışırken ortaya çıkar ve sonra yok olurlar. Aşağıda bir yerel değişken örneğini görüyorsunuz.

function myVariable() {
var myNum:Number;
//myNum değişkeni burada
}
//myNum değişkeni artık yok.
trace(myNum); //tanımsız

myNum değişkeni için fonksiyonun dışında trace deyimini çalıştırırsanız, tanımsız şeklinde bir sonuç döndürülür, çünkü bu değişken sadece myVariable fonksiyonunun içinde mevcuttur. trace deyiminin, bir belgeyi test ederken Output paneline mesaj göndermek ve kodları test etmek için kullanıldığını hatırlayın.

Not: Aynı değişi ken isimlerini fonksiyonlarda ve diğer faaliyet alanlarında isim çakışmaları olmadan kullanmak mümkündür, ancak bu her zaman tavsiye edilmez. Aynı isimleri kullanmaktan kaçınmanız iyi olacaktır. Çünkü bir FLA dosyasında farklı faaliyet alanlarında aynı isme sahip değişikenler kullandığınızda, ileride kodu düzenlerken kafanız karışabilir.

Timeline değişkenleri: Bu değişkenler sadece aynı Timeline’ler tarafından kullanılabilir. SWF dosyasında birden fazla Timeline olabileceğini unutmayın, çünkü nk bir movie clip ya da bileşende farklı bir seviyede bir Timeline da bulunabilir. Seviyelerin tanımını sıradaki konuda göreceğiz. SWF dosyanızda birden fazla Timeline varsa, bu alanların her birinde farklı Timeline değişkenleri olabilir ve bunlar herhangi bir çakışma olmadan aynı ismi kullanabilir.

Bir değişken bir Timeline’da tanımlandığında, o değişken tanımlandığı noktadan sonraki karelerde kullanılabilir. Örneğin, aşağıdaki kod 10 numaralı kareye yerleştirilirse, ana Timeline’da numUsers adında bir değişken oluşturur. Bu değişken Timeline’da 10 numaralı kareden sonra var olur; 10 numaralı kare oynatılmadan önce, bu değişken SWF dosyasında kul anılamaz.

var numUsers:Number = 5;

Global değişkenler: Bu değişkenler SWF dosyasının içindeki bütün Timeline’larda, faaliyet alanlarında ve fonksiyonlarda kul anılabilir. Bu yüzden, bir global değişken bildirebilir ve sonra ana SWF dosyasına yüklenen diğer SWF dosyalarında ve ana SWF dosyası içinde bulunan değişkenleri, ActionScript kodunda ya da dosya yapısında herhangi bir değişiklik yapmadan kul anabilirsiniz. Global değişkenlerin sağladığı faaliyet alanı ilk iki faaliyet alanından çok farklı değildir. Çünkü bu değişkenler var anahtar sözcüğü ile tanımlanmaz ve aşağıdaki örnekte olduğu gibi önlerine _global anahtar sözcüğü gelir.

_global.numUsers = 5;

Global değişkenleri tanımlarken var anahtar sözcüğünü kullanamadığınız için, global değişkenlerde kesin tip belirleme yöntemini kullanamazsınız. Global değişkenlerde kod ipucu özelliğinden faydalanmak isterseniz, sonek yöntemini (değişkenin sonuna _mc ya da _lv eklemek) ya da açıklama yöntemini kullanmanız gerekebilir.

_root, _parent, this ve Seviyeler

SWF dosyanızdaki farklı bir faaliyet alanında veya Timeline’da bulunan bir değişkeni hedeflemeniz gerekebilir. Bir movie clip ya da bir bileşen içinde yer alan bir kod yazarsanız ve ana Timeline içindeki bir düğme gibi bir öğeye erişmek isterseniz, diğer Timeline’a erişmek için _parent anahtar sözcüğünü kullanmanız gerekir. Bu faaliyet alanlarını, SWF dosyasına ilgili değişkenlere erişmek üzere nereye gitmesinin gerektiğini bildirmek için kullanırsınız. this anahtar sözcüğünü kullandığınızda, geçerli faaliyet alanındaki geçerli nesneye başvuruda bulunursunuz. Örneğin bir movie clip’in içindeyken this anahtar sözcüğünü kullandığınızda, movie clip’e kendisine bakmasını söylemiş olursunuz. _parent anahtar sözcüğü, geçerli nesnenin ebeveyn öğesini gösterir. Mesela Stage’de bir movie clip varsa ve bu movie clip’te _parent anahtar sözcüğü kullanılırsa, movie clip’in üzerinde bulunduğu Timeline’a göndermede bulunmuş olursunuz. SWF dosyalarınızın tamamındaki nesnelere başvuruda bulunmak için, this ve _parent anahtar sözcüklerini birlikte kullanabilirsiniz. Başka bir öğenin içinde bulunan bir movie clip’teyken, diğer movie clip örneklerini ya da bileşen değerlerini kontrol etmek üzere SWF dosyasının hiyerarşisinde gezinmek için, aşağıdakine benzer bir kod satırından faydalanabilirsiniz.

this._parent._parent.otherMovieClip_mc.stop();

this anahtar sözcüğünün kul anımı da anlaşılması zor olabilecek konulardandır. Bağlama göre, this anahtar sözcüğü farklı şeyleri belirtebilir. Bir movie clip örneğinin içinde kul anırsanız, this anahtar sözcüğü bu movie clip’in Timeline na göndermede bulunur. Bir düğme fonksiyonunda kul anırsanız, this anahtar sözcüğü düğmenin kendisini değil de düğme örneğini içeren Timeline’ı belirtir. Doğrudan bir movie clip'e ilştirilmiş bir onClipEvent() işleyicisiyle kullanıldığında ise, this anahtar sözcüğü movie clip’in Timeline nı belirtir.

Sonraki sayfada yer alan kodu inceleyin. Aşağıdaki gibi bir kodu ana Timeline’a yerleştirirseniz, bu kod çok farklı şeyler yapar. Diyelim ki çalışan bir SWF dosyanız var ve Stage’de, yine bir içeriği oynatmakta olan myClip adında bir movie clip’iniz va. ActionScript aracılığıyla onRelease olay işleyicisini ekleyerek, movie clip’lere birer düğme gibi davranabilirsiniz (bunu daha önce oluşturduğunuz movie clip düğmelerine uygulayacaksınız).

myClip_mc.onRelease = function() {
this.stop();
};

Bu ActionScript kodu, eğer oynatılıyorsa myClip_mc örneğinin kendisini durdurur. Fonksiyonun içindeki kod, this anahtar sözcüğünü kul anarak movie clip’in Timeline nı hedefler. Bunun yerine, aşağıdaki ActionScript kodunu kul andığınızda bu kod movie clip’in Timeline yerine ana Timeline’ı durdurur.

myClip_mc.onRelease = function(){
stop();
};

Movie clip bir düğme gibi değerlendirilir ve düğmeler içinde bulundukları Timeline’ı hedeflerler, düğmenin kendi Timeline’ını değil. Bu da tabii ki this anahtar sözcüğünü kullanmamanız durumunda geçerlidir.

Flash kullanırken ve başkalarının yazdığı ActionScript kodlarını incelerken, _root anahtar sözcüğünün sıkça kullanıldığını göreceksiniz. _root kullanıldığında, bu ana Timeline’ın hedeflendiği anlamına gelir. Bu, sabit diskinizin kök dizinine (örneğin C: ) ya da bir Web sitesinin kök klasörüne gitmeye benzer. Buna genelde mutlak başvuru denir. Mutlak başvuru tekniğini Web sitelerinde olduğu gibi (mutlak başvuru kullandığınızda, sitenizi başka bir etki alanına aktarmanız zor olacaktır), Flash’ta kullanmak da genelde en iyi yaklaşım değildir, çünkü ActionScript kodlarınızı başka bir yere taşımanız zor olacaktır. Bu, SWF dosyalarını başka SWF dosyalarına yüklerken de sorun yaratabilir.

_root kullandığınızda ortaya çıkan sorunların sebebi açıktır. Bir FLA dosyasında _root’a başvuruda bulunduğunuzda, belge yayınlandığında SWF dosyasının ana Timeline’ına başvurmuş olursunuz. Fakat bu SWF dosyasını farklı bir SWF dosyasına yüklediğinizde root, diğerini kendisine yüklediğiniz SWF dosyası olur. Bu durumu, lockroot özelliğini kullanarak kontrol edebilirsiniz. lockroot, ilgili movie clip’e ya da SWF dosyasına, root başvurularının o SWF dosyasından ya da movie clip’ten daha ileriye gitmemesi gerektiğini söyler. Bu durumda movie clip’lere ve SWF dosyalarına sanki ana belge Timeline’ıymış gibi davranmalarını söylersiniz. lockroot, “Patron sensin” diyen bir özelliktir ve çok faydalıdır. Bu özellik true ya da false değeri alır ve aslında bu konu kitabın kapsamı dışındadır.

Oluşturduğunuz uygulamada, Stage’’deki movie clip’lerin içinde yuvalanmış olarak kodlar ya da kodun hedeflediği elemanlar bulunur. Eğer bu movie clip’ler boşsa, bunların herhangi birine bir SWF dosyası yükleyebilmeniz gerekir ve bu SWF dosyası ana Timeline’daki nesneleri hedefleyebilirsiniz. Eğer movie clip’e yüklenen Swf dosyasının içinde kodunuz varsa _parent anahtar sözcüğünü kullanarak ana Timeline’ı ya da ana Timeline’daki nesneleri hedefleyebilirsiniz. SWF dosyalarını uygulamaya yüklemenin diğer yolu, seviyeleri kullanmaktır.

Seviyeler (level) Flash Player’a ait öğelerdir ve döşeme tahtaları görünmeyen birer zemin gibidirler. Bir seviyeye yüklenen ilk SWF dosyası yapının geri kalanının temelini oluşturur ve 0 seviyesine yüklenir. Bu dosya, HTML sayfasındaki Flash Player nesnesinin genişliğini ve yüksekliğini, arka plan rengini ve kare hızını belirler. Buradan itibaren diğer SWF dosyalarını diğer seviyelere yükleyebilirsiniz; bu SWF dosyaları, ilk SWF dosyası tarafından belirlenen arka plan rengini ve kare hızını kalıtım yoluyla alır ve bunların sol üst köşeleri ilk SWF dosyasının sol üst köşesiyle hizalanır. SWF dosyaları binalardaki katlar, ya da baklavanın katları gibi üst üste yığılır.

Flash Player’a ilk yüklenecek belgenin seviyesi _level0 ile gösterilir. Seviyeler buradan sonra _ level1’dan başlayarak çok büyük bir sayıya (kitab ın yazarının duyduğuna göre 2 milyonun üstünde bir sayı) kadar üst üste yığılabilir. SWF dosyalarını seviyelere sırayla yüklemeniz gerekmez. İlk SWF dosyasını Flash Player’a, gezinti çubuğunu 150 numaralı seviyeye (_level150) ve tüm içeriği bu ikisinin arasında bir yere yükleyebilirsiniz; dolayısıyla gezinti çubuğu her zaman diğerlerinin üstünde olur. Bunların hepsi çok görecelidir. SWF dosyasını _level0 seviyesine yükleyebilir ve ana Timeline’ın içeriğiyle değiştirebilirsiniz. Bu, orijinal clip’in uygulamanın tamamında ihtiyacınız olan değişkenleri ve özellikleri içermesi durumunda pek iyi bir fikir olmayabilir.

İpucu: Bir SWF dosyasını bir movie clip’e ya da bileşene (Loader gibi) yüklediğinizde, bu dosya yeni bir seviyeye yüklenmiş olmaz, ilgili movie clip ya da bileşen örneğinin kendisine yüklenir. Bu aşamadan sonra içerik movie clip’te saklanır ve Stage’deki diğer movie clip’ler gibi değerlendirilir. Bu da, değişken benzeri verilerin daha kolay yönetilmesini sağlar.

Yüklenen bir SWF dosyasının farklı seviyesindeki bir öğeyi hedeflemeniz gerekiyorsa, aşağıdaki gibi bir kod satırı kullanabilirsiniz.

_level2.myMovieClip_mc.gotoAndPlay(3);

İpucu: Yüklenen bir SWF dosyasını hedefleyen bir kodu çağırmadan önce, içeriğin tamamen yüklenmiş olduğundan emin olun. Aksi takdirde, çağırdığınız kod düzgün bir şekilde çalışmayacaktır.

LoadVars Sınıfı

Tech Bookstore Web sitesi boyunca LoadVars sınıfıfnı kullanmaya devam edeceksiniz. Artık sınıflar, nesneler, metotlar, özellikler, fonksiyonlar ve koşullu deyimler konularına daha fazla hâkim olduğunuza göre, bütün bu kavramları bir araya getirmek için LoadVars sınıfını bir örnek olarak incelemeye hazırsınız demektir.


LoadVars nesnesi, güncellenmesi kolay dinamik Web siteleri oluşturmak için kullanabileceğiniz basit bir yöntemdir. LoadVars, harici bir metin dosyasında tanımlanan değişkenleri Flash’a anında yükleyebilir. Daha sonra bu değişkenler, veri yüklemek için kullandığınız LoadVars nesnesinin özellikleri haline gelir ve benzer şekilde ActionScript kodunuzun geri kalan kısmı boyunca referans olarak kullanılabilir. LoadVars nesnesi SWF dosyası tarayıcıda çalışırken bir metin alanından veri yüklediği için, verilerdeki her türlü değişiklik, Flash dosyasını güncellemek üzere metin dosyasının kendisinde yapılabilir. Dosyayı yeniden yayınlamak gerekmez. LoadVars nesnesini kullanmanın diğer bir avantajı da, sunucu tarafı dillerden birini (ColdFusion, PHP, ASP ya da Java gibi) kullanırken, sunucu tarafı bir veritabanını sorgulayarak en yeni makaleleri daha sonra bir SWF dosyası tarafıyüklenecek bir metin dosyasına yazmasının mümkün olmasıdır.

Flash ve LoadVars nesnesini üç farklı şekilde kullanabilirsiniz: send, sendAndLoad ve load.

•send, sadece verileri bir sunucuya gönderir. Veriler, burada sunucu tarafı
tarafı mesajı olarak gönderilebilir (ya da sunucu tarafı göre kullanılabilir).

•sendAndLoad, verileri sunucuya gönderir, ama aynı zamanda sunucudan gelen cevabı alarak sonucu bir LoadVars nesnesine yerleştirir. Değişkenler burada yönetilebilir ya da Flash aracılığıyla görüntülenebilir. Değişkenleri yüklemek ve kullanmak, bir ISBN numarasını sunucunuzdaki bir şablona göndermek ve sunucu tarafı sorgulamasını, ardından bir kitap incelemesini ya da bir kitapla ilgili bilgileri alarak sonucu bir SWF dosyasında görüntülenmek üzere Flash’a göndermesini istiyorsanız, TechBookstore sitesi için faydalı olabilir. Buradaki son metot load’dur. Tech Bookstore sitesinde daha çok bu metodu kullanacaksınız.

•load metodu, bir metin dosyasındaki değişkenleri yükler ve siz de bu değişkenleri TextArea bileşen örneklerinde ya da Tech Bookstore uygulamasında başka bir yerde görüntülersiniz.

Aşağıda, Flash tarafından kullanılabilecek basit bir metin dosyası örneğini görüyorsunuz.

&name=Sue&

Önceki basit metin dosyasını sendAndLoad veya load metodunu kullanarak yüklediğinizde, Flash, hedef LoadVars nesnesinde name adında yeni bir değişken oluşturur ve buna Sue değerini atar. Her bir isim/değer çiftini VE işaretiyle (&) ayırarak ve eşittir işaretlerini kullanmaya devam ederek metin dosyasına istediğiniz kadar değişken ekleyebilirsiniz. Şu örneği inceleyin:

&name=James&
&position=mentor&
&manager=Nate W&

Buradaki kod, Flash’ta üç ayrı değişken oluşturmaktadır: name, position ve manager. name değişkeninin değeri James, position değişkeninin değeri mentor ve manager değişkeninin değeri Nate W olarak ayarlanmıştır. Bu değerleri LoadVars sınıfıfnı kullanarak Flash’a yüklemek için, bu ifadeyi testfile.txt adındaki bir metin dosyasına kaydedin ve boş bir Flash belgesine aşağıdaki ActionScript kodunu ekleyin.

var test_lv:LoadVars = new LoadVars();
test_lv.load(“testfile.txt”);
test_lv.onLoad = function(success:Boolean) {
trace(this.name);
};

Bu örnekte LoadVars kullandığınız için, örnek kodu test etmeden önce Flash belgesini testfile. txt belgesiyle aynı klasöre kaydetmelisiniz.

İpucu: Metin dosyalarını, onları yükleyecek olan SWF dosyasından farklı bir dizine yerleştirebilirsiniz. Bunun için load metodunda dosyaya doğru şekilde başvuruda bulunduğunuzdan emin olmanız yeterlidir: test_lv.load(“textFiles/testFile.txt”), vs.

Bu kod, test_lv adında bir LoadVars nesnesi yaratmaktadır. Harici dosyayı, LoadVars sınıfındaki load metodunu kullanarak yüklüyorsunuz. Bu da ActionScript kodunun ikinci satırında gerçekleşiyor. Bu metot tek parametre almaktadır. Bu da, yüklemek istediğiniz dosyaya giden yoldur. Burada, geçerli Flash belgesiyle aynı klasörde bulunan testfile.txt adındaki bir dosyaya yüklüyorsunuz.

Bir sonraki kod parçası biraz karmaşık gelebilir. LoadVars sınıfıf, Flash’ın belirli şeyler gerçekleştiğinde tetiklediği birkaç tane olaya da sahiptir. Buradaki kodda tetiklenen olay onLoad’dur ve bu olay, load metodunda tan ımlanan metin dosyası Flash’ a tamamen yüklendiğinde tetiklenir. Basitçe anlatmak gerekirse bu kod, “Belirtilen metin dosyası yüklendikten sonra şu kodu çalıştır” der. Dosya tamamen yüklendikten ve onLoad olayı tetiklendikten sonra, testfile.txt dosyasında tanımlanan üç değişkeniniz test_lv LoadVars nesnesinde depolanır. Yani test_lv.manager’ın değerini Trace ile izleyebilir ve Output panelinde Nate W değerini görebilirsiniz. Önceki kodda, yerel ya da anonim fonksiyon adı verilen bir öğe kullanmıştınız; bu, aslında kendisine herhangi bir isim verilmemiş bir fonksiyondur.

Bir yerel fonksiyon (inline function), isimli fonksiyonlarla aynı şeyi yapar. Arada bazı farklar var ve bunlardan biri, bu fonksiyonların belirli bir nesneye iliştirilmesi ve belirli bir işlemi gerçekleştirmesidir. Diğer fark da şudur: Bu fonksiyonlar bellekte dolaşarak çağrılmayı beklemezler. Bu fonksiyonlar bir olay gerçekleştiğinde oluşturulur, cevap olarak çalıştırılır ve ihtiyaç duyuldukları bir sonraki duruma kadar bellekten silinirler.

İnceleme Sayfasının Oluşturulması

Artık Flash’la çalışmaya başlamanın ve FLA dosyalarına işe yarar bir şeyler yaptırmak için biraz ActionScript kodu eklemenin zamanı geldi. Bu uygulamada, TextArea bileşenine metin yükleyen özel bir fonksiyonun nasıl yazıldığını göreceksiniz. Bu sayfa, bir List bileşeni içeren bir inceleme (Review) sayfası oluşturacaktır. Bu bileşene tıklayarak, okumak istediğiniz incelemeyi seçebilirsiniz. Başlığına tıkladığınız inceleme, List bileşeninin yanında bulunan TextArea bileşeninin içinde görüntülenecektir. İnceleme sayfasının yapısını hazırlamak için bileşenlerden faydalanacaksınız. İnceleme bölümünün gövdesini oluşturmak için, yeni bir FLA belgesi oluşturacak ve daha sonra Tech Bookstore sitesine yüklenmek üzere bir SWF dosyası yayınlayacaksınız.

Herhangi bir ActionScript kodu yazmadan önce, Flash’ın Actions panelini açın (F9). Actions panelinin sağ üst köşesindeki menüye tıklayın ve açılan menüden View Line Numbers’ı (Satır Numaralarını Göster) seçin.


Satır numaraları, belgeyi test ettikten sonra Output panelinde gösterilen hataları kolayca bulmanızı sağlar. Çünkü Output paneli hata içeren satırın (ya da satırların) numarasını bildirir. Actions panelinde satır numarası özelliğini etkinleştirirseniz, hataları bulmanız çok daha kolay olacaktır.

1.Yeni bir Flash belgesi oluşturun. Stage’in genişliğini 720 piksel, yüksekliğini de 345 piksel olarak ayarlayın biraz ****veri ekleyin. Layer 1 katmanının adını form olarak değiştirin. Publish Settings iletişim kutusunu açın ve Formats sekmesinde HTML onay kutusunun işaretini kaldırın. Belgeyi reviews.fla adıyla kaydedin.

Yeni bir Flash belgesi oluşturun ve Stage’in boyutlarını değiştirmek için Properties denetçisindeki Size (Boy) düğmesine tıklayarak ya da Ctrl+J (veya Mac’te Cmd+J) tuşlarına basarak Document Properties (Belge Özellikleri) iletişim kutusunu açın. Title (İsim) alanına Tech Bookstore Reviews yazın ve Description (Açıklama) alanına kısa bir açıklama ekleyin. Dimensions (Boyutlar)metin girdi alanlarına genişlik (width) için 720, yükseklik (height) için 345 yazın ve sonra da OK düğmesine tıklayın.


Ana belge Timeline’ında Layer 1 katmanının ismini form olarak değiştirin. Bu katman, FLA dosyasının ilk katmanıdır ve boyutları ayarlar.

Belgeyi yayınladığınızda bir HTML sayfası oluşturmanız gerekmez. Sadece, Tech Bookstore’a yükleyeceğiniz SWF dosyasını kullanmanız gerekir. File menüsünden Publish Settings’i seçin. Formats kategorisindeki HTML seçeneğinin işaretini kaldırın ve OK’e tıklayın. sonra da File menüsünden Save’i seçerek yeni dosyayı sabit diskinizdeki TechBookstore klasörüne reviews. fla adıyla kaydedin.

2.Stage’e List bileşeninin bir örneğini sürükleyin. Örneği yeniden boyutlandırın ve Properties denetçisini kullanarak örneğin konum değerlerini değiştirin.

List bileşeni, büyük ölçüde HTML’’deki listeler gibi kullanılır: Kullanıcıların etkileşime gireceği etiketleri görüntüler ve genelde her etiketle bir tür veri ilişkilendirilir. List bileşeni, kullanıcılara çoklu seçim yapma imkânı sunar (eğer siz onlara böyle bir seçenek sunmak istiyorsanız).

Components panelini açın ve List bileşeninin bir örneğini Stage’e sürükleyin. Stage’deki List bileşeni seçili durumdayken Properties denetçisini açın ve bileşenin genişlik değerini 200 piksel ve yükseklik değerini de 325 piksel yapın. x ve y koordinatlarını 10 yaparak, bileşenin konumunu belgenin sol üst köşesine gelecek şekilde ayarlayın. Bileşen örneğini reviews_ls olarak adlandırın.


List bileşenini, kitaplarla ilgili incelemeleri listelemek için kullanacak ve kullanıcılara okumak istedikleri incelemeye geçme imkânını sunacaksınız.

3.İki inceleme dosyasını sabit diskinize kopyalayın. Properties denetçisini kullanarak List bileşenini yapılandırın. Values iletişim kutusunu kullanarak, List bileşenine iki incelemeye ait veri (data) ve etiket (label) değerlerini ekleyin.

İncelemeleri düzenli bir şekilde tutmak için, sabit diskinizdeki TechBookstore klasörünün içinde reviews adıyla yeni bir klasör oluşturun. CD-ROM’da ’ lesson09 klasöründe yer alan iki örnek incelemeyi bu klasöre kaydedin. Bunlar sırasıyla 0321219198.txt ve 0321213408.txt olarak adlandırılmıştır ve bu adlandırma işleminde kitapların ISBN numaraları temel alınmıştır. Bir veritabanı aramasında, kitap ismi yerine ISBN numarasına göre arama yapan bir script oluşturabilirsiniz, çünkü nk her ISBN numarası tek bir kitaba aittir, ama birden fazla kitap aynı isme sahip olabilir. Bu metin dosyalarından SWF dosyanıza bilgi yüklemek için LoadVars sınıfını kullanacaksınız.

İpucu: İncelemeleri bu iş için ayrılmış bir klasöre yerleştirmek istersiniz, çünkü düzinelerce incelemeyi kök klasöre atmanızın sonucu karmaşa ve bu yüzden klasörün içinde gezinmenin işkence haline gelmesi olabilir. Bu incelemelerin hepsi basit birer metin dosyasıdır. İsterseniz başka incelemeler de oluşturabilir ve bunları reviews klasörüne ekleyebilirsiniz. Kendi incelemelerinizi, yukarıda bahsettiğimiz metin dosyalarından birini açıp basit HTML biçimlendirme ayarlarını kopyalayarak da ekleyebilirsiniz. Flash uygulamalarının dâhil olduğu her başarılı girişimin anahtarı organizasyondur.

List bileşenini birkaç farklı yolla doldurabilirsiniz. Belki de bunların en basiti, Properties denetçisini ya da Component denetçisi panelini kullanarak bilgileri bileşene elle girmektir. Önceki derste anketi oluştururken bunun nasıl yapıldığını görmüştünüz. Her ne kadar o uygulamada bir ComboBox bileşenini doldurmuş olsanız da, List bileşeninin doldurulması da aslında her bakımdan aynıdır.

Properties denetçisinde Parameters sekmesine geçin, data satırını seçin, sonra da satırın en sağındaki büyüteç simgesine tıklayarak Values (Değerler) iletişim kutusunu açın.


Artı (+) sembolüne iki kez tıklayarak iki değer ekleyin. İncelemeleri düzenli bir şekilde tutmak için, dosyaları kitapların ISBN numarasına göre adlandırmaya karar verdik. Bu yöntemi kullandığınız takdirde, daha ilerideki bir tarihte belirli bir kitabı bulmanız gerektiğinde, kitabı metin dosyalarına bakarak aramak yerine ISBN numarasını aramanız yeterli olacaktır. İlk değerde, değeri reviews0321213408.txt olarak değiştirin. Dizin isminin dosyaya eklendiğine dikkat edin; böylece Flash, dosyanın SWF dosyasıyla aynı dizinde olmadığını anlayacaktır. İkinci değere tıklayın ve reviews/0321219198.txt yazın. OK düğmesine tıklayarak iletişim kutusunu kapatın ve Properties denetçisine geri dönün.


labels satırına tıklayın ve satırın en sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu tekrar açın. Burada List bileşeninin label (etiket)parametrelerini tanımlayacaksınız. data parametreleri için yaptığınız gibi, artı sembolüne iki kez tıklayarak iki değer ekleyin.

Üstteki varsayılan değeri Fireworks: TFS (kitabın ismi) olarak değiştirin. İkinci değeri ise Dreamweaver: TFS olarak değiştirin. data ve label parametrelerini ayarlarken, değerleri aynı sırayla girmeye özen gösterin. Bunu yapmadığınız takdirde, kullanıcı bir kitabın ismine tıkladığında karşısına tamamen farklı bir kitapla ilgili incelemeler gelir. Bu işlemleri tamamladıktan sonra, OK’e t’ ıklayarak Values iletişim kutusunu kapatın.

4.Stage’e bir TextArea bileşeni ekleyin ve Properties denetçisini kullanarak bu bileşenin konumunu ayarlayın.

TextArea bileşeninin bir örneğini Stage’e sürükleyin ve bunun sol üst köşesini List bileşeninin sağ üst köşesinin yakınına gelecek şekilde hizalayın. Stage’de TextArea bile hâlâ seçili durumdayken, Properties denetçisinde genişliği 490piksel, yüksekliği de 325 piksel olarak değiştirin ve bu örneğe review_txt örnek ismini verin. TextArea bileşeninin x koordinatını 220 piksel, y koordinatını da 10 piksel olarak ayarlayın. Properties denetçisinde ya da Component denetçisi panelinde, editable özelliğini false olarak ayarlayarak, kullanıcıların incelemenin metnini değiştirmesini engelleyin. html özelliğini de true olarak ayarlayın. Böylece metni gömülü HTML etiketleriyle kullanabilirsiniz.


5.Timeline’a yeni bir katman ekleyin ve ismini actions olarak değiştirin. Seçilen kitaba ait incelemeyi yükleyecek bir fonksiyon yazın.

Timeline’a yeni bir katman ekleyin ve bunun ismini actions olarak değiştirin. Actions panelini maksimum boya getirin. Script Assist modu açıksa, Script Assist düğmesine tıklayarak kapatın ve vurgusunun kaldırılmasını sağlayın. actions katmanının 1 numaralı karesini seçin, sonra da Actions panelindeki Script bölmesine aşağıdaki fonksiyonu ekleyin.

function loadReview(evt) {
var review_lv:LoadVars = new LoadVars();
review_lv.load(evt.target.selectedItem.data);
review_lv.onLoad = function(success:Boolean){
if (success)
{
review_txt.text = this.content;
}
else
{
trace(“unable to load text file.”);
}
};
}

Burada, function anahtar sözcüğünü ve ardından function için kul anılmasını istediğiniz ismi kul anarak kendi yeniden kul anılabilir fonksiyonunuzu oluşturuyorsunuz. Fonksiyonun ismini (bu örnekte loadReview) tanımladıktan sonra, parantez içinde tekrar kul anılabilir fonksiyonunuzun alacağı parametreleri tanımlıyorsunuz. Bu fonksiyon, evt isimli tek bir parametre alır. { ve } kıvrı ımlı parantezlerinin arasındaki her şey, fonksiyonun gövde kısmı olarak değerlendirilir. Bu satırlar, fonksiyon çağrıldığında çalıştırılacak olan talimatlardır.

Bu fonksiyon un yaptığı ilk şey, bel ekte bir LoadVars nesnesi oluşturmak ve buna review_lv ismini vermektir. Kodun bir sonraki satırı, Flash’taki yerleşik bir fonksiyona dair bir diğer örnektir. load fonksiyonu tek bir parametre alır (yüklenecek olan dosyanın URL’i). Burada değer, reviews_ ls isimli List örneğinde seçili durumda bulunan öğenin data alanından alınmaktadır. Bir sonraki uygulamada da göreceğiniz gibi, evt.target’in değeri, reviews_ls örneğine giden yoldur.

İpucu: Bir bileşene, düğmeye ya da movie clip’e her tıkladığınızda ya da bu nesnelerle her etkileşime girdiğinizde, etkileşime girdiğiniz nesne bir olay yayınlar. Bu, birisi donmuş bir hindiyi ayağınıza düşürdüğünde bağırmanıza benzetilebilir. Flash, bu olayı kimin yayınladığını içeren bu bilgiyi yakalar ve target ile type özelliklerine sahip bir nesnede saklar. type, yani tip, olaydır(event). target yani hedef de, yayıncıya giden yoldur. Deminki örneğe dönecek olursak; ayağınıza donmuş bir hindi düştüğünde evt.target mutfak.jim olacaktır. Burada type olarak acıylaBağırmak kullanılabilir. Bu bilgileri saklayan nesne de kızKardeşim olabilir (yani buradaki örnekte ayağımın nasıl kırıldığını soranlara bilgi veren kişi).

review_lv.onLoad, farklı bir fonksiyon tipine örnek teşkil ediyor. onLoad fonksiyonu, aslında dosyanın tamamı Flash tarafından yüklendiğinde tetiklenen bir olaydır. Olay tetiklendiğinde Flash, review_lv.onLoad kodundan sonra yazılan fonksiyonu çalıştırır. Bu fonksiyon, yerel fonksiyon (inline function) ya da anonim fonksiyon olarak bilinir, çünkü nk bir fonksiyon ismine sahip değildir ve ancak onLoad olayı tetiklendiği zaman tetiklenebilir.

Yerel fonksiyon success isimli tek bir nitelik alır. Bu nitelik, dosyanın başarıyla yüklenip yüklenmediğini belirtir. success niteliğinin değeri true ise, dosya yüklenmiş demektir. Bu nedenle Flash, review_txt TextArea bileşenindeki text özel iğini, LoadVars belgesindeki content değişkeninin değerine ayarlar. Ama success niteliğinin değeri false ise, dosya yüklenememiş demektir. Bu durumda Output panelinde bir mesaj görürsünüz. Bu örnek kodda sadece birkaç satırla tanımlanan birkaç farklı fonksiyon yer alıyor. Ancak LoadVars, XML, Web Servisleri ya da Flash Remoting özel iğini kul anarak uygulama geliştirirken, metotların ve olayların nasıl çalıştığını anlamak şarttır.

6.Actions panel araç çubuğundaki Check Syntax düğmesine tıklayın ve ActionScript kodunuzun sözdiziminin herhangi bir hata verip vermediğini kontrol edin. Dosyada yapmış olduğunuz değişiklikleri kaydedin.

Yeni yazdığınız kodda herhangi bir sözdizimi hatası olup olmadığını kontrol etmek için, Actions panelindeki Check Syntax (Sözdizimini Kontrol Et) düğmesine tıklayın.


Her şey düzgün çalışıyorsa, FLA dosyasında yapmış olduğunuz değişiklikleri File menüsünden Save’i seçerek kaydedin. Bir sonraki uygulamada bu dosya üzerinde çalışmaya devam edeceksiniz.

Olayları ve İşleyicileri Kullanmak

Önceki uygulamada Flash’taki bir olaya (event) kısaca göz attık. Olaylar, Flash’ ta bir şey olduğunda yükselen bayraklar gibidir. Olay, bir SWF dosyasında çalışma zamanında gerçekleşen bir eylemdir. SWF dosyası oynatılırken; bir movie clip ya da bir XML dosyası yüklendiğinde, bir düğmeye tıklandığında, v.b., olaylar gerçekleşir. Olay işleyiciler (event handler) ve izleyiciler (listener), bu olayların yönetilmesine yardımcı olan eylemlerdir. Daha önce LoadVars sınıfıyla çalışırken olaylara ait birkaç örmek görmüştünüz. Dosya Flash tarafı ndan yüklendiğinde, Flash’ ta onLoad olayı gerçekleşir ve bu olay için tanımlanmış fonksiyonlar çalıştırılır. Bir düğmeye tıklandığında (olay), SWF dosyasının belirli bir kareye gidip onu oynatması bununla ilgili basit bir örnektir.


Örneğin bir dosya başarıyla y üklendiğinde ya da yükleme işlemi başarısız olduğunda, LoadVars nesnesi onLoad olayını tetikleyerek Flash’a işlemin tamamlandığını söyler. Bu gereklidir, çünkü Flash SWF dosyası dosyasını durdurup işlemin tamamlandığını söyler. Bu gereklidir, çünkü nk Flash SWF dosyasını durdurup işlemin tamamlanmasını beklemek yerine, kodu işlemeye devam eder. Bu, asenkron iletişim olarak bilinir. Önceki uygulamada, SWF dosyasından bir metin dosyasının içeriğini yüklemesini istemiştiniz. SWF dosyası bir sonuç aldığında, ya metni TextArea bileşeninde gösterir, ya da Output panelinde bir hata görüntüler (test ortamındaysanız). FLA dosyasını yayınladığınızda trace deyimleri kul anıcıya gönderilmediği için, kul anıcılar SWF dosyanızdaki trace deyimlerinin içeriğini göremez.

Flash’ta pek çok öğe için kul anılabilen her türden olay mevcuttur. Örneğin Flash’ı kul anarak bir MP3 dosyasını çalışma zamanında yüklüyorsanız, üç farklı olay gerçekleşebilir: ID3 verileri (MP3 dosyası hakkındaki bilgiler) kul anılabilir hale geldiğinde onID3 tetiklenir, MP3 dosyasının yüklenmesi tamamlandığında onLoad tetiklenir ve MP3 dosyasının çalınması bittiğinde onSoundComplete tetiklenir. Bir olay tetiklendiğinde, Flash bu üç olay için olay işleyicide tanımlanmış fonksiyonları çalıştırır. Aşağıdaki kodda bununla ilgili bir örnek görüyorsunuz.

var intro_sound: Sound = new Sound();
intro_sound.loadSound(“Tool - disgustipated.mp3”, true);
intro_sound.onID3 = function(success:Boolean) {
trace(success);
};
intro_sound.onSoundComplete = function() {
trace(“sound has completed”);
};

Bu script, önce Sound nesnesinin yeni bir örneğini tanımlar ve yerleşik loadSound metodunu kullanarak Sound nesne örneğine bir MP3 dosyasını yükler. MP3 dosya isminden sonra yazılan true, SWF dosyasına (oynatmaya başlamadan önce bütün dosyanın yüklenmesini beklemek yerine) MP3formatındaki şarkının akmasını istediğinizi bildirir. Daha sonra onID3 olayına ve onSoundComplete olayına ait olay işleyicileri oluşturursunuz. Bu olaylar gerçekleştiği için, SWF dosyası olay işleyicide tanımlanan her fonksiyonu otomatik olarak çalıştırır. Olay işleyiciler, ilgili olay gerçekleştiğinde çalıştırılan talimatlardır. Yani SWF dosyasında herhangi bir ID3 bilgisi varsa, onID3 olayı tetiklenir, fonksiyon çalıştırılır ve SWF dosyası success niteliğinin değerini kontrol eder. trace, sesin SWF dosyasına başarıyla yüklenip yüklenmediğini size bildirir.

MP3 formatındaki ses çalınıp bittikten sonra, onSoundComplete olayı tetiklenir ve SWF dosyası test ortamında Output panelinde bir mesaj görüntüler. Geçerli MP3 çalınıp bittikten sonra yeni bir MP3 yüklemek istediğinizde, onSoundComplete fonksiyonu çok işinize yarayabilir.

İzleyicileri Kullanmak

Bu derste, arabirimlerde bileşenleri kullanırken, izleyicileri sık sık kullanacaksınız. İzleyiciler (listener) Flash’ta sıkça kullanılan ve bir olayı yayınlayan belirli bir öğeyi temel alarak bir işlem gerçekleştiren nesnelerdir. İzleyiciler, olay işleyicilere çok benzer, çünkü ikisi de bir SWF dosyasında olayların meydana gelmesini bekler ve olay meydana geldiğinde de bir eylemi gerçekleştirirler. İzleyicilerle olay işleyicileri arasında iki önemli fark vardır: İzleyiciler, izleyici nesneler tarafından yakalanır. İzleyici nesneler, bir yayıncı nesne izleyiciye belirli bir olayı gönderdiğinde çalıştırılan talimatlar içeren nesnelerdir. Bu da beraberinde diğer farkı getirir, yani ActionScript kullanarak bir yayıncı nesneyi (düğme gibi) ve bir izleyici nesneyi ilişkilendirme zorunluluğunu. Burada aslında yayıncıya, bir şey olduğunda bu durumdan izleyicinizi haberdar etmesini söylersiniz. Daha sonra izleyici talimatları çalıştırır. Bileşenlerle çalışırken bunun için addEventListener metodunu kullanırsınız ve yayınlanacak olayı ve olayı işleyecek izleyici nesneyi belirtirsiniz. Aşağıdaki kodda, izleyicilere dair bir örnek görüyorsunuz.

var listenerObject:Object = new Object();
listenerObject.click = function(evt) {
trace(“you clicked the button.”);
};
myButtonComponentInstance_btn.addEventListener(“click”, listenerObject);

Burada, önce olayları alacak bir nesne oluşturuyorsunuz. Sonra da, olayı işleyen bir fonksiyon tanımlıyor ve isteğe bağlı olarak bunu bir bağımsız değişken (argument) olarak evt nesnesine atıyorsunuz. Flash, fonksiyonun yakaladığı olayın ismini, fonksiyonun bir özelliği olarak kullanır. Bunu yaparak, tek nesnenin birkaç farklı olayı yakalamasını sağlayabilirsiniz.

Son olarak, Stage’deki myButtonComponentInstance_btn örnek ismine sahip bir düğmeye olay izleyiciyi (event listener) ekliyorsunuz. Sonra da, SWF dosyasına hangi olayı izlediğinizi söylüyorsunuz (bu uygulamada izlenen olay, kullanıcı düğmeye basıp bıraktığında tetiklenen click olayıdır) ve listenerObject’i bir parametre olarak aktarıyorsunuz.

İnceleme Sayfasına Bir İzleyici Eklemek

LoadVars sınıfıfnda iki olay vardır: onData ve onLoad. onData olayı, sunucudan bir sonuç döndürüldüğünde, ama sonuçlar Flash tarafından çözümlenmeden önce tetiklenir; onLoad olayı ise, LoadVars sınıfıfnın load ya da sendAndLoad metodunu çağırdığınız takdirde tetiklenir; ama bu olay, sonuçlar Flash tarafı farklı durumda faydalıdır ve aldıkları parametreler de farklıdır.

Not: Şunu unutmamanız çok önemli: Kodunuzda onData olayını kul anıyorsanız, onLoad olayı, kendisini kodunuzdan özel olarak çağırmadığınız takdirde tetiklenmez.

Aşağıdaki uygulamada, kul anıcı List bileşeninin değerini değiştirdiğinde tetiklenen bir olayın işlenmesini göreceksiniz. Bu örnekte de reviews.fla dosyasını kul anacaksınız.

1.ActionScript’i kullanarak List bileşeninin bir örneğine bir olay izleyicisi ekletin.

actions katmanının 1 numaralı karesini seçin ve Actions panelini açın. Script bölmesinde bulunan fonksiyonun altına aşağıdaki kodu ekleyin:

reviews_ls.addEventListener(“change”, loadReview);


Bu kod reviews_ls List bileşen örneğinize, kullanıcı yeni bir kitap ismine tıkladığında tetiklenen bir olay izleyici (event listener) ekler. addEventListener metodu iki parametre alır: İzlenen olay (bu örnekte change) ve olay gerçekleştiğinde tetiklenecek fonksiyon (bu örnekte, önceki uygulamada tanımladığınız loadReview fonksiyonu). addEventListener metodu için, olayın işlenmesinde kullanılan bir fonksiyon içeren bir nesneyi belirtmenize imkân sağlayan bir seçenek daha vardır.

2.Belgenin doğru bir şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test Movie’yi seçerek belgeyi test edin. Sonra da belgeyi kaydedin ve yayınlayın.

Control menüsünden Test Movie’yi seçerek belgeyi test edin. Stage’in sol tarafı reviews_ls bileşeninde bir kitap ismine her tıkladığınızda, Flash loadReview fonksiyonunu çağırır. Bu fonksiyon da bu kitapla ilgili yorumu TextArea örneğine yükler. Ayrıca şuna da dikkat edin: Harici metin dosyalarının içerikleri TextArea örneğinde görüntülendiğinde, <b> (kalın), <i> (italik) ve <img> (resim) etiketleri gibi HTML biçimlendirmeleri içeren harici dosyalar metnin görünüşünü etkiler. TextArea bileşeni, etiketler de dâhil olmak üzere asıl HTML kaynak kodunu görüntülüyorsa, Component denetçisi panelinde html parametresinin true olarak ayarlanmış olup olmadığını kontrol edin. Metin dosyalarının içeriklerine bakarsanız, bu uygulamaya ait resimlerin amazon.com sunucularından yüklendiğini görürsünüz. Kendi projelerinizi hazırlarken, resimleri amazon.com’daki sunuculardan yüklemek yerine, kendi sunucunuzdan yerel olarak yüklemek istersiniz. Resim dosyalarını yerel olarak kaydedebilir ve yüklediğiniz metin dosyalarındaki URL’i değiştirebilirsiniz.


Geliştirme ortamına geri dönün ve reviews.fla dosyasında yaptığınız değişiklikleri kaydedin. SWF dosyasını oluşturmak için File menüsünden Publish’i seçerek FLA dosyasını yayınlayın. Daha sonraki derslerden birinde, bu dosyayı ana Tech Bookstore SWF dosyasına yükleyeceksiniz.

Dosya TechBookstore klasöründe oluşturulur. Daha fazla yorum eklemek isterseniz, mevcut bir yorumdaki metni kopyalayabilir ve bunun üzerinde gereken değişiklikleri yapabilirsiniz. Gereken düzenlemeleri yaptıktan sonra, yeni dosyayı reviews klasörüne kaydedin. Ayrıca, önceki uygulamanın üçüncü adımında yapığınız gibi, Properties denetçisinde List bileşeninin data ve labels parametrelerini değiştirmenizin ve yeni değerler eklemenizin gerektiğini de unutmayın .

İnceleme Sayfasına CSS Biçimlendirmesi Eklemek

CSS (Cascading Style Sheets), bir HTML sayfasındaki metinlere ve diğer öğelere uygulanabilecek stiller tanımlamak için kullanılan bir metottur. CSS belgeleri, bir metin bloğunun hangi fontları kullanmasının gerektiğini, resimler ya da tablo hücreleri gibi belirli öğelerin etrafında ne tür boşlukların bırakılması gerektiğini ya da belirli öğelerde hangi renklerin kullanılacağını tanımlayan kurallar içerir. Bir CSS stil sayfasını kullandığınızda, sitenizdeki her sayfaya tek kural kümesini uygulayabilirsiniz. Ayrıca bu kuralları değiştirdiğiniz takdirde, sitedeki stillerin tutarlılığı da muhafaza edilir ve değişiklikleri stil sayfasını uyguladığınız her sayfada anında görebilirsiniz. Flash, bir SWF dosyasındaki HTML biçimlendirmesi uygulanmış dinamik metinlerin ya da girdi metinlerinin biçimlendirilmesinde orijinal CSS1 spesifikasyonunun kullanılmasını destekler.

Not: CSS’in farklı sürümleri vardır. CSS2, biçimlendirme için ilave özellikler sunar, ama Flash CSS2 sürümünü desteklemez. CSS1 spesifikasyonu için https://www.w3.org/TR/REC-CSS1 adresine başvurabilirsiniz.

Flash, CSS1’in özelliklerinin sadece bir alt kümesini desteklese de, HTML etiketleri içeren metin bloklarını kolayca biçimlendirmenize imkân sağladığından ve bunların sitenin geri kalan kısmıyla tutarlı görünmesini sağladığından, bu mükemmel bir özelliktir. Flash belgelerine stil sayfaları eklemenin iki yolu vardır: Stil sayfasını çalışma zamanında yüklemek ve stil sayfalarını ActionScript kullanarak tanımlamak. Tech Bookstore uygulaması boyunca birkaç farklı SWF dosyasında aynı stilleri kullanacağınız içi, harici bir CSS stil sayfası kullanmanız ve bunu SWF dosyalarının her birine yüklemeniz daha kolaydır. Aynı stil sayfasını, oluşturacağınız HTML sayfalarında da kullanarak (sayfanın SWF dosyası içermesinden ya da sadece HTML kodu olmasından bağımsız olarak), sitenizin tutarlılığını muhafaza edebilirsiniz.

1.Önceki uygulamalarda kullandığınız reviews.fla belgesini tekrar açın ve form katmanını kilitleyin.

Önceki uygulamalarda üzerinde çalıştığınız reviews.fla belgesini açın ve form katmanını kilitleyin. actions katmanının 1 numaralı karesini seçin. Bir sonraki adımda buraya ActionScript kodu ekleyeceksiniz. Üçüncü adımda, metni biçimlendiren harici stil sayfasını oluşturacaksınız.

2.reviews.fla dosyasına, çalışma zamanında reviews.swf dosyasına bir CSS dosyasını yükleyecek olan ActionScript kodunu ekleyin.

Actions katmanının 1 numaralı karesinde bulunan kodun üstüne aşağıdaki kodu ekleyin.

var flash_css = new TextField.StyleSheet();
flash_css.load(“styles.css”);
flash_css.onLoad = function(success:Boolean) {
if (success) {
review_txt.styleSheet = flash_css;
} else {
trace(“Error loading CSS file.”);
}
};

Bu kod, LoadVars nesnesini kullandığınız uygulamalardakine benzemektedir. Burada önce yeni stil sayfasını içerecek flash_css isimli yeni bir Timeline değişkeni oluşturuyor, sonra da styles. css isimli harici bir CS dosyasını yüklüyorsunuz. styles.css dosyasını henüz oluşturmadınız. Dolayısıyla, bu dosyayı şimdi kaydedip test ederseniz, “Output penceresinde “Error loading CSS File” (CSS dosyası yükleme hatası) mesajını görürsünüz. Sonraki kod bloğu, Flash bir onLoad olayı aldığında tetiklenir ve stil sayfasının başarıyla yüklenip yüklenmediğini belirten tek bir parametre (success) alır. Stil sayfası yüklenirse, kod stil sayfasını review_txt TextArea örneğine atar. Stil sayfası başarıyla yüklenemezse, Output paneline bu durumu bildiren bir hata mesajı gönderilir.

Şimdi Ctrl+Enter (ya da Mac’te Cmd+Return) tuşlarına basarak SWF dosyasını test ederseniz, Flash Output panelinde SWF dosyasının CSS dosyasını bulamadığını belirten bir hata mesajı görüntüleyecektir. Bunun nedeni, stil sayfasının henüz TechBookstore dizininde yer almamasıdır.


3.Metin stillerini tanımlamak için, styles.css isimli bir CSS dosyası oluşturun. Dosyayı TechBookstore klasörüne kaydedin.

Bilgisayarınızda bir metin editörünü ya da CSS’i destekleyen Dreamweaver gibi herhangi bir editörü açın. PC kullanıyorsanız, muhtemelen Not Defteri(Notepad) bilgisayarınızda kurulu durumdadır. Mac kullanıyorsanız, TextEdit’in kurulu olması gerekir. Aşağıdaki kodu girin ve dosyayı styles.css adıyla kaydedin.

p {
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
color: #000000;
}
.headline {
font-family: Arial,Helvetica,sans-serif;
font-size: 24px;
color: #999999;
}

Bu stil sayfası iki stil tanımlamaktadır. Bu stillerden biri <p> etiketine uygulanır. Diğeri ise, her bir incelemede kitabın ismine uygulayacağınız headline isimli özel bir stildir. headline stili, metnin rengini gri, boyunu da 24 piksel olarak ayarlar. Böylece başlık kısmının inceleme kısmından ayırt edilmesi kolaylaşır. Dosyayı sabit diskinizdeki TechBookstore klasörüne kaydedin ve metin editörünü kapatın.

4.reviews.fla belgesini tekrar test edin. Her şey düzgün çalışıyorsa, belgeyi kaydedin ve FLA dosyasını yayınlayarak güncellenmiş bir SWF dosyası oluşturun.

Ctrl+Enter (ya da Mac’te Cmd+Return) tuşlarına basarak Flash belgesini test edin. Şimdi bir kitabın ismine tıkladığınız takdirde, Flash kitapla ilgili yorumları yükleyecek ve stil sayfasını TextArea’ya uygulayacaktır. Dosyayı kaydedin ve Flash belgesini tekrar yayınlayarak TechBookstore klasöründeki SWF dosyasını güncelleyin.

Katalog Sayfalarını Oluşturmak

Bu bölümde, bir sonraki uygulamada oluşturacağınız catalog.fla dosyasına aktarılacak iki yeni katalog sayfasını hazırlayacaksınız. Katalog sayfaları, Tech Bookstore’da satılan kitapların her birine ait bilgileri içeren son derece basit sayfalardır. Katalogda şu anda sadece birkaç kitabı tanıtacaksınız, ama isterseniz çok daha fazla kitabı da tanıtabilirsiniz.

Her katalog sayfasında başka sayfaları açan iki düğme yer alacaktır: İçindekiler kısmını açan bir düğme ve örnek bir bölüm açan başka bir düğme. Bu düğmeleri daha önce movie clip’leri kullanarak oluşturmuştunuz. Katalog sayfaları, ayrıca kitap kapağının bir resmini ve kitabın içeriğinin kısa bir açıklamasını da içerir. Katalog sayfalarının istediğiniz gibi görünmesini sağlamak için, bunlara istediğiniz grafikleri ekleyebilirsiniz.

1.TechBookstore klasöründe catalog isimli yeni bir klasör oluşturun. bookstor 12.fla dosyasını açın ve dosyanın yeni bir versiyonunu bookstore13.fla ismiyle kaydedin.

Önce sabit diskinizdeki TechBookstore klasörünün içinde catalog isimli yeni bir klasör oluşturun. Bu uygulamada oluşturacağınız ve daha sonra ana Tech Bookstore uygulamasına yüklenecek olan yeni FLA ve SWF dosyalarını buraya kaydedeceksiniz.

2.catalog01.fla isimli yeni bir belge oluşturun ve bu belgeyi TechBookstore klasöründeki catalog klasörüne kaydedin. Publish Settings iletişim kutusunu açın ve Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın. Stage’i yeniden boyutlandırın.

Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız olmaz. Burada sadece, belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekir, çünkü neticede bu SWF dosyası başka bir SWF dosyasına yüklenecektir. Bu nedenle, File menüsünden Publish Settings’i seçin, Formats sekmesindeki HTML seçeneğinin işaretini kaldırın, işiniz bittikten sonra OK’e tıklayın. Properties denetçisini kullanarak Stage’in boyutlarını 490 x 325 olarak değiştirin.

3.İki movie clip düğmesini, bookstore13.fla dosyasının kütüphanesinden catalog01.fla dosyasının kütüphanesine sürükleyin.

Eğer açık değilse catalog01.fla’daki belge kütüphanenizi açın. New Library Panel (Yeni Kütüphane Paneli) düğmesine tıklayın ve yeni paneldeki kütüphane(Library) açılır listesinden bookstore13.fla dosyasını seçin. mcSampleChapter ve mcToc sembollerinin birer örneğini bookstore13.fla’nın kütüphanesinden catalog01.fla’nın kütüphanesine sürükleyin.


4.Table of Contents (İçindekiler) ve Sample Chapter (Örnek Bölüm) düğmelerini Tech Bookstore kütüphanesinden silin ve FLA dosyasını kapatın.

mcSampleChapter ve mcToc sembolleri catalog01.fla belgesindeyken, her birini seçip bookstore13.fla dosyasının kütüphanesinin alt kısmındaki çöp kutusu simgesinin üzerine sürükleyerek bu sembolleri bu kütüphaneden silebilirsiniz.

İpucu: FLA dosyasının boyunu minimum seviyede tutabilmek için, FLA dosyasında kullanılmayan sembolleri silme alışkanlığını edinmeniz iyi olacaktır. Sembollerin silinmesi yayınlanan SWF dosyasının boyunu etkilemez, çünkü siz Flash belgesini yayınladığınızda, kullanılmayan semboller SWF dosyasına dâhil edilmez. Fakat bu, bileşenler için doğru değildir. Bileşenler, siz özel olarak kullanılmayan bileşenleri kütüphaneden silmedikçe SWF dosyası ile birlikte yayınlanır.

5.catalog01.png ve catalog02.png dosyalarını sabit diskinize kopyalayın.

6.Layer 1 katmanının ismini pages olarak değiştirin ve Loader bileşeninin bir örneğini katmanın üzerine sürükleyin. contentPath parametresini catalog0 .png olarak değiştirin. pages katmanının üzerine yeni bir katman ekleyin ve bu yeni katmanı buttons olarak adlandırın. buttons katmanını seçin ve iki düğmeyi Stage’e sürükleyin. static text isimli bir katman ekleyin. Text aracını kullanarak Stage’de yeni bir statik metin alanı oluşturun, sonra da Stage’deki bütün öğelerin yerleşim düzenini ayarlayın.

Önce Layer 1 katmanını ismini pages olarak değiştirin. Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage’e sürükleyin. Örneği, aşağıda verilen şekildekine benzer biçimde Stage’in sol üst kenarına yakın bir noktaya yerleştirin ve genişlik değerini 120, yükseklik değerini de 150 olarak ayarlayın. contentPath parametresini catalog01. png olarak ve autoScale özelliğini de false olarak ayarlayın.

İpucu: Loader bileşeninden uzakta bir yere tıkladığınızda bileşen ortadan kaybolmuş gibi görünür. Seçimi kaldırıldığında onun bulunduğu konumu görmek için Layers panelinde View Outlines seçeneğini etkinleştirin.

Pages katmanının üzerinde yeni bir katman oluşturun ve bu yeni katmanın ismini buttons olarak değiştirin. Buttons katmanı seçili durumdayken, iki movie clip düğmesi örneğini kütüphaneden Stage’e sürükleyin. İki movie clip düğmesini Stage’de Loader bileşen örneğinin altına yerleştirin. İkinci movie clip düğmesini ilk düğmenin altına yerleştirin.


Son olarak, Tools panelindeki Text aracına tıklayın ve Properties denetçisini açın. Metin tipini Static, fontunu Arial 10 pt, rengini de siyah olarak ayarlayın. Font render yöntemi olarak Anti- alias for readability’yi seçin. Static text katmanını seçin ve Stage’e t’ ıklayıp imleci sürükleyerek, bu alan için uygun genişlikte bir metin alanı oluşturun. Bu alana metin girdiğinizde, dikey olarak ek satırlar oluşturulacaktır. Oluşturduğunuz statik metin alanına bir şeyler yazın (ne yazdığınız önemli değil). Göstermelik metin olarak lorem ipsum metnini kullanabilir, tamamlanmış catalog01.fla dosyasını açıp tamamlanmış FLA dosyasında bulacağınız metni kullanabilir ya da İnternet’ten kitabın gerçek incelemesini bulabilirsiniz.


7.İki movie clip düğmesine yeni örnek isimleri verin. Sonra actions isimli yeni bir katman ekleyin ve iki düğmenin çalışmasını sağlayacak fonksiyonları ekleyin.

Selection aracını kullanarak Stage’in üst kısmındaki düğmelerin her birine tıklayın ve bunlara örnek isimleri verin. table of contents (içindekiler) düğmesi için toc_mc örnek ismini girin. Sonra da sample chapter (örnek bölüm) düğmesi için samplechapter_mc örnek ismini girin. FLA dosyasında en üstteki katmanı seçin ve yeni bir katman ekleyin. Yeni katmana actions ismini verin. Actions panelini maksimum boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin.

stop();
samplechapter_mc.onRelease = function() {

getURL(“https://www.trainingfromthesource.com/flashTFS/samplechapter.html”, “_
blank”);
}
toc_mc.onRelease = function() {
gotoAndStop(“toc”);
}


Bu ActionScript kodu oynatım kafasını geçerli karede durdurur ve iki fonksiyon tanımlar. Bunların biri oynatım kafasını belirli bir kare etiketine gönderecek, diğeri de bir tarayıcı penceresi açacaktır. Kullanıcı sample chapter düğmesine tıklarsa tarayıcı açılır ve örnek bir bölüm içeren bir sayfaya gider. Kullanıcı table of contents düğmesine tıkladığında ise, oynatım kafası bir sonraki adımda toc olarak etiketlenecek kareye gider.

8.Yeni bir katman ekleyin ve bu yeni katmanın ismini labels olarak değiştirin. Sonra 5 numaralı kareye toc kare etiketini (label), 1 numaralı kareye de home kare etiketini ekleyin. pages ve actions katmanlarında, kare etiketinin altına yeni boş anahtar kareler ekleyin, sonra da actions katmanının 5 numaralı karesine bir stop eylemi ekleyin.

Yeni bir katman ekleyin ve bunu actions katmanının hemen altına taşıyın. Katmanın ismini labels olarak değiştirin. Timeline’da bu katman ın 5 numaralı karesine sağ tıklayın (ya da Mac’te Control tuşunu basılı tutarak tıklayın), bağlam menüsünden Insert Blank Keyframe’i seçerek boş bir anahtar kare ekleyin ve Properties denetçisini kullanarak bu kareye toc etiketini uygulayın. Katmandaki 1 numaralı kareyi seçin, buna da home kare etiketini ekleyin.

actions katmanındaki 5 numaralı kareye yeni bir anahtar kare eleyin (F6) ve Actions paneline stop(); yazın. Sonra F6 tuşuna basarak, pages katmanındaki 5 numaralı kareye yeni bir anahtar kare ekleyin. 1 numaralı karedeki metin alanı 5 numaralı kareye kopyalanacaktır.

Not: buttons katmanını 5 numaralı kareye kadar uzatmanız gerekmez, çünkü özel ikle içindekiler sayfasının görüntülenmesi için kul anılan, örnek bölümün açılması pek gerekmeyen bir sayfa hazırlıyorsunuz.


Bu katmana boş bir kare eklemek yerine bir anahtar kare ekleyerek, Stage’deki statik metin alanında bulunan metni değiştirebilir ve metin alanının konumunu koruyabilirsiniz. Bu, aynı zamanda bütün öğeleri tam olarak aynı konumda tutmanıza da imkân sağlar; böylece ziyaretçiler ikinci alana geçtiklerinde öğeler kaymaz. Metin alanlarını değiştirerek, bunun kitabın tanıtımı yerine içindekileri göstermesini sağlayın. Son olarak da, Stage’deki pages katmanının üzerinde bulunan toc anahtar karesine bir back (geri) düğmesi ekleyin. Kendi düğmenizi oluşturabilir, ya da Components panelinde Button bileşeninin bir örneğini pages katmanının üzerine sürükleyebilirsiniz.


Button bileşeninin bir örneğini kullanıyorsanız, label parametresini Back, örnek ismini de back_btn olarak değiştirin. actions katmanının 5 numaralı karesini seçin ve Actions paneline aşağıdaki kodu yazın.

back_btn.onRelease = function() {
gotoAndStop(“home”);


9.catalog01.fla dosyasını test edin, bir sorun yoksa dosyayı kaydedin ve yayınlayın. Sonra da File menüsünden Save As’i seçerek catalog01.fla dosyasının yeni bir versiyonunu kaydedin ve yeni dosyaya catalog02.fla ismini verin. Bu dosyanın catalog klasörüne kaydedildiğinden emin olun. Loader bileşeninin contentPath parametresini catalog02.png olarak değiştirin ve katalogun metin alanlarında değişiklik yapın.

catalog01.fla dosyasını test ederek belgenin beklediğiniz gibi çalıştığından emin olun. Herhangi bir sorun yoksa dosyayı kaydedin ve File menüsünden Publish’i seçerek yayınlayın. catalog01.fla dosyasının yeni bir versiyonunu catalog02.fla ismiyle kaydettikten sonra, yapmanız gereken sadece FLA dosyasında aşağıda ayrıntıları verilen birkaç küçük değişikliği yapmak ve bu dosyayı tekrar yayınlamaktır.

Herhangi bir dosyayı (örneğin catalog01.fla dosyasını) yerleşim düzenini ve tarzı bozmadan yeniden yapılandırmanın genellikle en hızlı yolu, dosyanın yeni bir kopyasını kaydedip sonra sadece gereken şeyleri değiştirmektir. Bu aslında bir movie clip sembolünü çoğaltmayla aynı prensibe dayanır. Bu yöntemi kullanırsanız, dosyanın tamamını sıfırdan başlayarak yeniden oluşturmak ve öğelerin her birini aynı şekilde yerleştirmekle uğraşmak zorunda kalmazsınız. pages katmanındaki Loader bileşenini seçin ve contentPath parametresini catalog2.png olarak değiştirin. Bunu pages katmanının 5 numaralı anahtar karesinde de yapmanız gerekecek. Son olarak, dilerseniz pages katmanının 5 numaralı karesindeki metni değiştirin.

10.catalog02.swf dosyasını bir tarayıcı penceresinde test edin. Sayfa doğru bir şekilde çalışıyorsa, geliştirme ortamına geri dönün, FLA dosyasını kaydedin ve bunu yayınlayarak catalog klasöründe catalog02.swf dosyasını oluşturun.

Geliştirme ortamında File menüsünden Publish Preview > Default’u seçerek catalog02.swf dosyasını bir tarayıcı penceresinde test edin. Her şey düzgün görünüyorsa, SWF dosyalarının farklı bölümlerine gidebiliyorsanız ve yeni bir tarayıcı penceresi açabiliyorsanız, dosyayı kaydedin ve yeni catalog02.swf dosyasını oluşturun. Artık catalog klasöründe, bu kitapta daha ileride Tech Bookstore’a aktaracağınız iki SWF dosyanız var.

Ana Katalogu Hazırlamak

TechBookstore’un katalog (Catalog) bölümü, daha önceki uygulamalarda oluşturduğunuz incelemeler (Reviews) bölümüne çok benzer. Ana katalog dosyasında, birkaç kitabın isimlerinin yer aldığı bir List bileşeni vardır. Listedeki kitaplardan birine tıkladığınızda, önceki uygulamada oluşturduğunuz katalog sayfaları yüklenerek Stage’in içeriği güncellenir. Katalog ve incelemeler bölümleri arasındaki en önemli fark, katalog sayfasının harici bir SWF dosyasını bir Loader bileşenine yüklemesi, incelemeler bölümünün ise içeriği görüntülemek için LoadVars nesnesini ve TextArea bileşenini kullanmasıdır.

1.Yeni bir Flash belgesi oluşturun ve Stage’in genişliğini 720 piksel, yüksekliğini de 345 piksel olarak ayarlayın. File menüsünden Publish Settings’i seçerek Publish Settings iletişim kutusunu açın ve Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın. Sonra da dosyayı catalog.fla ismiyle kaydedin.

File menüsünden New’u ve sonra Flash Document’ı seçerek yeni bir Flash belgesi oluşturun. Properties denetçisini kullanarak Stage’in boyutlarını 720 x 345 piksel olarak değiştirin. Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız yok. Sadece belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekiyor. Bu nedenle, File menüsünden Publish Settings’i seçin. Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın ve OK düğmesine tıklayın.

Bu işlemleri tamamladıktan sonra FLA dosyasını catalog.fla ismiyle kaydedin.

2.Layer 1 katmanının ismini form olarak değiştirin ve Stage’de form katmanına bir List bileşeni ekleyin. Properties denetçisini kullanarak List örneğinin genişliğini 200, yüksekliğini de 325 piksel olarak ayarlayın ve örneği Stage’in sol üst köşesine taşıyın. List örneğini catalog_ls olarak adlandırın.

Katalog bölümünde, katalogdaki kitapların isimlerini içeren bir List bileşeni yer alır. Bunlara tıklandığında Stage’deki içerik güncellenir. Layer 2 katmanının ismini form olarak değiştirin. Components panelini açın ve sonra da List bileşeninin bir örneğini Stage’e sürükleyin. Properties denetçisinde List örneğinin x ve y koordinatlarının ikisini de 10 piksel olarak değiştirin. Örneğin genişliğini 200, yüksekliğini de 325 piksel olarak değiştirin ve bunu catalog_ls olarak adlandırın.

3.Values iletişim kutusunu kullanarak List bileşeninin değerlerini ve etiketlerini ayarlayın.

List bileşeni hâlâ seçili durumdayken, Properties denetçisini ya da Component denetçisi panelini açın ve data satırına tıklayın. data satırının sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu açın. Add (+) düğmesine iki kez tıklayarak iki yeni değer ekleyin ve üstteki değer için catalog/catalog01.swf, alttaki için de catalog/catalog02.swf yazın. Bu değerlerin ikisinde de catalog/ önekinin bulunduğuna dikkat edin. Bu önek, SWF dosyasını catalog isimli bir alt klasörde aramasını söyler.

OK düğmesine tıklayarak Values iletişim kutusunu kapatın ve Properties denetçisinde labels satırını seçin. Yine büyüteç simgesine tıklayarak Values iletişim kutusunu açın ve List bileşenine ait değerleri girin. İki yeni değer ekleyin; üstteki değeri Flash ActionScript: TFS, alttakini de Dreamweaver: TFS olarak ayarlayın. Değerleri eklerken, verileri her zaman etiketleri eklediğiniz sırayla eklemeye özen gösterin; aksi halde kullanıcı bir kitabın ismine tıkladığında başka bir kitaba ait bilgiler görüntülenir.


4.Stage’e Loader bileşeninin bir örneğini ekleyin, sonra da Properties denetçisini kullanarak bu örneğin konumunu ve boyutlarını değiştirin.

Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage’e sürükleyin. Bileşenin genişliğini 490, yüksekliğini de 325 piksel olarak ayarlayın. Sonra da bunu x koordinatı 225 piksel, y koordinatı 10 piksel olacak şekilde yerleştirin. Loader bileşenine catalog_ldr örnek ismini verin. Properties denetçisini ya da Component Inspector panelini kullanarak autoLoad parametresini ve scaleContent parametresini false olarak ayarlayın.


5.Bir actions katmanı oluşturun ve List bileşeninde seçili durumda olan kitaba göre bir katalog SWF dosyasını yükleyecek ActionScript kodunu ekleyin.

Flash belgesine yeni bir katman ekleyin ve yeni katmanın ismini actions olarak değiştirin. Yeni katmanın Timeline yığınında diğer katmanların üzerinde olduğundan emin olun. actions katmanının 1 numaralı karesini seçin ve Actions paneline aşağıdaki kodu ekleyin.

function loadCatalog(evt) {
catalog_ldr.load(catalog_ls.selectedItem.data);
}
catalog_ls.addEventListener(“change”, loadCatalog);

Bu kod, loadCatalog isimli bir fonksiyonu tanımlar. Bu fonksiyon, seçili öğeye ait data özelliğinin değerini (SWF dosyasının konumu) yükler. Fonksiyon, bu SWF dosyasını Stage’deki Loader bileşen örneğine yükler.

Bu bileşenin örnek ismi catalog_ls’dir. Bu ActionScript kodunun sonuna, kullanıcının katalogdaki List örneğine tıklamasını bekleyen bir izleyici (listener) yerleştirdiniz. Listedeki bir öğeye tıklandığında, loadCatalog fonksiyonu çağrılır. Fonksiyon catalog_ldr’a listede seçili olan öğenin değerini yüklemesini söyler. Bu değer Values iletişim kutusunda tanımlanır ve SWF dosyasına ait yolu içerir.

6.FLA dosyasının doğru bir şekilde çalıştığından emin olmak için onu test edin. Herhangi bir sorun yoksa catalog.fla dosyasında yapmış olduğunuz değişiklikleri kaydedin. Sonra da File menüsünden Publish’i seçerek dosyayı yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.

Önceki uygulamada, ana TechBookstore klasörünün içinde catalog isimli bir alt klasör oluşturmuş ve catalog01.swf ve catalog02.swf dosyalarını bu alt klasöre kaydetmiştiniz. Yani bu dosyayı test ettiğinizdeki bu iki SWF dosyasını catalog klasöründen catalog.swf dosyasına yüklemesi gerekir. Dosyalar yüklenmiyorsa, catalog klasörünü açın ve SWF dosyalarının ve klasörün olduklarından ve doğru adlandırıldıklarından emin olun. Ayrıca üçüncü adımda değerleri Values iletişim kutusuna doğru bir şekilde eklediğinizden de emin olun.


Her şey düzgün çalışıyorsa FLA dosyas ını kaydedin, sonra da yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.

Not: Çözüm dosyasında PNG resimlerine giden yol, bu dersteki alıştırmalarda ayarladığınız yoldan farklıdır. Yollar (path), çözüm dosyalarının dizin yapısıyla çalışılacak şekilde oluşturulmuştur. Bu nedenle, tamamlanmış dosyalardan birini kopyalayıp kendi TechBookstore klasörünüze yapıştırırken, dizin referanslarını sizin dosya yapınızla eşleşecek şekilde değiştirmeyi unutmayın.

Haberler Sayfasını Oluşturmak

Tech Bookstore’un Haberler (News) sayfasını oluşturmak son derece kolaydır, çünkü nk bu sayfa daha önce oluşturduğunuz İncelemeler (Reviews) sayfasına çok benzer. Haberler sayfası; bir TextArea bileşeni, CSS ile biçimlendirilmiş bir metin ve uzak bir dosyadan metin içeriğinin yüklenmesini sağlayan bir LoadVars deyiminden oluşmaktadır. Bu uygulamada, CD-ROM’da bulunan bazı metin dosyalarını kullanacaksınız.


1.Yeni bir belge oluşturun ve Stage’in genişliğini 635 piksel, yüksekliğini de 345 piksel olarak ayarlayın. Publish Settings iletişim kutusunu açın ve HTML onay kutusunun işaretini kaldırın. OK düğmesine tıklayın, ana belgeye geri dönün ve dosyayı news.fla ismiyle kaydedin.

Yeni bir Flash belgesi oluşturun ve Properties denetçisini kullanarak Stage’in boyutlarını değiştirin. Stage’in boyutlarını 635 piksel genişlikte ve 345 piksel yükseklikte olacak şekilde ayarlayın.Flash belgesini TechBookstore klasörünün köküne (root) kaydedin ve yeni bölgeyi news.fla olarak adlandırın.

Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız yoktur. Burada sadece, belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekir. bu nedenle, File menüsünden Publish Settings’i seçin, Formats sekmesindeki HTML seçeneğinin işaretini kaldırın, sonra da OK düğmesine tıklayın.

2.TextArea bileşeninin bir örneğini Stage’e sürükleyin ve örneğin genişliğini 615, yüksekliğinide 325 piksel olarak ayarlayın. TextArea örneğinin Stage’deki konumunu ayarlayın.

TextArea bileşeninin bir örneğini Components panelinden Stage’e sürükleyin. Properties denetçisini maksimum boya getirin. TextArea bileşeninin genişliğinin 615 piksel, yüksekliğinide 325 piksel olarak değiştirin. Örneğin Stage’deki x ve y koordinatlarını 10 piksel olarak ayarlayın. Bu ayar, bileşene Stage’in her yanında 10 piksel kalınlığında bir çerçeve uygulanmasını sağlayacaktır. TextArea örneğine news_txt ismini verin. Properties denetçisinde editable veya html parametrelerini ayarlamakla uğraşmanıza gerek yoktur. Bu parametreleri, daha ilerideki bir adımda ActionScript kullanarak ayarlayacaksınız.


3.Timeline’daki Layer 1 katmanının ismini form olarak değiştirin ve bir actions katmanı ekleyin.

Timeline’daki Layer 1 katman ına çift tıklayın ve katmanın ismini form olarak değiştirin. form katmanının üzerine yeni bir katman ekleyin ve buna da actions ismini verin. Bu katmanlara kazara herhangi bir sembol eklenmesini önlemek için bunları kilitleyin. Artık Stage’e başka sembol eklemeyeceğiniz için, katmanları kilitleyebilir ve bu durumda da ActionScript kodları ekleyebilirsiniz.

4.CSS’in SWF dosyasına ithal edilmesini sağlayacak ActionScript kodunu ekleyin.

Daha önce yaptığınız bir uygulamada stil sayfalarının nasıl ithal edildiğini öğrenmiştiniz. Harici bir stil sayfası kullandığınız takdirde, Flash belgelerinizin her birinde aynı stil sayfasını kullanabilir ve tutarlı bir görünüm elde edebilirsiniz. actions katmanının 1 numaralı karesini seçin ve Actions paneline aşağıdaki kodu ekleyin.

var flash_css = new TextField.StyleSheet();
flash_css.load(“styles.css”);
flash_css.onLoad = function(success:Boolean) {
if (success) {
news_txt.styleSheet = flash_css;
} else {
trace(“Error loading CSS file.”);
}
};

Bu ActionScript kodu, önceki uygulamada gördüğünüz koda çok benzer, ama bir farkla: Burada stil sayfasını review_txt örneğine bağlamak yerine, news_txt örneğine atıyorsunuz.

5.news isimli metin dosyasını yükleyin ve TextArea bileşeninin özelliklerini ayarlayın.

Actions katmanının 1 numaralı karesindeki stil sayfası kodunun altına, aşağıdaki ActionScript kodunu ekleyin. Bu kod, harici bir metin dosyasının LoadVars nesnesi kullanılarak yüklenmesini sağlar.

var news_lv:LoadVars = new LoadVars();
news_lv.load(“news.txt”);
news_lv.onLoad = function(success:Boolean) {
if (success) {
news_txt.text = this.content;
} else {
trace(“unable to load text file.”);
}
};

Bu ActionScript kodunu da daha önceki uygulamalardan hatırlayacaksınız.

6.TextArea örneğinin html ve editable özelliklerini ActionScript kullanarak ayarlayın.

html ve editable özel iklerini Properties denetçisini kul anarak ayarlamak yerine ActionScript kullanarak ayarlayacaksınız. Bunu, aşağıdaki kodu mevcut LoadVars kodunun altına yerleştirerek yapabilirsiniz.

news_txt.html = true;
news_txt.editable = false;

Buradaki ilk satır, html özel iğini true olarak ayarlar. Bu da HTML ile biçimlendirilmiş metni TextArea örneğinde (news_txt) görüntüleyebilmenizi sağlar. İkinci özel ik (editable), kul anıcının metinde değişiklik yapmasını ve TextArea bileşenindeki içeriği değiştirmesini önler. editable özel iğini true olarak ayarlasanız (ya da bu satırı hiç yazmasanız) ve kul anıcı alandaki içeriği değiştirse bile siteniz zarar görmez. Değişiklikler sadece kul anıcının bilgisayarında görüntülenir; başka kimse bunları göremez.

7.news.fla dosyasını test edin ve SWF dosyasının doğru bir şekilde çalıştığından emin olun. Herhangi bir sorun yoksa FLA dosyasını kaydedin, sonra da Publish Settings iletişim kutusunu açarak buradaki HTML seçeneğinin işaretini kaldırın. Belgeyi yayınladığınızda TechBookstore klasöründe news.swf dosyası oluşturulacaktır.

Metnin doğru bir şekilde yüklendiğinden emin olmak için Control >Test Movie komutunu kullanarak SWF dosyasını test edin. Her şeyin düzgün çalıştığından emin olduktan sonra belgeyi kaydedin (birinci adımda dosyayı kaydetmediyseniz belgeyi news.fla olarak adlandırın) ve FLA dosyasını yayınlayın. SWF dosyası ana TechBookstore sitesine yüklenecektir.

Giriş Sayfasını Oluşturmak

Giriş (Home) sayfası da, LoadVars nesnesi kullanılarak Tech Bookstore’a yüklenen biçimlendirilmiş bir metin bloğudur. Metin TextArea bileşeninin bir örneğine yüklenir. Bu bölümde, Tech Bookstore Web sitesinin giriş sayfasına yüklenecek olan SWF dosyasını oluşturacaksınız. Bu uygulamada, daha önceki uygulamalarda oluşturduğunuz varlıklardan bazılarını kullanacaksınız. Varlıkların tekrar kullanılması geliştirme sürecini hızlandırdığı için, burada kullanabileceğiniz en kolay yol, sayfayı sıfırdan başlayıp oluşturmak yerine, Haberler (News)bölümünün bir kopyasını oluşturup, bunun üzerinde gereken değişiklikleri yapmaktır. Bu nedenle, bu uygulamada Haberler sayfasının kopyasını oluşturacak ve bu kopyayı Giriş sayfasına dönüştüreceksiniz.

1.Önceki uygulamada oluşturduğunuz news.fla dosyasını açın. dosyanın yeni bir versiyonunu home.fla adıyla TechBookstore klasörüne kaydedin.

news.fla dosyasını başlangıç dosyası olarak kullanmak, yeni dosyayı oluştururken uygulamanız gereken pek çok adımı atlamanızı sağlar ve ActionScript kodunu da sıfırdan başlayarak yazmak zorunda kalmazsınız. Yapmanız gereken tek şey, Stage’in ve TextArea bileşeninin boyutlarını değiştirmek, örnek isimlerinde ve ActionScript kodunda biraz değişiklik yapmaktır; bu da size zaman kazandırır.

Önceki derste oluşturduğunuz news.fla dosyasının kopyasını açın. File menüsünden Save As’i seçin. Belgeye home.fla ismini verin, sonra da Save düğmesine tıklayın. Bu dosyayı önceki belgeyle aynı yere, TechBookstore klasörüne kaydedin.

2.Belgede Stage’in ve TextArea örneğinin boyutlarını değiştirin.

Tech Bookstore sitesinin Giriş sayfasının bir “gündemdeki kitap” modülü olduğu için, home.fla belgesinin boyutlarını siteye uyacak şekilde değiştirmeniz gerekiyor. Selection aracını kullanarak Stage’deki TextArea bileşen örneğine tıklayın ve Properties denetçisini kullanarak bileşenin genişliğini 570 piksel olarak ayarlayın. Bileşenin yüksekliğini 325 piksel, x ve y koordinatların da 10 piksel olarak bırakın. Stage’e tıklayın ve belgenin boyutlarını 580 x 345 piksel olarak ayarlayın.


3.TextArea örneği için yeni bir örnek ismi girin ve actions katmanındaki ActionScript kodunu değiştirin.

Stage’deki TextArea bileşen örneğini seçin ve Properties denetçisine yeni bir örnek ismi (home_txt) yazın. Bileşen örneğinin ismini değiştirdiğiniz için, ActionScript kodunuzda TextArea bileşenine ait başvuruları da değiştirmeniz gerekiyor. Ayrıca news_lv başvurularını da home_lv olarak değiştireceksiniz. Kodun değiştirilmiş hali aşağıdaki gibi olacaktır.

var flash_css = new TextField.StyleSheet();
flash_css.load(“styles.css”);
flash_css.onLoad = function(success:Boolean) {
if (success) {
home_txt.styleSheet = flash_css;
} else {
trace(“Error loading CSS file.”);
}
};
var home_lv:LoadVars = new LoadVars();
home_lv.load(“home.txt”);
home_lv.onLoad = function(success:Boolean) {
if (success) {
home_txt.text = this.content;
} else {
trace(“unable to load text file.”);
}
};
home_txt.html = true;
home_txt.editable = false;

Bu ActionScript kodu news.fla dosyasına ait kodla neredeyse aynıdır. Burada, sadece örnek isimlerinin ve yüklenen harici metin dosyasının ismini değiştirmeniz gerekti.

Bu ActionScript kodunun ikinci satırdan son satıra kadar olan kısmı, Stage’deki home_txt örneğinin HTML ile biçimlendirilmiş metni doğru olarak göstereceğinden emin olmanızı sağlar. Metninize ilave biçimlendirme özellikleri eklemek için resimler, kalın, italik metinler ve madde imli listeler kullanabilirsiniz. Son satır ise editable özelliğini false olarak ayarlar. Bu da, kullanıcıların ekranlarındaki metinde değişiklik yapmasını engeller.

4.home01.jpg ve home02.jpg dosyalarını TechBookstore klasörüne kopyalayın.

Flash belgenizi doğru bir şekilde test edebilmek içim, LoadVars kullanarak yüklenebilen bir metin dosyasını kopyalamanız ya da oluşturmanız gerekir. Tech Bookstore sitesinin giriş sayfası için bir metin dosyası uygundur. home.txt dosyasını ve iki resmi (home01.jpg ve home02.jpg) sabit diskinizdeki TechBookstore klasörüne kopyalayın. Metin dosyasını açın ve HTML biçimlendirme kodlarını inceleyin.

Not: İki resim dosyası, HTML ile biçimlendirilmiş metinde kullanılıyor ve SWF dosyasına home.txt dosyasındaki <img> etiketi kul anılarak yükleniyor.

Tech Bookstore’a yüklenecek metin dosyasını kendiniz oluşturuyorsanız, HTML kodunu ve biçimlendirmeyi istediğiniz basitlikte ya da karmaşıklıkta oluşturabilirsiniz. Flash, HTML sürüm 1.0 etiketlerinin küçük bir alt kümesini destekler.

•Anchor <a>: Flash metin alanlarınıza linkler eklemenize imkân sağlar. <a> etiketi ayrıca, linkin hangi karede ya da pencerede açılmasının gerektiğini belirtmenize imkân sağlayan target niteliğinin kullanımını da destekler. Bir stil sayfası kullanıyorsanız, a:link, a:hover ve a:active’e ait renkleri ve nitelikleri de belirtebilirsiniz.

•Bold <b>: Metni kalın olarak görüntüler.

•Break <br>: Belirtilen noktaya bir satır sonu ekler.

•Font <font>: Geçerli fontu, büyüklüğünü ve rengini değiştirmenize imkân sağlar. Stil sayfalarını kullanmadığınız ve metninizi biçimlendirmek istediğiniz durumlarda bu etiket çok faydalıdır.

•Image <img>: Metin alanlarınıza resim eklemenize imkân sağlar. Bu etiket, yerel ya da harici resim dosyalarının, SWF dosyalarının, hatta kütüphaneden sembollerin yüklenmesini destekler (sembolü bir bağlantı tanıtıcısına atayarak).

•Italics <i>: Metni italik olarak görüntüler.

•List Item <li>: HTML’den biraz farklı olarak, <li> etiketi bir çift <ol> (ordered list; sıralı liste) ya da <ul> (unordered list; sırasız liste) etiketinin arasında yer almaz. Flash’taki <li> etiketi, madde işaretli listeleri kolayca oluşturmanıza imkân sağlar.

•Paragraph <p>: Yeni bir paragraf eklemenizi sağlar.

•Span <span>: Bir kod bloğuna stiller eklemenize imkân sağlar.

•TextFormat <textformat>: Flash’ta basit tablolar oluşturmanıza imkân sağlar.

•Underline <u>: Metnin bir bölümünün altını çizer.

Flash sadece bir düzine kadar etiketi desteklese de, sitenizdeki metinleri, bunları Flash’ın yerleşik CSS desteğiyle bir arada kullanarak biçimlendirdiğinizde son derece etkileyici sonuçlar elde edebilirsiniz.

İpucu: Bir resmi sadece TextArea örneğine yüklerseniz ve resmin boyutları TextArea örneğinin boyutlarından büyükse, kaydırma çubukları görüntülenmez. Kaydırma çubuklarının etkin hale gelebilmesi için, resmi takip eden bir metnin olması gerekir. büyük resimler yüklüyor ve bunların kaydırılabilmesini istiyorsanız, TextArea yerine ScrollPane bileşenini kullanmanız gerekir. Aynı işi yapması için bir movie clip’le birlikte kendi ActionScript kodunuzu da yazabilirsiniz.

Bu dosyayı olduğu gibi kullanmak istiyorsanız kapatın. Fakat tercihiniz bu değilse, artık nasıl biçimlendirildiğini bildiğinize göre dosyada istediğiniz değişiklikleri yapabilirsiniz.

5.Flash belgesinde her şeyin doğru bir şekilde çalıştığından emin olun. home.fla dosyasını kaydedin, sonra da yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.

Control menüsünden Test Movie’yi seçip FLA dosyasını test ortamında test ederek, çalışmasında herhangi bir sorun olmadığından emin olun.


SWF dosyasında ve biçimlendirmede herhangi bir sorun olmadığını gördükten sonra, geliştirme ortamına geri dönün. Sonra da FLA dosyasını kaydedin ve yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır.

Menüyü Canlandırmak

Bu uygulamada, her düğmeye tıklandığında Tech Bookstore sitesinde aşağıya doğru açılan menüleri canlandıracaksınız.Bir düğmeye tıklandığında menü aşağıya doğru açılır, imleç menüden uzaklaştırıldığında ise, menü yukarı doğru kayarak kapanır. Menünün kullanılacağı animasyonu daha önceki derslerden birinde oluşturmuştunuz. Şimdi de ziyaretçi düğmelere tıkladığında ya da imleci bunlardan uzaklaştırdığında animasyonun oynamasını sağlayacak ActionScript kodunu yazacaksınız.


1.bookstore13.fla dosyası açık değilse, sabit diskinizdeki TechBookstore klasöründen bu dosyayı açın.

Bu dosyada daha önce bazı düzenlemeler yaparak kütüphanedeki mcSamplechapters ve mcToc’u silmiştiniz.

2.Bu uygulamada daha sonra ActionScript kodu kullanarak, düğmeleri ve movie clip’leri kontrol edebilmek için menüdeki tüm örneklere birer örnek ismi verin.

Gezinti çubuğundaki üç ana düğmeye, sonra da bunların arkasında bulunan üç menüye örnek isimleri vermeniz gerekiyor.

Ana Stage’in üst kısmında yer alan üç düğmeyi adlandırın. Bunu yaparken gerekiyorsa buttons katmanının kilidini çözün. Products (Ürünler) düğmesine products_btn, Company (Firma) düğmesine company_btn ve Contact (İrtibat) düğmesine de contact_btn örnek isimlerini verin. Bu işlemleri tamamladıktan sonra buttons katmanını kilitleyin.


Şimdi de, bu üç düğmenin arkasında bulunan üç menüye örnek isimleri vereceksiniz. buttons katmanını gizlemek işinizi kolaylaştırabilir. Menülerin kendisi graphics katman klasöründe menu katmanında yer almaktadır. Menü katmanına sağ tıklayın ya da Control tuşuyla tıklayın ve bağlam menüsünden Lock Others komutunu seçin. Mask katmanını gizleyin. Products düğmesinin arkasındaki menüye tıklayın ve buna productsmenu_mc örnek ismini verin. Sonra da Company düğmesinin arkasındaki menüye companymenu_mc, Contact düğmesinin arkasındaki menüye de contactmenu_mc örnek ismin verin. Sembol örneklerinin her birine soneklerin eklenmiş olduğuna dikkat edin. ActionScript kodunu yazmaya başladığınızda bunlar sayesinde kod ipuçlarını (code hints) kullanabileceksiniz.

Menü movie clip’inin içinde isim vermeniz gereken başka bir movie clip vardır. productsmenu_mc örneğine çift tıklayın ve bu movie clip’in içindeki menüyü seçin. Properties denetçisini maksimum boya getirin ve bu klibe menu1_mc örnek ismini verin. Örneğin üzerinde bulunduğu katmanın kilidini çözmeniz gerekebilir. Sonra, bu katmanda yer alan menüye ait tween animasyonundaki ikinci örneği seçin. Buna da aynı ismi (menu1_mc) verin. Bu işlemi bu animasyondaki üçüncü ve son anahtar kare için de tekrarlayın.


Düzenleme çubuğunu kullanarak ana Stage’e geri dönün. companymenu_mc örneğine çift tıklayın ve bunun içindeki klibe menu2_mc örnek ismini verin. Düzenleme çubuğunu kullanarak ana Stage’e geri dönün ve bu işlemleri son menü için de tekrarlayarak Properties denetçisine menu3_mc örnek ismini girin. İşiniz bittikten sonra menu katmanını kilitleyin.

3.actions katmanının 1 numaralı karesinde, Actions paneline aşağıdaki ActionScript kodunu ekleyin. Bu kod menünün değişkenlerine ilk değerlerini atar. Koda ayrıca, ziyaretçi Stage’e sağ tıkladığında menüyü kaldıran bir satırı da ekleyeceksiniz.

Bu kareye bir stop eylemi girilmiş durumdadır. Bu eylemin altına aşağıdaki üç kod satırını eklemeniz gerekiyor. Üç değişken, üç menüden hangisinin açık durumda olduğunu (tabii açık bir menü varsa) izlemek için kullanacağınızı bayraklardır (flag). Değer 0 olarak ayarlanmışsa, kayan menü kapalı durumdadır (etkin durumda değildir). Değişkenin değerinin 1 olması, menünün açık (etkin) ve Stage’de görünür durumda olduğunu gösterir.

var prodmenu:Number = 0;
var compmenu:Number = 0;
var contactmenu:Number = 0;

Sonra değişkenlerin altına aşağıdaki ActionScript kod satırını ekleyin.

Stage.showMenu = false;

Bu ActionScript kodunu belgenize eklediğinizde, SWF dosyası yayınlandıktan sonra ziyaretçiler dosyaya sağ tıkladıklarında (ya da Control tuşunu basılı tutup tıkladıklarında) Flash Player menü seçeneklerinin çoğunu göremezler. Normalde açılan bağlam menüsü Zoom (Yakınlaş) ve Play (Oynat) gibi birkaç seçenek içerir. Ama bu ActionScript kodunu eklerseniz, ziyaretçinin Flash Player ayarlarını kontrol etmesine imkân sağlayan Settings (Ayarlar seçeneğinin dışındaki seçeneklerin hepsi menüden çıkarılır.

4.actions katmanının 1 numaralı karesine, kullanıcı imleci menü alanından uzaklaştırdığında bütün menülerin kapanmasını sağlayan aşağıdaki kodu girin.

Görünmez düğme, kullanıcı imleci üzerine getirdiğinde bütün menüleri kapatır. Daha önce, menüler açık durumdayken bunların etrafı oluşturmuştunuz.
Daha sonra, imleç görünmez düğmenin üzerine getirildiğinde, SWF dosyasına menüleri kapatacak fonksiyonu ne zaman çağırmasının gerektiğini söyleyen ActionScript kodunu eklemeniz gerekiyor. İmleç düğmenin üzerine getirildiğinde, bu ActionScript kodu kullanılarak açık durumdaki bütün menüler kapatılır.

Not: Aşağıdaki kodun yerine ActionScript’teki for..in döngüsü de kullanılabilirdi. Her ne kadar bu konu kitabın kapsamı dışında olsa da, ActionScript öğrenmeye devam ederseniz, bu konuyu araştırarak buradaki kodu uygun şekilde değiştirebilirsiniz. Bu durumda yapacağınız şey, yukarıdaki adımda tanımlanan üç değişi keni bir nesneye yerleştirmektir. for.. in döngüsü kullanılarak, nesnedeki her bir öğe üzerinde döngüye girebilir ve bir kod bloğunu çalıştırabilirsiniz. Bu da gereken kod miktarını azaltmanızı, ayrıca kodu daha esnek hale getirmenizi sağlar.

Tech Bookstore’a ekleyeceğiniz ActionScript kodu çok uzun olmadığı için, ActionScript kodunun tekrarlanmasında bir sakınca yoktur. Şu an için, dilin bu kısımlarını doğru bir şekilde kullanmayı öğrenmek bu işin en önemli tarafı

//görünmez düğme
this.btnReturnMenus.onRollOver = function() {
if (contactmenu == 1) {
contactmenu_mc.gotoAndPlay(“slideup”);
contactmenu = 0;
}
if (compmenu == 1) {
companymenu_mc.gotoAndPlay(“slideup”);
compmenu = 0;
}
if (prodmenu == 1) {
productsmenu_mc.gotoAndPlay(“slideup”);
prodmenu = 0;
}
};

Bu fonksiyon btnReturnMenus örneğe ait bir onRollover olay işleyicisinin içine yerleştirilmiştir. Yani kullanıcı imleci btnReturnMenus örneğinin (Stage’deki g örünmez düğmenin) üzerine her getirdiğinde, bu fonksiyon çalıştırılır. Kod menülerin her birine bakar ve değerin 1 olup olmadığını, yani SWF dosyasında menünün açık olup olmadığını kontrol eder. Değişkenin değeri 1 ise, menü açıktır (yani aşağıya doğru tam olarak açılmış) ve kapatılması (yukarı doğru canlandırılması) gerekiyor demektir. Bu nedenle, menünün kapanması için ilgili movie clip’e (productsmenu_mc, companymenu_mc ya da contactmenu_mc) ait oynatım kafasının slideup etiketli kareye gitmesini sağlamanız gerekiyor.

Yukarıdaki kodda, kapanan yuvalanmış movie clip’lere giden yola da dikkat edin. Kod btnReturnMenus örneği için yazıldığından, menü movie clip’lerine ait yollar contactmenu_m c.gotoAndPlay(“slideup”) olarak gösterilebilir. Bu, üzerine yerleştirildiği Timeline’a (yani Stage’e) başvuruda bulunan bir düğme kodudur. Stage’den contactmenu_mc örneğine ve buna ait gotoAndPlay metoduna doğrudan başvuruda bulunabilirsiniz.

5.Görünmez düğmenin kodu eklendiğine göre, bunun altına menülerin kendisi için gereken kodları girebilirsiniz.

İmleç görünmez düğmenin üzerine getirildiğinde menülerin kapanmasını sağlayacak kodu eklediğinize göre, ana gezinti öğelerine tıklandığında menüleri canlandıracak kodu eklemenin zamanı geldi demektir. Eklemeniz gereken kod btnReturnMenus örneğinin koduna çok benzer. Ama burada yapmanız gereken, üzerine tıklanan menüyü açmak ve diğer iki menü açıksa bunları kapatmaktır.

//products (ürün) menüsü
this.products_btn.onRollOver = function() {
if (contactmenu == 1) {
contactmenu_mc.gotoAndPlay(“slideup”);
contactmenu = 0;
}
if (compmenu == 1) {
companymenu_mc.gotoAndPlay(“slideup”);
compmenu = 0;
}
if (prodmenu == 0) {
productsmenu_mc.gotoAndPlay(“slidedown”);
prodmenu = 1;
}
};

//company (firma) menüsü
this.company_btn.onRollOver = function() {
if (prodmenu == 1) {
productsmenu_mc.gotoAndPlay(“slideup”);
prodmenu = 0;
}
if (contactmenu == 1) {
contactmenu_mc.gotoAndPlay(“slideup”);
contactmenu = 0;
}
if (compmenu == 0) {
companymenu_mc.gotoAndPlay(“slidedown”);
compmenu = 1;
}
};
//contact (irtibat) menüsü
this.contact_btn.onRollOver = function() {
if (compmenu == 1) {
companymenu_mc.gotoAndPlay(“slideup”);
compmenu = 0;
}
if (prodmenu == 1) {
productsmenu_mc.gotoAndPlay(“slideup”);
prodmenu = 0;
}
if (contactmenu == 0) {
contactmenu_mc.gotoAndPlay(“slidedown”);
contactmenu = 1;
}
};

Bu kod ilk bakışta çok uzun gibi görünse de, aslında son derece basittir, çünkü belirli kod parçaları sürekli olarak tekrarlanmaktadır. Gezinti bölümünde üç menü yer alır: products, company ve contact. Her menü öğesi için, diğer iki menüyü kontrol ederek bunların açık olmadığından emin olmanız gerekir. Bunu daha önce ayarlamış olduğunuz üç değişkene (prodmenu, compmenu ve contactmenu) bakarak anlayabilirsiniz. Bu değişkenlerin değerleri 1 ise, ilgili menünün açık olduğunu ve açılması gereken menüyü görüntüleyebilmek için bunları kapatmanızın gerektiğini anlarsınız.

Yukarıdaki kod, her biri bir menü öğesine ait üç ana kısımdan oluşuyor. products_btn düğmesine tıkandığında, Flash compmenu ya da contactmenu değişkeninin değerinin 1 olup olmadığını (yani bunlarla ait menülerin açık olup olmadığını) kontrol eden yerel fonksiyonu çalıştırır. Eğer bir menü açıksa, buna ait değişkenin değeri 0 olarak ayarlanır ve menü kapatılır; bu daha önce btnReturnMenus örneğine ait koda benzerdir.

Son olarak da, açılması gereken menünün (bu örnekte products) açık mı, kapalı mı olduğunu kontrol edersiniz. Bu menü kapalıysa, açılmasını sağlamanız gerekir. Bu kodda herhangi bir else deyiminin kullanılmasına gerek yoktur, çünkü açılması gereken menü zaten açıksa işlem tamamlanmış demektir. Bu durumda yapmanız gereken tek şey, bir sonraki menü öğesine giderek onun açık olup olmadığını kontrol etmektir. company_btn örneğinde de mantık aynıdır. Aradaki tek fark, burada prodmenu ve contactmenu’nün kapalı olup olmadığını kontrol etmenizdir.

Not: Yine her şeyi mümkün olduğu kadar basit tutmak amacıyla, buradaki menüler için olabilecek en zarif kodu kullanmadık. Burada önemli olan sadece yöntem değil, ayrıca menülerin nasıl hedeflendiği ve if deyimlerinin anlaşılması. Bu kod kısaltılabilir, ama kısaltıldığı oranda karmaşıklığı da artabilir ve nasıl çalıştığının anlaşılması zorlaşabilir. Bu kodu basitleştirmenin belki de en iyi yolu, iki parametre (genişletilen bir menü öğesi ve gizlenen menü öğelerinden oluşan bir dizi) alan bir fonksiyon oluşturmaktır. Bu mantığı bir fonksiyona dönüştürerek, kodu üç durumda da tekrar kullanabilirsiniz. Böylece, sadece fonksiyona aktarılan parametreleri ayarlamanız yeterli olur.

6.Kodunuzun sözdizimini kontrol edin ve Actions panelini kullanarak biçimlendirin. Sonra da test ortamında menünün animasyonunu test edin.

Actions panelinin üst kısmında yer alan Check Syntax (Sözdizimini Kontrol Et) düğmesine tıklayın. ActionScript kodunuzda herhangi bir sorun varsa (örneğin bir parantezin girilmesi unutulmuşsa), Output panelinde bir mesaj görüntülenir. Bu durumda kodunuzun 3-5. adımlardaki kodlarla aynı olup olmadığını tekrar kontrol etmeniz gerekir. hataları düzelttikten sonra, Actions panelinin araç çubuğundaki Auto Format düğmesine tıklayın. Bu düğmeye tıkladığınızda ActionScript kodundaki girintiler uygun şekilde ayarlanır ve deyimlerin sonunda eksik olan noktalı virgüller tamamlanır.

Menülerin SWF dosyasında doğru şekilde hareket edip etmediklerini görmek için, Ctrl+Enter (ya da Mac’te Cmd+Enter) tuşlarına basın. Herhangi bir sorunla karşılaşırsanız, öncelikle ActionScript kodunun 3-5. adımlardaki kodun aynısı olup olmadığını kontrol edin. Sorun maskeyle ya da görünmez düğmeyle ilgili gibi görünüyorsa, maskenin menü açıldığında menüyü uygun bir şekilde kapladığından ve görünmez düğmenin menünün etrafın etraf şekilde çevrelediğinden emin olun.


İpucu: Menüyü test ettiğinizde, maskenin pek uygun bir şekilde ayarlanmamış olduğunu görebilirsiniz. Menüler maskenin dışına çıkıyorsa, maskenin büyüklüğünü menüyü kapatmayacak şekilde tekrar ayarlamanız gerekir. görünmez düğmenin menüyü kapatan hit alanının doğru çalışmadığını da fark edebilirsiniz. Durum buysa, menünün boyutlarını biraz değişi tirmeniz gerekir.

7.Menü animasyonu düzgünse, FLA dosyasında yaptığınız değişiklikleri kaydedin.

bookstore13.fla dosyasında yaptığınız değişiklikleri kaydedin ve bir sonraki uygulamaya geçin. Bu uygulamada, menünün içindeki düğmelerin çalışmasını sağlayacak kodu ekleyeceksiniz.