Bileşenlerle Form Oluşturmak

Transkript

1 A-PDF Split DEMO : Purchase from to remove the watermark 8 Bileşenlerle Form Oluşturmak Macromedia Flash bileşenleri, Flash kullanılarak oluşturulan ve SWC dosyaları halinde derlenen küçük uygulamalardır. Flash çok sayıda hazır bileşen içerir. En basit arabirim elemanlarından (açılır listeleri gibi), güçlü ve karmaşık uygulamalara (fotoğraf galerileri, oylama, grafik motorları, hatta metin editörleri gibi) kadar çeşitli yerlerde kullanılan birçok farklı tipte bileşen mevcuttur. Bileşenler çok faydalıdır, çünkü bir Flash belgesine aktarılmalarıyla Web sitelerine anında işlevsellik ekleyebilirler. Bunun için, sadece bazı parametreleri değiştirirler ya da bazen az miktarda ActionScript kodu kullanırlar. Bu derste Flash 8 Basic te bulunan bileşenleri kullanarak, kullanıcıların geribildirimlerini girebileceği ve bir anketi doldurabileceği formlar oluşturmayı ve öğreneceksiniz. Flash 8 Basic te yer alan varsayılan UI (User Interface-Kullanıcı Arabirimi) bileşenleriyle formları hızlı bir şekilde oluşturabilirsiniz. Bu bileşenleri kullanarak, kullanıcıların bir sunucuya gönderilmek üzere çeşitli seçenekleri işaretleyebileceği ve veri girebileceği bir formu nasıl oluşturacağınızı öğreneceksiniz. Tech Bookstore projesinde bileşenlerin kullanıldığı ldığı iki form

2 Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Form ve veri konularını öğreneceğiz. Flash bileşenlerini tanıyacağız. Bir geribildirim formu oluşturacağız. Bir Button bileşenine simge ekleyeceğiz. Focus Manager ı kullanarak sekme sırasını düzenleyeceğiz. Yaklaşık Süre Bu dersi yaklaşık 1 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: Yok Başlangıç Dosyaları: lesson08/start/bookstore11.fla lesson08/start/mail_icon.fla Tamamlanmış Dosyalar: lesson08/complete/bookstore12.fla 212 DERS 8

3 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. Bu kitap 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ş ine izin vererek bu veri aktarımını mümkün kılar. Flash 8 Professional, uzun ActionScript kodları yazmak gerekmeden, sunucuyla veri alışveriş i 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ı BİLEŞENLERLE FORM OLUŞTURMAK 213

4 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. Bileşenler 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 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 en dosyaları nın yer aldığı bir veritabanı bulunmaktadır ve sadece Flash bileşenlerini 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. 214 DERS 8

5 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. BİLEŞENLERLE FORM OLUŞTURMAK 215

6 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. 216 DERS 8

7 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. Alternatif olarak CD-ROM daki lesson08/start klasöründe yer alan bookstore12.fla dosyasını açabilirsiniz. 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 # (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. BİLEŞENLERLE FORM OLUŞTURMAK 217

8 Stage Stagee e t ıklayın ve 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ı kullanarak 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 Stagee, e, ikinci adımda oluşturduğunuz dikdörtgenin sol kenarına yakın bir konuma sürükleyin. 218 DERS 8

9 4. Stage deki her bir Label örneğine birer özel yazı ekleyin Stage Stagedeki 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-postan ız) yazın ve Enter ya da Return tuşuna basın. Stage, bileşenin görüntüsünü hemen güncelleyecektir. 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 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 , Subject ve Message Label örneklerinin Stage deki X ve Y koordinatlarını Properties denetçisini kullanarak değiştirin. Stage Stagede de Your Label örneğini seçin ve Properties denetçisini ya da Info panelini kullanarak 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. BİLEŞENLERLE FORM OLUŞTURMAK 219

