Bileşenlerle Form Oluşturmak (Ders 8)

Formlar ve Veriler

Formlar, tipik olarak kullanıcılardan bilgi toplamanızı sağlayan, bazen bir dizi sayfadan oluşan uygulamalardır. İnternet’te bulunan formları görmüş olmalısınız. Flash’ın aktivasyonu için ya da İnternet üzerinden yapılan ayrıntılı bir iş başvurusunda form doldurmuş olabilirsiniz. Bir online foruma üye olmak için de form doldurmuş olabilirsiniz. Bu formlar, metin alanlarına girdiğiniz verileri toplar ve belirli bir düğmeye tıkladığınızda (“Gönder” düğmesi) bu verileri bir sunucuya gönderir.

Macromedia Flash 8 Basic’in bileşenleri ve sunucu entegrasyonu sayesinde, formları kolayca ve hızlıca oluşturabilir, böylece arama formları, geribildirim ve oylama formları ve anketler oluşturarak uygulamalarınızı geliştirebilirsiniz. Ayrıca Web sitesi yönetimi alanları oluşturarak haber ekleme, silme, değiştirme ve içeriği yönetme gibi işlemleri yapabilirsiniz. Kısa ActionScript kodları ve bileşenler kullanılarak bir Flash uygulaması ColdFusion, PHP, ASP ya da JSP gibi
sunucu tarafındaki bir dille bütünleştirilebilir. Sunucu tarafındaki diller, Web sitenizi bir uygulama sunucusuyla bütünleştirmenize yardımcı olur. Web sitenizi bir veritabanıyla, XML ile ya da diğer veri formlarıyla (örneğin bir Web servisi gibi) bütünleştirerek, bunlardan aldığınız verileri kullanabilir ve sitenizde görüntüleyebilirsiniz.

Not: Bu dersler sadece Flash 8 Basic’te bulunan özellikleri kapsamaktadır. Flash 8 Professional kullanıyor ya da ileride Flash 8 Professional sürümüne geçmeyi düşünüyorsanız, Flash veri bileşenlerini (Data Components) kullanarak Flash’ı bu teknolojilerle bütünleştirmek daha kolaydır. Bu bileşenlerden biri, Flash Remoting adındaki teknolojiyle çalışmayı kolaylaştırır. Flash Remoting, ActionScript kullanarak ColdFusion, ASP veya Java arasında veri alışverişvine izin vererek bu veri aktarımını mümkün kılar. Flash 8 Professional, uzun ActionScript kodları yazmak gerekmeden, sunucuyla veri alışverişvi yapmanıza izin vererek bu tür veri aktarımlarını kolaylaştırır. Flash Remoting hızlı, güzel ve mükemmel bir araçtır. Bu aracı mutlaka deneyin.

Macromedia Flash 8 Basic, XML gibi sunucu tarafındaki bir dille kolayca iletişim kurmanızı sağlayan başka teknolojiler de sunar. XML, verileri (örneğin isimler, adresler ve telefon numaraları) biçimlendirmek ve diğer bilgisayarlara, işletim sistemlerine ya da çeşitli şekillerde kullanılabildiği Flash gibi uygulamalara aktarmak için kullanılan bir işaretleme dilidir. XML, Flash’ta çeşitli yöntemlerle kullanılabilir. Bu, verileri organize etmek için kullanılan çok basit ve sezgisel bir yöntemdir. Aslında verileri biçimlendirmek ve online olarak kullanmak için faydalanılan, basitten çok karmaşığa kadar farklı seviyelerde pek çok yöntem vardır. Flash XML’i mükemmel bir şekilde destekler. Yani bir SWF dosyası, XML belgelerini okuyarak çözümleyebilir (diğer bir deyişle bir ActionScript veri yapısına döndürür) ve XML verilerini bir sunucuya gönderir. Bununla birlikte Flash 8 Professional, iletişimi kolaylaştırmak için özel bir XMLConnector bileşenin kullanılmasını da mümkün kılar. Flash 8 Basic ayrıca, veri yüklemek ve göndermek için kullanılan LoadVars adında özel bir sınıf içerir. LoadVars sınıfını, Ders 9’da bilgi yüklemek için ve Ders 10’da da burada hazırladığınız geribildirim ve anket formlarındaki bilgileri göndermek için kullanacaksınız.

Flash Bileşenlerine Giriş

Şu ana kadar bileşenlerle ilgili biraz bilgi edindiniz ve bileşenlerin, tasarımcıların ActionScript kullanarak programlayamayacakları ya da bu şekilde programlamak istemedikleri bazı işlevleri SWF dosyalarına eklemelerine yardım edebileceğini öğrendiniz. Tasarımcılar bileşenleri sürükle-bırak yöntemiyle Stage’e ekleyebilir, Properties denetçisinde birkaç parametreyi değiştirebilir ve bileşenin gerektiğinde nispeten karmaşık şekillerde çalışmasını sağlamak için kısa ActionScript kodları yazabilir. Bileşenler uygulama geliştirme sürecini hızlandırabilir ve tekrar tekrar kullanmanın nispet kolay olduğu öğeler oluşturmada faydalı olabilir.

Not: Bileşenler SWC dosyaları şeklinde derlenir ve İnternet üzerinden satın alınabilir ya da ücretsiz olarak indirilebilir. Bileşenlerin dağıtılması çok yaygındır. Siz de İnternet’te arama yaparak pek çok farklı bileşene erişebilir ve bunları çalışmalarınızda kullanabilirsiniz. Bileşen dağıtımı için kullanılan pek çok Web sitesi vardır. Macromedia Exchange sitesinde mevcut bileşen dosyalarının yer aldığı bir veritabanı bulunmaktadır ve sadece Flash bileşenlerini konu alan birçok kitap yazılmıştır.

Flash 8 Basic’teki bileşenler (ve eğer geçmeyi düşünüyorsanız Flash 8 Professional’daki ilave bileşenler), bir uygulamanın tamamında Button gibi belirli bileşenlerin birden fazla örneğini kullanarak oluşturulan uygulamalar için mükemmeldir. Eğer belirli bir alanda sadece tek bir bileşen kullanacaksanız ve bunu daha sonra hiç kullanmayacaksanız, arabiriminizin üstüne ilk sürükleyişinizde bileşenlerin dosya boyuna en az 25K ekleyeceğini unutmayın. Bunun sebebi, yayınlanırken SWF dosyasına eklenen her bileşenle birlikte dâhil edilmesi gereken ActionScript kodudur. Bununla birlikte, bu ActionScript kodu V2 kümesindeki birçok bileşen için aynı olduğundan, sadece bir kez dâhil edilmesi gerekir; bu yüzden ilave bileşen türleri eklendiğinde SWF dosyanızın boyu fazla büyümeyebilir. Bu, çok sayıda bileşen eklemenin neden avantajlı olabileceğini, sadece bir ya da iki bileşen eklemenin neden o kadar avantajlı olmayabileceğini açıklamaktadır. Bazı bileşenler aynı mimariye sahip değildir ve kullandığınız bileşenlerin hangileri olduğuna bağlı olarak dosya boyu büyüyebilir. Aslında bir bileşen kullandığınızda hepsini kullanmış gibi olursunuz. Bundan faydalanın.

