ActionScript`in Temelleri

Transkript

A-PDF Split DEMO : Purchase from www.A-PDF.com to remove the watermark
9
ActionScript’in
Temelleri
Macromedia Flash 8 Basic kullanıyorsunuz diye Flash’ın en güçlü özelliklerinden birine
erişemeyecek değilsiniz. “İşlerin yürümesini sağlamak” için kullanacağınız bu özelliğin adı
ActionScript ve o olmadan Flash uygulamalarınıza gerçek birer uygulama diyemezsiniz.
Uygulamalarınızı bir sergideki resimlere benzetebiliriz. Onlara bakmak çok zevklidir, peki
ama bu uygulamalar ne yapar? Eğer ActionScript kodları kullanıyorlarsa; satış vergisini
hesaplayabilir, metin alanlarındaki bilgileri okuyabilir ya da Flash Player aracılığıyla başka
bir konumda yer alan MP3 dosyalarını akıtabilir ve sadece güzel görünmenin ötesinde daha
pek çok güzel şey yapabilirler.
ActionScript
Tech Bookstore
sitesine canl
canlılıl k
kazand rır r
kazandı
Eğer ActionScript terimi korkunç görünüyorsa lütfen korkmamaya çalışın. ActionScript, aslında
belirli şeyleri kontrol etmek için kullanılan bir araçtır. ActionScript’i örneğin movie clip’lere ne
yapmaları gerektiğini söylemek, komşunun çocuğu LoadVars’ı çağırıp sizin için yerel metin
dosyasından bir şeyler almasını söylemek için kullanırsınız. ActionScript işleri organize etmek
için kullanılır. Kısacası, ActionScript kullanmanın, eşinizi markete göndermeden önce eline
bir alışveriş listesi tutuşturmaktan çok farkı yoktur (biz erkekleri kast ettiğini biliyorum, çünkü
bizleri bir alışveriş listesi olmadan markete göndermek pek akıl kârı değildir). Burada da belirli
öğelere ne yapmaları, bunları hangi sırayla ve nasıl yapmaları gerektiğini söylersiniz. Buyurmayı
seven bir yapıya sahipseniz, ActionScript kullanmak sizin için çok kolay olacaktır.
Bu derse harici verileri yüklemek için ActionScript kullanacaksınız. ActionScript’i birtakım
verileri Flash’ın dışında bir yere göndermek için de kullanacaksınız. Dahası, en sonunda
menülerinize animasyon uygulayabileceksiniz. Bu derste Script Assist’i kullanmayacaksınız, bu
yüzden parmaklarınızı ısıtmaya başlayın, zira kendi ActionScript kodlarınızı kendiniz yazmak
zorundasınız. Bununla birlikte, çoğu görevin diğerlerine benzediğini görecek ve çok kısa bir
sürede bu işe de ısınacaksınız.
Bu Derste Öğrenecekleriniz
Bu derste şunları öğreneceksiniz:
• ActionScript 2.0’ı öğreneceksiniz.
• Nesne, metot ve özellik kavramlarını öğreneceksiniz.
• Değişkenlerde kesin tip belirleme tekniğinin nasıl kullanıldığını öğreneceksiniz.
• ActionScript’le çalışırken işleri hızlandırmak için kod ipuçları özelliğini kullanmayı
öğreneceksiniz.
• Fonksiyon ve koşullu deyim kavramlarını öğreneceksiniz.
• Faaliyet alanı ve değişkenlerin kullanımını göreceksiniz.
• _root, _parent ve level anahtar sözcüklerinin nasıl kullanıldığını öğrenceksiniz.
• Veri göndermek ve almak için LoadVars nesnesiyle çalışacaksınız.
• Kodlarınızda olayları, olay işleyicileri ve izleyicileri kullanacaksınız.
• Bir metne CSS biçimlendirmesi ekleyecek ve bu metni bir belgeye yükleyeceksiniz.
• Catalog (Katalog), Reviews (İnceleme), News (Haber) ve Home (Giriş) sayfalarını
oluşturacaksınız.
• Tech Bookstore menüsüne animasyon uygulayacaksınız.
• Tech Bookstore menüsünün çalışmasını sağlayacaksınız.
240 DERS 9
Yaklaşık Süre
Bu dersi yaklaşık 3 saatte tamamlayabilirsiniz.
Gerekli Dosyalar
Ortam Dosyaları:
lesson09/assets/catalog01.png
lesson09/assets/catalog02.png
lesson09/assets/home01.jpg
lesson09/assets/home02.jpg
Başlangıç Dosyaları:
lesson09/start/bookstore12.fla
Tamamlanmış Dosyalar:
lesson09/complete/bookstore13.fla
lesson09/complete/reviews.fla
lesson09/complete/news.fla
lesson09/complete/catalog/catalog01.fla
lesson09/complete/catalog/catalog02.fla
lesson09/complete/reviews/0321213408.txt
lesson09/complete/reviews/0321219198.txt
lesson09/complete/home.fla
lesson09/complete/home.txt
lesson09/complete/styles.css
ACTIONSCRIPT’İN TEMELLERİ 241
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
ıf (class) adı verilen araçlar (sınıflar, bu işlevselliği kullanması gereken öğeler için
ıf
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
değ
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
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).
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
ıflar
ü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
242 DERS 9
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
ıff,, ortak becerileri ve özellikleri
ıf
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.
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 kitaptaki
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ş
i iklik yapmayın.
iş
ActionScript 2.0, Math sınıfı
f , Button sınıfı
fı
f ve Date sınıfı
fı
f gibi bir dizi yerleşik sınıf içerir. Daha
fı
önce MovieClip sınıfı
f nı ve onun bazı metotlarını ve özelliklerini (stop ve gotoAndPlay metotları
fı
gibi) kullanmıştınız. MovieClip sınıfı
f , değiştirebileceğiniz ya da belirli bir örnek için yeniden
fı
ayarlayabileceğiniz özelliklere de (_visible, _width ve _height gibi) sahiptir. Aslında Stage’iniz de
MovieClip sınıfı
f nın bir örneğidir. Yerleşik bir sınıfı
fı
f n nasıl kullanıldığını kısaca inceleyeceğiz.
fı
Flash la gelen MovieClip, Button, TextField ve Component bileşen sınıflarını temel alan nesneler
Flash’
görsel olarak yaratılabilir (diğer bir deyişle bunların örnekleri oluşturulabilir). Ancak birçok
Flash sınıfı
f nın örneğinin (LoadVars ve Sound gibi) ActionScript kullanılarak oluşturulması
fı
gerekir. ActionScript kullanarak bir sınıfı
f n yeni bir örneğini yarattığınızda aslında yapılandırıcı
fı
fonksiyon (constructor function) adı verilen bir öğeyi çağırırsınız. Yapılandırıcı fonksiyon, bir
sınıfı
f n içinde tanımlanan ve nesneyi oluşturarak belleğe gönderen özel bir fonksiyon türüdür.
fı
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
’’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ı
ffı örneğini adlandırmanız, sonra
da bir şey yapmasını istediğinizde onu ismiyle çağırmanız gerekir. Stage’deki
’’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ı
f nın sadece bellekte bulunan ve sizden alacağı komutları bekleyen bir
fı
örneğidir.
Sound sınıfı
f , yerleşik sınıfa bir örnektir. Yerleşik sınıf
fı
ı demek, Flash
ıf
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ı
f n kendisini
fı
oluşturan önceden tanımlanmış metotlara ve özelliklere
zelliklere sahiptir. Macromedianın
Macromedia’
programcıları
taraf ndan üretildikleri için bunlar için endişelenmeniz gerekmez.
tarafı
Metotlar ve Özellikler
Sınıflar, önceki bölümde gördüğünüz gibi, çeşitli metot ve özelliklerden 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 kullanı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
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
244 DERS 9
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
’
’deki
myMovieClip_mc örneği için kullanılmaktadır.
Olayları ve olay iiş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. Kitap 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,
zda, Flash
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ı
f gibi). FLA dosyanızdaki nesnelerin örnek isimlerinde
fı
sonek kullandığınızda, Flash bu örnekle ilgili doğru kod ipuçlarını görüntüler. Soneklere örnek
246 DERS 9
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
Flash’ı
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ğı
Ba msızz de
değiş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
ne zaman
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ı
in ffı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);
248 DERS 9
Fonksiyon çalıştırıldıktan sonra tavuk sonucunu döndürür.. Yani tavuk ffırından çıkarılır.
Mmm, tavuk, nefis.
Bileşenlerin de parametre aldığına
na dikkat etmi
etmişsinizdir. Yani Properties denetçisini
ya da Component Inspector panelini kullanarak girdiğiniz ya da ayarladığınız
parametre değerleri, aslında ActionScript’te bileşenler
enler taraf
tarafından kullanılan belirli
değerleri ayarlamaktadır. Her bileşendeki
endeki ActionScript kodu, Flash tasar
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ı
f nın OnLoad metoduna kadar çeşitli fonksiyon
fı
ö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.
Yukarıdaki kodda kullanılan çift eşittir
ittir iişareti, iki değeri
eri kar
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 iişlemi eşleştirme yapmak olarak düşünün.
Kodlarda çeşitli girintilerin kullanıldığına
na dikkat etmi
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
250 DERS 9
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.
Aynı değiş
i ken isimlerini fonksiyonlarda ve diğer faaliyet alanlarında isim
iş
ç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ş
i kenler kullandığınızda, ileride kodu
iş
düzenlerken kafanız karışabilir.
Timeline değişkenleri: Bu değişkenler sadece aynı Timeline’
Timelineda
’’da bulunan script’ler
ler taraf
tarafından
kullanılabilir. SWF dosyasında birden fazla Timeline olabileceğini unutmayın, çünkü
nk bir movie clip
nkü
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
ken bir Timelineda
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,
tirilirse, ana Timelineda
Timeline’’da
’ numUsers
adında bir değişken oluşturur. Bu değişken
ken Timelineda
Timeline’’’da 10 numaralı kareden sonra var olur; 10
numaralı kare oynatılmadan önce, bu değişken SWF dosyasında kullanılamaz.
var numUsers:Number = 5;
Global değişkenler: Bu değişkenler SWF dosyasının içindeki bütün
n Timeline
Timeline’larda, faaliyet
alanlarında ve fonksiyonlarda kullanı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 kullanabilirsiniz.
Global değişkenlerin sağladığı faaliyet alanı ilk iki faaliyet alanından çok farklı değildir. Çünkü
nk bu
nkü
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 kullanı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 kullanırsanız,
this anahtar sözcüğü bu movie clip
clip’in Timeline
Timeline’ına göndermede bulunur. Bir düğme
fonksiyonunda kullanırsanız, this anahtar sözcüğü düğmenin kendisini değil de düğme örneğini
içeren
eren Timeline
Timeline’ı belirtir. Doğrudan
rudan bir movie clipe
clip’’’e iliştirilmiş bir onClipEvent() işleyicisiyle
kullanıldığında ise, this anahtar sözcüğü movie clip
clip’in Timeline
Timeline’ını belirtir.
Sonraki sayfada yer alan kodu inceleyin. Aşağıdaki
daki gibi bir kodu ana Timeline
Timeline’a yerleştirirseniz,
bu kod çok farklı şeyler yapar. Diyelim ki çalışan bir SWF dosyanızz var ve Stagede,
Stage’’’de, yine bir
içeriği oynatmakta olan myClip adında
nda bir movie clip
clip’iniz var. ActionScript aracılığıyla
ığı onRelease
ığıyla
252 DERS 9
olay işleyicisini
leyicisini ekleyerek, movie clip
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
ı
ıyorsa
myClip_mc örneğinin kendisini durdurur. Fonksiyonun
içindeki kod, this anahtar sözcüğünü kullanarak movie clip
clip’in Timeline
Timeline’ını hedefler. Bunun
yerine, aşağıdaki ActionScript kodunu kullandığınızda
zda bu kod movie clip
clip’in Timeline
Timeline’ı yerine ana
Timeline durdurur.
Timeline’ı
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),
r), Flash
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
’’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
Patron sensin
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. Lockroot hakkında daha
fazla bilgi için, Kaynağından Eğitim (Training from the Source) serisinin diğer kitaplarına
başvurabilirsiniz.
Oluşturduğunuz
unuz uygulamada, Stagedeki
Stage’’’deki
deki movie clip
clip’’lerin içinde yuvalanmış olarak kodlar
ya da kodun hedeflediği elemanlar bulunur. Eğer
er bu movie clip
clip’ler boşsa, bunların herhangi
birine bir SWF dosyası yükleyebilmeniz gerekir ve bu SWF dosyası ana Timelinedaki
Timeline’’’daki nesneleri
hedefleyebilir. Eğer
er movie clipe
clip’ yüklenen SWF dosyasının içinde kodunuz varsa, _parent anahtar
sözcüğünü kullanarak ana Timeline
Timeline’ı ya da ana Timelinedaki
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ı
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
üy
ıı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
ıı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.
Timeline’ı
tirebilirsiniz. Bu, orijinal clip
clip’in uygulamanın tamamında ihtiyacınız olan
değişkenleri ve özellikleri içermesi durumunda pek iyi bir fikir olmayabilir.
Bir SWF dosyasını bir movie clip’e
’’e ya da bileşene (Loader gibi) yüklediğinizde, bu
dosya yeni bir seviyeye yüklenmiş
klenmi olmaz, ilgili movie clip ya da bileşen örneğinin
klenmiş
kendisine yüklenir. Bu aşamadan sonra içerik movie clip’te saklanır ve Stage’deki
’
’deki
diğer movie clip’ler gibi değerlendirilir. Bu da, değiş
i ken benzeri verilerin daha kolay
iş
y netilmesini sağlar.
yö
Y klenen bir SWF dosyasının farklı seviyesindeki bir öğeyi hedeflemeniz gerekiyorsa,
Yü
aşağıdaki gibi bir kod satırı kullanabilirsiniz.
_level2.myMovieClip_mc.gotoAndPlay(3);
Y klenen bir SWF dosyasını hedefleyen bir kodu çağırmadan önce, içeriğin
Yü
tamamen yüklenmiş
klenmi olduğundan emin olun. Aksi takdirde, çağırdığınız kod düzgün
klenmiş
bir şekilde çalışmayacaktır.
LoadVars Sınıfı
Tech Bookstore Web sitesi boyunca LoadVars sınıfı
f nı kullanmaya devam edeceksiniz. Artık
fı
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ı
f nı bir
fı
örnek olarak incelemeye hazırsınız demektir.
254 DERS 9
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
kenleri Flash
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
tarafındaki
dillerden birini (ColdFusion, PHP, ASP ya da Java gibi) kullanırken,
rken, sunucu taraf
tarafındaki dilin
bir veritabanını sorgulayarak en yeni makaleleri daha sonra bir SWF dosyası tarafı
taraf ndan
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.
nderir. Veriler, burada sunucu taraf
tarafındaki script’ler
• send, sadece verileri bir sunucuya gönderir.
taraf ndan işlenebilir ve bir veritabanına girilebilir, bir XML belgesine eklenebilir, e-posta
tarafı
mesajı olarak gönderilebilir
nderilebilir (ya da sunucu taraf
tarafındaki çözümü nasıl tasarladıysanız, ona
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
ndermek ve sunucu taraf
tarafındaki yazılımın bir veritabanını
sorgulamasını, ardından bir kitap incelemesini ya da bir kitapla ilgili bilgileri alarak
sonucu bir SWF dosyasında görüntülenmek üzere
zere Flash
Flash’a göndermesini istiyorsanız,
TechBookstore sitesi için faydalı olabilir. Buradaki son metot load’dur.
’’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,
da, Flash taraf
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
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ı
f nı kullanarak Flash
fı
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.
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ı
f ndaki load metodunu kullanarak yüklüyorsunuz. Bu da ActionScript kodunun ikinci
fı
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
fı
Flash’ın belirli şeyler
gerçekleştiğinde tetiklediği birkaç tane olaya da sahiptir. Buradaki kodda tetiklenen olay
onLoad’dur
’’dur ve bu olay, load metodunda tanımlanan metin dosyası Flash’
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.
256 DERS 9
İ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 metaveri 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
’’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
de HTMLdeki
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
’
’deki
List
bileşeni seçili durumdayken Properties denetçisini açın ve bileşenin genişlik değerini 200
258 DERS 9
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
’da
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
nkü
sahip olabilir. Bu metin dosyalarından SWF dosyanıza bilgi yüklemek için LoadVars sınıfı
f nı
fı
kullanacaksınız.
İncelemeleri
ncelemeleri bu iiş 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
inde gezinmenin iiş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ş
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 reviews/0321213408.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.
260 DERS 9
Ü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
’’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
’’de TextArea bileşeni hâlâ seçili
durumdayken, Properties denetçisinde genişliği 490 piksel, 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 kullanılmasını istediğiniz
ismi kullanarak kendi yeniden kullanılabilir fonksiyonunuzu oluşturuyorsunuz. Fonksiyonun
ismini (bu örnekte loadReview) tanımladıktan sonra, parantez içinde tekrar kullanılabilir
fonksiyonunuzun alacağı parametreleri tanımlıyorsunuz.
ıı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
ıvr
değerlendirilir. Bu satırlar, fonksiyon çağrıldığında çalıştırılacak olan talimatlardır.
Bu fonksiyon un yaptığı ilk şey, bellekte bir LoadVars nesnesi oluşturmak ve buna review_lv
ismini vermektir. Kodun bir sonraki satırı,, Flashtaki
Flash’
yerleşik bir fonksiyona dair bir diğer örnektir.
load fonksiyonu tek bir parametre alır (yüklenecek olan dosyanın
n URLi).
URL’ 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.
Bir bileşene, düğmeye ya da movie clip’e
’’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
kişi).
262 DERS 9
review_lv.onLoad, farklı bir fonksiyon tipine örnek teşkil ediyor. onLoad fonksiyonu, aslında
dosyanın tamamı Flash taraf
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
nkü
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
ıı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 özelliğ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.
ııyor. Ancak
LoadVars, XML, Web Servisleri ya da Flash Remoting özelliğini kullanarak 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,
ışı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.
Save’
Olayları ve İşleyicileri Kullanmak
Önceki
nceki uygulamada Flashtaki
Flash’
bir olaya (event) kısaca göz attık.
k. Olaylar, Flashta
Flash’ 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
leyiciler (event handler) ve izleyiciler (listener),
bu olayların yönetilmesine yardımcı olan eylemlerdir. Daha önce LoadVars sınıfı
fıyla
fı
ıyla çalışırken
olaylara ait birkaç örmek görmüştünüz.
z. Dosya Flash taraf
tarafından yüklendiğinde,
inde, Flashta
Flash’ 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
ııyla yüklendiğinde ya da yükleme işlemi başarısız olduğunda, LoadVars
nesnesi onLoad olayını tetikleyerek Flash
Flash’a işlemin tamamlandığını söyler. Bu gereklidir, çünkü
nk
nkü
Flash SWF dosyası dosyasını durdurup işlemin tamamlandığını söyler. Bu gereklidir, çünkü
nk Flash
nkü
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 kullanıcıya
ııya gönderilmediği için, kullanıcılar SWF dosyanızdaki
trace deyimlerinin içeriğini göremez.
Flashta pek çok öğe için kullanılabilen her türden olay mevcuttur. Örneğin
Flash’
in Flash
Flash’ı kullanarak
bir MP3 dosyasını çalışma zamanında yüklüyorsan
ü
üyorsan
ız, üç farklı olay gerçekleşebilir: ID3 verileri
(MP3 dosyası hakkındaki bilgiler) kullanı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.
ü
ü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) MP3 formatındaki şarkının akmasını istediğinizi bildirir. Daha sonra onID3
264 DERS 9
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
’
’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ı
f nda iki olay vardır: onData ve onLoad. onData olayı, sunucudan bir sonuç
fı
döndürüldüğünde, ama sonuçlar
lar Flash taraf
tarafından çözümlenmeden önce tetiklenir. onLoad
olayı ise, LoadVars sınıfı
f nın load ya da sendAndLoad metodunu çağırdığınız takdirde tetiklenir;
fı
ama bu olay, sonuçlar
lar Flash taraf
tarafından çözümlendikten sonra tetiklenir. Bu olayların her biri
farklı durumda faydalıdır ve aldıkları parametreler de farklıdır.
Şunu unutmamanız çok önemli: Kodunuzda onData olayı
olay nı kullanıyorsanız, onLoad
olay , kendisini kodunuzdan özel olarak çağırmadığınız takdirde tetiklenmez.
olayı
Aşağıdaki uygulamada, kullanı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ı kullanacaksı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,
266 DERS 9
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
in sol taraf
tarafındaki 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, (kalın),
 (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
’’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
ndaki URL
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
nden Publish
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.
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
http://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.
268 DERS 9
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 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.
270 DERS 9
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. bookstore12.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.
Sabit diskinizdeki TechBookstore klasöründen ya da CD-ROM’un lesson09/start dizininden
bookstore12.fla dosyasını açın. File menüsünden Save As’i seçerek, bookstore12.fla dosyasının yeni
bir versiyonunu bookstore13.fla ismiyle sabit diskinizdeki TechBookstore klasörüne kaydedin.
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.
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.
272 DERS 9
5. CD-ROM’daki lesson09/assets klasöründe bulunan catalog01.png ve catalog02.png
dosyalarını sabit diskinize kopyalayın.
CD-ROM’daki
’
’daki
lesson09/assets klasöründe, Kaynağından Eğitim serisinin orijinal İngilizce
basımlarına ait kapak resimlerini içeren catalog01.png ve catalog02.png resimleri yer alıyor. Bu
dosyaların ikisini de 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 catalog01.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.
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
’’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 Antialias for readability’yi seçin. Static text katmanını seçin ve Stage’e
’’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(“http://www.trainingfromthesource.com/flashTFS/samplechapter.html”, “_
blank”);
}
toc_mc.onRelease = function() {
gotoAndStop(“toc”);
}
274 DERS 9
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
’’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.
buttons katmanını 5 numaralı kareye kadar uzatmanız gerekmez, çünkü özellikle
içindekiler sayfasının görüntülenmesi için kullanı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
’’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
’’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”);
}
276 DERS 9
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’
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.
İkinci bir katalog sayfası oluşturmak istemiyorsanız, CD-ROM’daki
’’daki lesson09
klasöründe catalog02.fla dosyasını sabit diskinizdeki TechBookstore klasörüne
kaydedebilir ve bu dosyayı yayınlayabilirsiniz. Ama bu durumda herkes size tembel
gözüyle bakar ve ayrıca bu şekilde pratik kazanamazsınız.
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ı
f rdan başlayarak yeniden
fı
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.
278 DERS 9
Katalog bölümünde, katalogdaki kitapların isimlerini içeren bir List bileşeni yer alır. Bunlara
tıklandığında Stage’deki
’’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,
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
’
’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.
280 DERS 9
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 (bu klasör CDROM’daki
’’daki lesson09/complete klasöründe de bulunuyor). 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 kendisinin) burada
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
ışıyorsa FLA dosyasını kaydedin, sonra da yayınlayın. TechBookstore
ışı
klasöründe bir SWF dosyası oluşturulacaktır.
Çö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ş
i tirmeyi unutmayın.
iş
Haberler Sayfasını Oluşturmak
Tech Bookstoreun
Bookstore’ Haberler (News) sayfasını oluşturmak son derece kolaydır, çünkü
nk bu sayfa daha
nkü
önce oluşturduğunuz
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
’’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ğini
de 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ğini 615 piksel, yüksekliğini
de 325 piksel olarak değiştirin. Örneğin Stage’deki
’’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
’’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
282 DERS 9
kazara herhangi bir sembol eklenmesini önlemek için bunları kilitleyin. Artık Stage’e
’’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.
if (success) {
news_txt.styleSheet = flash_css;
} else {
}
};
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 {
}
};
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 özelliklerini Properties denetçisini kullanarak 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 özelliğini true olarak ayarlar. Bu da HTML ile biçimlendirilmiş metni
TextArea örneğinde (news_txt) görüntüleyebilmenizi sağlar. İkinci özellik (editable), kullanıcının
metinde değişiklik yapmasını ve TextArea bileşenindeki içeriği değiştirmesini önler. editable
özelliğini true olarak ayarlasanız (ya da bu satırı hiç yazmasanız) ve kullanıcı alandaki içeriği
değiştirse bile siteniz zarar görmez. Değişiklikler sadece kullanı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.
284 DERS 9
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
’’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.
if (success) {
home_txt.styleSheet = flash_css;
} else {
}
};
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 {
}
};
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
’
’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. CD-ROM’daki lesson09/assets klasöründe bulunan home.txt, 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. Bu dosyayı CD-ROM’da
’’da bulabilirsiniz, yani giriş
286 DERS 9
sayfasının içeriğini sizin yapmanız gerekmiyor. Tech Bookstore sitesinin giriş sayfasına yazmak
istediğiniz başka şeyler varsa, tabii ki bunları yazabilirsiniz. Ama tercihiniz bu yönde değilse,
CD’deki
’
’deki
home.txt dosyasını kullanabilirsiniz. CD-ROM’da
’’da lesson09 klasörünü bulun. 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.
İki resim dosyası, HTML ile biçimlendirilmiş
imlendirilmi metinde kullanılıyor ve SWF dosyasına
imlendirilmiş
home.txt dosyasındaki <img> etiketi kullanı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 : Metni kalın olarak görüntüler.
• Break : Belirtilen noktaya bir satır sonu ekler.
• 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 : Metni italik olarak görüntüler.
HTMLden
’’den biraz farklı olarak, <li> etiketi bir çift <ol> (ordered list; sıralı
• List Item <li>: HTML’
liste) ya da <ul> (unordered list; sırasız liste) etiketinin arasında
nda yer almaz. Flash
Flash’taki <li>
etiketi, madde işaretli listeleri kolayca oluşturmanıza imkân sağlar.
• Paragraph : Yeni bir paragraf eklemenizi sağlar.
• Span : Bir kod bloğuna stiller eklemenize imkân sağlar.
Flash ta basit tablolar oluşturmanıza imkân sağlar.
• TextFormat <textformat>: Flash’
• Underline : Metnin bir bölümünün altını çizer.
Flash sadece bir düzine kadar etiketi desteklese de, sitenizdeki metinleri, bunları Flash’ı
Flash n
yerleşik CSS desteğiyle bir arada kullanarak biçimlendirdiğinizde son derece etkileyici
sonuçlar elde edebilirsiniz.
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 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. Bunların işlevselliğini http://flash.TrainingFromTheSource.com
adresindeki örnek Web sitesinde görebilirsiniz. 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
288 DERS 9
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
’’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
’’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
’’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)
290 DERS 9
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. Kitapta
daha önce, menüler açık durumdayken bunların
n etraf
etrafını çevreleyen görünmez bir düğme
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.
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ş
i tirebilirsiniz. Bu
iş
durumda yapacağınız şey, yukarıdaki adımda tanımlanan üç değiş
i keni bir nesneye
iş
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
nemli taraf
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
’’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)
’’e) başvuruda bulunan bir düğme kodudur. Stage’den
’
’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() {
contactmenu = 0;
}
compmenu = 0;
}
productsmenu_mc.gotoAndPlay(“slidedown”);
prodmenu = 1;
}
};
292 DERS 9
//company (firma) menüsü
this.company_btn.onRollOver = function() {
prodmenu = 0;
}
contactmenu = 0;
}
companymenu_mc.gotoAndPlay(“slidedown”);
compmenu = 1;
}
};
//contact (irtibat) menüsü
this.contact_btn.onRollOver = function() {
compmenu = 0;
}
prodmenu = 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.
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
(geniş
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
n etraf
etrafını uygun bir
şekilde çevrelediğinden emin olun.
294 DERS 9
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.
iş
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.
Menünün Düğmelerini Kontrol Etmek
Önceki uygulamayla karşılaştırıldığında menünün düğmeleri çocuk oyuncağıdır. Bir düğmenin faaliyet
alanı, olay fonksiyonlarının düğmenin Timeline’ını değil, düğmenin üzerinde bulunduğu Timeline’ı
etkilediği anlamına gelir. Yani, başka bir şey belirtmediğiniz takdirde, düğmeler ana Timeline’ı kontrol
eder. Bu uygulamada, ana Timeline’ı movie clip’lerde yuvalanmış bulunan bir Timeline’dan kontrol
etmek istediğiniz için bazı ayarlar yapmanız gerekiyor. Bu biraz ustalık istiyor gibi görünse de, bu
derste daha önce gördüğümüz faaliyet alanı konusunu anımsarsanız işiniz o kadar zor olmayacaktır.
Bir menüdeki düğmelerden birine tıklandığında, bir mesaj birkaç Timeline’dan geçerek ana Timeline’a
gider. Sonra da oynatım kafası yeni bir sayfaya gider.
1. Properties denetçisini kullanarak menüdeki düğmelerin her birine örnek isimleri verin.
Bu düğmeleri ActionScript kodunuzda hedefleyebilmeniz için, bunlara örnek isimleri vermeniz gerekir.
Hatırlayacağınız gibi, menünün düğmelerinin her biri, ana menü movie clip’inin içinde yuvalanmış
bulunan movie clip menüsünün içine yerleştirilmiştir. Bu nedenle, productsmenu_mc örneğine ve sonra
da menu1_mc örneğine tıkladığınızda iki düğme bulacaksınız. Catalog düğmesine tıklayın ve Properties
denetçisine catalog_btn örnek ismini girin. Sonra da sağdaki düğmeye tıklayın ve buna da reviews_
btn örnek ismini verin.
Düzenleme çubuğunu kullanarak ana Stage’e
’’e geri dönün ve bu işlemleri diğer iki menü için
de tekrarlayın. Bunlara verdiğiniz isimler son derece sezgisel olmalıdır. menu2_mc örneğinin
içindeki düğmelere tour_btn ve news_btn örnek isimlerini verin. Sonra da menu3_mc
düğmelerine feedback_btn ve map_btn örnek isimlerini verin.
2. Yeni oluşturduğunuz açılır listelerde bulunan altı düğmeyi kontrol etmek için kullanılan
ActionScript kodunu ekleyin. Bu kodu, önceki uygulama eklediğiniz kodun sonuna
yerleştirin.
Bu düğmeleri, ziyaretçilerin Tech Bookstore’da
’’da dolaşmalarına yardımcı olmak için
oluşturdunuz ve ActionScript’i kullanarak bunları hedefleyebilmek için bunlara örnek isimleri
verdiniz. ActionScript kodu, düğmeyi hedefler ve böylece, düğmeye tıklandığında fonksiyonun
çağrılmasını sağlar, sonra da fonksiyon ana Timeline’ın üzerindeki oynatım kafasına Tech
Bookstore’daki
’’daki doğru sayfaya gitmesini söyler.
Düğme nereye yerleştirilirse yerleştirilsin, düğmenin üzerine yerleştirildiği
Timeline’ın etkileneceğini unutmayın. Bu nedenle, bir movie clip’in içinde
yuvalanmış olan bir düğme için kod yazıyor olsanız bile, yazdığınız fonksiyon
geçerli Timeline’ı etkiler. Yani, Flash’a
’’a düğmeyi nerede araması gerektiğini
söylemeniz gerekir, ama oynatım kafasının hareket edeceği doğru Timeline için
faaliyet alanını belirtmeniz gerekmez.
Ana Timeline’daki
’’daki actions katmanının 1 numaralı karesini seçin. Actions panelini maksimum
boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin.
this.productsmenu_mc.menu1_mc.catalog_btn.onRelease = function() {
gotoAndStop(“catalog”);
};
296 DERS 9
this.productsmenu_mc.menu1_mc.reviews_btn.onRelease = function() {
gotoAndStop(“reviews”);
};
this.companymenu_mc.menu2_mc.tour_btn.onRelease = function() {
gotoAndStop(“tour”);
};
this.companymenu_mc.menu2_mc.news_btn.onRelease = function() {
gotoAndStop(“news”);
};
this.contactmenu_mc.menu3_mc.feedback_btn.onRelease = function() {
gotoAndStop(“feedback”);
};
this.contactmenu_mc.menu3_mc.map_btn.onRelease = function() {
gotoAndStop(“map”);
};
Düğme fonksiyonlarını, daha önce oluşturduğunuz FLA dosyalarında diğer düğmeler için
girdiğiniz koddan hatırlıyor olmalısınız. Yapı size tanıdık gelse de, düğmenin hedeflenmesi
tanıdık gelmeyebilir. Bu bağlamda, this anahtar sözcüğü geçerli Timeline’ı, yani ana Stage’i
gösterir. Kod bu sözcük kullanılmasa da çalışır, ama ActionScript kodunuzu başka bir yere
taşıdığınızda, bu sözcük faydalı olabilir. Bunun ardından, ana Stage’de
’’de bulunan contactmenu_
mc movie clip’ini, sonra da bunun içindeki menu3_mc movie clip’ini hedefliyorsunuz. menu3_mc
movie clip’inin içinde düğme yer aldığı için, map_btn örnek ismiyle devam ediyorsunuz.
Kullanmak istediğiniz örneği hedeflediğiniz için, onRelease olay işleyicisini ve yerel
fonksiyonunu kalan kısmını yazabilirsiniz.
Şu anda, yeni bir sayfanın başladığı her karede etiketleriniz var. Bu kare etiketleri, Tech
Bookstore sitesinde dolaşmak için kullanılıyor. gotoAndStop eyleminin hedefi “map”tir (kare
etiketinin ismi). Kare etiketleri tırnak içinde yazılmalıdır (bu onların bir dize olduğunu
gösterir).
Tech Bookstore sitesi içine gereken ActionScript kodlarının büyük bir kısmını şaşılacak
derecede kısa bir sürede yazıp bitirdiniz. Bu kitaptaki çalışmanızın geri kalan kısmında, bu
derste ve daha önceki derslerde hazırladığınız FLA dosyalarını ana siteyle bütünleştireceksiniz.
Ayrıca, 10. Ders’te siteyi optimize edeceksiniz.
3. Düğmelerin doğru şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test
Movie’yi seçerek bunları test edin.
Bir menüyü açmak için bir düğmeye tıkladığınızda, menü aşağıya doğru hareket eder.
İmleci menü alanından uzaklaştırıp görünmez düğmenin üzerine getirdiğinizde, yukarı
doğru hareket ederek menüyü “kapatır”.””. Menüdeki bir düğmeye tıklarsanız, bunun sizi
Tech Bookstore’da
’’da başka bir sayfaya götürmesi ve durması gerekir. Menüler doğru şekilde
hareket etmiyorsa, geri dönün ve örnek isimlerinizi ve bu dersteki kodu bir daha kontrol edin.
Üç menüdeki düğmelerin sizi doğru sayfaya götürdüğünden de emin olun. Menü hâlâ doğru
çalışmıyorsa, CD-ROM’da
’’da tamamlanmış dosyayı bulun ve kendi oluşturduğunuz dosyayı, bu
FLA dosyasıyla karşılaştırın.
Şu anda bu sayfaların içeriği yüklenmemektedir. Bu sorunu bir sonraki derste gidereceksiniz.
Şimdilik Stage’in sağ tarafı
taraf ndaki başlığa bakarak sayfaların değişip değişmediğini kontrol
etmeniz yeterli.
4. FLA dosyasında yaptığınız değişiklikleri kaydedin.
Tamamlanmış çalışmaların kopyalarını CD-ROM’daki
’’daki lesson09/complete klasöründe
bookstore13.fla, catalog.fla, home.fla ve news.fla isimleriyle bulabilirsiniz. Yazdığınız kodla
ilgili herhangi bir sorun varsa, bu dosyada ana Timeline’ın üzerinde kodların bir kopyasını
bulabilirsiniz.
Sıradaki derste, önce bu derste ve önceki derslerde oluşturduğunuz SWF dosyalarının
hepsini yükleyeceksiniz. Sonra da Tech Bookstore sitesini test edecek, hataları ayıklayacak ve
uygulamadaki bölümlerin her biri için bir ilerleme çubuğu (ProgressBar bileşeni) ekleyeceksiniz.
Bu Derste Öğrendiklerimiz
Bu derste şunları öğrendiniz:
• ActionScript 2.0’ı öğrendiniz (Sayfa 242).
• Nesnelerin, metotların ve özelliklerin nasıl kullanıldığını öğrendiniz (Sayfa 242–245).
• Kesin tip belirleme özelliğinin değişkenlerde nasıl kullanıldığını öğrendiniz (Sayfa 245).
• ActionScript kodlarının yazılmasını hızlandırmak için kod ipuçlarını kullandınız
(Sayfa 246–248).
• Fonksiyonları ve koşullu deyimleri kullandınız (Sayfa 248–250).
• Faaliyet alanları ve değişkenler hakkında bilgi edindiniz (Sayfa 250–252).
• ActionScript kodunuzda _root, _parent ve seviyeleri nasıl kullanacağınızı öğrendiniz
(Sayfa 252–254).
• LoadVars nesnesini yoğun bir şekilde kullandınız (Sayfa 254–256).
• Reviews sayfasını oluşturdunuz (Sayfa 257–263).
• Kodunuza olaylar, olay işleyicileri ve izleyiciler eklediniz (Sayfa 264–267).
• Bir belgeye yüklenen metni biçimlendirmek için CSS’i kullandınız (Sayfa 268–270).
• Catalog, News ve Home sayfalarını oluşturdunuz (Sayfa 271–288).
’’daki menülerin hareket etmesini sağlayacak kodu eklediniz (Sayfa 288–295).
• Tech Bookstore’daki
• Tech Bookstore menülerinin çalışmasını sağlayacak ActionScript kodunu eklediniz
(Sayfa 295–298).
298 DERS 9

ActionScript`in Temelleri

Transkript

Benzer belgeler

ezoflash programmer 4v3

Ses ve video Eklemek - BITEFO FETHIYE 2007

EZOFLASH D2 ADAPTER_V001A

MCH539 - Bursa Teknik Üniversitesi

Teknik Sorunlar SSS

Kaynaklar - BITEFO FETHIYE 2007

ssdnow - Kingston

2. Oturum - Öğretim Teknolojileri Destek Ofisi

1. Ders - TD Software © 2006-2016