10 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ı kullanarak 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ı kullanıcıların, daha sonra uygulamanızda kullanı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 kullanarak bu bileşendeki metni düzenlenebilecek ya da düzenlenemeyecek şekilde ayarlayabilir, metni bir şifre olarak tanımlayabilir (bu durumda karakterler noktalar gibi semboller 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 kullanabileceğiniz ilave parametreler göreceksiniz. Component Inspector panelini kullanarak bileşen örneğine girilecek maksimum karakter sayısını ayarlayabilir, belirli karakterlerin kabul edilip edilmeyeceğini belirleyebilir ve bileşenin enin Stage Stagede 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 ti 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 kteyken Stage Stagedeki deki ti ö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 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. 220 DERS 8

11 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 edebilirsiniz. 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. BİLEŞENLERLE FORM OLUŞTURMAK 221

12 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. 222 DERS 8

13 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. BİLEŞENLERLE FORM OLUŞTURMAK 223

14 Ö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. CD-ROM da yer alan tamamlanm ış bookstore12.fla dosyasında, Send düğmesiyle birlikte kullanabileceğiniz bir simge bulunmaktadır. Bunun yerine Flash ta kendi özel grafiğinizi ya da movie clip inizi oluşturabilirsiniz. File > Import > Open External Library komutunu kullanarak CD-ROM daki lesson08/start klasöründe yer alan mail_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 n Flash Flashta 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 224 DERS 8

15 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 kullandığı bir öğedir. Bu öğe büy ük küçü k harfe duyarlıdır, dolayısıyla ıyla icon parametresinin kar şısına yazarken, ismin aynen Linkage iletişim kutusundaki gibi BİLEŞENLERLE FORM OLUŞTURMAK 225

16 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 Stagede de bu movie clip in bir örneği olmadığından, şu anda test ettiğinizde 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ı nda görüntüleneceğini 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. 226 DERS 8

17 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 BİLEŞENLERLE FORM OLUŞTURMAK 227

18 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. 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 228 DERS 8

19 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ı 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. BİLEŞENLERLE FORM OLUŞTURMAK 229

20 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:). 230 DERS 8

21 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 Stagee 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. 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ı kullanarak Stage Stagedeki deki NumericStepper bile şenini seçin. Onu, ilk sorunun sol alt köşesine yerleştirin. Properties denetçisini kullanarak şu parametreleri değiştirebilirsiniz: NumericStepper da kullan ılabilecek maksimum ve minimum aralık, kullanı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. BİLEŞENLERLE FORM OLUŞTURMAK 231

22 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ı ndaki (+) button düğmesine iki kez tıklayın ve iki yeni değer 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. 232 DERS 8

23 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ı na taşımak isterseniz, Properties denetçisini kullanarak etiket yerleşimini (Placement) sağdan sola alabilirsiniz. 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 ti 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 kullanılmasını tamamen engellemek için kullanı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ı bütünüyle ü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 özelliği olan tabindex ile birlikte çalışır. Bu özelliği kullanarak, kullanıcı Tab tuşuna bastığında klavyenin hangi sırayla geçiş yapacağını gösteren sayıları belirlersiniz. BİLEŞENLERLE FORM OLUŞTURMAK 233

24 Focus Manager ın özelliklerinin 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. ti ö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. ti .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. FocusManager ı, ancak Ders 10 da gezinti özelliğ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 Stagedeki deki örnekler arasında geçiş yapacaktır. bsend Button bileşeni vurgulandığında Tab tuşuna tekrar basarsanız, vurgu ti örneğine geçer. Çünkü sekme sırasında bsend örneğinden sonra gelen bir öğe yoktur, dolayısıyla ıyla sekme indeksindeki ilk öğeye geri dönülür. 234 DERS 8

25 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 enlerin etrafı nda görünen yeşil renk (varsayılan) olduğunu hatırlayın. 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 HTMLde 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 ti ö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(ti ); Bu kod satırı, Stage deki ti ö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. BİLEŞENLERLE FORM OLUŞTURMAK 235

26 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. 236 DERS 8

27 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 Öğrendiklerimiz Bu derste şunları öğrendiniz: Formlar ve veriler hakkında daha fazla bilgi edindik (Sayfa ). Flash UI bileşen grubunu öğrendik (Sayfa ). Bir geribildirim formu oluşturduk (Sayfa ). Button bileşenini kullandık (Sayfa ). Bir anket formu oluşturduk (Sayfa ). Focus Manager ın nasıl kullanıldığını öğrendik (Sayfa ). BİLEŞENLERLE FORM OLUŞTURMAK 237

28 238 DERS 8