Flash 8 Basic’te; aralarında Button, CheckBox, ComboBox, Label, List, Loader, NumericStepper, ProgressBar, RadioButton, ScrollPane, TextArea, TextInput ve Window’un da bulunduğu birçok bileşen mevcuttur.

Not: Flash 8 Professional Accordion, Alert, DataGrid, DateChooser, DateField,Menu, MenuBar ve Tree gibi ek bileşenler içermektedir. Flash 8 Professional’da ayrıca Web servislerine ve XML dosyalarına bağlanmanızı sağlayan başka bileşenler ve FLV (Macromedia Flash Video) ya da MP3 dosyalarının akışını kontrol etmenizi ve bunları oynatmanızı/ç/ almanızı sağlayan bazı ortam bileşenleri bulunmaktadır.

Aşağıdaki listede, Flash 8 Basic’le birlikte gelen bazı bileşenler kısaca açıklanmıştır. Components panelini maksimum boya getirerek Kullanıcı Arabirimi bileşenleri (UI Components) grubunun listesini görebilirsiniz.

• Button (Düğme): Bu bileşen, bir etiket (düğmenin üzerinde görünen metin) ile bir simge (küçük bir resim) tanımlamanıza izin veren özelleştirilebilir bir düğmedir. Button bileşeni, HTML’in Submit ya da Button girdi tiplerini kullanmaya benzer ve çeşitli yerleşik görsel efektlere (rollover ve tıklama efektleri gibi) sahiptir. Bu bileşen daha geniş bir bileşen sınıfının bir parçası olduğu için, arabirim elemanlarını işlevsel olarak birbirlerine bağımlı hale getirmek
amacıyla diğer Flash bileşenlerine de bağlanabilir.

• CheckBox (Onay kutusu): HTML sayfalarında gördüğünüz onay kutularına benzeyen bu bileşen, son kullanıcının bir formun üzerinde bulunan ve sonuçta bir veritabanında saklanacak belirli bir bilgi öğesini seçmesini sağlar. Bu bileşenin kullanılmasındaki temel amaç, kullanıcılara bir seçenekler grubu içinde birden fazla tercih yapma imkânı sunmaktır (örneğin kullanıcılara ilgi alanları, hangi haber gruplarına üye olmak istedikleri, vb. soruların sorulduğu formlarda). Etiketin ve onay kutusu kontrolünün yerleştirilme şekliyle ilgili ayarlar yapabilirsiniz. Bu bileşen ayrıca true ya da false değerlerinden biriyle kullanılır.

• ComboBox (Açılır menü kutusu): Bu bileşen, kullanıcıların bir açılır menüden seçim yapmasını sağlar. Listeyi kontrol edebilir ve her bir menü öğesinin neyle ilişkilendirileceğini, ayrıca kaydırılmaya başlamadan önce menüde kaç öğe görüntüleneceğini belirleyebilirsiniz. Bu bileşen, açılır liste özelliği ve kaydırılabilir liste özelliğinin kombinasyonuyla (Combo) ortaya
çıkmıştır.

• Label (Etiket): Bu bileşen, tek satırlı statik bir metin alanıdır. Buradaki metin ActionScript kullanılarak çalışma zamanında değiştirilebilir. İlk bakışta bileşenlerin en az işe yarayanı gibi görünse de, etiketlerinizde ayarladığınız fontun, kullandığınız diğer bileşenlerin metin alanlarında ve açılır listelerde kullanılan fontla eşleşmesini sağlamak için çok önemlidir.

• List (Liste): Bu bileşen, ComboBox bileşenine benzer. Tek farkı, birden fazla veri satırını, belirli bir satır sayısından sonra kaydırılabilir hale gelen bir açılır listede görüntülemek yerine aynı anda görüntülemesidir. List bileşeni, birden fazla öğenin aynı anda seçilmesini sağlar, böylece kullanıcılar birden fazla seçim yapabilir.

• Loader (Yükleyici): Bu taşıyıcı bileşen, SWF dosyalarını ya da JPEG, PNG ve GIF resimlerini yüklemek için kullanılabilir. Bileşen, yüklenen içeriğin, bileşenin boyutlarına uyması için kolayca yeniden boyutlandırılacağı şekilde özelleştirilebilir. Ya da bileşenin, yüklenen içeriğe uyacak şekilde kendi boyunu değiştirmesini de sağlayabilirsiniz. Loader bileşeninin kendisi Stage’de g örünmez; bu bileşen daha çok bir kabuk gibidir ve son kullanıcı onun varlığının farkına varmaz.

• NumericStepper (Nümerik adımlayıcı): Bu bileşeni, sayısal değerleri seçmek için kullanabilirsiniz. NumericStepper bileşeni metin girişi (text input) alanına benzer, ama sayılarla sınırlıdır. Bu bileşen, geçerli değeri belirli bir oranda artıran ya da azaltan ok biçiminde bir dizi kontrolle birlikte gelir. Minimum ve maksimum değerleri belirleyebilir ve sayı artış oranını değiştirebilirsiniz. Böylece sayıların birer birer değil de örneğin ikişer ikişer ya da beşer beşer artmasını sağlayabilirsiniz.

• ProgressBar (Süreç çubuğu): Bu bileşen, SWF dosyalarına yüklediğiniz içerik için bir önyükleme çubuğu görüntüler. Dosyaların Loader bileşeni gibi bir öğeye indirilmesi sürecini takip eden yerleşik bir özelliğe sahiptir.

• RadioButton (Radyo düğmesi): Bu bileşen, HTML sayfalarında görebileceğiniz radyo düğmelerine benzer. Radyo düğmeleri, ilişkili öğelerden oluşan bir grupta kullanıcının bunlardan sadece birini seçmesine izin verecek şekilde kullanılır. Radyo düğmelerini, aynı anda sadece birinin seçilmesine izin verecek şekilde gruplayabilirsiniz.

• ScrollPane (Kayar panel): Bu bileşen, bir penceredeki içeriği yatay ve/veya düşey kaydırma çubuklarını kullanarak kolayca kaydırmanızı sağlar. Küçük bir alana büyük miktarda bir içerik yüklemek istiyorsanız, bu bileşen size çok faydalı olacak ve sınırlı bir alanda büyük miktarda bir içeriği sunmanızı sağlayacaktır.

• TextArea (Metin alanı): Bu bileşen, kaydırma çubukları içeren, çok satırlı, düzenlenebilir bir metin alanıdır ve bilgi görüntülemek ya da son kullanıcılardan bilgi toplamak amacıyla kullanılabilir. Bu alana düz ya da biçimlendirilmiş metin yükleyebilirsiniz. Metnin görüntüleme alanına sığmaması durumunda kaydırma çubukları görüntülenecektir.

• TextInput (Metin girdisi): Bu bileşen tek satırlı bir metin alanı oluşturur. Kullanıcıların bu alana metin girebilir ve bu metin ActionScript kodlarıyla toplanarak bir belgede kullanılabilir ya da bir sunucuya gönderilebilir. Text Input bileşenini, kullanıcının girdiği karakterleri birer nokta olarak gösteren bir şifre alanı olarak tanımlayabilirsiniz. Böylece tepesinde duran bir kişi, kullanıcının ne girdiğini göremez.

• Window (Pencere): Bu bileşen, sürüklenebilir, kayar durumda bir penceredir ve bir başlık çubuğuyla birlikte pencerenin kapatılmasında kullanılan bir düğme içerir. Window bileşeni, benzer kontrollerle, bir HTML açılır penceresi gibi çalışacak şekilde tasarlanmıştır.

Sıradaki uygulamada, daha yaygın kullanıcı arabirimi bileşenlerinden bazılarını göreceğiz. Burada ayrıca Properties denetçisini ve Component inspector panelini kullanarak, bileşen parametrelerini nasıl değiştireceğinizi öğreneceksiniz.

Geribildirim Formunun Oluşturulması

Bu uygulamada, Tech Bookstore Web sitesinin Contact sayfasına bir geribildirim formu ekleyen yeni bir movie clip oluşturacaksınız. Geribildirim formu, ziyaretçiye ait bilgileri toplar ve bunları bir sunucuya gönderir; sunucu da bu bilgileri e-posta yoluyla size ulaştırır. Geribildirim formunun bu kısmını Ders 10’da göreceğiz. Bu derste geribildirim formunun görsel kısmını oluşturacaksınız.

1. Sabit diskinizdeki TechBookstore klasöründe yer alan bookstore11.fla dosyasını açın ve bookstore12.fla ismiyle kaydedin. Insert > New Symbol komutunu seçerek yeni bir movie clip oluşturun ve bunu mcFeedback olarak adlandırın. Layer 1 adındaki katmanın ismini background olarak değiştirin. Yeni bir movie clip sembolü ekleyin. mcFeedback adındaki yeni movie clip’i oluşturduktan sonra Layer 1 katmanını background olarak adlandırın.

2. Stage’de, Fill Color değeri #E7E7E7 olan ve 1 piksellik siyah dış hatta sahip bir dikdörtgen çizin. Arka plana biraz metin ekleyin. background katmanını kilitleyin.

Tools panelinden Rectangle arcını seçin, Fill Color değerini #E7E7E7, Stroke Color değerini de #000000 (black) olarak ayarlayın. Çizim modelini nesne çizimi olarak (Object drawing) ayarlayın. Tools panelinin Options alanındaki Set Corner Radius düğmesine tıklayın ve Corner radius değerini 5 (points) olarak ayarlayın. Stage’in üzerinde bir dikdörtgen çizin ve Properties denetçisini kullanarak bu dikdörtgeni yeniden boyutlandırın.

Dolguyu ve dış hattı seçmek için dikdörtgene çift tıklayın ve Properties denetçisini maksimum boya getirin. Genişlik (W) ve yükseklik değerini (H) 300 px olarak ayarlayın. Nesne seçili durumdayken F8 tuşuna basarak nesneyi bir grafik sembole çevirin ve grBackground olarak adlandırın. Dikdörtgeni X ve Y koordinatları 10,10 olan konuma taşıyın.

Son olarak, background katmanında formun üst kısmına bir başlık ekleyin. Text aracını seçin ve metin tipini (Text type) Static olarak ayarlayın, Arial fontunu seçin, dolgu rengini siyah olarak ayarlayın, Font size değerini 14 yapın, font render yöntemi olarak Alias for readability’yi seçin ve kalın biçimlendirme (B) düğmesine tıklayın.

Stage’e tıklayın Send us a message (Bize mesaj gönderin) yazın. Metin alanını background katmanındaki dikdörtgenin sol üst köşesine yakın bir konuma yerleştirin. Koordinatları değiştirme ve statik metni ekleme işlemlerini tamamladıktan sonra Stage’in görünümü, aşağıda verilen şekildeki gibi olacaktır. İşinizi bitirdikten sonra background katmanını kilitleyin.


3.Yeni bir katman ekleyin ve Label bileşenini Stage’in üzerine sürükleyin.

Label bileşeni, metin alanlarına açıklama yazısı eklemenizi sağlar. Text aracını kul anarak da etiket oluşturabilirsiniz, ancak Label örnekleriyle bileşenlerinizin arasında tutarlı bir görünüm oluşturabilir ve uygulamanızı görme zorluğu çeken insanlar tarafından da erişilebilir hale getirebilirsiniz.

Yeni bir katman oluşturun ve bunu form olarak adlandırın. Components panelini açın ve UI Components klasöründen Label bileşenini bulun. Label bileşeninin üç örneğini Stage’e, ikinci adımda oluşturduğunuz dikdörtgenin sol kenarına yakın bir konuma sürükleyin.


4.Stage’deki her bir Label örneğine birer özel yazı ekleyin

Stage’deki ilk Label örneğini seçin ve Properties denetçisini açın. Properties denetçisinde Parameters sekmesinin seçili olduğundan emin olun ve text parametresine tıklayın. text parametresinin karşısına Your e**** (e-postanız) yazın ve Enter ya da Return tuşuna basın. Stage, bileşenin görüntüsünü hemen güncel eyecektir.


İpucu: Ayrıca Component inspector panelini maksimum boya getirebilir ve etiket metni parametresini bu panelden de değiştirebilirsiniz. Burada, Properties denetçisinde bulunmayan bazı seçenekler bulunur ve bu seçeneklere burası dışında sadece ActionScript kullanılarak erişilebilir.

İkinci Label örneğini seçin, text parametresinin değerini Subject (Konu) olarak değiştirin ve Enter tuşuna basın. Ardından üçüncü Label örneğinin text parametresini de Message (Mesaj) olarak ayarlayın.

5. Your e****, Subject ve Message Label örneklerinin Stage’deki X ve Y koordinatlarını Properties denetçisini kullanarak değiştirin.

Stage’de Your e**** Label örneğini seçin ve Properties denetçisini ya da Info panelini kul anarak X koordinatını 13 ve Y koordinatını da 44 olarak değiştirin. Subject Label örneğini seçin ve bunun X koordinatını 13, Y koordinatını da 66 olarak değiştirin. Message Label örneğinin X koordinatını 13 Y koordinatını da 88 yapın.


6.TextInput bileşeninin iki örneğini Stage’in üzerine sürükleyin. Sonra da Properties denetçisini kullanarak bu iki örneğin genişlik (W) değerini değiştirin.

TextInput bileşeninin işlevi, Text aracını kul anarak Text type değerini Input Text olarak ayarlamaya benzer. Bir HTML sayfasındaki ya da işletim sisteminizdeki bir metin girişi alanı gibidir. Metin girişi alanları kul anıcıların, daha sonra uygulamanızda kul anılacak birtakım değerleri ve verileri girmesini sağlar.

TextInput bileşeni sadece tek satırlık bir metni görüntüleyebilecek şekilde sınırlıdır. Properties denetçisini kul anarak bu bileşendeki metni düzenlenebilecek ya da düzenlenemeyecek şekilde ayarlayabilir, metni bir şifre olarak tanımlayabilir (bu durumda karakterler noktalar gibi sembol er halinde görüntülenir) ya da sayfa yüklendiğinde bu bileşene varsayılan bir metnin girilmesini sağlayabilirsiniz. Component Inspector panelini maksimum boya getirdiğinizde, bileşende değişiklik yapmak için kul anabileceğiniz ilave parametreler göreceksiniz. Component Inspector panelini kul anarak bileşen örneğine girilecek maksimum karakter sayısını ayarlayabilir, belirli karakterlerin kabul edilip edilmeyeceğini belirleyebilir ve bileşenin Stage’’de etkinlik ve hatta görünürlük durumunu ayarlayabilirsiniz.

TextInput bileşeninin iki örneğini Stage’in üzerine sürükleyin. Properties denetçisini maksimum boya getirin ve <Instance Name> alanına tiE**** yazın. Genişlik alanına (W) 200 yazarak bileşenin genişlik değerini değiştirin. Varsayılan örnek yükseklik değeri olan 22 pikseli aynen bırakabilirsiniz. Stage’in üzerindeki ikinci TextInput bileşeni örneğini seçin ve örnek adını tiSubject olarak ayarlayın. Bu örneğin genişlik değerini de bir önceki örnekte yaptığınız gibi 200 olarak değiştirin.

7.TextInput örneklerinin Stage’deki konumlarını ayarlayın.

Properties denetçisi maksimum büyüklükteyken Stage’deki tiE**** örneğini seçin. X koordinatını 108 piksel, Y koordinatını da 44 piksel olarak değiştirin. Böylece bu TextInput örneği, daha önce oluşturduğunuz Your e**** etiketiyle hizalanacaktır. tiSubject örneğinin X koordinatını 108 piksel ve Y koordinatını da 66 piksel olarak değiştirerek bunun da Subject etiketiyle hizalanmasını sağlayın.


8.Stage’e bir TextArea bileşeni örneği ekleyin. Sonra da bu örneğin boyutlarını değiştirin ve Stage’deki diğer öğelerin arasına yerleştirin. Yeni örneği taMessage olarak adlandırın.

TextArea bileşeni, TextInput bileşeninin çok satırlı bir versiyonudur (birden fazla metin satırı içerir) ve oldukça faydalı birkaç ek özelliğe sahiptir. Öncelikle, bu bileşende görüntülenen metni CSS (Cascading Style Sheets) kullanarak düzenleyebilirsiniz. Böylece metinlerin Flash’ın önceki sürümlerindekine göre çok daha güzel görünmesini sağlayabilirsiniz. Flash, TextArea bileşeninde yerleşik olarak HTML biçimlendirme desteğine sahiptir ve artık eskiye göre daha fazla HTML etiketi desteklenmektedir. En önemli yeniliklerden biri, <img> etiketinin kullanımıyla gömülen JPEG, PNG ve GIF resimlerinin de HTML desteğine dâhil edilmesidir. TextArea çok satırlı bir bileşen olduğu için sözcük kaydırma özelliğini de kontrol debilirsiniz. Bu bileşenin en güzel özelliği, bileşenin görüntüleyebileceğinden daha fazla metin olması durumunda bir kaydırma çubuğunun belirmesidir. Sırf bu bile pek çok tasarımcı ve geliştiriciyi mutlu etmek için yeterlidir.

Bir TextArea bileşeni örneğini Stage’in üzerine sürükleyin. Properties denetçisini kullanarak X ve Y koordinatlarını sırasıyla 13 ve 110 piksel olarak ayarlayın. Yine Properties denetçisini kullanarak bileşenin genişlik değerini 295 piksel, yükseklik değerini de 150 yapın. Stage’in görünümü aşağıda verilen şekildeki gibi olacaktır. Properties denetçisinde örnek adını taMessage olarak ayarlayın.


Not: Burada kullanılan adlandırma yöntemine dikkat etmiş olmalısınız. Örnek isimlerinden önce Text Input için ti, Text Area için de ta kullanılmıştır. Bu yöntem, ActionScript kodu yazarken ya da kodları incelerken hangi nesneye göndermede bulunduğunuzu kolayca anlamanızı sağlar. ActionScript’le çalışırken genelde Stage’de nesneleri göremezsiniz. Bu adlandırma yöntemi, nesnelerin ne olduğunu anlamanızı kolaylaştırır.

Stage’deki TextArea bileşenini seçin ve Component Inspector panelini açın. Component Inspector panelindeki Parameters sekmesini kullanarak TextArea bileşeninin Properties denetçisinde görüntülenmeyen ek özelliklerinde değişiklik yapabilirsiniz. Component Inspector panelindeki maxChars parametresine bir sayı atayarak TextArea bileşenine girilecek toplam karakter sayısını sınırlayabilirsiniz. Ayrıca sözcük kaydırma (WordWrap) özelliğini kapatabilir, TextArea bileşenine girilebilecek karakterleri belirleyebilir, girilen verileri bir şifre
olarak maskeleyebilir ya da TextArea bileşenini metin girilemeyecek şekilde ayarlayabilirsiniz.

Şu anda bu parametreleri değiştirmenize gerek yok. Ancak bu açıklamalar hangi parametreleri kullanabileceğinizi görmeniz açısından faydalı olacaktır. Çünkü bunları sonraki derslerde kullanacak ve bazılarında değişiklik yapacaksınız.


9.Dosyada yaptığınız değişiklikleri kaydedin.

Bir sonraki uygulamada formu oluşturmaya devam edecek ve bu kez Button bileşenini kullanacaksınız. İlerlemeden önce, yaptığınız değişiklikleri kaydettiğinizden emin olun.

Button Bileşenini Kullanmak

Flash’taki Button bileşenini kullanarak resim düğmelerine, düğme örneğine tıklandığında formların gönderilmesini sağlamak gibi, istediğiniz pek çok şeyi yaptırabilirsiniz. Düğme bileşeni örnekleri, düğme sembollerinde olduğu gibi, ActionScript ile hazırlanan olayları tetiklemek için kullanılabilir (yeni bir tarayıcı penceresi ve Web sayfası açmak gibi). Peki, Button bileşeni neden kullanılır?Öncelikle, bu bileşeni oluşturmanız gerekmez, hazırdır. İkincisi, script yazma konusunda uzman seviyesine gelenler için bir Button bileşeni ActionScript ile kontrol edilebilen birçok özelliğe sahiptir (etiket metni ve rollover rengi gibi). Bu özellikleri düğme sembolleri ile programsal olarak kontrol edemezsiniz.

Bu uygulama, bir önceki uygulamada bıraktığımız yerden devam etmektedir.

1.bookstore12.fla dosyasındayken mcFeedback’i sembol düzenleme modunda açın ve form katmanındaki 1 numaralı kareyi seçin.

bookstore12.fla dosyasını açık olarak bırakmış da olabilirsiniz. Kütüphanede mcFeedback’i bulun ve üzerine çift tıklayarak movie clip’i sembol düzenleme modunda açın. Sonra da movie clip’teki form katmanının 1 numaralı karesini seçin.

2.Button bileşenini Components panelinden sürükleyerek Stage’in üzerine bırakın. Button örneğinin etiketindeki yazıyı değiştirin.

form katmanı seçili durumdayken Components panelinden bir Button bileşeni örneğini Stage’in üzerine sürükleyin. Yeni eklediğiniz örneği seçin, Properties denetçisini maksimum boya getirin ve <Instance Name> alanına bSend yazın. Ardından Parameters sekmesini seçin.

Düğmenin üzerindeki varsayılan Button sözcüğünü, label parametresinin karşısına Send yazarak bu yeni metinle değiştirin. Siz bu parametrenin değerini değiştirdikten ve Enter tuşuna bastıktan sonra Button örneğinin etiketi (düğmenin üzerindeki metin) değişecektir.

3.Stage’deki konumunu değiştirerek Button örneğini dikdörtgenin sağ alt köşesine getirin.
Button örneğinin X ve Y koordinatlarını sırasıyla 207 ve 280 piksel olarak değiştirin. Properties denetçisinde W ve H metin alanlarını kullanarak örneğin konumunu değiştirin.

Örnek, Stage’deki dikdörtgenin sağ alt köşesine gelecektir. Düğme boyutlarını 100 piksel (W) ve 22 piksel (H) olarak bırakın.


4.Button örneği için yeni bir grafik sembolüne bir simge grafiği ithal edin.

Button bileşenini, örneğe bir simge bağlayarak özelleştirebilirsiniz. Bu simge Button örneğinin üzerinde görüntülenecektir. Bu şekilde hoş bir görünüm katarak formu biraz daha kullanışlı hale getirebilirsiniz. Bu simge kütüphanedeki bir grafik veya movie clip sembolü olmalı ve onu bileşen örneğine bağlamanız için gereken bir “bağlantı tanıtıcı”ya (linkage identifier) sahip olmalıdır.

****_icon.fla dosyasını açın ve send_gr grafik sembolünü kütüphaneden bookstore12.fla kütüphanesine (Library) sürükleyin. Bu grafik dosyasında yer alan çizimin X ve Y koordinatları 0,0 olarak ayarlanmıştır.

5.Kullandığınız adlandırma sistemine uyması için sembolün ismini grSend olarak değiştirin ve kütüphanedeki grSend sembolüne bir bağlantı tanıtıcısı ekleyin.

İnsanların Flash’ta yaşadığı sorunların birçoğu iki sebebe dayanır: planlama eksikliği ve tutarlılık eksikliği. Burada, sizin kullandığınızdan farklı bir adlandırma sistemi kullanan başka bir tasarımcının oluşturduğu bir grafik sembol ithal ediyoruz. Sembolün ismini belge kütüphanesinde değiştirerek kendi kullandığınız adlandırma sisteminin tutarlılığını korumuş olursunuz. Sembolün ismini, kütüphanede send_gr şeklindeki ismine çift tıklayıp grSend yazarak değiştirin.

İkincisi, sembolü bir düğme (Button) simgesi olarak kullanmadan önce buna bir isim atamanız gerekir, böylece Flash bunu Button bileşeninin örneğine bağlayabilir. Linkage Properties iletişim kutusunu kullanarak sembole bir bağlantı tanıtıcısı (Linkage Identifier) atayabilirsiniz. Böylece Flash sembolü tekil bir şekilde tanımlayabilir ve siz de onu SWF dosyasında kullanabilirsiniz.

bookstore12.fla dosyasının belge kütüphanesinde ismini yeni değiştirdiğiniz grSend sembolünü bulun. Library’deki grSend sembolüne sağ tıklayın (ya da OS X’te Control tuşunu basılı tutarak tıklayın) ve açılan bağlam menüsünden Linkage komutunu seçin. Linkage Properties iletişim kutusu açılacaktır.

Linkage Properties iletişim kutusunun Linkage alanındaki Export for ActionScript onay kutusunu işaretleyin. Bu seçenek, pencerenin üst kısmındaki metin alanlarına bir tanıtıcı girmenizi sağlar. Identifier alanında varsayılan olarak grSend yazması gerekir. Eğer yazmıyorsa Identifier alanına grSend yazın ve AS 2.0 Class alanını boş bırakın. OK düğmesine tıklayarak Stage’e geri dönün.


6.Button bileşen örneğine bir simge ekleyin.

Stage’in sağ alt köşesinde yer alan Button örneğini seçin ve Properties denetçisini maksimum boya getirin. Properties denetçisinin Parameters sekmesindeki icon parametresinin karşısına bağlantı tanıtıcısını girin (grSend). Bağlantı tanıtıcısı, ActionScript’in SWF dosyası çalışırken belge kütüphanesinde nesneleri bulmak için kul andığı bir öğedir. Bu öğe büyük küçük harfe duyarlıdır, dolayısıyla icon parametresinin kar şısına yazarken, ismin aynen Linkage iletişim kutusundaki gibi olmasına dikkat edin. İşinizi bitirdikten sonra Button örneğine ait etiketin (Send) sol tarafında gri bir kutu göreceksiniz.


Burası, SWF dosyasını yayınladığınızda simgenin yerleştirileceği konumdur. Simge, tasarım ortamında görünmez. Örneğin üzerindeki simgeyi görmek için SWF dosyasını test etmeniz gerekir. Fakat henüz Stage’’de bu movie clip’ formla ilgili herhangi bir şey göremezsiniz.

7.Button örneğinin üzerinde yer alan simgenin konumunu değiştirin.

Button örneğindeki simgenin konumunu değiştirmek için Properties denetçisindeki labelPlacement parametresini kullanabilirsiniz. Varsayılan durumda labelPlacement parametresi right olarak ayarlanmıştır. Bu, etiketin simgenin sağ tarafıtaraf gösterir. Eğer labelPlacement parametresini top ya da bottom olarak ayarlarsanız, hem simgeyi, hem de etiketi görebilmek için Stage’de düğmenin boyutlarını değiştirmeniz gerekebilir.

8.form katmanının üzerine yeni bir katman ekleyin ve bu katmanı labels olarak adlandırın. Ardından labels katmanının üzerine yeni bir katman ekleyerek bunu da actions olarak adlandırın. 20 numaralı kareyi seçin ve bütün katmanlar için F5 tuşuna basarak bu katmanların 20 numaralı kareye kadar genişlemesini sağlayın. Sonra da actions ve labels katmanlarına 10 numaralı karede bir anahtar kare ekleyin ve ardından 1 ve 10 numaralı karelere birer kare etiketi ekleyin.

form katmanını seçin, Timeline’daki Insert Layer d üğmesine tıklayarak yeni bir katman ekleyin ve bunu labels olarak adlandırın. Yeni eklediğiniz labels katmanı seçili durumdayken Insert Layer düğmesine tekrar tıklayın ve bu katmanı da actions olarak adlandırın. Yeni katmanları oluşturduktan sonra bütün katmanlar için 20. karede F5 tuşuna basın. Hem labels, hem de actions katmanının 10 numaralı karesine yeni bir anahtar kare ekleyin. Yeni anahtar kareleri eklemek için F6 tuşunu kullanın.


labels katmanının 1 numaralı karesindeki anahtar kareyi seçin ve Properties denetçisindeki <Frame Label> alanına form yazın. Sonra 10 numaralı karedeki anahtar kareyi seçin ve <Frame Label> alanına thankyou yazın.

9.form katmanındaki 10 numaralı kareye boş bir anahtar kare ekleyin. grBackground grafiğinin üzerinde bir yere “Thank you for your feedback” (Yorumlarınız için teşekkürler) ya da benzeri bir yazı ekleyin. Bir düğme bileşenini sürükleyerek bu metnin altına yerleştirin.

10 numaralı kareyi seçin ve Insert menüsünden Timeline > Blank Keyframe komutunu seçin. Sonra Text aracını seçin, metnin tipini Static olarak ayarlayın ve bir font seçerek geri bildirimin gönderildiğini belirten bir mesaj yazın. İşinizi bitirdikten sonra Components panelini açın ve bir Button bileşeni örneğini Stage’in üzerine sürükleyin. Properties denetçisini kullanarak düğmenin
etiket metnini Back olarak değiştirin, örnek adını bBack olarak ayarlayın ve düğmeyi, Send düğmesiyle aynı konumda olması için 207 x ve 280 y koordinatlarına yerleştirin.

Button bileşeni seçili durumdayken Actions panelini genişletin ve henüz geçmediyseniz Script Assist moduna geçin. Actions araç kutusunda Global Functions, Timeline Control’u genişletin ve goto eylemine çift tıklayın. Parameters bölümünde, Go to and Stop radyo düğmesini seçin. Type açılır listesinden Frame Label’ı seçin. Frame açılır listesinden de form’u seçin.


Şu anda bSend örneği için kullanılacak ActionScript kodunu eklemeyeceksiniz. Bu kodu bir sonraki derste ekleyeceksiniz.

Not: Actions panelindeki tetikleyici olay on(click)’tir. Düğme bileşenleri cevap verebilecekleri farklı olaylara sahiptir ve bu onları Button sembollerinden ayıran diğer biz özelliktir. Bir Button sembolünde, on(click) ile aynı olan bir on(release) tetikleyici olayı kullanılırdı. Her iki olay da kullanıcının tıkladığını ve farenin düğmesini bıraktığını gösterir.

10.Geribildirim formunda yaptığınız değişiklikleri kaydedin ana Stage’e dönün.

Elemanları Stage’in üzerine yerleştirme işlemini bitirdikten sonra, eğer simgenin görünümünden memnunsanız bookstore12.fla dosyasını TechBookstore klasörüne kaydedin. Daha fazla bileşen kullanarak ikinci bir form oluşturacağınız bir sonraki uygulamada bu dosyayla çalışmaya devam edeceksiniz.

Flash Kullanarak Bir Anket Oluşturmak

Aşağıdaki uygulamada, kullanıcıların dolduracağı ve bir düğmeye tıklayarak sunucuya göndereceği bir anket oluşturacaksınız. Bu ankette, bu derste henüz öğrenmediğiniz yeni bileşenler kullanılacak. Flash pek çok kullanıcı arabirimi bileşeniyle yüklendiği için, bu tür formları oluşturmak ve hemen çalıştırmak çok kolaydır. Bilgileri toplayan ve sunucuya gönderen ActionScript kodunu Ders 10’da ekleyeceksiniz.

NumericStepper, ziyaretçilerinizin sıralı bir sayı grubuna tıklamasına ve böylece, örneğin kurabiye satan bir Web sitesinde alışveriş sepetlerine eklemek istedikleri kurabiye sayısını belirtmelerine imkân sağlayan küçük ve kullanışlı bir bileşendir. Bu bileşen, üzerinde küçük düğmeler bulunan düğmelerin yanındaki metin alanında bir sayı gösteren bir metin alanıdır. Bu düğmelere tıklandığında, sayılar sayı grubu boyunca artar ya da azalır. Minimum ve maksimum değerleri ve her sayının arasındaki aralığı ayarlayabilirsiniz. NumericStepper sadece sayısal verileri kullanır.

ComboBox, kullanıcıların bir açılır menüden (yukarıdaki kurabiye örneğinde böyle
bir menüde çikolatalı, fı, f stık ezmeli, parça şekerli kurabiyeler olabilir) seçim yapmasına imkân sağlar. Bir ComboBox’ı düzenlenebilir (editable) olarak ayarlayabilirsiniz. Bu ayarı yaptığınızda, kullanıcı menüden seçim yapmak yerine önce metin alanına bir seçim yazabilir ya da bunun yerine menüden bir seçim yapabilir. Açılır menüde görüntülenen yazıyı ve bu yazıyla ilişkili verileri ayarlayabilir, bir seçim yapıldığında belirli bir şeyin gerçekleşmesini sağlayan bir ActionScript kodu yazabilirsiniz.

1.bookstore12.fla dosyası açık değilse bu dosyayı açın. mcFeedback sembolünü çoğaltın ve yeni sembolü mcQuestions olarak adlandırın. Kütüphanede sembolün type simgesine çift tıklayarak sembol düzenleme moduna geçin.

mcQuestions,mcFeedback ile aynı genel yapıya sahip olacaktır. Timeline’ı ve arka planı (background) aynı olacak ve aynı ActionScript kodlarını içeren aynı send ve back düğmelerine sahip olacaktır. Bir sembolü çoğalttığınızda kütüphanedeki sembolün tamamen aynısı olan bir kopya sembol oluşturulur. Bu kopya sembolü, sadece sembol tanımında değişecek olan öğelerin üzerinde yoğunlaşarak düzenleyebilir ve değişmeyen kısımları olduğu gibi bırakabilirsiniz. Kısaca belirtmek gerekirse, bu yöntemle zaman kazanır ve böylece televizyonda maçınızı seyretmeye kaldığınız yerden devam edebilirsiniz.

Sembole sağ tıklayıp (OS X’te Control tuşunu basılı tutarak tıklayıp) açılan bağlam menüsünden Duplicate komutunu seçerek mcFeedback sembolünü çoğaltın. Duplicate Symbol iletişim kutusunda yeni sembolü mcQuestions olarak adlandırın. mcQuestions’a çift tıklayarak sembol düzenleme moduna geçin.

2.Send Us a Message metnini Questionnaire olarak değiştirin ve Stage’de Button dışındaki tüm bileşenleri silin.

Selection aracını kullanarak “Send us a message” metnine çift tıklayın. Metni Questionnaire olarak değiştirin. Stage’deki Label, TextInput ve TextArea bileşenlerini silin. Button bileşenini olduğu yerde bırakın.


3.form katmanına metin alanları ekleyin.

form katmanına tıklayın (ya da OS X’te Control tuşunu basılı tutarak tıklayın) ve açılan bağlam menüsünden Lock Others (Diğerlerini Kilitle) komutunu seçin. Tools panelinden Text aracını seçin ve Properties denetçisini kullanarak metin tipini Static olarak değiştirin. Arial fontunu seçin, font boyutunu (Font Size) 12, dolgu rengini (Fill color) siyah ve font render yöntemini Anti-alias for readability olarak ayarlayın. Text aracı seçili durumdayken Stage’in üzerinde tıklayıp imleci sürükleyerek grBackground grafik sembolünün hemen altında olacak şekilde sabit genişlikli bir metin kutusu oluşturun. Şu metni yazın: 1) How many years have you been using Macromedia Products? (Macromedia ürünlerini kaç yıldır kullanıyorsunuz?) Şu anda metnin Stage’deki konumu hakkında endişelenmeniz gerek yok, çünkü bu uygulamada biraz sonra yerleşim düzenini değiştireceksiniz.

Stage’e şu metinleri içeren üç statik metin alanı daha ekleyin: 2) Did you find the site easy to navigate? (Sitede kolayca dolaşabiliyor musunuz?); 3) Are there any books you want that we don’t carry? (Bu sitede olmayan, istediğiniz kitaplar var mı?) ve 4) Are you a: (Siz bir : ).


4.form katmanını seçin ve Stage’e NumericStepper, ComboBox, TextArea, Button ve CheckBox bileşenlerini ekleyin.

form katmanını seçin ve Components panelini maksimum boya getirin. Şu bileşenlerin birer örneğini Stage’e ekleyin: NumericStepper, ComboBox, TextArea, Button. Sonra CheckBox bileşeninin iki örneğini ekleyin. Bunun için, önceki uygulamada yaptığınız gibi bileşeni Components panelinden form katmanının üzerine sürüklemeniz yeterlidir. Bileşen örneklerini, yaklaşık olarak aşağıdaki şekilde görüldüğü gibi düzenleyin. Gerekiyorsa metin alanlarınızı yeniden boyutlandırın.


Not: Metin alanlarını yeniden ölçeklendirmek için Info panelini ya da Properties denetçisini kullandığınıza metinde bozulma olabilir. Metin alanlarını düzgün şekilde yeniden boyutlandırmak için sürükleme tutamaçlarını kullanmanız gerekir.

5.Component inspector panelini kullanarak NumericStepper bileşeninin parametrelerini değiştirin.

Selection aracını kul anarak Stage’’deki NumericStepper bileşenini seçin. Onu, ilk sorunun sol alt köşesine yerleştirin. Properties denetçisini kul anarak şu parametreleri değiştirebilirsiniz: NumericStepper’da kul anılabilecek maksimum ve minimum aralık, kul anıcı bileşen örneğindeki yukarı (up) ya da aşağı (down) düğmesine tıkladığında geçerli değerin artırılacağını ya da azaltılacağını belirleyen stepSize parametresi ve bileşenin geçerli değerini veya başlangıç değerini tanımlayan value parametresi.

Properties denetçisini maksimum boya getirin veya açın ve Parameters sekmesinin seçili olduğundan emin olun. minimum parametresini 0, maximum parametresini de 10 olarak ayarlayın.

6.Stage’deki ComboBox bileşen örneğinin parametrelerini değiştirin.

Stage’deki ComboBox bileşeni seçili durumdayken, Properties denetçisini maksimum boya getirin. Properties denetçisindeki data parametresine çift tıklayın. Values iletişim kutusu açılacaktır. Bu iletişim kutusunu kullanarak ComboBox bileşeni için yeni değerler girebilirsiniz.

İletişim kutusunun üst tarafı ekleyin. İlk değeri 1, ikinci değeri de 0 olarak değiştirin ve OK düğmesine tıklayıp iletişim kutusunu kapatın ve Stage’e geri dönün.


Values iletişim kutusunu tekrar açmak için bu kez Properties denetçisindeki label parametresine çift tıklayın. Burada, daha önce eklediğiniz veri değerlerine karşılık gelen etiketleri ekleyeceksiniz. İki değer ekleyin, üstteki değeri Yes, alttaki değeri de No olarak değiştirin ve OK düğmesine tıklayıp iletişim kutusunu kapatın ve Stage’e geri dönün.


İpucu: Değer eklerken, data özelliğindeki değerlerin labels özelliğindeki değerlere karşılık gelmesine dikkat etmeniz gerekir, yoksa kullanıcılarınız beklenmeyen sonuçlarla karşılaşabilir.

7.Stage’deki CheckBox bileşeninin parametrelerini değiştirin.

Stage’deki CheckBox bileşenini seçin ve Properties denetçisini kullanarak label parametresini Designer olarak değiştirin. İkinci CheckBox bileşenini Developer onay kutusunun sağına taşıyın ve Properties denetçisini kullanarak label parametresini Developer olarak değiştirin. Etiketi onay kutusunun diğer tarafı etiket yerleşimini (Placement) sağdan sola alabilirsiniz.

Not: Bütün soruları Stage’e yerleştirdiğinize göre, dikdörtgenin sol tarafındaki tüm örnekleri seçmek ve Align panelini kullanarak bunları hassas bir şekilde hizalamak isteyebilirsiniz. Başlangıçta To Stage düğmesinin seçili olmadığından emin olun. Böylece örnekler Stage’in soluna değil de diğer örneklere hizalanırlar.

8.Yaptığınız değişiklikleri kaydedin.

mcFeedback sembolünü çoğalttığınız için başka bir şey yapmanız gerekmez. mcFeedback ve mcQuestions formlarının her ikisinde de aynı ActionScript koduyla çalışan send ve back düğmeleri bulunmaktadır. Bunu çoğaltma işlemiyle sağlamış oldunuz, dolayısıyla geri dönüp tekrar eklemeniz gerekmiyor. Bir sonraki uygulamada mcFeedback formundaki bileşenler için bir sekme sırası belirleyecek, ayrıca form ilk göründüğünde varsayılan olarak tiE****’in vurgulanmasını sağlayacaksınız.

Focus Manager’ı Kullanmak

Flash 8 Basic’teki bütün bileşenler, otomatik olarak FocusManager sınıfını destekler. FocusManager sınıfı, bileşenler için bir sekme sırasının belirtilmesini sağlar ya da bir form nesnesinde Tab tuşunun kul anılmasını tamamen engel emek için kul anılabilir. Sekmeli hale getirmek, formlarda Tab tuşuyla dolaşmayı tercih eden ziyaretçiler için çok kullanışlı ama formların bir kısmında veya tamamında Tab tuşunu kullanmak zorunda olan görme engelli ziyaretçiler için de elzemdir. FocusManager sınıfı f bütünüyle ActionScript’ten oluşur, yani onu kullanmak için kendi kodlarınızı yazmanız gerekir. Endişelenmeyin, alıştıktan sonra bu o kadar da zor değil. Yazdığınız script çoğu kullanıcı arabirimi bileşeninin ortak bir özel iği olan tabIndex ile birlikte çalışır. Bu özelliği kulanarak, kullanıcı Tab tuşuna bastığında klavyenin hangi sırayla geçiş yapacağını gösteren sayıları belirlersiniz.

Not: Focus Manager’ın özel iklerinin ve metotlarının tanımlanması için kullanıla herhangi bir kullanıcı arabirimi kontrolü olmadığını unutmayın. Bu nedenle, sekme sırasını ayarlamak ya da öğelerin arasında Tab tuşuyla geçiş yapılmasını engellemek için, Actions paneline bir ActionScript kodu girmeniz gerekir.

Bu uygulamada, daha önce oluşturduğunuz bookstore12.fla dosyasındaki sekme sırasını belirleyeceksiniz.

1.TechBookstore klasöründe yer alan bookstore12.fla dosyasını açın. mcFeedback’e çift tıklayarak sembol düzenleme moduna geçin ve movice clip’teki actions katmanının 1 numaralı karesini seçin.

TechBookstore klasörüne kaydedilen bookstore12.fla belgesini açın ve mcFeedback’e çift tıklayarak sembol düzenleme moduna geçtikten actions katmanının 1 numaralı karesini seçin.

2.ActionScript kullanarak sekme sırasını tanımlayın.

Geribildirim formunda dört temel eleman vardır: From (Kimden) e-posta adresi, Subject (Konu), the Message TextArea (Mesaj Metni Alanı) ve geribildirimi sunucuya gönderen Send (Gönder) düğmesi. Metin alanlarının ve düğmenin sekme sırasını yukarıdan aşağıya doğru tanımlayacaksınız. tiE**** örneğinin sekme indeksi (tab index) 1, tiSubject örneğininki 2, taMessage örneğininki 3 ve bSend örneğininki de 4 olacaktır.

Actions panelini maksimum boya getirin ya da açın (F9). Bu uygulamada Script Assist’i kullanmayacaksınız, bu yüzden Script Assist düğmesine basarak onu kapatın. actions katmanının 1 numaralı karesine aşağıdaki kodu ekleyin.

tiE****.tabIndex = 1;
tiSubject.tabIndex = 2;
taMessage.tabIndex = 3;
bSend.tabIndex = 4;

Daha sonra kodu bir tarayıcıda test ederken, klavyenizdeki F12 tuşuna basarak belgeyi bir Web tarayıcısında test etmeniz gerekir.

Not: FocusManager’ı, ancak Ders 10’da gezinti özel iğini etkinleştirecek script’leri ekledikten sonra test edebileceksiniz. Ama bunu şimdi test etmek istiyorsanız, bu ActionScript kodunu ve örneklerinizi kopyalayıp yeni bir Flash belgesine yapıştırabilirsiniz.

Tab tuşuna birkaç kes bastığınızda, imleç Stage’’deki örnekler arasında geçiş yapacaktır. bSend Button bileşeni vurgulandığında Tab tuşuna tekrar basarsanız, vurgu tiE**** örneğine geçer. Çünkü nk sekme sırasında bSend örneğinden sonra gelen bir öğe yoktur, dolayısıyla sekme indeksindeki ilk öğeye geri dönülür.

İpucu: Sekmeli hale getirilmiş movie clip’lere ve düğmelere ait örneklerin etrafında sarı bir kutu görünür. Bileşenlerde hale rengi görüntülenir. Halenin (halo), imleç üzerlerine getirildiğinde bileşenlerin etrafında görünen yeşil renk (varsayılan) olduğunu hatırlayın.

Not: Sekme sırasının kullanılabilmesi, SWF dosyasının bir tarayıcı penceresinde görüntülenmesi gerekir. Sekme sıralaması, test ortamında movie clip’lerde veya düğmelerde, bağımsız bir Flash Player’da oynatılan SWF dosyalarında kullanılamaz.

3.ActionScript kullanarak varsayılan bir form düğmesi ayarlayın.

Kullanıcı formu doldururken TextArea bileşeninin haricindeki bileşenlerde Enter ya da Return tuşuna bastığında, tıklanmış gibi etkilenen bir varsayılan düğme örneği de ayarlayabilirsiniz. Enter tuşuna basılabilmesi, HTML’’de form doldururken kullanılan bir davranışa benzer. Actions panelindeki ActionScript kodunun altına aşağıdaki kod satırını ekleyin.

focusManager.defaultPushButton = bSend;

Bu kod parçası, basılacak varsayılan düğmeyi bSend (belgedeki tek düğme budur) olarak ayarlar. Kullanıcı formu doldururken Enter tuşuna basarsa, sent_btn düğme örneği için click (tıklama) olay işleyicisi tetiklenir. Bir sonraki derste FLA dosyasına bazı ActionScript kodları ekleninceye kadar, Send düğmesine tıklanmasının SWF dosyasına herhangi bir etkisi olmayacaktır.

4.formda tiE**** örneğinin vurgulanmasını sağlayın.

Flash SWF dosyası Tech Bookstore sitesine yüklenirken belirli bir form örneğinin vurgulanmasını istediğinizi düşünün. Bu biraz daha kullanıcı dostu bir uygulamadır, çünkü böylece ziyaretçileriniz e-posta adreslerini yazabilmek için fareye uzanıp sonra ad bir form alanına tıklamak zorunda kalmazlar.

Actions panelindeki kodun altına aşağıdaki kod satırını ekleyin.

focusManager.setFocus(tiE****);

Bu kod satırı, Stage’deki tiE**** örneğinin vurgulanmasını sağlar. Bu metot ayrıca SWF dosyanızda formun geçerlik kontrolünün yapıldığı ve formda boş bırakılan ya da geçerli bir değer girilmeyen TextInput alanının vurgulanmasını istediğiniz durumlarda son derece faydalı olur. Böyle durumlarda kullanıcıya bir uyarı mesajı gönderebilir ve dikkat etmeleri gereken boş metin alanının vurgulanmasını sağlayabilirsiniz.

5.Kütüphaneyi temizleyin.

Bookstore’a birçok yeni sembol eklediniz. Şimdi biraz zaman ayırıp kütüphaneyi açarak yeniden düzenleyin. Eklediğiniz bütün bileşenleri components klasörüne taşıyın. Burada bir grafiğiniz, movie clip’leriniz ve sesleriniz de var. Movie clip’leri movie clip klasörüne, sesleri de media klasörüne taşıyın.

6.Yeni movie clip’leri Stage’de yeni bir katmana yerleştirin. Movie clip’lere
mcFeedbackForm ve mcQuestionForm örnek isimlerini verin.

Timeline’da map katmanının üstüne yeni bir katman ekleyin ve bu yeni katmanın ismini feedback olarak değiştirin. Timeline’da feedback katmanındaki feedback etiketinin (kare 50) altına yeni bir anahtar kare ekleyin. Katmanda numarası 60’tan büyük olan bütün kareleri silin. Bu kareleri seçip sağ tıklayarak ya da (Control tuşunu basılı tutup tıklayarak) bağlam menüsünü açın ve buradan Remove Frames’i seçin.

Kütüphaneyi açın, mcFeedback ve mcQuestions sembollerini bulun ve bunları yeni katmanın üzerine sürükleyin. Bu iki sembolü Stage’in boş bir yerine yerleştirin ve aşağıdaki şekilde gördüğünüz gibi iki örneği yatay olarak hizalayın.


Geribildirim formunu seçin ve Properties denetçisini kullanarak bunun örnek ismini mcFeedbackForm yapın. Anketi seçin ve Properties denetçisini kullanarak bunun örnek ismini de mcQuestionsForm yapın.

7.Belgede yaptığınız değişiklikleri kaydedin.

File > Save komutunu seçerek, FLA dosyasında yapmış olduğunuz tüm değişiklikleri kaydedin. Ders 10’da formdaki bilgileri bir sunucuya göndermek için ActionScript’i daha yoğun bir şekilde kullanacaksınız.


Bu derste şunları öğrendiniz:

•Formlar ve veriler hakkında daha fazla bilgi edindik.
•Flash UI bileşen grubunu öğrendik.
•Bir geribildirim formu oluşturduk.
•Button bileşenini kullandık.
•Bir anket formu oluşturduk.
•Focus Manager’ın nasıl kullanıldığını öğrendik.

ellerine sağlık çok güzel olmuş

Ellerine sağlık.

ellerine sağlık ama ders 10 nu sabırsızlıkla bekliyorum

Teşekkürler hocam...

harikaydı hocam,emeğinize sağlık.
Bu dersle alakalı olarak basit bir site yönetim paneli dersi anlatabilirmisiniz ?
Yani admin girişi,haber ekleme,foto ekleme gibi basit bir ders ??

Elinize sağlık çok süper bir kaynak:wink:

Evet sevgili hades ders10 u heyecanla bekliyoruz.

Çok tskler hocam bi de en son örnekler verirseniz çok iyi olur