macromedia FLASH 8 Kaynağından Eğitim James English

Transkript

1 macromedia FLASH 8 Kaynağından Eğitim James English

2 macromedia FLASH 8 Kaynağından Eğitim

3

4 macromedia FLASH 8 Kaynağından Eğitim James English

5 Macromedia Flash 8 Kaynağından Eğitim James English Çeviren: Cüneyt Belge - Günay İnkaya Editör: Suat Koyuncu ISBN: Medyasoft Yayınları tarafından Macromedia Press ve Pearson Education ın bir birimi olan Peachpit Press ile birlikte yayınlanmıştır. Bizi World Wide Web de şu adreslerde bulabilirsiniz: Medyasoft Yayınları Genel Yayın Yönetmeni: Suat Koyuncu Medyasoft Bilgi Sistemleri San. ve Tic. Ltd. Okmeydanı, Dünür Sk. No: 3, Bilişim Center Kağıthane İSTANBUL Tel: 0 (212) Faks: 0 (212) E-posta: kitap@medyasoft.com.tr Web: Authorized translation from the English language edition, entitled Macromedia Flash 8 Training from the Source (1st edition, by James English), published by Pearson Education, Inc, publishing as Macromedia Press, Copyright 2006 All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording or by any information storage retrieval system, without permission from the Publisher. TURKISH language edition published by Medyasoft Bilgi Sistemleri San. ve Tic. Ltd., Copyright 2006 Pearson Education, Inc. ye bağlı Macromedia Press tarafından yayınlanmış olan, Macromedia Flash 8 Training from the Source (1. baskı, James English) isimli kitabın İngilizce den yetkili çevirisidir. Copyright 2006 Tüm hakları saklıdır. Bu kitabın hiçbir bölümü yayıncının yazılı izni alınmaksızın elektronik ve mekanik yöntemler, fotokopi, kayıt işlemi veya burada belirtilmeyen farklı yöntemler kullanılarak çoğaltılamaz ve dağıtılamaz. Türkçe baskısı Medyasoft Bilgi Sistemleri San. ve Tic. Ltd. tarafından yayınlanmıştır. Copyright 2006 Türkçe çevirinin tüm yayın hakları bir Medyasoft Bilgi Sistemleri San. ve Tic. Ltd. Şti. ne aittir. Yayınevinden yazılı izin alınmadan kısmen veya tamamen alıntı yapılamaz, hiçbir şekilde kopya edilemez, çoğaltılamaz ve yayınlanamaz. Ticari Markalar Flash, Macromedia Flash, Dreamweaver, Fireworks, Macromedia ve Macromedia logosu, Macromedia, Inc. in tescilli markalarıdır. Bu kitapta tescilli markalar kullanılmıştır. Tescilli bir markanın adının geçtiği her durumda bir tescilli marka işareti koymak yerine, bu markaları sadece yayıncılık anlamında, marka sahibinin yararına, hiçbir hak ihlali niyeti olmaksızın kullandığımızı belirtiriz. Bu kitaptaki herhangi bir terimin kullanım şekli, ticari marka veya hizmet markasının ihlali olarak görülmemelidir. Uyarı Bu kitaptaki bilgiler tamamen garanti dışında olup olduğu gibi dağıtılmaktadır. Bu kitabın hazırlanması konusunda gösterilen tüm özene rağmen, yazar, Macromedia Inc. ve bu kitabın yayıncıları, ne şahıs ne de kurum olarak bu kitapta bahsedilen bilgisayar yazılım ve donanım ürünleri yüzünden, doğrudan ya da dolaylı olarak gerçekleşen veya gerçekleştiği iddia edilen kayıplar ve zararlardan hiçbir kişi ya da şahısa karşı sorumlu değildirler. Birinci Basım : Nisan 2006 Basım ve Cilt : ELMA Bilgisayar Basım / İSTANBUL Türkiye de basılmış ve ciltlenmiştir.

6 Bu kitabı aileme ithaf ediyorum. Onlar olmasaydı, şu anda sahip olduğum azıcık aklım da çoktan uçar giderdi herhalde. Ayrıca arkadaşım olmalarından gurur duyduğum değerli insanlara da teşekkürü bir borç bilirim. Onlar kim olduklarını biliyor. James English

7 BİYOGRAFİ Macromedia nın yetkili eğitimcilerinden olan James English e New York ta Macromedia Flash, Dreamweaver ve Fireworks le ilgilenen insanlara yardım ederken rastlayabilirsiniz. James, beş yıldır Motion Over Time adında bir şirkette çalışmaktadır ve bu beş yıl boyunca onun çeşitli tuhaflıklarına (nasıl oluyorsa) göz yumulmaktadır. Farklı kişilere James hakkındaki fikirlerini sorduğunuzda, onun, kendinden bahsedilmesinden nefret eden biri, insanlara bir şeyler öğretmeyi seven bir insan, can sıkıcı bir herif ya da kendini çok önemseyen bir tip olduğunu düşünebilirsiniz. Ayrıca James hâlâ kendi Web sitesi olmayan az sayıdaki insandan da biridir. Bu gerçekten de utanç verici. TEŞEKKÜR Bu kitap, pek çok insanın sıkı çalışmasının bir ürünü ve aynı zamanda Jen dehaan ın önceki müthiş kitabının bir güncellemesi. Aslında Jen in orijinal metinlerinin büyük bir kısmına, onun yeteneğine ve becerilerine karşı bir saygı gösterisi olarak bu güncelleme kitabında da yer verdik. Sana, bu kitaptaki formları işlemek için kullanılan ColdFusion script leri için de ayrıca bir teşekkür borçluyum. Jen, çok teşekkürler, umarım bu güncelleme kitabı da senin için bir iftihar kaynağı olur. Sen gerçek bir rehbersin. Kitapta gördüğünüz çizimler için de Byron Regej e teşekkürlerimi sunuyorum. Bu zahmetli çalışması, bana, kendisinin de inanamayacağı ölçüde zaman kazandırdı. Hatta bana yardım etmek için, babasıyla yapacağı tatilin en güzel anlarından da feragat etti. Arkadaş olarak ondan daha iyisini ve iş arkadaşı olarak daha profesyonelini bulmak çok zor. Robyn Thomas ve Angela Kozlowski ye, dürüst yaklaşımlarından ötürü Nancy Sixsmith ve Demian A. Holmberg e, Motion Over Time daki patronum ve arkadaşım Nilson Neuschotz a ve bu projeye birikimlerini aktaran herkese özel olarak teşekkür etmek istiyorum. Siz olmasaydınız bu çalışmayı gerçekleştiremezdim. Son olarak da, geçen yaz içim kan ağlayarak ihmal etmek zorunda kaldığım aileme teşekkür ediyorum. Sizlere ve özlediğim tüm insanlara tekrar teşekkürlerimi sunuyorum. Hepiniz harika insanlarsınız, hepinize minnettarım.

8 KİTABIN İNGİLİZCE ORİJİNAL BASIMINA KATKIDA BULUNANLAR Yazar: James English Macromedia Press Genel Editörü: Angela C. Kozlowski Editör: Robyn G. Thomas Teknik k Editör: Demian A. Holmberg Yardımcı Editörler: Nancy Sixsmith Üretim Koordinatörü: Simmy Cover Dizin: Joy Dean Lee Tasarım: Jerry Ballew Kapak Tasarımı: Ellen Reilly KİTABIN TÜRKÇE BASIMINI GERÇEKLEŞTİRENLER Çevirenler: Cüneyt Belge Günay İnkaya Editör: Suat Koyuncu Dizin: Suat Koyuncu Sayfa Tasarımı: Mahmut Benek Kapak Tasarımı: Mahmut Benek

9 İçindekiler Tablosu Giriş ix DERS 1 Temeller Flash 8 e Giriş Flash 8 Çalışma Alanı İlk Flash 8 Dokümanınız Paneller Timeline (Zaman Çizgisi) ve Kareler Katmanlar Tercihlerinizi Belirleyin Bir FLA Dosyasının Test Edilmesi Yardım Almak Projemizi İnceleyelim DERS 2 Grafikler Tools (Araçlar) Paneli Dolgular ve Kenar Çizgilerini Tanıyalım Vektörel Grafikler ve Bitmap Resimler Renklerin Kullanımı Çizim Araçlarını Kullanarak Grafik Oluşturalım Koordinatlar, Kılavuzlar, Izgara ve Kenetlenme Özelliği Yeni Bir Grafik Sembolü Oluşturma Maskeler Kenar Çizgileri Eklemek Kütüphanenin Kullanımı Bitmap Resimlerin Alınması ve Optimize Edilmesi Vektörel Şekillerin Alınması Bitmap ve Degrade Dolgular Grafikler Üzerinde Yapabileceğiniz Diğer İşlemler

10 DERS 3 Metinler Text Aracının Kullanılması Statik Metinler ve Aygıt Fontları Dokümanlara Statik Metin Eklemek Gömülü Fontların Kullanımı Font Özellikleri Metin Alanına Timeline Efektleri Eklemek Yazım Denetimi Yapmak Metin Tabanlı Bileşenlerin Kullanımı Dinamik Metin Alanları DERS 4 Sembol Oluşturmak ve Düzenlemek Semboller Stage Üzerinde Semboller Oluşturmak ve Düzenlemek Kütüphanedeki Sembolleri Görmek Sembollerin İç İçe Kullanılması Grafik Sembolleri Düğme Oluşturmak Düğmeleri Stage e Yerleştirmek Metin Düğmeleri Oluşturmak Görünmez Bir Düğme Oluşturmak Klip Oluşturmak ve Kullanmak Menüyü Tasarlıyoruz Klip Düğmeleri Oluşturmak Sembolleri Çoğaltmak ve Stage e Eklemek DERS 5 Animasyon Hazırlama Animasyonlara Giriş Motion Tween için Hazırlık Motion Tween lerin Eklenmesi Alfa Seviyelerinin Animasyonu Klip Düğmesinin Animasyonu Shape Tween Oluşturma Kare Kare Animasyon Hazırlama Bir Yol Boyunca Animasyon Oluşturmak İÇİNDEKİLER TABLOSU ix

11 DERS 6 Temel Etkileşim Eklemek Flash Belgelerini Etkileşimli Hale Getirmek Davranışlar Davranışları Kullanarak Bir JPEG Resmi Yü klemek Bir Web Sayfasını Açmak için Davranışları Kullanmak Bileşen Kullanarak Harici Bir SWF Dosyası Yü klemek Script Assist i Tanıyalım Timeline ı Kontrol Etmek İçin Eylemleri Kullanmak Bir Giriş Sayfası Düğmesi Oluşturmak El Şeklindeki İmleci Yok Etmek Movie Clip Düğmesinin Çalışmasını Sağlamak Script Gezgini ni ve Raptiyeleri Kullanmak DERS 7 Ses ve Video Eklemek Ses ve Video Kullanmak Sesleri ve Videoları Düzenlemek Medya Öğelerini Kullanırken Sorumlu Davranmak Sıkıştırma, Codec ler ve Plug-in ler Medya Öğelerini Çevrimiçi Olarak Sunmak Dosya Boyutu Bir Belgeye Ses Aktarmak Ses Eklemek ve Sesleri Özelleştirmek Bir Düğmeye Ses Eklemek Flash a Video Aktarmak Videonun Kodlanması DERS 8 Bileşenlerle Form Oluşturmak Formlar ve Veriler Flash Bileşenlerine Giriş Geribildirim Formunun Oluşturulması Button Bileşenini Kullanmak Flash Kullanarak Bir Anket Oluşturmak Focus Manager ı Kullanmak x İÇİNDEKİLER TABLOSU

12 DERS 9 ActionScript in Temelleri ActionScript 2.0 Sınıflar, Metotlar ve Özellikler Metotlar ve Özellikler Kesin Tip Belirleme Yö nteminin Kullanılması Actions Panelinde Kod İpuçlarını Kullanmak Fonksiyonları ve Koşullu Deyimleri Kullanmak Faaliyet Alanı _root, _parent, this ve Seviyeler LoadVars Sınıfı İnceleme Sayfasının Oluşturulması Olayları ve İşleyicileri Kullanmak İzleyicileri Kullanmak İnceleme Sayfasına Bir İzleyici Eklemek İnceleme Sayfasına CSS Biçimlendirmesi Eklemek Katalog Sayfalarını Oluşturmak Ana Katalogu Hazırlamak Haberler Sayfasını Oluşturmak Giriş Sayfasını Oluşturmak Menüyü Canlandırmak Menünün Düğmelerini Kontrol Etmek DERS 10 Flash İçeriğini Yüklemek ve Optimize Etmek Flash Belgelerinin Optimize Edilmesi Uygulamaları Organize Etmek ve İyi Alışkanlıklar Kullanılabilirlik Animasyonu Optimize Etmek Runtime Bitmap Caching Özelliğiyle Bir Arka Planı Daha Verimli Hale Getirmek Bant Genişliği ve Dosya Boyu Kullanıcı Platformları Harici İçeriğin Yü klenmesi İçeriği Ana Uygulamaya Yü klemek Flash htan Dışarıya Veri Göndermek ProgressBar Bileşenini Eklemek Tech Bookstore u Yü klemek Tech Bookstore Sitesini Test Etmek ve Hata Ayıklamak İÇİNDEKİLER TABLOSU xi

13 DERS 11 Flash Belgelerini Yayınlamak Metaveri Eklemek ve SWF Dosyalarını Yayınlamak Flash Player ı Tespit Etmek Bir SWF Dosyasını Bir HTML Sayfasına Gömmek Tech Bookstore Sitesini Web Sunucusuna Yü klemek Sonuç EK A Eklentileri Yüklemek Eklentileri ve Bileşenleri Yüklemek Flash a Komutlar ve Davranışlar Eklemek Eklenti Bulabileceğiniz Yerler EK B Kaynaklar Macromedia.com Uygulama ve Kaynak Siteleri Forumlar E-posta Listeleri Eklentiler ve Fontlar Üçüncü Parti Araçlar ve Bunların Flash İle Bütünleştirilmesi Konuyla İlgili Macromedia Kitapları EK C Klavye Kısayolları Dizin xii İÇİNDEKİLER TABLOSU

14 Giriş World Wide Web in Macromedia Flash tan önceki halini gözümüzün önüne getirmek gerçekten çok zor. O zamanlar Web ortamı gerçekten de sıkıcı, cansız, hatta dümdüzdü. Web sayfaları gösterişli broşürlerden halliceydi; bazı Web sayfalarında birtakım kısıtlı etkileşim ve işlevsellik özelliklerine de rastlanmıyor değildi. Bu kadarcık özellik bile Web tarayıcısı uyumsuzluklarının kurbanı oluyordu. Ama sonra Flash geldi ve bütün kurallar değişti. Macromedia Flash 8 Basic te, Flash ın geliştirilmesine devam edildiğini, tasarımcılara ve geliştiricilere on yıl önce sadece masaüstü uygulamalarının hâkimiyetinde olan becerilerin de sunulduğunu görüyoruz. Dahası Flash 8, sadece Web üzerinden yayınlanan uygulamalarla sınırlı kalmıyor, CD-ROM larda, kiosklarda, cep telefonlarında ve hatta televizyonculukta kullanılabilen mükemmel uygulamalar yaratmanızı da kolaylaştırıyor. Bu kitapta, yukarıda bahsettiğimiz beceriler ve Flash programı tanıtılmaktadır. Kitabı bitirdikten sonra siz de kendi Flash uygulamalarınızı rahatça oluşturabileceksiniz. Macromedia, Flash ın bu sürümünde ürünü yine iki farklı tasarım aracı olarak sunuyor: Macromedia Flash 8 Basic ve Macromedia Flash 8 Professional. Elinizde tuttuğunuz bu kitapta sadece Flash 8 Basic teki özellikler ele alınmıştır, çünkü Professional sürümündeki özellikler başka bir kitapta anlatılmıştır. Birkaç istisna dışında, biraz daha fazla çaba sarf ettiğinizde, Macromedia Flash 8 Professional da yapıp da Basic sürümünde yapamayacağınız hiçbir şey yoktur. Endişelenmeyin, bu kitap Web üzerinden yayınlayabileceğiniz bir uygulama oluşturmanız için gereken temel konulardan başlayarak orta seviyeye kadar olan tüm teknikleri öğretecektir.

15 Ön Gereksinimler Bu kitaptan en iyi şekilde faydalanabilmeniz için en azından Web terminolojisinden anlıyor olmanız gerekmektedir. Kitapta, Flash 8 Basic dışında başka bir konu anlatılmamaktadır. Dolayısıyla World Wide Web konusunda ne kadar çok bilginiz varsa, sizin için o kadar iyi olacaktır. Bunun dışında, bir bilgisayarın nasıl açılıp kapatıldığını biliyorsanız bu kitabı elinize almaya hazırsınız demektir. Özet Sizin de hemen göreceğiniz gibi, bu kitapta elden geldiğince gerçek hayatta karşınıza çıkabilecek uygulamalara yer verilmiştir. Kitabın bazı bölümlerinde gerçek uygulamalardan uzak olarak değerlendirilebilecek bazı örnekler olsa da, buradaki her çalışmanın sizi bilgilendirmek amacıyla kitaba dâhil edildiğini lütfen unutmayın. Kitaptaki uygulamalar, araçlara ve arabirime kısa sürede alışmanızı sağlamak için tasarlanmıştır. Böylece olabildiğince yumuşak bir geçişle kendi projelerinizin üzerinde çalışmaya başlayabileceksiniz. Tamamlanması yaklaşık 16 ila 20 saat sürecek olan bu program aşağıdaki dersleri kapsamaktadır: Ders 1: Temeller Ders 2: Grafikler Ders 3: Metinler Ders 4: Sembol Oluşturmak ve Düzenlemek Ders 5: Animasyon Hazırlama Ders 6: Temel Etkileşim Eklemek Ders 7: Ses ve Video Eklemek Ders 8: Bileşenlerle Form Oluşturmak Ders 9: ActionScript in Temelleri Ders 10: Flash İçeriğini Yü klemek ve Optimize Etmek Ders 11: Flash Belgelerini Yayınlamak Proje Sitesi Macromedia Flash 8: Kaynağıa ndan Eğ itim kitabında, Flash 8 Basic i kullanarak eksiksiz bir uygulamanın nasıl oluşturulduğunu öğretmek amacıyla hazırlanan çok sayıda kapsamlı uygulama bulacaksınız. Ziyaretçileri belirli bir Web sitesinde gezintiye çıkarmak amacıyla siteye çeşitli metinler, resimler ve bir video sunusu yükleyen bir online kitap mağazası uygulaması oluşturacaksınız (bu uygulamada bir alışveriş sepeti olmayacağını hatırlatayım). Uygulamada xiv GİRİŞ

16 ayrıca bir sunucu script ine bağlanan birkaç geri bildirim formu, bazı sesler ve hatta sanal mağazanın yerini gösteren kısmen canlandırma özelliğine sahip bir harita da olacak. 11 uygulamalı dersi tamamladıktan sonra Flash kullanarak eksiksiz bir Web sitesi hazırlamış olacaksınız. İşe grafik tabanlı kullanıcı arabirimini oluşturarak başlayacaksınız. Bu arabirimde ithal edilen grafikler, Flash hta oluşturacağınız çizimler ve farklı tipteki animasyonlar yer alacak. Flash Timeline ına bir video ithal edecek ve ithal ettiğiniz gömülü videoyla birlikte SWF dosyalarını yayınlayacaksınız. Daha sonra ActionScript ve Timeline dan faydalanarak bu SWF dosyalarını kullanan ve farklı bir noktada asıl uygulamaya yüklenecek olan etkileşimli bir sunu oluşturacaksınız. Bu projede, ActionScript in temellerini de öğreneceksiniz. Script yazma ile ilgili terimlerin anlamlarından, bir uygulamayı tamamlama ve kodlarla çalışma konusundaki faydalı alıştırmalara kadar pek çok şeyi bu kitapta bulabilirsiniz. Script ya da herhangi bir türde kod yazmakta zorlansanız bile, muhtemelen buradaki kod örneklerini kolay ve sezgisel bulacaksınız. Son olarak, uygulamanızı Web için optimize edecek ve dosyaları yayınlayarak Web sunucusuna aktaracaksınız. Kitapta Kullanılan Anlatım Teknikleri ve Kitabın Formatı Kitaptaki her dersin başında ilgili dersin temel konusu ana hatlarıyla özetlenmekte ve yeni özellikler tanıtılmaktadır. Öğrenilecek konular ve bütün uygulamaların yaklaşık tamamlanma süresi de yine her dersin başında verilmektedir. Projeler, öğreneceğiniz konuların önemini vurgulayan kısa uygulamalara bölünmüştür. Her derste, daha önceki derslerde anlatılan kavramlardan ve tekniklerden faydalanılmaktadır. İpucu sözcüğüyle gösterilen kısa metinlerde, anlatılan iş lemleri gerçekleştirmek için kullanabileceğiniz alternatif yollar ve öğrendiğiniz becerileri uygularken göz önünde bulundurmanız gereken tavsiyeler yer alır. Not sözcüğüyle gösterilen kısa metinlerde, konuları daha iyi anlamak için yararlanabileceğiniz ek temel bilgiler verilmişi ve becerilerinizi geliş tirmenize yardımcı olacak ileri düzeydeki teknikler anlatılmıştır. Kalın stille gösterilen terimler: Derslerde anlatılan adımları uygularken sizin yazmanız gereken metinleri gösterir. Kodlar için özel fontlar: Kitaptaki kodları kolayca tanımanıza yardımcı olmak için kodlar diğer metinlerden farklı, özel bir fontla biçimlendirilmiştir. İtalik stille gösterilen metinler: İtalik metinler, her derste yeni tanıtılan ve vurgulanan terimleri gösterir. Menü komutları ve klavye kısayolları: Flash hta işlemler genellikle birden fazla yolla gerçekleştirilebilir. Bu farklı seçenekler her derste belirtilecektir. Menü komutları, menü isimleri ile komutlar arasına büyüktür işareti (>) konularak gösterilmiştir: Menü > Komut > Altkomut. Klavye kısayolları, aynı anda basmanız gereken tuşları belirtmek üzere tuş isimlerinin arasına GİRİŞ xv

17 artı işareti (+) konularak gösterilir. Örneğin Shift+Tab, aynı anda Shift ve Tab tuşlarına basmanız gerektiğini gösterir. Ekler: Bu kitapta üç ek bölümü bulunmaktadır. Eklentileri Yü klemek adını taşıyan Ek A Ada, d Macromedia Extension Manager ın yüklenmesi ve kullanılmasıyla ilgili bilgiler yer alır. Kaynaklar adındaki Ek B de önemli online kaynaklara ait çeşitli bağlantılar bulacaksınız. Klavye Kısayolları adını taşıyan Ek C de de Flash 8 Basic deki kısayollar birer liste halinde verilmiştir. CD-ROM: Kitapla birlikte verilen CD de Macromedia Flash 8 in bir deneme sürümüyle birlikte, kitaptaki her derse ait tüm ortam dosyaları, başlangıç dosyaları, giderek gelişen proje dosyaları ile projelerin tamamlanmış hali bulunmaktadır. Herhangi bir aşamada, uygulamalardaki adımları doğru şekilde uyguladığınızdan emin olmak için dersler oluşturulurken hazırlanan bu dosyalara bakabilirsiniz. CD de bu dosyaları derslere göre organize edilmiş bir şekilde bulacaksınız. Örneğin Ders 4 ün dosyaları CD de lesson04 klasöründe yer almaktadır. Çalışacağınız derslerin dizin yapısı aşağıdaki gibidir: Her derste edineceğiniz becerileri daha da geliştirmek için, derste kullanılan başlangıç dosyalarını sıfırdan başlayarak oluşturmayı deneyin. Macromedia Kaynağından Eğitim Serisi Macromedia a anın Kayna ağından Eğ itim ve İ leri Düzey Kaynağıa ndan Eğ itim dizileri, Macromedia ile işbirliğiyle geliştirilmekte ve ürün destek ekipleri tarafından gözden geçirilmektedir. Programı öğrenmekte olan okuyucular için ideal olan Kaynağından Eğitim kitaplarında, programla ilgili sağlam bir altyapı oluşturan uygulamalı dersler yer almaktadır. Uygulayarak daha iyi öğrendiğinizi düşünüyorsanız, bu dizi tam size göre demektir. Her Kaynağıa ndan Eğ itim kitabı, dersler halinde, xvi GİRİŞ

18 Macromedia yazılım ürünleriyle ilgili eğitim sağlamaktadır. Bu dersler, profesyonel seviyede karmaşık bir projeyi hazırlamak için ihtiyaç duyacağınız teknikleri öğretecek şekilde hazırlanmıştır. Her kitapta, derslerde kullanacağınız dosyaların tamamını ve karşılaştırma yapmak için inceleyebileceğiniz tamamlanmış proje dosyalarını ve çeşitli yardımcı araçları içeren bir CD yer almaktadır. Macromedia Yetkili Eğitim ve Sertifikasyon Sistemi Bu kitap, kaynaktan gelen içeriği kullanarak kendi kendinize çalışabilmenizi sağlayacak şekilde tasarlanmıştır. Macromedia Yetkili Eğ itim Ortağı (Macromedia Authorized Training Partner) programı kapsamında yer alan diğer eğitim seçeneklerini de değerlendirebilirsiniz. Macromedia Sertifikalı Eğ itmenler (Macromedia Certified Instructors) tarafından verilen uygulamalı derslerle eğitiminizi çok kısa sürede tamamlayabilirsiniz. Macromedia University den online etkileşimli eğitim alarak bu konudaki her şeyi kendi kendinize öğrenmeniz de mümkün. Tü m bu eğitim seçenekleri, sizi Macromedia Sertifikalı Geliştirici (Macromedia Certified Developer) olmaya hazırlayacaktır. Yetkili eğitim ve sertifikasyonla ilgili ayrıntılı bilgi için adresini ziyaret edebilirsiniz. Ayrıca bu kitabın Tü rkçe basımının yayıncısı olan Medyasoft un Web sitesinden de tüm Macromedia yazılımlarıyla ilgili eğitimler hakkında bilgi alabilirsiniz: Neler Öğreneceksiniz? Kitaptaki derslerde ilerledikçe, kendi Web sitelerinizi oluşturmak ve bu sitelerin devamlılığını sağlamak için gereken becerileri geliştireceksiniz. Bu kitabı tamamladığınızda şunları öğrenmiş olacaksınız: Flash ortamında bulunan araçları inceleyecek ve kullanacaksınız. Bileşenleri kullanarak ilgi çekici bir kullanıcı arabirimi oluşturacaksınız. Farklı animasyon teknikleri kullanarak animasyonlar hazırlayacaksınız. PNG ve video dosyaları gibi ortam dosyalarını ithal edeceksiniz. Yerleşik bileşen grubunu kullanarak, ziyaretçilerden bilgi toplayan formlar oluşturacaksınız. Script Assist i kullanarak Flash uygulamanıza etkileşim özellikleri ekleyeceksiniz. Davranışları kullanarak bir belgeye kısa sürede ActionScript kodları ekleyeceksiniz. ActionScript in Flash belgelerinizle nasıl çalıştığını öğrenecek ve bileşenlerin çalışmasını sağlayacaksınız. ActionScript i kullanarak Flash programının dışına bilgi göndereceksiniz. Dinamik olarak harici içerik yükleyeceksiniz. Arama motorunun istediğiniz öğeleri daha kolay bir şekilde bulmasını sağlamak için Flash belgelerinize metaveri ekleyeceksiniz. FLA dosyalarınızı, Flash dosyalarınızı optimize edebileceğiniz ve yayınlayabileceğiniz şekilde düzenleyeceksiniz. GİRİŞ xvii

19 Minimum Sistem Gereksinimleri Windows 800 MHz Intel Pentium III işlemci (veya eşdeğeri) ve daha yeni işlemciler Windows 2000, Windows XP 256 MB RAM (aynı anda birden fazla Studio 8 ürününü çalıştırabilmeniz için 1 GB tavsiye edilir) 1024 x 768, 16 bit (32-bit tavsiye edilir) çözünürlüğe sahip ekran kartı ve monitör 710 MB boş sabit disk alanı Macintosh 600 MHz PowerPC G3 işlemci ve daha yeni işlemciler Mac OS X 10.3, MB RAM (aynı anda birden fazla Studio 8 ürününü çalıştırabilmeniz için 1 GB tavsiye edilir) 1024 x 768, binlerce renk ayarına sahip (milyonlarca renk tavsiye edilir) monitör ve ekran kartı 360 MB boş sabit disk alanı * Bazı özellikler için QuickTime 6.3, QuickTime Pro 6.3 veya daha yeni sürümlerin kullanılması gerekir. * Flash 8, İnternet üzerinden ya da telefonla alabileceğiniz bir aktivasyon koduna gereksinim duyar. Studio 8 ürün serisi son derece etkileyici. Bu araçlarla neler yapabildiğinizi görmeyi heyecanla bekliyoruz. Flash ile oluşturacağınız güçlü temel sayesinde becerilerinizi kısa sürede geliştirecek ve güçlendireceksiniz. Deneyiminiz ne olursa olsun, Flash programını kullanmanın hiç de zor olmadığını göreceksiniz. Biraz girişkenlik ve çaba ile dersleri hızla tamamlayabilir, kısa sürede kendi uygulamalarınızı ve sitelerinizi hazırlayacak seviyeye ulaşabilirsiniz. xviii GİRİŞ

20 1 Temeller Flash Basic 8 veya Flash Professional 8 mi öğrenmek istiyorsunuz? Doğru yerdesiniz. Flash kullanarak neler yapılabileceğini muhtemelen biliyorsunuz; birkaç cümle halinde özetleyecek olursak: Flash ile uygulamalar, animasyonlar, oyunlar geliştirebilir, mobil cihazlarda (örneğin cep telefonlarında) çalışacak programlar yazabilirsiniz. Tüm uygulamalarınızı Web e ya da CD ortamına taşıyabilir, bir ağ üzerinde kullanabilir, masaüstü ya da dizüstü PC lerde çalıştırabilirsiniz. Flash Player ın yaygınlığı ve Flash ın HTML in sınırlarını tanımak zorunda olmaması da Flash ı Web siteleri inşa etmek ve Web den gelip PC nizde çalışan uygulamalar geliştirmek için ideal bir araç haline getirir. Flash arabirimi

21 İlk dersimize en temel adımlarla başlıyoruz. Flash arabirimiyle tanışacağız ve hayalimizdeki Web sitelerini yapmak için buradaki araçları nasıl kullanabileceğimizi öğreneceğiz. Çalışma alanı, paneller ve araçlar gibi başlıklarımız olacak. Tüm detaylarına Ders 11 de girecek olsak da bir SWF dosyasını nasıl yayınlayabileceğimiz konusuna da çok kısaca değineceğiz. Dersimizin sonunda ise bu kitap boyunca geliştireceğimiz örnek uygulamayı göreceğiz. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Flash çalışma alanı ile tanışacaksınız. Yeni bir Flash dokümanı oluşturacak ve kaydedeceksiniz. Panelleri, menüleri ve Stage i kullanacaksınız. Timeline (zaman çizgisi) ve frame ler (animasyon kareleri) ile çalışacaksınız. Doküman ayarlarınızı ve tercihlerinizi değiştireceksiniz. Bir SWF dosyasını test edeceksiniz. Yardıma ulaşmayı öğreneceksiniz. Projenizin son halini inceleyeceksiniz. Yaklaşık Süre Bu dersi yaklaşık bir saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: Yok Başlangıç Dosyaları: Yok Tamamlanmış Dosyalar: lesson01/complete/bookstore3.fla 2 DERS 1

22 Flash 8 e Giriş Macromedia Flash, Web sitelerinden PC tabanlı eğitim modüllerine kadar her şeyi üretmenize imkân veren bir tasarım ve geliştirme uygulamasıdır. Flash ın zengin çizim araçları ve nesne yönelimli script yazım dili hayal gücünüzle birleştiğinde ortaya çıkacak olan şey harikulâde arabirimlerdir. Flash ayrıca Flash Lite Player sayesinde mobil cihazlarda çalışacak uygulamaların geliştirilmesinde de kullanılabilir. Flash esas itibarı ile iki farklı yazılım modülünden oluşur. Düzenleme ortamı adını verebileceğimiz ilk kısım kendi uygulamalarınızı geliştirmek için kullandığınız bölümdür. Programın ikinci kısmını teşkil eden Flash Player ise SWF dosyaları halinde dağıtılan uygulamaları yorumlar, gösterir ve çalıştırır. SWF (Small Web File küçük Web dosyası) formatı daha çok Web tabanlı uygulamalarda kullanılsa da yetenekleri sadece bununla sınırlı değildir. Bir Flash uygulaması (SWF dosyası) kullanıcıya ister Web üzerinden isterse başka bir şekilde ulaşmış olsun, kullanıcının bunu görebilmesi için Flash Player a ihtiyacı vardır. Flash Basic 8 ve Flash Professional 8, uygulamalarınızı hem Flash Player ın önceki sürümleri hem de Flash Lite (mobil platformlar için) ile uyumlu olacak şekilde yayınlamanıza imkân verir. Peki Flash ı bu denli dikkat çekici yapan ne? Her şeyden önce Flash gayet esnek ve genişletilebilir bir tasarım aracı; Flash ı tamamen sizin istediğiniz şeyleri yapacak şekilde geliştirebilir veya daha da iyisi ihtiyacınız olan eklenti (extension) bir başkası tarafından zaten yazılmışsa bunu Macromedia Web sitesinden bulup indirebilir ve yükleyebilirsiniz. İkinci sebep ise Flash Player ın yaygınlığı; dünya genelinde Web erişimi olan bilgisayarların % 97 sinde yüklü durumda bulunan Flash Player küçük, hızlı, yüklenmesi ve güncellenmesi kolay, tamamen ücretsiz bir yazılım. Bunların haricinde, Flash ın Fireworks ve Dreamweaver gibi diğer Macromedia yazılımlarının yanı sıra çeşitli üçüncü parti uygulamaları ile de entegre olması onun iş akışınızı kolaylaştıran bir başka dikkat çekici özelliğidir. Flash eklentileri için adresinde Flash kategorisini ziyaret edin. Çok azı Macromedia tarafından yazılmış olan bu eklentilerin bir kısmı ücretsizken bazılarını satın almanız gerekir. Bir eklentiyi indirmeden önce kaç yıldız almış olduğuna bakmayı ihmal etmeyin. Son olarak, nesne yönelimli bir dil olan ActionScript de Flash ın en çarpıcı yanlarından biridir. JavaScript ve Rhino ile aynı standardı paylaşan ActionScript adından da tahmin edebileceğiniz gibi uygulamalarınızı harekete geçiren motordur. ActionScript küçük, güçlü ve eğlenceli Flash uygulamaları geliştirirken en büyük yardımcınız olacaktır. Flash ı kullanmanız için tüm bunların dışında daha pek çok sebep saymak mümkün; kitabımızın sayfaları boyunca ilerlerken bunların hepsini göreceksiniz. O yüzden endişe etmeyin ve Flash a dair çok değerli tecrübeler edineceğiniz bu serüvenin tadını çıkarmaya bakın. TEMELLER 3

23 Flash 8 Çalışma Alanı Flash 8 i ilk kez açtığınızda göreceğiniz şey Start (Başlangıç) sayfasıdır. Kendisi de bir SWF dosyası olan Start sayfasında Open a Recent Item (Son Kullanılan Öğelerden Birini Aç), Create New (Yeni Oluştur) ve Create from Template (Şablon Kullanarak Oluştur) seçenekleri bulunur. Sayfanın alt kısmında ise tanışma / eğitim modüllerine linkler yer alır ve varsa Flash güncellemeleri görüntülenir. Açılış sayfasında Flash 8 güncellemelerini görebilmeniz için Internet e bağlı olmanız gerekir. İnternet bağlantınız yoksa sayfanın görüntülenmesinde bir yavaşlık olabilir. Sayfayı tekrar görmek istemiyorsanız sol alt köşede yer alan Do Not Show Again (Tekrar Gösterme) düğmesine basınız. Açılış sayfasını iptal etmek için Windows ta Edit > Preferences (Düzenle > Tercihler) ve Mac te Flash 8 > Preferences altındaki General (Genel) sekmesini de kullanabilirsiniz. Geliştirme ortamı olarak da adlandırılan Flash çalışma alanı, ortada bir Stage ve bunu çevreleyen bir dizi panelden meydana gelir. Her Flash dosyası bir zaman çizgisine (Timeline) bağlı olarak oynatılır. Zaman çizgisi, çalışmanızda yer alan tüm görsel öğe ve ActionScript lerin katmanlar halinde organize edildiği yerdir. Birden fazla kare (frame) içeren bir dosya Flash Player da oynatılırken bir oynatım kafası (playhead) bu zaman çizgisi boyunca ilerler. Kareler, tıpkı bir sinema filminde olduğu gibi, zamanda belli noktalardaki pozisyonları temsil ederler ve bir araya gelerek hareketin doğmasını sağlarlar. Yan sayfadaki resimlerde Flash 8 in Mac ve Windows platformlarındaki çalışma alanını görüyorsunuz. Bu derste ve kitap boyunca çalışma alanında yer alan her şeyin nasıl kullanıldığını sırayla öğreniyor olacaksınız. Siz çeşitli türlerde yeni dokümanlar oluşturana kadar çalışma alanında karşınıza çıkabilecek pek çok seçenek silik ya da görünmez durumda olabilir. 4 DERS 1

24 Doküman sekmeleri Düzenleme çubuğu Başlık çubuğu ve doküman ismi Timeline (Zaman çizgisi) Ana menü Tools (Araçlar) paneli Properties (Özellikler) denetçisi Stage (Sahne) Açık paneller Doküman sekmeleri Başlık çubuğu ve doküman ismi Timeline (Zaman çizgisi) Ana menü Düzenleme çubuğu Paneller Tools (Araçlar) paneli Properties (Özellikler) denetçisi Stage (Sahne) TEMELLER 5

25 Geliştirme ortamını farklı işlevselliklere sahip çeşitli ana gruplar halinde incelemek mümkündür. Ayrıca her grup kendi içinde kitabımızın ilerleyen bölümlerinde öğreneceğiniz çok sayıda denetim aracı içerir. Menüler: Flash ta göreceğiniz menüler kullanmakta olduğunuz diğer yazılımlarda gördüklerinize çok benzer. Flash menülerinde de Save (Kaydet), Copy (Kopyala), Paste (Yapıştır) ve Help (Yardım) gibi komutlar bulunur. Bunların dışında menülerde Flash a özgü komutlar da yer alır. Timeline (Zaman çizgisi): SWF dosyaları, animasyon tabanlı bir programdan bekleneceği gibi, bir zaman çizgisi üzerindeki karelerden oluşur. Kareler ve anahtar kareler zaman çizgisi üzerinde sıralanırlar. Dosya (animasyon) içeriğinin farklı öğelerini taşıyan veya geçiş efektlerini içeren katmanlar da zaman çizgisi üzerinde yer alırlar. Oynatım kafası zaman çizgisi üzerinde ilerlemeye başladığında animasyon ortaya çıkar. Paneller: Paneller vasıtası ile Flash ta ürettiğiniz bir uygulamanın neredeyse her şeyini kontrol edebilirsiniz. Uygulamanıza ActionScript özellikleri ya da renkler eklemek, kendi renklerinizi oluşturmak, nesneleri dizmek ya da öğeleri depolamak için ihtiyaç duyduğunuz tüm araçları panellerde bulabilirsiniz. Flash taki tüm panellere Window (Pencere) menüsünden ulaşabilirsiniz. Stage (Sahne): Stage, Flash uygulamanız için büyük önem taşır çünkü göstermeyi planladığınız tüm görsel nesneler burada yer alır. Stage düğmeler, metinler, form elemanları ve animasyonlar dahil her şeye ev sahipliği yapar. Doküman sekmeleri ve düzenleme çubuğu: Flash ta her açık doküman için bir doküman sekmesi üretilir, bu sayede tasarımcı ya da geliştirici açık dosyalar arasında hızla geçiş yapabilir. Doküman sekmelerinin hemen altında yer alan düzenleme çubuğunun işleviyse neleri düzenlemekte olduğunuzu size göstermektir (örneğin sahneler, ekranlar, semboller, gruplanmış öğeler gibi). Düzenleme çubuğu ayrıca üzerindeki bir açılır liste ile Stage in ekrandaki büyüklüğünü kontrol edebileceğiniz yakınlaştırma seçeneklerine ulaşmanızı sağlar. Stage, ekranı kaplar durumda değilken doküman sekmelerini göremezsiniz. Simge durumuna küçültülmüş (Minimize edilmiş) durumda iken tüm dokümanlar çalışma alanı etrafında başıboş yüzer durumdadır. Stage başlık çubuğunda Ekranı Kapla (Maximize) düğmesine basarak sekmelere ve daha derli toplu bir görünüme yeniden kavuşabilirsiniz. Properties denetçisi: O anda seçili olan nesneye (Stage, metin, düğme, vs.) dair bilgileri Properties denetçisinde görebilirsiniz. Bu sayfada nesneye ilişkin bilgileri sadece görmekle kalmaz, bilgilerin çoğunu (örneğin Stage deki x ve y koordinatları, genişlik ve yükseklik, dokümanınızdaki sembol ya da bileşen kullanımlarına verdiğiniz isimler gibi) isteğinize göre değiştirebilirsiniz. 6 DERS 1

26 İlk Flash 8 Dokümanınız Flash ile çeşitli türlerde dokümanlar oluşturabilirsiniz. Örneğin animasyon ya da video olarak izlediğiniz SWF dosyaları bu türlerden biridir. Dilerseniz sadece ActionScript kodu içeren dokümanlar da oluşturabilirsiniz; bu dokümanlar içerdikleri ActionScript kodunun birçok farklı yerde kullanılmasına imkân verir. Örneğin bir Web sayfasında yayınlanmış olan bir kek tarifini düşünün. Web sayfasındaki tarifi izleyen herkes bu keki hazırlayabilir; keki pişirmek isteyen kişinin bilmesi gereken tek şey tarifin nerede olduğudur. Henüz acıkmadınız mı? Şimdiki çalışmamızda yeni bir FLA dokümanı oluşturacağız. Bu doküman bizim ana dokümanımız olacak ve kendisiyle kullanacağımız her içeriğe (örneğin metinler, grafikler, video ve diğer SWF dosyaları gibi) ev sahipliği yapacak. 1. Flash ı başlatın. FLA dosyası aslında Flash uygulamanızın düzenlenebilir (edit edilebilir) halidir ve son kullanıcı için işlevsel bir uygulama olarak kullanılamaz veya Web üzerinden görüntülenemez. Siz bir tasarımcı ya da geliştirici olarak çeşitli formatlarla çalışabilirsiniz ancak son kullanıcıya uygulamanızla etkileşim halinde olabilmesi için en azından bir SWF dosyası vermeniz gerekir. Ders 11 de bu konuya daha detaylı olarak yeniden değineceğiz. Windows altında Start (Başlat) > All Programs (Programlar) > Macromedia > Macromedia Flash 8 yolunu izleyerek Flash ı açabilirsiniz. Macintosh kullanıyorsanız Macromedia Flash 8 i Applications klasörü altında görebilir ve simgesine çift tıklayarak programı çalıştırabilirsiniz. Kurulum sonrası Flash ı ilk kez çalıştırdığınızda ürün aktivasyonu yapmanız gerekir. Aktivasyon basit bir işlemdir ve bir diyalog kutusu bu işlem esnasında takip etmeniz gereken adımları size söyler. Yazılım aktivasyonu hakkında detaylı bilgi için sayfasını ziyaret edebilirsiniz. Flash varsayılan olarak Start (Başlangıç) sayfası ile açılır. Bu sayfadaki seçenekleri kullanarak yeni bir Flash dokümanı oluşturabilir veya doküman oluşturmak için hazır şablonları kullanabilirsiniz. En son kullandığınız dokümanlara yine Start sayfasından ulaşabilirsiniz. 2. Create New (Yeni Oluştur) başlığının hemen altındaki Flash Document linkine tıklayarak yeni bir Flash dokümanı oluşturun. Yeni bir Flash dokümanı oluşturduğunuzda doküman varsayılan ayarlarla açılır. Bu ayarları değiştirebilir ve onların bundan böyle varsayılan ayarlar olarak kabul edilmesini sağlayabilirsiniz; böylece yeni oluşturduğunuz her doküman sizin istediğiniz ayarlarla açılır. Bu konuya bu dersin ilerleyen bölümlerinde yeniden değineceğiz. TEMELLER 7

27 Flash Basic 8 ile FLA ve ActionScript dosyaları oluşturabilirsiniz. Flash Professional 8 de ise bunlara ek olarak form uygulamaları, sunumlar ve Flash projeleri gibi dokümanlar da oluşturabilirsiniz. 3. Yeni dokümanınız açıkken arka zemine (Stage e) tıklayın. Document Properties (Doküman Özellikleri) iletişim kutusunu kullanarak Stage in boyutlarını 780 x 520 piksel yapın. Properties (Özellikler) denetçisi şimdi sizin için de gerçek bir anlam kazanacak. Dokümanınızı açıp Stage e tıkladıktan sonra Properties denetçisine bakın, bir Size (Boyut) düğmesi göreceksiniz. Bu düğmeye bastığınız anda Document Properties (Doküman Özellikleri) iletişim kutusu karşınıza gelecek. Bu iletişim kutusunda genişliği (width) 780, yüksekliği (height) de 520 piksel yapın. Title (Başlık) alanına Tech Bookstore Home yazın. Description (Açıklama) alanına kısa bir tanım girin; örneğin şöyle bir şey yazabilirsiniz: Tech Bookstore bilgi teknolojilerine ilişkin konularda referans ve eğitim amaçlı kitaplar sunar. Title (Başlık) ve Description (Açıklama) alanları meta bilgilerdir (metaveri) ve bu yönleriyle HTML deki meta etiketlere (metatag) benzerler. Amaçları, Web sitenizin (Flash SWF dosyalarının ve diğer öğelerin) arama motorları tarafından bulunma ihtimalini artıran bilgilerin tutulmasına imkân sağlamaktır. Pencereyi kapatmak için OK düğmesine basın. 4. Properties denetçisinde, dokümanınızın frame rate (kare gösterim hızı) değerini 21 fps olarak değiştirin. Bunu biraz önce kapattığınız Document Properties iletişim kutusunda iken de yapabilirdiniz; ancak böyle durumlarda ilk tercihiniz Properties denetçisi olsun. 8 DERS 1

28 Frame rate (kare gösterim hızı) değeri videonun nasıl görüneceğini etkiler. Frame rate ne kadar yüksek olursa animasyonun akışı o kadar pürüzsüz ve yumuşak olur. Ancak yüksek frame rate değerlerinin son kullanıcı tarafında daha fazla işlemci gücü gerektireceğini de aklınızdan çıkarmayın. Varsayılan frame rate değeri 12 fps dir (frame per second her saniyede gösterilen kare adedi). 10 fps den daha düşük değerler insan gözü tarafından fark edilir ve düşük bir gösterim kalitesine yol açabilir. Gösterim hızını 21 fps yaparak animasyonları daha akıcı bir şekilde görebiliriz. Benzer şekilde 18, 24 veya 29 gibi değerler de verebilirsiniz. Yine Properties denetçisinde yer alan diğer kontrol ve araçları kullanarak arka zemin rengini, hedeflediğiniz Flash Player sürümünü ve Flash Lite ayarlarını da değiştirebilirsiniz. (Flash Lite, Flash Player ın cep telefonu ve PDA gibi cihazlarda çalışan mobil sürümüdür.) Publish Settings (Yayınlama Ayarları) penceresinde Flash Player sürümü olarak Flash Lite 1.0 veya Flash Lite 1.1 seçilmemişse Device Settings (Cihaz Ayarları) düğmesi silik görünecek, işlevsel olmayacaktır. (Flash Lite 1.0 veya Flash Lite 1.1 seçimini sadece Flash Professional 8 altında yapabilirsiniz.) Çalışmanız, Flash 8 den önceki bir Flash Player sürümüne yönelikse Publish Settings düğmesine basın ve hedeflediğiniz sürümü hemen şimdi, dokümanınıza içerik eklemeye başlamadan önce belirtin. Bu sayede sadece Flash Player 8 e özel olan ve eski sürümlerce desteklenmeyen içeriklerin kazara uygulamanıza girmesini engellemiş olursunuz. 5. File > Save As (Dosya > Farklı Kaydet) komutunu seçin ve dosyayı bookstore1.fla adıyla kaydedin. Dosyayı kaydetmeden önce masaüstünde TechBookstore adlı bir klasör oluşturun. Tüm dosyalarınızı bu klasöre kaydedeceksiniz. Dosyanızı bookstore1.fla adıyla buraya kaydedin. Bundan sonra dosyanızda yaptığınız her önemli değişikliğin ardından dosya ismindeki sayıyı da değiştirin (2, 3, gibi). 6. File > Close (Dosya > Kapat) komutunu seçin ve henüz kaydetmiş olduğunuz dokümanı kapatın. Ancak çalışmanızı sıradaki uygulamalarla sürdürmek istiyorsanız dokümanınızı kapatmak zorunda değilsiniz. TEMELLER 9

29 Paneller Birkaç sayfa önce panellerden kısaca söz etmiştik. Son yaptığımız uygulamada Stage in boyutunu ve dokümanın frame rate değerini değiştirmek için kullandığımız Properties denetçisi de aslında bir paneldir. Geliştirme ortamındaki panellerin özelliklerini ve bölümlerini öğrenmeniz Flash ı etkin bir şekilde kullanabilmeniz açısından önem taşır. Şimdi yapacağımız uygulamada ihtiyaç duyduğunuz panelleri açmayı, taşımayı ve kullanmayı öğreneceksiniz. Sonraki derslerimizde de çalışmanızı değiştirmek ve geliştirmek için farklı panellerle tanışacaksınız. 1. File > Open (Dosya > Aç) komutunu verin ve sabit diskinize kaydetmiş olduğunuz bookstore1.fla dokümanını açın. Eğer bir önceki uygulama sonrası bookstore1.fla dosyasını kapatmadıysanız bu adımı pas geçebilirsiniz. Daha önce Flash Professional 8 deki özellikleri kullanarak düzenlediğiniz bir dosyayı Flash Basic 8 ile açarsanız Flash Professional 8 de varolan düzenleme özelliklerini kullanamazsınız. Bir dosyayı düzenlemenin en iyi yolu o dosyayı oluşturduğunuz Flash sürümünü kullanmak olacaktır. 2. File > Save As (Dosya > Farklı Kaydet) komutunu verin ve bookstore1.fla dosyasını bookstore2.fla olarak kaydedin. Önemli değişiklikler yapacağımız için dosyayı farklı bir isimle kaydediyoruz. Bu tekniğe alışmanız sizin için de çok faydalı olacaktır; böylece ihtiyaç duyduğunuzda çalışmanızın önceki sürümlerine kolayca ulaşabilirsiniz. 3. Window (Pencere) menüsünü kullanarak History (Geçmiş) panelini açın. Flash 8 i açtığınızda varsayılan olarak gelen paneller arasında çok faydalı bir panel olan ve yapmış olduğunuz düzenlemelerin kaydını tutan History (Geçmiş) paneli bulunmaz. History panelinin tutacağı kayıtların sayısı sizin tercihinize bağlıdır; dersin ilerleyen bölümlerinde bu noktaya tekrar döneceğiz. History panelini açmak için Window > Other Panels > History (Pencere > Diğer Paneller > Geçmiş) komutunu verin. Window menüsünün altında yer alan ve bir kısmı Other Panels grubunda toplanmış olan panellerin her biri gayet faydalı özellikler taşır. Genişletme / Toparlama oku Tutacak Options (Seçenekler) menüsü Panel başlık çubuğu 10 DERS 1

30 Window menüsünden bir panel seçtiğiniz zaman bu panel çalışma alanınızda rasgele bir yerde açılacak, açık olan diğer panellerin yanında sabit olmayacaktır. Yeni açtığınız paneli diğer panellerin yanına sabitlemek için panelin en sol üst köşesindeki (panel başlık çubuğunun hemen solundaki) noktaların üstüne tıklayın ve paneli istediğiniz yere sürükleyip bırakın. Sürükleme esnasında panelin sabitlenebileceği alanlar siyah bir çizgi ya da çerçeve ile size gösterilecektir. Bir panelin başlık çubuğunda yer alan minik oka ya da başlığın kendisine tıklayarak paneli aşağıya doğru açabilir ve yeniden tıklayarak eski durumuna getirebilirsiniz. Ayrıca tüm panellerde başlık çubuğunun en sağındaki düğmeye tıklanarak açılan bir Options (Seçenekler) menüsü vardır, bu menünün içeriği her panel için farklıdır. (Başlık çubuğunun en sağındaki düğmeyi görmeniz için panelin aşağıya doğru açılmış olması gerekir.) 4. Paneli diğer panellerin yanına taşıyın ve sabitleyin. Bu adımı yukarıda tarif ettiğimiz şekilde uygulayın. Sabitlediğiniz panellerin sıralarını da aynı şekilde değiştirebilirsiniz. 5. History panelini sadece başlık çubuğu görünür olacak şekilde kısaltın. Başlık çubuğundaki boş bir noktaya, minik oka ya da başlığın kendisine tıklayarak panelleri aşağıya doğru açabilir veya sadece başlık çubuğu görünür olacak şekilde kısaltabilir / kapatabilirsiniz. Panelin başlık çubuğundaki herhangi bir yere çift tıklayarak da panelleri küçültebilir / toparlayabilirsiniz. 6. Window > Components komutunu vererek Components (Bileşenler) panelini açın ve ilgili yere sabitleyin. Window menüsüne baktığınızda panelleri çoğu zaman klavye kısayolları ile de açabileceğinizi görebilirsiniz. Örneğin Components panelini açmak için Windows altında Ctrl+F7, Mac OS X altında da Cmd+F7 kısayollarını kullanabilirsiniz. TEMELLER 11

31 7. Components (Bileşenler) panelinin Options (Seçenekler) menüsünü açın. Her panelin kendisine ait bir Options (Seçenekler) menüsü vardır. Bu menüler her panel için farklı içeriklere sahip olsa da Help (Yardım), Maximize Panel (Panelin Boyunu Maksimuma Çıkar) ve Close Panel (Paneli Kapat) komutları tümünde ortaktır. 8. Components panelindeki User Interface (Kullanıcı Arabirimi) kategorisini açın ve Stage e bir Button (Düğme) bileşeni taşıyın. Bileşenler kullanıma hazır Flash öğeleridir ve her birinin farklı bir görevi vardır. Ders 8 de bileşenleri daha detaylı bir şekilde inceleyeceğiz. Şimdilik sadece Stage üzerinde bir bileşenimiz olsun istiyoruz. 9. Window menüsünden Align (Hizala) panelini açın ve sabitleyin. Ana Flash ekranının en solunda, Tools altında yer alan siyah ok (Selection Tool Seçim Aracı) ile Stage içinde bulunan düğmeyi seçin. Ardından Align panelini kullanarak düğmeyi Stage içinde ortalayın. Align (Hizala) panelindeki düğmeleri kullanarak Stage de yer alan öğeleri kendi aralarında veya Stage e göre hizalayabilirsiniz. Öğeleri Stage e göre hizalamak istiyorsanız önce Align panelindeki To stage düğmesini aktif (parlak) yapın. Öğeleri hizalamak için panelin en üst sırasında yer alan düğmeleri kullanın. Yatay olarak ortala Sağa hizala Sola hizala Aşağıya hizala Stage e göre hizala Yukarıya hizala Dikey olarak ortala Stage içinde duran düğmeniz seçili ve paneldeki To stage (Stage e göre hizala) düğmesi de aktifken Align horizontal center (Yatay olarak ortala) ve Align vertical center (Dikey olarak ortala) düğmelerine basarsanız düğmeniz Stage in merkezine yerleştirilmiş olur. 10. İhtiyacınız oldukça diğer panelleri de Window menüsünden açın. Kitabımız boyunca Actions (Eylemler) panelini sık sık kullanacağız, eğer açık değilse şimdi bu paneli de açın. Panelleri ekranın istediğiniz bölgesine sabitleyebilirsiniz. Sayfa yerleşimini dilediğiniz şekilde ayarladıktan sonra kaydedebilir ve böylece her seferinde aynı sayfa yerleşimini kullanabilirsiniz. Bir sonraki adımda bunu nasıl yapacağımızı göreceğiz. 12 DERS 1

32 11. Window > Workspace Layout (Çalışma Alanı Yerleşimi) > Save Current (Mevcut Durumu Kaydet) komutuyla panel yerleşimini kaydedin. Bu komutun ardından Save Workspace Layout (Çalışma Alanı Yerleşimini Kaydet) kutusu açılır. Name (İsim) alanına TechBookstore yazın ve OK düğmesine tıklayın. Böylece çalışma alanının mevcut yerleşimini en son açtığınız paneller de korunacak şekilde kaydetmiş oldunuz. Örneğin başka bir anda varsayılan yerleşim düzeniyle çalışıyorken Window > Workspace Layout > TechBookstore seçimini yaparak TechBookstore yerleşim düzenine kolayca geçiş yapabilirsiniz. Bu yerleşim düzeninde yapacağınız diğer değişikliklerin de kalıcı olması için yerleşim düzenini yine aynı isimle kaydetmeniz yeterlidir. Panel yerleşim düzenlerini silmek veya yeniden adlandırmak için Window > Workspace Layout > Manage (Yönet) komutunu kullanabilirsiniz. Bu komutla gelen kutuda kullanıcı tarafından kaydedilmiş olan tüm yerleşim düzenlerini görebilir, yeniden isimlendirebilir ya da silebilirsiniz. Bir sonraki uygulamamız Timeline ve kareler (frame ler) ile ilgili. Çalışmanızı kaydetmeyi unutmayın. Timeline (Zaman Çizgisi) ve Kareler SWF dosyalarındaki her şey bir Timeline (zaman çizgisi) üzerine yerleştirilir. Dosya içeriğinin (karelerin) Timeline üzerinde nasıl sıralanmış oldukları dosyanın (animasyonun) nasıl görüntüleneceğini belirler. Timeline sadece tek bir kare de içerebilir. Oynatım kafası (playhead) Timeline boyunca ilerletilerek animasyonun izlenmesi sağlanır. Kare gösterim hızı (frame rate) örneğin 12 fps ise saniyede 12 kare görüntülenir; yani her kare ekranda 1/12 saniye kalır ve oynatım kafası diğer kareye geçer. Timeline üzerinde içeriğin çizgisel olmayan bir şekilde de dağıtılabilmesi için katmanlar (layer) kullanılır. Katmanlar birbirleri üzerine bindirilebilir ve her biri aynı Timeline daki diğer katmanlardan daha farklı sayıda kare içerebilir. Bir sonraki uygulamada katmanları daha yakından tanıyacaksınız. Anahtar kareler (keyframe) Timeline üzerinde bir değişikliğin olduğu yerlerdir. Örneğin yeni bir içeriğin eklenmesi ya da animasyonun değişmesi gibi olaylar anahtar karelerde gerçekleşir. Anahtar kareler ayrıca ActionScript ve ses de içerebilirler. Anahtar karelerin arasında yer alan karelerde değişiklik tanımlanmaz; bir değişiklik tanımlanırsa da o kare artık bir anahtar kareye dönüşmüş olur. Flash dokümanlarında genellikle birden fazla Timeline bulunur. Flash dokümanınızdaki minik bir film pek çok karenin yanı sıra çok sayıda Timeline da içeriyor olabilir. Birbirleri içine geçmiş çok sayıda Timeline ın aynı çalışma içinde nasıl varolabildiğini Ders 4 te öğreneceksiniz. TEMELLER 13

33 Şimdiki uygulamamızda Timeline ı kullanmayı, kareleri seçmeyi, taşımayı ve silmeyi öğreneceğiz. Çalışmamızı yine bookstore2.fla dosyası üzerinde yapacağız. 1. Timeline açık değilse Window > Timeline komutu ile onu açın. Flash ı başlattığınızda varsayılan olarak açılan Timeline paneli dokümanınızın en üstünde, düzenleme çubuğunun hemen altında yer alır. Paneli göremiyorsanız dokümanın sol üst köşesindeki Timeline düğmesine tıklayarak ya da Window > Timeline komutunu vererek açabilirsiniz. Katman Katman ismi Katmanları kilitle / kilidi aç Katmanları taslak olarak göster Oynatım kafası Kare görüntüleme menüsü Katmanı sil Katmanları göster / gizle Katman klasörü ekle Hareket kılavuzu ekle Katman ekle Timeline aslında iki panelden oluşur: Farklı içeriklerin aynı anda kullanılabilecek şekilde düzenlenmesine imkân veren Layers (Katmanlar) paneli ve kareler ile katmanlardan meydana gelen Timeline ın kendisi. Bir Flash dokümanı oluşturduğunuz zaman Layers panelinde Layer 1 adında bir katman oluşturulur ve Timeline a bu katman için bir anahtar kare eklenir. Kırmızı oynatım kafası başlangıçta 1 numaralı konumdadır. Timeline ın üst kısmında yer alan sayılar karelerin numaralarını temsil eder. Kareler numaraları veya etiketleri (label) ile ayırt edilirler. Karelere etiket vermeyi biraz sonra öğreneceğiz. 14 DERS 1

34 2. Katman isimlerini görmek için Timeline ın genişliğini biraz azaltın. Bunun için katmanların yer aldığı paneli karelerin bulunduğu panelden ayıran sınır çizgisini biraz sağa çekmemiz gerekiyor. Farenizi bu sınır çizgisinin üzerine getirdiğinizde fare imleci çift yönlü ok şeklini alır, bu noktada tıklayıp sınır çizgisini sağa ya da sola taşıyabilirsiniz. Yeni katmanlar ekledikçe Layers panelinin içeriği kaydırılabilir bir hale gelir. Bu panelin uzunluğunu artırmak için Timeline panelini en alt kenarından tutup aşağıya doğru çekebilirsiniz. Böylece kaydırma yapmak zorunda kalmadan Layers panelinde daha fazla katmanı aynı anda görebilirsiniz. 3. Timeline ın kare görüntüleme menüsünü kullanarak karelerin Timeline üzerinde nasıl görüneceklerini ayarlayabilirsiniz. Timeline ın sağ üst köşesinde (numaraların bulunduğu çubuğun sağ ucunda) yer alan düğmeye basarak kare görüntüleme menüsünü açabilirsiniz. Buradaki seçenekler karelerin Timeline da nasıl görüntüleneceğini belirler. Tiny (Çok dar), Small (Dar), Normal, Medium (Orta) ve Large (Geniş) seçenekleri karelerin genişliğini belirlemek için kullanılır. Short (Kısa) komutu karelerin boyunu kısaltır. Tinted Frames (Renklendirilmiş Kareler) komutu da bazı karelerdeki gri arka zeminlerin daha renkli bir görünüme kavuşmasını sağlar. Dilerseniz karelerde bulunan içeriğin ön izlemesini de yapabilirsiniz. Preview (Önizleme) komutu Timeline daki her karenin içeriğini görmenizi sağlar. Preview in Context komutu ise tüm dolu ve boş karelerin küçük resimler (thumbnail) halinde izlenebilmesini sağlar; bu özellik animasyon hazırlarken çok işinize yarayabilir çünkü animasyonun zamana bağlı olarak nasıl ilerlediğini görmenize imkân verir. Şimdiki çalışmamızda kareleri Normal boyutta görüntüleyeceğiz ve Tinted Frames komutunu seçili olarak bırakacağız. TEMELLER 15

35 4. Insert (Ekle) > Timeline > Keyframe komutuyla Layer 1 üzerinde yeni bir anahtar kare oluşturun. Yeni bir Flash dokümanı açtığınızda Layer 1 katmanında 1 numarada boş bir anahtar kare bulunur. Bir önceki uygulamada Stage e bir Button (Düğme) bileşeni taşıdığınızda bu boş anahtar kare (içi boş daire) dolu bir anahtar kare (içi dolu daire) olmuştu. Timeline a içerik ekleyebilmeniz için karenin ya da anahtar karenin seçili ve katman kilidinin de açık olması gerekir. Seçmiş olduğunuz katmanda hiç kare yoksa öncelikle üzerine içerik taşıyabileceğiniz bir anahtar kare oluşturmalısınız. Kare ve anahtar kare oluşturmak için menü komutlarını ya da klavye kısayollarını kullanabilirsiniz. Bir kare konumuna sağ tıkladığınızda açılan menüden Keyframe, Blank Keyframe (boş anahtar kare) veya normal Frame ekleyebilirsiniz. Klavye kullanmayı tercih ediyorsanız anahtar kareyi F6, boş anahtar kareyi F7 ve normal bir kareyi de F5 tuşuyla ekleyebilirsiniz. Insert menüsünü kullanarak Timeline a eklediğiniz anahtar kare Layer 1 in 2 numaralı konumuna yerleştirilir. Önceki anahtar karede bulunan grafiğin bu yeni anahtar kareye de kopyalanmış olduğuna dikkat edin. Bu anahtar kareler her ne kadar aynı katman üzerinde bulunsalar da birbirlerinden ayrı öğelerdir. 2 no lu anahtar karede değişiklik yaparsanız 1 no lu anahtar kare bundan etkilenmez. Timeline a boş bir anahtar kare eklemeniz halindeyse önceki anahtar karenin grafikleri buna kopyalanmaz. Bir kare eklemek için Layer 1 üzerinde 3 no lu konumu seçin ve klavyeden F5 tuşuna basın. Bu işlemle içeriğin zamana yayılmasını sağlayabilirsiniz. İçerik değişmez ancak görüntülenme süresi artar. 5. Farenizi ve Shift tuşunu birlikte kullanarak kareleri seçin, taşıyın ve silin. Yukarıdaki adımda üzerine tıklayarak bir kareyi seçebileceğinizi gördünüz. Çok sayıda kareyi aynı anda seçmek istiyorsanız ilk kareye tıklayın, klavyeden Shift tuşunu basılı tutun ve son kareye tıklayın, böylece tıklamış olduğunuz kareler ve bu ikisinin arasında kalan tüm kareler seçilmiş olacaktır. Çok sayıda kareyi bütün bir sıra halinde değil de ayrı ayrı seçmek istiyorsanız karelere tıklarken klavyeden Ctrl ya da Command tuşunu basılı tutun. Timeline a eklenmiş olan tüm kareleri seçmek istiyorsanız bir kare üzerine sağ tıklayın ve Select All Frames (Tüm Kareleri Seç) komutunu verin. Boş anahtar kare Kare Anahtar kare (dolu) 16 DERS 1

36 Layer 1 de 2 ve 3 no lu kareleri seçin ve bunları farenizle 4 ve 5 no lu karelere sürükleyip bırakın. Böylece bu iki kareyi yeni bir konuma (farklı bir zaman dilimine) taşımış oldunuz. Bu işlemin ardından 1 no lu karenin 3 no lu kareye kadar genişlediğini fark edeceksiniz. Kareleri taşımak yerine kopyalamak istiyorsanız sürükleme esnasında Alt ya da Option tuşlarını basılı tutun. Timeline da bir anahtar kareyi seçtiğinizde bu anahtar karenin taşıdığı tüm içerik de Stage de seçili hale gelir. Stage üzerinde bir öğeyi seçtiğiniz zaman da öğenin bulunduğu anahtar kare Timeline da siyah arka zemin rengi ile vurgulanır. 6. Button öğesini ve kareleri silin. Şimdilik bir düğmeye ihtiyacımız yok, o yüzden Stage deki Button bileşenini seçip klavyeden Backspace ya da Delete ile silebiliriz. Stage de bulunan öğeleri silmek için öğeye sağ tıklayıp Cut (Kes) komutunu da verebiliriz. Cut komutu istenilen yere yapıştırılabilsin diye öğeyi hafızaya alır ve panoda (Clipboard) tutar. Daha sonra başka bir öğeyi Cut ile keserseniz panoda bekleyen eski öğe tamamen silinir ve onun yerini en son kestiğiniz öğe alır. Delete ile sildiğiniz bir öğeyi herhangi bir yere yapıştıramazsınız ancak menüden Edit (Düzenle) > Undo (Geriye Al) veya klavyeden Ctrl+Z (Macintosh ta Command+Z) ile silme işlemini geri alabilirsiniz. Kareleri silmek için Delete ya da Backspace tuşlarını kullanamayız. Bu tuşlarla bir kare veya anahtar karenin içeriğini silebilir ancak kendisini silemeyiz. Kareleri silmek için Timeline da 1 no lu kare hariç tüm boş kareleri seçin ve sağ tıkladığınızda açılan menüden Remove Frames komutunu verin. Alternatif olarak ana menüden Edit > Timeline > Remove Frames veya klavyeden Shift+F5 tuşlarını kullanabilirsiniz. 7. Doküman üzerinde yaptığınız değişiklikleri kaydedin. Katmanlar Artık Timeline ı daha yakından tanıdığımıza göre katmanları detaylı bir şekilde incelemeye başlayabiliriz. Katmanların Timeline üzerinde dizildiklerini ve birbirleri üstüne konulabileceklerini öğrenmiştiniz. Timeline üzerindeki Insert Layer (Katman Ekle) düğmesini kullanarak veya ana menüden Insert > Timeline > Layer komutunu vererek çalışmanıza yeni katmanlar ekleyebilirsiniz. TEMELLER 17

37 Katmanlar dokümanlarınızda kullanacağınız farklı türlerdeki bileşenleri etkin bir şekilde organize edebilmenizi sağlarlar. Derinlik hissi ve perspektif vermekten seslerin ve ActionScript kodlarının karelerde tutulabilmesine kadar pek çok işin üstesinden gelmenize yardımcı olurlar. Katmanlarınıza isim verirken bu ismin mümkün olduğu ölçüde katman içeriğini tanımlayan bir şey olmasına dikkat etmenizde fayda vardır. Örneğin sabit metin içeren bir katmana katman_1 gibi hiç açıklayıcı olmayan bir isim vermek yerine sabit_metin gibi daha anlamlı bir isim vermelisiniz. Alttaki katmanın içeriği Üstteki katmanın içeriği Katmanlara vereceğiniz adlar Flash için bir şey ifade etmez ancak anlamlı isimler seçmek tasarım sürecinde en çok sizin işinizi kolaylaştırır. Flash ın ilginç yanlarından biri de farklı türlerde katmanlara sahip olmasıdır. Tek görevi içeriği göstermek olan normal katmanlar, diğer işlevlerinin yanı sıra izleme amacıyla kullanılan kılavuz katmanlar, bir animasyonun verilen bir yolu izlemesini sağlayan hareket kılavuzu katmanları ve geçişler gibi etkileyici fonksiyonları olan maske katmanlar Flash ın sunduğu katman türleri arasındadır. Kılavuz katmanlar SWF dosyası ile yayınlanmaz ve hareket kılavuzları da yayınlanan dosyada görünmez durumda bulunur. Tüm bu katmanları organize etmek ve Layers panelindeki alanın karışık bir şekilde dolmasını önlemek içinse katman klasörlerini kullanabilirsiniz. 18 DERS 1

38 Şimdi yapacağımız uygulamada katman ekleme ve isimlendirmeyi, katmanların özelliklerini değiştirmeyi öğreneceğiz. Katmanları organize etmek için katman klasörlerini nasıl kullanabileceğimizi de göreceğiz. Bu çalışmamızda da bookstore2.fla dosyasını kullanmaya devam ediyoruz. 1. Timeline açık değilse ana menüden Window > Timeline komutuyla ya da doküman penceresinde sol üstte bulunan Timeline düğmesiyle onu açın. 2. Layer 1 adlı katmanın ismini background olarak değiştirin. Katman ismine çift tıkladığınızda ismin olduğu alan düzenleyebileceğiniz bir metin alanına dönüşür. Buraya background yazın ve Enter tuşuna basın. Katman isminin hemen solunda duran minik sayfa yaprağı simgesine çift tıklarsanız Layer Properties (Katman Özellikleri) penceresi gelir. Bu pencerede sadece katman ismini değil katman türünü de değiştirebilirsiniz. 3. Insert Layer (Katman Ekle) düğmesi ile yeni bir katman ekleyin ve katmanı labels (etiketler) olarak isimlendirin. Yeni bir katman eklediğinizde Flash bu katmana otomatik olarak Layer 2 gibi bir isim verir. İsimde gördüğünüz sayı sadece o ana kadar kaç katman açmış olduğunuzu gösterir, bunun dışında bir anlamı yoktur. Yeni bir katman eklediğinizde ismini o anda değiştirmeniz ve katmana açıklayıcı bir isim vermeniz sonrası için çok faydalı olacaktır. Katmanın üstüne çift tıklayın ve ismini labels olarak değiştirin. Şu anda bu katman aktif (seçili) durumdadır. Stage üzerinde oluşturulan ya da buraya taşınan her şey aktif katmana ait bir öğe olur. Layers panelinde bir katmanı seçtiğiniz zaman katmanın Stage üzerinde yer alan tüm içeriği de seçilmiş olur. Aktif katmanda, katman isminin hemen sağında küçük bir kurşun kalem simgesi yer alır. Şimdi background katmanına tıklayın, kurşun kalemi bu kez orada göreceksiniz. Stage e bıraktığınız ya da orada oluşturduğunuz her şey aktif katmana yerleştirilmiş olur. Yaptığınız değişikliklerin etkin olduğu katman aktif katmandır. TEMELLER 19

39 4. Yeni labels katmanına bir kare etiketi ekleyin. Bir kareyi belirtmek için numara yerine etiket kullanmak örneğin bir ActionScript kodu içinde o kareye bir çağrı yapılacaksa işinizi oldukça kolaylaştırır. Sadece anahtar karelerin bir etiketi olabilir, yani bir kare etiketi eklemek istiyorsanız öncelikle elinizde bir anahtar kare olmalı. Etiket vereceğiniz anahtar kareyi Timeline da seçin. Properties denetçisinin sol üst köşesinde içinde silik bir şekilde <Frame Label> yazan bir metin alanı vardır. Bu alana home yazın ve Enter a basın. Kare etiketi (Frame Label) <Frame Label> metin alanı Label Type (Etiket Türü) menüsü Kare etiketlerinin üç tipi vardır: Biraz önce kullandığınız Name (İsim), kare hakkında bilgi tutmak için kullanılan Comment (Açıklama) ve şimdilik sadece Internet Explorer altında çalışan, kullanıcıların bu kareleri favorilerine ekleyebilmesine ve tarayıcıdaki Geri / İleri tuşlarıyla SWF dosyanız üzerinde gezinebilmesine imkân veren Anchor (Çapa). 5. Lock Layer düğmesi ile labels katmanını kilitleyin. Layers panelindeki kilit simgesinin alt hizasında bulunan küçük siyah noktalara tıklayarak ilgili katmanı kilitleyebilirsiniz. Katmanı kilitlediğinizde siyah noktanın yerini kapalı bir kilit simgesi alır ve Stage den bir şey taşıyarak ya da başka bir şekilde katman üzerinde herhangi bir değişiklik yapılamaz. Artık kilit simgesine dönüşmüş olan noktaya bir kez daha tıklayarak kilidi açabilirsiniz. 20 DERS 1

40 Bir katmana sağ tıklar ve Lock Others (Diğerlerini Kilitle) derseniz o anda üzerinde bulunduğunuz katman haricindeki tüm katmanlar kilitlenir. Katmanları kilitlemek katman içeriklerini kazara başka bir katmanın Stage ine koymanızı ve bu yüzden animasyonun bozulmasını önler, bu bakımdan çok faydalıdır. Ayrıca Layers panelindeki göz simgesinin alt hizasında bulunan küçük siyah noktalara tıklayarak katmanların gizlenmesini de sağlayabilirsiniz. Bir katman gizlendiği zaman düzenlenemez ve siyah noktanın yerini kırmızı bir X sembolü alır. 6. Insert Layer Folder (Katman Klasörü Ekle) düğmesine tıklayarak bir katman klasörü oluşturun. Klasörler ilgili katmanları bir arada tutarak daha düzenli bir içerik yapısı kurmanızı sağlarlar. background katmanını seçin ve Insert Layer Folder (Katman Klasörü Ekle) düğmesine basın (Layers panelinin altında, soldan üçüncü düğme). background katmanının üstünde Folder 1 isimli bir katman klasörü açılacaktır. Klasörün ismine çift tıklayın ve klasöre graphics ismini verin. Klasörün içinde başlangıçta bir şey yoktur. Şimdi background katmanını klasörün içine taşıyın; katmanın ismi hafif sağa doğru kayarak katmanın artık bir klasörün içinde olduğunu belli eder. Artık klasörün hemen solunda yer alan minik okla klasörü açabilir ya da kapatabilirsiniz. 7. Önce yeni bir katman, sonra da Rectangle (Dikdörtgen) aracı ile Stage üzerinde yeni bir şekil oluşturun. background katmanını seçin ve Insert Layer düğmesine basarak onun üzerinde yeni bir katman oluşturun. Bu katmana temp ismini verin. Flash ana ekranında sol tarafta Tools (Araçlar) panelini göreceksiniz. Açık değilse Window > Tools komutu ile bu paneli açabilirsiniz. Şimdi Tools panelinden Rectangle (Dikdörtgen) aracını seçin ve yeni katmana dilediğiniz boyut ve şekilde bir dikdörtgen çizin. Bunun için Rectangle aracını seçmiş durumda iken Stage in üzerine tıklayın ve fare imlecini çapraz bir yönde sürükleyin. TEMELLER 21

41 Sürükleme esnasında, oluşacak olan dikdörtgenin sınırlarını görebilirsiniz. İstediğiniz şekli elde edince dikdörtgenin tamamlanması için farenin düğmesini bırakın. Oval Tool (Elips Aracı) Rectangle Tool (Dikdörtgen Aracı) 8. background katmanında bir elips oluşturun. background katmanını ve Oval aracını seçin, ardından Stage üzerine tıklayın ve fare imlecini sürükleyip bırakın. Dikdörtgenin elipsin üstünde kaldığı dikkatinizi çekti mi? Bunun sebebi elipsin daha alttaki bir katmanda bulunması. 22 DERS 1

42 9. background ve temp katmanlarının yerini değiştirin. Katmanların sırasını değiştirmek için yapmanız gereken tek şey Layers panelinde katmanlara tıklamak ve onları aşağı veya yukarı yönde sürüklemektir. temp katmanına tıklayın ve onu background katmanının altına doğru sürükleyin. Gri noktalı kalın çizgi background katmanının altına geldiğinde farenin düğmesini bırakabilirsiniz. Bu değişikliğin ardından dikdörtgen ve elipsin Stage üzerindeki sıralarının da değiştiğine dikkat edin. Katmanların içeriği birden fazla boyuta dağıtmak için nasıl kullanılabileceğini ve katman sıralamasının etkilerini burada görüyorsunuz. Mevcut projemizde grafiklerle işimiz olmadığı için grafikleri artık silebilirsiniz. background katmanındaki grafikleri silmek için bu katmanın 1 no lu karesini seçin, böylece background katmanındaki tüm içerik seçilmiş olur. Ardından Backspace ya da Delete tuşuna basın. 10. temp katmanını silin. Bir katmanı silmek için Layers panelinden katmanı seçin ve panelin sağ alt köşesindeki çöp kutusu simgesine tıklayın. temp katmanını seçip çöp kutusu düğmesine bastığınızda hem katmanın kendisi hem de katmandaki tüm içerik silinecektir. Katman ismine sağ tıklayıp Delete Layer seçeneğine tıklayarak da katmanı silebilirsiniz. 11. Çalışmanızı kaydedin. Tercihlerinizi Belirleyin Tercihlerin Flash ta önemli bir yeri vardır. Basit düzenleme işlemlerinden vektörel grafiklere ve ActionScript ayarlarına kadar pek çok şeyi tercihler ile kontrol edebilirsiniz. Flash 8 tercihlerinizi biraz sonra daha yakından tanıyacağımız Preferences iletişim kutusundan yapabilirsiniz. 1. Windows altında Edit > Preferences, OS X altında Flash 8 > Preferences komutuyla Preferences iletişim kutusunu açın. Preferences (Tercihler) iletişim kutusu iki bölüme ayrılmıştır. Sol tarafta temel tercih kategorileri bulunur. Sağ tarafta ise solda seçilmiş olan kategoriye ait ayarlar yer alır. Preferences iletişim kutusu açıldığında sol tarafta varsayılan olarak General (Genel) kategorisi seçilidir. Dosya yazımına ilişkin birkaç temel kontrol içeren General kategorisinde iki farklı Undo (Geriye Al) seçeneği vardır. Soldaki ikinci kategori olan ActionScript kategorisi ActionScript penceresindeki yazı tipi ve yazı tipi boyutuna ilişkin ayarları yapmanızı sağlar. Girinti ayarlarına ve sentaks renklendirme seçeneklerine de bu sayfadan ulaşabilirsiniz. Üçüncü temel kategori olan Auto Format (Otomatik Biçimlendirme) kategorisi de ActionScript kullanımına yöneliktir. Auto Format sayfasında girilen TEMELLER 23

43 tercihlere göre, ActionScript penceresi yazılmakta olan kodun görünümünü otomatik olarak değiştirebilir; burada amaç kodun daha rahat okunabilmesini sağlamaktır. Vektörel nesne çizimine ilişkin araç tercihleri Drawing (Çizim) kategorisinde, yazı tipi eşleme ve metin akışına ilişkin ayarlar da Text (Metin) kategorisinde bulunur. Warnings (Uyarılar) kategorisini kullanarak da hangi işlem ya da beklenmedik durumlarda Flash ın sizi hata mesajlarıyla uyarmasını istediğinizi belirleyebilirsiniz. Preferences iletişim kutusunda yer alan kategorileri inceleyerek yapabileceğiniz tüm ayarları görebilirsiniz. 2. Preferences > General sayfasına girin ve Document-level Undo (Doküman Düzeyinde Geri Al) değerini 150 olarak değiştirin. Flash Basic 8 ve Flash Professional 8 de iki farklı geriye alma tekniği vardır: Document-level Undo, seçimler dahil doküman üzerinde yapılan her değişikliği tek bir geçmiş işlemler listesinde tutar. Object-level Undo (Nesne Düzeyine Geri Al) ise düzenlediğiniz her nesne için ayrı bir geçmiş işlemler listesine sahiptir. Object-level Undo tekniğinin avantajı Stage üzerinde yer alan diğer nesnelere hiç müdahale etmek zorunda kalmadan tek bir nesne üzerinde yapılmış olan değişiklikleri geri alabilmenize imkân tanımasıdır. 24 DERS 1

44 General sayfasında bu iki Undo metodu arasında geçiş yaptığınız zaman ekrana bir uyarı penceresi gelir ve size bu geçişin o ana kadar tutulan geçmiş işlemler listesinin silinmesine yol açacağı, ancak dosyanızı etkilemeyeceği hatırlatılır. 150 adımlık bir geriye alma düzeyi bazı tasarımcılar için biraz yüksek olabilir. Sizin için en uygun değerin hangisi olduğunu deneyim kazandıkça öğreneceksiniz. Bu noktada unutmamanız gereken şey, daha yüksek değerlerin sistem kaynaklarını daha acımasızca tüketebileceğidir. Bu da yaptığınız işe ve sisteminize bağlı olarak performans kayıplarına yol açabilir. 3. Show Start Page (Başlangıç Sayfasını Göster) şeklindeki On launch (Açılış) seçeneğini istiyorsanız Last documents open olarak değiştirin. Bu tercihi yaparsanız Flash ı başlattığınızda şu ana kadar sürekli gördüğünüz Start (Başlangıç) sayfası gelmez ve doğrudan en son çalıştığınız doküman(lar) açılır. Bilgisayarınızı başkalarıyla paylaşıyorsanız bunu tavsiye etmeyiz ancak sadece siz kullanıyorsanız uygulamaya daha hızlı girmeniz bakımından bu tercih faydalı olabilir. Şimdilik diğer tercihleri değiştirmeyin ve OK düğmesine tıklayarak Preferences iletişim kutusunu kapatın. 4. Windows altında Edit > Customize Tools Panel veya OS X altında Flash 8 > Customize Tools Panel i seçin. Flash a bir eklenti yüklediğiniz zaman soldaki araçlar paneline yeni bileşenler eklenebilir. Ayrıca Flash ın bu paneldeki varsayılan araç dizilimini değiştirmek de isteyebilirsiniz. Böyle anlarda ihtiyaç duyacağımız şey Customize Tools Panel (Araçlar Panelini Özelleştir) iletişim kutusudur. Flash ile gelen araçların tümü varsayılan olarak Tools panelinde yer alır. Başlangıçta varsayılan ayarlara dokunmamak en iyisi, ancak zaman içinde projenizin ihtiyaçlarına göre buraya yeni araçlar ekleyebilir veya bu panelden bazı araçları çıkarabilirsiniz. TEMELLER 25

45 Bir FLA Dosyasının Test Edilmesi Bir Flash dosyasını Web üzerinden paylaşmanın en iyi yolu dosyayı Flash Player ın görüntüleyebileceği bir formatta yayınlamaktır. Dosyanızı Web e göndermeden (upload) önce test etmeli ve istediğiniz gibi göründüğünden emin olmalısınız. Bu konuya ilişkin bilgileri daha detaylı bir şekilde Ders 11 de görecek olsak da temelleri şimdiden öğrenmememizde fayda var. Dosyamız yine bookstore2.fla. 1. Ana menüden File > Save As komutunu verin ve bookstore2.fla dosyasını bookstore3.fla olarak kaydedin. bookstore3.fla dosyasını da daha önce masaüstünde oluşturduğunuz TechBookstore klasörüne kaydedin. 2. background katmanını seçin ve Components panelinden Stage e bir düğme (Button) taşıyın. Bunu sadece test edeceğimiz dokümanda bir şeyler bulunsun diye yapıyoruz. 3. FLA dosyasını test etmek için ana menüden Control > Test Movie komutunu verin. Bu komutla birlikte test ekranı açılır ve dokümanınız bir SWF dosyasına dönüştürülerek uygulamaya entegre edilmiş olan Flash Player ile görüntülenir. Dosyanız Web den Flash Player ile görüntülendiğinde test ekranındaki gibi görünecektir. 4. X düğmesine basarak test ekranını kapatın. Ekranı kapatmak için test penceresinden File > Close komutunu da verebilirsiniz. Böylece test ekranı kapanır ve tekrar geliştirme ortamına dönersiniz. Bu arada TechBookstore klasörüne baktığınızda dokümanınızın SWF sürümünün de oraya kaydedilmiş olduğunu göreceksiniz. 26 DERS 1

46 5. Çalışmanızı bir Web tarayıcısında görmek için File > Publish Preview (Yayın Ön İzleme) > Default (Varsayılan) komutunu verin. Publish Preview ile çalışmanızı içeren bir HTML dosyası oluşturabilir ve dosyanın bir Web tarayıcısında nasıl göründüğünü izleyebilirsiniz. HTML dosyası da tıpkı yukarıdaki SWF dosyası gibi sabit diskinize (TechBookstore klasörüne) kaydedilir. Flash ın üretmiş olduğu kaynak kodu görmek için Web tarayıcınızın menüsünden View (Görünüm) > Page Source (Kaynak) komutunu verin. SWF dosyasının HTML de hem OBJECT hem de EMBED etiketleri ile belirtilmiş ve Flash ın koda ilişkin tüm parametreleri sizin için doldurmuş olduğuna dikkat edin. TEMELLER 27

47 6. Flash a geri dönün ve background katmanındaki düğmeyi silin. Stage deki Button öğesini seçin ve klavyeden Backspace ya da Delete tuşuna basın. 7. Dosyada yapmış olduğunuz değişiklikleri kabul ederek dosyayı kaydedin. Yardım Almak Flash oldukça gelişmiş bir yardım sistemine sahiptir. Ana menüden Help (Yardım) > Flash Help veya klavyeden F1 komutuyla açabileceğiniz yardım panelinde bir arama motoru, temel yardım kategorilerini gösteren aşağı açılır bir konu listesi, tüm kategori başlık ve alt başlıklarının yer aldığı bir bölüm ve seçtiğiniz konuya ilişkin içeriği gösteren bir sayfa bulunur. Ayrıca yardım panelinin sağ üst köşesinde yer alan Update (Güncelle) düğmesine basarak varsa yeni yardım içeriklerini de Web den indirebilirsiniz. Flash ın yardım dokümantasyonu uygulamayla ilgili aklınıza gelebilecek çok sayıda sorunun cevabını bulabileceğiniz bir yerdir. Yardım panelinde aşağı açılır menüden seçebileceğiniz temel yardım konuları şunlardır: Features (Özellikler) Tutorials & Samples (Rehberler & Örnekler) ActionScript 2.0 Components (Bileşenler) Extending (Genişleme İmkânları) Language Reference (ActionScript and Components) Flash Lite 3rd Party (Üçüncü Partiler) 1. Yardım panelini açmak için ana menüden Help > Flash Help komutunu verin veya klavyeden F1 e basın. Yardım panelini ve içeriğini inceleyerek ihtiyacınız olduğunda neyi nasıl arayabileceğiniz hakkında fikir edinmeye çalışın. Geri düğmesi Arama (Search) İleri düğmesi İçindekiler düğmesi Update (Güncelle) düğmesi Print (Yazdır) düğmesi İçindekiler Bilgi ve dokümantasyon paneli 28 DERS 1

48 2. Yardım güncellemeleri olup olmadığını görmek için Update (Güncelle) düğmesine basın. Bu seçeneği kullanabilmeniz için İnternet bağlantınızın olması gerekir. Flash, Macromedia sunucularına bağlanacak, yeni dokümantasyon varsa size bunu indirip kurma seçeneğini sunacaktır. Bu güncelleme kontrolünü düzenli aralıklarla yapmanızda fayda var. 3. Arama alanına bir terim girin (meselâ, brush) ve sonuçları görmek için Search (Ara) düğmesine basın. Flash mevcut dokümantasyonu tarar ve sonuçları İçindekiler (Table of Contents) alanında gösterir. İstediğiniz sonuç ya da sonuçlara tıklayarak ilgili dokümantasyonu görebilirsiniz. 4. Help menüsünden Flash Support Center ı (Flash Destek Merkezi) seçin. Bu komut sizi Macromedia nın Flash destek sayfasına götürür. Burada Flash a ilişkin çeşitli makaleler, ipuçları ve cevaplar bulabilirsiniz. Aradığınız bilgiyi Flash ın yardım dokümantasyonunda bulamıyorsanız Web deki kaynaklara, özellikle Macromedia nın sitesine bakmayı da ihmal etmeyin. Projemizi İnceleyelim Bu kitabın sonuna geldiğinizde bütünüyle işlevsel bir Web sitesi inşa etmiş olacaksınız. Öğreneceğiniz teknikleri Flash ile tasarlayacağınız her site ya da projeye uygulayabilirsiniz. Ayrıca bu sitenin pek çok parçasını diğer projelerinizde de yeniden kullanabilirsiniz. Web sitesinin bitmiş halini adresinde görebilirsiniz. TEMELLER 29

49 Gördüğünüz Web sitesi bir HTML sayfasına iliştirilmiş (gömülmüş) olan bir SWF dosyasıdır. HTML sayfası için özgün bir arkaplan deseni kullanılmıştır. Sayfanın üst kısmında yer alan üç düğmeye tıklayarak çeşitli miktarlardaki dinamik verilerin Flash Basic 8 ve Flash Professional 8 ile gelen birçok farklı bileşene nasıl yüklendiğini izleyebilirsiniz. Sitedeki grafik, animasyon, sunum, video, ses ve diğer dinamik verilerin nasıl kullanıldığını da inceleyin. Sitedeki bazı öğeler sadece Flash Player 8 uyumlu olduğundan site içeriğini düzgün bir şekilde görebilmeniz için Flash Player sürümünüz 8 ya da üstü olmalıdır. En son Flash Player sürümünü adresinden yükleyebilirsiniz. Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Flash geliştirme ortamı ile tanıştık (Sayfa 4-6). Flash dokümanları oluşturmayı ve bunları kaydetmeyi öğrendik (Sayfa 7-9). Panellerle çalıştık (Sayfa 10-13). Timeline üzerinde kare ve katmanları kullandık, değiştirdik (Sayfa 13-17). İçeriği organize etmek için katmanlardan faydalandık (Sayfa 17-23). Kendi ayar ve tercihlerimizi belirledik (Sayfa 23-25). FLA dosyamızı test ettik (Sayfa 26-28). Yardım seçeneklerimizin ne olduğunu öğrendik (Sayfa 28-29). Kitap boyunca inşa ediyor olacağımız projenin bitmiş halini inceledik (Sayfa 29-30). 30 DERS 1

50 2 Grafikler Bir uygulama ya da doküman grafiklerin yokluğunda ne kadar güzel olabilir? Grafikler, kullanıldıkları her arabirimde görsel ipuçları sağlamak, uygulamayla etkileşimde bulunmak ve duyguları harekete geçirmek gibi önemli roller üstlenirler. Evet, grafik öğeleri kullanmadan da Macromedia Flash uygulamaları geliştirebilirsiniz, ancak bu durumda uygulamalarınızın hiçbir hayat belirtisi taşımayacağını da bilmelisiniz. Görsellik insanoğlu olarak doğamızda vardır. Bu dersimizde Flash taki çizim araçlarını kullanarak kendi grafiklerimizi oluşturmayı öğreneceğiz. Ayrıca hazır resimleri nasıl kullanabileceğimizi de göreceğiz. Bu derste oluşturacağımız ya da hazır kullanacağımız grafiklerin tümü, kitabımız boyunca geliştirmekte olacağımız projenin ana sayfa taslağı, logo animasyonu ve menü sisteminde rol alacak. Grafikler üzerinde işlemler yapmak için Flash taki araç ve panellerden faydalanmak ve maske efektleri oluşturmak için katmanları kullanmak da bu dersin diğer konuları arasında. Son olarak, elimizdeki öğeleri organize etmek için Library (Kütüphane) panelini nasıl kullanabileceğimizi öğreneceğiz. Tamamlanmış arka plan

51 Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Tools (Araçlar) panelini kullanacağız Kenar çizgilerini (stroke) ve dolguları (fill) tanıyacağız Object Drawing (Nesne Çizim) modelini göreceğiz Çizim araçlarıyla grafik oluşturacağız Kılavuzları ve kenetlenme (snapping) özelliğini tanıyacağız Grafikler üzerinde işlemler yapacağız Bir maske katmanı (mask layer) oluşturacağız Kütüphane hakkında bilgi edineceğiz Bitmap resimlerle ve vektörel çizimlerle çalışacağız Dolgu ve degradeler uygulayacağız Yaklaşık Süre Bu dersi yaklaşık bir buçuk saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: lesson02/assets/company_down.png lesson02/assets/company_up.png lesson02/assets/contact_down.png lesson02/assets/contact_up.png lesson02/assets/products_down.png lesson02/assets/products_up.png lesson02/assets/title.png lesson02/assets/logo.png lesson02/assets/map.fh11 Başlangıç Dosyaları: lesson02/start/bookstore3.fla Tamamlanmış Dosyalar: lesson02/complete/bookstore6.fla lesson02/complete/ma.fla 32 DERS 2

52 Tools (Araçlar) Paneli Bir önceki dersimizde Tools paneliyle tanışmış ve buradaki birkaç aracı kullanmıştık. Şimdiki dersimizde bu paneldeki çizim araçlarına daha yakından bakacağız. Tools paneli dört ana bölüme ayrılmıştır: Tools (Araçlar), View (Görünüm), Colors (Renkler) ve Options (Seçenekler). Bu bölümlerde görmüş olduğunuz düğmelerin hepsinin ayrı birer ismi ve görevi vardır. Fare imlecini düğmelerin üzerine getirip çok kısa bir süre bekleterek açıkça yazılı olmayan bu düğme isimlerini görebilirsiniz. Sağ alt köşelerinde minik bir ok simgesi taşıyan düğmeler kendilerine ait bir menüye sahiptir; örneğin Rectangle Tool (Dikdörtgen Aracı) düğmesine tıklar ve farenin tuşunu basılı tutarsanız bu düğmeye ait menüyü görebilirsiniz. Seçili araç Araçlar Açılır menü Görünüm Renkler Seçenekler (Değiştiriciler) Tools panelinde yer alan araçlar grafikler oluşturmak ve grafikler üzerinde çeşitli işlemler yapmak için kullanılır. Ayrıca Stage deki görünümü ya da Stage in ve üzerindeki öğelerin konumlarını değiştirmek için de buradaki araçlardan faydalanırız. Bazı araçlar ilave seçeneklere sahiptir; bu ek seçenekleri ilgili araç seçili olduğu zaman panelin en altındaki Options kısmında görebilirsiniz. Tools panelinden bir araç seçimi yaptığınızda Properties denetçisinin içeriği o araca ait özellikleri yansıtacak şekilde değiştir. Örneğin Text (Metin) aracını seçerseniz Properties denetçisinde metne GRAFİKLER 33

53 ait olan (ve değiştirebileceğiniz) bilgiler görüntülenir (metin türü, yazı tipi, sayfa yerleşimi, vs). Bir çizim aracı seçtiğinizde Properties denetçisi kenar çizgisi ve dolgulara ilişkin seçenekleri görüntüler. Seçim (Selection) Serbest dönüşüm (Free Transform) Çizgi (Line) Dolmakalem (Pen) Elips (Oval ) Kurşunkalem (Pencil) Mürekkep şişesi (Ink Bottle) Damlalık (Eyedropper) Alt seçim (Subselection) Degrade dönüşüm (Gradient Transform) Kement (Lasso) Metin (Text) Dikdörtgen / Çokgen (Rectangle / Polystar) Fırça (Brush) Boya kovası (Paint Bucket) Silgi (Eraser) El (Hand) Siyah / beyaz (Black and white) Nesnelere kenetlen (Snap to Objects) Büyüteç (Zoom) Kenar çizgisi rengine (Stroke color) ilişkin kontroller Dolgu rengine (Fill color) ilişkin kontroller Renkleri değiştir (Swap colors) Renksiz (No color) Selection, Subselection ve Lasso araçları Stage deki öğeleri seçmek; Line, Pen, Text, Oval, Rectangle, Polystar, Pencil ve Brush araçları grafik oluşturmak; Free Transform, Fill Transform, Ink Bottle, Paint Bucket, Eyedropper ve Eraser araçları da grafikleri değiştirmek için kullanılır. View alanında gördüğünüz Hand aracı Stage i çeşitli yönlerde hareket ettirmek, Zoom aracı da Stage in görünümünü büyütmek ya da küçültmek için kullanılır. Colors alanındaki kontroller şekil oluştururken kenar çizgisi veya dolgu renklerini belirlemenizi sağlar. Ayrıca seçili durumdaki her araç için Options alanında ve/veya Properties denetçisinde ilave denetimler bulunur. Dolgular ve Kenar Çizgilerini Tanıyalım Flash 8 de bir şekil çizim aracı kullanarak ister ayrı ayrı ister bir arada dolgular (fill) ve kenar çizgileri (stroke) oluşturabilirsiniz. Kenar çizgileri oluşturmak için Line ve Pencil araçları kullanılır. Kenar çizgileri farklı stil, kalınlık ve renklerde olabilir. 34 DERS 2

54 Kenar çizgilerini şekillerden bağımsız olarak çizebilirsiniz; bir şekil aracı seçtikten sonra dolgu rengini etkisiz hale getirir (Fill color düğmesi basılı iken No color seçimi yaparak) ve ardından bir kenar çizgisi rengi belirlerseniz (Stroke color düğmesiyle açılan menüden) seçmiş olduğunuz şeklin kenarlarını Stage üzerinde çizebilirsiniz. Oluşturduğunuz bir kenar çizgisini değiştirmek için Ink Bottle aracını kullanabilirsiniz; bunun için aracı seçin, Properties denetçisinden çizginin görünümüne ilişkin dilediğiniz değişiklikleri yapın ve sonra da araçla çizginin üzerine tıklayın. Kenar çizginizin değiştiğini göreceksiniz. Brush aracını kullanarak dolgu oluşturabilir, yani kapalı ya da açık bir şeklin içini doldurabiliriz. Düz renkler, çizgisel ya da dairesel degradeler veya bitmap resimler dolgu olarak kullanılabilir. Daha önce kenar çizgilerini belirlediğimiz kapalı bir şeklin içini Paint Bucket aracıyla anında doldurabiliriz. Oval, Rectangle veya Polystar gibi şekil araçları varsayılan olarak hem kenar çizgileri hem de dolgusu olan şekiller oluşturur. Tools panelinde Color kısmında Stroke color kontrolünü No color yaparak kenar çizgilerinin çizilmesini engelleyebilirsiniz. Kenar çizgisi olmayan dolgulara Ink Bottle aracıyla tıklarsanız onların da kenar çizgileri oluşturulur. Stage üzerinde bir şekil ya da kenar çizgisi oluşturmak için kullanabileceğiniz iki farklı çizim modeli vardır: Varsayılan teknik olan Merge Drawing (Birleşik Çizim) modeli ve alternatif teknik olan Object Drawing (Nesne Çizim) modeli. Merge Drawing modelinde bir şekli başka bir şeklin üstüne koymanız halinde bu iki şekil birleştirilir. Bu durumda üstteki şekli alttakinden ayırırsanız, alttaki şeklin biraz önce üstteki şekil tarafından kaplanmış olan bölümünün kesildiğini görürsünüz. Merge Drawing modelinde kenar çizgileri ve dolgular farklı nesneler olarak işlem görürler. Örneğin hem kenar çizgileri hem de dolgusu olan bir şeklin ortasına tıklayıp farenizi sürüklediğiniz zaman kenar çizgileri yerinde kalır ancak şeklin içi (dolgusu) taşınır. Şekli kenar çizgileriyle birlikte taşımak için ortasına çift tıklamanız gerekir. Birleşik çizim Kenar çizgisi ve dolgu birbirinden ayrı Bu birleştirme mantığı ilk bakışta kafanızı karıştırabilir veya kenar çizgileri ile dolguların ayrı işlem görmesi size garip gelebilir. Ancak tecrübeniz arttıkça bu yöntemle normalden çok daha ilginç şekil ve efektler üretebileceğinizi fark edeceksiniz. Yine de kendinizi bu teknikle ilgili çok rahat GRAFİKLER 35

55 hissetmiyorsanız değişik çözümler mevcut: Şekilleri gruplandırabilir, grafiklerinizi farklı katmanlarda çizebilir veya Object Drawing modelini kullanabilirsiniz. Object Drawing modelinde her bir şekil ayrı birer nesnedir. Bu durumda şekiller birbirleri üzerine konulsalar dahi birleşmezler ve altta kalan şekillerin kesilmesine yol açmazlar. Tools panelinde bir şekil aracı seçiliyken Options kısmında görülen Object Drawing düğmesine basarak Object Drawing modelini kullanabilirsiniz. Merge Drawing modeliyle çizilmiş nesne Object Drawing modeliyle çizilmiş nesne Vektörel Grafikler ve Bitmap Resimler Flash ta yaptığınız çizimlerin tümü vektöreldir: Grafikleri oluşturan çizgi ve eğriler matematiksel fonksiyonlarla hesaplanır. Vektörel grafikler Flash ın doğal çizim formatıdır. Buna karşın bitmap resimler ise boyutları sabit olan piksellerden meydana gelir. Vektörel grafikler gerçekte sadece 36 DERS 2

56 matematiksel fonksiyonlardan ibaret olduğundan genellikle daha düşük bir dosya boyutuna sahiptir. Ancak çizimin karmaşıklığı ve içerdiği öğeler arttıkça vektörel grafik dosyasının boyutu da hızla artar, bitmap resimlere olan ihtiyaç da bu noktada kendini belli eder. Bol miktarda ton farkı, degrade ve gölge efekti içeren karmaşık bir grafiğin bazen bitmap bazlı çizilmesi daha uygundur, böylece dosya boyutu makûl bir seviyede tutulabilir. Fotoğrafların da bitmap olması daha doğrudur. Bu iki formatın her biri diğerine dönüştürülebilir. Vektör formatının en büyük avantajı çizimlerin büyütülmesi ya da küçültülmesi gerektiğinde ortaya çıkar. Vektörel bir grafiğin boyutunu değiştirdiğinizde aslında yaptığınız şey o grafiği çizen denklemi değiştirmektir; grafiği ister küçültün ister büyütün hiçbir çözünürlük kaybı yaşamazsınız. Bitmap resimlerin böyle bir avantajı yoktur çünkü sabit büyüklükteki bir ızgara üzerinde yer alırlar; ızgarayı büyüttüğünüz zaman pikseller de büyür ve sonuçta ortaya bozulmuş, çirkinleşmiş bir görüntü çıkar. Piksellerin büyümesiyle birlikte görüntü kalitesi ve keskinliği kaybolur. Hatta bu kalite kaybı bazen pikselleri küçülttüğünüzde dahi fark edilebilir. Renklerin Kullanımı Flash ta renk seçimleri paletler aracılığıyla yapılır ve kullanımınıza hazır çeşitli renk paletleri bulunur. Bunlara ek olarak Color (Renk) panelini kullanarak kendi renklerinizi de oluşturabilir ve kaydedebilirsiniz. Kitabımız boyunca oluşturacağımız Tech Bookstore Web sitesi için 216 renk içeren Web 216 paletini kullanacağız. Bu paletten seçeceğiniz renkler neredeyse her bilgisayarda düzgün bir şekilde görüntülenebilir. Color Mixer ile paletlere özel renkler de ilave edebilirsiniz. Bunun için yapmanız gereken tek şey Color Mixer sayfasından rengi dilediğiniz gibi ayarladıktan (veya Eyedropper aracı ile Flash ta bir öğenin rengini seçtikten) sonra Color panelinin Options menüsünden Add Swatch (Renk Örneği Ekle) komutunu vermek. Belirlemiş olduğunuz yeni renk açmış olduğunuz paletin alt satırında yeni bir renk örneği olarak görünecektir. GRAFİKLER 37

57 Web 216 (Web Safe yani Web güvenli olarak da bilinir) renk paleti monitörlerin sadece 256 rengi destekleyebildiği bir dönemde geliştirilmişti. Mac ve PC ler farklı renk sistemleri kullanıyordu ve sadece bu 216 renk her ikisinde de ortaktı. Bugünse cep telefonları ve PDA ler dahil neredeyse her cihaz on binlerce rengi ve daha fazlasını destekleyebiliyor. Bu durumda çok ilkel bir araca yönelik uygulamalar tasarlamadığınız sürece istediğiniz rengi kullanabilirsiniz. Çalışmanızda bir GIF dosyasındaki renkleri de kullanabilirsiniz. Bunun için Color panelinin Options menüsünden Add Colors komutunu verdikten sonra renklerini kullanmak istediğiniz dosyanın yerini belirtmeniz yeterli. Paletlerdeki renkleri şekilleri doldurmak, kenar çizgilerine uygulamak veya Stage in arka plan rengini değiştirmek için kullanabilirsiniz. Renkleri tanımlamanın çeşitli yolları vardır. RGB (Red/Gren/Blue Kırmızı/Yeşil/Mavi), HSB (Hue/Saturation/Brightness Ton/Doygunluk/ Parlaklık) veya standart onaltılık (hexadecimal) değerler kullanarak renkleri belirleyebilir ya da değiştirebilirsiniz. Bu yöntemlerin her biri renkleri tanımlamak için farklı değerler kullanır. RGB ve HSB arasında her an geçiş yapabilirsiniz. Onaltılık değerler seçeneğini de her zaman kullanabilirsiniz. RGB metodunda renkler her biri arasında olan üç sayı ile tanımlanır. HSB metodunda H 0º-360º arasında yer alan, renk çemberindeki dönüş miktarını gösteren açısal bir değerdir. S (doygunluk) ve B (parlaklık) ise yüzdesel değerler alır. Onaltılık değerler yönteminde ise renklerin tanımlanması için rakam ve harflerden oluşan altı karakterlik bir değer kullanılır. Renklerin onaltılık değerlerle tanımlanması Web için kullanılan standart metod olduğundan HTML kod yazdıysanız bu değerler size tanıdık gelebilir. Bu derste ve kitapta renkler için onaltılık değerler kullanacağız ancak aynı renkleri varsayılan renk paletini (Web 216) kullanarak da seçebilirsiniz. RGB değerleri Onaltılık (hexadecimal) değer 38 DERS 2

58 HSB değerleri Onaltılık (hexadecimal) değer Kenar çizgileri ya da dolgularınızın rengini Tools panelinin Colors bölümünde yer alan kontrolleri (veya Properties denetçisini) kullanarak belirleyebilirsiniz. Kenar çizgileri için Stroke color ya da dolgular için Fill color düğmesine bastığınızda bir renk paleti açılır ve fare imleci Eyedropper (Damlalık) aracına dönüşür. Palet, Stage veya masaüstündeki bir rengin üzerine Eyedropper ile tıklayarak o rengi seçebilirsiniz. Tools panelindeki Eyedropper aracı da aynı şekilde kullanılır. Farklı renkleri hızlı bir şekilde karşılaştırmak veya başka bir programdaki (Fireworks gibi) çalışmanızdan renk almak için de Eyedropper aracını kullanabilirsiniz. Çizim Araçlarını Kullanarak Grafik Oluşturalım Şimdi temel çizim araçlarını kullanarak Tech Bookstore uygulamamız için ilk grafiklerimizi oluşturacağız. Flash 8 ile gelen temel çizim araçlarını ve çeşitli hazır bileşenleri kullanarak başka bir uygulamaya hiç gerek duymadan zarif arabirimler geliştirebiliriz. Daha karmaşık ve üst düzey grafikler oluşturmak istiyorsanız Macromedia Fireworks veya Macromedia FreeHand gibi bir uygulamaya ihtiyacınız olabilir. Bu uygulamalar hem daha çok sayıda filtreye hem de daha gelişmiş düzenleme ve efekt kontrollerine sahiptir. Yine de Flash ın tek başına neler yapabileceğiyle sizi şaşırtacağına emin olabilirsiniz. Şimdi yapacağımız alıştırmada bir şekil oluşturmak için Flash ın temel çizim araçlarını nasıl kullanabileceğimizi ve şeklin kenar çizgileri ile dolgusunun rengini nasıl belirleyebileceğimizi öğreneceğiz. Şekli seçtikten sonra Properties denetçisinden nasıl değiştirebileceğimizi de göreceğiz. GRAFİKLER 39

59 1. Sabit diskinizdeki TechBookstore klasöründen veya CD deki Lessons\lesson02\start\ dizininden bookstore3.fla dosyasını açın ve bookstore4.fla ismiyle kaydedin. Publish Settings ekranında Formats sekmesine tıklayın, burada HTML seçeneğindeki işareti kaldırın. Doküman üzerinde birtakım önemli değişiklikler yapacağız, o yüzden dosyayı farklı bir isimle sabit diskimizdeki TechBookstore klasörüne yeniden kaydediyoruz. File > Publish Settings komutuyla veya Properties denetçisinden Publish Settings düğmesine basarak Publish Settings iletişim kutusunu açın. Formats sekmesine gelin ve HTML kutusundaki işareti kaldırın. Dokümanımızda yaptığımız her değişikliğin ardından yeni bir HTML dosyası üretilsin istemiyoruz. Ders 11 de bir HTML dokümanı oluşturacağız. 2. Tools panelinden Rectangle aracını seçin ve Colors kısmındaki kontrolleri kullanarak dolgu rengini #CCCCCC, kenar çizgisi rengini de # yapın. Object Drawing modeli kullanarak bir dikdörtgen çizin. Rectangle aracını seçtikten sonra kenar çizgisi ve dolgu rengini 3 yerden değiştirebilirsiniz: Tools panelinin Colors bölümünden, Properties denetçisinden ve Color Mixer penceresinden. Properties denetçisindeki veya Tools panelinin Colors bölümündeki Fill color düğmesine tıklayın. Bir renk paleti açılacaktır. Bu palette gördüğünüz renklerden birini seçebilir veya paletin sol üst köşesindeki beyaz alana elle onaltılık renk kodunu girebilirsiniz. Beyaz alan tıklayın ve #CCCCCC yazıp Enter a basın, bu sizin dolgu renginiz olacak. Sonra da Stroke color düğmesine tıklayın, açılan paletteki beyaz alana bu kez # yazın ve Enter a basın, bu da kenar çizginizin rengi olacak. Renk paletinden alfa (alpha) değerini de belirleyebilirsiniz. Alfa değeri şeklin saydamlık düzeyini belirtir ve 0 ile 100 arasında değişen yüzdelik bir değer alır. 40 DERS 2

60 Kenar çizgisi ve dolgu rengi ayarlarını yaptıktan sonra Rectangle aracı hâlâ seçili durumdayken Tools panelinin Options alanındaki Object Drawing düğmesini aktifleştirin. Ardından farenizi Stage üzerinde boş bir yere tıklayın ve sürükleyin. Fare düğmesini bıraktığınızda dikdörtgeniniz çizilmiş olacaktır. Dikdörtgenin boyutlarını daha sonra Properties denetçisinden değiştireceğiz. Çizmiş olduğunuz şeklin kenar çizgisi ve dolgu renklerini Tools paneli Colors bölümündeki kontroller ile dilediğiniz zaman değiştirebilirsiniz. Kenar çizgisinin stil ve boyutunu nasıl değiştirebileceğimizi de biraz sonra öğreneceğiz. Object Drawing modeliyle çizilmiş bir nesneye çift tıklarsanız bir bakıma o nesneye nüfuz etmiş olursunuz. Bu durumda düzenleme çubuğunda, Scene 1 in hemen sağında bir Drawing Object etiketi belirir. Object Drawing modeliyle çizdiğiniz nesneler bir kutuya dizilen eşyalar misâli bir şekilde gruplandırılır; nesneye çift tıklamak içeriğini değiştirmek üzere kutuya ulaşmanıza imkân sağlar. Drawing Object tekniğiyle düzenleme yapmak birkaç koşulda avantaj sağlasa da pek çok değişikliği bu tekniği kullanmadan da yapabilirsiniz. Drawing Object modundan çıkmak için Stage üzerinde boş bir yere çift tıklayabilir ya da düzenleme çubuğunda Scene 1 i seçebilirsiniz. 3. Properties denetçisini kullanarak dikdörtgenin genişliğini 779 piksel, yüksekliğini de 15 piksel yapın. Stage üzerindeki bir nesneyi seçtiğinizde nesnenin genişlik ve yükseklik değerlerini Properties denetçisinin sol alt köşesinde W (width) ve H (height) ile belirtilen alanlarda görebilirsiniz. Burada görmüş olduğunuz değerleri değiştirebilirsiniz. Şeklin genişlik/yükseklik oranını korumak istiyorsanız W ve H alanlarının hemen solundaki kilit simgesine tıklayıp kilidi kapatmanız yeterlidir. Nesnenin Stage üzerindeki x ve y koordinatlarını da değiştirebilirsiniz. x ve y koordinatları varsayılan olarak şeklin sol üst köşesine göre belirlenir. Kilit simgesi açık haldeyken W alanına tıklayın, 779 yazın ve Enter a basın. Şimdi de H alanına 15 girin ve Enter tuşuna basın. Dikdörtgenin boyutlarının değiştiğini göreceksiniz. GRAFİKLER 41

61 4. Oval aracını kullanarak bir daire çizin. Dolgu rengi olarak # değerini verin. Logomuzun son hali bir animasyon ve çeşitli grafikler içeriyor olacak. Şimdi yapacağımız şey daha sonra animasyon kısmına temel teşkil edecek olan grafiği çizmek. Oval aracını seçin ve Fill color ile dolgu rengini # yapın. Kenar çizgisi rengini iptal edin; bunu yapmak için Stroke color düğmesi basılı durumdayken altta, 3 lü mini düğme grubunun ortasında yer alan No color düğmesine tıklayın (veya Stroke color düğmesiyle açılan paletin sağ üstünde yer alan No color düğmesine basın). Bir şekil çizim aracı seçili değilken No color düğmesi silik gözükür. Oval aracı ile Stage üzerinde tıklayıp sürükleme yaparken Shift tuşunu basılı tutarsanız, oval bir şekil ya da elips değil mükemmel bir daireniz olur. Dersimizin ilerleyen bölümlerinde çizdiğimiz şeklin kenar çizgisi için de bir renk belirleyeceğiz. Selection aracı ile daireyi seçin. Properties denetçisinde genişliği (W) 130 ve yüksekliği (H) de 100 yapın. Böylece daha sonra kullanacağımız logoya uygun bir elips elde etmiş olduk. Bilgisayarınıza bağlı bir çizim tableti kullanıyorsanız Flash ın tablet kaleminin basınç ve açısından faydalanmanıza imkân veren çizim özelliklerini seveceksiniz. Böyle bir durumda Tools panelinin Options alanından Brush aracı için Pressure (Basınç) ve Tilt (Eğim) değerleri belirleyebilirsiniz. 5. Dokümanınızı kaydedin. Koordinatlar, Kılavuzlar, Izgara ve Kenetlenme Özelliği Flash ta neredeyse her şeyin koordinatlarla bir ilgisi vardır. Her doküman kendi x ve y koordinatlarına sahiptir ve orijin dokümanın sol üst köşesidir. Grafikleri doğru yerlere yerleştirmekten ActionScript ile animasyon ayarlarına kadar pek çok şey koordinatlar yardımıyla yapılır. x dokümanın yatay eksenini, y de dikey eksenini temsil eder. Bir sembol oluşturuyorsanız ve 42 DERS 2

62 sembol düzenleme modunda iseniz merkezdeki artı simgesi bu sembolün kendi bağımsız koordinat sisteminin orijinini belirtir. Bu dersimizde sembol oluşturma konusuna çok kısaca değinecek olsak da semboller ve sembol düzenleme modu hakkındaki detaylı bilgileri Ders 4 te öğreneceğiz. Flash ta bir z endeksi yoktur ancak aynı amaca hizmet eden bir derinlik unsuru bulunur. Koordinatlar arasında gezinmenize yardımcı olacak unsurlar ise kılavuzlar (guide), ızgara (grid) ve kenetlenme (snapping) özelliğidir. Kılavuzlar ve ızgara taslak çalışması ve çizimler esnasında size yardımcı olur. Kenetlenme özelliği de oluşturmakta olduğunuz bir nesnenin kılavuzlara ya da ızgaraya kenetlenmesini (yaslanmasını) sağlar. Kılavuzlar ve ızgara sadece düzenlenebilir bir Flash dosyası ile çalışırken kullanılabilir ve son SWF dosyasında görünmezler. Kılavuzları kullanmak için cetvellerin de açık olması gerekir. Cetvelleri görünür yapmak için ana menüden View > Rulers komutunu verebilirsiniz. Cetveller açıldığında kılavuzlar da kullanıma hazır hale gelir ancak siz onları kullanmaya başlayana kadar görünmezler. Kılavuzları aktifleştirmek ya da iptal etmek için View > Guides > Show Guides komutunu kullanabilirsiniz. Izgarayı görüntülemek için de View > Grid > Show Grid komutunu verebilirsiniz. Kılavuz çizgilerine ilişkin ayarları Edit > Guides > Edit Guides komutuyla görebilir ve değiştirebilirsiniz. Guides penceresinde kılavuz çizgilerinin rengini değiştirebilir, görünür olup olmayacaklarını belirtebilir ve yanlışlıkla hareket ettirilmelerini önlemek amacıyla onları kilitleyebilirsiniz. Yine aynı ekranda nesnelerin kılavuz çizgilerine hangi hassasiyetle kenetleneceklerini de belirleyebilirsiniz. Grid penceresinde ızgara çizgilerinin rengini ve hücrelerin boyutlarını değiştirebilir, kenetlenme ve görünür olma seçeneklerini belirleyebilirsiniz. Kenetlenme (snapping) seçeneklerini View > Snapping menüsünden de ayarlayabilirsiniz. Cetvelin üzerine tıklayıp sürükle ve bırak yaparak kılavuzları Stage e taşıyabiliriz. Fareyle Stage deki bir kılavuzun üzerine geldiğinizde fare imlecinde kılavuzu başka bir yere taşıyabileceğinizi belirten yeni bir simge belirir. Kılavuzlardan kurtulmak için onları View > Guides > Show Guides komutuyla iptal edebilir ya da aldığınız cetvele geri taşıyabilirsiniz. GRAFİKLER 43

63 Kitabımız boyunca nesneleri kılavuzlara kenetlenmiş olarak kullanacağız (Guides penceresinde Snap to guides işaretli olacak). Yeni Bir Grafik Sembolü Oluşturma Bu uygulamada Tech Bookstore sitesindeki aşağı açılır menülerde kullanacağımız arka plan grafiğini oluşturacağız. Ardından bunu bir grafik sembolüne dönüştüreceğiz, bu sayede grafiği dosya boyutunu büyütmeden yeniden kullanabiliriz. Sitede üç menü olduğundan bu yöntemi benimsememiz gayet mantıklı, böylece projemizdeki dosya boyutlarının daha küçük olmasını sağlayabiliriz. Sembollerin detaylarına şimdilik fazla takılmayın, Ders 4 te sembolleri daha geniş bir şekilde inceleyeceğiz. Yine Rectangle aracını kullanacağız ancak bu kez Corner Radius düğmesiyle köşeleri yuvarlatacağız. Dolgu renkleri, araçlar, cetveller ve kılavuzlar da bu örnekte sıkça kullanacağımız öğeler olacak. Grafik sembolleri kendi Timeline ve katman yapılarına sahip olabilirler. Bu özellik, ana dokümanın Timeline ı üzerinde herhangi bir değişiklik yapmadan daha karmaşık grafikler oluşturmanıza imkân sağlar. 1. bookstore4.fla dosyasını açın ve bookstore5.fla olarak kaydedin. Nesnelere kenetlenme özelliğini açın. Nesnelere kenetlenme özelliğini açmak için Tools panelinde Options kısmında yer alan Snap to Objects (Nesnelere Kenetlen) düğmesini aktifleştirin (bu düğmede bir mıknatıs simgesi vardır). Dilerseniz ana menüden View > Snapping > Snap to Objects komutuyla da aynı şeyi yapabilirsiniz. 2. Insert > New Symbol komutu ile yeni bir grafik sembolü ve Layers panelindeki Insert New Layer düğmesiyle bu sembolün içinde üç yeni katman oluşturun. Bu şekilde yeni bir sembol oluşturduğunuzda ana dokümanın Timeline ını terk etmiş ve sembolün Timeline ına girmiş olursunuz. Font sembolü istisna olmak kaydıyla Flash taki her sembolün kendi Timeline paneli ve kendi katmanları vardır. Bu Timeline ların nasıl çalıştığı ise ne tür bir sembol seçmiş olduğunuzla yakından ilgilidir. Yeni bir sembol oluşturmak için ana menüden Insert > New Symbol komutunu verin. Create New Symbol (Yeni Sembol Oluştur) penceresi açılacaktır. Create New Symbol penceresinin Basic (Basit) ve Advanced (Gelişmiş) olmak üzere iki farklı görünümü vardır. Basic görünümü varsayılan moddur. Advanced düğmesine bastığınızda Advanced görünümüne geçiş yapılır. Biz Basic modu kullanacağız. 44 DERS 2

64 Name (İsim) alanına girdiğiniz sembol ismi dokümanın Library (Kütüphane) panelinde kullanılır. Library panelini daha sonra öğreneceğiz. Type (Tür) seçimi Flash a sembolün nasıl davranması gerektiğini söyler. Sembol ismi olarak grmenugraphic yazın ve Type olarak da Graphic i seçin. Ardından OK düğmesine basın. İsmin önüne koyduğumuz gr öneki sadece bunun ne tür bir sembol olduğunu daha rahat anlamamız içindir ve zorunlu değildir. Bir isimlendirme metodu belirlemenizi ve projelerinizde bu metoda göre isimler kullanmanızı tavsiye ederiz. Şimdi artık sembol düzenleme modundayız. Düzenleme çubuğuna bakacak olursanız Scene 1 in hemen sağında küçük bir simge ve sembolünüzün ismini görebilirsiniz; buradan ana sembolü düzenlemekte olduğumuz sonucuna varabiliriz. Timeline panelinde sembolün Timeline ı ve varsayılan olarak Layer 1 adını almış olan katmanı yer almaktadır. Şimdi üç katman daha oluşturun ve elinizdeki toplam dört katmana yukarıdan aşağıya doğru gradient, inner (iç), middle (orta) ve outer (dış) isimlerini verin. (Katmanları yeniden isimlendirmek için katman ismine çift tıkladığınızı hatırlayın.) 3. Düzenleme çubuğundaki açılır menüden yakınlığı 800% yapın. Oluşturmak üzere olduğunuz grafiğin dış kılavuzlarını belirleyin. Şimdi menü arka planımız için bir dizi kılavuz oluşturacağız. Arka planda sınırları göstermek amacıyla birkaç farklı rengimiz olacak. Köşeleri yuvarlatılmış dikdörtgenler içeren katmanlar kullanacağız ve bu katmanları üst üste koyarken kılavuzlardan faydalanacağız. GRAFİKLER 45

65 Eğer henüz açmadıysanız View > Rulers komutuyla cetvelleri açın. Çalışma alanının solunda ve üstünde cetveller belirecektir. Cetveller açık değilken kılavuzları kullanamayacağınızı unutmayın. Düzenleme çubuğunun en sağında yer alan açılır menüden 800% seçimini yapın. Çalışma alanımızı bu şekilde büyütmemizin sebebi oluşturacağımız menünün sadece 110 piksel genişliğinde ve 15 piksel uzunluğunda olması; böylece daha rahat çalışabiliriz. Dikey (soldaki) cetvele tıklayın ve fareyi sürükleyerek bir kılavuz oluşturun; kılavuzu yatay cetveldeki 0 noktasına getirin. Bu durumda kılavuz Stage deki artı işaretinin dikey çizgisi ile kesişecektir. Artı işaretinin bulunduğu nokta sembolün merkezi ve sembolün koordinat sisteminin orijin noktasıdır. Aynı şekilde yataydaki 110 noktasına gelecek bir kılavuz daha oluşturun. Şimdi de alt ve üst kılavuz çizgilerini çekin; alttaki kılavuz 0 da, üstteki kılavuz da 17 de olsun. 46 DERS 2

66 4. Menünün yanlarına ve altına birer piksel aralıklarla 3 kılavuz daha ekleyin. Katmanları doğru bir şekilde yerleştirmek için her şeklin hizalanacağı kılavuzlar çizmemiz gerekiyor. Şimdi 0 da duran dikey kılavuzun sağ tarafına üç kılavuz daha ekleyin; her bir kılavuzun arası birer piksel olsun. Benzer şekilde, 110 da duran dikey kılavuzun sol tarafına yine her biri arasında birer piksel olacak şekilde üç kılavuz çekin. Son olarak 0 da duran yatay kılavuzun üstüne de birer piksel aralıklarla üç kılavuz ekleyin. 5. Rectangle aracını ve Set Corner Radius (Köşe Yarıçapı Belirle) düğmesini kullanarak outer katmanında menü arka planını oluşturun. Kenar çizgisi için bir renk vermeyin, dolgu rengini ise # yapın. Dikdörtgeni en dıştaki kılavuzların içinde oluşturun. Rectangle aracını seçin ve Object Drawing i etkisizleştirin (Object Drawing düğmesini seçili olmayan duruma getirin). Bir dizi grafik üzerinde aynı anda düzenlemeler yapacağız; böyle bir durumda Object Drawing işimizi biraz zorlaştırabilir. O yüzden düzenlemeyi Merge Drawing metoduyla yapacağız. Şimdi köşeleri yuvarlatılmış bir dikdörtgen kullanarak menü arka planının dış sınırını oluşturmamız gerekiyor. Rectangle aracını seçin ve Tools panelinde Options kısmında yer alan Set Corner Radius (Köşe Yarıçapı Belirle) düğmesine basın. Karşınıza Rectangle Settings kutusu gelecektir. Corner Radius (Köşe yarıçapı) alanına 2 girin ve OK düğmesine tıklayın. Rectangle aracını her katmanda bu köşe yarıçapı ile kullanacağız. Tools panelinde Colors bölümünde yer alan Fill color ve Stroke color kontrollerini kullanarak dolgu rengini # ve kenar çizgisi rengini de No color (yani renksiz) olarak belirleyin. İlk dikdörtgeni oluşturmak üzere outer katmanını seçin. İlk dikdörtgeni en dıştaki dikey (0 ve 100) ve en dıştaki yatay (0 ve 17) kılavuzlara hizalayacağız. GRAFİKLER 47

67 View > Guide > Lock Guides (Kılavuzları Kilitle) komutuyla kılavuzları kilitlemek isteyebilirsiniz; böylece kılavuzların yerini yanlışlıkla değiştirme riski ortadan kalkar. Kılavuzların en sol üstteki kesişme noktasına çok yakın bir yere tıklayın ve fareyi en sağ alttaki kesişme noktasına çok yakın bir yere kadar sürükleyin. Fare düğmesini bıraktığınızda dikdörtgenimiz en dıştaki kılavuzlara hizalanmış olarak çizilecektir. 6. middle katmanında dolgu rengi #FFFFFF ve kenar çizgisi de renksiz olan başka bir dikdörtgen oluşturun. Dikdörtgeni, en dıştaki dikdörtgenin sol, sağ ve alt kenarından birer piksel içeride kalacak şekilde çizin. İkinci dikdörtgeni oluşturmak üzere middle katmanını seçin. Dolgu rengini #FFFFFF yapın. Kenar çizgisi için yine No color (renksiz) seçili olsun. Biraz önce outer katmanında çizdiğiniz dikdörtgenin sol, sağ ve alt kenarından birer piksel içeride olacak şekilde yeni dikdörtgeni çizin. Dikdörtgenin üst kenarı ilk dikdörtgen ile aynı seviyede olabilir. Çizimi geri almak ve şekli yeniden çizmek için Ctrl+Z veya Cmd+Z komutlarını kullanabilirsiniz. Üçüncü ve dördüncü dikdörtgenleri de aynı şekilde çizin. Dikkat etmeniz gereken tek şey her çizimde sol, sağ ve alttan birer piksel daha içeriye gelmek. inner katmanındaki dikdörtgen için dolgu rengini # yapın, kenar çizgisi yine renksiz olsun. gradient katmanındaki dikdörtgen için dolgu rengini şimdilik #CCCCCC olarak belirleyin. Dersimizin ilerleyen bölümlerinde bu grafiğe lineer bir degrade uygulayacağız. 7. Menünün üst tarafını kırpın ve katmanları kilitleyin. Her şeyi yanlışlıkla aynı katmana çizmekten kaçınmak için katmanlarınızdan bir ya da birkaçını daha önceden kilitlediyseniz şimdi tüm katman kilitlerini açın. Dikey cetveldeki 15 piksel noktasına yeni bir kılavuz çekin. Selection aracını seçin. Fare ile en sol üst köşenin biraz dışına tıklayın ve yatay cetvelde 110 u biraz geçene, dikey cetvelde de 15 çizgisine kadar fareyi sürükleyin ve bırakın. Noktalı bir desen göreceksiniz, bu desen ilgili alanı (tüm grafiğin üst bölümünü) başarıyla seçmiş olduğunuzu gösteriyor. Menü grafiğinin bu kısmına ihtiyacımız olmayacağından Delete veya Backspace tuşuna basarak bu bölümü silin. Layers panelinin üst kısmında yer alan kilit simgesine tıklayarak tüm katmanları kilitleyin. 48 DERS 2

68 8. Ana Stage ekranına geri dönün. Hâlâ sembol düzenleme ekranında olduğunuzu hatırlayın. Düzenleme çubuğunun en sağında yer alan yakınlaştırma menüsünden tekrar 100% boyutunu seçin. Şimdi düzenleme çubuğunun en solunda bulunan Scene 1 e tıklayın ve ana Stage ekranına geçiş yapın. Grafiğiniz ana Stage de görüntülenmez, kütüphanede saklanır ve kullanılmayı bekler. Tools panelindeki Zoom aracına çift tıklayarak da sayfayı 100% boyutuna getirebilirsiniz. 9. Çalışmanızı kaydedin. Maskeler Maskeler, çizmiş olduğunuz şekle bağlı olarak Stage in bölümlerini gizleyen ya da gözler önüne seren unsurlardır. Bir maskeyi bir şeyin üzerindeki örtü gibi düşünebilirsiniz; üzerlerinde durdukları şeyi gizlerken bir yandan da o şeye ilişkin ipuçları verirler. Bazı şaşırtıcı ve karmaşık efektlere imkân tanıdıklarından maskeleri kullanmak hayli etkili olabilir. Maskeler Stage de sabit kalabilecekleri gibi hareket de edebilirler. Maske etkisi katmanlarla ilgili bir özelliktir; katmanlardan biri üzerinde durmakta olduğu diğer katmanı maskeler (gizler). Şimdiki uygulamamızda Stage in bir bölgesini maskeleyecek basit bir şekil oluşturacağız. Arabirimde 3 adet menümüz olacak. Bu menüler normalde görünmeyecek, kullanıcının kendilerini kontrol eden düğmelerin üzerine gelmesi halinde ise aşağıya doğru açılacaklar. Yine bookstore5.fla dosyasını kullanıyoruz. 1. Ana Stage e yatay ve dikey kılavuz çizgileri taşıyın. Şu anda Stage üzerinde daha önceki alıştırmalarda çizdiğimiz uzun bir dikdörtgen ve oval bir şekil duruyor olmalı. Tüm bu grafikleri şimdilik Stage in dışına sürükleyin. Bir önceki uygulamada yaptığımız gibi burada da bazı kılavuz çizgilerine ihtiyacımız olacak. Öncelikle kılavuzların kilitli olmaması gerekiyor. Kılavuzlar kilitliyse View > Guide > Lock Guides ile kilidi kaldırabilirsiniz. Şimdi iki tane dikey kılavuz çekin; biri 115 diğeri de 405 pikselde olsun. İki tane de yatay kılavuz oluşturun; biri 125 diğeri 140 pikselde olsun. GRAFİKLER 49

69 2. Yeni bir katmanda bir dikdörtgen oluşturun ve sonra katmanı bir maske haline getirin. background katmanını seçin ve iki yeni katman ekleyin. Alttaki katmanı menu ve onun üzerindeki katmanı da mask olarak isimlendirin. mask katmanında kılavuzların arasında kalacak ve onlara kenetlenecek şekilde bir dikdörtgen oluşturun. Şimdi mask katmanına sağ tıklayın ve açılan menüden Mask komutunu verin. Bu komutun ardından Layers panelinde menu katmanındaki katman ismi otomatik olarak sağa kaydırılır: Bu durum menu katmanının artık maskelenmiş olduğunu gösterir. 3. mask katmanının kilitlendiğinden emin olun ve kılavuzları kaldırın. Flash ta bir maske hazırladığınızda maske katmanı ve maskelenen katman otomatik olarak kilitlenir. Bu, maskenin düzenleme ortamında düzgün bir şekilde çalışmasını sağlar. Bu katmanlardan herhangi birinin kilidini açtığınızda maske grafiği yeniden görünür olur ve maskelenmiş katmanın içeriğini yeniden konumlayabilir ya da maskeleyen katmanın içeriğini yeniden şekillendirebilirsiniz. Katmanlar kilitli durumdayken filmi test etmeniz halinde de maske yine beklendiği gibi davranır. (Control > Test Movie, Ctrl+Enter veya OS X altında Cmd+Enter ile filmi test edebilirsiniz.) Filmi test etmek şu aşamada çok anlamlı değil çünkü maskelenen katmana henüz içerik yerleştirmiş değiliz. mask katmanının kilitlendiğinden emin olun. Katmanın Show/Hide All Layers (Katmanları Göster/ Gizle) sütununda yer alan siyah noktasına da tıklayın; böylece katmanı aynı zamanda gizlemiş de oluyoruz. Son olarak, kılavuzlara şimdilik ihtiyaç duymayacağımız için View > Guides > Clear Guides (Kılavuzları Temizle) komutuyla onları hızlı bir şekilde cetvellere geri gönderin. Kenar Çizgileri Eklemek Kenar çizgileri nesnelerin ya da şekillerin etrafındaki bağımsız hatlar veya çizgilerdir. Flash 8 de kenar çizgileri için kullanılabilecek çeşitli hazır stiller ve stilleri özelleştirmenize imkân veren birkaç seçenek bulunur. Kenar çizgilerinin kapatılması (cap) ve birleştirilmesi (join) için de çeşitli araçlar vardır. Şekillere kenar çizgileri eklemek için Ink Bottle aracını veya çizgi çekme araçlarından birini kullanabilirsiniz. 50 DERS 2

70 Kenar çizgisi kalınlığı (Stroke height) Kenar çizgisi rengi (Stroke color) Özel stil düğmesi (Custom stroke style) Kenar çizgisi stili (Stroke style) Kenar çizgisi kapatma stili Kenar çizgisi vurgulama (Stroke hinting) Ölçü (Scale) Kenar çizgileri birleşme stili Stroke height alanı Stage deki çizginin kalınlığını belirler. Alanın hemen sağındaki oka bastığınızda kalınlığı ayarlayabileceğiniz bir kaydırma çubuğu açılır. Bu çubuğu kullanarak ya da doğrudan alana bir değer girerek kalınlığı belirleyebilirsiniz. Kalınlık değeri 0.1 ile 200 arasında değişir. Stroke style menüsünde Flash 8 ile gelen stilleri görebilirsiniz. Bunlardan biri olan hairline stilinin ebadı hep aynıdır ve Stage ekranını ne kadar büyütürseniz büyütün çizginin kalınlığı değişmez. Şu ana kadar kullandığımız kenar çizgilerinin kalınlığı biz Stage i yaklaştırdıkça artıyordu. Custom düğmesine basarak çizgi stillerini özelleştirmek için kullanabileceğiniz birkaç seçeneğe ulaşabilirsiniz. FLA dosyanızda özelleştirilmiş stil kullanımına fazla ağırlık vermeyin; bu tür kullanımlar SWF dosyanızın boyutunu artıracaktır. Benzer şekilde hairline ve normal stil çizgilerinin dışında kalan stiller de dosya boyutunu artıran faktörlerdir. Kenar çizgisinin uç noktalarının nasıl görüneceğine ilişkin seçeneklere Cap düğmesi ile ulaşabiliriz. None çizgiye hiçbir müdahalede bulunmaz. Round ve Square ise çizgiyi çok az uzatarak çizginin yuvarlatılmış veya köşeli bir şekilde sonlanmasını sağlarlar. Join menüsündeki seçenekler iki kenar çizgisinin nasıl buluşacağını belirler. Buradaki üç seçenek Miter (Keskin köşeli), Round (Yuvarlatılmış) ve Bevel (Düz köşeli) şeklindedir. Join seçeneklerini kenar çizgilerinin birleşen uçlarını seçtikten sonra uygulayabilirsiniz. Stroke hinting seçeneğini işaretlemeniz halinde çizim esnasında yatay veya dikey çizgilerin bulanıklaşmasını engellemiş olursunuz. GRAFİKLER 51

71 Son olarak, Pencil aracını ve Tools panelinin Options alanında da Smooth (Yumuşak) modunu seçmişseniz Properties denetçisinde Smoothing (Yumuşatma) adında yeni bir seçenek belirir. Bu seçeneği kullanarak kenar çizgisinin sertliğini değiştirebilirsiniz. Smoothing (Yumuşatma) değeri 1. Yeni bir katman ekleyin ve başka bir dikdörtgen oluşturun. background katmanını seçin ve Insert Layer ile yeni bir katman ekleyin. Katmana outline ismini verin ve background katmanını kilitleyin. Tools panelinden Rectangle aracını seçin. Stroke color olarak # (siyah) verin, Fill color olarak No color (renksiz) seçimini yapın. Stroke height olarak 1 değerini verin (daha önce değiştirmediyseniz burası zaten varsayılan değer olan 1 dir). Cap düğmesine tıklayın ve None seçimini yapın. Son olarak Tools panelinin Options alanında Set Corner Radius (Köşe Yarıçapı Belirle) düğmesine basın ve köşe yarıçapının 0 olduğunu teyit edin. Stage üzerinde herhangi bir yere küçük bir dikdörtgen çizin. Rectangle aracını seçtikten sonra Properties denetçisinde değiştirebileceğiniz seçenekleri göremiyorsanız Selection aracını seçin, arka zemine bir kez tıklayın ve tekrar Rectangle aracını seçin. 2. Dikdörtgenin boyutlarını ve konumunu değiştirin. Dikdörtgeni seçin ve Properties denetçisinden W için 770, H için 519 girin. Bu değerler dikdörtgenin Stage in tüm kenarları boyunca görünür olmasını sağlayacaktır. Dikdörtgeni Stage ile aynı boyutta çizerseniz SWF dosyasını yayınlamanızın ardından dikdörtgenin bazı kısımları kesilebilir. X ve Y değerlerinin her ikisine de 0 girin. Böylece grafiğin sol üst köşesi ile Stage in sol üst köşesi aynı noktaya denk gelecektir. SWF dosyasının sağ tarafı ve alt kısmı çift çizgiye ve biraz kaba bir görünüme sahipmiş gibi dursa da dosya yayınlanıp bir tarayıcıda izlendiğinde çizgiler düzgün bir şekilde görüntülenecektir. Dikdörtgeni tam boyuta ayarlarsanız Stage in sağında ya da altında çizgiler görünmez. 52 DERS 2

72 3. Dikdörtgeni bir sembole dönüştürün ve katmanı kilitleyin. Dikdörtgen Stage de hâlâ seçili durumda olmalı. Modify (Değiştir) > Convert to Symbol (Sembole Dönüştür) komutunu verin ve grafiği groutline olarak isimlendirin. Type olarak Graphic seçimini yapın ve OK düğmesine tıklayıp çıkın. Son olarak outline katmanını kilitleyin. Kütüphanenin Kullanımı Kütüphane (Library), Flash FLA dosyanızda kullandığınız sembol, bileşen, ses, bitmap resimler ve dijital video öğelerinin tutulduğu yerdir. Yeni bir sembol oluşturduğunuzda veya ses, video, resim aldığınızda (import) tüm bunlar otomatik olarak kütüphaneye eklenir. Flash ta kullanabileceğiniz neredeyse her öğeyi kütüphanede görebilir, klasörlere yerleştirebilir, yeniden isimlendirebilir ya da diğer bazı işlemlere (özelliklerini değiştirmek gibi) tâbi tutabilirsiniz. Ayrıca kütüphanedeki öğeleri sürükle ve bırak ile Stage üzerinde herhangi bir yere taşıyabilirsiniz (öğeler anahtar bir karede ve kilidi açık bir katmanda oldukları sürece). Library (Kütüphane) menüsü Küçük resimler (thumbnail) halinde gösterim ekranı Seçenekler menüsü New Library panel (Yeni kütüphane paneli) Pin current library (Mevcut kütüphaneyi sabitle) Öğeler New Symbol (Yeni Sembol) New Folder (Yeni Klasör) Delete (Sil) Properties (Özellikler) Flash ta her dokümanın kendi kütüphanesi vardır. Dahası, doküman kütüphanelerini FLA dosyasından bağımsız bir şekilde açabilir, başka bir kütüphanedeki öğeleri kullanabilirsiniz. Birden fazla Flash dokümanı açık olduğunda Library menüsü doküman kütüphaneleri arasında hızla gezinmenizi sağlar. Açılır menüde gözükmekte olan kütüphane o anda aktif olan dokümanın kütüphanesidir; Pin current library düğmesine basarak istediğiniz kütüphanenin açılır menüde GRAFİKLER 53

73 sabit olarak kalmasını sağlayabilirsiniz. New Library panel düğmesi o anda seçili olan kütüphaneyi ayrı bir pencere halinde görüntüler. Yeni semboller oluşturmak, seçili öğeleri silmek, öğe özelliklerini görüntülemek ve öğeleri klasörlere yerleştirmek için gereken düğmelerin tümü Library panelinin sol alt köşesinde yer alır. Şimdiki uygulamamızda kütüphaneyi biraz daha yakından tanıyacağız ve dokümana alacağımız birtakım öğeleri organize etmek için bazı klasörler oluşturacağız. Çalışma dosyamız yine bookstore5.fla olacak. 1. Eğer açık değilse Window > Library komutuyla kütüphaneyi açın. Library paneli de tıpkı Flash taki diğer paneller gibidir: Başlık çubuğu durumuna küçültülebilir, aşağıya doğru uzatılabilir, bir noktaya sabitlenebilir ya da serbest halde kullanılabilir. Kütüphanemizde şu anda üç adet öğe görünüyor olmalı; Button bileşeni, grmenugraphic ve groutline sembolleri. grmenugraphic ve groutline, bu grafikleri sembollere dönüştürdüğünüzde kütüphaneye otomatik olarak eklenmişti. Benzer şekilde Button öğesini Stage e sürükleyip bıraktığımız zaman o da kütüphaneye eklenmişti. Bunun sebebi öğelerin kolayca yeniden kullanılabilir olmasına imkân vermektir. Siz bir öğeyi Stage den silseniz dahi öğe kütüphaneden kaldırılmaz. Çizim araçlarını kullanarak Stage üzerinde çizdiğiniz grafikler sembol değildir, bu yüzden kütüphaneye eklenmezler. Flash ta bu tür grafiklere ham ya da basit grafikler denir. Ana Stage üzerinde çizmiş olduğunuz hiçbir şey siz onları özellikle öyle yapana kadar sembol değildir. 2. Button bileşenini kütüphaneden silin. Bir öğeyi kütüphaneden kaldırmak için öğeyi seçin ve panelin alt kısmında duran çöp tenekesi simgesine tıklayın. Öğeye sağ tıklayıp Delete komutunu vermeniz de aynı işi görür. Eğer kütüphanede, uygulama tarafından kullanılmayan öğeler varsa bunlar SWF dosyasını yayınladığınız zaman dosyaya aktarılmazlar (Flash ın dahili bileşenleri bir istisnadır). Dosya boyutunu gereksiz yere büyütmemek için kullanmadığınız öğeleri doküman kütüphanelerinden silin. 54 DERS 2

74 3. New Folder düğmesini kullanarak yeni bir kütüphane klasörü oluşturun. Klasöre graphics ismini verin ve her iki grafik sembolünü de klasörün içine koyun. Genellikle çok fazla sayıda öğeniz olacağından böyle durumlarda büyük fayda sağlayan kütüphane klasörlerine ihtiyaç duyacaksınız. Öğelerinizi doğru isimler verilmiş klasörlere yerleştirerek çalışmanız boyunca hayatınızı kolaylaştıracaktır. Library panelinin altındaki New Folder düğmesine basın ve oluşan klasöre graphics ismini verin. klasör ismini değiştirmek isterseniz isim üzerine çift tıklamanız ve yeni ismi girip Enter a basmanız yeterlidir. Şimdi her iki grafik sembolünü de bu klasöre sürükleyin. Kütüphane klasörü varsayılan olarak kapalıdır. Klasör simgesine (klasör ismine değil) çift tıklayarak onu açabilir ve içindekileri görebilirsiniz. Klasör ismine çift tıklarsanız Flash ismi değiştirmek istediğinizi düşünecektir. 4. Dört kütüphane klasörü daha oluşturun, bunlara components, buttons, media ve movie clips isimlerini verin. Sıradaki uygulamalarımızda bu klasörlerin her birine yeni öğeler atacağız. 5. Kütüphaneden grmenugraphic sembolünü açın. Kütüphanede bir sembole çift tıkladığınızda sembol düzenleme moduna geçiş yapmış olursunuz. Bu modda sembolün temel özellikleri üzerinde yaptığınız değişiklikler sembolün dokümanınızdaki her kullanımını etkiler. graphics klasörünüz kapalıysa simgesine çift tıklayarak onu açın. grmenugraphic sembolüne çift tıklayın ve sembol düzenleme moduna geçin. Herhangi bir değişiklik yapmayın; sadece kütüphaneden sembol düzenleme moduna nasıl girebileceğimizi görmek için buradayız. Düzenleme çubuğundaki Scene 1 e tıklayın ve sembol düzenleme modundan çıkın. 6. Çalışmanızı kaydedin. Bitmap Resimlerin Alınması ve Optimize Edilmesi Şu anda Stage in üzerinde veya etrafında çeşitli grafik öğeleriniz var, bunların tümü vektörel grafikler. Ancak bazen bitmap resimlere de ihtiyacınız olacak; örneğin bitmap resimler arabiriminizi görsel bakımdan daha çarpıcı yapmanıza yardımcı olabilir. Bitmap resimler animasyon sırasında da kolaylık sağlarlar. Bir bitmap resmin animasyonu için piksellerin ekran üzerindeki yerlerinin değiştirilmesi yeterli iken vektörel bir grafiğin animasyonu için her karenin baştan çizilmesi (hesaplanması) gereklidir. GRAFİKLER 55

75 Bitmap resimlerin problemi yeniden boyutlandırmalar esnasında yaşanan çözünürlük kayıplarıdır. Bir bitmap resmi büyüttüğünüzde, hatta bazen küçülttüğünüzde bile, Stage üzerindeki resmin çözünürlüğü düşecektir. Bu bakımdan bitmap resimleri orijinal boyutlarında kullanmanız, büyütme ya da küçültmelerden kaçınmanız en doğrusu olacaktır. Resim ve grafikleri herhangi bir görüntü işleme programıyla oluşturabilirsiniz; Adobe Photoshop veya Macromedia Fireworks bu tür programlara iki güzel örnek. Flash ayrıca hem Fireworks hem de Photoshop ile resim düzenleme desteğine sahiptir: Grafikteki bitmap resme sağ tıklayıp Edit ya da Edit with komutunu verir ve resmi Fireworks veya Photoshop ta güncellerseniz tüm değişiklikler otomatik olarak Flash a da yansıtılır; resmi yeniden almanıza (import etmenize) lüzum kalmaz. Şimdiki uygulamamızda bizim için daha öncesinden hazırlanmış olan bitmap resimler alacağız ve bunları düğmeler, logo ve başlık alanında kullanacağız. Resimlerimiz burada PNG formatında, ancak Flash neredeyse varolan her bitmap formatını da destekler. 1. File > Import > Import to Library (Kütüphaneye Al) komutu ile düğmeler için kullanacağımız altı PNG dosyasını alın. Ardından düğmeleri kütüphanedeki buttons klasörüne koyun. Import to Library komutunu seçtiğinizde alınan tüm öğeler Stage e değil doğrudan kütüphaneye yerleştirilir. Dilerseniz öğeleri doğrudan Stage e de alabilirsiniz, ancak yine de öğelerin birer kopyası kütüphaneye konulur. File menüsünden Import > Import to Library komutunu verin. CD deki Lessons\lesson02\assets\ dizini altında yer alan company_up, company_down, contact_up, contact_down, products_up ve products_down resimlerini seçin; bu öğelerin hepsini aynı ekranda iken seçmek için öğelere tıklarken klavyeden Ctrl tuşunu basılı tutun (OS X kullanıyorsanız Command tuşu). Resimleri seçtikten sonra Open (Aç) ya da Import to Library (Kütüphaneye Al) düğmesine bastığınızda resimler kütüphaneye alınacaktır. 56 DERS 2

76 Resimler kütüphaneye girdikten sonra tümünü buttons isimli kütüphane klasörüne taşıyın. Yukarıda yaptığınız gibi yine Ctrl ya da Command tuşu ile tıklayarak birden fazla öğeyi aynı anda seçebilirsiniz. 2. Almış olduğunuz bitmap resimlerin optimizasyon ayarlarını kontrol edin. Flash almış olduğunuz resim dosyaları için birkaç optimizasyon ayarı yapmanıza imkân verir. Varsayılan olarak, SWF dosyanızı yayınladığınızda tüm resimler JPG formatında ve % 50 kalite ile Optimize edilmiş durumda olurlar. Bu seçenekleri değiştirmek için kütüphaneden resmi seçin ve alttaki Properties düğmesine (mavi daire içindeki beyaz i simgesi) basın. Bu düğmeye bastığınızda açılan Bitmap Properties (Bitmap Özellikleri) iletişim kutusunda sıkıştırma metodunu belirleyebileceğiniz bir Compression menüsü vardır. Bu menüyü kullanarak Lossless (PNG/GIF) ve Photo (JPEG) sıkıştırma türleri arasında seçim yapabilirsiniz. Biraz önce almış olduğumuz düğmeler sadece birkaç basit renge sahip olduklarından PNG/GIF en doğru seçim olacaktır. Çok sayıda renk, tonlama ve degrade içeren grafikler içinse JPEG en uygun seçenektir. JPEG, Flash ın varsayılan sıkıştırma türüdür. En iyi sıkıştırma ve görüntü kalitesine ulaşmak için resimlerinizi Flash a almadan önce optimize etmeniz çok daha iyi olacaktır. Allow smoothing (Yumuşatma yap) kutusunu işaretlerseniz bitmap resimdeki kenarlar daha az keskin görünecektir. Yumuşatma çoğu zaman resmin daha iyi görünmesini sağlar. 3. CD deki Lessons\lesson02\assets\ dizininden title.png dosyasını alın ve sıkıştırma özelliklerini değiştirin. Yine File > Import > Import to Library komutunu verin ve title.png dosyasını alın, sonra da kütüphanedeki media klasörüne taşıyın. Şimdi resme sağ tıklayın ve gelen menüden Properties komutunu vererek Bitmap Properties iletişim kutusunu açın; bu da Bitmap Properties iletişim kutusunu açmanın bir diğer yolu. GRAFİKLER 57

77 title.png dosyasının Compression metodu olarak Photo (JPEG) seçin ve Use document default quality (Kalite için varsayılan doküman değerini kullan) kutusundaki işareti kaldırın, Quality değerini de 50 yerine 80 yapın. Son olarak OK düğmesine tıklayın ve çıkın. 4. Resmi background katmanında Stage e yerleştirin ve 0,0 noktasına getirin. Ardından background katmanını kilitleyin. İlk olarak, eğer kapalıysa background katmanının kilidini açın. background katmanını seçin ve title.png dosyasını kütüphaneden Stage e taşıyın. Şeklin etrafındaki delikli şeride dikkat edin; bu, şeklin bir sembol değil ham bir grafik olduğunu belirtir. Şekil seçili iken Properties denetçisine gidin ve X ve Y koordinat değerlerinin her ikisine de 0 girin. Şimdi de background katmanını kilitleyin, böylece şeklin yanlışlıkla hareket ettirilmesinin önüne geçmiş olursunuz. Grafik tam olarak Stage ile aynı genişlikte hazırlanmıştır, bu yüzden pozisyonunun sabit kalmasını istiyoruz. 5. Logo grafiğini kütüphaneye alın ve sıkıştırma metodunu Photo yapın. logo isimli yeni bir katman oluşturun ve grafiği bu katmanda Stage e taşıyın. CD deki Lessons\lesson02\assets\ dizininden logo.png resmini alın ve kütüphanedeki media klasörüne koyun. Resme sağ tıklayıp Properties komutunu verin. Compression değerini Photo yapın ve kaliteyi 80 olarak değiştirin. background katmanını seçin ve Insert Layer düğmesine basarak background katmanının üzerinde yeni bir katman oluşturun. Yeni katmana logo ismini verin. logo.png dosyasını yeni katmanda Stage e sürükleyin ve aşağıdaki resimde gördüğünüz gibi sol üst köşeye yerleştirin. Logonun bu köşede tam olarak nerede durması gerektiğine siz karar verin, ancak altında kalan grafiğin yazısını kapatmıyor olmasına da dikkat edin. Logoyu yerleştirdiğinizde logo katmanını da kilitleyin. 6. Çalışmanızı kaydedin. 58 DERS 2

78 Vektörel Şekillerin Alınması Flash a FreeHand (.FH7 den.fh11 e) ve Adobe Illustrator (.AI) dosyaları gibi karmaşık vektörel çizimler alabilirsiniz. Katmanları her tür dokümanda koruyabilirsiniz; ancak FreeHand ile hazırlanmış dokümanları aldığınızda doküman üzerindeki kontrolünüz özellikle daha fazla olacaktır. Vektörel çizimler kullanmanın en önemli avantajlarından biri doküman boyutunu değiştirmenin bitmap resimlerde yaşadığımızın aksine hiçbir çözünürlük kaybına yol açmamasıdır. Vektörel çizimlerin yapıtaşı pikseller değil matematiksel fonksiyonlardır; şekli yeniden boyutlandırdığınızda fonksiyon yeniden hesaplanır ve hiç kalite kaybı yaşanmaz. Şimdiki uygulamamızda FreeHand MX ile hazırlanmış bir dosyayı Flash a alacağız. Dosyadaki öğelere ilişkin çeşitli seçimler yapıp onları düzgün bir şekilde Flash dokümanına yerleştireceğiz. 1. Yeni bir Flash dokümanı oluşturun ve dokümanın özelliklerini değiştirin. Web sitesindeki harita, Web sayfasına (SWF dosyasına) çalışma zamanında dinamik olarak yüklenmektedir. Kullanıcı haritayı ziyaret ettiğinde ilgili SWF dosyası Tech Bookstore ana SWF dosyasına yüklenir. Yani haritayı yeni bir FLA dosyasına eklememiz gerekiyor, böylece ilgili SWF dosyasının daha sonra ana SWF dosyasına yüklenmesini sağlayabiliriz. File > New komutunu verin ve Type listesinden Flash Document seçimini yapıp OK (Tamam) deyin. Ayrı bir doküman sekmesinde yeni bir FLA dosyası açılır. Daha önceden açılmış olan dokümanlarınız varsa doküman sekmeleri ile kolayca onlara geçiş yapabilirsiniz. Properties denetçisinde Size (Boyut) düğmesine basın ve Stage in boyutlarını değiştirin; genişlik (w) olarak 500, yükseklik (h) olarak da 355 değerlerini girin. Frame rate değerini 21 yapın. (Hatırlarsanız Ders 1 deki ana SWF dosyamızın kare gösterim hızını da 21 fps olarak ayarlamıştık.) 2. FreeHand ile hazırlanmış vektörel bir dosyayı yeni Flash dosyanıza alın. Web sitemizin bir sayfasında vektörel olarak hazırlanmış bir harita var. CD deki Lessons\lesson02\ assets\ klasörünün altında yer alan bu harita FreeHand MX ile hazırlanmış olan bir dosya. FreeHand dosyaları sembol, sayfa, katman ve metin gibi bileşenleri Flash a aktarıldıkları zaman da korurlar, yani dosya içeriğini Flash altında da düzenleyebilirsiniz. GRAFİKLER 59

79 Layer 1 ismine çift tıklayarak katman ismini map olarak değiştirin. FreeHand dokümanını almadan önce map katmanını seçtiğinizden emin olun. File > Import > Import to Stage (Stage e Al) komutunu verin ve CD deki Lessons\lesson02\assets\ altında duran map.fh11 dosyasını alın. FreeHand Import iletişim kutusu karşınıza gelecektir. Pages (Sayfalar) için Scenes (Sahneler) veya Keyframes (Anahtar kareler) seçeneklerinden herhangi birini seçebilirsiniz; hangisini seçtiğiniz dosyada birden fazla sayfa olmadığı için önemli değil. Eğer dosyada birden fazla sayfa olsaydı her sayfa ana Timeline üzerinde ayrı sahne veya anahtar karelere yerleştirilecekti. Layers için Flatten (Düzleştir) seçimini yapın; yeni bir katmana ekleyeceğimiz bir sembolün haricinde haritanın farklı bölümlerinin farklı katmanlarda olmasına gerek duymuyoruz. 3. Stage üzerindeki sembolleri hizalayın. Dosya Stage üzerinde rasgele bir yere konulabilir. Stage üzerindeki tüm sembolleri seçmek için Edit > Select All (Tümünü Seç) komutunu verin ve Properties denetçisinde X ve Y için 0,0 değerlerini girin. Böylece haritamız daha düzgün bir şekilde yerleştirilmiş olacaktır. 60 DERS 2 Kütüphanede FreeHand Objects (FreeHand Nesneleri) adlı yeni bir klasör göreceksiniz. Bu klasör FreeHand dokümanı ile Flash a aktarmış olduğunuz öğeleri içerir. Bu sembolleri de tıpkı Flash ta oluşturduğunuz diğer semboller gibi çalışmalarınızda kullanabilirsiniz. 4. Bir sembolü kesin ve yeni bir katmana yapıştırın. map katmanı seçili iken Insert New Layer düğmesine basın ve yeni bir katman ekleyin. Yeni katmana map star ismini verin. map katmanındaki sarı renkli yıldız sembolünü seçin ve Edit > Cut (Kes) komutunu verin. Bu komutun ardından sembol kesilecek ve daha sonra istediğiniz yere yapıştırılmak üzere hafızaya alınacaktır. map star katmanını seçin ve Edit > Paste In Place (Aynı Konuma Yapıştır) komutunu verin. Bu komut sayesinde sembol, kesilmiş olduğu katmandaki aynı x ve y koordinatları ile yeni katmana yapıştırılır. Şu anda sembolü başka bir katmana taşımış olduk; bu sembol daha sonra yeniden karşımıza çıkacak.

80 5. Dosyayı map.fla adıyla kaydedin ve yayınlayın. File > Save komutu ile dosyayı sabit diskinizdeki TechBookstore klasörüne kaydedin. Dosya ismi olarak File Name alanına map.fla yazın ve OK düğmesine tıklayın. Şimdi de ana SWF dosyasına yüklenecek olan bir SWF dosyası yayınlamamız gerekiyor. File > Publish Settings komutunu verin ve Formats sekmesinde HTML deki onay işaretini kaldırın; bir HTML dosyası üretmek istemiyoruz. Son olarak Publish düğmesine bastığınızda SWF dosyası oluşturulacaktır. İlerleyen derslerde FLA dosyalarına ses ve video gibi diğer medya türlerini de aktaracaksınız. Şimdilik bu işlem hakkında temel bir bilgi ve deneyim edinmiş olmanız yeterli. Flash a aldığınız öğenin türü ne olursa olsun aktarım işlemi aşağı yukarı hepsinde aynıdır. Bazen, örneğin video aktarımı esnasında küçük farklar olsa da temelde değişen bir şey yoktur. Bitmap ve Degrade Dolgular Bu derste dolgulara bolca zaman ayırdık. Oluşturduğumuz menü arka plan grafiği sadece dolgu kullanıyor, kenar çizgileri içermiyordu. Dolgu renklerini belirlemek için onaltılık değerler kullanabileceğimiz gibi renk paletlerinden seçimler de yapabiliyorduk. Hatırlarsanız Color Mixer bize dolgu renkleriyle ilgili olarak Tools panelinden daha fazla seçenek sunuyordu. Color Mixer şu anda çalışma alanınızda Color panelinde açık durumda olmalı. Eğer değilse Window > Color Mixer komutuyla açabilirsiniz. Color Mixer kontrollerini kullanarak bitmap ve degrade dolgular oluşturabiliriz. Flash a almış olduğunuz bitmap resimleri dolgu olarak da kullanabilirsiniz. bookstore5.fla dosyanızda şu anda da çeşitli bitmap öğeler mevcuttur. Bir bitmap resmi dolgu olarak kullanmak istiyorsanız Color Mixer penceresindeki Type menüsünden Bitmap seçimini yapabilir ve bu seçimi yapmanızın ardından beliren Import düğmesini kullanabilirsiniz. Import düğmesine basmanızla birlikte o anda kütüphanede bulunan bitmap resimler görüntülenir. Bunlardan birini seçip dolgu yapabilirsiniz. GRAFİKLER 61

81 Bir alana bitmap dolgu uygulanırsa bitmap resim o alana döşenecektir (tile). Bitmap dolguyu yeniden boyutlandırmak için Gradient Transform (Degrade Dönüşüm) aracı kullanılır. Bu araçla bitmap dolguları boyutlandırabilir, döndürebilir ve bükebilirsiniz. Gradient Transform aracını dersimizin ilerleyen bölümlerinde kullanacağız. Şekilleri degrade ile de doldurabilirsiniz. Degrade, bir renkten başka bir renge kademeli olarak geçiş demektir. Flash ile iki farklı tipte degrade uygulayabilirsiniz: Çizgisel (linear) ve dairesel (radial). Dairesel degradelerde renk geçişi (renk değişimi) dairesel bir şekilde olurken çizgisel degradelerde bu geçiş düz bir hat üzerinde kendini gösterir. Daha zengin grafikler oluşturmak için her iki degrade tipinde de 16 renk kullanabilirsiniz. Gradient Transform aracı da degradenin odak noktasını hassas bir şekilde kontrol edebilmenize imkân tanır. Şimdiki uygulamamızda ana SWF dosyasındaki öğelerin bir kısmı için degradeler oluşturacağız. Çalışma alanımızda daha önce Stage in dışına taşıdığımız bir daire ve bir de dikdörtgen olmalı. Bu iki öğeye farklı dolgular uygulayacağız. 1. bookstore5.fla dosyasını sabit diskinizdeki TechBookstore klasörüne bookstore6.fla olarak yeniden kaydedin. Önemli değişiklikler yapacağız, bu yüzden dosyanın yeni bir kopyası üzerinde çalışacağız. 2. background katmanının kilidini açın. Daha önce oluşturmuş olduğunuz dikdörtgeni yeniden Stage e taşıyın ve Color Mixer i kullanarak bir degrade uygulayın. Daha önce 779 a 15 piksel boyutlarında bir dikdörtgen oluşturmuştuk. Dikdörtgeni seçin ve Stage e taşıyın. Color Mixer ekranında Type menüsünden Linear seçimini yapın. Bu seçimi yapmanızla birlikte dikdörtgene çizgisel bir degrade uygulanacaktır. Dolgu tipi Renk seçici Onaltılık değer Degrade tanım çubuğu 62 DERS 2

82 Degrade tanım çubuğunun solundaki renk seçiciye tıklayın. Hemen üstteki onaltılık değer alanına #CCCCCC girin ve Enter a basın. Alternatif olarak renk seçiciye tıkladıktan sonra üstteki renk paletini kullanarak da istediğiniz rengi belirleyebilirsiniz. Degrade tanım çubuğunun sağındaki renk seçici hâlâ beyaz renkte olmalı; eğer değilse simgesine tıklayın ve rengini beyaz (#FFFFFF) yapın. Rengi RGB alanlarını kullanarak da değiştirebilirsiniz. Degradeye bir renk eklemek için degrade tanım çubuğunda herhangi bir yere tıklayın. Böylece yeni bir renk seçici belirir ve siz de renginizi ekleyebilirsiniz. En fazla 16 renk ekleyebileceğinizi hatırlayın. Bir rengi çıkarmak için seçiciyi çubuktan uzağa doğru sürüklemeniz yeterlidir. 3. Gradient Transform aracını kullanarak degradeyi değiştirin. Eğer degradeniz dikdörtgene bir şekilde uygulanamadıysa Tools panelinden Paint Bucket (Boya Kutusu) aracını seçin ve ardından dikdörtgeninize tıklayın. Degradenin şimdi uygulanmış olması lâzım. Degrade verdik ancak henüz boyutlandırma ve döndürme yapmadık; bunlar için de Gradient Transform aracını kullanacağız. Tools panelinden Gradient Transform aracını seçin ve dikdörtgendeki degradeye tıklayın. Çeşitli kontrol öğeleri belirecektir. Degradeyi döndür Degradeyi taşı Degrade boyutunu değiştir Dikdörtgenin sağında, üstteki döndürme tutacağına tıklayın ve fareyi aşağıya doğru sürükleyerek degradeyi saat yönünde 90 derece döndürün. Böylece degrade dönüşümü yatay değil dikey olacaktır. Ancak dikdörtgen yüksekliği çok düşük olduğundan yeni dönüşüm çok etkili görünmeyebilir. Degradeyi daha etkin kılmak için yeniden boyutlandırmamız gerekir. Şimdi şeklin altına gelmiş olan kare simgesine tıklayın ve onu hafifçe yukarıya doğru sürükleyin. Sürükleme esnasında beliren yatay sınırlayıcı çizgilerin dikdörtgenin kenarlarına kenetlenmesini sağlayarak daha belirgin bir degrade oluşturabilirsiniz. GRAFİKLER 63

83 4. Dikdörtgeni bir grafik sembolüne dönüştürün ve title.png grafiğinin hemen altına yerleştirin. Selection aracı ile dikdörtgeni seçin; dikdörtgenin tümüyle seçili olmasına dikkat edin. Dikdörtgeni Object Drawing modeliyle çizdiğimiz için üzerine bir kere tıklamak onu seçmek için yeterli olacaktır (çift tıklama yaparsak düzenleme moduna gireriz). Dikdörtgeni bir grafik sembolüne dönüştürmek için F8 e basın veya ana menüden Modify > Convert to Symbol komutunu verin. Yeni sembolü grbar olarak isimlendirin. Properties denetçisinde sembolün X ve Y değerlerini sırsıyla 0 ve 109 yapın. Bu koordinatlar sembolü title.png grafiğinin hemen altına taşıyacaktır. Düzenli yapıyı muhafaza etmek için grbar sembolünü kütüphanede graphics klasörüne yerleştirin. Bir sembolü, Object Drawing modeliyle çizilmiş bir nesneyi veya gruplanmış bir öğeyi seçtiğinizde öğenin etrafında onu seçmiş olduğunuzu gösteren mavi bir çerçeve belirir. 5. Kütüphanede graphics klasöründeki grmenugraphic sembolünü açın. gradient katmanındaki şekli çizgisel bir degrade ile doldurun. Önce kütüphanedeki graphics klasörüne, sonra da bu klasördeki grmenugraphic sembolüne çift tıklayın. Şu anda sembol düzenleme moduna girmiş oldunuz. Tools panelindeki Zoom aracını ya da düzenleme çubuğundaki yakınlaştırma menüsünü kullanarak grafiği büyütebilirsiniz. Layers panelinde gradient katmanına sağ tıklayın ve Lock Others (Diğerlerini Kilitle) komutunu verin. Bu komut seçilemez durumdaysa (silik görünüyorsa) muhtemelen diğer katmanlar zaten kilitlidir. Eğer gradient katmanı da kilitli ise onun kilidini açın. Böylece diğer katmanlar üzerinde yanlışlıkla bir değişiklik yapılması ihtimalini de ortadan kaldırmış oluyoruz. Burada da yukarıdaki dikdörtgen için kullandığımız degradeyi uygulayacağız. Son uygulamadan bu yana dolgu tipini değiştirmediğimiz için doğrudan Paint Bucket (Boya Kovası) aracını seçebilir ve sonra da gradient katmanındaki şeklin üzerine bir kez tıklayarak degrade dolguyu uygulayabiliriz. Gradient Transform aracı ile degradeyi saat yönünde 90 derece döndürün ve degradenin dikey uygulanmasını sağlayın. Ardından yukarıda dikdörtgen örneğinde yaptığımız gibi degrade boyutunu şeklin kenarları ile aynı seviyeye getirin. Düzenleme çubuğundaki Scene 1 e tıklayın ve ana Stage e dönün. 64 DERS 2

84 6. Daha önce oluşturduğunuz daireyi Stage de boş bir yere taşıyın ve şekle dairsel bir degrade verin. Daireyi bir sembole dönüştürün ve kendi katmanına taşıyın. Daha önce oluşturduğumuz daire logonun da yer alacağı animasyonun bir parçası olacak. Önce daireyi Stage de boş bir yere taşıyın. Color Mixer penceresine gidin ve Type olarak bu kez Radial seçimini yapın. Soldaki renk seçiciye tıklayın ve onaltılık değer alanına #00cc00 girin. Bu değer parlak, yeşil bir renge ait. Şu anda çok hoşunuza gitmeyebilir ancak site tamamlandığında diğer öğelerle birlikte daha çekici görünecek. Şimdi de degrade tanım çubuğunun sağındaki renk seçiciye tıklayın. Degradenin bu bölgesinin tamamen saydam olmasını istiyoruz, bunun için Alpha değeri olarak 0 girin ve Enter a basın. (Değeri belirtmek için Alpha menüsündeki çubuğu da kullanabilirsiniz.) Degradenin daireye uygulandığından emin olun. Ardından daireyi bir sembole dönüştürmek için F8 tuşuna basın (daire seçili iken). Sembol ismi alanına grglow yazın, sembol türü olarak da Graphic seçeneğini işaretleyin. İşiniz bittiğinde sembolü kütüphanedeki graphics klasörüne taşıyın. background katmanına sağ tıklayın ve Insert Layer komutu ile yeni bir katman ekleyin. Yeni katmana glow animation adını verin. grglow sembolünü background katmanında iken kesin ve yeni katmana yapıştırın. Degrade kullanımında ölçülü olun; degradeler dosya boyutunu önemli oranda artırabilirler. 7. Dokümanı kaydedin. GRAFİKLER 65

85 Grafikler Üzerinde Yapabileceğiniz Diğer İşlemler Tech Bookstore Web sitesi için yeni grafikler oluşturduk, farklı kaynaklardan grafikler aldık ve grafiklerde dolgu kullandık. Ancak grafikler üzerinde yapabileceğimiz çalışmalar sadece bunlarla sınırlı değil. Dilerseniz grafikleri döndürebilir, boyutlarını, alfa değerlerini ve renk kullanımlarını değiştirebilirsiniz. Şimdiki uygulamamızda çeşitli araçları ve Properties denetçisini kullanarak grafiklerde bazı yeni değişiklikler yapacağız. 1. bars adlı yeni bir katman oluşturun ve grbar sembolünü bu katmana taşıyın. background katmanının hemen üzerinde bars isimli yeni bir katman oluşturun. background katmanında duran grbar grafik sembolüne sağ tıklayın ve Cut (Kes) komutunu verin. Yeni oluşturduğunuz bars katmanını seçin ve Edit > Paste In Place (Aynı Konuma Yapıştır) komutunu vererek sembolün kesilmiş olduğu yerdeki aynı x ve y koordinatları ile yeni katmana yapıştırılmasını sağlayın. 2. grbar grafik sembolünü kütüphaneden Stage e taşıyın ve döndürün. Kütüphaneden Stage e taşıdığınız semboller birbirlerinden bağımsızdır. Stage üzerinde bir sembolü değiştiriyorken diğerine hiç müdahale etmeyebilirsiniz. Ancak Stage deki bir sembole çift tıklamanız halinde sembol düzenleme modu açılır ve bu modda yapacağınız değişiklikler o sembolün tüm örneklerine yansır. Kısacası, konu semboller ise çift tıklarken dikkatli olun. bars katmanı seçili iken grbar sembolünü kütüphaneden Stage e taşıyın. Sembole çift tıklayarak sembol düzenleme moduna girin. Tools panelinden Gradient Transform aracını seçin ve saat yönünün aksine döndürerek degradenin ters yönde verilmesini sağlayın. 3. Align paneli yardımıyla ikinci grbar sembolünü Stage in altına taşıyın. Align paneli açık değilse Window > Align (Hizala) komutunu verin. Panelin sağındaki To stage düğmesinin basılı (parlak durumda) olmasına dikkat edin; böylece nesneleri dizerken Stage i referans almış oluyoruz. Bu düğme basılı değilken seçilmiş olan nesneler birbirlerine göre hizalanacaklardır. Sola hizala (Align left edge) Alta hizala (Align bottom edge) Stage e göre hizala (To stage) 66 DERS 2

86 Align kısmındaki Align left edge düğmesine basarak sembolün sol tarafı ile Stage in sol kenarının aynı hizada olmasını sağlayın. Yine Align kısmındaki Align bottom edge düğmesine basın ve sembol ile Stage in alt kenarlarının aynı hizada olmasını sağlayın. Ardından bars katmanını kilitleyin. 4. grglow grafik sembolünün alfa değerini ve boyutunu değiştirin. Daha önce Tech Bookstore için bir logo almış ve bunu logo katmanında Stage e yerleştirmiştik. Şimdiki adımda logo katmanının kilitli durumda olması gerekiyor. glow animation katmanında yer alan grglow sembolünü seçin ve Stage in sol üst köşesindeki logoya doğru sürükleyin. Logonun etrafındaki parlaklığın görünür olup olmadığına bakın. Eğer parlaklığın yeterince görünmediğini düşünüyorsanız Gradient Transform aracı ile grglow sembolündeki degradeyi yeniden boyutlandırabilirsiniz (sembole çift tıklayıp sembol düzenleme moduna girerek). Bu işlem sonrasında logonun etrafında hafif bir parlaklık fark ediliyor olmalı. GRAFİKLER 67

87 Rengin çok parlak olduğunu düşünüyorsanız sembolün alfa değerini düşürebilirsiniz. Sembol seçiliyken Properties denetçisinde görünen Color menüsüne tıklayın ve Alpha seçimini yapın. İlgili alana uygun bir değer girip Enter a basın. 5. Tüm katmanlarınızı kilitleyin ve çalışmanızı kaydedin. Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Tools panelini ve araçları tanıdık (Sayfa 33-34). Merge Drawing ve Object Drawing modellerini gördük (Sayfa 34-36). Vektörel çizimler ve bitmap resimler kullandık (Sayfa 36-39). Grafik çizim araçlarını kullandık (Sayfa 39-42). Kılavuzların kullanımını öğrendik (Sayfa 42-44). Grafik sembolleri oluşturduk (Sayfa 44-49). Maske katmanları oluşturduk (Sayfa 49-50). Kenar çizgileriyle çalıştık (Sayfa 50-53). Öğeleri düzenlemek için kütüphaneyi kullandık (Sayfa 53-55). Flash a bitmap resimler ve vektörel çizimler aktardık (Sayfa 55-61). Degradeler kullandık (Sayfa 61-65). Mevcut grafikler üzerinde çeşitli değişiklik işlemleri gerçekleştirdik (Sayfa 66-68). 68 DERS 2

88 3 Metinler Metinler başta ticari ve bilgi amaçlı siteler olmak üzere neredeyse her tür Web sitesi için büyük önem taşır. Flash, dokümanlarınıza eklediğiniz metinleri kontrol etmenize ve düzenlemenize imkân sağlayan zengin seçeneklere sahiptir. Metinler bir sunucudan yüklenebileceği gibi doğrudan Stage üzerine de yerleştirilebilir. Flash ta karakter aralıklarını belirleyebilir, metnin konumunu ve rengini değiştirebilir, karakterlerin ekranda daha yumuşak hatlarla görünmesini sağlayabilirsiniz. HTML ya da CSS (Cascading Style Sheets) ile yapamayacağınız birçok metin efektini Flash kullanarak kolaylıkla gerçekleştirebilirsiniz. Bu derste Tech Bookstore sitesine metin alanları ekleyeceğiz.

89 Bu dersimizde dokümanlarımıza metin alanları ekleyip bu alanlar üzerinde çeşitli değişiklikler yapacağız. Statik bir metin alanına nasıl filtre uygulayabileceğimizi ve dokümanın yazım denetimini nasıl yapabileceğimizi de göreceğiz. Metinler ve fontlara ilişkin temel bilgileri öğreneceğimiz bu ders bizi aynı zamanda ilerleyen bölümlerdeki daha kompleks metodlara da hazırlayacak. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Text (Metin) aracını kullanmayı ve metin alanları eklemeyi öğreneceğiz. Statik metinleri ve aygıt fontlarını tanıyacağız. Metnin daha okunabilir olması için metin özelliklerini değiştireceğiz. Metin alanlarının Stage üzerindeki yerlerini ayarlamayı öğreneceğiz. Font ve karakterleri bir SWF dosyasına eklemeyi öğreneceğiz. Metinlere filtre uygulayacağız. Dokümanın yazım denetimini yapacağız. Yaklaşık Süre Bu dersi yaklaşık 45 dakikada tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: Yok Başlangıç Dosyaları: lesson03/start/bookstore6.fla Tamamlanmış Dosyalar: lesson03/complete/bookstore7.fla 70 DERS 3

90 Text Aracının Kullanılması Flash 8 de bir metni çeşitli şekillerde kullanabilirsiniz. Statik metin, dinamik metin ve giriş metni olmak üzere tercih edebileceğiniz üç farklı metin türü vardır ve bunların her biri farklı amaçlarla kullanılır. Statik metinler resim ya da grafik gibidir: Stage üzerinde dilediğiniz metni göstermenize imkân verir ve siz onları elle düzenlemedikçe değişmezler. İlgili alandaki metni ActionScript kullanarak değiştirmek (örneğin kullanıcı yanlış bir giriş yaptığında) veya metni bir sunucudan yüklemek istediğinizde ise dinamik metinleri kullanabilirsiniz. Giriş metni ise adından da anlayacağınız gibi son kullanıcının Flash Player da görüntülenmekte olan SWF dosyasına metin girişi yapmasına olanak verir. Giriş metnini kullanıcıdan çeşitli bilgiler (isim ve adres gibi) almak için kullanabilirsiniz. Girilen metin ActionScript tarafından alınır ve sonra da bir sunucuya gönderilir. Flash Basic 8 ve Flash Professional 8 ile gelen araçları kullanarak bilgi giriş formları veya aşağıya doğru kaydırılabilen uzun metinler oluşturabilirsiniz. Metinlerin pek çok özelliğini Properties denetçisinden kontrol edebilir ve değiştirebilirsiniz. Fontların tip, renk ve büyüklüğü, karakterler arası mesafe, karakterlerin konum ve hizası, metin alanlarının yönü gibi pek çok özeliği Flash ile düzenleyebilirsiniz. Bunların yanı sıra karakterlerin kalın veya italik olup olmayacağını belirlemek de elinizde. Dahası, okunabilirliği artırmak için font kenarlarını yumuşatma seçeneklerini de kontrol edebilirsiniz. Tools panelinden Text aracını seçerek Properties denetçisindeki metin ayarlarını görebilirsiniz. Aşağıdakine benzer bir sekme görmüyorsanız Stage e bir kez tıklayın. Sola yasla Metin türü Font İtalik Kalın Metin/dolgu rengi Font boyu Ortala Sağa yasla Her iki yana yasla Biçimlendirme seçenekleri Karakter aralığı Üst simge / alt simge Seçilebilir Otomatik karakter aralığı düğmesi Font gösterim metodu URL bağlantısı Metin yönünü değiştir METİNLER 71

91 Text type (metin türü) menüsünden yapmış olduğunuz statik metin, dinamik metin ya da giriş metni seçimine göre Properties denetçisindeki seçenekler değişebilir. Bir FLA dosyasını düzenlenmek üzere başka birine gönderirseniz, dosyada kullanmış olduğunuz fontların o kullanıcının sisteminde de yüklenmiş olması gerekir. Dosyadaki orijinal fontlar diğer kullanıcıda yüklü değilse dosya yine de açılabilir ve düzenlenebilir; ancak orijinal fontlar yeni sistemde yüklü olmadığından bunların yerine o sistemde bulunan alternatif fontlar kullanılır. Dosya, kendisinde kullanılmış olan fontların yüklü olduğu başka bir sistemde ise orijinal fontları aynen korunarak düzenlenebilir. Statik Metinler ve Aygıt Fontları Bir FLA dosyasında statik metin kullandığınızda Flash metindeki her karakterin birer taslağını oluşturur ve metni göstermek için bu taslakları kullanır. Seçmiş olduğunuz font ne olursa olsun metni görüntüleyen herkes bu karakterleri aynen Stage üzerinde oldukları gibi görebilir. Bu kullanımın bir dezavantajı ise statik metinlerin SWF dosyasının boyutunu artırmasıdır. Ancak aygıt fontlarını kullanarak bu problemi bertaraf edebilirsiniz. Aygıt fontları metodunda Flash ın oluşturduğu taslaklar değil dosyanın görüntülendiği sistemde yüklü olan fontlar kullanılır. Giriş metinleri ve dinamik metinler için varsayılan değer olan aygıt fontları yatay statik metin alanları için de kullanılabilir. Eğer seçmiş olduğunuz font son kullanıcının makinesinde yüklü değilse SWF dosyası Web tarayıcısının varsayılan değeri olan sans fontunu kullanır. Flash ta üç adet varsayılan aygıt fontu vardır: _sans, _serif ve _typewriter. _sans fontu Arial veya Helvetica ya, _serif Times New Roman a ve _typewriter da Courier fontuna benzer. Aygıt fontlarında yumuşatma (anti-alias) yapılamaz, bu da onları küçük boyutlu kullanımlar için uygun bir hale getirir. Flash 8, font böyundan bağımsız olarak okunabilirliği artırmanızı sağlayacak araçlara sahiptir. Font seçimini zorlu kılan etkenlerden biri de Flash ın yumuşatma (anti-aliasing) özelliğidir. Statik metinler Flash ta varsayılan olarak yumuşatılır, bu da özellikle font boyu küçük olduğunda yazıların bulanık görünmelerine yol açar ve okunmalarını zorlaştırır. Geçmiş sürümlerde bu olumsuzluktan kaçınmanın tek yolu ya yumuşatma seçeneğini tümden kapatmak ya da bir aygıt fontu veya dinamik bir metin alanı kullanmaktı. Şimdi ise Properties denetçisindeki Font rendering method (font görüntüleme metodu) menüsünü kullanarak çeşitli alternatifler arasından seçim yapabilirsiniz: Bitmap metin (yumuşatma yapılmaz), Anti-alias for animation (animasyon için yumuşatma), Antialias for readability (okunabilirlik için yumuşatma) ve sadece Flash Professional 8 de bulunan Custom anti-alias (özel yumuşatma). 72 DERS 3

92 Dokümanlara Statik Metin Eklemek Flash ta metinleri etkin bir şekilde kullanmayı öğrenmenin ilk adımı Stage e basit statik metinler eklemektir. Şimdiki alıştırmamızda FLA dosyasına statik bir metin ekleyeceğiz. Karakterler dosyaya dahil edileceğinden istediğiniz fontu kullanmakta serbestsiniz; siteyi ziyaret eden herkes bu fontları aynen görebilecek. 1. TechBookstore klasöründeki bookstore6.fla dosyasını açın ve bookstore7.fla olarak kaydedin. Dilerseniz CD-ROM daki lesson02/start dizininden de bookstore6.fla dosyasını açabilirsiniz. Dosyayı açın ve bookstore7.fla ismiyle kaydedin. 2. Statik metin için yeni bir katman ekleyin ve bu katmana page names adını verin. Bir katman klasörü oluşturun ve bunu da text olarak isimlendirin. graphics katman klasörünü seçin ve onun üzerine yeni bir katman ekleyin; katmana page names adını verin. Bu yeni katmanı seçin ve Layers panelinin sol alt kısmındaki Insert Layer Folder düğmesine tıklayarak yeni bir katman klasörü oluşturun; buna da text adını verin. page names katmanını text klasörüne sürükleyin. 3. Ana dokümanın Timeline ını 70 kare olarak belirleyin. Tech Bookstore sitesindeki çeşitli sayfaları ana dokümanın Timeline ı boyunca organize edeceğiz. Bu sayfaların her birinde sayfanın adını belirten statik bir metin alanı bulunacak. Şimdi uygulayacağımız prosedür en iyi yöntemlerden biri değilse de öğrenme amaçlı olarak gayet faydalı. Normalde sitenizdeki farklı sayfaların her biri, kullanıcıdan gelen istekler doğrultusunda arabirime yüklenen farklı SWF dosyaları olacaktır. Bu yöntemi ilerleyen dersimizde öğreneceğiz ancak şimdilik istediğimiz tek şey metinleri Timeline ile nasıl kullanabileceğimizi görmek. labels katmanının 70. karesine tıklayın (sadece bu kare seçilmiş olmalı). Shift tuşunu basılı tutun ve background katmanının da 70. karesine tıklayın. Kareleri seçerken Shift tuşunu basılı tutmanız aradaki tüm katmanların da 70. karelerinin seçilmesini sağlar. Şimdi klavyeden F5 tuşuna basarak ya da ana menüden Insert > Timeline > Frame komutunu vererek tüm katmanları aynı anda 70 kareye genişletin. METİNLER 73

93 4. Web sitesinin sayfalarını belirleyecek şekilde katmanları organize edin. İlk olarak Tech Bookstore Web sitesinin farklı bölümlerini göstermek üzere labels katmanına çeşitli anahtar kareler eklememiz gerekiyor. labels katmanının 10. karesini seçin ve bir anahtar kare eklemek için F6 ya basın. Aynı şekilde 20, 30, 40, 50 ve 60. karelere de birer anahtar kare ekleyin. Bu anahtar karelerin her biri o bölümün başlığıyla etiketlenecektir. labels katmanının 1. karesi zaten etiketlenmiş durumda (home adıyla). 10. kareyi seçin ve Properties denetçisindeki <Frame Label> metin alanına catalog yazın ve Enter a basın. Label type (Etiket türü) alanını Name olarak bırakın. Diğer beş anahtar kare için de aynı işlemi yapın ve bunlara sırasıyla reviews, tour, news, feedback ve map isimlerini verin. 5. Text aracını seçin ve Properties denetçisinden font özelliklerini değiştirin. Tools panelinden Text aracını seçin. Properties denetçisinde Text type (Metin türü) menüsünden Static Text (Statik Metin) seçimini yapın. Font menüsünden Arial fontunu seçin ve font boyu olarak 12 girin. Text (fill) color (Metin [dolgu] rengi) düğmesine tıklayın ve açılan paletin sol üst köşesindeki hexadecimal alana # değerini girin. Bold (Kalın) düğmesine basın; böylece metnimiz normalden daha kalın olacaktır. Metnin sağa dayalı olmasını istiyoruz, onun için Align Right (Sağa Yasla) düğmesine basın. Diğer ayarları varsayılan değerlerde bırakabilirsiniz. Font rendering method (Font gösterim metodu) menüsünden Anti-alias for readability (Okunabilirlik için yumuşat) seçimini yapın. Yaptığınız tüm bu değişikliklerin ardından Properties denetçiniz aşağıdaki gibi görünüyor olmalıdır. 74 DERS 3

94 6. Statik metin kullanarak sitenin her bir alanına sayfa isimlerini ekleyin. Şimdi Stage üzerinde bir metin alanı oluşturacağız. Sayfa isimleri, başlık alanının altında duran çubuk grafiğinin sağ tarafında yer alacak. page names katmanında 1. kareyi seçin. Metnin sağa dayalı olacağını hatırlayın; bu yüzden Stage üzerinde metnin bitmesini istediğiniz yere tıklayın. Metin alanına HOME yazın. Ardından Tools panelinden Selection aracını seçin ve henüz oluşturmuş olduğunuz metin alanını sayfa isimlerinin görünmesini istediğiniz yere taşıyın. Metin alanlarını iki şekilde oluşturabilirsiniz. Siz yazdıkça genişleyen bir metin alanı istiyorsanız tek yapmanız gereken Stage e tıklamak ve yazmaya başlamak. Böyle bir durumda alanın sağ üst köşesinde gördüğünüz minik beyaz daire metin alanının genişleyebilir olduğunu belirtir. Eğer metin alanınızın sabit bir genişlikte olmasını istiyorsanız Stage e tıklayın ve Text aracını istediğiniz noktaya kadar sürükleyin. Bu kez sağ üst köşede beyaz bir kare belirecektir; bu da metin alanının sabit genişlikte olduğunu gösterir. Bu daire ve kareyi tutup sürükleyerek metin alanının genişliğini değiştirebilirsiniz. page names katmanını Timeline ı genişlettikten sonra eklemiş olduğunuzdan bu katmandaki kareler 70. kareye kadar uzanmış durumdadır. Burada 10. kareyi seçin ve F6 tuşuna basarak bir anahtar kare ekleyin. Anahtar kare ekleme adımını 20, 30, 40, 50 ve 60. karelerde de tekrarlayın. Şimdi de her sayfaya gerçek isimlerini vermemiz gerekiyor, çünkü şu anda hepsinin ismi HOME. 10. kareye gidin ve HOME olarak gözüken sayfa ismine çift tıklayın. Sayfa ismi olarak CATALOG METİNLER 75

95 yazın. Bu esnada Stage üzerindeki metin alanını ya da metinle ilgili değerleri değiştirmemeye dikkat edin, böylece metin alanları her sayfada tutarlı ve aynı görünümde olacaktır. Aynı adımları diğer sayfalar için de izleyin ve sayfalara 4. adımda kare etiketleri için kullandığınız isimleri verin. Tek yapmanız gereken page names katmanındaki anahtar kareleri tek tek seçmek ve HOME olarak gözüken ismi o anahtar karenin ismiyle değiştirmek. Sayfa isimlerini BÜYÜK harflerle yazın. Tüm sayfalara isim verdikten sonra page names katmanını kilitleyin. Timeline şu anda biraz önceki gibi görünüyor olmalıdır. 7. Statik metin kullanarak başlık alanının üst kısmına sitenin sloganını yazın. Şimdi sayfa isimleri için kullandığımız alanın üzerinde bir başka metin alanına ihtiyacımız var. Bunun için öncelikle yeni bir katman oluşturmamız gerekiyor çünkü sayfa isimleri her sayfada farklıyken sloganımız her sayfada aynı olmalı. page names katmanını seçin ve yeni bir katman ekleyin. Yeni katmana propaganda ismini verin. Katmandaki boş anahtar kare ve diğer kareler 70. kareye kadar uzatılacaktır. Text aracını seçin. Properties denetçisinde daha önceden girilmiş değerlerin çoğunu aynen koruyacağız. Bu kez ayrıca Italic (İtalik) düğmesine de basın ve Text (fill) color değerini # yapın. propaganda katmanında iken, Stage üzerinde logonun yer aldığı başlık bölümüne Text aracı ile tıklayın ve SELLING QUALITY BOOKS about MACROMEDIA SOFTWARE yazın. Tools panelinden Selection aracını kullanarak metni başlık bölümünün sağ alt tarafında uygun bir yere taşıyın. Sloganın sayfa isimleri ile aynı hizada olmasını istiyorsanız dikey bir kılavuz kullanın. Dikey cetvelden bir kılavuz sürükleyin ve onu sayfa isminin sağ tarafı ile aynı hizaya getirin. Ardından sloganı seçin ve metin alanının kılavuza kenetlenmesini sağlayın. 76 DERS 3

96 8. Stage in altına fontları yumuşatılmamış bir metin ekleyin. Flash ta küçük fontların okunması bazen çok zor olabilir; Flash ın fontlar için taslaklar oluşturması ve yumuşatma (anti-aliasing) yapması fontların bulanık görünmesine yol açar. Properties denetçisindeki Font rendering method (Font görüntüleme metodu) menüsünden Bitmap text (no anti-alias) seçimini yaparak bu bulanıklığı önleyebilirsiniz. Yumuşatma (anti-aliasing) işlemine maruz kalmamış fontlar ekranda daha keskin görünecektir. Mümkün olduğunca 8 puntodan küçük fontlar kullanmayın. Aksi halde yazılarınızın okunması zorlaşacaktır. 8 puntodan daha küçük bir değer kullanmaya mecbur kaldıysanız mutlaka Bitmap text seçimini yapın. Şimdi propaganda katmanına biraz daha metin ekleyeceğiz. Sayfanın sonunda telif ve irtibat bilgileri bulunmalı. Bu bilgileri küçük fontlarla vereceğiz çünkü fazla dikkat dağıtıcı olmalarını istemiyoruz. Text aracını seçin. Properties denetçisinde font yine Arial olarak kalsın. Ancak font boyunu 10 yapın ve Text (fill) color değerini yine # olarak belirleyin. Bold ve Italic bu kez seçili olmasın. Font rendering method menüsünden Bitmap text (no anti-aliasing) seçimini yapın, böylece yazılarımız Stage üzerinde daha rahat okunabilir bir durumda olacak. Text aracı ile Stage in altında yer alan çubuğun ortasına tıklayın ve Tech Bookstore 2006 yazın. OS X altında sembolünü yazmak için Option+G tuşlarını kullanabilirsiniz. Windows altında ise Başlat > Programlar > Donatılar > Sistem Araçları > Karakter Eşlem (Start > Programs > Accessories > System Tools > Character Map) uygulamasını açarak sembolü buradan kopyalayabilirsiniz. Aynı çubukta ikinci bir metin alanı açın. Şimdi ekleyeceğimiz metin alanı da az önce eklediğimiz alanla aynı özelliklere sahip olduğundan Properties denetçisinde herhangi bir değişiklik yapmamıza lüzum yok. Stage e tıklayın ve info@trainingfromthesource.com adresini yazın. METİNLER 77

97 9. Align panelini kullanarak Stage deki küçük metinleri hizalayın. Her iki test alanını da oluşturduktan sonra Selection aracını seçin ve Align panelini açın. To stage: düğmesinin basılı (parlak) olmasına dikkat edin. Oluşturduğunuz ilk metin alanına tıklayın ve sonra da Align horizontal center düğmesine basın; böylece metin alanı Stage in tam ortasına yerleştirilir. Metnin çubuktaki dikey konumunu ortalamak içinse klavyenizden aşağı ve yukarı ok tuşlarını kullanın. E-posta adresinin yazılı olduğu ikinci metin alanını seçin ve Align panelinde Align right edge düğmesine basın. Bu işlem sonunda metin alanı Stage in en sağ kenarına yaslanacaktır. Eğer metin alanının çok fazla sağa kaydığını düşünüyorsanız alanı seçin ve sol ok tuşuyla biraz sola taşıyın. Şimdi de bu iki metin alanının birbirlerine göre yatay olarak hizalandığından emin olalım. Selection aracı ile alanlardan birini seçin. Ardından Shift tuşunu basılı tutarak diğer alanı da seçin. Align panelinde To stage: düğmesine bir kez tıklayarak onu basılı olmayan duruma getirin. Son olarak Align vertical center düğmesine basarak alanların yatay olarak aynı hizada olmalarını sağlayın. 10. Properties denetçisindeki URL link alanını kullanarak sitenin e-posta adresine bir linke dönüştürün. Bazen bir metnin aynı zamanda bir URL linki gibi çalışmasını isteyebilirsiniz. Bunu yapmanın bir yolu metnin üzerine görünmez bir düğme yerleştirmek ve sonra da bu görünmez düğmeye URL linkini çağıran bir işlev yüklemektir. Diğer bir yöntemse şimdi burada yapacağımız gibi metne doğrudan bir URL linki uygulamak. HTML den farklı olarak Flash ta yapacağımız URL verme işlemi metnin altını çizmez ve mavi renkli olmasını sağlamaz. Yani ziyaretçilerinizin o metni bir link olarak algılamalarını sağlamak sizin ayrıca yapacağınız diğer biçimlendirmelere kalıyor. 78 DERS 3

98 E-posta adresini içeren metin alanını seçin ve Properties denetçisindeki URL link alanına yazın. Bu işlemin ardından metin alanının altında o bölgeye bir link verilmiş olduğunu belirtmek için noktalar belirecektir. E-posta!nın sonuna bir soru işareti eklemek ve subject=tech Bookstore yazmak mesajın konu kısmının otomatik olarak doldurulmasını sağlar. Elbette ki son kullanıcı dilerse mesajında bu kısmı değiştirebilir. Tüm kullanıcıların makinelerinde bir e-posta istemcisi bulunmayabileceğini veya varolan e-posta istemcisini kullanmak istemeyebileceklerini (örneğin paylaşılan bir bilgisayar kullanıyor olabilirler) unutmayın. O yüzden biz kullanıcı soru ya da görüşlerini almak için Web sitemizde bir form kullanacağız. Bir ziyaretçi bu linke tıkladığında varsayılan istemcisi açılır, istemciye mesajın gideceği adres olarak info@trainingfromthesource.com, mesajın konusu olarak da Tech Bookstore otomatik olarak yazılır. İşiniz bittiğinde propaganda katmanını kilitleyin, böylece yanlışlıkla bir şeyler eklenmez veya silinmez. METİNLER 79

99 11. bookstore7.fla dosyasında yapmış olduğunuz değişiklikleri kaydedin. File > Save veya Ctrl+S ile dokümanınızı kaydetmeyi unutmayın. Gömülü Fontların Kullanımı Statik metinlerin aksine, dinamik metinler ve giriş metinleri varsayılan olarak aygıt fontlarını kullanırlar. Dinamik ve giriş metinlerinizin görünümleri üzerinde daha fazla kontrole sahip olmak istiyorsanız fontlarınızı dokümana gömülü hale getirebilirsiniz. Dinamik metinler ve giriş metinleri, tasarlandıkları makinede kullanılmış olan sistem fontlarının diğer makinelerde de bulunmasını gerektirir. Eğer bir son kullanıcının makinesinde bu sistem fontları yoksa dokümandaki metinler düzgün görünmeyebilir ve kullanıcıda bulunan başka bir fontla durum idare edilir. Fontlarınızı dokümanlara gömmek bu sorunu kökten çözer. Bir font dinamik veya giriş metin alanına gömüldüğünde Flash tarafından oluşturulan font taslakları SWF dokümanı içerisinde saklanır. Bu sayede doküman görüntülendiği makinedeki fontlara bağlı kalmaz ve her makinede orijinal tasarım fontlarıyla gösterilebilir. Gömülü fontların tek dezavantajı dosya boyutunu artımalarıdır. Bu artışın miktarı kullandığınız karakter ve biçimlendirmelerin sayısına göre değişebilir. Şimdiki uygulamamızda dinamik bir metin alanı oluşturacak ve içine bir font gömeceğiz. 1. Dinamik bir metin alanı oluşturun. propaganda katmanının kilidini açın ve 1. kareyi seçin. Text aracını seçin ve Text type menüsünden Dynamic Text seçimini yapın. Stage üzerinde bir yere tıklayın ve metin alanına Fareler ve İnsanlar yazın. (Sadece deneme amaçlı bir çalışma yapıyoruz, bu metni daha sonra sileceğiz.) 2. Character Embedding penceresini açın. Metin alanını seçin ve Properties denetçisindeki Embed düğmesine basın. Character Embedding (Karakter Gömme) ekranı açılacaktır. Bu ekranda dokümana gömmek istediğiniz karakter ya da karakter gruplarını seçebilirsiniz. Embed düğmesine yanlışlıkla tıkladıysanız Cancel veya Don t Embed düğmesine basarak Character Embedding iletişim kutusunu kapatabilirsiniz. 80 DERS 3

100 3. Gömmek istediğiniz karakterleri Windows altında Control, OS X altında Command tuşu ile birlikte tıklayarak seçin. Dosya boyutunun haddinden fazla büyümesine engel olmak için tüm karakterlerin değil sadece belli bir karakter grubunun gömülmesini isteyebilirsiniz. Gömmek istediğiniz karakter gruplarına tıklarken Ctrl veya Command tuşlarını basılı tutun, böylece birden fazla grubu aynı anda seçebilirsiniz. Bir karakter grubu belirlemek kullanılacak karakterleri sınırlamak istediğinizde (örneğin sadece sayılar gibi) gayet faydalı olabilir. Sadece belli uzunlukta bir karakter dizisi gösterecekseniz (örneğin A dan M ye kadar olan harfler gibi) bir karakter grubu seçmeyin, bunun yerine karakterleri Include these characters (Bu karakterleri dahil et) alanına yazın. 4. Cancel düğmesine basın ve metin alanını silin. Character Embedding ekranının altındaki Cancel düğmesine basarak ekrandan çıkın. Ardından Stage üzerindeki dinamik metin alanını silin ve propaganda katmanını yeniden kilitleyin. METİNLER 81

101 Font Özellikleri Flash ta metinlerinizin görünümünü dilediğiniz şekle sokmak için kullanabileceğiniz çok sayıda biçimlendirme seçeneği mevcuttur. Şu ana kadar bu seçeneklerin sadece en temel ve yaygın olanlarını kullandık. Şimdiki uygulamamızda yeni font özellikleri ile tanışacak ve bunların Flash ta nasıl kullanıldıklarını öğreneceğiz. Çalışma dokümanımız yine bookstore7.fla olacak. 1. Harita sayfasına statik metin ekleyin ve Properties denetçisinden metin özelliklerini belirleyin. Sitemizdeki harita sayfasında bir başlık ve adres bilgisi bulunacak. Haritanın veya genel olarak bir içeriğin bir SWF dosyasına nasıl yükleneceğini altıncı dersimizde göreceğiz. Ancak başlık ve adres bilgisini şimdi oluşturacağız. Properties denetçisinde Text type menüsünden statik metni seçin. Font Arial, font boyu 12, renk de siyah olsun. Align Center düğmesine basın; böylece metin alanına gireceğimiz karakterler ortaya hizalanacaktır. Font görüntüleme metodu olarak Anti-alias for readability seçimini yapın. Kerning, karakterler arası mesafeyle ilgili bir ayardır ancak A\V düğmesiyle belirtilen karakter aralığı gibi sabit değildir. Kerning değeri fonta dahil edilir ve iki harfin yan yana nasıl bir aralıkla yazılacağını belirler. Örneğin bazı harfler şekillerine bağlı olarak birbirlerine daha yakın bir şekilde yazılabilir; W karakteri ile A karakteri arasındaki mesafe W ile O arasındaki mesafeden daha dardır. Kerning ayarı, harflerin arasındaki mesafeyi harflerin şekillerine göre düzenler ve yazıların daha düzgün bir şekilde görünmesini sağlar. Properties denetçisindeki Auto kern kutusunun işaretlendiğinden emin olun. 2. Adres bilgisini girin ve Stage e yerleştirin. graphics klasörünü seçin, yeni bir katman ekleyin ve bu katmana map adını verin. labels katmanında da ismi map olan 60. kareye tıklayın (map katmanında iken) ve F6 ile bir anahtar kare ekleyin. Text aracını seçin ve Stage üzerinde sürükle-bırak yaparak sabit genişlikli bir metin alanı açın. Alana aşağıdaki şekilde gördüğünüz metni girin, yeni satırlar için Enter tuşunu kullanın. 82 DERS 3

102 3. Adres metnini biçimlendirin. Metin alanını yeniden boyutlandırmak için alanın köşelerindeki kare kontrolleri kullanabilirsiniz. Metni düzenlemek için alana Selection aracıyla iki veya Text aracıyla bir kez tıklayabilirsiniz. Şimdi ilk satırı seçin. Properties denetçisinden Bold düğmesine basın ve Text (fill) renk paletinden koyu gri bir renk seçin. Bu adımı metin alanındaki diğer başlıklar için de tekrarlayın. Adresi seçilebilir yapmanız da önemlidir. Bazı ziyaretçiler adresi kopyalayıp başka bir yere yapıştırmak veya göndermek isteyebilirler. Bunun için Selection aracı ile metin alanını seçin ve Properties denetçisindeki Selectable (Seçilebilir) düğmesine basın. Böylece ziyaretçiler adresi seçip kopyalayabilirler. Metni seçilebilir yapma düğmesi METİNLER 83

103 4. Properties denetçisinden Bitmap text seçimini yapın. Anti-aliasing (yumuşatma) yapılmamış bir öğe sert ve kesin tanımlı hatlara, çıkıntılı gözüken kıvrımlara sahiptir. Yumuşatma uyguladığımız zaman hatlar daha akıcı ve gölgeli bir hale gelir, kenarlardaki keskinlik azalır. Anti-aliasing Web grafikleri için çoğu zaman gayet iyi bir seçenek olsa da özellikle küçük metinlere uygulanması her zaman doğru olmayabilir; yumuşatılmış küçük metinlerin netliği kaybolabilir ve okunması zorlaşabilir. Font rendering method menüsünden Bitmap text seçimini yaptığınızda metne hiç yumuşatma uygulanmaz. 3. adımda oluşturmuş olduğunuz metin alanını seçin. Properties denetçisinde Font rendering menüsünden Bitmap text i seçin. metnin görünümünün nasıl değiştiğini hemen fark edeceksiniz. Metin alanı için yeniden Anti-alias for readability seçimini yapın. Okunabilirlik için yumuşatılmış (Anti-alias for readability) Bitmap metin (yumuşatma yok) 5. Properties denetçisinden harita başlığının özelliklerini değiştirin. Font özelliklerini yine değiştirmek için Properties denetçisini büyütün. Bu sefer daha uzun metinler kullanacaksınız. Properties denetçisinde font türü yine Arial olarak kalsın, rengimiz siyah olacak. Bu kez büyük bir font kullanıyoruz, font boyunu 26 yapın. Bold ve Italic düğmelerini de seçin. Auto kern kutucuğu işaretli veya işaretsiz olabilir, bir sonraki adımda karakter aralığı ile oynayacağımız için burada çok önemli değil. 6. Harita başlığı için bir metin girin ve metnin Stage üzerindeki konumunu ayarlayın. Stage üzerinde statik bir metin alanı açın ve içine şunu yazın: How to find us. 84 DERS 3

104 Metnin tam konumunu daha sonra sayfaya harita eklendiği zaman ayarlayabiliriz, şimdilik Properties denetçisinden x ve y koordinatları olarak 70 ve 470 girin. 7. Karakter aralığı değerini 2 yapın. Bir metnin karakter aralığını değiştirdiğinizde o metindeki her bir karakter eşit aralıklarla yeniden yazılır. Karakterleri birbirlerinden uzaklaştırmak için pozitif değerler, birbirlerine yaklaştırmak içinse negatif değerler kullanabilirsiniz. Henüz oluşturmuş olduğunuz metin alanını seçin ve Letter spacing (karakter aralığı) alanına 2 girin. Karakter diziliminin nasıl değiştiğini inceleyin ve size en uygun gelen sıkıştırma ya da açma değerini girin. Bu noktada Properties denetçisindeki diğer seçeneklere de göz atmak isteyebilirsiniz; metnin font boyu büyük olduğundan yaptığınız bir değişikliğin etkisini kolayca görmeniz mümkün. Selection aracı ile metin alanına çift tıklayın ve karakterlerin yarısını seçin. Yapacağınız değişiklikleri sadece metnin seçmiş olduğunuz yarısına uygulayın. Bir sonraki adıma geçmeden önce metni yine eski halinde getirmeyi unutmayın. 8. Çalışmanızı kaydedin. METİNLER 85

105 Metin Alanına Timeline Efektleri Eklemek Timeline efektleri Flash taki çeşitli öğelere görsel zenginlik katmak için kullanılır. Flash ı kurduğunuz zaman Macromedia tarafından yazılmış çeşitli Timeline efektleri de sisteminize yüklenir. Ancak Web de ya da Macromedia Exchange gibi yerlerde bol miktarda başka Timeline efekti de bulabilirsiniz. Timeline efektleri Insert > Timeline Effects komutu ile uygulanır. Herhangi bir şeye Timeline efekti eklemek istediğinizde önce öğeyi seçin ve ardından Insert > Timeline Effects > Effects yolunu takip ederek vermek istediğiniz efekti belirleyin. Efekt seçimi yaptığınızda bir ön izleme ekranı açılır. Bu ekranda hem efektin ilgili öğeyi nasıl etkileyeceğini görebilir hem de efekte ilişkin çeşitli ayarlar yapabilirsiniz no lu karedeki home sayfası için yeni bir katman ve katman klasörü oluşturun. Timeline daki oynatım kafasını home etiketli 1. kareye geri getirin. map katmanını seçin, yeni bir katman ekleyin ve bu katmana home adını verin. home katmanı seçili iken yeni bir katman klasörü ekleyin ve klasöre pages ismini verin. home ve bir önceki uygulamada oluşturduğunuz map katmanını bu klasöre taşıyın. pages klasörü sitedeki her sayfa için oluşturacağımız katmanlara ev sahipliği yapacaktır. 86 DERS 3

106 home katmanını seçin. Katmandaki en son karenin hemen sağına tıklayın ve fare imlecini 10. kareye kadar geriye sürükleyin. Fare tuşunu bıraktığınızda 70. kareden 10. kareye kadar olan tüm kareler seçilecektir. Seçili alana sağ tıklayın ve Remove Frames (Kareleri Kaldır) komutunu verin. home sayfasının içeriği Timeline ın sadece ilk 10 karesinde gösterileceği için bu katmandaki diğer karelere ihtiyacımız olmayacak. 2. Statik bir metin alanı oluşturun ve içine Featured Book yazın. Properties denetçisini açın. Metin türümüz statik, fontumuz yine Arial. Font rengini #CCCCCC olarak değiştirin. Font boyunu da 14 yapın. Bold ve Italic düğmeleri de önceki örnekte olduğu gibi basılı olsun. Font görüntüleme metodu olarak yine Anti-alias for readability seçimini kullanacağız. Karakter aralığı değerini yeniden 0 yapın. Auto kern kutusu işaretli değilse işaretleyin. home katmanı seçili durumdayken Stage e tıklayın ve statik metin alanına FEATURED BOOK yazın. Metin alanını aşağıdaki şekilde görüldüğü gibi Stage in sağ üst tarafına, HOME yazsının altına yerleştirin. 3. Metin alanına bir Timeline efekti ekleyin. Henüz oluşturmuş olduğunuz metin alanını seçin ve Insert > Timeline Effects > Effects > Drop Shadow komutunu verin. Drop Shadow ön izleme ekranındaki ayarlarla oynayarak hoşunuza giden bir görünüm bulun. Bu ekranda yeni değerler girdikten sonra Update Preview düğmesine basarak efektin o değerlerle nasıl görüneceğini izleyin. Yaptığınız değişiklikleri etkin kılıp Drop Shadow ekranını kapatmak için OK düğmesine basın. Bu işlem neticesinde kütüphanenizde Drop Shadow 1 adlı bir grafik sembolü METİNLER 87

107 oluşturulur. Bir sonraki dersimizde sembolleri detaylı olarak inceleyeceğiz, şimdilik sadece böyle bir sembolün eklendiğini bilmeniz yeterli. Timeline efektini beğenmediyseniz Modify > Timeline Effects > Remove Effect komutuyla efekti kaldırabilirsiniz. Tasarımcıların çoğu çeşitli filtre ve efektleri ayrı bir resim işleme programında uygulamakta ve sonra da çalışmalarını Flash a aktarmaktadır. Bu sayede dokümanlarınızdaki metinler Flash ta elde edemeyeceğiniz kompleks görünümlere sahip olabilir. 4. home katmanını kilitleyin ve çalışmanızı kaydedin. Yazım Denetimi Yapmak Flash taki yazım denetim aracı FLA dosyanızdaki tüm metinlerin yazım denetimini yapmanızı sağlar. Yazım denetimi alışkanlığı kazanmanız yayınlayacağınız FLA dosyasının daha özenli ve temiz görünmesi bakımından büyük önem taşır. Flash ta FLA dosyalarının nasıl denetlenebileceği üzerinde geniş bir kontrolünüz vardır. Metin alanlarını, katman isimlerini veya ActionScript kodunu denetleyebilirsiniz. Buraya kadar dokümanımıza bol miktarda metin eklediğimiz için şimdi bu metinlerin yazım denetimini yapmanın tam zamanı. Bu kitabın Türkçe basımının editörü olarak Flash ta (ve diğer Macromedia yazılımlarında) Türkçe yazım danatimi özelliğinin olmadığını belirtmem gerekiyor. 1. Spelling Setup ekranından ayarlarınızı seçin. Yazım denetimini ilk kez kullanacaksak öncelikle Text > Spelling Setup komutunu vermeli ve denetim ayarlarını gireceğimiz ekranı açmalıyız. Daha önce yazım denetimini kullanmışsanız da Spelling Setup ekranındaki seçenekleri incelemek faydalı olacaktır. Ekranın Document options (Doküman seçenekleri) başlıklı bölümünde FLA dosyasındaki hangi metinlerin yazım denetimine tâbi tutulacağını görüyorsunuz. Checking options (Denetim seçenekleri) kısmında ise denetim esnasında bakılacak ya da ihmal edilecek yazım ve değişiklik tipleri yer alır. Spelling Setup ekranındaki seçenekleri aşağıdaki şekilde görüldüğü gibi düzenleyin. Eğer istiyorsanız başka seçimler de yapabilirsiniz. Fare imlecini seçeneklerin üzerinde kısa bir süre bekletirseniz o seçeneği daha detaylı açıklayan bir ipucu metni görüntülenecektir. Burada yaptığınız seçimleri dilediğiniz zaman değiştirebilirsiniz. 88 DERS 3

108 2. Check Spelling iletişim kutusunu kullanarak yazım denetimi yapın. Text > Check Spelling komutuyla Check Spelling ekranını açın ve yazım denetçisini çalıştırın. Yazım denetçisi gerçekte doğru olan bir kelimeyi tanımıyorsa bu uyarıyı ihmal edebilir (Ignore) veya Add to Personal düğmesine basarak kelimeyi kendi sözlüğünüze ekleyebilirsiniz. Yazım denetimi sona erdiğinde küçük bir mesaj penceresi ile bu durum size bildirilir. OK düğmesine tıklayarak yazım denetçisinden çıkabilirsiniz. 3. Çalışmanızı bookstore7.fla adıyla kaydedin. Çalışmanızı sabit diskinizdeki TechBookstore klasörüne kaydedin. Tamamlanmış olan dosyayı CD- ROM da lesson03/complete klasörü altında bookstore7.fla ismiyle de görebilirsiniz. Metin Tabanlı Bileşenlerin Kullanımı İlerleyen derslerde Tech Bookstore sitesine çeşitli yazılar eklemek için metin bileşenleri kullanacağız. Metin bileşenleri TextArea ve TextInput bileşenlerini içerir. TextArea, aşağı ya da yukarı kaydırılabilen geniş yazı bloklarına ihtiyaç duyduğumuz anlarda kullanılır. TextInput ise kullanıcıların metin alanlarına giriş yapmasını ve bu bilgilerin toplanmasını istediğiniz zaman faydalıdır. Bu iki bileşen dinamik metinlerin ve giriş metinlerinin yerine kullanılabilir. Ancak bu kullanım dosya boyutunun artmasına yol açar. Metnin istediğiniz şekilde görüntülenebilmesi için daha fazla ActionScript koduna ihtiyaç duyabilecek olmanız da bir başka dezavantajdır. TextArea ve METİNLER 89

109 TextInput un en büyük avantajları ise zengin düzenleme seçeneklerine sahip olmaları ve kaydırma çubuklarının metin alanlarına otomatik olarak eklenmesini sağlamalarıdır. İçeriğin bu bileşenlere yüklenmesini sağlayan kodla 9. ve 10. derslerimizde tanışacağız. Şimdilik bileşenler hakkında çok genel bir bilgiye sahip olmanız yeterli. İlerleyen sayfalarda Web sitesindeki bir geri bildirim formuna TextInput alanları ekleyeceğiz. Kullanıcılar geri bildirim formuna bilgi girecek ve bu bilgiler bir XML dosyasında saklanacak. Dinamik Metin Alanları Dinamik metinler ve giriş metinleri, statik metinlerden çok farklıdır. Dinamik metin ve giriş metni alanları daha zorlu metin yapılarıyla başa çıkabilirler. Bu alanlara metinler yükleyebilir, SWF dosyası görüntüleniyorken çeşitli hareket ya da eylemlere bağlı olarak yüklenmiş olan metinlerin değişmesini sağlayabilirsiniz. Bu alanlar aynı zamanda HTML olarak formatlanmış metinleri de tanıyabilirler. Yani bu alanlara koyacağınız metinlerde HTML etiketleri kullanabilirsiniz; Flash fontların görünümünü metnin içindeki etiketlere göre ayarlayabilir. Örneğin metinde <b> etiketleri kullanırsanız Flash ilgili fontları kalınlaştıracaktır. Yine HTML etiketlerini kullanarak dinamik metin alanlarına URL linkleri, imajlar ve paragraflar da yerleştirebilirsiniz. Bu teknikleri bir TextArea bileşeni kullanacağımız 9. dersimizde daha yakından göreceğiz. Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Text aracını tanıdık (Sayfa 71-72). Statik metinleri ve aygıt fontlarını gördük (Sayfa 72-80). Fontları bir SWF dosyasına gömmeyi öğrendik (Sayfa 80-81). Properties denetçisindeki kontrolleri kullanarak metin özelliklerini değiştirmeyi öğrendik (Sayfa 82-85). Statik bir metin alanına efekt uyguladık (Sayfa 86-88). Yazım denetiminin nasıl yapılabileceğini gördük (Sayfa 88-89). Metin tabanlı bileşenler ve dinamik metin alanları hakkında bilgi aldık (Sayfa 89-90). 90 DERS 3

110 4 Sembol Oluşturmak ve Düzenlemek Flash ı etkin bir şekilde kullanmak istiyorsanız sembollere mutlaka ihtiyacınız olacaktır. Flash dokümanlarının verimli bir yapıya kavuşması, dosya boyutlarının düşürülmesi, animasyonların oluşturulması ve etkileşimin sağlanmasında sembollerin büyük rolü vardır. Sembolsüz bir Flash dosyası tencere/tava kullanmadan yemek yapmaya çalışmaya benzer. Tech Bookstore sitesine klip, grafik ve düğme sembolleri ekliyoruz

111 Bu dersimizde Flash 8 deki çeşitli sembolleri tanıyacak ve her birinin ne için kullanıldığını öğreneceğiz. Oluşturduğumuz bir sembolü defalarca farklı yerlerde kullanabileceğimizi ve orijinal sembol üzerinde yapacağımız değişikliklerin o sembolün yer aldığı tüm çalışmalara yansıdığını göreceğiz. Kompleks efektler oluşturmak için sembolleri iç içe kullanacağız ve dokümanlarımıza etkileşim kazandırmak için de yine sembollerden yararlanacağız. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Sembolleri ve nasıl kullanıldıklarını öğreneceğiz. Grafik sembolünü daha yakından tanıyacağız. Görünür ve görünmez düğme sembolleri oluşturacağız. Düğme sembolü için bir tıklama alanı tanımlayacağız. Sembolleri iç içe kullanacağız. Düğme işlevi gören bir animasyon oluşturacağız. Yaklaşık Süre Bu dersi yaklaşık 2 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: Yok Başlangıç Dosyaları: lesson04/start/bookstore7.fla Tamamlanmış Dosyalar: lesson04/complete/bookstore8.fla 92 DERS 4

112 Semboller İkinci dersimizde Web sitemizin arka zemini için çeşitli grafikler hazırlamış ve bir grafik sembolü oluşturmuştuk; grafik sembolleri aynı grafiği farklı yerlerde kullanmak istediğimizde çok faydalıdır. Aynı derste Stage e kütüphaneden çeşitli öğeler taşımış ve kütüphanenin FLA dosyalarındaki öğeleri saklayan bir depo vazifesi gördüğünü öğrenmiştik. Kütüphane sadece sembolleri (grafik, animasyon, düğme ve font sembolleri) değil video klipleri, bitmap resimleri, ses dosyalarını ve diğer bileşenleri de saklar. Kısacası, Stage üzerinde çizdiğiniz ancak sembole dönüştürmediğiniz grafikleri saymazsak, gördüğünüz ya da duyduğunuz her şey kütüphanede saklanır. Flash geliştirme ortamında oluşturabileceğiniz üç ana sembol türü vardır: Klipler, düğmeler ve grafikler. İkinci dersimizde çizim araçlarını kullanarak çeşitli vektörel grafikler oluşturmuş ve bu grafikleri içeren grafik sembolleri hazırlamıştık. Bu dersimizde düğme ve klip sembollerini de öğreneceğiz. Düğmeler, farenin kullanımına bağlı olarak görünüm ve işleyişleri değişebilen sembollerdir. Düğmeleri kullanarak SWF dosyamızda etkileşimli öğeler (açılır menüler, fareyle üzerine gelince ipucu gösteren düğmeler, vs) oluşturabiliriz. Klip sembolü de Flash taki önemli sembol türlerinden biridir. Stage bile aslında bir klip sembolüdür. Klipler kendilerine ait bir Timeline ları bulunan küçük Flash uygulamalarıdır. Klipleri kod yazarak özelleştirmeniz mümkündür; bu da onları etkileşim, animasyon ve daha birçok etkileyici uygulama için ideal bir araç haline getirir. Flash ta ayrıca font sembolleri de oluşturabilirsiniz. Font sembolleri kütüphanede saklanır ve hiçbir zaman Stage e sürüklenmezler. Font sembolleri genellikle unutulan ancak dosya boyutunun küçük tutulmak istendiği veya istenen fontun ilgili sistemde bulunmadığı anlarda çok işe yarayan sembollerdir. Font sembolleri ve fontların dokümanlara gömülmesi ile ilgili detaylı bilgiler için adresini ziyaret edebilirsiniz. Semboller daima kütüphanede saklanır. Bir sembolü kütüphaneden Stage e sürüklediğinizde o sembolün bir örneğini Stage e taşımış olursunuz. Stage e taşıdığınız bu örnek gerçekte kütüphanedeki sembole bir referanstır; kütüphanedeki tek bir sembolün pek çok örneğini Stage de kullanabilirsiniz. Stage de kullandığınız örnek modelleri birbirlerinden bağımsız olarak yeniden boyutlandırma, renklendirme, saydamlaştırma, döndürme, bükme, koyulaştırma ya da rengini açma gibi çeşitli işlemlere tâbi tutabilirsiniz. Klip ve düğme sembol örneklerine Properties denetçisini kullanarak isim verebilir, böylece onları ActionScript veya Flash 8 in diğer özellikleri içinden çağırabilirsiniz. Bir sembol örneğinin özelliklerini ActionScript veya Properties denetçisi ile değiştirdiğinizde kütüphanedeki sembol bundan etkilenmez. Ancak sembol düzenleme modunda iken doğrudan kütüphanedeki sembolün özelliklerini değiştirirseniz o sembolün Stage de yer alan tüm örnekleri bu değişikliklerden etkilenir. Yani kütüphanedeki sembol üzerinde yaptığınız SEMBOL OLUŞTURMAK VE DÜZENLEMEK 93

113 düzenlemeler tüm sembol örneklerine otomatik olarak yansıtılır. Bunu kazara yapmanız halinde ise Undo komutu ile değişiklikleri geri alabilirsiniz. Özetleyecek olursak, semboller yeniden kullanılabilir öğelerdir. Renk ve boyutları farklı 18 kareye ihtiyacınız varsa her kareyi baştan çizmeniz gerekmez. İstediğiniz şekli içeren bir grafik sembolü oluşturabilir ve bu sembolün 18 örneğini Stage e taşıyabilirsiniz. Ardından örnek modeller üzerinde dilediğiniz değişiklikleri yapabilirsiniz. Bu örnekler kütüphanedeki esas sembole sadece birer referans olduklarından dosya boyutunuz daha küçük olur. 18 kareyi ayrı ayrı çizmeniz halinde dosya boyutu gereksiz bir şekilde artacaktır. Dokümanınıza video klip, bitmap resim, font ve ses gibi öğeler aldığınızda (import) bunların kütüphaneye de eklendiğini unutmayın. Yani Stage e taşıdığınız öğeler aslında kütüphanedeki öğelerin birer kopyası ya da örneğidir. Stage Üzerinde Semboller Oluşturmak ve Düzenlemek Yeni bir sembol oluşturmanın iki yolu vardır: Stage deki hazır öğelerden birini kullanabilir veya sembol düzenleme modunda tamamen yeni bir sembol oluşturabilirsiniz. Eğer elinizde bir grafik varsa ve onu dönüştürmek istiyorsanız Stage de grafiği seçin ve klavyeden F8 tuşuna basın. Böylece grafik sembolün içine yerleştirilir. Öğeleri sembollere dönüştürmek için şu adımları da izleyebilirsiniz: Modify > Convert to Symbol komutunu verin; grafiğe sağ tıklayın ve açılan menüden Convert To Symbol komutunu seçin; ya da öğeyi açık doküman kütüphanesine sürükleyin. Örneğin Stage üzerinde bir kare çizdiyseniz onu seçin ve Modify > Convert to Symbol komutunu verin. Böylece çizdiğiniz kareyi içine alan bir sembol oluşturmuş olursunuz. Sembol oluşturmakla yaptığınız şey aslında seçtiğiniz şekli bir sembole sarmaktır. Bu işlemi bir kareye yapabileceğiniz gibi bir bitmap resme, hatta bir başka sembole de yapabilirsiniz. 94 DERS 4

114 Sembol oluşturmanın ikinci yolu sembol düzenleme modunu kullanarak sembole tamamen yeni içerik eklemektir. İkinci dersimizden de hatırlayabileceğiniz gibi sembol düzenleme modu Stage den tümüyle bağımsız farklı bir düzenleme alanıdır. Kütüphanedeki bir sembole çift tıklayarak sembol düzenleme moduna girebilirsiniz. Sembol düzenleme modunda iken düzenleme çubuğu (Timeline ın hemen üstünde; Mac lerde Timeline ın hemen altında) üzerindeki linklerle sembolü düzenlemekte olduğunuzu size hatırlatır. Sembolleri ayrıca kendi yerlerinde de düzenleyebilirsiniz. Bu yöntemle, sembolün Stage deki diğer öğelere göre olan konum ve boyutunu düzenleme esnasında görebilirsiniz. Bir sembolü kendi yerinde düzenlemek için Stage üzerinde sembole çift tıklayın. Düzenleme sırasında Stage de o sembolün dışındaki her şey silikleşir ve seçilemez halde olur. Düzenleme çubuğu sembolü yerinde düzenlemekte olduğunuzu belirtir. Düzenleme Çubuğu SEMBOL OLUŞTURMAK VE DÜZENLEMEK 95

115 Doğrudan Stage üzerinde oluşturduğunuz vektörel çizimleri FLA dosyasını yayınlamadan önce sembollere dönüştürmenizi tavsiye ederiz. İşlenmemiş öğe niteliğinde olan vektörel çizimler seçildiklerinde üzerlerinde bir çarpı işareti belirir. SWF dosyası görüntüleniyorken, Stage üzerindeki işlenmemiş öğeler oynatım kafası Timeline da ilgili kareye geldiğinde yeniden hesaplanmak ve çizilmek durumundadır, çünkü kütüphanede saklanmış olan bir bilgi yoktur. Bu hesaplama ve çizimler de performansı düşürür. Öğeyi sembolü dönüştürerek onu kütüphaneye alabilir ve Timeline da sırası geldikçe defalarca hesaplanıp çizilmesi yerine öğeye sadece bir kez başvuru yapılmasını sağlayabilirsiniz. Bu aynı zamanda eğer Merge Drawing modunda çizilmişse grafiğin daha kolay seçilmesini de sağlar. Kütüphanedeki Sembolleri Görmek Ctrl+L (veya Mac te Command+L) komutuyla kütüphaneyi açabilir ve FLA dosyanızda yer alan sembolleri görebilirsiniz. Her sembol bir isim ve simge ile gösterilir. Sembolün ne tür bir öğe olduğunu Type sütunundan görebilirsiniz. Use Count (Kullanım Adedi) sütunu dokümanda o sembolün kaç örneğinin kullanıldığını belirtir. Linkage (Bağlantı) sütunu da öğenin ihraç (export) edilip edilmediğini, ortak bir kütüphaneyle ilişkili olup olmadığını ve FLA dosyasındaki bir şeye (örneğin bir bileşene) bağlı olup olmadığını gösterir. Linkage hakkında kitabın ilerleyen bölümlerinde daha detaylı bilgiler bulacaksınız. Sembol ismi Bağlantı/İhraç (Linkage/Export) Kullanım adedi Sembolün türü Ön izleme paneli Son değiştirilme tarihi Seçenekler menüsü 96 DERS 4

116 Kullanım adedi bilgisinin otomatik olarak yenilenmesini istiyorsanız Library Options (Kütüphane Seçenekleri) menüsünden Keep Use Counts Updated (Kullanım Adedini Güncel Tut) komutunu verin. Düğme ve klip sembol örneklerine Properties denetçisindeki <Instance Name> alanını kullanarak isim verebilirsiniz. Böylece ActionScript kodu içinden bunları çağırmanız mümkün olur. Bir örneğe verdiğiniz isimle sembolü ilk oluşturduğunuz anda sembole verdiğiniz isim birbirlerinden farklıdır. Kütüphanedeki isim öğelerin daha iyi bir şekilde organize edilebilmesini sağlar. Stage üzerinde oluşturduğunuz bir örnek kütüphanedeki ana sembol ile aynı ismi taşıyabilir ancak bundan sonra Stage üzerinde oluşturacağınız her örneğin ismi farklı olmak zorundadır. Sembol örneklerinin adlandırılmasını altıncı dersimizde detaylı bir şekilde göreceğiz. Kütüphanede kullanılan isim Sembol örneğinin ismi Sembollerin İç İçe Kullanılması Font sembolü dışındaki tüm sembollerin metin, video, grafik ve diğer sembolleri barındırabilen kendilerine ait birer Timeline ları vardır. Bu Timeline ların her birinin nasıl çalışacağı oluşturduğunuz sembolün türüne bağlıdır. Örneğin düğmeler her katman için sadece dört kare gösterebilirler: Up, Over, Down ve Hit. Grafik sembolleri dilediğiniz kadar kare içerebilir, yani bu sembollerde animasyonlar oluşturabilirsiniz. Ancak bir grafik sembolünün Timeline ı bütünüyle ana Timeline a bağımlıdır ve ana Timeline hareket etmediği sürece o da hareket etmeyecektir. Son olarak, bir klip sembolünün Timeline ı ise tamamen bağımsızdır ve ana dokümanın Timeline ının yaptığı her şeyi o da aynen yapabilir. Daha gelişmiş animasyon ve etkileşimler oluşturmak için düğmelerin içine klipler, kliplerin içine düğmeler veya kliplerin ve düğmelerin içine grafik sembolleri yerleştirebilirsiniz. Ancak bir düğme Timeline ı içine bir düğme sembolü veya bir grafik SEMBOL OLUŞTURMAK VE DÜZENLEMEK 97

117 sembolü içine bir düğme örneği yerleştirmezsiniz; çünkü grafik sembolleri ActionScript içeremez veya ActionScript ile kontrol edilemezler. İkinci dersimizde düzenleme çubuğunu görmüştük. Bu derste sembollerle daha sık çalıştıkça düzenleme çubuğunun önemini daha iyi kavrayacak ve iç içe geçmiş semboller kullanan dokümanlar arasında dolaşırken işinizi ne kadar kolaylaştırdığını daha yakından göreceksiniz. Grafik Sembolleri İkinci dersimizde çizim araçlarıyla çalışırken çeşitli grafik sembolleri oluşturmuştuk. Grafik sembolleri, kütüphanedeki statik grafikleri veya bitmap resimleri dokümanımız boyunca sürekli kullanmak istediğimiz anlarda oldukça faydalıdır. Statik grafikler herhangi bir hareket ya da animasyon içermeyen sabit görsellerdir. Grafik sembolleri ActionScript ile kontrol edilemediklerinden örnek isimleri bulunmaz. Grafik sembollerinin içinde animasyonlar oluşturabilirsiniz ancak burada dikkat etmeniz gereken bir şey vardır: Grafik sembolünün içindeki animasyon, sadece grafik sembolünü barındıran Timeline ın oynatılması halinde görüntülenir. Grafik sembollerini annelerinin elinden tutmuş çocuklara benzetebilirsiniz. Anne durduğu zaman çocuk da duracak, anne harekete geçtiği zaman çocuk da hareket edecektir. Bu işleyişin sizin için faydalı olabileceği çok az sayıda durum vardır, o yüzden animasyonları ana dokümanın Timeline ı yerine sembollerin içinde kullanmanızı klip sembollerinin haricinde tavsiye etmiyoruz. Grafik sembollerine filtre uygulayamazsınız. Stage üzerinde seçtiğiniz bir grafik sembol örneğinin özelliklerini Properties denetçisinde değiştirebilirsiniz. Instance Behavior menüsünü kullanarak sembolün bir düğme veya klip gibi davranmasını sağlayabilirsiniz. Swap düğmesi ise sembolü kütüphanenizdeki başka bir sembolle değiştirmenize imkân verir. Grafik seçenekleri, grafik sembolünün Timeline ında içermekte olabileceği animasyonları bir noktaya kadar denetlemenize imkân verir. Animasyonun ana Timeline devam ettiği sürece oynamasını (Loop), sadece bir kez oynamasını (Play Once) veya sadece tek bir kare göstermesini isteyebilirsiniz (Single Frame). Color menüsü kullandığınız örneğe 98 DERS 4

118 ilişkin efektleri düzenlemenizi ve parlaklık, renk tonu, alfa (opaklık) değerlerini değiştirebilmenizi sağlar. Beşinci dersimizde grafik sembollerinin özelliklerini daha detaylı bir şekilde göreceğiz. Düğme Oluşturmak Düğmeler Flash animasyonlarınızın etkileşim kazanmasını sağlar. Altıncı ve dokuzuncu derslerimizde de öğreneceğiniz gibi düğmeler doldurduğunuz formları göndermek veya Flash dokümanınızı kontrol eden ActionScript kodunu çalıştırmak için kullanılabilir. Düğmelerin ayrıca çeşitli olaylara tepki veren işlevleri de vardır. Örneğin kullanıcının fare ile düğmenin üzerine tıklaması bir olaydır. Bu tür işlevlerin ActionScript kodu ile düğmeye eklenmesi hakkında dokuzuncu dersimizde daha detaylı bilgi alabilirsiniz. Sitemiz için öncelikle başlık alanının hemen altında yer alacak olan üç temel düğme oluşturacağız. Her düğme kendisine ait birer menüye sahip olacak. düğmeleri oluştururken ikinci dersimizde FLA dosyasına almış olduğumuz 6 adet PNG bitmap resmini kullanacağız. Her düğme sembolünün dört farklı hâli vardır; bunlar kullanıcı SWF dosyasında düğmeyle etkileşime geçtiğinde düğmenin nasıl görüneceğini belirler. Düğmenin Up durumu etkileşimli değildir ve hiçbir şey yapmaz; düğmeyi asılı, hareketsiz bir şekilde gösterir. Over durumu fare düğmenin tıklanabilir alanı üzerine getirildiğinde, Down durumu da düğmeye tıklandığında düğmenin nasıl bir görünüm alacağını belirler. Hit durumunda yer alan herhangi bir imaj ya da çizimse düğmenin tıklanabilir alanını belirler. Düğmeyi asıl tanımlayan şey Hit işlevidir; Up, Over ve Down durumları daha ziyade estetik amaçlara yöneliktir. Bazı SWF dosyalarında fare düğmenin üzerine geldiğinde fare imleci bir el simgesine dönüşür. Bunun amacı farenin tıklanabilir bir alan üzerinde olduğunu ziyaretçiye göstermektir. Fare imlecini ActionScript ile değiştirebilirsiniz. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 99

119 1. TechBookstore klasöründen bookstore7.fla dosyasını açın ve dosyayı bookstore8.fla adıyla kaydedin. bookstore7.fla yı aynı zamanda CD-ROM daki lesson04/start klasöründen de açabilirsiniz. File > Save As komutunu vererek dosyayı yeni bir isimle kaydedin. 2. Insert > New Symbol komutuyla btnproducts adlı yeni bir düğme sembolü oluşturun. Bu komutu vermenizin ardından Create New Symbol penceresi açılır. Name alanına btnproducts yazın ve Button radyo düğmesini seçin. Bu işlemle düğme sembolünün kütüphanede kullanılacak ismi belirlenmiş olur. Daha sonra bu sembolün bir örneğini Stage e taşıdığınızda bu örneğe de bir isim vereceksiniz (örneğe vereceğiniz ismin sembolün esas isminden farklı olduğunu hatırlayın). OK düğmesine tıkladığınızda sembol düzenleme modu açılır. Sembolü kütüphanede de görebilirsiniz. Sembol isminin önünde btn ifadesini kullanmamızın sebebi kütüphaneyi daha etkin bir şekilde organize edebilmek. Tutarlı bir tarz belirlediğiniz sürece dilediğiniz isimlendirme metodunu kullanabilirsiniz. 3. Kütüphaneyi açın ve media klasörüne koymuş olduğunuz bitmap resimleri bulun. media klasörünün simgesine çift tıklayarak klasörü açın. Klasörde yer alan products_up.png, products_down.png, company_up.png, company_down.png, contact_up.png ve contact_down.png isimli bitmap resimleri sitemizdeki düğmelerin farklı hâllerini göstermek için kullanacağız. 4. Up hâlini seçin ve products_up.png resmini düğmeye ekleyin. Grafiğin x ve y noktalarını 0 ve 0 olarak belirleyin. Düğme sembolünü açtıktan sonra Timeline da düğmeye tahsis etmek için kullanabileceğiniz dört hâlin varlığını göreceksiniz. Bunlar biraz önce bahsetmiş olduğumuz Up, Over, Down ve Hit durumları. Timeline da Up karesini seçin ve products_up.png resmini kütüphanedeki media klasöründen düğme sembolüne taşıyın. 100 DERS 4

120 Stage de grafiği seçin ve Properties denetçisinde x ve y pozisyonu olarak 0 ve 0 değerlerini verin. 5. products_down.png resmini düğme sembolünün Over hâline ekleyin. Bir düğmenin Timeline ı içindeki her öğe anahtar karelerde yer almak zorundadır. Layer 1 de Over karesini seçin ve Insert > Timeline > Blank Keyframe komutuyla boş bir anahtar kare ekleyin. Up karesindeki bitmap resmin yeni anahtar kareye kopyalanmasını istemediğimiz için boş bir anahtar kare ekliyoruz. Over karesine başka bir resim ekleyeceğiz. products_down.png bitmap resmini media klasöründen düğmenin Over durumuna sürükleyin. Bu, ziyaretçiler fareyi düğmenin üzerine getirdiklerinde görünecek olan resimdir. Yani fare imleci düğmenin üzerine geldiğinde düğmenin görünümü değişecektir. Properties denetçisinden grafiğin x ve y konumunu 0,0 şeklinde belirleyin, böylece grafik Up karesindeki grafikle örtüşecektir. Sembolün yer alacağı (konumlandırılacağı) nokta bir çarpı işareti ile belirtilir. Bazen, özellikle de ActionScript kullanıyorsanız, bir düğme ya da klip sembolünün yerini değiştirmek isteyebilirsiniz. Yeni x ve y koordinatları belirleyerek sembolün konumunu değiştirebilirsiniz. 6. Hit karesini seçin ve F5 tuşuna basarak resmi Down ve Hit karelerine ekleyin. F5 tuşuna bastığınızda products_down.png bitmap resmi düğme sembolünün Down ve Hit durumlarına eklenir ve resmin pozisyonu her iki karede de aynı olur. Hit durumu düğmenin tıklanabileceği alanı belirler. Aynı resmi aynı konumda kullandığınızdan tıklanabilir alan ile düğmenin diğer alanları birbirleriyle tam olarak örtüşecektir. Tıklama alanının Stage de görünür olmadığını hatırlayın. Bitmap resim olarak parlak, yeşil bir dikdörtgen kullanabilirsiniz ancak bu ziyaretçileriniz SWF dosyanızı açtığında görüntülenmez. Bu durumda düğmenizin tıklama alanını belirtmek için en iyi yol Timeline da hazırda duran, boyutu ve konumu doğru bir şekilde ayarlanmış olan grafiği kullanmaktır. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 101

121 Tıklama alanı tanımlamak için metin uygun bir seçim değildir. Bunun sebebi karakterler arasındaki boşlukların veya o harfinin ortasının arka zemin olarak algılanması ve tıklanamaz durumda olmasıdır. Eğer bir düğmenin Timeline ında metniniz varsa Hit karesine dikdörtgen gibi bir grafik yerleştirmeli ve bunun boyutunu tüm metni içine alacak şekilde ayarlamalısınız. Aksi hâlde posta kutunuz sitenizdeki düğmelerin çalışmadığıyla ilgili sayısız mesajla dolabilir. 7. İki düğme daha oluşturacağız. Ardından sembolleri kütüphanedeki buttons klasörüne ekleyeceğiz. Ana başlık alanının altında şirket (company) ve irtibat (contact) için iki düğme daha oluşturmamız gerekiyor. Yukarıdaki adımları izleyerek btncompany ve btncontact isimli iki düğme oluşturun. İşiniz bittiğinde kütüphaneyi açın ve üç düğme sembolünü buttons klasörüne taşıyın. Düğmeleri şimdilik kütüphanede bırakın. Sıradaki uygulamamızda düğmeleri Stage e ekleyeceğiz. 8. Bir sonraki uygulamaya geçmeden önce dosyanızı kaydedin. Ctrl+S veya Command+S ile dosyanızı kaydedin. Düğmeleri Stage e Yerleştirmek Şimdi elimizde kütüphanede duran 3 adet düğme var. Bu düğmeleri Stage e yerleştireceğiz. Üç düğmenin kendi katmanlarında grbar grafiğinin üzerine yerleştirilmeleri gerekiyor. Dersimizin sonunda bu üç düğmeyi saran görünmez bir düğme oluşturacak ve menüleri bu düğmelerle hizalayacağız. 1. buttons adlı yeni bir katman oluşturun. Timeline da text katman klasörünü seçin ve Insert New Layer düğmesine tıklayın. Yeni katman oluşturulduğunda isme çift tıklayın ve katman ismi olarak buttons yazın. 2. Oluşturduğunuz üç düğmeyi kütüphaneden Stage e taşıyın. btnproducts, btncompany ve btncontact düğmelerinin tümü kütüphanedeki buttons klasöründe duruyor olmalıdır. Düğmeleri Stage e sürüklediğinizde onların grbar ile aynı yükseklikte olacak şekilde oluşturulduklarına dikkat edin. 102 DERS 4

122 3. Üç düğmeyi yan yana getirin ve Properties denetçisinı kullanarak doğru x koordinatlarını girin. Düğmeleri btnproducts, btncompany ve btncontact şeklinde soldan sağa dizin. Konumlarını tam olarak ayarlamak için Properties denetçisini açın, btnproducts örneğini seçin ve x koordinatı olarak 115 değerini girin. Benzer şekilde btncompany için x değerini 200, btncontact için de x değerini 285 olarak girin. 4. Align panelini kullanarak üç düğmeyi birbirleriyle yatay olarak hizalayın. Align panelini açın ve To Stage düğmesinin seçilmemiş olmasına dikkat edin. Sembollere tıklarken Shift tuşunu basılı tutarak üç düğmeyi aynı anda seçin. Ardından Align vertical center düğmesine basarak düğmelerin birbirleri ile hizalanmasını sağlayın. 5. Align panelini kullanarak üç düğmeyi grbar ile gruplayın ve hizalayın. İşiniz bitince üç düğmenin grubunu çözün ve buttons katmanını kilitleyin. Sembolleri gruplayarak sanki tek bir nesneymiş gibi düzenlenmelerini sağlayabilirsiniz. Bazen Stage üzerindeki sembolleri aynı anda hareket ettirmek ya da döndürmek isteyebilirsiniz, bunun en kolay ve hızlı yolu sembolleri gruplamaktır. Shift tuşunu basılı tutun ve düğmelerin her birine tıklayarak üç düğmeyi de seçin. Ardından ana menüden Modify > Group komutunu verin. Üç düğmeyi artık tek bir nesneymiş gibi hizalayabilirsiniz. Düğmeler grubunu seçin ve Stage de grbar ın altına taşıyın. bars katmanının kilidini açın ve grbar ı seçmek için Shift tuşuna basın. Şimdi grbar sembolü ve düğmeler grubu seçilmiş durumda olmalıdır. Align panelinde Align top edge düğmesine tıklayarak gruplanmış düğmeleri grbar ın üstüne hizalayın. Modify > Ungroup komutuyla düğmelerin grubunu çözün. Son olarak buttons ve bars katmanlarını kilitleyin. 6. Çalışmanızı kaydedin. Şimdi Stage de arkalarında duran çubukla hizalanmış durumda üç adet düğmeniz bulunuyor. Üç düğme grbar ın üst kenarına göre hizalanmış ve eşit mesafe ile ayrılmış durumda olmalı. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 103

123 Düğmelerin bu şekilde yerleştirilmiş olması, onlara menüler eklediğimizde daha önce oluşturduğumuz maske ile düzgün bir hizada olmalarını sağlayacak. Metin Düğmeleri Oluşturmak Bazen sadece metinden ibaret olan, arka zemin içermeyen düğmelere ihtiyaç duyarsınız. Bu gibi durumlarda yapacağımız şey metin düğmeleri oluşturmaktır. Şimdiki uygulamamızda metin düğmeleri oluşturacak ve dersin ilerleyen bölümlerinde bunları menüye ekleyeceğiz. Metin düğmeleri oluştururken dikkat edeceğimiz en önemli noktalardan biri tıklama alanlarının tanımlanmasıdır. Tıklama alanı, kullanıcının fare ile düğmenin üzerinde tıklama yapabileceği alandır. Eğer bir tıklama alanı tanımlamadan metni Stage üzerinde bırakırsanız metin düğmesine tıklamak kullanıcılar açısından çok zor bir hâl alabilir. Kullanıcı böyle bir durumda tam olarak karakterleri oluşturan ince çizgilerin üzerine gelip tıklama yapmak durumda kalır ki bu hiç de kolay olmayabilir. Metin düğmeleri oluşturmanız pek tavsiye edilmez çünkü yeniden kullanılabilir olma özellikleri yoktur. En iyisi hiç metin içermeyen grafik tabanlı bir düğme sembolü oluşturmak ve sonra da bunu defalarca bir metin katmanının altında kullanmaktır. Kütüphaneye ekleyeceğiniz her düğmenin dosya boyutunu artıracağını unutmayın. Şimdiki uygulamamızda menüye ekleyeceğimiz metin düğmeleri oluşturacak ve her bir düğme için tıklama alanları tanımlayacağız. Metin düğmelerinde uygun bir tıklama alanı tanımlamak zor değildir, tek yapmanız gereken şimdi anlatacağımız adımları takip etmek. 1. Text aracını seçin ve Stage e tıklayarak bir metin alanı oluşturun. Properties denetçisinde açılır listeden Static text seçimini yapın, fontu Arial olarak belirleyin, metin rengini siyah (#000000) ve font boyunu da 8 olarak verin. Bold düğmesine tıklayın. Son olarak Anti-alias for readability metodunu seçin. Text aracı seçiliyken Stage e tıkladıktan sonra Properties denetçisini açarak yukarıda belirttiğimiz font, renk ve boyut değerlerini girin. Doğru metin türünü (Static) seçtiğinizden ve Bold düğmesine bastığınızdan emin olun. Metin için Anti-alias for Readability seçimini yapmayı unutmayın. Timeline da buttons katmanını (kilidinin açılmış olmasına dikkat edin) seçin ve Stage de text aracını seçtikten sonra yeni metin alanına CATALOG (buradaki gibi büyük harfle) yazın. Metin alanını hangi katmanın üzerinde oluşturduğunuz önemli değil çünkü uygulama tamamlanınca bu geçici düğmeleri Stage den sileceğiz. 104 DERS 4

124 2. Metin alanını seçin ve F8 tuşuna basarak onu bir düğme sembolünün içine yerleştirin. Tools panelinden Selection aracı ile metin alanını seçin. Klavyeden F8 e basarak veya ana menüden Modify > Convert to Symbol komutunu vererek metin alanını bir düğme sembolüne dönüştürün. İsim alanına btncatalog yazın ve OK düğmesine tıklayarak işlemi tamamlayın. 3. btncatalog u sembol düzenleme modunda açın ve semboldeki metin alanını ortalayın. Üzerine çift tıklayarak düğmeyi sembol düzenleme modunda açın. Metin alanını seçin ve alanı ortalamak için Align panelini kullanın. Align panelinde To Stage düğmesinin seçildiğinden emin olun ve önce Align Horizontal Center sonra da Align Vertical Center düğmelerine basın. 4. Düğmeye Over, Down ve Hit durumlarını ekleyin. Down karesini seçin ve bir kare eklemek için F5 e basın. Metin düğmesinin farklı durumları için farklı görünümlere ihtiyacımız olmadığından düğmenin Up, Over ve Down karelerinde aynı metin görüntülenir. Tıklama veya fareyle üzerine gelme halinde metnin renklenmesini istiyorsanız Over ve/veya Down karelerinde bir anahtar kare eklemeli, ardından metin alanını seçip Properties denetçisinden metin rengini belirtmelisiniz. Böylece ziyaretçi fareyi düğmenin üzerine getirdiğinde veya düğmeye tıkladığında metnin rengi değişecektir. 5. Rectangle aracıyla Hit karesinde tıklanabilir bir alan oluşturun. Hit karesini seçin ve yeni bir anahtar kare eklemek için F6 ya basın. Down karesindeki metnin Hit karesine de girildiğini göreceksiniz. Tıklama alanının neresi olacağını belirlemek için metin alanını bir referans olarak alabilirsiniz. Rectangle aracını seçin ve dolgu rengi olarak istediğiniz bir rengi, kenar rengi olarak da No Color seçeneğini belirleyin. Karedeki metni tam olarak içine alan bir SEMBOL OLUŞTURMAK VE DÜZENLEMEK 105

125 dikdörtgen çizin. Dikdörtgeni metin alanından biraz daha büyük yapın, böylece düğmenin tıklanması daha kolay olacaktır. 6. Menü için beş düğme daha oluşturun: REVIEWS, TOUR, NEWS, FEEDBACK ve MAP. Ardından bunları Stage den silin ve buttons katmanını kilitleyin. Her düğme için yukarıdaki adımları yeniden izleyin (ancak bu kez metin olarak yine hepsi BÜYÜK harflerle olmak üzere REVIEWS, TOUR, NEWS, FEEDBACK ve MAP girin). Bu işlem bittiğinde kütüphanede 6 yeni düğmeniz olmalı: btncatalog, btnreviews, btntour, btnnews, btnfeedback ve btnmap. Kütüphanedeki düğmelerin sayısını kontrol ettikten sonra metin düğmelerini Stage den silin. Kütüphanede sembolleri buttons klasörüne taşıyın. Kütüphanedeki bu düğmeleri dersimizin ilerleyen bölümlerinde oluşturacağımız üç menüye ekleyeceğiz. İşiniz bittiğinde buttons katmanını kilitleyin. 7. Dosyanızı kaydedin. Devam etmeden önce dosyanızı kaydetmeyi unutmayın. Görünmez Bir Düğme Oluşturmak Bir düğmenin Hit durumuna girmiş olduğunuz şeylerin SWF dosyası çalıştırılıyorken görünür olmadığını öğrendiniz. Şimdi bu özellikten faydalanacak ve sadece tıklanabilir bir alanı olan, hiç grafik içermeyen görünmez bir düğme oluşturacağız. Görünmez düğmeleri HTML deki hot spot lar olarak düşünebilirsiniz; bunlar bir düğme gibi görünmeseler de üzerlerine tıkladığınızda bir şey 106 DERS 4

126 olur ya da bir olay gerçekleşir. Görünmez düğmeler de bir SWF dosyasında aynı şeyi yaparlar. Tech Bookstore sitesinin ana navigasyon öğeleri olarak işlev gören üç menünün kapatılmasını tetiklemek için görünmez bir düğme kullanacağız. Sitemizdeki üç düğmeden biri üzerine fareyle geldiğinizde aşağıya doğru açılan bir menü animasyonu göreceksiniz. Ardından fareyi görünmez düğmenin üzerine getirdiğinizde menü bu kez yukarı yönlü bir animasyonla kapanacak. Fare menü alanının dışına çıktığında açılmış olan menünün kapatılmasını istiyoruz. 1. buttons katmanının altında invisible button adlı yeni bir katman oluşturun. text katman klasörünü seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana çift tıklayın ve isim olarak invisible button yazın. Bu katman, buttons katmanında oluşturduğunuz ve menüleri açmak için kullanılacak olan üç düğmenin altında yer alır. Görünmez düğmeyi üç düğmenin altına yerleştirerek menülerin açılması işlemine karışmasını önlüyoruz. Eğer görünmez düğme katmanı üç düğmenin üzerinde yer alsaydı menüler açılmayacak, görünmez düğme menüleri kapanmaya zorlayacaktı. Katman sıralaması bu yüzden büyük önem taşıyor. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 107

127 2. Stage e 120, 140 ve 160 piksel noktalarında üç adet yatay kılavuz çizgisi ekleyin. 450 piksel noktasında da dikey bir kılavuz çizgisi oluşturun. Cetveller görünür durumda değilse ana menüden View > Rulers komutunu verin. Stage e yatay cetvelden dikeydeki 120, 140 ve 160 piksele denk gelecek üç kılavuz çizgisi çekin. Dikey cetvelden de yataydaki 450 piksel noktasına denk gelecek dikey bir kılavuz oluşturun. 3. Tools panelinden Rectangle aracını ve dolgu rengi olarak da istediğiniz bir rengi seçin. Merge Drawing moduna geçin ve dokümanın sol üst köşesinden 450 ve 120 deki kılavuzların kesiştiği noktaya uzanan bir dikdörtgen çizin. Dokümanın sol kenarından 450 deki dikey kılavuza uzanan, 140 ve 160 taki kılavuzların arasındaki alanı kapsayan bir dikdörtgen çizin. Menüleri tetikleyen düğmeler grbar grafiğinin içinde yer alır ve menüler bu grafiğin altında kılavuzun bulunduğu hizaya kadar açılırlar. Menülerin tam olarak bulunduğu alanın haricinde kalan bir bölgeyi kapsamak istiyoruz. Ayrıca Stage in kalan diğer alanlarını kapsamaya da gerek yok. Düğmenin, Stage in menülerin altında kalan bir bölgesini kapsaması yeterli; bu bölge de kılavuzun altından başlıyor. Merge Drawing modunu kullanıyoruz, böylece biraz daha kompleks bir şekil oluşturma imkânımız olabilir. Birbirleriyle örtüşen ve bir araya geldiklerinde daha büyük bir grafik oluşturan çeşitli dikdörtgenler çizeceğiz; şeklimiz menü yapısına göre özelleştirilebilir bir yapıya sahip olacak. Stage in sol üst köşesinden başlayan ve yaklaşık 450 piksel genişliğinde olan bir dikdörtgen çizin. Dikdörtgen dikey cetveldeki 120 piksel noktasında, yani düğmelerin hemen altında son bulsun. Bu düğme için tıklanabilir alanı oluşturuyorken Stage de nelerin olduğunu görebilmek istiyorsanız Color Mixer panelini açın, fill color simgesine tıklayın ve Alfa değerini % 20 yapın. Böylece dikdörtgenlerin dolgu rengi saydamlaşır, bu da tıklanabilir alanı görmenize yardımcı olur. Eğer hâlihazırda çeşitli dikdörtgenler oluşturmuşsanız Alfa yüzdesini düşürmeden önce bu şekilleri seçmeniz gerekir. 108 DERS 4

128 Kılavuzun altında oluşturacağınız ikinci dikdörtgen Stage ile aynı genişlikte olmalı ve menülerin açıldığı yerin hemen altında bulunmalıdır. 140 piksel noktasında yer alan kılavuzun altında bir dikdörtgen çizin. Bu dikdörtgen yaklaşık 20 piksel uzunluğunda olsun. 4. Düğmelerin sağ ve sol taraflarına da birer dikdörtgen ekleyin. Kullanıcının fareyi menünün sağ veya sol tarafına hareket ettirmesi durumu için de menülerin bulunacağı alanın sağ ve soluna birer dikdörtgen çizmemiz gerekiyor. Tüm bu çizimler bittiğinde dikdörtgenler birleştirilmiş ve ortaya aşağıdaki gibi bir şekil çıkmış olmalı. Etkileşimli menü tasarımınız sona erdiğinde, FLA dosyanızda düğme ve menülerin tam olarak nerede olduklarına bağlı olarak görünmez düğmenin konumunu biraz değiştirmek zorunda kalabilirsiniz. Oluşturduğunuz dikdörtgenlerin yükseklikleri, bunlar üst ve altlarındaki dikdörtgenlerle kesiştikleri ve böylece arada boşluk kalmadığı sürece önemli değildir. Dikdörtgenler arasında boşluğun kalacağı yer açılır menülerin görüneceği alandır. 5. invisible button katmanındaki anahtar kareye tıklayın ve henüz çizmiş olduğunuz dikdörtgeni seçin. Modify > Convert to Symbol komutunu verin ve Button radyo düğmesini seçin. Düğmeyi btninvisible olarak adlandırın ve OK düğmesine tıklayın. Stage deki sembole çift tıklayın ve sembol düzenleme moduna girin. btninvisible sembolünü oluşturmanızın ardından Stage deki içeriğin etrafında sınır çizgileri belirmiş olmalıdır. Sembol düzenleme modunu açmak için sembole çift tıklayın. Henüz çizmiş olduğunuz tüm dikdörtgenler düğmede ilk karede (Up) olmalıdır. Ancak düğmenin sadece tıklanabilir alanını kullandığımızdan sadece Hit karesinde içeriğe ihtiyacımız var. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 109

129 6. Dikdörtgenleri Hit karesine sürükleyin. Up karesindeki anahtar kareye tıklayın ve sonra onu Hit karesine taşıyın. Diğer durumların tümünü boş bırakabilirsiniz, bu durumda düğmenin grafik içeren hiçbir hâli olmaz. Bu karedeki hiçbir şey SWF dosyasında görünür değildir. Artık elinizde görünmez bir düğme var. Bir seçimi hızlı bir şekilde bir sembole dönüştürmek için F8 e basın veya seçimi kütüphaneye sürükleyin. Seçimi Preview panelinin altındaki alana sürüklediğinizde Convert to Symbol penceresi açılacaktır. 7. Scene 1 e tıklayıp Stage e dönün, invisible button katmanını gizleyin ve kilitleyin. Stage üzerinde şu anda turkuvaz renkli hafif saydam geniş bir alan bulunuyor olmalı. Turkuvaz renkli alan görünmez düğmenin tıklanabilir alanını gösterir. Bu alanı menülerin kapanmasını tetikleyen alan olarak kullanacaksınız. Turkuvaz renkli bu saydam alan yayınlayacağınız SWF dosyasında görünür olmasa bile Flash geliştirme ortamındaki çalışmanızı etkileyebilir. Timeline a gidin ve invisible button katmanındaki Hide layer noktasına (göz simgesinin altındaki nokta) tıklayın. Lock simgesine tıklayarak katmanı kilitleyin. Böylece katman görülemez, seçilemez ve katmana yanlışlıkla yeni içerik eklenemez. 8. Doküman kütüphanesinde btninvisible sembolünü buttons kütüphane klasörüne sürükleyin. İkinci dersimizde buttons adlı bir kütüphane klasörü oluşturmuştuk. Daha önceki son üç uygulamada oluşturduğumuz tüm düğme sembollerini buttons klasörüne taşıyın. 9. Çalışmanızı kaydedin. 110 DERS 4

130 Klip Oluşturmak ve Kullanmak Klipler ya da film klipleri Flash tasarımcı ve geliştiricilerinin en sık kullandığı sembol türüdür. Bir klip gerçekte minyatür bir uygulamadır. Her klibin kendine ait bir Timeline ı vardır ve bu Timeline Flash dokümanındaki ana Timeline dan bağımsız hareket eder. Bu sayede bir yandan animasyonların sürekli dönmesini sağlarken bir yandan da dosya boyutunun büyümesini önlemiş olursunuz. Uzun animasyonlar oluşturmak zorunda değilsiniz. Tek bir döngü oluşturun ve bu klibi Stage e yerleştirin. Klip siz istediğiniz sürece ana Timeline dan bağımsız olarak tekrarlanacaktır. Klipler ayrıca sürekli dönmek zorunda da değildir. Bir klip oluşturabilir ve bunun belli bir olayın ardından gösterilmesini sağlayabilirsiniz. Klipler sadece animasyonları barındırmaktan çok daha fazlasını yapabilir. Örneğin klip sembolleriyle karışımları (blend) bir arada kullanabilirsiniz. Karışımlar bir klipteki renklerin daha alt katmandaki bir nesnenin renkleriyle nasıl bir etkileşimde olacağını belirler. Kitabımızda karışımlar konusuna girmiyoruz ancak Flash dokümantasyonunda bu konuda geniş bilgi bulabilirsiniz. Kliplerle mini uygulamalar oluşturabilir ve uygulamaları onlara sürükleyebilirsiniz. Kitabımız boyunca kliplerle çalışıyor olacağız. Tüm detayları öğrenmek için acele etmeyin. Bu dersimizde işe sadece yeni dostumuzu biraz olsun tanımakla başlayacağız. Bir sonraki uygulamamızda Tech Bookstore için çeşitli klipler oluşturacağız. Bu dersimizdeki klipler kullanıcı arabiriminde yer alacak animasyonları kapsayacak. Kitabımızın ilerleyen bölümlerinde mini uygulamaları veya sunucudan yüklenen içeriği taşıyan klipler de oluşturacaksınız. Klipler de tıpkı grafik ve düğme sembolleri gibi oluşturulur. Ancak klipler bir sembole düğme veya grafik sembollerine göre daha zengin bir işlevsellik katmanıza imkân verirler. Klipleri ayrıca ActionScript ile de oluşturabilir ve kullanabilirsiniz. Klip sembolünün Stage deki örneğine bir isim verebilir ve daha sonra bu ismi ActionScript içinde çağırabilirsiniz. Altıncı ve dokuzuncu derslerimizde ActionScript hakkında daha fazlasını öğreneceğiz. Klipler, SWF dosyasının boyutunu düğme ya da grafik sembollerinden daha fazla artırır. Kliple vermek istediğiniz efekti bir düğme veya grafikle yapabildiğiniz durumlarda klip kullanmaktan vazgeçebilirsiniz. Ancak çoğu zaman kliplerin zengin yeteneklerine ihtiyacınız olacak. 1. logo sembolünü seçin ve sembolü yeni bir klibin içine eklemek için F8 e basın. İsim alanına mclogo yazın, Movie clip radyo düğmesine tıklayın ve OK düğmesine tıklayarak yeni bir klip oluşturun. mclogo birkaç bağımsız animasyon içerecek, bu yüzden diğer klipleri ana klibin SEMBOL OLUŞTURMAK VE DÜZENLEMEK 111

131 içindeki katmanlara yerleştirebilmek amacıyla logo.png bitmap resmini bir klibin içine eklememiz gerekiyor. Stage üzerinde logoyu seçmek için öncelikle logo katmanının kilidini açmanız gerekir. 2. mclogo ya çift tıklayın, Layer 1 e yeni bir isim verin ve sonra da klibe yeni bir katman ekleyin. Klibin içinde Layer 1 de logo.png bitmap resmini göreceksiniz. Layer 1 in ismini logo olarak değiştirin. Insert New Layer düğmesine tıklayarak logo.png resminin üzerine yeni bir katman ekleyin. Yeni katmana pageturn ismini verin. 3. Line aracı ile pageturn katmanında bir çizgi oluşturun. Bir çizgi oluşturmadan önce pageturn katmanın seçildiğinden emin olun. Line aracını seçin ve Object Drawing moduna dönün. Tools panelinde Stroke color düğmesine tıklayın ve kenar çizgisi rengini # olarak belirleyin. Tools panelinden Line aracını seçin. Aşağıdaki şekilde gördüğünüz gibi fareyi kitap kapağının sol dıştaki ucundan kapağın içteki kenarına kadar tıklayın ve sürükleyin. Çizgiyi, kitabın sol kapak kenarı ile aynı açı ve yükseklikte olacak şekilde konumlandırın. Çizgi seçili durumda değilken fareyi çizgilerin uç noktalarına getirin ve imlecin L şeklini aldığını görün. Bu imleçle çizgiyi tıklar ve sürüklerseniz çizginin konum ve uzunluğunu değiştirebilirsiniz. Bu sayede çizgiyi logoya göre daha hassas bir şekilde ayarlayabilirsiniz. Tüm çizgiyi seçerseniz fareyle üzerine geldiğinizde imleç dört yönlü bir ok şeklini alır; çizgiyi bununla tıklayıp sürüklemeniz çizginin bir bütün olarak taşınmasına yol açar. 4. F8 ile çizimi yeni bir klibe yerleştirin. Henüz oluşturduğunuz çizgiyi bir bütün olarak seçin (ancak hareket ettirmeyin) ve F8 e basarak bir klip sembolüne dönüştürün. İsim alanına mcpageturn yazın, Movie clip radyo düğmesini seçin 112 DERS 4

132 ve OK deyin. mclogo nun içinde yeni bir klip oluşturulur, böylece mcpageturn mclogo nun içine geçmiş olur. Düzenleme çubuğu iç içe geçmiş klipler arasında nerede olduğunuzu size gösterecektir. Önce mclogo ve sonra da mcpageturn e çift tıklarsanız mcpageturn klibinin içine girer ve burada daha önce oluşturduğunuz çizgiyi düzenleyebilirsiniz. Çizgi işlenmemiş grafik durumunda olduğundan üzerinde shape tween uygulayabilirsiniz. Bu tekniği beşinci dersimizde öğreneceğiz. mclogo klibinin içinde gösterilecek olan bir animasyon oluşturmamız gerekiyor. Animasyon ana Timeline dan bağımsız olacağından onu bir klibin içine yerleştirmeliyiz. 5. mclogo içine yeni bir katman ekleyin ve onu katman yığınının en altına taşıyın. Parlama efekti logonun altında görünecek, bu yüzden onu logonun altına koymamız gerekiyor. Insert New Layer düğmesine tıklayın ve yeni katmana glow adını verin. Bu katmanın Timeline daki katmanlar yığınının en altında bulunduğundan emin olun. Düzenleme çubuğunda Scene 1 e tıklayarak ana Timeline a dönün. 6. logo katmanını kilitleyin. Timeline da glow animation katmanını seçin, içeriğini kesin ve glow sembolünü mclogo klibinin içine yerleştirin. graphics katman klasörünü açın. İkinci dersimizde oluşturduğumuz grglow sembolü hâlâ Stage de duruyor olmalı. Düzenleme çubuğunda Scene 1 e tıklayarak Stage e dönün. grglow sembolünü seçin ve Edit > Cut komutunu verin. Kütüphanede mclogo ya çift tıklayarak onu sembol düzenleme modunda açın ve glow katmanını seçin. Edit > Paste in Place komutunu vererek grglow sembolünün ve logo grafiğinin düzgün bir şekilde hizalanmasını sağlayın. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 113

133 7. Ana Stage e dönün ve glow animation katmanını silin. Dosyanızı kaydedin. Düzenleme çubuğunda Scene 1 e tıklayın ve ana Stage e dönün. İçeriğini logo katmanındaki klibe taşıdığınız için glow animation katmanının artık boş olduğuna dikkat edin. glow animation katmanında sağ tıklayın ve Delete Layer komutunu verin. Katman kalıcı olarak Timeline dan silinecektir. Daha fazla ilerlemeden önce FLA dosyanızı kaydedin. Artık logo animasyonu için gereken tüm parçalarımız hazır. Şimdi yapmamız gereken şey sitenin menüsünü oluşturmak. Bir sonraki uygulamamızda hem grafik hem de düğme sembollerini içeren bir klip tasarlayacağız. Menüyü Tasarlıyoruz Menü için arka zemin grafiğini ikinci dersimizde oluşturmuştuk, bu yüzden Tech Bookstore menüleri için elimizde sağlam bir temel var. Bir sonraki adımlarımız grmenugraphic i bir klip sembolünün içine yerleştirmek, birkaç yeni grafik eklemek ve metin düğmelerini yerleştirmek olacak. 1. grmenugraphic örneğini menu katmanına sürükleyin ve yeni bir klip sembolüne yerleştirin. Ardından iki grmenugraphic örneğini daha Stage e sürükleyin ve onları da iki yeni klibe yerleştirin. grmenugraphic adlı menü arka zemin grafiği kütüphanede graphics klasöründe duruyor olmalı. Üç grmenugraphic sembol örneğini Timeline daki menu adlı maskelenmiş katmana sürükleyin. 114 DERS 4

134 İlk sembol örneğini seçin ve F8 e basarak onu yeni bir klip sembolüne yerleştirin. İsim alanına mcproducts yazın, Movie clip radyo düğmesine basın ve OK düğmesine tıklayın. İkinci örneği mccompany, üçüncü örneği de mccontact adlı klip sembollerine yerleştirin. Şimdi elimizde her bir menü için birer tane olmak üzere toplam üç klip var; üç klip de arka zemin görüntüsü için aynı grafik sembolünü paylaşıyorlar. 2. Stage deki örneğe çift tıklayarak mcproducts klibini açın ve Layer 1 e bg ismini verin. Yeni bir katman ekleyin ve 11 piksel uzunluğunda, # renginde dikey bir çizgi oluşturun. Şimdi menülerdeki metin düğmelerinin kenarlarını (sınırlarını) belirteceğiz. Layer 1 i bg olarak isimlendirdikten sonra mcproducts klibinin içine yeni bir katman ekleyin ve bu katmana divider ismini verin. Tools panelinden Line aracını seçin ve Stroke color olarak # değerini girin. Stage de düz, dikey bir çizgi oluşturun. Çizgiyi seçin ve Properties denetçisinden yüksekliği 11 yapın. 3. Stage de yine 11 piksel uzunluğunda ikinci bir dikey çizgi oluşturun. Bu çizgi ise beyaz (#FFFFFF) olsun. Stroke color düğmesine basarak rengi değiştirin ve biraz önceki çizginin sağında, aynı uzunlukta ikinci bir dikey çizgi oluşturun. Çizgiyi seçin ve Properties denetçisindeki yüksekliği 11 yapın. 4. Her iki çizgiyi birbirine yaklaştırın ve ikisini birden seçin. Çizgileri grdivider adlı yeni bir grafik sembolüne dönüştürün ve sembolü grmenugraphic in ortasına taşıyın. Çizgileri Stage üzerinde yan yana getirin ve sonra her ikisini birden seçin (bunun için çizgilere tıklarken Shift tuşunu basılı tutun). F8 e basarak çizgileri bir sembole dönüştürün. İsim alanına grdivider yazın, Graphic radyo düğmesini seçin ve OK düğmesine tıklayarak sembolü oluşturun. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 115

135 Selection aracı ile grdivider sembolünü seçin ve menünün ortasına taşıyın. Sembol şimdi cetveldeki 0 ın yaklaşık olarak 55 piksel sağında olmalıdır. 5. grdivider ı mccompany ile mccontact kliplerine ekleyin ve her iki klibin de ortasında olacak şekilde hizalayın. Scene 1 e tıklayarak ana Stage e dönün ve kütüphaneyi açın. mccompany klibine çift tıklayın ve Layer 1 i bg olarak isimlendirin. Ardından divider adlı yeni bir katman ekleyin. grdivider ın bir örneğini kütüphaneden divider katmanına sürükleyin ve menünün ortasında yer alacak şekilde hizalayın. Aynı işlemi mccontact için de gerçekleştirin. Egzersizimizin bir sonraki kısmında dersin daha önceki bölümlerinde oluşturduğumuz metin düğmelerini menüye ekleyeceğiz. 6. Kütüphaneyi açın ve metin düğmelerini her bir menüye ekleyin. Menüler için oluşturmuş olduğunuz metin düğmeleri kütüphanede buttons adlı bir klasörde duruyor olmalı. Çift tıklayarak mcproducts klibini açın, Timeline da divider katmanının üstüne yeni bir katman ekleyin ve katmanı buttons olarak isimlendirin. btncatalog u grdivider ın 116 DERS 4

136 soluna, btnreviews ı da grdivider ın sağına sürükleyin. btncatalog u mcproduct ın sol kenarı ve grdivider arasında, btnreviews ı da grdivider ve mcproduct ın sağ kenarı arasında ortalayın. Aynı prosedürü diğer iki klip menüsü ile de uygulayın. mccompany klibine yeni bir katman ekleyin ve bu katmanı buttons olarak adlandırın. btntour ve btnnews düğmelerini grdivider ın sağına ve soluna sürükleyin. Son olarak bu adımları mccontact için de izleyin. btnfeedback ve btnmap düğmelerini grdivider ın sağına ve soluna sürükleyin ve diğer menülerde de yaptığınız gibi onları grdivider ın her iki tarafında hizalayın. Ana Stage e dönün. Şimdi menu katmanında her biri iki metin düğmesi içeren üç menümüz yer almaktadır. 7. Kütüphaneyi temizleyin ve FLA dosyanızı kaydedin. Şu anda kütüphanede çeşitli klipler bulunuyor. Bu klipleri ikinci dersimizde oluşturduğumuz movie clips klasörüne, grdivider ı da graphics klasörüne taşıyın. Ana menüden File > Save komutunu vererek FLA dosyanıza yaptığınız değişiklikleri kaydedin. Beşinci dersimizde menüye bir animasyon efekti ekleyip menünün açılıp kapanmasını, dokuzuncu dersimizde de biraz ActionScript kodu ile menünün SWF dosyası gösterimde iken çalışmasını sağlayacağız. Klip Düğmeleri Oluşturmak Flash ta düğme oluşturmak için bir yol daha vardır: Klip sembollerini kullanmak. Klip düğmeleri daha önce oluşturduğunuz düğmelerden daha kompleks düğmeler oluşturmanıza imkân tanır. Elbette ki bu tüm düğmelerinizi klip sembollerine dönüştürmeniz gerektiği anlamına gelmiyor. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 117

137 Kliplerin dosya boyutunu düğme sembollerine göre daha fazla artırdığını hatırlayın. Ayrıca klip düğmeleri tasarlamak genellikle normal düğmeler tasarlamaktan daha uzun zaman alır. Klip düğmeleri kullanmak düğmelere ekstra özellikler (örneğin HTML deki ziyaret edilen linklerin görünümünde olduğu gibi) veya özel animasyonlar eklemek istediğinizde faydalıdır. Şimdiki uygulamamızda sitenin katalog bölümünde kullanılmak üzere bir çift klip düğmesi oluşturacağız. Düğmelerden biri siteden kitapların örnek sayfalarını indirmek için, diğeri de kitabı satın alabileceğiniz siteye link vermek için kullanılacak. Klip düğmelerinin oluşturacağımız ilk kısmı düğmelerin grafik ve metinleri olacak. 1. Timeline da buttons katmanını ve Tools panelinde Rectangle aracını seçin. Dolgu rengini #CCCCCC ve kenar çizgisi rengini de siyah yapın. Rectangle aracını seçtikten sonra Round Rectangle Radius düğmesine tıklayın. Dikdörtgeni oluşturmadan önce köşe yarıçapının 0 olmasına dikkat edin. Ardından dolgu rengini #CCCCCC ve kenar çizgisi rengini de siyah (#000000) yapın. 2. Bir dikdörtgen oluşturun ve onu bir klibe dönüştürün. Properties denetçisinde ilgili değerleri girdikten sonra dikdörtgeni oluşturun. Dikdörtgenin içine çift tıklayarak hem dolguyu hem de kenar çizgilerini seçin. Ardından dikdörtgenin genişliğini 85, yüksekliğini de 15 yapın. Dikdörtgen seçili durumda iken Modify > Convert to Symbol komutunu verin ve onu bir klibe dönüştürün. Klibe mcsamplechapter ismini verin, Movie clip radyo düğmesini seçin ve OK düğmesine tıklayın. 3. Klibi açın, kenar çizgisini seçin ve onu fill isimli yeni bir katmana yerleştirin. mcsamplechapter klibine çift tıklayarak klibi sembol düzenleme modunda açın. Bu modda iken Insert New Layer komutunu verin ve Timeline a yeni bir katman ekleyin. Katmana stroke adını verin, Layer 1 e çift tıklayın ve ismini fill olarak değiştirin. fill katmanında dikdörtgenin kenar çizgilerini seçin (kenar çizgisine çift tıklayarak). Ardından Edit > Cut komutunu verin. stroke katmanının 1 no lu karesini seçin ve Edit > Paste in Place komutunu verin. 4. Kenar çizgisinin iki segmentini değiştirin ve rengi # yapın; stroke katmanını kilitleyin. stroke katmanında iken Shift e basın, ardından kenar çizgilerinin üst ve soldaki segmentlerine tıklayın. Tools panelindeki Stroke color kontrolünü kullanarak kenar çizgisi rengini # olarak 118 DERS 4

138 belirleyin. Bu değişiklik düğmenin etrafında bir derinlik efektinin oluşmasını sağlayacaktır. Son olarak stroke katmanını kilitleyin. 5. text isimli yeni bir katmandaki düğmeye sample chapter metnini ekleyin ve sonra text katmanını kilitleyin. Şu ana kadar düğmemiz fazla açıklayıcı değildi. Bu yüzden düğmeye statik bir metin ekleyeceğiz. stroke katmanını seçin, düğmenin Timeline ında iken yeni bir katman ekleyin ve katmana text adını verin. Tools panelinden Text aracını seçin ve Stage e tıklayın. Metin özelliklerini Static, Arial, 10 punto, siyah dolgu rengi ve Anti-alias for readability şeklinde belirleyin. Stage deki metin alanına sample chapter yazın. İşiniz sona erdiğinde text katmanını kilitleyin. 6. fill katmanını seçin, şeklin dolgusunu (içini) seçin ve grfill adlı bir grafik sembolüne dönüştürün. Ardından bu yeni katmanı kilitleyin. Bu prosedür klip düğmesi içine yeni bir grafik sembolü yerleştirir. grfill sembolüne animasyon uygulanacağından sembol kendi katmanına alınmış ve bir grafik sembolüne dönüştürülmüştür (çünkü kenar çizgisine bir animasyon uygulamaya gerek yoktur). İşlenmemiş bir grafiğe animasyon uygulamadan önce onu bir grafik sembolüne dönüştürün ve her animasyonu kendi katmanına yerleştirin. İşiniz sona erdiğinde fill katmanını kilitleyin. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 119

139 7. Timeline a labels ve actions katmanlarını ekleyin. Timeline a labels ve actions adlı iki yeni katman ekleyin. Bu katmanlar sırasıyla kare etiketlerini ve kare eylemlerini barındıracaktır. Etiketleri ve eylemleri kendi katmanlarında bulundurmak her zaman için daha iyidir, böylece bunların SWF dosyasındaki diğer şeyler ile karışması engellenir. 8. Her bir katmanın 25 no lu karesine tıklayın ve F5 e basarak yeni kareler ekleyin. Ardından labels katmanında 5 ve 15 no lu karelere anahtar kareler ekleyin. Klip düğmesinin Timeline üzerinde uzanan çeşitli durumları olacaktır. Flash bir düğmenin Up, Over ve Down durumlarını bir klip düğmesine özel kare etiketleri girerek anlar. Bunların her biri tıpkı bir düğme sembolündeki Up, Over ve Down kareleri gibi işlem görür. Ardından bu kare etiketlerinin tıpkı daha önce düğme sembollerinde yaptığınız gibi her birinde çizimler, grafikler ve metinler kullanabilirsiniz. Siz özellikle farklı bir bölge tanımladığınız sürece tıklanabilir alan klibin kendisidir. Böyle bir tanımlama yapmak isterseniz ayrı bir klip sembolü kullanmalı ve bunu ActionScript ile tıklanabilir alan olarak belirtmelisiniz. Bu düğmeler belirgin öğeler olduklarından düğmenin görsel alanını tıklanabilir alan olarak almak en iyisidir. O bakımdan tıklanabilir alan olma görevini üstlenecek ayrı bir klip sembolü oluşturmanıza gerek yoktur. labels katmanında 5 ve 15 no lu karelerde Timeline a anahtar kareler ekleyin. Bir sonraki adımda bu anahtar karelere kare etiketleri ekleyeceğiz. 9. labels katmanındaki anahtar karelere kare etiketleri ekleyin. Tüm katmanları kilitleyin ve dosyanızı kaydedin. Her anahtar karede kare etiketleri eklerseniz Flash her alanı düğmenin bir hâli olarak kabul eder. Properties denetçisini açın ve labels katmanında 1 no lu kareyi seçin. <Frame Label> metin alanına _up yazın. Aynı alana, 5 no lu kareyi seçip _over ve 15 no lu kareyi seçip _down yazın. 120 DERS 4

140 Bu düğmelere beşinci dersimizde animasyonlar ekleyeceğiz. Beşinci dersimizde düğmelere ilginç efektler kazandırmak için motion tween kullanımını öğreneceğiz. SWF dosyasını test edecek olursanız düğmenin çalışmadığını görürsünüz. Flash ın bu klibi bir düğme olarak algılayabilmek için ActionScript gereklidir. Bunu altıncı dersimizde göreceğiz. Sembolleri Çoğaltmak ve Stage e Eklemek Bir düğmeyi yeniden tasarlamak yerine doğrudan sembolü çoğaltabilir ve böylece pek çok şeyi en başından tekrar yapmaktan kurtulabilirsiniz. Bu belki biraz tembellik demek ama ekonomik olduğu da çok açık. Düğmeyi çoğaltarak da üzerinde çeşitli değişiklikler (örneğin yazılı metni değiştirmek gibi) yapabilirsiniz. 1. Kütüphaneyi açın ve mcsamplechapter klibini bulun. Sembole sağ tıklayıp Duplicate komutunu verin. Duplicate komutunu seçtikten sonra Duplicate Symbol penceresi açılır. Yeni sembole mctoc adını verin ve OK deyin. Yeni klip kütüphaneye eklenecektir. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 121

141 2. mctoc sembolüne çift tıklayın ve metni değiştirin. Üzerine çift tıkladığınızda klip sembol düzenleme modunda açılır. text katmanının kilidini açın ve statik metin alanına çift tıklayın. Font ve metin boyutu aynı kalsın. Metin alanına table of contents yazın. Selection aracını seçin ve metni arka zemin üzerinde ortalayın. Eğer yeni metin dikdörtgenin içine tam olarak sığmıyorsa metni seçin ve font boyunu 9 olarak değiştirin. Gerekiyorsa karakter aralığı olarak -0.5 girin. Böyle bir şey yaparsanız mcsamplechapter sembolünü açıp aynı değişiklikleri onda da yapın, böylece her iki düğme de aynı görünümde olacaktır. 3. mcsamplechapter klibini Stage den silin. mctoc klibini kütüphanede düzenlediğimizden mcsamplechapter ın aksine Stage e eklenmez. mcsamplechapter klibini seçin ve Backspace veya Delete tuşuna basarak klibi Stage den silin. Onu daha sonraki derslerimizden birinde başka bir FLA dosyasına ekleyeceğiz. Şimdilik her iki klibi de kütüphanede bırakabiliriz. Şu anda Stage de ve kütüphanede çok sayıda yeni sembol yer alıyor. Bir sonraki dersimize geçmeden önce bunları organize etmek isteyebilirsiniz. btnproducts, btncompany ve btncontact düğmelerini daha önce Stage e yerleştirmiştik. Bu düğmelerle ilişkili menülerin ise Stage e yerleştirilmesi gerekiyor. 4. Üç menüyü kendilerine ait düğmelerle hizalayın. Üç menü hâlâ Stage üzerinde duruyor olmalı, ancak ilgili düğmeler ile aynı hizada olmayabilirler. catalog ve reviews ı içeren menüyü seçin ve menünün sol alt köşesini btnproducts düğmesinin sol alt köşesi ile aynı noktaya getirin. Menülerin konumunu değiştirmek için eğer kilitli ise menu katmanının kilidini açmanız gerekir. Menüleri taşırken gerekiyorsa buttons katmanını kilitleyin, çünkü menüler doğrudan düğmelerin arkasında olmalı. menüyü düğmeye yaklaştırdığınızda hizalamaya yardımcı olacak noktalı bir çizgi göreceksiniz. Stage deki nesneleri hizalamanıza yardımcı olacak noktalı çizgileri göremiyorsanız ana menüden View > Snapping > Edit Snap Align komutunu verin. Snap Tolerance (Kenetlenme Toleransı) varsayılan olarak 10 pikseldir. Yani birbirlerinin 10 piksel yakınına gelen nesneler kenetlenecektir. Bu durumda noktalı çizgileri görebilir ve nesnelerin yatay veya dikey olarak kenarları boyunca kenetlenmesini sağlayabilirsiniz. Nesnelerin yatay ya da dikey merkezlerini de hizalamak istiyorsanız (daha önce üç düğmede yaptığınız gibi) Center Alignment ın (Merkezî Hizalama) altındaki her iki kutuyu da işaretleyin. 122 DERS 4

142 Aynı prosedürü diğer iki menü için de uygulayın. tour ve news içeren menüyü btncompany düğmesi ile, feedback ve map içeren menüyü de btncontact ile hizalayın. İşiniz bittiğinde buttons katmanını kilitleyin. Ardından menu katmanını da kilitleyin. mcsamplechapter ve mctoc düğmeleri gerçekte Tech Bookstore Web sitesinde kullanılmayacak. Bu öğeleri ilerleyen derslerde başka bir FLA dosyasına kopyalayacağız. 5. Kütüphaneyi temizleyin ve dosyanızı kaydedin. Kütüphanede biraz önce oluşturduğunuz tüm klipleri movie clip klasörüne, grfill grafiğini de graphics klasörüne taşıyın. Dosyanızı kaydedin. SEMBOL OLUŞTURMAK VE DÜZENLEMEK 123

143 Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Sembollerin ne olduğunu öğrendik (Sayfa 93-94). Stage de ve kütüphanede semboller oluşturduk, düzenledik ve görüntüledik (Sayfa 94-97). Sembolleri iç içe yerleştirdik (Sayfa 97-98). Grafik sembolleri hakkında daha fazla bilgi edindik (Sayfa 98-99). Düğmeler ve tıklanabilir alanlar oluşturduk (Sayfa ). Düğmeleri Stage e yerleştirdik (Sayfa ). Bir metin düğmesinin tıklanabilir alanını değiştirdik (Sayfa ). Görünmez bir düğme oluşturduk (Sayfa ). Klip sembolleri oluşturduk (Sayfa ). Bir klip düğmesi tasarladık (Sayfa ). Sembolleri çoğalttık (Sayfa ). 124 DERS 4

144 5 Animasyon Hazırlama Bu kısmı sabırsızlıkla bekliyordunuz değil mi? Animasyonlar oluşturmak her Macromedia Flash kullanıcısının yapmak istediği şeydir. Animasyonlar uygulamalarınıza canlılık katar, ziyaretçilerin yaşayacağı Web deneyimini zenginleştirir. Flash aslen bir animasyon programıdır. Flash ile oluşturulan animasyonların en sık kullanıldığı mekân Web olsa da bu animasyonları CD-ROM larda, bilgisayar destekli eğitim setlerinde, mobil cihazlarda ve hatta dijital yayınlarda da kullanabilirsiniz. Flash ı bu denli kullanışlı ve yaygın yapan şey animasyonlarının küçük boyutları sayesinde her platforma kolaylıkla taşınabilir olmasıdır. Tech Bookstore sitesindeki animasyon

145 Flash 8 de animasyonlar hazırlamak çok zor değildir. Ancak yine de elinizin altındaki araçlara alışmanız ve iyi organizasyon becerilerine sahip olmanız gerekir. Flash işin önemli bir kısmını sizin adınıza üstlenecektir. Ayrıca programda süreci hızlandırmanıza yardımcı olacak hazır efektler de vardır. Bu dersimizde özellikle motion tween ve shape tween tekniklerini kullanarak çeşitli animasyonlar oluşturacağız. Ayrıca animasyonu hangi amaçlar için kullanmanız gerektiğini de dersimiz süresince daha iyi anlayacaksınız. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Farklı animasyon türleri hakkında bilgi sahibi olacaksınız. Bir motion tween oluşturacaksınız. Ease değerini ayarlayarak motion tween leri yavaşlatacak ya da hızlandıracaksınız. Parlaklık ve alfa değerlerini zamana bağlı olarak değiştireceksiniz. Bir shape tween ekleyeceksiniz. Basit bir kare kare animasyon oluşturacaksınız. Bir hareket kılavuzu kullanarak bir sembolü vektörel bir yol boyunca hareket ettireceksiniz. Yaklaşık Süre Bu dersi yaklaşık 2 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: Yok Başlangıç Dosyaları: lesson05/start/bookstore8.fla lesson05/start/mapstarter.fla Tamamlanmış Dosyalar: lesson05/complete/bookstore9.fla lesson05/complete/map.fla 126 DERS 5

146 Animasyonlara Giriş Grafik ya da resim karelerinin art arda hızlı bir şekilde gösterilmesi sonucunda hareketli bir görüntü, yani animasyon oluşur. Flash ta animasyonu oluşturan öğeler Timeline üzerinde yer alan ve çeşitli içerikler barındıran karelerdir. Bu içerik çizimler, fotoğraflar ve hatta ActionScript ile hazırlanmış grafiklerden oluşabilir. Macromedia Flash 8 de animasyonlar hazırlamanın farklı yöntemleri vardır. Ayrıca hazırlayabileceğiniz animasyon türleri de çeşitlilik gösterir. Motion tween ler, shape tween ler veya kare kare animasyonlar oluşturabilirsiniz. tween ifadesi, İngilizce de arada, arasında anlamına gelen between ifadesinin kısaltılmış halidir. Animasyon tekniklerinin gelişmeye başladığı ilk yıllarda animatörler sadece görüntüde değişikliğin olduğu esas kareleri çizer, bunların arasında yer alacak olan kareleri tamamlama işini de yardımcı animatörler üstlenirdi. Flash taki tween mantığı da bundan farklı değildir. Siz animasyonun değiştiği alanları tanımlarsınız, Flash da bu alanların arasını doldurur. Anahtar karelerdeki başlangıç ve bitiş noktalarını (değişikliğin başlayacağı ve sona ereceği noktaları) tanımlamanızın ardından anahtar karelerin arasına bir motion tween uyguladığınızda Flash, Timeline üzerinde başlangıç ve bitiş anahtar kareleri arasında kalan tüm kareleri dolduracaktır. Benzer bir durum shape tween ler için de geçerlidir. Ancak shape tween in amacı hareket değil bir nesnenin şeklinin fiziksel değişimidir. Bu derste hem motion (hareket) hem de shape (şekil) tween ler oluşturacağız. Kare kare animasyonlarsa daha geleneksel bir animasyon türüdür. Flash ın anahtar kareler arasında tween ler oluşturmasını, yani animasyonun önemli bir bölümünü sizin yerinize tamamlamasını tercih etmiyor, animasyonun içerdiği her kareyi bizzat oluşturmak istiyorsanız kare kare animasyon metodunu kullanabilirsiniz. Bu yöntemle, otomatik olarak oluşturulan tween lere göre çok daha karmaşık efektler üretmeniz mümkündür. Ancak kare kare animasyon yapmak tahmin edebileceğiniz gibi hem daha çok zamanınızı alır, hem de SWF dosyanızın boyutunu artırır. ActionScript ve klipler kullanarak da animasyonlar hazırlayabilirsiniz. Bu teknikler kitabımızın kapsamı dışında. Ancak ActionScript i daha geniş bir şekilde öğrenmeye karar verirseniz onunla animasyonlar yapabileceğinizi de bilin. Motion Tween için Hazırlık Motion tween, sabit bir zaman aralığında bir nesnenin konumunu değiştirmek için kullanılır. Bunun dışında, ölçeklendirme, alfa (şeffaflık), tonlama ya da döndürme işlemleri de motion tween kullanılarak yapılabilir. İsteğe bağlı bir hareket kılavuzu ile nesneleri bir vektör yolu üzerinde hareketlendirme gibi daha karmaşık animasyonlar da hazırlanabilir; dersimizin ilerleyen bölümlerinde böyle bir uygulama yapacağız. Burada dikkat etmeniz gereken bir şey var: Sadece ANİMASYON HAZIRLAMA 127

147 sembollerle motion tween yapabilirsiniz. Bu nedenle motion tween yapmadan önce nesneyi bir sembole çevirmelisiniz. Animasyon temel olarak aynı resmin biraz farklı yerlerde kopyalarının gösterilmesiyle oluşturulan bir illüzyondur, dolayısıyla sembol kullanılması uygundur. Bu ayrıca SWF dosyasını dışarı aktarırken (export) dosya boyutunun küçük kalmasını da sağlar. Bunun sebebi, Flash ın zamanı gelen her öğeyi baştan oluşturmak yerine kütüphaneden alıp tekrar kullanıma sokabilmesidir. Shape tween bunun tersidir: Ham verilere shape tween uygulayabilirsiniz fakat sembol kopyalarına, gruplanmış öğelere veya bitmap resimlere uygulayamazsınız. Bunların önce Modify > Break Apart kullanılarak ham veriye dönüştürülmeleri gerekir. Bu dersimizde ham verilere (vektörel çizimlere) shape tween uygulamayı da öğreneceksiniz. Bir FLA dosyasına motion tween eklemenin birkaç yolu vardır, bunları aşağıdaki uygulamalarımızda öğreneceksiniz. İlk uygulamamızda, önceki derslerimizde oluşturduğumuz menülere motion tween ekleyeceğiz. İşimiz bittiğinde, menüler kullanıcı bir düğmeye basınca açılıp daha sonra kapanır hale gelecek. Ayrıca SWF dosyası oynatılırken animasyonun sürekli gösterilmesini önlemek için bir hareket durdurma komutu ekleyeceğiz. 1. TechBookstore klasörü içinden ya da CD-ROM daki lesson05/start dizininden bookstore8.fla dosyasını açın ve sabit diskinizdeki TechBookstore klasörüne bookstore9.fla adıyla kaydedin. Dördüncü dersimizde, bu derste hareketlendireceğimiz sembollerin çoğunu hazırladık. Önemli değişiklikler yağacağımız için dosyamızı farklı bir isimle yeniden kaydediyoruz. 2. Stage de mcproducts örneğini bulun, F8 tuşu ile onu başka bir klibe yerleştirin ve klibi mcproductsmenu olarak isimlendirin. Klibimizi neden başka bir klibin içine koyduğumuzu merak ediyor olmalısınız. Flash ta çalışırken bazen animasyonların dokümanın ana Timeline ı üzerinde yer almasını istemeyiz. Bunun çözümü de animasyonların klip sembollerinin içerisinde oluşturulması ve bu klibin bir örneğinin Stage e yerleştirilmesidir. Bu durumda mcproductsmenu klibi içinde bir hareket animasyonu yapmış olacaksınız. Motion tween leri sadece sembollerde kullanabildiğinizi unutmayın, mcproducts ı mcproductsmenu içine yerleştirmemizin nedeni budur. buttons katmanı menu katmanının üstünde bulunduğu için menu kliplerini seçmek zor olabilir. buttons katmanını kilitleyip gizleyerek menu kliplerini daha kolay seçilebilir bir hale getirebilirsiniz. 128 DERS 5

148 3. mcproductsmenu ye çift tıklayarak onu Stage de düzenlemeye başlayın. Gerekirse menüyü yakınlaştırın. mcproductsmenu üzerine çift tıkladıktan sonra Stage in geri kalanı donuklaşır ve siz de düzenlemekte olduğunuz sembole odaklanabilirsiniz. Burada sembolün ana özellikleri elinizin altındadır ve yaptığınız değişiklikler sembolün doküman içindeki tüm kopyalarını (örneklerini) etkileyecektir. Stage deki klibimizin tek bir örneği olduğundan, üzerinde düzenleme modunda çalışmamızın herhangi bir sakıncası yoktur. Özellikle bu modda çalışacağız çünkü animasyonumuz Stage de belirli yerlerde başlayıp bitmek zorunda ve biz bu mod sayesinde çalışırken Stage ve tüm grafikleri birlikte görebiliriz. 4. Layer 1 i seçin ve ona menu tween adını verin. Yeni bir katman ekleyin ve bu katmana actions adını verin. actions katmanında 11 ve 20. karelere anahtar kareler yerleştirin. menu tween katmanını seçin, Insert New Layer düğmesine tıklayın ve katman ismi olarak actions girin. 11 ve 20. karelerde anahtar kare oluşturmak için kareyi seçin ve F6 tuşuna basın. Her anahtar karede klibin pozisyonunu değiştireceğiz. Klibin konumunu değiştirmek, anahtar karelerin arasına tween eklerken animasyonun oluşturulmasını sağlayacaktır. Tween leri bir sonraki uygulamamızda ekleyeceğiz. Klipler hakkında bilmemiz gereken önemli şeylerden biri de, bunların kendi Timeline larının olduğudur. Klipler küçük çocuklar gibidir: Siz söylemeden bir şey yapmazlar ya da daha kötüsü, aksi söylenmedikçe bir şeyi yapmayı bırakmazlar. Bunun anlamı, bir klip içinde animasyon yaptığınızda, siz ne zaman duracağını belirtmedikçe animasyon sürekli tekrar edecektir. Animasyonunuzun aşağı açılan menü şeklinde olmasını istiyorsunuz diyelim: Kullanıcı düğmelerden birine (Products) tıkladığında menü aşağı doğru hareketlenerek tamamen açılmalı ve tüm seçenekler ortaya çıktığında durmalıdır. Bir seçenek tıklandığında ya da kullanıcı fareyi uzaklaştırdığında menünün ilk baştaki haline gelmesini de istiyoruz. Bu nedenle klibimize iki farklı noktada animasyonu durdurmasını söylemek zorundayız: 11 ve 20. karelerde. 5. Animasyonu kontrol etmek için Timeline a durdurma eylemleri (stop action) ekleyin. Durdurma eylemleri Actions panelinden eklenir. ActionScript i henüz bilmiyor olsanız da basit bir tıklama işlemiyle ActionScript ten faydalanabilirsiniz. Ana menüden Window > Actions ı seçerek Actions panelini açın. Actions paneli Windows ta Stage in altında ve OS X te de yüzen panel olarak açılır. Actions panelinde üç ayrı bölüm bulunur: Script paneli, Script listesi ve Actions bölümü. Script paneli, Script listesi ve Actions ANİMASYON HAZIRLAMA 129

149 bölümünün sağındaki büyük metin alanıdır. Aşağıdaki şekilde Actions panelinin farklı bölümlerini görüyorsunuz. Actions araç kutusu Script paneli Script Assist düğmesi Script listesi Script sekmesi actions katmanında 11. ve 20. karelere anahtar kare eklerken Script Assist i kullanacağız. ActionScript deneyiminiz yoksa Script Assist özelliği çok işinize yarayacaktır. Eklemek istediğiniz eylemi seçtiğinizde Script Assist ona uygun menü seçenekleri ve düğmeleri eklemenize yardımcı olur. actions katmanında 11 no lu anahtar kareyi seçin ve Actions panelinin başında Actions-Frame yazdığından emin olun. Actions panelinin başlık çubuğundan bir kare mi yoksa bir nesne mi seçtiğinizi anlayabilirsiniz. Script listesinde de aynı şekilde Current Selection bölümünde actions katmanının 11. karesi görülmelidir. Script panelinin altındaki script etiketi de aynı işi görür. 130 DERS 5

150 Script panelinin sağ üst köşesindeki Script Assist düğmesine tıklayın. Soldaki Actions araç kutusunda Global Functions kategorisine tıklayın ve Timeline Control ü seçin. Timeline Control kategorisinde stop action a çift tıklayıp Timeline a eklenmesini sağlayın. Script Assist, Actions denetçisinin üstünde stop eyleminde parametre kullanılmadığını gösterecektir. Aynı yöntemle actions katmanındaki 20. kareye de bir stop eylemi ekleyin. Script Assist, Script panelinin sol üstündeki Actions araç çubuğunda seçtiğiniz işlemin açıklamasını gösterir. Onun altında eylemi script inize nasıl ekleyebileceğiniz açıklanır. Kareye ActionScript eklenmiş Eylemin tanımı Eklenecek eylem Eylemin nasıl eklenebileceğine dair açıklamalar ActionScript eklemeyi bitirdikten sonra, Lock Layer simgesinin altındaki noktaya tıklayarak actions katmanını kilitleyin, böylece actions katmanında Stage e bir şey eklenmesini önlemiş oluyoruz. ActionScript içeren bir katmanda ham veri, sembol ve örnekleri, bileşenleri ya da diğer öğeleri bulundurmamak çok sağlıklı bir yoldur. Kodları nesnelerle (örneğin ActionScript içeren ANİMASYON HAZIRLAMA 131

151 bir bileşenle bir klibi) aynı katmana yerleştirirseniz, SWF dosyanızda kod çakışmaları yaşanabilir. Ayrıca FLA dosyanızdaki hataları ayıklamak da güçleşebilir. Kare eylemleri eklerken, eylemler Timeline üzerindeki diğer öğeler gibi anahtar karelere yerleştirilmelidir. Normal bir kareye ActionScript ekleyemezsiniz. 6. Yeni bir katman oluşturun ve labels olarak adlandırın. Sonra 2 ve 12. karelere yeni anahtar kareler ve kare etiketleri ekleyin. İşiniz bitince katmanı kilitleyin. menu katmanını seçin ve Insert Layer düğmesine tıklayın. Yeni katmana labels ismini verin. 2. ve 12. karelerde yeni anahtar kareler oluşturmak için kareyi seçip F6 tuşuna basın. Şimdi ActionScript i kullanarak, Products düğmesine tıklandığında ya da animasyon sonrasında fare menüden çekildiğinde oynatımın doğrudan bu karelere taşınmasını sağlayacaksınız. Bu iş için ActionScript i kullanmanın en kolay yolu anahtar karelere etiket vermektir. Bunun sebebini aşağıdaki paragrafta açıklıyoruz. Menülerinizin açılıp kapanma animasyonunun süresi hoşunuza gitmeyebilir ve bu yüzden animasyonda yer alan kare sayısını değiştirmek isteyebilirsiniz. Bunu yaptığınızda, animasyonların başlangıç ve bitişleri farklı karelere kayabilir. Eğer ActionScript e belli numaralı bir kareye gitmesini söylemişseniz, Actions paneline girip script i yeni numaraları gösterecek şekilde değiştirmeniz gerekir. Ancak, oynatım kafasını etiket verilmiş bir kareye gönderme yoluna giderseniz, başlangıç ve bitiş kareleri hareket ettiğinde etiket de onlarla birlikte hareket eder ve Script i değiştirmeniz gerekmez. labels katmanında 2 numaralı kareyi seçin ve Properties denetçisinde <Frame Label> alanına slidedown yazın. Sonra labels katmanından Kare 12 yi seçin ve <Frame Label> kutusuna slideup yazın. İşiniz bitince, daha önce yaptığınız gibi katmanı kilitleyerek üzerine kaza ile yeni içerik eklenmesini önleyin. 7. menu tween katmanının 12 ve 20. karelerine yeni anahtar kareler ekleyin. Bu kareler, menünün nasıl hareket edeceğini belirler. Kare 12, menü açılış animasyonunun sonu, menü kapanış animasyonunun ise başlangıcıdır. 132 DERS 5

152 8. Kare 12 deki mcproducts klibinin konumunu değiştirin. Kare 12 de Stage den mcproducts ı seçin. Klibi Shift tuşuyla birlikte aşağı ok tuşuna basarak aşağı kaydırın ve hemen grbar ın altına getirin. Aşağıdaki şekli inceleyin. Klavyeden Shift ve aşağı tuşlarına bastığınızda, seçili grafik 10 piksellik birimler halinde aşağı kayar. Tek başına aşağı ok tuşuna bastığınızda ise hareket birimi 1 piksel olur. 9. Ana Stage e dönün ve diğer iki menü için bu adımları tekrar edin. Düzenleme çubuğunda Scene 1 e tıklayarak ana Stage e dönün. 2 den 8 e kadar olan adımları mccompany ve mccontact için tekrar edin. İçinde bulundukları klipleri sırasıyla mccompanymenu ve mccontactmenu olarak adlandırın. Tüm menülerimiz artık motion tween için hazır. 10. İşiniz bittiğinde FLA dosyanızda yaptığınız değişiklikleri kaydetmeyi unutmayın. Böylece tüm kliplerinizi motion tween için ayarlamış bulunuyoruz. Motion tween uygularken bir sembolün kopyasını sadece o sembolün aynı katmandaki başka bir kopyasına doğru hareketlendirebilirsiniz. Anahtar kareler içerisinde sadece bu sembol kopyalarının olmasına izin verilir çünkü Flash bir anahtar karede aynı anda sadece tek bir şeye tween uygulayabilir. Hareketlendirilecek sembolün bulunduğu kareye başka nesneler koyduğunuzda, Flash hangi nesnenin anime edileceğini bilemez. Aynı anda birden fazla şeyi hareketlendirmek isterseniz her animasyonu kendi katmanına koymanız gerekir. Flash 8 le gelen Distribute to Layers özelliği, bir metin bloğunun (Modify > Break Apart ile ayrılmış olmalı) harflerini ayrı ayrı hareketlendirmek istediğinizde ya da FLA oluştururken bir öğeler grubunu Stage e aktarmak istediğinizde oldukça yararlıdır. Stage de birden fazla nesne seçtikten sonra Modify > Timeline > Distribute to Layers ı seçerseniz, Flash seçili her nesneyi yeni bir katmana yerleştirir ve isimlendirir. Fakat genelde isimleri elle kendi isteğinize göre düzenlemeyi tercih edeceksiniz. Burada fazla kullanılmasa bile, bu özellik FLA dosyanızı düzenli bir halde tutmanız ve geliştirme sürecini kısaltmanız için oldukça faydalıdır. ANİMASYON HAZIRLAMA 133

153 Motion Tween lerin Eklenmesi Yukarıda gördüğünüz gibi, motion tween kullanarak Stage de bir sembol kopyasının konumunu, parlaklığını, alfasını (şeffaflığını) ya da tonlamasını değiştirebilirsiniz. Properties denetçisinde yer alan Color menüsünü kullanarak kopyanın (sembol örneğinin) parlaklık, alfa ya da tonlaması ile oynayabilirsiniz. Motion tween uyguladığınız bir kopya varsa, bu menüden anahtar karenin değerlerini değiştirdiğinizde yeni ayarladığınız özelliklerden başlayan ya da ona doğru giden bir geçiş oluşturulur. Klibinizin anahtar kareleri hazır ve kopyanın başlangıç ve bitiş pozisyonları belli olduktan sonra, menüleri hareket ettirecek asıl motion tween leri eklemeye hazırız demektir. Burada ayrıca motion tween kullanarak ve Properties denetçisindeki değerleri değiştirerek menü parlaklığını da anime edeceğiz. 1. bookstore9.fla dosyasında mcproductsmenu öğesini çift tıklayarak açın. menu tween katmanını seçin. Bir önceki uygulamamızda hazırladığımız klipler ve içerikle çalışacağız. 2. Menüyü aşağı hareket ettirmek için Kare 1 ve 12 arasında bir motion tween oluşturun. menu tween katmanından 1 ve 12 arasındaki herhangi bir kareye sağ tıklayınca gelen ya da Control tuşuna basıp tıkladığınızda açılan menüden Create Motion Tween i (Motion Tween Oluştur) seçin. İlk dikkat etmeniz gereken şey, karelerin zemin renginin mora yakın bir renge dönmesi ve ilk kareden son kareye uzanan ok olmalıdır. Bu durum, tween i katmana doğru şekilde eklediğinizi gösterir. 3. adımdaki şekilde motion tween lerin bulunduğu bir Timeline görülmektedir. Yanlış bir ekleme yapmışsanız, katmanınızda kesintisiz uzun bir ok yerine kesikli çizgiler görürsünüz. Bu genelde hareketin olmasını istediğiniz anahtar karelerin içinde birden fazla nesne olması durumunda görülür. Sembol içermeyen anahtar kareler arasında bir motion tween oluşturmayı denediğinizde, Flash bu anahtar karelerdeki grafikleri Tween1, Tween2, vs. isimlerinde grafik sembollerine dönüştürecektir. Bunu önlemek için Timeline da oynama yapmadan önce kendiniz grafik nesnelerini sembollere dönüştürmeyi unutmayın. 3. İkinci bir motion tween ekleyerek menüyü yukarı hareketlendirin ve Timeline da gezinerek animasyonu denetleyin. 2. adımı uygulayarak 12 ve 20. kareler arasına bir motion tween ekleyin. 12 ve 20. kareler arasında herhangi bir kareye sağ tıklayın ve açılan menüden Create Motion Tween i seçin. İşiniz bittiğinde, 134 DERS 5

154 menü 1-12 no lu kareler arasında aşağı, no lu kareler arasında da yukarı hareket edecektir. Oynatım kafasını sürükleyerek animasyonu izleyin. Bir dizi kareye motion tween uyguladıktan sonra, iki anahtar kare arasına kareler ekleyip çıkarmak suretiyle tween süresini değiştirebilirsiniz. Tween içindeki herhangi bir kareyi seçip F5 e tıkladığınızda kare ekleyebilir ve sağ tuş menüsünden Remove Frames komutu ile kareleri silebilirsiniz. Flash sizin için otomatik olarak tween i değiştirecektir. 4. Properties denetçisinden menü motion tween ine Ease değeri verin. Bir motion tween in başlangıç karesini seçtiğinizde, Properties denetçisinde Ease çubuğunu görebilirsiniz. Bunu kullanarak, motion tween süresince animasyonu yavaşlatıp hızlandırabilirsiniz; bu araç özellikle yerçekimi efektleri için bu çok kullanışlıdır. Standart değeri sıfırdır (ease yok). Çubuğu pozitif bir sayıya (1-100 arasında) getirerek Flash a animasyona hızlı başlayıp sonra yavaşlamasını söyleyebilirsiniz. Negatif bir sayı seçtiğinizde ise animasyon yavaştan başlayıp sona doğru hızlanacaktır. İki şekilde de animasyon süresi değişmeyecektir. Kare 1 i seçin ve Properties denetçisini açın. Ease çubuğunu 100 e getirin, böylece menü hızlı bir şekilde açılmaya başlayıp aşağı gelirken yavaşlayacaktır. Sonra 12. kareyi seçin ve çubuğu -100 e getirin. Menü giderek artan bir hızla kapanacaktır. ANİMASYON HAZIRLAMA 135

155 Bir motion tween yaparken, seçili sembolün yönünü ve dönüş miktarını da ayarlayabilirsiniz. Dönüş için dört seçenek mevcuttur: None (dönüş yok), Auto (otomatik), CW (saat yönünde) ve CCW (saat yönünün tersi). Auto yu seçecek olursanız, nesne en az hareket gerektiren tarafa doğru döndürülür. Son iki seçenek, nesneyi iki yönden birine belirtilen miktarda döndürür. 5. Menüye bir parlaklık tween i ekleyin ve Timeline da gezinerek animasyonu denetleyin. menu tween katmanında Kare 1 de mcproductsmenu kopyasını seçin. Parlaklık özelliğine ulaşabilmek için kareyi değil kopyayı seçmelisiniz. Properties denetçisinde Color menüsünden Brightness değerini %85 e getirin. Kare 12 deki mcproductsmenu kopyasını seçin ve parlaklığın 0 da olduğundan emin olun. Timeline daki oynatım kafasını kaydırarak animasyonun aldığı şekli izleyin. Mümkün olduğunca alfa tween yerine parlaklık tween i kullanmaya çalışın, çünkü özellikle ayrıntılı bitmap resimlerde alfa tween ler çok daha fazla işlem gücü gerektirir. Alfa ile tween uygularken Flash ın çok daha fazla hesaplama yapması gerekir. 6. FLA dosyasındaki diğer iki menüye de yukarıdaki adımları uygulayın. Oynatım kafasını hareket ettirerek animasyonun doğru çalışıp çalışmadığını kontrol edin. FLA dosyasında kalan iki menüye de aynı işlemleri uyguladığımızda, üç menünün de animasyonu hazır olacaktır. Animasyonları eklemeyi bitirdikten sonra oynatım imlecini Timeline daki karelerin üzerinde sürükleyin ve animasyonunuzu izleyin. Enter tuşuna basarak animasyonu Flash düzenleme ortamında oynatabilirsiniz. Animasyon Stage de başlayıp sonuna kadar gösterilecektir. 136 DERS 5

156 Unutmayın, oynatım kafasını fare ile Timeline üzerinde kaydırarak animasyonu kontrol edebilirsiniz. 7. Ana Stage e dönün. Kütüphaneyi temizleyin ve FLA dosyanızı kaydedin. Düzenleme çubuğunda Scene 1 e tıklayarak ana Stage e dönün. mcproductsmenu, mccompanymenu ve mccontactmenu öğelerini kütüphanedeki movie clips klasörüne taşıyarak ortalığı temizleyin. Yaptığınız değişiklikleri kaydedin. Alfa Seviyelerinin Animasyonu Bir sembol kopyasının alfasını değiştirmek, kopyayı Stage de gezdirmekten pek farklı değildir. Bir önceki çalışmada yaptığımız parlaklık düzeyi değiştirmeyle de neredeyse aynıdır. Önceki derslerden hatırlayacağınız gibi, alfa bir nesnenin opaklık veya şeffaflık düzeyini gösterir. Bir nesnede alfa 0 sa nesne şeffaftır ve Stage de görünmez. %100 alfa ise nesnenin tamamen görünür durumda olduğunu belirtir. Motion tween uygulanmış bir sembol örneğinin alfa değerini değiştirerek kaybolma ve belirme etkileri elde edebiliriz. Alpha ile kaybolma/belirme efektleri fazla kullanılmamalıdır çünkü işlemciye çok yük bindirirler. Hatta işlemciyi sömürdükleri bile söylenebilir. Aşağıdaki uygulamada motion tween kullanarak logonun arkasındaki ışığı azaltacak ve grafiğin büyüklüğünü değiştireceğiz. Yine bookstore9.fla dosyası ile çalışıyoruz. 1. grglow u seçin ve onu mcbookglow adlı bir film klibi sembolüne dönüştürün. Layer 1 i de glow animation olarak isimlendirin. Gerekiyorsa düzenleme çubuğunda Scene 1 e tıklayarak ana Stage de bulunduğunuzdan emin olun. mclogo içerisinde grglow kopyasını bulun. Bunu yapmanın en kolay yolu, kütüphanede ya da Stage de mclogo üzerine çift tıklamaktır. İki şekilde de sembol düzenleme moduna girersiniz, buradan grglow kopyasını seçip F8 e basarak onu mcbookglow adlı bir klip sembolüne dönüştürün. Eklediğiniz animasyon sürekli tekrar edeceği için, grafik sembolünü klibe dönüştürmek zorundayız. pageturn ve logo katmanlarının kilitli olduğundan ve grglow kopyasını seçtiğinizden emin olun. mcbookglow üzerine çift tıklayarak kopyayı açın ve Layer 1 olan katman adını glow animation olarak değiştirin. Şimdi iç içe üç Timeline a sahipsiniz. (şekle bakınız). ANİMASYON HAZIRLAMA 137

157 2. glow animation katmanında 35 ve 70. karelerde anahtar kareler oluşturun. glow animation katmanında 35. kareyi seçin ve yeni bir anahtar kare ekleyin. 1. karenin içeriği 35. karedeki anahtar kareye kopyalanacaktır. glow animation katmanında 70. kareye başka bir anahtar kare ekleyin. Şimdi grglow un alfa ve büyüklüğünün kareler arasında değişmesini sağlayacağız. 3. Transform aracı ile grglow un büyüklüğünü değiştirin. glow animation katmanında 35 no lu kareyi seçin. Tools panelinden Transform aracını seçin ve bir köşesinden tutup merkeze çekerek grglow kopyasını küçültün. Sembolün bozulmasını önlemek ve ölçü oranlarını korumak için fareyle sürükleme sırasında Shift tuşunu basılı tutun. Dördüncü adımdaki şekilde görüldüğü gibi büyük kısmı grlogo nun arkasında saklı kalacak kadar ufaltın. grlogo, grglow un altında görünür durumdadır fakat farklı bir Timeline da bulunduğu için açık renktedir (yerinde düzenleme modunda iseniz). Bunun dışında, Free Transform aracı seçili iken, Tools paneldeki Options tan scale (ölçekle) seçeneğini de kullanabilirsiniz. Ölçekleme seçili iken, nesnenin köşesinden tutup oynatırken boyut oranları değişmez. 4. Properties denetçisini ve motion tween kullanarak grglow un şeffaflığını değiştirin. Kare 35 teki grafik büyüklüğünü değiştirdiniz. Şimdi kopyanın alfasını değiştirelim. Yine Selection aracıyla Kare 35 teki kopyayı seçin. Properties denetçisinde Properties sekmesindeki Color listesinden Alpha yı seçin ve alfa değerini %100 den %80 e indirin. 138 DERS 5

158 Ekrandaki görüntü istediğiniz gibi olmadıysa kopyaya verdiğiniz yeni alfa değerini değiştirin. Unutmayın, Stage deki kopyada yaptığınız değişiklikler kütüphanedeki sembolü etkilemez. Kütüphaneden başka bir grglow kopyası aldığınızda Stage de siz değişiklik yapmadan önceki orijinal haliyle görünecektir. 5. Grafiği boyutlandırmak için motion tween ekleyin ve sonra Timeline daki oynatım kafasını kaydırarak animasyonu izleyin. Kare 1 ve 35 arasına tıklayın ve Properties denetçisini açın. Tween listesini None dan Motion a getirin. Aynı adımları Kare 35 ve 70 arasında tekrarlayın. Klip şu anda parlaklığı daha geniş bir boyutta anime etmekte ve orijinal durumuna gelmeden az önce soluklaştırmaktadır. Bu klibi ayrı olarak (tüm SWF dosyasını izlemeden) test etmek için oynatım kafasını mcbookglow sembolünün 1. karesine getirip ana menüden Control > Play komutunu verebilirsiniz. 6. mcbookglow u kütüphanedeki Movie Clips klasörüne taşıyın. Bir sonraki çalışmadan önce FLA dosyanızı kaydedin. ANİMASYON HAZIRLAMA 139

159 Klip Düğmesinin Animasyonu Dördüncü dersimizde iki klip düğmesi hazırlamıştık: Birisi içindekiler tablosu (table of contents), diğeri de örnek bir bölüm (sample chapter) içindi. Şimdiki uygulamada, klip düğmesine bir mouse-over efekti ekleyeceğiz. Bu efekti klibin içindeki bir parlaklık tween i oluşturacak. Ziyaretçi faresini düğme üzerine getirdiğinde düğme hareketlenecek, fare uzaklaşınca da orijinal parlaklığına dönmesi için ikinci bir animasyon gerçekleşecek. Klip düğmeleri özel kare etiketleri kullanırlar, böylece Flash her etiketli kareye bir düğme hâli olarak davranması gerektiğini bilir (aksi takdirde normal kare gibi davranır). Bizim kullanacağımız özel etiketler _over ve _down olacak (_over normal bir düğme sembolünün fare ile üzerine gelinmiş, _down da fare ile basılmış hâli). Bu etiketleri dördüncü dersimizde hazırlamıştık. Bu uygulamamızda yine bookstore9.fla dosyasıyla çalışıyoruz. 1. Kütüphaneden mcsamplechapter klibini bulun ve üzerine çift tıklayın. Sembole çift tıkladığınızda klip sembol düzenleme modunda açılacaktır. fill katmanının kilidini kaldırın ve animasyona devam etmeden önce diğer katmanların kilitli olduğundan emin olun, böylece text ve stroke katmanlarını yanlışlıkla seçmeniz engellenmiş olur. 2. fill katmanını seçin ve 5, 14 ve 25. karelere (son kare) birer anahtar kare yerleştirin. Timeline daki 5. kare _over isimli bir karedir. Kullanıcı klip düğmesinin üzerine fareyle geldiğinde bu kare animasyona başlayacaktır. Kare 5 i seçip F6 ya basarak bir anahtar kare ekleyin. Aynı katmandaki 14 ve 25. kareler için bu işlemi tekrarlayın. Biri _over, diğeri de _down hâli için olmak üzere iki animasyon hazırlanacaktır. _over hâli animasyonunun, _down animasyonunun tam tersi olmasını istediğimiz için, _over animasyonunun başlangıcı ve _down animasyonunun bitişi aynı kare olmalıdır. 140 DERS 5

160 3. grfill e bir parlaklık tween i ekleyin. 15 no lu kareye bir anahtar kare ekleyin. fill katmanında 5. kareyi seçin ve Properties denetçisini açın. Tween menüsünden Motion ı seçerek bir motion tween ekleyin. Kare 14 te grfill i seçin, Properties denetçisinde Color menüsünden Brightness ı seçin ve değerini %85 e ayarlayın. İşiniz bitince kare 15 e F6 ya basarak bir anahtar kare ekleyin. Properties denetçisinden Tween olarak Motion seçimini yapın. Oynatım kafasını gezdirerek oluşturduğunuz motion tween leri izleyin. Bu aşamada düğmeyi test ederseniz parlaklık tween lerini göremezsiniz çünkü Flash taki klip düğmeleri her özel kare etiketine gidip duracak şekilde tasarlanmıştır. Her bir animasyonu oynatıp animasyonun sonuna kadar gitmesi için biraz ActionScript kodu eklemeniz gerekecek. Bunu da başka bir derste yapacağız. 4. mctoc kopyası için yukarıdaki adımları tekrarlayın mctoc klibi aynı zamanda kütüphanede de bulunmalıdır. Kütüphanedeki sembole çift tıklayarak sembol düzenleme modunda açılmasını sağlayın. Aynı adımları mcsamplechapter için de yaparak düğmelerin aynı şekilde hareketlenmesini sağlayın. 5. Klibin Timeline ında fill katmanını kilitleyin, değişiklikleri kaydedin ve ana Stage e dönün. ANİMASYON HAZIRLAMA 141

161 Shape Tween Oluşturma Shape tween, düzenlenebilir bir vektör grafiğin şeklini zaman içinde değiştirmenizi sağlar. Çizgilerin uzunluğunu değiştirebilir, çizgileri bükebilir ya da bir vektör çizimini değiştirerek çok ilginç efektler elde edebilirsiniz (renk değiştirme dahil). Flash tüm hesaplamaları üstlenerek sizi her kareyi tekrar çizme zahmetinden kurtarır: Tek yapmanız gereken başlangıcı, şeklin değişeceği noktaları ve bitişi belirlemektir (tıpkı motion tween gibi). Bir katmanda bir ya da birkaç şekil bulunabilir fakat aynı anahtar kare üzerinde çok sayıda şekil bulunursa birbirlerini çok farklı şekilde etkileyebilirler. Dikkat: Shape tween ne kadar karmaşıksa, kullanıcının bilgisayarında o kadar işlemci gücü harcanacaktır. Ziyaretçilerinizi zor duruma sokmak istemezsiniz değil mi? Shape tween ler sadece ham vektör grafiklere uygulanabilir (seçildiklerinde bir çarpı işareti görülür). Bir bitmap resmin şeklini başka bir bitmap resme dönüştürmek için farklı yazılımlar gerekir. Tween in uygulanması üzerinde kontrolünüz çok az olduğu için shape tween yaparken beklenmedik durumlarla karşılaşmak anormal sayılmaz. Bir şeklin tween başından sonuna kadar gideceği yol tüm ekranı dolaşabilir. Şekil değişimini kontrol etmenize yardımcı olmak için Flash 8 de şekil izleri bulunmaktadır. Bu sayede anahtar kareler arasında bir noktanın geleceği pozisyonları belirleyebilirsiniz (başlangıç şeklindeki bir nokta sırasıyla belirlediğiniz izi takip ederek son şekildeki yerini alır). Her şekil izinin bir harfi vardır. Dolayısıyla, bir tween başında şekil izinde a harfi varsa, tween sonunda o nokta oradaki a harfine gelecektir. Örneğin, köpek şeklini alması gereken bir kedi şeklimiz olsun. Kedinin kulağını temsil eden ve kulak ucunda a harfi olan üçgen biçimli şekil izini ve karşılık gelen izi de köpeğin kulağına eklediğinizde, kedinin kulağı direkt olarak köpeğin kulağına gidecek ve gereksiz yere uzun bir yol izlemeyecektir. Ancak, şekil izlerinin sayısı arttıkça durum kötüleşir ve bu nedenle fazla kullanmanızı tavsiye etmiyoruz. Şekil izlerini eklemek için shape tween açıkken Modify > Shape > Add Shape Hint komutunu verebilirsiniz. Şekil izlerinin doğru çalışması için en az dört tane kullanın ve karışık olarak dağıtmak yerine saat yönünde a, b, c, d sırasıyla yerleştirin. 142 DERS 5

162 Shape tween yaparken şekil izleri dışında iki karıştırma seçeneği mevcuttur: Distributive (dağınık) ve Angular (köşeli). İlki biraz düzensiz görünen daha yumuşak bir geçiş sağlarken, ikincisini sadece düz çizgi ve köşeli şekillerde kullanabilirsiniz. Şimdiki uygulamamızda Web sitemizin sol üst köşesindeki kitap logosuna sayfa çevirme efekti ekleyeceğiz. Hâlâ bookstore9.fla dosyası ile beraberiz. 1. Stage de mclogo klibi içindeki mcpageturn ü bulun. mcpageturn e çift tıklayarak klibi sembol düzenleme modunda açın ve en az %800 yakınlaştırın. Dördüncü dersimizde hazırladığımız tek çizgiden oluşan klip sayfa çevirme animasyonu içindi. Sayfa çevirme animasyonu iki bölümden oluşur. İlk bölüm için bu uygulamamızda bir shape tween hazırlayacağız. 2. Layer 1 in adını animation olarak değiştirin. 10. kareye bir anahtar kare ekleyin ve yeni anahtar karenin içeriğini düzenlemeye başlayın. Katman adını değiştirip anahtar kare ekledikten sonra, 10. kareyi düzenlemeye başlayabilirsiniz. 10. karede basit bir çizgi bulunmaktadır. Selection aracını seçin ve zemine tıklayarak çizginin seçili olmadığından emin olun. Fareyle çizginin üzerinde geldiğinizde sağ altta aşağıdaki gibi kavisli bir çizgi görmelisiniz: ANİMASYON HAZIRLAMA 143

163 Çizgiyi sürükleyerek bükülmesini sağlayın. Aşağıdaki şekli elde edene kadar devam edin: Çizginin üst ucuna gelin, imleç okun yanında bir köşe şeklini alacaktır. Çizginin ucunu tutup çekerek aşağıdaki şekli elde edin. 3. Properties denetçisinden shape tween ekleyin ve animasyonu test edin. 144 DERS 5

164 1. kareyi seçin ve Properties denetçisini açın. Tween listesinden shape i seçin. animation katmanını kapsayan yeşil ok o karelere shape tween eklendiğini gösterecektir. Oynatım kafasını kaydırarak logoya eklenen animasyonu izleyin. Çizginin alt ucu kitabın sırtıdır ve sabit kalmalıdır. Çevirme animasyonu bir sonraki uygulamamızda tamamlanacaktır. 4. Shape tween hazır olduğunda ana menüden File > Save ile dokümanınızda yapmış olduğunuz değişiklikleri kaydedin. Sıradaki uygulamamızda shape tween arkasına kare kare animasyon ekleyerek çevrilen sayfa animasyonunu tamamlayacağız. Kare Kare Animasyon Hazırlama Küçükken okulda canınız sıkılınca defterinizin kenarına sayfaları çevirdikçe değişen şekiller çizmişsinizdir. Defterin yapraklarını hızla (ve sessizce) çevirince çizgi film gibi görünen bu şekil matematikten zayıf almanıza neden olmuşsa da (çünkü dersi dinlemiyordunuz), ilk kare-kare animasyonunuz olması açısından önemlidir. Tahmin edebileceğiniz gibi, bu türde animasyonları hazırlamak hem çok zamanınızı alacak hem de dosya büyüklüğü nispeten daha büyük olacaktır. Fakat bu yöntem Flash 8 araçlarınız içinde oldukça önemli bir yere sahip olmalıdır çünkü bu sayede tween lere göre daha karmaşık efekt ve animasyonlar hazırlanabilir. Tween eğlencelidir fakat her şeyi onunla yapamazsınız. Kare-kare animasyonlar, her karede resmin farklı olması gereken karmaşık animasyon dizileri için çok uygundur (yüz ifadeleri ya da yürüyüş gibi). Zayıf yönü ise, genelde her karede resim değiştiği için Flash ın bunların her birini dışarı SWF dosyasına kaydetmesi ve bunun da dosya boyutunu artırmasıdır. ANİMASYON HAZIRLAMA 145

165 Animasyonları elle çiziyorsanız, kalemli bir tablet (Wacom gibi) kullanmak işinize yarayabilir. Tabletiniz destekliyorsa Flash kalem basıncı ve eğim gibi özellikleri kullanabilir. Şimdiki uygulamamızda önceki uygulamada başladığımız sayfa çevirme animasyonunu tamamlayacağız. 1. bookstore9.fla dosyasında mcpageturn klibini açın (önceki uygulamada oluşturduğunuz shape tween). 1 ve 10. kareler arasında bir shape tween bulunuyor, animasyonumuzun ilk yarısı budur. İkinci bölüme gereken detay seviyesini yakalamak için kare-kare animasyon yapacağız. Animasyonu başka bir shape tween kullanarak da tamamlayabilirsiniz fakat yapacağımız şekilde harekete daha hâkim olabileceksiniz. Tabii öğrenmenize de katkısı olacak. 2. Shape tween bitimine yeni bir anahtar kare ekleyin ve onion skinning i açın. Onion Skin Outlines düğmesine basarak onion skinning i açın. Bu size son derece yardımı olacak bir araçtır. Bu araç sayesinde sadece çalıştığınız kareyi değil, bir önceki ve bir sonraki kareleri de görebilirsiniz. Böylece çizimlerinizi tam yerine oturtabilir ve yumuşak bir animasyon elde edebilirsiniz. Üzerinde çalıştığınız kare tam renkliyken (onion skinning yokmuş gibi), komşu kareler hafif soluk ya da ana hatlarıyla görünecektir. Shape tween i izleyen boş kareye (kare 11) tıklayın ve F6 ya basarak yeni bir anahtar kare ekleyin. Önceki karenin içeriği yeni anahtar kareye kopyalanacaktır, şimdi bunu modifiye edeceksiniz. Onion skin işaretlerini sürükleyerek daha fazla kare görebilirsiniz. 146 DERS 5

166 Onion Skin işaretçileri Önceki karelerin içerikleri O anda düzenlenebilir olan kare 3. Yeni anahtar karenin içeriğini değiştirin. Önceki uygulamamızda, bir çizgiyi bükerek sayfa dönüyormuş gibi bir görüntü elde ettik. Bu çalışmada da her karede sayfayı daha ileri taşıyacak ve uzunluğunu biraz değiştireceğiz. Bu esnada kitabın sırtı sabit kalacak. Sayfa çevirme animasyonu için her anahtar karede grafik biraz değişmelidir. 2. adımda oluşturduğunuz anahtar kareyi seçin ve Stage de çizgiyi seçimden çıkarın. Fareyi çizginin üst kısmına getirin ve imleç değiştiğinde çizginin ucunu kaydırarak çizginin bükülmesini sağlayın. Şimdi karemiz bir soldakinden farklı oldu. 4. Yeni anahtar kareler ekleyin ve sayfa kitabın kapağına ulaşana dek grafiği değiştirin. Kare 11 deki değişiklikleri tamamladığınızda kare 12 yi seçin ve F6 ile yeni bir anahtar kare ekleyin. 11. karenin içeriği 12 ye kopyalanacaktır. Kare 11 de yaptığınız gibi çizginin üst kısmını daha sağa götürün. Gerekirse sayfayı bükün, bunun için kıvrık çizgi imleci görünecek şekilde çizgiyi ortasından tutun ve sayfayı bükün. Fakat değişikliklerin çoğu çizginin (sayfanın) üst kısmını oynatarak yapılabilir. Sayfanın alt kısmının oynamadığından emin olun. Çizginin sadece üst ve orta kısımlarıyla oynayın. ANİMASYON HAZIRLAMA 147

167 Onion skin özelliği ile komşu kareleri görebildiğiniz için, düzenleme sırasında animasyonun nasıl gittiği konusunda iyi biri fikir sahibi olabilirsiniz. Oynatım kafasını Timeline da gezdirerek de animasyonunuzu kontrol edebilirsiniz. Çizginin alt ucuna dokunmayın. Bunu yaparsanız, sayfa kitabın içinde hareket ediyor gibi görünecek ve kitaptan bağımsız hale gelecektir! Animasyon tamamlanana dek gerektiği kadar anahtar kare ekleyin. Sona yaklaşırken sayfanın ucunu biraz dışarı kaydırarak uzun görünmesini sağlamanız gerekebilir. Sayfa kitabın ön kapağına vardığında animasyon bitmiştir. Bunun için 9-10 kare gerekebilir. Sayfaya fade out ekleyerek animasyonun daha güzel görünmesini sağlayabilirsiniz. Bunun için bu çalışmada oluşturduğunuz her anahtar karede çizginin şeffaflığını (alfa) değiştirmelisiniz. Color Mixer panelindeki Alpha çubuğunu kullanarak bunu yapabilirsiniz. İlk kareyi seçin ve Alpha çubuğunu %90 a getirin. Son sayfada %10 civarı olacak şekilde her kareyi ayarlayın. 148 DERS 5

168 5. Sayfa çevrimleri arasına duraklama eklemek için animasyonun sonuna birkaç kare ekleyin. Kare 85 i seçin ve F5 e basarak bir kare ekleyin, böylece animasyon duraklayacaktır. Unutmayın, bu bir klip olduğu için Stage de sürekli tekrar edecektir (ActionScript le aksi belirtilmezse). Yani sayfa sürekli çevrilecek ve arada kısa bir duraklama olacaktır. 6. File > Save As ile dosyanızı kaydedin. Düzenleme çubuğunda Scene 1 e tıklayarak ana Stage e dönün. Dosyanızı kaydedin ve kapatın. Bir sonraki derse kadar bu dosyayla işimiz kalmadı. Bir Yol Boyunca Animasyon Oluşturmak Daha önce bir motion tween uyguladığınızda sembolünüz bir noktadan diğerine düz bir çizgi üzerinde gidiyordu. Bu çoğu iş için yeterlidir fakat bazen de animasyonun dalgalı çizgi gibi daha karmaşık bir yol izlemesini isteyebilirsiniz (sarhoş bir arı animasyonu yaptığınızı düşünün). Bunu motion guide katmanında bir motion guide (hareket kılavuzu) kullanarak çok çabuk ve kolay bir şekilde halledebilirsiniz. Bu özel katmanda Pencil, Pen ya da Line araçlarıyla çizgiyi çizebilir ve motion guide altındaki katmandan bir sembolü bu çizginin iki ucundan birine iliştirebilirsiniz. Bu yolun motion guide katmanında olması gerekir, burada yaptığınız çizimler Flash dosyası tamamlandığında görünmeyecektir. Hareket kılavuzları ile nesneleri çember, kare, düz çizgi, eğri ve çizebildiğiniz her türlü yol üzerinde hareketlendirebilirsiniz (şekliniz bir kenar çizgisi yani ANİMASYON HAZIRLAMA 149

169 bir stroke olduğu sürece). Bu son uygulamamızda, 2. derste hazırladığınız map.fla dosyasında birtakım değişiklikler yapacağız. Hareket kılavuzu kullanarak küçük bir sembolü harita üzerinde gezdireceğiz. 1. CD-ROM da lesson05/start dizinindeki mapstarter.fla dosyasını açın ve onu sabit diskinizdeki TechBookstore klasörüne kaydedin. Bu dosyanın ikinci dersimizde çalıştığımız dosyaya benzediğini göreceksiniz. Tek fark bu yeni dosyanın kütüphanedeki iki grafiği kullanıyor olması. Tüm katmanlar ve konumlamalar aynı. Uygulamanın sonunda dosyayı map.fla adıyla kaydedeceğiz. Böyle bu dosya ikinci derste oluşturduğumuz dosyanın yerini alacak. 2. map katmanını seçin ve car adlı yeni bir katman ekleyin. Kütüphaneyi açın ve grafik klasöründe grcar ve grtree yi bulun. grcar ı car katmanına, grtree yi de map katmanına sürükleyin. Kütüphanedeki grcar sembolünü animasyonumuz için kullanacağız. grtree sembolü Stage de statik bir grafik olacak. İşe başlamadan önce map katmanının kilidini açın. grcar ı Stage in solundaki Brannan Street e yerleştirin. Ağacı haritanın sağındaki Macromedia Park ın sağ alt köşesine koyun. Aşağıdaki şekilden faydalanabilirsiniz. 150 DERS 5

170 3. Yeni bir motion guide katmanı oluşturun ve Stage de bir yol çizin. map katmanının kilitli olduğundan emin olun. car katmanını seçin ve Insert New Layer düğmesinin yanındaki Add Motion Guide düğmesine tıklayın. car katmanı otomatik olarak içeri alınır ve hareket kılavuzu uygulanır. Bu aynı 2. derste gördüğümüz maske katmanı gibidir. Yeni katmana otomatik olarak Guide: car adı verilir ve car katmanının üzerinde yer alır. Pencil aracını seçin ve Merge Drawing modelini kullandığınızdan emin olun. Hareket kılavuzu çizmek için Object Drawing modelini kullanamazsınız çünkü teknik olarak grafik gruplanmış olur ve çizdiğiniz yol sembolünüz tarafından kullanılamaz. Tools panelinin Options bölümünden Smooth seçeneğini de seçin. Smooth seçeneği ile fazla kırıklı olmayan çizgiler çizebilirsiniz ama isterseniz yolunuza birkaç tümsek eklemenize de izin verir. Artık arabamız cetvel gibi bir çizgide gitmek zorunda değil! Eğer yolunuzun çok akıcı olduğunu düşünüyorsanız, Smooth yerine Ink seçeneğini seçin ve yolu baştan çizin. Böylece bir ölçüye kadar yumuşatma olsa da kenar çizgileriniz hiç değiştirilmez. Çizimden önce diğer katmanları kilitleyerek kazara onlara çizim yapılmasını önleyin. Yeni Guide: car katmanı üzerine Pencil aracı ile bir yol çizin. Yol Stage in solundaki Brannan Street ten sağdaki ağacın yanına gidecek. Arabanın ağaca çarpmasını istediğimizden yolu ağacın gövdesinde bitirin. Yolunuz caddeyi takip etmeli ve We Are Here yıldızından dönerek yolun ANİMASYON HAZIRLAMA 151

171 sonundaki ağaca yönelmeli. Yola birkaç kıvrım ve tümsek ekleyin. Yol ağaca ulaştığında çizgiyi aşağıdaki şekildeki gibi yukarı bükün. Çizim bitince motion guide katmanını (Guide: car) kilitleyin. 4. car katmanında kare 70 e bir anahtar kare ekleyin. motion guide, map star ve map katmanlarında da kare 70 e kareler ekleyin. grcar ı yolun her iki ucuna kenetleyin. car katmanını seçin ve 70 teki boş kareyi seçip F6 tuşuna basarak yeni bir anahtar kare ekleyin. Sonra map katmanında 70. kareyi seçin ve F5 e basarak bir kare ekleyin. Aynı adımı motion guide ve map star katmanları için tekrarlayın. Tools panelinden Selection aracını seçin ve Snap to Objects in açık olduğundan emin olun. car katmanında 1. karede grcar ı tutarak Stage in soluna, yolun bitimine sürükleyin. Nesneyi merkezinden tutarak taşımanız daha kolay olabilir. 152 DERS 5

172 car katmanında kare 70 e tıklayın ve grcar ı ortasındaki kayıt noktasından tutarak yolun sonuna iliştirin. 5. car katmanında 1. kareyi seçin ve Properties denetçisinden bir motion tween ekleyin. car katmanında kare 1 i seçin ve Properties denetçisini açın. Properties denetçisindeki Tween listesinden Motion ı seçin. Katmandaki kareler seçildiğinde, Snap kutusu seçili ve Orient to path seçilmemiş olsun. car katmanı mor renk alacak ve motion tween i gösteren ok animasyon karelerini belirtecektir. Properties denetçisinde hareket kılavuzları ve tween leri ilgilendiren üç seçenek bulunmaktadır: Orient to path, Sync ve Snap. Orient to path ile nesnenin yolun istikametine göre yön değiştirmesi sağlanır. Nesne yoldaki kıvrıma göre döner. Sync ile kopyanın animasyonu ana Timeline a senkronize edilir. Snap ile de nesneyi kayıt noktasından tutup hareket kılavuzu yoluna ekleyebilirsiniz. Araba kılavuza doğru şekilde kenetlenmezse, başlangıç noktasından hareketlenip düz bir çizgi izleyerek bitiş noktasına gidecektir. Bu durumda arabanın kılavuza hem başlangıç hem de bitiş anahtar karelerinde doğru şekilde iliştirildiğinden emin olun. 6. Animasyonun sonuna Ease değeri ekleyerek arabanın tween sırasında hızlanmasını sağlayın. Animasyonun ilk karesini seçin ve Properties denetçisini açın. Ease kutusuna -100 değerini girin, böylece Flash Player da animasyon oynatılırken iki anahtar kare arasında arabanın hızlanmasını sağlarsınız. Control > Test Movie yi seçerek animasyonu izleyin. Animasyon bu aşamada sürekli tekrar edecektir. 7. Timeline üzerinde gezinerek animasyonu izleyin ve sonra motion tween üzerinde bir değişiklik yapın. Oynatım kafasını tıklayıp hareket ettirerek çizmiş olduğunuz yol boyunca motion tween i görebilirsiniz. Eğer araba yolu izlemiyorsa arabanın, motion guide katmanında oluşturduğunuz çizginin her iki ucuna da iliştirildiğinden emin olun. Hareket yolunun arabanın çarpacağı ağacın yanında istediğiniz gibi olmadığını ve arabanın ağaca çarpmadığını göreceksiniz. İstediğimiz sonucu almak için arabayı döndürmemiz gerekiyor. car katmanında iken, Timeline üzerinde 65 no lu kare civarında arabanın dönmeye başlayabileceği uygun bir nokta bulun ve F6 ile yeni bir anahtar kare ekleyin. burası animasyonun yeni bölümünün başlayacağı yer olacak. ANİMASYON HAZIRLAMA 153

173 Animasyonun sonunda 70 no lu kareyi seçin ve ardından Tools panelinden Free Transform aracını seçin. grcar etrafında tutacaklar belirir. Fareyi grcar ın sağ üst köşesine getirin ve döndürme imlecinin belirmesini sağlayın. Arabayı döndürmek için grcar ın köşesine tıklayın ve araba ağaca doğru yönelene dek sürükleyin. İşiniz bittiğinde Timeline üzerinde oynatım kafasını hareket ettirerek animasyonun son halini izleyin 154 DERS 5

174 8. actions adlı yeni bir katmanda en son kareye bir stop eylemi ekleyin. Animasyonu bir SWF dosyası olarak izlerseniz sürekli tekrar ettiğini göreceksiniz. Bunu engellemek ve animasyonu durdurmak için son kareye bir stop eylemi eklemeniz gerekir. map star katmanını seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana çift tıklayın ve actions adını verin. 70 no lu kareye (veya animasyonunuzdaki son kareye) tıklayın ve F6 ile yeni bir anahtar kare ekleyin. Yeni anahtar kareyi seçin ve Actions panelini açın. Script Assist hâlâ açıksa Script Assist düğmesine basarak onu kapatın. Script paneline aşağıdaki ActionScript kodunu yazın: stop(); İşiniz bittiğinde Ctrl+Enter (veya Mac lerde Command+Enter) ile animasyonunuzu test ortamında izleyin. 9. Dosyanızı map.fla olarak kaydedin. Dosyanızı map.fla adıyla kaydettiğinizde bu kayıt ikinci derste oluşturduğumuz dosyanın yerini alacaktır. Dosyanızı kaydedin ve kapatın. ANİMASYON HAZIRLAMA 155

175 Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Kare kare animasyonlar, motion tween ler ve shape tween ler arasındaki farkları öğrendik. (Sayfa 127). Bir klibe motion tween ekledik. (Sayfa ). Alfa değerini zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween uyguladık. (Sayfa ). Parlaklığı zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween uyguladık. (Sayfa ). Sayfa çevirme animasyonu için bir shape tween uyguladık. (Sayfa ). Bir kare kare animasyon oluşturma çalışması yaptık. (Sayfa ). Merge Drawing Model ile çizilmiş vektörel bir yol boyunca bir sembolü hareket ettirdik. (Sayfa ). Bir animasyonun sürekli tekrarlanmasını önlemek için bir stop() eylemi kullandık (Sayfa 155). 156 DERS 5

176 6 Temel Etkileşim Eklemek Şu ana kadar Tech Bookstore projesi için metinler eklediniz, semboller kullandınız, animasyonlar hazırladınız ve kendi grafiklerinizi oluşturdunuz. Bütün bunları Timeline larda görüntülediniz. Günümüzde bu öğeler milyonlarca Web kullanıcısı tarafından çok fazla takdir görmeyebilir. Peki neden? Çünkü insanlar Web uygulamanızın bir şeyler yapmasını ister. Çeşitli grafikler, animasyonlar ve metinler görüntülemek gerçekten çok güzel; ama son kullanıcı bunlarla bir şekilde etkileşime giremiyorsa, bu öğeler insanların site içinde gezmesi hatta tekrar geri gelmesi için gerçekten yeterli olmayacaktır. Artık sadece can sıkıcı bilgi görüntüleme görevini posterlere ve müze küratörlerine bırakalım ve çalışmamıza biraz etkileşim özellikleri ekleyelim. Tech Bookstore Web sitesine etkileşim özellikleri eklendi.

177 Bu derste ciddi bir sıçrama yapacak ve bazı öğelerin kullanıcılarınızla etkileşime girmesini sağlayacaksınız. Kendi ActionScript kodlarınızı yazacağınızı düşünerek paniğe kapılmadan önce derin bir nefes alın, sevdiğiniz mekânlardan birine gidin ve beyninizin sol tarafına çok fazla yüklenmeyeceğinizi düşünerek biraz sakinleşin. Bu bölümde ActionScript kodları eklemek için Flash la birlikte gelen davranışları (behaviors) kullanacak, davranışların gücünün yetmediği yerlerde de Script Assist i kullanacaksınız. Script Assist, ekleyeceğiniz ActionScript kodlarının, bu çok güçlü ve aslında hiç de korkunç olmayan script diliyle ilgili her şeyi öğrenmenize gerek kalmadan düzgün bir yapıda olmasını sağlayacaktır. Şimdi kendinizi daha iyi hissediyor musunuz? Güzel, o zaman başlayalım. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Behaviors panelini kullanarak çeşitli davranışlar ekleyeceğiz. Belgenize ekledikten sonra davranışlar üzerinde değişiklikler yapacağız. Sunucudan bir JPEG resmi yükleyeceğiz. Actions paneli hakkında bilgi edineceğiz. Bir nesneye ActionScript kodu eklemek için Script Assist i kullanacağız. Script Assist i kullanarak Timeline a bir eylem (action) ekleyeceğiz. ActionScript kullanarak bir movie clip Timeline ını kontrol edeceğiz. Script gezginini kullanacağız. Yaklaşık Süre Bu dersi yaklaşık 1,5 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: lesson06/assets/mmpresslogo.jpg Başlangıç Dosyaları: lesson06/start/bookstore9.fla Tamamlanmış Dosyalar: lesson06/complete/bookstore10.fla 158 DERS 6

178 Flash Belgelerini Etkileşimli Hale Getirmek Etkileşim çok geniş kapsamlı bir kavramdır. En temel seviyede düşündüğümüzde bir şeyleri etkileşimli hale getirmek, insanların sizin oluşturduğunuz uygulamada gerçekleşen olaylara, bir düğmeye tıklayarak, bir şeyler yazarak ya da herhangi bir şekilde cevap verebilmesini sağlamaktır. Kullanıcılar uygulamanızda birtakım işlem yapar (bir öğeyi başka bir öğenin üzerine sürüklemek ya da klavyedeki bir tuşa basmak gibi) ve uygulamanız onların bu yaptığına cevap verir. Tabii ki etkileşimle ilgili çok daha karmaşık kavramlar da mevcuttur, ama çoğu durumda uygulamanıza kullanıcıların uygulama içinde yaptıkları işlemlere cevap verme yönünde talimat vermeniz fazlasıyla yeterlidir. Macromedia Flash ta etkileşim özellikleri oluşturmak için en çok kullanılan öğeler düğmeler, movie clip ler ve metin alanlarıdır. Flash taki düğmeler, kullanıcı tarafından tetiklenen fare ve klavye olaylarına cevap verirler. Movie clip ler, kullanıcı tarafından başlatılan etkileşim olaylarına ya da sunucu tipindeki etkileşim olaylarına (veri yükleme gibi) cevap verebilirler. Metin alanları kullanıcılardan bilgi almak, kullanıcılara belirli bilgileri göstermek veya bunların her ikisi için de kullanılabilir. Amaç ne olursa olsun, sizin oluşturacağınız hemen her Flash 8 uygulaması bu öğelerin üçünü de kullanacaktır. Etkileşim özellikleri eklemek için ActionScript kodu yazmanız gerekmez. İster inanın, ister inanmayın, ama gerçekten de müthiş bir programcı olmanız gerekmiyor. Bilginiz ne kadar fazlaysa, gelişmiş uygulamalar yaratmak için o kadar donanımlı olacağınız aşikâr; bununla birlikte Flash 8 in, etkileşim özellikleri eklerken işinizi çok kolaylaştıran (ama öncesinde ciddi bir planlama safhası gerekir) bazı yerleşik araçlara sahip olduğunu da aklınızdan çıkarmayın. Bu yerleşik özellikler, belirli öğelere hemen ekleyebileceğiniz hazır ActionScript kodları olan davranışlar ve Script Assist şeklinde karşınıza çıkmaktadır. Script Assist, ActionScript panelinde bulunan ve ActionScript konusunda her şeyi öğrenmeye gerek kalmadan daha karmaşık eylemler eklerken kullanılan bir özelliğidir. Davranışlar Davranışlar (behaviors), bir panelin içinde organize edilen ve ActionScript in en çok kullanılan bazı uygulamalarından oluşan bir koleksiyondur. Panelin adı Behaviors panelidir. Garip, ama gerçek. Çok doğru bir şekilde adlandırılan bu panelde; Web sayfalarını açan, movie clip Timeline larını kontrol eden, JPEG resimlerini ya da SWF dosyalarını movie clip örneklerine yükleyen ve sesleri kontrol eden çeşitli davranışlar yer alır. Bu davranışlar doğrudan panel kullanılarak eklenir ve panel, davranışın tetiklenmesini sağlayan olayı değiştirmenize imkân sağlar. ActionScript konusunda uzmanlaştıktan sonra kendi davranışlarınızı oluşturabilir ve bu panele ekleyebilirsiniz. Ama bu aşamaya gelene kadar üçüncü parti şirketlerin ve Flash kullanıcılarının oluşturduğu davranışları indirip yükleyebilirsiniz. Bahsettiğimiz bu üçüncü parti davranışlarla ilgili en iyi kaynaklardan biri Adobe Macromedia Exchange dir ( TEMEL ETKİLEŞİM EKLEMEK 159

179 İki yere davranış ekleyebilirsiniz: bir Timeline daki anahtar karelere ya da doğrudan movie clip, düğme ya da bileşen örneklerine (bundan sonra hepsine müşterek olarak nesne diyeceğiz). Kendisine davranış eklemek üzere bir nesne (bir nesne ya da Timeline da bir anahtar kare) seçtiğinizde, Behaviors paneli, seçilen nesneyi gösterecektir. Böylece ilgili davranışı yanlışlıkla başka bir nesneye eklemeniz engellenmiş olur. Ekleyebileceğiniz davranışlar, seçilen öğeye bağlı olarak farklılık gösterir. Behaviors panelindeki davranışların birçoğu, geliş tirici ya da tasarımcının onları doğrudan nesne örneklerine ekleyeceği düşünülerek oluşturulmuştur. Başlangıç için bu yaklaşım doğru görünse de, bütün ActionScript kodlarını Timeline daki bir anahtar kareye eklemek genelde daha iyi bir yaklaşım olarak kabul edilir; çünkü bu yöntemde, hata yapmanız durumunda sorunlu öğeleri bulmak ve sorunu gidermek daha kolaydır. Bu yaklaşımla ilgili ayrıntılı bilgi için, 9. Ders e bakınız Şimdi göreceğimiz birkaç uygulamada uygulamanıza temel etkileşim özellikleri eklemek için davranışların nasıl kullanıldığı anlatılmaktadır. Önce, sabit diskinizden Flash uygulamanıza anında bir JPEG resmi yükleyen bir davranış, sonra da movie clip Timeline larını kontrol eden bazı davranışlar ekleyeceksiniz. Davranışları Kullanarak Bir JPEG Resmi Yüklemek Bir resmin dinamik olarak yüklenmesi, Flash ta anlamanız gereken en önemli özelliklerden biridir; çünkü ürün kataloglarını, fotoğraf galerilerini, vb. öğeleri görüntülemek için resimlerden sıkça faydalanılır. Resim boyutları genelde büyük olduğundan, fotoğraf galerilerinizi ya da ürün kataloglarınızı görüntülemek için ihtiyaç duyduğunuz resimler Flash uygulamanızın büyümesine sebep olacaktır. Buna bir de resimlerin sıralanmasında çoğunlukla kullanıcıyla girilen birtakım etkileşimlerden faydalanıldığını düşünecek olursak (bazı resimler görüntülenirken diğerlerinin görüntülenmemesi gibi), sonuçta uygulamanızın boyutu ciddi şekilde büyüyebilir. Resimleri harici olarak saklamak ve sadece gerektiğinde yüklemek bu sorunu çözecektir. Ayrıca bu yaklaşım, Flash dosyanızın, kolayca güncellenebilen ve değişen ihtiyaçlara göre yeniden şekillendirilebilen bir yapıda olmasını sağlar, çünkü görsel içeriğinizin büyük bir kısmı harici olarak depolanmaktadır. Flash 8 in hem Basic, hem de Professional sürümü JPEG, PNG ve GIF formatındaki resimleri çalışma zamanında (yani SWF tarayıcıya yüklendiğinde ve çalıştığında) dinamik olarak yükleyebilir. Flash 8 Basic, standart JPEG lerin dışında, ilerlemeli (progressive) JPEG leri de yükleme becerisine sahiptir. İlerlemeli JPEG ler, yüklenirken görüntülenmeye başlar. Bu, son kullanıcıya uygulamada neyle karşı laşacağı konusunda ipucu verir. 160 DERS 6

180 ActionScript kullanarak bir JPEG, GIF ya da PNG resmi yüklerken, görüntülenmesi için resmi bir şeyin içine yerleştirmeniz gerekir. Resmi ana belgenin Timeline ına yükleyemezsiniz, çünkü Timeline yeni yüklenen resim yüzünden diğer tüm içeriği atmaya çalışır. Bu işlemi yapsanız bile resim Flash belgesinin sol üst köşesinde görüntülenir, ancak konumu değiştirilemez; çünkü resimler ActionScript nesneleri değildir ve bu yüzden kontrol edilemez. Bu kural dinlemeyen resimleri kontrol edebilmeniz için onları ayrı ayrı movie clip örneklerine yüklemeniz gerekir. Bu arada, bahsettiğimiz bu örnekleri adlandırmanız gerektiğini de unutmayın. Movie clip ler, düğmeler, bileşenler ve görünmeyen ActionScript nesneleri (bu nesneleri Ders 9 da kullanacaksınız) örnek isimleri alabilirler. Bu isimler, yukarıda bahsettiğimiz nesnelerin kontrol edilmesinde büyük önem taşırlar. JPEG, GIF ya da PNG resimlerini Loader bileşenlerine de yükleyebilirsiniz. Ders 9 da bazı PNG resimlerini Loader bileşen örneklerine yükleyeceksiniz. Bu uygulamada göreceğiniz gibi, Flash belgenize yerleştirdiğiniz movie clip ve düğme sembollerinin hedef olarak kullanılması için örnek isimlerine ihtiyaç vardır. Herhangi bir amaçla bir ActionScript kodu eklediğinizde Flash ın hangi nesneyi yöneteceğini anlaması için, movie clip örneklerine isim vermeniz gerekir. Örneklere isim vermek için Properties denetçisindeki <Instance Name> alanını kullanabilir ya da davranışları eklerken bir örnek ismi verebilirsiniz. Bununla birlikte, örneklere Properties denetçisinde isim vermenin daha iyi bir yaklaşım olduğunu hatırlatalım. Çünkü davranış eklerken bir öğeye örnek ismi vermek, ancak başlangıçta adlandırmayı unutmanız durumunda kullanabileceğiniz bir yaklaşımdır. Aşağıdaki uygulamada, bir movie clip e bir resim dosyası yükleyebilmek için bu movie clip e bir örnek ismi vereceksiniz. 1. CD-ROM daki lesson06/start dizininde bulunan TechBookstore dizinindeki bookstore9.fla dosyasını açın ve bookstore10.fla adıyla dosyanın yeni bir sürümünü kaydedin. Dosyanın yeni sürümünü sabit diskinizdeki TechBookstore klasörüne kaydedin. 2. CD-ROM daki lesson06/assets dizininde bulunan Macromedia Press logosunu TechBookstore klasörünüze kopyalayın. CD-ROM unuzun lesson06/assets klasöründe mmpresslogo.jpg adında bir dosya göreceksiniz. Bu resmi, burada gereken bir davranışı yüklemek için kullanacaksınız. Resmi TechBookstore klasörünüzün kök dizinine yerleştirmeniz bu uygulamada işinizi kolaylaştıracaktır. Ama gerçek uygulamalarda, dizin yapınız geliştirme işlemlerini yaptığınız bilgisayardan Web sunucunuza doğru olacak şekilde yapılandırıldıysa bu dosyayı istediğiniz klasöre yerleştirebilirsiniz. 3. Pages katman klasöründeki home katmanını seçin ve Stage de yeni bir dikdörtgen oluşturun. Dikdörtgeni bir movie clip e dönüştürün ve ona bir örnek ismi verin. Timeline daki pages katman klasöründe yer alan home katmanını seçin. Oynatım kafasının 1 numaralı karede olduğundan emin olun. Tools panelinden Rectangle aracını seçin ve dış hat rengini No Color ve dolgu rengini de siyah (#000000) olarak ayarlayın. Stage de bir dikdörtgen çizin TEMEL ETKİLEŞİM EKLEMEK 161

181 ve Properties denetçisini kullanarak bunun boyutlarını, genişliği 128 piksel, yüksekliği de 96 piksel olacak şekilde ayarlayın. Oluşturduğunuz dikdörtgene çift tıklayın ve F8 tuşuna basarak bunu bir sembole dönüştürün. Sembolü mcmmpresslogo olarak adlandırın ve ardından Movie clip radyo düğmesine tıklayın. Sembolün kayıt noktasını (registration point) sol üst köşe olarak ayarlayın (ızgarada sol üst siyah kareye tıklayın) ve OK düğmesine tıklayın. Properties denetçisini kullanarak yeni movie clip e mmpresslogo örnek ismini verin. Movie clip i aşağıdaki resimde gösterildiği şekilde Stage in sağ alt köşesine yakın bir konuma taşıyın. Movie clip in örnek ismi ile kütüphane ismi aynı şey değildir. Örnek ismi, ActionScript in Stage deki bir nesneye göndermede bulunabilmek için ihtiyaç duyduğu bir öğedir. Kütüphane ismini ise, belgenizin bileşenlerini organize etmek için kullanırsınız. Bu movie clip i, SWF dosyası çalışırken dinamik olarak yükleyeceğiniz resim için bir içerik nesnesi (container) olarak kullanacaksınız. Siyah resim, mmpresslogo.jpg resmi ile değiştirilecektir, dolayısıyla burada asıl içerik için bir yer tutucu görevi üstlenecektir. Böylece onun nereye yerleştirileceğini bilirsiniz. 4. Timeline a actions isminde yeni bir katman ekleyin ve her sayfa için anahtar kareler ekleyin. labels katmanını seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana actions ismini verin. Bu katman, Timeline daki katman yığınında en üst sırada yer alacaktır. Katmanı oluşturduktan ve buna bir isim verdikten sonra, her bir etiketin üzerindeki kareyi seçin ve sonra da aşağıdaki resimde de gördüğünüz gibi F6 tuşuna basarak yeni bir anahtar kare ekleyin. 162 DERS 6

182 Sayfaların her birine ait eylemler buraya yerleştirilecektir. Şu an için sadece home sayfasındaki eylemlerle ilgileniyoruz. 5. mmpresslogo.jpg resmini SWF dosyasına yüklemek için, Add (+) menüsünü kullanarak bir davranış ekleyin. Davranışları iki yere ekleyebilirsiniz: Bir anahtar kareye ya da örneğin kendisine. Ekleyebileceğiniz davranışlar seçtiğiniz öğeye bağlıdır. Örneğin bazı davranışlar karelere eklenemez, dolayısıyla bunları kullanamazsınız. Diğer davranışlar sadece düğmelerle ilişkilendirilebilir. Add Behavior (+) menüsü düğmesine basıp açılır menüleri ve kayar menüleri kullanarak neleri ekleyebileceğinizi görebilirsiniz. Add Behavior (Davranış Ekle) Remove Behavior (Davranışı Kaldır) Geçerli Seçim Davranışlar kategorilere göre düzenlenmiştir. Add Behavior düğmesine bastığınızda bu kategorilerin görüntülendiği seçeneklerden oluşan bir menüyle karşılaşırsınız. Harici bir resim yüklemek, movie clip lerin farklı bir özelliğidir; dolayısıyla, kullanmak istediğiniz davranış Movieclip kategorisinde yer alır. actions katmanındaki 1 numaralı kareyi seçin ve Behaviors panelini açın. Bu panel açık değilse, Window (Pencere) > Behaviors (Davranışlar) komutunu seçin. Kare 1 seçili durumdayken, Behaviors panelindeki Add Behavior düğmesine tıklayın ve Add Behavior menüsünden Movieclip > Load Graphic i seçin. Load Graphic iletişim kutusunda, üstteki metin alanına assets/mmpresslogo.jpg yazın ve kullanılabilir durumdaki örnekleri listeleyen iki metin alanının altında bulunan ağaç yapısından mcmmpresslogo movie clip ini seçin. Relative radyo düğmesine tıklayın. Bu düğme, SWF dosyasının dışındaki resmin hedeflenmesi için kullanılan adres türünü belirtir. Sonuçta hangi resmin yükleneceğini ve yüklediğinizde bu resmin nereye gideceğini belirtiyorsunuz. Bunun dışında TEMEL ETKILEŞIM EKLEMEK 163

183 şu anda ince ayrıntılar konusunda endişelenmenize gerek yok. Örneklerin mutlak (absolute) ve göreceli (relative) olarak adreslenmesi konusunu Ders 9 da göreceğiz. OK düğmesine tekrar tıklayarak ana Stage e geri dönün. 6. Belgede yaptığınız değişiklikleri kaydedin. Bu aşamada bu işlevselliği etkin bir biçimde test edemezsiniz, çünkü Timeline ın ilk karenin ötesine gitmesini engelleyen ActionScript kodunu eklemediniz. FLA dosyasını bu dersin ilerleyen bölümlerinde test edecek ve Behaviors panelinin sizin yerinize eklediği ActionScript kodunu inceleme fırsatını bulacaksınız. Devam etmeden önce File > Save komutunu seçerek değişiklikleri kaydedin. Bir Web Sayfasını Açmak için Davranışları Kullanmak Önceki uygulamada bir davranış kullanarak harici bir JPEG resmini yüklemeyi öğrendiniz, ancak bu işlemin başarıyla sonuçlanıp sonuçlanmadığını henüz kontrol etmediniz. Bu uygulamada, bir Web sayfasını yeni bir tarayıcı penceresinde açmak için Flash taki davranışlardan birini nasıl kullanacağınızı göreceksiniz. Burada davranışı Timeline daki bir kare yerine doğrudan bir movie clip örneğine ekleyeceksiniz. Buna bazen nesne eylemi de denir. Bu uygulamada da bookstore10.fla dosyasını kullanacaksınız. 1. Ana Stage de olduğunuzdan emin olun, sonra da home katmanındaki 1 numaralı kareyi seçin Selection aracını kullanarak, bir önceki uygulamada oluşturduğunuz mcmmpresslogo örneğine tıklayın. actions katmanındaki 1 numaralı karede, bu örneğe göndermede bulunan bir eylem yer alır. Fakat siz bir movie clip in kendisine bir eylem yerleştireceksiniz ve kullanıcı buna tıkladığında bir Web sayfasının çalıştırılmasını sağlayacaksınız. 2. Behaviors panelini kullanarak, doğrudan mcmmpresslogo movie clip ine bir davranış ekleyin. mcmmpresslogo seçili durumdayken, Behaviors panelindeki Add Behavior düğmesine tıklayın ve menüden Web > Go to Web Page (Web Sayfasına Git) komutunu seçin. Go to URL (URL Le Git) iletişim kutusu açılacak ve burada hedef seçenekleri görüntülenecektir: _self, _parent, 164 DERS 6

184 _blank ya da _top. Bu seçeneklerin her biri HTML Ldeki d karşılığının aynısıdır. Buradaki değeri _blank olarak değiştirin. 3. Go to URL iletişim kutusunda davranış için hedef URL i ayarlayın Hedef URL Li yeniden yönlendirilecek şekilde ayarlamak için, URL metin alanındaki varsayılan değerin yerine istediğiniz hedefi yazmanız yeterlidir. Bu uygulama için hedef URL Li olarak ayarlayın. URL Li yazdıktan sonra OK düğmesine tıklayarak Stage e geri dönün. Başka bir alan adında yer alan bir Web sayfasına gitmeye çalışıyorsanız, Go to URL iletişi im kutusunda URL in başına / eklemeyi unutmayın. Yeni tarayıcılar hepimizi tembelleştirdi, çünkü artık bir Web sayfasına gitmek için adres penceresine yazmamız gerekmiyor. Eğer başka bir sayfaya giden bir bağlantı tanımlayacaksanız, kullanılacak protokolü kesinlikle belirtmeniz gerekir. Burada Hypertext Transfer protokolünü kullanacaksınız. 4. Behaviors panelini kullanarak davranışın tetikleyici olayını değiştirin. Stage deki mcmmpresslogo örneğine tıklayın. Behaviors panelini açıp bazı ayarları değiştirerek davranışın ne zaman çalışacağını belirleyebilirsiniz. Behaviors panelini açın ve Add Behavior ile Delete Behavior düğmelerinin altındaki Event ve Action listelerine bakın. Go to Web Page eyleminin solundaki alanda On Release yazısına tıklarsanız, açılır listede bu davranışı tetikleyen olayların listesini görebilirsiniz. Varsayılan olarak burada On Release olayı (kullanıcının imleç mcmmpresslogo movie clip inin üzerindeyken farenin tuşuna basıp TEMEL ETKILEŞIM EKLEMEK 165

185 bırakacağı anlamına gelir) seçili durumdadır. Açılır listeden yeni bir değer seçebilir ve kullanıcı imleci örneğin üzerine getirdiğinde ya da imleç örnekten tamamen uzaklaştırıldığında bunun tetiklenmesini sağlayabilirsiniz. Olayın belirli bir tuşa basıldığında tetiklenmesini sağlamanız da mümkündür. Olayı bir Key Press olayıyla değiştirin. Flash, Peachpit Web sitesini açmak için, bir fare tıklamasının yerine kullanılmak üzere sizden klavyedeki bir tuşa basmanızı isteyecektir. Olayı tekrar On Release olarak değiştirin, çünkü bu, çoğu kişinin alışık olduğu etkileşim türüdür. 5. Behaviors panelini kullanarak davranışın özelliklerini değiştirin. Sonra da OK düğmesine tıklayarak bu değişiklikleri uygulayın. Davranışı bir kareye ya da nesneye uyguladığınızda kimi zaman davranışın bazı özelliklerini değiştirmeniz ya da elle girdiğiniz parametrelerdeki yazım hatalarını düzeltmeniz gerekebilir. Neyse ki düzeltmek ya da değişiklik yapmak üzere Behaviors panelini kullanarak istediğiniz zaman davranışa geri dönebilirsiniz. Davranışta değişiklik yapmak ve kullanıcıyı farklı bir URL Le yönlendirmek istiyorsanız Behaviors panelindeki Actions sütununda ilgili davranışa çift tıklayarak üzerinde değişiklik yapabilirsiniz. Siz bu işlemi yaptığınızda URL Li ayarlamak için kullandığınız iletişim kutusu açılacaktır. İstediğiniz değişiklikleri yapın ve OK düğmesine tıklayın. Davranışın eklediği ActionScript kodunu doğrudan Actions panelinde de düzenleyebilirsiniz. Şu ana kadar Actions panelini fazla kullanmadınız, ama henüz temel ActionScript konularını öğrenmediğiniz için bunu yapmanızı pek tavsiye etmem. Ancak konuyla ilgili biraz daha bilgi sahibi olduktan sonra bir davranışın çalışma şeklini değiş tirmek için bunun bazı durumlarda kullanılabilecek en akıllıca alternatif olduğunu belirtmeliyim. Bileşen Kullanarak Harici Bir SWF Dosyası Yüklemek Önceki uygulamada Flash 8 Basic in çalışma zamanında SWF dosyalarına JPEG (ya da tercihe göre GIF veya PNG) dosyalarını anında (ya da dinamik olarak) yükleme özelliğine sahip olduğunu gördünüz. Flash, JPEG resimleri yüklemeye ek olarak movie clip lere başka SWF dosyalarını da anında yükleyebilir. Normal kullanım şeklinde bir Flash uygulaması, kullanıcı talep ettiğinde yüklenen birçok SWF dosyasına bölünür ve her SWF dosyası özel bir içerik kategorisine sahiptir. Resimlerin hariç olarak tutulması gibi, Flash uygulamasını gerektiğinde yüklenen küçük modüllere bölmek, uygulama dosyanızın boyutunu kontrol edebilmenizi sağlar ve içeriğin güncelleştirilmesini kolaylaştırır. Daha küçük içerik modülleri kullandığınızda, bütün uygulama yerine sadece değişen SWF dosyasını güncellersiniz. JPEG resimleri gibi, içerik amaçlı kullanılan bu daha küçük SWF dosyaları movie clip lere yüklenebilir. Bununla birlikte, Flash 8 de bu süreci kolaylaştıran (çünkü bileşeni belgenize, gidip harici SWF dosyasını ya da JPEG resmini almasını söyleyen bir davranış ya 166 DERS 6

186 da ActionScript kodu eklemeksizin dâhil edebilirsiniz) özel bir yerleşik bileşen bulunur. Bu bileşen Loader bileşeni olarak bilinir. Loader bileşeni, SWF dosyalarını ya da JPEG, PNG veya GIF resimlerini bir SWF dosyasına herhangi bir ActionScript kodu yazmanıza ya da herhangi bir davranış eklemenize gerek kalmadan kolayca gömmenizi sağlar. Yapmanız gereken tek şey, Loader bileşeninin bir örneğini Stage in üzerine sürüklemek ve bileşen Stage in üzerine geldikten sonra Properties denetçisindeki contentpath isimli özel bir parametrede değişiklik yapmaktır. Bu parametre, bileşene, yüklenecek harici verinin nereden alınacağını söyler. Bileşen SWF dosyasında tümüyle oluşturulduktan sonra kendisine bir şey söylenmeden gidip harici içeriği alacak ve sonra da onu görüntüleyecektir. Tabii ki bu sürecin gerçekleştiği zamanla ilgili olarak ince ayar yapmanız gereken durumlarda harici içeriği alma işlemini ActionScript kullanarak kontrol edebilirsiniz. Loader bileşeni, harici SWF dosyalarını ya da JPEG resimlerini yükleme iş lemini kolaylaştırır. Bununla birlikte bir dezavantajı vardır: Dosya boyutunu 25 KB kadar büyütür. Bu bileşeni, uygulamanızın boyutunu daha fazla büyütmeden tekrar tekrar istediğiniz kadar kullanabilirsiniz. Bu uygulamada, Ders 2 de oluşturduğunuz SWF dosyasını Loader bileşenine nasıl yükleyeceğinizi öğreneceksiniz. Yani Ders 2 de oluşturduğunuz map.swf dosyasını SWF dosyasına yüklemek için Loader bileşenini kullanacaksınız. 1. map katmanının 60 numaralı karesini seçin ve Stage e bir Loader bileşeni ekleyin. Ana Timeline da map katmanının (map etiketine sahip katman) 60 numaralı karesini seçin. Bu kare bir anahtar karedir ve daha önceki uygulamalarda oluşturduğunuz ve Stage e yerleştirilmiş bulunan iki metin alanı (adres ve harita başlığı için) içermektedir. Components panelini açın, User Interface kategorisini genişletin ve Loader bileşenini bulun. Bileşenin bir örneğini Stage in üzerine sürükleyin. 2. Loader bileşenini seçin, sonra da Properties denetçisinde bulunan bileşen parametrelerine bakın. Stage de Loader bileşeninin örneğini seçin ve Properties denetçisini açın. Properties denetçisinde Parameters (Parametreler) sekmesine geçin. Tün bileşenler, değiştirilebilir parametrelere sahiptir (bu konunun jargonuna alışık olmayanlar için bunları, üzerinde değişiklik yapılabilen öğeler olarak tanımlayabiliriz). Loader bileşeninin böyle üç parametresi vardır: autoload: Bu parametre, içeriğin otomatik olarak mı yükleneceğini, yoksa yüklenmesi için içeriğin ActionScript koduyla açık olarak tetiklenmesinin mi gerektiğini belirler. true değeri içeriğin otomatik olarak yükleneceğini; false değeri de yüklenebilmesi için onu tetiklemeniz gerektiğini belirtir. TEMEL ETKİLEŞİM EKLEMEK 167

187 contentpath: Bu metin alanına girilen metin, bileşene yüklemek istediğiniz SWF dosyasının ya da JPEG, GIF veya PNG resminin yolunu ayarlar. scalecontent: Bu parametre, içeriğin bileşenin büyüklüğüne uyacak şekilde ölçekleneceğini (true) ya da bileşenin içeriğin büyüklüğüne göre ölçekleneceğini (false) belirtir. Bileşenleri kontrol etmek ve bunlarda değiş iklik yapmak için Component Inspector (Bileşen Denetçisi) panelini de kullanabilirsiniz. Window > Development Panels > Component Inspector panel komutunu seçerek Component Inspector panelini açın. Değiş tirebileceğiniz şeyler, kullandığınız bileşene bağlıdır; bununla birlikte, değiş tirilebilir tüm seçenekler Parameters sekmesinde listelenmişi tir. Bindings ve Schema sekmeleri bu kitapta ele alınmamıştır. 3. Properties denetçisinde, Loader bileşeninin örneğiyle ilgili parametreleri ayarlayın. Bu bileşene map.swf dosyasını hemen yükleyeceğiniz için, autoload parametresini true olarak ayarlayın ve sonra da contentpath metin alanına map.swf yazın. map.swf dosyasını bookstore10.fla dosyasının bulunduğu klasöre değil de başka bir klasöre kaydettiyseniz, dosya yolunu değiş tirmeniz, göreceli bir URL (lesson05/map.swf gibi) kullanmanız gerekir. Yani dosyaları daha düzenli tutmak amacıyla belirli dosyaları başka dosyaların içinde saklayabilirsiniz. Stage de bileşenin büyüklüğünün harici SWF dosyasının büyüklüğüne uyacak şekilde değiştirilmesini sağlamak için, scalecontent parametresini false olarak ayarlayın. 4. Bileşeni map.fla dosyasıyla (lesson05/complete klasöründe bulabilirsiniz) aynı büyüklükte olacak şekilde ayarlayın, sonra da bunun Stage deki konumunu ayarlayın. Bileşen seçili durumdayken Properties denetçisini açın. W (genişlik) değerini 500, H (yükseklik) değerini de 355 olarak ayarlayın. 168 DERS 6

188 Aşağıdaki resimde de gördüğünüz gibi, haritanın How to find us metin alanının altına, kitap mağazasının sloganının ve sayfa başlığının da sağ kenarına gelecek şekilde hizalanması gerekir. Bileşeni Stage de hizalamanıza yardımcı olacak kılavuzlar muhtemelen hala görünür durumdadır. Açılır menülerin haritanın üzerine gelmemesi için bunların altında yeterince boşluk bırakmayı unutmayın. Haritanın, dikey cetvelin 140 koordinatında bulunan yatay kılavuza hizalı ya da (tercihen) bunun altında olduğundan emin olun. Kendi oluşturduğunuz yerleşim düzeninde How H to find us metin alanını başka bir konuma taşımanız gerekebilir. 5. Dosyada yaptığınız değişiklikleri kaydedin. Bir sonraki kısımda FLA dosyasına başka ActionScript kodları eklemeye başlayacaksınız. Ayrıca bundan sonraki derslerde Loader bileşenlerinin başka örneklerini de kullanacaksınız. Şu anda TechBookstore Web sitesinin harita kısmına yüklenen içeriği göremezsiniz. Fakat siz Ders 9 da dosyayı test ederken içerik görünecektir. Eğer görünmezse contentpath parametrenizi kontrol etmeniz ve doğru ayarlandığından emin olmanız gerekir. TEMEL ETKİLEŞİM EKLEMEK 169

189 Script Assist i Tanıyalım ActionScript in daha karmaşık özelliklerine geçmek üzere davranışların güvenli dünyasını terk etmek üzeresiniz. Ama paniğe kapılmayın, çünkü sizi doğrudan bu dilin derin sularına bırakmayacağız. Şimdiki birkaç uygulamada Script Assist le yine karşılaşacaksınız ve Script Assist ActionScript dünyasında sizin kılavuzunuz ve yol arkadaşınız olacak; en azından ActionScript e, onunla tek başınıza çalışacak kadar hâkim olana kadar. Script Assist i, ActionScript script dilini öğrenirken kullanılan yardımcı tekerlekler gibi düşünebilirsiniz. Ders 9 da ActionScript in genel yapısını ve kullanımını öğrenecek, ayrıca Script Assist i kullanmadan kendi script lerinizi yazacaksınız. Bu bölümde, ilerlemeden önce bu dille ilgili birkaç noktayı kavramanız gerekiyor. Böylece herhangi bir anda Actions paneline göz attığınızda neler olup bittiğini daha iyi anlayabileceksiniz. Bazı öğelerin neden bir örnek ismine sahip olmaları gerektiğini öğrenmiştiniz. Örnek isimleri (instence names), sembollere ya da ActionScript nesnelerine ne yapmaları gerektiğini söylerken kullandığınız birer yardımcı araçtır. Örnek isimleri, normal hayatta insan isimleriyle aynı amaca hizmet eder. Bununla birlikte, ActionScript uygulamalarında isimleri bizim seçmemiz gerekir, çünkü iki örnek aynı isme sahip olamaz. Bir oda dolusu çocukla birlikteyken çocuklardan birinden aspirin getirmesini istediğinizi düşünelim. Böyle bir durumda Çocuk, bana bir aspirin getir! demezsiniz, çünkü çocuklar içlerinden hangisini kast ettiğinizi bilemez. Onlara isimleriyle hitap etmeniz gerekir. Suat, bana bir aspirin kap gel!. Odada Suat adında başka bir çocuk olmadığı sürece Suat, (eğer keyfi yerindeyse) bir oda dolusu çocuğun arasında kafanız şişmiş durumdayken acilen içmeniz gereken aspirini kapıp getirecektir. Uzun lafın kısası, ne yapmaları gerektiğini söylemek için sembolleri ve ActionScript nesnelerini (Sound yani ses nesneleri gibi) adlandırırız. Adlandırılmış olsun ya da olmasın tüm semboller hayatlarını Timeline ın üzerinde bir yerde sürdürür. Onlara ne yapmaları gerektiğini söylemek için bir yol kullanmanız, yani ActionScript e ilgili öğenin nerede olduğunu söylemeniz gerekir. Yollarla çalışırken özel bir yazım şekli olan Noktalı Yazım ı kullanırsınız. Diğer bir deyişle, bir öğeyi hedeflerken / karakterlerinin yerine... karakterlerini kullanırsınız. Örneğin, diyelim ki oturma odasında oturuyorsunuz ve eşinizden (eşinizin o anda bulunduğu) üst kattaki yatak odasında yer alan masanın üstündeki gözlüğünüzü isteyeceksiniz. Gözlüğünüzü istemek için eşinize seslendiğinizde bu durum noktalı yazımla şu şekilde gösterilebilir: this.ustkat.yatakodasi.masa.es.gozlugual(); Burada this, başlangıç noktanızı yani oturma odasını gösterir, ustkat, yatakodasi ve masa da yerleri gösterir. es, belirli işlemleri gerçekleştirebilen bir nesnedir (eğer üşengeç biri değilse) ve gozlugual() ondan gerçekleştirmesini istediğiniz eylemdir. gozlugual() aynı zamanda metot olarak da adlandırılır. Metotlar, nesnelerin gerçekleştirdiği işlemlerdir. Bu konuyla ilgili ayrıntıları Ders 9 da göreceğiz. Eğer eşiniz yoksa gözlüğünüzü kendiniz almanız gerekecektir. Bu da noktalı yazımla şöyle gösterilebilir: this.gozlugual(ustkat.yatakodasi.masa.gozluk); 170 DERS 6

190 Bu ikinci örnekte ustkat.yatakodasi.masa.gozluk, gözlüğünüzün bulunduğu yeri gösterir. this anahtar sözcüğü ise burada sizi göstermektedir. Anahtar sözcükler (keywords), Flash tarafından ayrılmış ve ActionScript te özel bir anlama sahip özel sözcüklerdir. Actions panelinde, bir uygulamanın nasıl çalışacağını kontrol etmek için kendi ActionScript kodlarınızı eklerken belirli sözcüklerinin renk değiştirdiğini göreceksiniz. Sözcüklerin yeni rengi, anahtar sözcüğün ne için kullanıldığına bağlıdır. Bununla birlikte, herhangi bir anda herhangi bir şey renk değiştirdiğinde, bunun sebebi, Flash ı n bu öğeyi özel görevler için ayırmış olmasıdır. Bu yüzden sembollere ya da ActionScript nesnelerine Flash tarafından ayrılan isimleri (gettimer gibi) vermemeye dikkat etmeniz gerekir. Şimdilik endişelenmenize gerek yok. Bu derste ekleyeceğiniz ActionScript kodları Script Assist kullanılarak eklenecek ve düğmelerle movie clip Timeline larını kontrol etmek için kullanılacaktır. ActionScript, Ders 9 da göreceğimiz daha pek çok özelliğe sahiptir. Script Assist ile eklediğiniz ActionScript kodları önceki iki uygulamada eklediğiniz özellikleri test etmenizi sağlayacak ve ayrıca kitabın geri kalanında kullanılan etkileşim özellikleri için bir temel oluşturacaktır. Timeline ı Kontrol Etmek İçin Eylemleri Kullanmak ActionScript, Flash taki birçok özelliği kontrol etmek için kullanılabilir. ActionScript, ana Flash belgesinin Timeline ını ya da movie clip sembollerinin Timeline ının kontrol ederken sıkça kullanılır. Bu uygulamada ana belgenin Timeline ını kontrol etmek için Actions araç kutusuyla bir eylem ekleyeceksiniz. Bu uygulamada da bookstore10.fla dosyasıyla çalışacaksınız. 1. actions katmanını seçin, sonra da Actions panelini açın. Yerleşim düzeninde Actions paneli açık değilse, Window > Actions panel komutunu seçerek bu paneli açın. Actions panelini Windows ta F9, Mac OS X te Option+F9 klavye kısayollarını kullanarak da açabilirsiniz. Actions panelini genişletin. Bu dersteki ilk uygulamada, Tech Bookstore sitesindeki her bir sayfa için anahtar kareler oluşturmuştunuz. Bu uygulamada da her sayfaya bir stop(); eylemi ekleyeceksiniz. 2. Kare 1 den başlayarak actions katmanındaki anahtar karelerin her birini seçin ve Actions panelini kullanarak stop(); eylemini her bir anahtar kareye ekleyin. Eğer Actions panelinde Script Assist hala açık durumdaysa Script Assist düğmesine basarak kapatın. stop(); eyleminin çalışması için özel parametrelere ihtiyaç duyulmadığından, bu eylemi Actions araç kutusunu kullanarak ekleyeceksiniz. TEMEL ETKİLEŞİM EKLEMEK 171

191 Actions panelindeki bütün ActionScript kodlarının en üstünde boş bir satır oluşturun. İmlecinizi boş satıra yerleştirin ve Actions araç kutusunda Global Functions > Timeline Control kategorisini genişletin. Timeline ınıza stop(); eylemini eklemek için stop a çift tıklayın. actions katmanında bir sonraki anahtar kareyi seçin ve buna da aynı eylemi ekleyin. stop(); eylemi, bu anahtar karelerden her birine ulaştığında oynatım kafasının durmasına sebep olacaktır. Bu, Tech Bookstore projesinin gezinti özelliklerinden biridir ve bunu Ders 9 ve Ders 10 da d gerçekleştireceğiz. 3. FLA dosyasını test edin, sonra da dosyada yapmış olduğunuz değişiklikleri kaydedin. Ctrl+Enter (ya da Mac te Command+Enter) tuşlarına basarak belgeyi test ortamında test edin. Kitap mağazasını daha önce test etmiş olsaydınız, SWF dosyası bütün sayfaları oynatacaktı. Bunu şimdi test ettiğinizde, belgenin 1 numaralı karede (home sayfası) durduğunu göreceksiniz. Menü düğmelerini çalışır hale getirdiğiniz ve sitenin sayfalarında dolaşabildiğiniz zaman, gittiğiniz her yeni sayfa, oynatım kafası kareye ulaştığında duracaktır. Ayrıca test ortamındayken SWF dosyasına yüklenen JPEG resmine de dikkat edin. Artık JPEG resmi, daha önceki uygulamada oluşturduğunuz movie clip yer tutucusuna dinamik olarak yüklenecektir. Henüz sayfaların her birini dolaşamıyorsunuz. Ders 9 da düğmelerin ve menü sisteminin çalışmasını sağlayan ActionScript kodunu ekledikten sonra bunu yapabileceksiniz. FLA dosyasında yaptığınız değişiklikleri File > Save komutunu seçerek kaydedin. 172 DERS 6

192 Bir Giriş Sayfası Düğmesi Oluşturmak Bu uygulamada, SWF dosyasının Tech Bookstore un home karesine geri dönmesini sağlayacak olan bir düğme oluşturacaksınız. Ders 4 te oluşturduğunuz görünmez düğmeyi çoğaltacak ve büyük bir logonun üzerine yerleştirerek bir hot spot (aktif nokta) gibi çalışmasını sağlayacaksınız. Görünmez düğmeyi çoğaltmanız gerekiyor, çünkü düğmede, Merge Drawing modunda yamayacağınız büyük bir delik bulunuyor. Orijinal görünmez düğmeyi değiştirmek istemiyoruz, çünkü değiştirdiğimiz takdirde düzgün çalışmayacaktır. Dolayısıyla yapılacak işleri minimuma indirmek için sembolü çoğaltmanız ve yeni kopyayı düzenlemeniz gerekiyor. 1. buttons katmanının üzerine yeni bir katman ekleyin ve bu katmanı home button olarak adlandırın. buttons katmanını seçin ve bunun üzerine home button isimli yeni bir katman ekleyin. Bu yeni düğmeyi ayrı bir katmana yerleştireceksiniz, çünkü böylece buttons katmanındaki diğer düğmeleri gizlemenize gerek kalmadan bunu kilitleyebilecek ve gizleyebileceksiniz. Bu gerçekten de sadece organizasyon amacıyla yapılan bir işlem ve başka bir anlamı yok. 2. Kütüphanede btninvisible düğme sembolünü sağ tıklayın (ya da Ctrl tuşunu basılı tutarak tıklayın) ve bağlam menüsünden Duplicate (Çoğalt) komutunu seçin. Yeni düğmeyi btnhotspot olarak adlandırın. Bir sembolü çoğaltmanın geliştirme sürecini hızlandırmada harika bir yöntem olduğunu Ders 4 ten hatırlayacaksınız. Buradaki örnekte görünmez bir düğme için ihtiyaç duyduğunuz her şey mevcut. Tek yapmanız gereken, düğmedeki delikten kurtulmak. Sembolü çoğaltırken ve yeniden adlandırırken, sembol düzenleme moduna geçmek için sembole çift tıklayın. 3. Sembol düzenleme modunda, düğmedeki deliğin üzerinde bulunan mevcut dolguyla aynı renkte bir dikdörtgen çizin. Merge Drawing modunda olduğunuzdan emin olun. Sembol düzenleme modunda düğmenizin Hit karesini seçin. Rectangle aracını seçin ve dış hat rengini No Color olarak ayarlayın. Dolgu rengi (Fill Color) kontrolüne tıklayın ve damlalığı şu anda Hit karesinde bulunan dikdörtgenin üzerine getirin. Tı klayarak rengi ayarlayın. Merge Drawing modunda olduğunuzdan emin olun ve grafikteki deliği yamamaya yetecek büyüklükte küçü k bir dikdörtgen çizin. Dolgu renkleri birbiriyle eşleştiği için Merge Drawing modu grafiğin tamamını büyük bir dikdörtgene çevirecektir. Ana belgenin Timeline ına dönmek için Scene 1 e e tıklayın. 4. btnhotspot un bir örneğini home button katmanının üzerine sürükleyin ve bir örnek ismi atayın. Kü tüphaneden btnhotspot un bir örneğini sürükleyin ve mclogo nun üzerine bırakın. Free Transform aracını kullanarak düğmeyi, hem sol üst köşedeki logoya sığacak, hem de Tech Bookstore metnini içine alacak şekilde yeniden boyutlandırın. TEMEL ETKİLEŞİM EKLEMEK 173

193 Tools panelinde Selection aracı vurgulanmış durumdayken, yeni oluşturduğunuz görünmez düğmeye tıklayın ve Properties denetçisini, içinde <Instance Name> yazan metin alanına bir örnek ismi yazabilecek kadar genişletin. <Instance Name> metin alanının içine tıklayın ve btnhome yazın. Artık ActionScript i düğmenin Stage deki bu örneğine göndermede bulunmak için kullanabilir ve düğmeye tıklandığında (bu aynı zamanda olay olarak da adlandırılır) SWF dosyasını belirli bir şekilde yönetmek için kullanılan kodu çalıştırabilirsiniz. Burada, düğmeye tıklandığında kitap mağazasının giriş (home) sayfasına döneceksiniz. 5. Script Assist i kullanarak, oynatım kafasını home etiketli kareye döndürecek olan ActionScript kodunu ekleyin. Burada ActionScript kodunu Script Assist i kullanarak doğrudan düğmeye ekleyeceksiniz. btnhome u seçin ve F9 tuşunu ya da Option+F9 tuşlarını (Mac) kullanarak Actions panelini açın. Script Assist düğmesine basarak Script Assist moduna geçin. Actions araç kutusunda Global Functions > Timeline Control komutunu seçin ve goto yu çift tıklayın. Bu işlemi yaptığınızda varsayılan olarak düğmenize bir gotoandplay eylemi eklenecektir. Go To And Stop radyo düğmesini seçerek eylemi değiştirin. Type alanındaki seçeneği Frame Label olarak değiştirin ve Frame açılır listesinden home u seçin. Script Assist tüm kare etiketlerinizi otomatik olarak görür, bu da eylemi ayarlama işlemini kolaylaştırır. İşiniz bittikten sonra Actions panelinizin görüntüsü aşağıdaki şekildeki gibi olacaktır. 174 DERS 6

194 Mümkün olan yerlerde kare numaralarının yerine kare etiketlerini kullanmak isteyeceksiniz. FLA dosyalarınız büyüdüğünde ve karmaşık bir hale gelmeye başladığında hangi kare numarasında hangi içeriğin olduğunu hatırlamak daha da zorlaşacaktır. Ayrıca, içeriği taşımanız durumunda kare etiketini yeni konuma taşımak yerine ActionScript kodunuzu değiş tirmeniz gerekecektir. Kare etiketlerini kullanmak iş inizi kolaylaştırır ve karelere basit bir numara vermek yerine mantıklı isimler vermenizi sağlar. 6. home button katmanını kilitleyin ve gizleyin, sonra da kütüphaneyi temizleyin. Timeline da katman isminin yanında bulunan kilit simgesine ve göz simgesine tıklayarak katmanı kilitleyin ve gizleyin. Bu işlem aynı zamanda yanlışlıkla bu katmana başka örnekler eklemenizi ya da görünmez düğmeyi taşımanızı önleyecektir. Ayrıca, Tech Bookstore projesi üzerinde çalışırken görünmez düğmenin mavi rengini gizlemenizi de sağlayacaktır. Kü tüphaneyi mümkün olduğu kadar temiz tutmanız iyi olur. Kü tüphanedeki btnhotspot sembolünü buttons klasörüne sürükleyin, mcmmpresslogo sembolünü movie clips klasörüne taşıyın, Loader bileşenini de components klasörüne taşıyın. 7. FLA dosyasında yaptığınız değişiklikleri kaydedin. Her zaman olduğu gibi, bir sonraki uygulamaya geçmeden önce File > Save komutunu kullanarak yaptığınız değişiklikleri kaydedin. El Şeklindeki İmleci Yok Etmek Bir SWF dosyasında imleci bir düğmenin ya da hotspot un üzerine getirdiğinizde, el şeklinde bir imleç belirir. Genellikle bu imlecin görünmesini istersiniz, çünkü bu imleç SWF dosyasının hangi kısmının etkileşimli ve tıklanabilir durumda olduğunu gösterir. Bununla birlikte, bir açılır listenin görünüp görünmeyeceğini kontrol eden görünmez düğmeler kullandığınızda, bunların üzerinde el şeklinde bir imlecin görünmesini genellikle istemezsiniz, çünkü el şeklindeki imleç, kullanıcılara, tıkladıklarında bir şeyler olacağını belirten bir geri bildirim mekanizmasıdır. Böyle bir durumda kullanıcılar parmakları morarıncaya kadar tıklasalar bile hiçbir şey olmayacaktır. Bu yüzden şimdiki uygulamada, menülerin etrafındaki görünmez düğmede, el şeklindeki imleci yok edeceksiniz. Böylece kullanıcılar orada bir düğme olduğunu anlayamayacak. Bu uygulamada da yine bookstore10.fla dosyasını kullanacaksınız. 1. El şeklindeki imlecin nasıl çalıştığını görmek için FLA dosyasını test edin. Ctrl+Enter (ya da Mac te Command+Enter) tuşlarına basarak FLA dosyasını test edin. İmleci bu sitenin üst kısmındaki alanın üzerine getirdiğinizde el şeklinde bir imleç belirir. Bu imleç dikkati dağıtabilir ve düğmenin Web sitesinin ziyaretçileri için aslında görünmez olmadığı anlamına gelir. Ziyaretçilerin bu düğmeyi bilmemesi gerektiği için, düğmeyi ziyaretçiler fare imlecini bu alanın üzerine getirdiğinde el şeklindeki imleç görünmeyecek şekilde değiştirmeniz gerekir. TEMEL ETKİLEŞİM EKLEMEK 175

195 2. btninvisible sembol örneğini seçin. Görünmeyen düğmeye bir örnek ismi verin. Önce görünmez katman düğmesini seçin ve kilidini açın. Eğer gizlenmiş durumdaysa düğmeyi görünür hale getirin. home düğmesine ait katmanla düğme katmanlarınızın gizlenmiş durumda olduklarından emin olun. Selection aracını kullanarak Stage de d bulunan ve açılır gezinti menülerinin görüntülenmesini sağlayan görünmez düğme örneğini seçin. Düğmeye btnreturnmenus örnek ismini verin. 3. btnreturnmenus üzerine gelindiğinde fare imlecini gizleyecek ActionScript kodunu ekleyin actions katmanındaki 1 numaralı kareyi seçin. ActionScript kodunu bu kareye ekleyeceksiniz. Eğer açık değilse Actions panelini açın ve Script Assist i geçici olarak kapatın. Belirli bir kareye bir davranış ekledikten sonra Script Assist i kullanmak eğlenceli olabilir. Burada Script Assist i kapatıyorsunuz, çünkü böylece imleci Actions penceresinin üst kısmına yerleştirebilecek ve Script Assist hangi kodu eklerse eklesin, bunu daha önceden mevcut olan bir şeyin ortasına falan değil de doğru yere yerleştireceğinden emin olabileceksiniz. İmleci, Actions panelinin üst kısmındaki kendi satırında yanıp sönecek şekilde yerleştirin. Enter tuşuna basarak bir boşluk bırakmak ve imleci tekrar en üstteki konumuna yerleştirmek isteyebilirsiniz. Script Assist düğmesine basarak Script Assist i tekrar açın. Sağ tarafta bulunan Actions araç çubuğunda ActionScript 2.0 Classes > Movie > Button > Properties i seçin ve usehandcursor seçeneğini çift tıklayın. Script Assist expression alanındaki not_set_yet ifadesini btnreturnmenus ile değiştirin. El şeklindeki imleci gizlemek için usehandcursor metninin sonuna = false yazın. İşiniz bittikten sonra Actions pencerenizin görüntüsü aşağıdaki şekilde gösterildiği gibi olacaktır. 176 DERS 6

196 4. El şeklindeki imlecin menülerin etrafında görünmediğinden emin olmak için FLA dosyasını test edin. FLA dosyasını test etmek için Ctrl+Enter (ya da Mac te Command+Enter) tuşlarına basın. Bir önceki adımda eklediğiniz ActionScript kodu nedeniyle, imleci Stage de görünmez düğmenin bulunduğu konuma getirdiğinizde el şeklindeki imleç belirmeyecektir. 5. Yaptığınız değişiklikleri kaydedin. Dosyanızı kaydettikten sonra bir sonraki uygulamaya geçin. Movie Clip Düğmesinin Çalışmasını Sağlamak Daha önceki derslerde movie clip düğmesini oluşturmuş ve canlandırmıştınız. map.fla dosyasını hazırlarken, animasyonun sürekli olarak döngüyle oynatılmasını engellemek için stop eylemlerini bile kullanmıştınız. Bu uygulamada, düğmelerin kendilerine tıkladığınızda bunların uygun şekilde hareket etmesini sağlayacak olan bazı basit eylemler ekleyerek movie clip düğmelerini tamamlayacaksınız. Bu uygulamada da bookstore10.fla dosyasını kullanacaksınız. 1. Kütüphaneyi açın ve movie clip düğmelerini bulun. Movie clip i düzenleyebilmek için mcsamplechapter düğmesine çift tıklayın. Oluşturduğunuz düğmelerin önünde sample chapter (örnek bölüm) ve table of contents (içindekiler) yazıları görünmektedir. Bunları kütüphanede bulabilirsiniz. sample chapter düğmesine çift tıklayarak bunu sembol düzenleme modunda açın ve daha önce düğmeyi nasıl oluşturduğunuzu hatırlayın. 2. actions katmanındaki 1 numaralı kareyi seçin ve bir stop(); eylemi ekleyin. 14 ve 25 numaralı kareye de birer stop(); eylemi ekleyin. 1 numaralı kareyi seçin, sonra da Actions panelini maksimum boyutuna getirin ya da açın (F9). Script Assist düğmesine basarak Script Assist i açın ve Script bölmesine stop(); yazın. Timeline e eda d 14 numaralı kareyi seçin, F6 tuşuna basarak bir anahtar kare ekleyin, sonra da Script bölmesine stop(); yazın. TEMEL ETKİLEŞİM EKLEMEK 177

197 25 numaralı karenin üzerindeyken F6 tuşuna basarak actions katmanına yeni bir anahtar kare ekleyin, sonra da Script bölmesine stop(); yazın. 3. actions katmanındaki _over durumu için play( ); yazın. actions katmanına, _over ve _down durumlarının üzerine yeni anahtar kareler ekleyin. _over durumuna ait anahtar kareyi seçin ve Action panelindeki Script bölmesine play(); yazın. Bu eylem, oynatım kafasına devam etmesini ve bir sonraki kareyi/kareleri oynatmasını söyler. _over karesine play(); eylemini eklemenizin nedeni, Flash ı n, bir movie clip oluşturduğunuzda her bir kare etiketinde duracak şekilde programlanmış olmasıdır. Flash ı n durmasına izin verirseniz, parlaklık tween animasyonu oynatılmaz. Bu nedenle, Flash a animasyonu oynatmasını söylemeniz gerekir. Kareye play(); eylemini bu nedenle ekliyorsunuz. 4. Oynatım kafasını _down karesine getirin ve actions katmanına play() eylemini ekleyin. 178 DERS 6

198 Kullanıcı düğmeye tıkladığında bir parlaklık tween inin daha gerçekleşmesini istiyorsunuz. Bu nedenle, düğmenin bu kare etiketinde durmasını önlemek için bir play(); eylemine daha ihtiyacınız var. actions katmanındaki 15 numaralı kareyi seçip F6 tuşuna basarak buna boş bir anahtar kare ekleyin. Actions panelini açın ve Script bölmesine play(); yazın. 5. Düzenleme çubuğundaki Scene 1 e tıklayarak ana Stage e geri dönün. 1-4 arasındaki adımları mctoc düğmesi için de tekrarlayın. 1-4 arasındaki adımları diğer movie clip düğmesi için de tekrarlayın. Bu işlemleri tamamladıktan sonra, yine düzenleme çubuğunu kullanarak ana Stage e geri dönün. 6. FLA dosyasında yaptığınız değişiklikleri kaydedin. Ana Stage deyken, File > Save komutunu seçerek dosyanızda yapmış olduğunuz değişiklikleri kaydedin. Dosyayı TechBookstore klasörüne kaydettiğinizden emin olun. Ders 9 da, kullanıcı imleci düğmenin üzerine getirdiğinde ve düğmeden uzaklaştırdığında tetiklenen başka olayları da öğreneceksiniz. TEMEL ETKİLEŞİM EKLEMEK 179

199 Script Gezgini ni ve Raptiyeleri Kullanmak Artık FLA dosyanızın birkaç farklı yerine ActionScript kodları eklediğinize göre, belgeye eklediğiniz script leri bulmak için Script gezginini kullanmayı deneyebilirsiniz. Ne yazık ki, davranışları kullandığınız zaman ActionScript kodlarınızın hepsini aynı yerde tutamazsınız. Bu nedenle, FLA dosyasında ihtiyacınız olduğunda script lerin nerede olduğunu bulmanıza yardımcı olan bu araçları iyi tanımanız faydalı olur. Script gezgini, belgedeki script ler arasında dolaşmak için kullanılabilir. Burada FLA dosyanızdaki bütün farklı kod parçaları arasında gezinmenizi sağlayan bir ağaç yapısı bulunur. Kare ve nesne eylemlerinin hepsi, gezginin kodları organize etmek için kullandığı bu ağaç yapısının bir parçası olarak temsil edilir. Actions panelinde script leri iğnelemeniz de mümkündür. Script gezgininde bir kod parçasını seçerseniz, raptiye düğmesine tıklayarak ya da Script gezgininde koda çift tıklayarak script i iğneleyebilirsiniz. Bunu yaptığınızda, kod kendi sekmesi olan açık bir belgeye benzer şekilde, Actions panelinde açık kalır. Daha sonra yapmanız gereken tek şey, Actions panelinde düzenlemek amacıyla kod parçasına erişmek için sekmeye tıklamaktır. Script raptiyeleri, Script bölmesinin hemen altındaki farklı sekmelere tıklayarak kod parçalarına erişmenizi ve bunları düzenlemenizi kolaylaştırır. Aşağıdaki uygulamada, script iğneleme özelliğini nasıl kullanacağınızı öğreneceksiniz. 180 DERS 6

200 1. bookstore10.fla dosyasını kullanarak Actions panelini maksimum boya getirin ya da açın (F9 tuşuna basarak). Actions paneli açılacaktır. Bu panelin sol tarafında Actions araç çubuğu ve Script gezgini, sağ tarafında da Script bölmesi yer alır. Bu iki alanı bir çubuk ayırır ve bu çubuğu kullanarak gerektiğinde bu alanların büyüklüklerini ayarlayabilirsiniz. 2. Script bölmesini ve Script gezginini ayıran çubuğu sürükleyerek Actions panelindeki alanların büyüklüklerini değiştirin. Çubuğa tıklayıp bunu sürükleyerek Actions panelinin Script gezgini bölümünün büyüklüğünü ayarlayabilirsiniz. Kodları düzenlerken muhtemelen, çubuğun ortasındaki ok düğmesine tıklayıp kapatarak Script gezgini ve Actions araç çubuğu kısımlarını minimum boya getirmek isteyeceksinizdir. 3. Script gezgini maksimum boydayken, mcproductsmenu başlığının altındaki actions: Frame 11 alt başlığına tıklayın. Bu öğelerin her birine tıkladığınızda, bununla ilişkili kod Script bölmesinde belirir. Script gezginindeki bir öğeye tıkladığınızda, belgenin oynatım kafası seçili script in bulunduğu kareye gider. Script gezgini, FLA dosyasındaki kodların arasında fazla çaba harcamadan dolaşmanıza yardımcı olur. Düzenlemeniz gereken kodu bulduğunuzda, aşağıdaki adımda olduğu gibi bu script leri iğneleyebilirsiniz. TEMEL ETKİLEŞİM EKLEMEK 181

201 4. Script gezgininde mcproductsmenu başlığı altındaki actions: Frame 11 i seçin ve Script bölmesinin altındaki Pin active script düğmesine tıklayın. Sonra da belgedeki ikinci bir script i iğnelemeyi deneyin. Üzerinde raptiye simgesi bulunan Pin active script düğmesine tıkladığınızda, siz iğnelenmiş script i kapatıncaya kadar kod Actions panelinde kalır. Script gezgininde actions: Frame 11 e tıkladıktan sonra Pin active script düğmesine tıklayın. Stage de bir script içeren bir kareyi ya da örneği seçtikten sonra Actions panelindeki script sekmesine sağ tıkladığınızda (ya da Mac te Control tuşunu basılı tutup tıkladığınızda) açılan bağlam menüsünden Pin Script i seçmeniz de mümkündür. Bu yöntemde, script Actions panelinde iğnelenir ve bunun sonucunda Script bölmesinin altına yeni bir sekmenin eklendiğini görürsünüz. Script gezginindeki koda çift tıklayarak da script i Actions panelinde iğneleyebilirsiniz. İğnelenmiş bir script i kapatmak için, iğnelenmiş script lerden birini, sekmesini kullanarak ya da Script gezgininde seçin. İğnelenmiş script seçili durumdayken düğmedeki raptiyenin görünümü değişir. Bu düğmeye tıkladığınızda, script in raptiyesi çıkarılır. 5. İğnelediğiniz kod parçalarının script sekmelerine tıklayın. İğnelenmiş script ler arasında dolaşmak için Script bölmesinin altındaki script sekmelerini kullanın. Script ler arasında dolaşmanız FLA dosyasındaki oynatım kafasının hareket etmesine neden olmaz. İğnelenmiş script ler, Flash belgesinde aradığınız kodu yerleştirmiş olabileceğiniz her yere bakmak zorunda kalmadan, çok daha kolayca bulmanızı sağlar. Farklı örneklere kod yerleştirmek için davranışları kullanıyorsan ız, muhtemelen bu aracı çok faydalı bulacaksınız. Sekmeleri Actions paneline sığmayacak kadar çok iğnelenmişi script iniz varsa, panelin sağında iki uçlu bir ok belirir. Bu düğmeye tıklarsanız, iğnelenmişi ilave script leri gösteren bir menü açılır. Bu uygulamada yaptığınız değişiklikleri kaydetmeniz gerekmiyor. Bu nedenle, bu işlemleri tamamladıktan sonra değişiklikleri kaydetmeden belgeyi kapatın. Ders 9 da, d ActionScript dili ve çalışma şekli hakkında daha fazla bilgi edineceksiniz. ActionScript hakkında ne kadar fazla bilgi sahibi olursanız, Flash 8 uygulamalarınızın o kadar işlevsel olmasını sağlayabilirsiniz. 182 DERS 6

202 Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Bir FLA dosyasındaki Timeline a ve bir örneğe davranışlar ekledik (Sayfa ). Bir belgeye eklediğimiz davranışlarda değişiklik yapmayı öğrendik (Sayfa ). Bir JPEG resmini bir Loader bileşenine yükleyerek temel sunucu etkileşimi oluşturduk (Sayfa ). ActionScript dilinin temelleri hakkında bilgi edindik (Sayfa ). Bir SWF dosyasındaki oynatım kafasını kontrol etmek için stop(); eylemleri ekledik (Sayfa ). Tech Bookstore sitesine yeni bir giriş sayfası (home) düğmesi ekledik (Sayfa ). Bir düğmeden el şeklindeki imleci kaldırmak için Script Assist i kullandık (Sayfa ). Movie clip düğmesinin bir düğme olarak canlandırılması için gereken kodu ekledik (Sayfa ). Belgemizdeki script leri bulmak ve düzenlemek için Script gezginini ve iğnelenmiş script leri nasıl kullanacağımızı öğrendik (Sayfa ). TEMEL ETKİLEŞİM EKLEMEK 183

203

204 7 Ses ve Video Eklemek Bir zamanlar ses, CD-ROM ülkesinin tek vatandaşıydı. Ses bu ülkede yapayalnız yaşıyordu ve bir gün ülke dışına çıkmaya karar verdi. Çok geçmeden yolu World Wide Web e düştü. Fakat çok büyük olması ve indirme sürelerini çok uzatması yüzünden World Wide Web de işlerin aksamasına neden olduğunu fark etti. Herkesi mutlu edebilmek için karakterini değiştirerek MIDI ve MP3 formatlarına büründü. O artık sıkıcı bir arka plan müziği değildi, çünkü bu yeni haliyle kullanımı çok daha rahattı ve artık geri bildirim, öğrenme ve geliştirme amaçlarıyla kullanılıyordu. Ve daha da önemlisi Web artık gerçekten insanlara mutluluk veren bir yer haline gelmişti. Video ve ses Tech Bookstore Web sitesini çok daha çekici kı lacaktı r

205 Sonra sesin kendisinden çok daha büyük olan kuzeni ortaya çıktı. Onu hepiniz video adıyla tanıyorsunuz. Video gerçekten de büyüktü (burada popülariteden değil, bant genişliği nden bahsediyoruz). Ayrıca video müşkülpesent bir yapıya sahipti; çünkü videoların bazıları sadece QuickTime la, bazıları sadece Windows Media Player la, bazıları da sadece RealPlayer la çalışıyordu. Video, bir Web tasarımcısı için ÇİN (Çok İyi bir Neden) olmadıkça kullanımı pratik olmayan ÇZD (Çok Zekice bir Fikir) idi. Ancak bu düşünce uzun bir süredir geçerliğini yitirmiş durumda. Video ve sesin Web deki yerlerini sağlama almakla uğraştıkları süre zarfında Macromedia Flash Player adındaki bir araç sessiz sedasız ortaya çıkarak ortalama ev kullanıcılarıyla ahbaplık etmeye başladı. Başlangıçta Flash Player içinde ses ve videoyu uyumlu bir şekilde kullanamıyordu, ama bu durumu gören Macromedia nın sihirbazları sihirli geliştirme değneklerini sallayarak Flash Player ı yarattı. Şu anda dünya üzerindeki hemen her bilgisayarda bulunan Flash Player sadece sese hayat vermekle sınırlı kalmıyor, ayrıca sesi çeşitli karmaşık yöntemlerle kontrol de edebiliyor. Dahası, Flash Player kısa bir süre içinde videoları da kontrol etmeye başladı. Ve Web yine insanlara mutluluk veren bir yer haline geldi. Bu derste, sadece Macromedia Flash 8 Basic te en çok kullanılan özelliklerini tanıyarak ses ve videoyla çalışacaksınız. Ders kapsamında çeşitli sesler ithal edecek ve düzgün bir şekilde duyulmalarını sağlamak için bunların belirli özelliklerini değiştireceksiniz. Ayrıca bu derste belgenizin Timeline ında oynatmak üzere bir video ithal edeceksiniz. Sizin elinizde sihirli bir geliştirme değneği olmadığı için ses ve videoları özelleştirme işlemini eski usullerle, yani elle yapmanız gerekecek. Bunların dışında, ses ve videolarla ilgili yapılması ve yapılmaması gerekenleri öğreneceksiniz. Çünkü bu iki kuzenin kullanılması söz konusu olduğunda bir şeyi kullanabiliyor olmak, onu kullanmak zorunda olmanız anlamına gelmez. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Ses ithal edeceğiz. Bir düğmenin Timeline ına ses ekleyeceğiz. Ana Timeline a ses ekleyeceğiz. Sesleri özelleştireceğiz. Video ithal edeceğiz. Videoları kodlayacak ve sıkıştıracağız. Yaklaşık Süre Bu dersi yaklaşık 1 saatte tamamlayabilirsiniz. 186 DERS 7

206 Gerekli Dosyalar Ortam Dosyaları: lesson07/assets/video1.mov lesson07/assets/video2.mov lesson07/assets/video3.mov lesson07/assets/sound.mp3 lesson07/assets/click.wav Başlangıç Dosyaları: lesson07/start/bookstore10.fla Tamamlanmış Dosyalar: lesson07/complete/bookstore11.fla lesson07/complete/video1.fla lesson07/complete/video2.fla lesson07/complete/video3.fla lesson07/complete/sound.fla Ses ve Video Kullanmak Ses ve video günümüzde pek çok uygulama için neredeyse vazgeçilmez birer öğe haline gelmiştir. Ses çoğunlukla bir geribildirim mekanizması olarak kullanılmaktadır ve bir işlemi tamamlamak için gereken talimatları sağlayarak veya e-öğrenim uygulamalarında doğru ya da yanlış cevabı seçtiklerini bildirerek kullanıcılara bir şeye tıklayabileceklerini ya da tıkladıklarını gösterir. İnternet te eğlenceden videokonferansa (bunların hepsini Flash la gerçekleştirmek mümkündür) kadar her yerde kullanıldığını gördüğümüz video da aslında benzer amaçlarla kullanılır. Ses ve video birlikte uygulamalarınızı daha üst seviyeler taşır ve bunu yaparken son kullanıcı deneyimini geliştirmekle kalmaz, ayrıca başka türlü sunulması mümkün olmayan bazı bilgileri sunarlar. Ses eklemek, özellikle siteniz görme zorluğu çeken insanlara yönelikse çok faydalı olacaktır. Bir SWF dosyasına sesli ipuçları ekleyerek (basılması gereken tuşları bildiren ya da metinleri okuyan yardımcılar gibi) ziyaretçilerinizin sitenizden daha rahat faydalanmasını sağlayabilirsiniz. Serbest olarak çalışan bir müzisyen için şarkılarından birine ait bir MP3 örneği oluşturabilir ya da bir firmanın Web sitesi için, site yüklenirken çalınacak şekilde o firmanın cıngılını ekleyebilirsiniz. Bir siteye uyduruk ya da sinir bozucu bir müzik eklemek çok basittir, ancak bu, insanların siteye ilgisini azaltır. Sitenizi arkadaşlarınıza ve diğer insanlara test ettirerek onların tavsiyesi doğrultusunda gereksiz fazlalıklardan kurtulabilir ve SWF dosyalarınızda ses ve video kullanımı için daha yaratıcı ve farklı yöntemler bulabilirsiniz. Sesler ve videolar belgenizin dosya boyutunu önemli ölçüde artıracağından bu öğeleri kullanmanızın sizin tarafınızdan ve ziyaretçileriniz tarafından harcanacak bant genişliğine değdiğinden emin olmalısınız. SES VE VIDEO EKLEMEK 187

207 Sesleri ve Videoları Düzenlemek Pratik olarak uygunsa, ithal etmeden önce sesleri ve videoları harici editörlerde düzenleyebilirsiniz. Flash 8 de ses kontrolü dışında ses düzenleme özelliği yoktur. Ancak Flash 8 temel video düzenleme becerilerine sahiptir. Yeni bir video dosyasını aktarırken bu dosyayı düzenleyebilir ve/veya sıkıştırabilirsiniz. Videodan kısa klipler oluşturabilir, karelerin büyüklüğünü kırparak küçültebilir, görüntülerin renklerini düzeltebilir ve sonra bunların hepsini birleştirebilirsiniz. Ancak Final Cut Pro, Adobe Premier ya da Avid Express gibi bir video düzenleme yazılımının kullanılmasını gerektiren geçişler ya da başka özel efektler yaratamazsınız. Bu, videolarınızı basitle çok karmaşık arasında farklı yöntemlerle düzenlemenizi sağlayan ucuz veya ücretsiz çözümler olmadığını göstermez. Windows Movie Maker 2, video dosyalarınızı hızlı ve kolay bir şekilde düzenlemenizi sağlar ve aynı zamanda ücretsiz bir yazılımdır (fakat sadece Windows XP sürümü mevcuttur). QuickTime Pro da çok makul, aynı zamanda faydalı bir yazılımdır ve çok basit video düzenleme ve sıkıştırma işlemleri yapmanızı sağlar. OS X kullanıcıları da imovie den faydalanabilir. Bu ücretsiz ya da neredeyse ücretsiz editörler, yavaşça belirme (fade-in), yavaşça kaybolma (fade-out), geçişler, basit filtreler ve temel renk değiştirme ve düzeltme fonksiyonlarıyla ilgili bütün ihtiyaçlarınızı karşılar. Daha gelişmiş ya da profesyonel düzeyde video düzenleme ve kurgu işlemleri için After Effects, Avid Express DV ya da Final Cut Pro gibi programları alabilirsiniz. Bu tür yazılımlarla daha ayrıntılı ve kontrollü renk düzeltme ve kurgu işlemleri gerçekleştirebilirsiniz. Medya Öğelerini Kullanırken Sorumlu Davranmak Ses ve video eklerken bazı önemli kararlar vermeniz gerekir. Ziyaretçileri hesaba katmak da önemli noktalardan biridir. Bazı ziyaretçiler çaldığınız müziği dinlemek zorunda kalmayı istemeyebilir (bir ses döngüsünün kullanıldığı durumlarda buna sıkça rastlanır). Ziyaretçileriniz genel bir ayar kullanıyor ve başka müzikler dinliyor olabilir. Bu nedenle, en azından arka plan sesleri için bir kapatma (Off) düğmesi eklemeniz iyi olacaktır. Ses kontrol araçları ya da Duraklatma/Çalma (Pause/Play) geçiş kontrolleri de faydalı olur. Bu şekilde sorumlu bir davranış ziyaretçilerinizi daha çok memnun edecektir. Ses ve video dosyaları genellikle çok büyük oldukları için, bir ilerleme çubuğu gibi bir araç kullanarak ziyaretçilere ne kadar veri aktarılması gerektiğini bildirmelisiniz. Eğer söz konusu dosya büyükse (bizim video dosyamızda olduğu gibi) içeriğin indirildiğini bir şekilde göstermelisiniz, böylece sayfanıza geldiklerinde ziyaretçilerinizin hiçbir şey olmadığını düşünmelerini engellemiş olursunuz. Videonuza ses de ekleyebilirsiniz. Bu durumda, düğmeler ya da sürgüler aracılığıyla sesi kontrol etme imkânı sunmalısınız. 188 DERS 7

208 Sıkıştırma, Codec ler ve Plug-in ler Sıkıştırma işlemiyle dosyaların boyutu küçültülür. Bunun için de, içerikte duyulması ya da görülmesi gerekmeyen bilgileri silen karmaşık matematiksel denklemlerden faydalanılır. Böylece kullandığınız video, ses ya da dosya daha çabuk indirilir. Ancak sıkıştırma işleminde her zaman biraz kalite kaybı olduğunu unutmayın. Flash ın dışında özellikle video dosyalarını sıkıştırmak için tasarlanmış başka yazılımlar da mevcuttur. Discreet Cleaner 6 (Mac) ya da Discreet Cleaner XL (Windows) gibi profesyonel çözümlerin yanında QuickTime Pro gibi basit bir çözümden de faydalanabilirsiniz. Flash düşünülerek tasarlanmış özeliklere sahip olan Sorenson Squeeze, videoları sıkıştırarak doğrudan FLV (Flash Video) ya da SWF formatlarına dönüştürebilir. Windows Movie Maker 2 gibi diğer programlarla videolarınızı bir video projesini ihraç ederken sıkıştırabilirsiniz. Bu da özellikle videolarınızı Flash ın sahip olmadığı birtakım özellikleri kullanarak düzenlemeniz gerektiğinde faydalı olabilir. Sıkıştırma konusuyla ilgili olarak dikkat etmeniz gereken en önemli nokta, bir kez sıkıştırdıktan sonra sesleri ya da videoları tekrar sıkıştırmaya çalışmaktan kaçınmaktır. Tekrar sıkıştırmak, materyalin kalitesini önemli ölçüde düşürür. Dosyaları sıkıştırmak ve açmak için kullanılan küçük yazılım parçaları codec olarak adlandırılır. Bir dosya İnternet üzerinden yayınlanmak üzere sıkıştırılır ve ziyaretçinin bilgisayarında görüntülenmek üzere yine aynı codec le açılır. Çeşitli codec örnekleri arasında Sorenson Video 3, Cinepak, QDesign Music 2 (ses), MPEG ve DivX i sayabiliriz. Videonuzu belirli bir codec le sıkıştırdığınızda videoyu açmak için hem sizin, hem de videonuzu izleyecek olan kişilerin bilgisayarında bu codec in kurulu olması gerekir. Bazen QuickTime Player gibi bazı programlarda belirli codec ler de yüklenir. Ancak diğer codec leri ziyaretçilerin ayrıca yüklemesi gerekir. Flash, varsayılan durumda, özellikle videoları bir Flash belgesine aktarmak için kullanılan On2 VP6 codec ini kullanır. Bu codec Flash Video Importer da yerleşik olarak bulunmaktadır. Flash 8 Sorensen Spark codec ini de kullanabilir. Medya Öğelerini Çevrimiçi Olarak Sunmak Medya öğelerini çevrimiçi olarak sunarken ziyaretçilerinizin dosyalarınızı görüntülemek için neye ihtiyaç duyacağını ve bunların indirilmesinin ne kadar süreceğini düşünmeniz gerekir. Ses ve video dosyaları kullanırken farklı bağlantı tiplerinde dosya boyutunu ve ziyaretçilerin bunları ne kadar sürede indireceğini bilmek önemlidir. SES VE VIDEO EKLEMEK 189

209 SWF dosyalarının aslında aşamalı olarak indirildiğini unutmayın. Yani bir SWF dosyası ziyaretçinin bilgisayarına indirilirken, bir yandan da oynatılır. Akma (streaming) biraz farklı bir kavramdır, çünkü aşamalı olarak indirilen bir dosyadan farklı olarak, akan sesler ve videolar tarayıcının önbelleğine kaydedilmez. Akan seslerde ve videolarda dosya, sesi sonuna kadar çaldıktan sonra (sesin döngüyle çalışmasını istiyorsanız) verileri tekrar indirmeye başlar. Dahası, akan sesler ve videolar Flash Communication Server MX gibi bir sunucu uygulaması kullanmayı gerektirir. Akan seslerle ilgili diğer bir sorun, SWF dosyasının akan sese ayak uydurmak için acele etmesidir. Dosya akan seslere ve videoya yetişeyim derken bazı kareleri atlayabilir. Eğer bu karelerde ActionScript kullandıysanız, o kodlar kaybolacaktır. İşin güzel tarafı, çok büyük akan sesler ve videolar kullanmak, çok büyük dosyaların, videokonferansların ya da sesli konferansların veya simulcast lerin (Birinci Beyzbol Ligi gibi) sunumu için tek çözümdür. Dosya Boyutu SWF dosyalarınıza güzel ve ilginç içerikler eklemek konusunda özgürsünüz, ancak bunu abartmayın. Ses, video ve benzeri bileşenler, uygulamalarınızın dosya boyutunu ciddi şekilde artırabilir. SWF dosyasına medya öğeleri eklerken dikkatli olun. Sunum için kullanacağınız dosyaların boyut ve bant genişliği açısından makul olup olmadığını değerlendirin. Mesajınızı iletmenin en iyi yolu bu olabilir, ama aynı işi farklı bir şekilde yapıp dosya boyutunu örneğin 800 KB kadar küçültmeniz mümkün olabilir. Bazı video dosyalarını İnternet üzerinden sunmak pratik bir yaklaşım değildir. Kare boyu ne kadar büyükse, dosya boyu da o kadar büyür ve dosya boyu ne kadar büyükse, indirme süresi de o kadar uzar. Lütfen eskilerin şu sözünü unutmayın: Bir şeyi yapabiliyor olmak yapmak zorunda olmanızı gerektirmez. Bu anlamda, eğer İnternet ortamında video kullanmanız gerekiyorsa, dosya boyunu küçük tutacak ve kontrol edebildiğiniz tüm öğeleri kontrol etmeniz gerekir. Bu öğelerden biri de kare boyu dur (frame size). Kare boyu 640 x 480 piksel olan bir dijital videonun İnternet üzerinden sunulması, bir filin incecik bir pipetin içinden gösterilmesinden farklı değildir. Tabii ki bunu yapmanız mümkündür, ama bunun gerçekleşmesi çok uzun bir zaman alacaktır. Örneğin 320 x 240 piksellik boyutlara sahip daha küçük bir video kullanmak daha iyi bir yaklaşım olabilir. Büyük kare boyu kullanmanız gerekiyorsa, bu videoları CD-ROM da sunma çözümünü düşünmeniz gerekir. Gün gelecek ve bu çözümlere de gerek kalmayacak, fakat teknoloji bize o günleri gösterene kadar daha az olan daha çoktur sloganını benimsememiz gerekecek. Bir Belgeye Ses Aktarmak Flash belgelerine aktarabileceğiniz pek çok farklı dosya tipi mevcuttur. Ses dosyaları aktarmak için MP3, AIFF (Mac) ve WAV (Windows) formatlarını kullanabilirsiniz. Mac inizde ya da PC nizde QuickTime kuruluysa, her iki platforma da WAV ve AIFF dosyaları ve Sound Designer II dosyaları 190 DERS 7

210 gibi ilâve dosya formatları da aktarabilirsiniz. MP3 dosyaları, Flash 8 Professional da MediaPlayback bileşeni ya da ActionScript kullanılarak dinamik olarak Flash 8 Basic e yüklenebilir. MP3 leri bir FLA dosyasına ithal edebilir ve belirli bir sesi Timeline da çalabilir ya da SWF çalışırken bir MP3 dosyasını sunucudan dinamik olarak yükleyebilirsiniz. Bir MP3 dosyasını akan ses olarak ayarlayabilir ya da ilgili olay gerçekleştiğinde belleğe yükleyerek çalabilirsiniz. Pek çok Flash tasarımcısı ve geliştiricisi SWF dosyalarında kullanmak üzere döngüler oluşturur ya da bir yerlerden döngüler bulur. Döngüler, uzun süren bir ses etkisi oluşturmak (ve aynı zamanda içeriği küçük tutarak indirme süresini kısaltmak) için güzel bir yöntemdir. Projelerinizde kullanmak üzere İnternet ten ücretsiz ses döngüleri bulabilir ya da ReCycle, Cakewalk Plasma veya Acid Pro gibi bir ses yazılımını kullanarak kendi ses döngülerinizi oluşturabilirsiniz. OS X kullananlar GarageBand i kullanabilir. Sorunsuzca tekrarlanabilen bir ses döngüsü oluşturduğunuzdan emin olun. Döngülerin, dalga şekli 0 noktasından geçerken başlaması ve bitmesi gerekir. Bu nokta, pozitif ve negatif dalga şeklinin arasında bulunur ve burada ses yoktur. Müziği, dalga şekli tam 0 iş aretinden geçerken keserseniz, döngünün sonunda rahatsız edici pıt sesini duymazsınız. Eğer varsa döngünün başında ve sonunda bulunan ekstra boşlukları da kırptığınızdan emin olun. Ölçü sayısı tek olan bir döngü oluşturmak iş inizi kolaylaştıracaktır. Yani 4/4 lük bir ölçü kullanıyorsanız, hazırladığınız müzik beş ölçü olsun. Müziğin düzenli olmayan yapısı, bunun bir döngü olduğunun anlaşılmasını zorlaştıracaktır. 1. Yeni bir FLA belgesi oluşturun ve sound.fla olarak adlandırın. Bu belgeyi sabit diskinizdeki TechBookstore klasörüne kaydedin. Bu dosyayı ses ithal etmek ve bazı sesler üzerinde denemeler yapmak için kullanacaksınız. Bununla birlikte, dosyayı Tech Bookstore Web sitesinde kullanmayacağınızı hatırlatmak isterim. 2. Kitabın CD-ROM undaki lesson07/assets yer alan sound.mp3 dosyasını sabit diskinize kopyalayın. Bu dosyayı sabit diskinizde istediğiniz bir konuma kopyalayabilirsiniz. Ancak bu konumu unutmayın, çünkü bir sonraki adımda bunu kullanmanız gerekecek. Bu MP3 dosyası bir sonraki derste oluşturacağınız tur esnasında arka planda çalacak. Ses dosyasının süresi yaklaşık 8 saniye olacak ve arka plana bir olay sesi olarak dinamik bir şekilde yüklenecek. SES VE VIDEO EKLEMEK 191

211 3. File > Import > Import to Library komutunu seçin. Sabit diskinize kopyaladığınız MP3 dosyasını bulun. Dosyayı seçin ve Open (ya da Mac te Import to Library) düğmesine tıklayın. Sound Properties iletişim kutusunu açın. MP3 dosyasını seçip Open (Aç) düğmesine tıkladıktan sonra ses doğrudan Flash ı n içindeki kütüphaneye aktarılacaktır. Kü tüphaneyi açın ve yeni aktardığınız MP3 ses dosyasını bulun. Sese sağ tıklayın (ya da Mac te Control tuşunu basılı tutarak tıklayın) ve bağlam menüsünden Properties i seçin. Sound Properties iletişim kutusu açılacaktır. Bu iletişim kutusunu kullanarak sesin dışarıya ıy aktarılmasıyla ıy ilgili ayarlarda değişiklik yapabilirsiniz. 192 DERS 7

212 4. Compression menüsünün üzerinde yer alan Use imported MP3 quality onay kutusunun işaretini kaldırın. MP3, Flash 8 in varsayılan ses sıkıştırma tipidir, dolayısıyla Compression menüsünde otomatik olarak seçili durumdadır. r. Burada bir MP3 dosyası ithal ettiğiniz için, Flash ithal edilen ses dosyasının kalite ayarlarını kullanmak istediğinizi düşünecektir. Bu onay kutusunun işaretini kaldırmak size Flash htaki kalite ayarlarını değiştirme imkânını verir, böylece daha yüksek ya da daha düşük kalitede bir ses elde edebilirsiniz. Sesin kalitesini yükseltmek tabii ki dosya boyutunun büyümesine sebep olacaktır. Yeni ses sıkıştırma ayarını kontrol etmek için kullanılan Test düğmesi Kaliteyi değiş tirmek için kullanılan Bit rate ayarı Elde edilen ses dosyasının büyüklüğüyle ilgili özet bilgi MP3 sıkıştırma tipinin farklı bit rate değerlerinde nasıl sonuç verdiğini ilgili ayarı birkaç dakika kurcalayarak test edin. Son SWF dosyasında yeni bit rate değerine sahip sesin neye benzediğini duymak için Test düğmesine tıklayın. Siz Bit rate değerini değiştirdikçe, elde edilen MP3 dosyasının boyuyla ilgili özet bilgiler iletişim kutusunun alt tarafında görüntülenecektir. İşinizi bitirdikten sonra OK düğmesine tıklayarak iletişim kutusunu kapatın. Publish Settings iletişi im kutusunu kullanarak (File > Publish Settings) bütün ihraç seçeneklerini ayarlayabilirsiniz. Ancak Sound Properties iletişi im kutusunda yaptığınız dosya ihraç etme ayarları daha önceki ayarları geçersiz kılacaktır. Bununla birlikte Publish Settings iletişi im kutusunda Override sound settings (Ses ayarlarını geçersiz kıl) seçeneğini iş aretlerseniz, Sound Properties iletişi im kutusunda yapılan ayarlar geçersiz kılınır. Publish Settings iletişi im kutusu hakkında ayrıntılı bilgi için Ders 11 e bakabilirsiniz. 5. Bir sonraki uygulamaya geçmeden önce dosyayı kaydedin. SES VE VIDEO EKLEMEK 193

213 Ses Eklemek ve Sesleri Özelleştirmek Flash ta kullandığınız sesleri doğrudan geliştirme ortamında değiştirebilirsiniz. Flash ın bir ses düzenleme programı olmadığını ve ses şiddeti ve pan efektleriyle sınırlı olduğunu unutmayın. Flash, bu derste daha önce bahsettiğimiz gerçek ses düzenleme programlarının yerini alamaz. Ancak temel özelleştirme ve düzenleme işlemlerinde Flash tan faydalanarak, programa aktardığınız seslerde, çalışma alanını terk etmek zorunda kalmadan değişiklik yapabilirsiniz. Bu uygulamada, aktardığınız sesin başında bir yavaşça belirme (fade-in) efekti oluşturacak ve giriş kısmını kırparak seste küçük bir değişiklik yapacaksınız. Bu uygulamada da sound.fla dosyasının üzerinde çalışacaksınız. 1. sound.fla dosyasında, Timeline üzerinde 30 ya da daha büyük numaralı bir kareyi seçin ve F5 tuşuna basarak yeni bir kare ekleyin. Sonra sound.mp3 sesini kütüphaneden Stage in üzerine sürükleyin. Dalga şeklinin Timeline boyunca uzandığını göreceksiniz, çünkü yeni kareler eklediniz. Dalga şekli, MP3 dosyasındaki sesi temsil eder, çünkü ses Stage de görsel olarak temsil edilmez. Çok sayıda farklı katman içeren bir SWF dosyasıyla çalışıyorsanız, yeni bir ses eklerken bunun için ayrı bir katman oluşturduğunuzdan emin olun. Böylece seslerinizi kolayca bulabilirsiniz. Diğer bütün öğelerde olduğu gibi seslerin de bir anahtar kare seçili durumdayken Stage in üzerine sürüklenmesi gerekir. Dosyanın başında bir anahtar kare olduğu için ses dosyası buraya yerleştirilecektir (Timeline da başka anahtar kare bulunmamaktadır). 2. Timeline da dalga şeklini içeren bir kareye tıklayın ve Properties denetçisinde yer alan Sync açılır menüsündeki seçeneği Event olarak değiştirin. Sonra da Properties denetçisindeki Edit düğmesine tıklayın. Siz Sync açılır menüsündeki seçeneği değiştirdikten sonra ses, Flash belgesinde bir olay sesi olarak ayarlanacaktır. Stream, sesin indirilirken çalınacağını gösterir. Bir sesi olay sesi (Event) olarak ayarladığınızda bu sesin çalınabilmesi için tamamının indirilmesi gerekir. Edit düğmesine tıkladığınızda Edit Envelope iletişim kutusu açılacaktır. 3. Dalga şeklinin daha büyük bir kısmını görmek için Edit Envelope iletişim kutusunun alt tarafında yer alan Zoom Out (Uzaklaş) düğmesine tıklayın. 194 DERS 7

214 Bir dalga şeklinin görüntüsünü uzaklaştırdığınızda, sesin dalga şeklinin daha büyük bir kısmını görürsünüz. Dalga şeklini yakından görmek isterseniz Zoom In düğmesini kullanabilirsiniz. Bu, bir sesin başını ya da sonunu doğru bir şekilde kırpmak için çok faydalı bir özelliktir. 4. Effect açılır listesini kullanarak bir Yavaşça Belirme (Fade In) efekti ekleyin. Edit Envelope iletişim kutusunu kullanarak pek çok şey yapabilirsiniz: Önce Effect açılır listesinden hazır bir efekt seçebilirsiniz. Sonra da bu efekti düzenleyebilir ya da zarfın (Envelope) içinde kanallar da kendiniz bir efekt oluşturabilirsiniz. Kanallar hoparlörleri temsil eder. Üstteki kanalın sesi sol hoparlörden, alttaki kanalın sesi de sağ hoparlörden gelir. Kanalın orta çizgisi sesin ortalama şiddetini gösterir. Zarf tutamaçları (Time In/Out Kontrolleri) Sağ Kanal Sol Kanal Efekt menüsü Timeline Stop (Durdur) Play (Oynat) Ortalama Ses Zoom In (Yakınlaş) Zoom Out (Uzaklaş) Frames (Kareler) Seconds (Saniyeler) Küçük beyaz kareler, zarf tutamaçları dır ve Time In/Time Out (giriş/çıkış) kontrolleri olarak da adlandırılırlar. Bu tutamaçları sürükleyerek seslerin başlangıç ve bitiş noktalarını değiştirebilir ya da yavaşça belirme/yok olma (fade) ve pan efektleri oluşturabilirsiniz. Kanallardaki zarf çizgilerinde istediğiniz yere tıklayarak yeni zarf tutamaçları ekleyebilir ya da dışarıya sürükleyerek mevcut tutamaçları silebilirsiniz. Yaptığınız değişiklikleri dinlemek için Play (Oynat) düğmesini kullanabilirsiniz. İstediğimiz efekt (Fade In) seçildiğine göre OK düğmesine tıklayıp Edit Envelope iletişim kutusunu kapatın ve ana belgeye dönün. 5. Bir sonraki uygulamaya geçmeden önce, yaptığınız değişiklikleri kaydedin. SES VE VIDEO EKLEMEK 195

215 Bir Düğmeye Ses Eklemek Flash dosyalarındaki çoğu kısa ses ve birçok uzun ses, bu ister bir sembol Timeline ı, isterse ana belgenin Timeline ı olsun, doğrudan Timeline a eklenir. Ses doğrudan bir Timeline a eklendiğinde ona nasıl davranması gerektiği söylenmelidir. Bir olay sesi gibi davranabilir, belirli anahtar karelerde başlayabilir veya durabilir r ya da akabilir. Çalınmaya başlamadan önce olay seslerinin bütünüyle indirilmesi ve kendilerine çalmaları gerektiği söylendikten sonra Timeline dan bağımsız olarak çalınmaları gerekir. Bu bağımsız olarak çalınma özelliği dolayısıyla sesin çalınmasına neden olay her gerçekleştiğinde (bir düğmenin tıklanması ya da oynatım kafasının sesin çalınmasını isteyen bir anahtar kareye gelmesi durumunda) sesin tamam çalınır. Sesin tamamının çalınması dışında, geçerli anda çalınıp çalınmadığına dikkat edilmez ve sesin yeni bir örneği oluşturularak orada çalınmaya başlar. Bu da aynı sesin iki versiyonunun zaman içinde farklı noktalarda çalınması demektir. Bu yüzden olay sesleri kısa sesler için mükemmeldir ve çok uzun sesler için hiç uygun değildir. Düğme sesleri ve döngüler için olay sesleri idealdir Akan sesler uzun ses kullanmanın gerektiği durumlara çok uygundur, çünkü dosya tamamen indirilmeden çalınmaya başlarlar. Bir ses belirli bir Timeline daysa ve akacak şekilde ayarlanmışsa, çalınacağı toplam süreye eşit miktarda kareyi kapsaması gerekir. Diğer katmanlardaki animasyonlar ve görsel malzemelerin de sonuçta sesle aynı sayıda kareyi kapsaması gerekir. Böylece animasyonlar ve sesler senkronize edilebilir. Akan seslerin kullanıldığı senkronizasyonda Flash SWF dosyası sese ayak uydurmaya zorlanır, çünkü ses video dışında bir kartta iş lenir. Flash bu iş lemi, animasyonu ayak uydurmaya zorlamak için bazı kareleri atarak gerçekleştirir. Bu uygulamada, düğmelere tık sesi eklemek için kullanılacak bir ses dosyası aktaracaksınız. Kendilerine ses eklemek istediğiniz düğmeler Tech Bookstore sitesinin içinde yer almaktadır. Burada, bütün sayfalarda bulunan btnproducts, btncompany ve btncontact düğmelerine ses ekleyeceksiniz. 1. Sabit diskinizdeki TechBookstore klasöründe yer alan bookstore10.fla dosyasını açın ve bookstore11.fla adıyla dosyanın yeni bir versiyonunu kaydedin. TechBookstore klasörüne FLA dosyasının yeni bir versiyonu kaydedilecektir. Bu derste dosya üzerinde sadece küçük değişiklikler yapacaksınız. bookstore10.fla dosyasını lesson07/start klasörünü kullanarak da açabilirsiniz. 2. Kitabın CD-ROM undaki lesson07/assets klasöründe yer alan click.wav dosyasını bulun ve bu ses dosyasını sabit diskinizde herhangi bir yere kaydedin. 196 DERS 7

216 WAV, sıkça kullanılan bir sıkıştırılmamış ses dosyası formatıdır. WAV dosyasını Flash a aktaracaksınız. Bu sesi SWF dosyanızın bir parçası olarak dışarıya aktarırken sıkıştırma ayarlarını yapabilirsiniz. WAV Windows platformunda kullanılan standart ses formatıdır. Eğer Mac kullanıcısıysanız, click.wav dosyasını çalmak ve aktarmak için QuickTime yazılımını kullanabilirsiniz. Mümkün olan her yerde sıkıştırılmamış sesleri (WAV ya da AIFF dosyaları gibi) ithal etmeye çalışın. Böylece bir SWF dosyasına dâhil edildiğinde bu sesin yeniden sıkıştırılması gibi bir durum söz konusu olmaz. 3. File > Import > Import to Library komutunu seçerek click.wav dosyasını Flash a aktarın. Kütüphaneyi açarak aktardığınız ses dosyasını bulun (adı yine click.wav olacaktır) ve kütüphanenin Media klasörünün üzerine sürükleyin. File > Import > Import to Library komutunu seçin. CD-ROM dan sabit diskinize kopyaladığınız WAV dosyasını bulun ve Open (Aç) komutunu (ya da Mac te Import to Library komutunu) seçin. Dosyayı aldıktan sonra Flash htaki kütüphaneyi (Library) açın, click.wav dosyasını bulun ve kütüphanedeki media klasörünün üzerine sürükleyin. 4. Sesin özelliklerinde değişiklik yapmak için sağ tıklayıp (ya da Mac te Control tuşunu basılı tutarken tıklayıp) açılan bağlam menüsünden Properties i seçin. Properties iletişim kutusu açılacaktır. Bu iletişim kutusunu kullanarak, WAV dosyasını içeren bir SWF dosyası oluştururken sesin nasıl yayınlanacağını belirleyebilirsiniz. Compression açılır menüsünden ADPCM i seçin. ADPCM, kısa sesleri İnternet üzerinden çalmak için mükemmel bir sıkıştırma formatıdır. Sample Rate değerini 5 khz, ADPCM Bits değerini de 3 olarak değiştirin. Bu ses tipi için buradaki ayarlarlar yüksek kalitede sonuç verir ve dosya boyu 0.1 KB olur. SES VE VIDEO EKLEMEK 197

217 5. Kütüphaneden btnproducts ı seçin ve simgesine çift tıklayarak sembol düzenleme moduna geçin. Timeline a yeni bir katman ekleyin ve ismini sound olarak değiştirin. Kü tüphanedeki düğme simgesine çift tıklayarak örneğin sembol düzenleme modunda açılmasını sağlayın. btnproducts sembolü sembol düzenleme modunda açılacaktır. Burada düğmeye ses ekleyebilirsiniz. Düğmenin içinde, her karesinde anahtar kareler bulunan bir tane katman göreceksiniz. Düğmenin sesini yerleştirmek için yeni bir katman eklemeniz gerekir, çünkü sesleri Timeline da kendi katmanlarında tutmak her zaman için iyi bir fikirdir. Insert Layer düğmesine tıklayın ve yeni katmanın ismine çift tıklayarak katmanı sound olarak yeniden adlandırın. 6. sound katmanının Down karesine yeni bir anahtar kare ekleyin. Down karesine, önce kareyi seçip sonra da F6 tuşuna basarak bir anahtar kare ekleyin. Ziyaretçi düğmeye her tıkladığında down karesi oynatılacaktır. Yani ses, sadece düğmeye tıklanması durumunda çalacaktır, ziyaretçi imleci düğmenin üzerine getirdiğinde değil. 7. Down karesindeki yeni anahtar kareyi seçin ve click.wav sesini kütüphaneden Stage e sürükleyin. Siz Stage in üzerine sürüklediğinizde ses (hafifçe duyulan kısa bir tıklama sesi), düğmenin Down durumuna eklenecektir. Yani ses, düğmeye tıklanması durumunda çalacaktır. Karede bir dalga şekli göreceksiniz. Bu, Timeline a bir sesin yerleştirildiğini gösterir. Stage de sesi görsel olarak temsil eden bir öğe göremezsiniz ve sesin içinde bulunduğu anahtar kareden 198 DERS 7

218 sonra başka kare yoksa dalga şeklini zar zor görürsünüz. Daha önce de belirttiğimiz gibi, sesleri kendi katmanlarında tutmanın en iyi yöntem olduğunu gösteren sebeplerden biri budur, yani böylece onları daha kolay bir şekilde bulursunuz. 8. Yukarıdaki işlemi tekrarlayarak aynı sesi ana Stage üzerinde btncompany ve btncontact düğmelerine ekleyin. İşinizi bitirdikten sonra buttons katmanını tekrar kilitleyin. btnproducts örneğine sesi ekledikten sonra düzenleme çubuğundaki Scene 1 e tıklayarak ana Stage e dönün. Kü tüphanede btncompany ve btncontact a ayrı ayrı çift tıklayın ve yeni katmanlar ekleyin. Sonra da btnproducts örneğinde yaptığınız gibi tıklama (click) sesini Down karesindeki yeni bir anahtar karenin üzerine sürükleyin. 9. Enable Simple Buttons ı kullanarak sesi test edin. Eklediğiniz sesi duymak için düğmeyi test etmek isterseniz, Control > Enable Simple Buttons ı seçin. buttons katmanının görünür durumda olduğundan emin olun ve btnproducts, btncompany ve btncontact düğmelerine basın. Enable Simple Buttons komutu, düğmelerinizin sonuçta elde edilecek SWF dosyasındaki gibi davranmasını sağlar. Dolayısıyla bu, düğme sesini test etmek için ideal bir yoldur. İşiniz bittikten sonra Control > Enable Simple Buttons ı seçerek bu özelliği kapatın. Enable Simple Buttons özelliği etkin durumdayken düğmelerinizi taşıyamaz ve seçemezsiniz. Buttons katmanınızı tekrar gizlediğinizden emin olun. 10. Çalışmanızı kaydedin. Böylece kitap mağazası sitesine ilk ses efektlerinizi eklemiş oldunuz. SES VE VIDEO EKLEMEK 199

219 Flash a Video Aktarmak FLA dosyasına ses aktarmayı öğrendiğinize göre, bir adım daha ilerleyerek bir FLA dosyasına video eklemenin zamanı geldi. Flash Basic 8, video dosyaları ithal etmenizi ve gömmenizi, aynı zamanda dosyayı alırken videoyu çok basit şekilde düzenlemenizi de mümkün kılar. Tek video dosyasını küçük klipler halinde düzenleyebilir ya da bütün dosyayı düzenlemeden alabilirsiniz. Her iki durumda da videonun sıkıştırma (ya da ihraç) ayarları üzerinde ciddi bir kontrol imkânına sahipsiniz. Video ithal etmeden önce dikkat etmek gereken diğer bir önemli nokta da, ithal işlemi öncesinde ya da sırasında düzenleme ve sıkıştırma işlemleri üzerinde sahip olunduğunuz kontrol imkânıdır. Daha fazla kontrol imkânı, genellikle daha iyi sıkıştırma elde etmek ve bu arada dosya boyunu kabul edilebilir bir kalite düzeyiyle dengelemek anlamına gelir. Sıkıştırma üzerinde yeterli düzeyde kontrol sahibi olsanız bile (iyi bir codec le birlikte), videonun dosya boyutu yine büyük kalabilir (her karede bulunan veri miktarından dolayı). Videolarınızı düzenlemeye ya da sıkıştırmaya başlamadan önce aşağıdaki noktalara dikkat edin. Videonuzu kırpın: Görüntünün başındaki ve sonundaki boş alanların dosya boyutunu büyüttüğünü aklınızdan çıkarmayın. Bu nedenle, Video Import Wizard iletişim kutusunu kullanırken (sonraki uygulamalarda kullanacaksınız) Flash ı n düzenleme özellikleriyle videonun başındaki ve sonundaki fazlalık bölümleri sildiğinizden emin olun (eğer ithal etmeden önce silmediyseniz). Yaptığınız ayarları test edin: Eğer dosya boyu çok önemliyse, farklı ithal ayarlarını ve kalite seviyelerini kullanmayı denemelisiniz. Bütün video görüntüleri birbirinden farklıdır ve dolayısıyla bunların sıkıştırılması ve açılması da farklıdır. Bu da videodaki renkler, hareketler ve efektler gibi çeşitli faktörlere bağlıdır. Videonuz ithal ettiğinizde görüntüsü iyiyse, ayarları değiştirerek orijinal dosyayı biraz daha sıkıştırmayı deneyin (örneğin daha düşük bir kalite ayarı ya da daha az anahtar kare kullanarak). Yine iyi bir video görüntüsü ve bunun yanında daha düşük bir dosya boyutu elde edebilirsiniz. Mümkünse geçiş efektlerini, gürültüleri ve hareketleri sınırlı tutun: Geçiş (fading) efektleri, hem yavaşça belirme (fade-in), hem de yavaşça kaybolma (fade-out) efektlerini, ayrıca bir video klibinden başka bir video klibine geçerken kullanılan geçiş efektlerini (buna crossfading denir ve videonuzu başka bir programda düzenlediyseniz bunu kullanabilirsiniz) kapsar. Gürültü (noise), görüntülerinizin fazla aydınlatılmaması durumunda her karede karşınıza çıkabilen lekelere verilen isimdir. Hareketli görüntülerde de (rüzgârda sallanan ağaçlar gibi) benzer şekilde, hareket eden birçok piksel bulunur. Bütün bu faktörler genellikle görüntünün dosya boyunun büyümesine sebep olur. Aynı kamerayla çekilmiş, kare boyutları ve uzunluk açısından aynı iki video klibinin dosya boyutu bu faktörlere bağlı olarak farklı olabilir. Ayrıca görüntünün sıkıştırılmasında da zorluklar yaşanır. Bu durumda genellikle daha fazla anahtar kare eklemeniz ve daha yüksek bir kalite ayarı kullanmanız gerekir. Görüntülerdeki geçiş efektlerini ve hareketleri ortadan kaldıramıyorsanız ya da gürültü miktarını azaltamıyorsanız, klibi sıkıştırırken daha fazla video anahtar karesi eklemeyi unutmayın (daha 200 DERS 7

220 sonra sıkıştırma ayarlarını yaparken anahtar karelerle ilgili de bir ayar göreceksiniz). Ne kadar fazla anahtar kare eklerseniz, videonuz o kadar iyi görünür. Bununla birlikte, sıkıştırıldıktan sonra klibin dosya boyunun da büyük olacağını unutmayın. Sıkıştırılmış bir videoyu tekrar sıkıştırmayın. Bir videoyu her (tekrar) sıkıştırışınızda daha fazla kalıntı (artifact) oluşur ve kalite düşer. Kalıntı oluşması, videoda blokların ve piksellerin belirginleşmesi anlamına gelir; bu da kötü ve kalitesiz bir görüntü oluşturur. Orijinal görüntünüz zaten sıkıştırılmış olduğu için muhtemelen blok şeklinde kalıntılar içerir. İkinci sıkıştırmada blok şeklindeki artıkların sayısı artar ve kalite seviyesi düşer. Video dosyalarını her zaman en düşük oranda sıkıştırmaya çalışın. Bir Timeline üzerinde bir videoyla çalışıyorsanız, bunun Flash taki Timeline dan farklı olduğunu unutmayın. Doğrudan Flash a aktarılan normal bir videonun üzerinde çalışıyorsanız, videonun kendisine kod ya da anahtar kare ekleyemezsiniz. Ama videoyu bir movie clip e ekleyebilir ve buna ActionScript kodu ekleyebilirsiniz. Şimdiki uygulama için dışarıdan Tech Bookstore sitesinin tur sayfası için kullanacağınız bir videoyu aktaracaksınız. Bu uygulamadan sonra birkaç video daha eklemeniz gerekecek. Bu nedenle daha sonra bu uygulamaya tekrar dönmeniz gerekecek (tabi eğer bütün adımları hatırlamazsanız). 1. video.fla adında yeni bir dosya oluşturun ve bunu sabit diskinizdeki TechBookstore klasörüne kaydedin. Stage büyüklüğünü 320 x 179 olarak değiştirin. Videoları Flash a gömecek ve sonra yayınlayacaksınız. Sonraki derslerden birinde, oluşturduğunuz SWF dosyalarını dinamik olarak yükleyeceksiniz; bu yüzden Stage büyüklüğünün ve videonun boyutlarının birbirini tutmasını istiyoruz. İthal edeceğiniz MOV dosyalarının genişlik ve yükseklik değerleri sırasıyla 320 ve Kitabın CD-ROM undaki lesson07/assets klasöründe yer alan video1.mov dosyasını bulun ve sabit diskinizdeki TechBookstore klasörüne kopyalayın. video1.fla dosyasında fps değerini 15 olarak değiştirin. Dışarıdan video alabilmek için Mac te QuickTime ın 4 ya da daha yeni bir sürümünün, PC de DirectX 7 ya da daha yeni bir sürümünün kurulu olması gerekir. CD-ROM daki lesson07/assets klasöründe bulunan video1.mov dosyasını seçin ve sabit diskinize kopyalayın. Bu video dosyasında herhangi bir ses bulunmamaktadır. Bununla ilgili bir uyarı görebilirsiniz. Video dosyalarıyla birlikte, daha önce ithal edilen sesi kullanacaksınız. Dışarıdan ses içeren bir video ithal ettiyseniz, düzenleme ortamında belgenizin üzerinde çalışırken bu sesi duyamazsınız. Bu sesi, sadece belgenizi test ederken ya da SWF dosyasını yayınladığınızda duyabilirsiniz. Properties denetçisini kullanarak video1.fla dosyasının fps değerini 15 olarak değiştirin. SES VE VIDEO EKLEMEK 201

221 3. File > Import > Import Video komutunu seçin ve sabit diskinizdeki video1.mov dosyasını bulun. Import Video iletişim kutusunu açtığınızda Select Video bölümüyle karşılaşacaksınız. Select Video bölümünü kullanarak bilgisayarınızda mevcut olan bir video dosyasını ithal edebilir ya da bir Web sunucusuna yüklenmiş bir video dosyasını işaret edebilirsiniz. Bu iletişim kutusu bir tür sihirbaz uygulamasıdır ve siz bir ithal seçeneğini belirledikten sonra her noktada videoyu nasıl kullanmak istediğinizle ilgili olarak farklı adımlar ve farklı seçenekler sunar. Aslında videoyu fiziksel olarak belgenin Timeline ına aktaracaksınız ve bu da dosyayı asıl SWF dosyasına gömecektir. Kitapta sadece Flash 8 Basic incelendiği için FLV formatı ele alınmamıştır. Flash 8 Professional da, özel olarak FLV video formatıyla çalışmak üzere tasarlanan birçok bileşen bulunmaktadır. Import Video iletişim kutusundaki Choose (Seç) düğmesine tıklayın, Import Video iletişim kutusunu kullanarak sabit diskinizdeki video1.mov v dosyasını seçin ve ardından Open (Aç) düğmesine tıklayın. Bir sonraki seçeneğe geçmek için Continue düğmesine tıklayın. 202 DERS 7

222 4. Video dosyasını Flash belgesine gömme seçeneğini işaretleyin ve ardından Continue düğmesine tıklayın. Videoyu nasıl alacağınızı seçtikten sonra Deployment bölümüne geçersiniz. Bu bölümde video dosyasını nasıl sunacağınızı belirlersiniz. Videoyu gömmek, aşamalı olarak indirmek, akıtmak ve ihraç edeceğiniz SWF dosyasına bağlamak arasında seçim yapabilirsiniz. Eğer dosyayı gömerseniz, ActionScript kullanarak videoyu SES VE VIDEO EKLEMEK 203

223 düzenleyebilir ve kontrol edebilir ya da videoyu kontrol etmek için kullanabilen düğmeler ekleyebilirsiniz. İşinizi bitirdikten sonra Continue düğmesine tıklayın. FLV dosyalarını SWF dosyanız çalışırken Flash a dinamik olarak da yükleyebilirsiniz. Bu durumda dosyayı SWF dosyasına gömmeniz gerekmez. Bunun yerine, dosyayı belirli bir olay gerçekleştiğinde (ziyaretçinin belirli bir düğmeye tıklaması gibi) SWF dosyasına yüklemek için ActionScript kullanabilirsiniz. Daha sonra video dosyasını kontrol etmek için ActionScript ya da diğer kontrol araçlarını kullanabilirsiniz. 5. Embed the Entire Video (Tüm Videoyu Göm) radyo düğmesini işaretleyin ve ardından Next düğmesine tıklayın. Deployment bölümünden sonra Embedding (Gömme) bölümü gelir. Bu bölümde gömülü videonuzun Flash 8 belgesinde nasıl değerlendirileceğini belirlersiniz. Gömülü videonun bir movie clip sembolü olarak ya da grafik sembol olarak değerlendirilmesi veya gömülü video olarak bırakılması arasında tercih yapabilirsiniz. Ayrıca varsayılan durumda videonun bir örneğini Stage ee e yerleştirmeyi de tercih edebilirsiniz. Eğer bu seçeneğin işaretini kaldırırsanız, videonun belgede yerleştirileceği konum konusunda daha seçici olmanızı tavsiye ederiz. Bu aşamada doğrudan tüm videonun sıkıştırılması ve ithal edilmesi işlemine geçebilir ya da önce videoyu düzenleyebilirsiniz. Videoyu düzenlemek büy ük bir videodan küçü k video klipler elde etmenizi sağlar ve bu çok kullanışlı bir özelliktir. Yani videonun tamamını ithal etmeniz gerekmez ve görüntünün ihtiyaç duymadığınız kısımlarını atarak dosya boyundan tasarruf edebilirsiniz. Çoğu durumda videoyu Flash a almadan önce uygun bir video düzenleme programıyla düzenlemek daha hassas çalışma imkâ nı sağlar, çünkü Flash taki video düzenleme iş lemi, videonun küçük parçalara ayrılması şeklindedir. Bu seçeneğe her zaman sahip olamayacağınızı da unutmayın, dolayısıyla bahsettiğimiz bu özelliği bu kitapta kullanmayacak olsanız bile aklınızdan çıkarmayın. 204 DERS 7

224 Bir sonraki uygulamada Flash 8 Basic in kodlama ayarlarını göreceksiniz. Bu ayarlar, ithal edilirken videonun dosya boyunu ve kalitesini kontrol eder. Sihirbazı kapatmayın, çünkü henüz onunla işimiz bitmedi. Videonun Kodlanması Videolarınızı Flash belgelerine aktarırken videonun sıkıştırılmasıyla (ya da kodlanmasıyla) ilgili belirli şeyleri kontrol edebilirsiniz. Flash, Sorenson Squeeze (bu yazılım Spark Pro codec ini kullanır ve video sıkıştırmak için müthiş bir araçtır) gibi yazılımların sağlayabildiği bütün kontrol seçeneklerini içermez. Flash ta Spark codec ini kullanılır (temel sürüm) ve Flash 8 Player için video ihraç ederken On2 VP6 yı (varsayılan seçenektir) kullanabilir. Codec On2 Technologies tarafından üretilir ve alfa kanalı desteği sunmak gibi bir avantaja sahiptir. Renkli, düz alanların sıkışı tırılması çok daha zordur. Bir videoyu kodlarken piksel blokları haline görüntülenecek ilk alan bunlardır, çünkü bu alanları sıkışı tırmak zordur. Daha fazla anahtar kare ekleyerek ve Quality seçeneğini daha yüksek bir değere ayarlayarak bu sorunu çözebilirsiniz, ama genel dosya boyunda da ciddi bir artışa yol açarsınız. 1. Import Video iletişim kutusundaki Encoding (Kodlama) bölümünde Advanced düğmesine tıklayarak kodlama seçeneklerini görüntüleyin. SES VE VIDEO EKLEMEK 205

225 Gelişmiş ayarların bulunduğu Advanced kısmında videonun ithal edilirken kodlanmasıyla ilgili daha fazla kontrol imkânı sunulur. Burada, video kodlayıcısını değiştirmeyle ilgili seçeneklerin yanında anahtar kare aralıkları ve kaliteyle ilgili de bazı ayarlar bulunur. 2. Eğer seçili değilse On2 VP6 video kodlayıcısını seçin. Kare hızını (frame rate) kaynak dosyanınkiyle uyumlu olacak şekilde ayarlayın ve anahtar kare aralığını (Keyframe Interval) Automatic olarak ayarlayın. Kare hızını ve anahtar kare aralığını belirlemek, video kodlamanın bir bölümünü oluşturur. Varsayılan durumda Flash 8, kodlanacak videonun kare hızını, asıl kodladığınız kaynak videonun hızıyla aynı olacak şekilde ayarlar. Bu, en iyi yaklaşım olarak kabul edilir. Kare hızı, dosya boyundan ziyade daha çok performansla ilgili bir konudur, çünkü videonun işlemci kullanımına bağlı olarak kendi Timeline ı üzerinde hareket etmesi gerekir. Kare hızı ne kadar yüksekse, işlemci o kadar yorulur. Bununla birlikte, çok iyi bir sebebiniz yoksa kodlama esnasında kare hızını değiştirmeniz tavsiye edilmez, çünkü asıl dosyada beklenmeyen sonuçlarla karşılaşabilirsiniz. Video konusunda yeterli tecrübeye sahipseniz, bu konuyla ilgili tehlikeli noktaları bilirsiniz ve kare hızını değiştirmek sizin takdirinize kalır. Biz burada kare hızını varsayılan ayarında bırakıyoruz. Anahtar kare aralığını otomatik olarak ayarlarsınız. Videoda anahtar kareler, veri içeren video kareleridir. Bir video dosyasında ne kadar çok anahtar kare varsa, dosya boyutu o oranda büyük olur. Varsayılan durumda Flash, bir videonun her iki saniyesinde bir anahtar kare ekler. Bu oran, üzerinde çalıştığımız bu dosya için normalden fazladır. 206 DERS 7

226 3. Quality seçeneğini Medium olarak ayarlayın. Kalite (Quality) ayarı videonun sadece oynatım sırasındaki görüntüsünü etkilemez, ayrıca sonuçta elde edilen dosyanın boyunu ve oynatım performansını da etkiler. Genelde kalite ne kadar yüksekse, dosya boyu o kadar büyük olur ve son kullanıcının bilgisayarındaki sistem kaynakları da o oranda fazla kullanılır. Kaliteyi, açılır listeden Custom ı seçerek ve veri hızını (data rate) değiş tirerek özel olarak ayarlayabilirsiniz. Veri hızı ne kadar düşükse dosyanın kalitesi o kadar düşük olur, ama dosya boyu da küçülür. Farklı ayarları deneyin. Hiçbir zararı olmaz. 4. Continue düğmesine tıklayın. Bu noktada, yaptığınız seçimlerle ilgili bilgi veren bir özet sayfasıyla karşılaşırsınız. Eğer herhangi bir şeyle ilgili olarak fikrinizi değiştirirseniz, Go Back (Geri) düğmesine tıklayın ve gereken değişiklikleri yapın. 5. Videoyu ithal etmek ve kodlamak için Finish (Bitir) düğmesine tıklayın. Properties denetçisini kullanarak video örneğini x ve y koordinatları 0 olan konuma yerleştirin. Videoyu gömmeyi tercih ettiğiniz ve bir örneğini ana belgenin Timeline ına yerleştirdiğiniz için Timeline ınız genişleyecek ve video, oynamasına yetecek sayıda kareye sahip olacaktır. Bu şekilde SES VE VIDEO EKLEMEK 207

227 kullanıldığında, gömülen video bir grafik sembolüne çok benzer. Ebeveyn Timeline (burada ana belgenin Timeline ı) hareket etmiyorsa, video oynamaz. Şu anda videonuz ana belgenin Timeline ında olduğu için onu neredeyse bir movie clip gibi kontrol edebilirsiniz. Kullanıcıların ileriye atlayarak bölümler e geçmesini istiyorsanız etiketli karelere atlamayı sağlayan bir ActionScript kodu ekleyebilir ya da düğmeleri kullanarak videoyu Durdurma, Başlatma, Duraklatma (Stop, Start, Pause) seçeneklerini sunabilirsiniz. Stage de video örneğini seçin, x ve y koordinatları 0 olan konuma yerleştirerek tüm Stage i kaplamasını sağlayın. 208 DERS 7

228 6. File > Publish Settings i seçerek belgeyi yayınlayın. Dosyayı yayınladığınızda videoyu içeren bir SWF versiyonu oluşturulur. Bu SWF dosyasını sonraki derslerden birinde videoyu dinamik olarak yüklemek için kullanacaksınız. File > Publish Settings i seçin ve Formats sekmesindeki HTML seçeneğinin işaretini kaldırın. Publish düğmesine tıklayarak dosyayı yayınlayın ve ardından OK düğmesine tıklayın. Dosyayı kaydedin ve kapatın. 7. video2.swf ve video3.swf dosyalarını oluşturmak için önceki iki uygulamada verilen adımları tekrarlayın. İki yeni FLA belgesi oluşturun ve bunları sırasıyla video2.fla ve video3.fla olarak adlandırın. Bu uygulamada verilen tüm adımları uygulayarak video2.mov ve video3.mov dosyalarını karşılık gelen dosyalara aktarın. Dosyaların her birini yayınladığınızdan emin olun ve bir sonrakine geçmeden önce öncekini kaydedin ve kapatın. SES VE VIDEO EKLEMEK 209

229 Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: İnternet te ortam varlıklarının kullanılması konusunda bilgi edindik (Sayfa ). Ses dosyalarının nasıl ithal edildiğini öğrendik (Sayfa ). Flash hta belirli bir sesi özelleştirdik (Sayfa ). Üç düğmeye ses ekledik (Sayfa ). Import Video iletişim kutusunu kullanarak bir videoyu ithal ettik (Sayfa ). Flash htaki sıkıştırma ayarlarıyla ilgili ayrıntıları öğrendik (Sayfa ). 210 DERS 7

230 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ığı iki form

231 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

232 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

233 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 SWC dosyaları şeklinde derlenir ve İnternet t ü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. 214 DERS 8

234 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

235 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

236 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

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

238 4. Stage deki her bir Label örneğine birer özel yazı ekleyin Stage edeki d 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 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 ede d Your Label örneğini seçin ve Properties denetçisini ya da Info panelini kullanarak X koordinatını 13 ve Y koordinatını da 444 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

239 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 Stage ede d 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 t 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 edeki d ti örneğini seçin. X koordinatını 108 piksel, Y koordinatını da 444 piksel olarak değiştirin. Böylece bu TextInput örneği, daha önce oluşturduğunuz Your etiketiyle hizalanacaktır. tisubject t ö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

240 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

241 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

242 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

243 Ö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 Flash hta 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

244 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 ıy icon parametresinin karşısına yazarken, ismin aynen Linkage iletişim kutusundaki gibi BİLEŞENLERLE FORM OLUŞTURMAK 225

245 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 ede d 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

246 form katmanını seçin, Timeline daki d 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

247 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

248 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

249 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

250 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 ee 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 edeki d 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 d 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

251 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

252 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 üy 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

253 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 edeki d ö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 ıy sekme indeksindeki ilk öğeye geri dönülür. 234 DERS 8

254 Sekmeli hale getirilmişi 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. 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 Lde d 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

255 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

256 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 d 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

257 238 DERS 8

258 9 ActionScript in Temelleri Macromedia Flash 8 Basic kullanıyorsunuz diye Flash ın en güçlü özelliklerinden birine erişemeyecek değilsiniz. İşlerin yürümesini sağlamak için kullanacağınız bu özelliğin adı ActionScript ve o olmadan Flash uygulamalarınıza gerçek birer uygulama diyemezsiniz. Uygulamalarınızı bir sergideki resimlere benzetebiliriz. Onlara bakmak çok zevklidir, peki ama bu uygulamalar ne yapar? Eğer ActionScript kodları kullanıyorlarsa; satış vergisini hesaplayabilir, metin alanlarındaki bilgileri okuyabilir ya da Flash Player aracılığıyla başka bir konumda yer alan MP3 dosyalarını akıtabilir ve sadece güzel görünmenin ötesinde daha pek çok güzel şey yapabilirler. ActionScript Tech Bookstore sitesine canlı lı k kazandı rı r

259 Eğer ActionScript terimi korkunç görünüyorsa lütfen korkmamaya çalışın. ActionScript, aslında belirli şeyleri kontrol etmek için kullanılan bir araçtır. ActionScript i örneğin movie clip lere ne yapmaları gerektiğini söylemek, komşunun çocuğu LoadVars ı çağırıp sizin için yerel metin dosyasından bir şeyler almasını söylemek için kullanırsınız. ActionScript işleri organize etmek için kullanılır. Kısacası, ActionScript kullanmanın, eşinizi markete göndermeden önce eline bir alışveriş listesi tutuşturmaktan çok farkı yoktur (biz erkekleri kast ettiğini biliyorum, çünkü bizleri bir alışveriş listesi olmadan markete göndermek pek akıl kârı değildir). Burada da belirli öğelere ne yapmaları, bunları hangi sırayla ve nasıl yapmaları gerektiğini söylersiniz. Buyurmayı seven bir yapıya sahipseniz, ActionScript kullanmak sizin için çok kolay olacaktır. Bu derse harici verileri yüklemek için ActionScript kullanacaksınız. ActionScript i birtakım verileri Flash ın dışında bir yere göndermek için de kullanacaksınız. Dahası, en sonunda menülerinize animasyon uygulayabileceksiniz. Bu derste Script Assist i kullanmayacaksınız, bu yüzden parmaklarınızı ısıtmaya başlayın, zira kendi ActionScript kodlarınızı kendiniz yazmak zorundasınız. Bununla birlikte, çoğu görevin diğerlerine benzediğini görecek ve çok kısa bir sürede bu işe de ısınacaksınız. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: ActionScript 2.0 ı öğreneceksiniz. Nesne, metot ve özellik kavramlarını öğreneceksiniz. Değişkenlerde kesin tip belirleme tekniğinin nasıl kullanıldığını öğreneceksiniz. ActionScript le çalışırken işleri hızlandırmak için kod ipuçları özelliğini kullanmayı öğreneceksiniz. Fonksiyon ve koşullu deyim kavramlarını öğreneceksiniz. Faaliyet alanı ve değişkenlerin kullanımını göreceksiniz. _root, _parent ve level anahtar sözcüklerinin nasıl kullanıldığını öğrenceksiniz. Veri göndermek ve almak için LoadVars nesnesiyle çalışacaksınız. Kodlarınızda olayları, olay işleyicileri ve izleyicileri kullanacaksınız. Bir metne CSS biçimlendirmesi ekleyecek ve bu metni bir belgeye yükleyeceksiniz. Catalog (Katalog), Reviews (İnceleme), News (Haber) ve Home (Giriş) sayfalarını oluşturacaksınız. Tech Bookstore menüsüne animasyon uygulayacaksınız. Tech Bookstore menüsünün çalışmasını sağlayacaksınız. 240 DERS 9

260 Yaklaşık Süre Bu dersi yaklaşık 3 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: lesson09/assets/catalog01.png lesson09/assets/catalog02.png lesson09/assets/home01.jpg lesson09/assets/home02.jpg Başlangıç Dosyaları: lesson09/start/bookstore12.fla Tamamlanmış Dosyalar: lesson09/complete/bookstore13.fla lesson09/complete/reviews.fla lesson09/complete/news.fla lesson09/complete/catalog/catalog01.fla lesson09/complete/catalog/catalog02.fla lesson09/complete/reviews/ txt lesson09/complete/reviews/ txt lesson09/complete/home.fla lesson09/complete/home.txt lesson09/complete/styles.css ACTIONSCRIPT İN TEMELLERİ 241

261 ActionScript 2.0 ActionScript 2.0, nesne yönelimli (object-oriented) bir script dilidir. Nesne yönelimli diller, belirli işlev tiplerini alıp sınıfı (class) adı verilen araçlar (sınıflar, bu işlevselliği kullanması gereken öğeler için birer şablon gibi kullanılırlar) halinde organize ederek script yazanların ve programcıların hayatını kolaylaştırmak için tasarlanmıştır. Bir sınıf kullanmak istiyorsanız bu sınıfın bir örneğini (instance) oluşturursunuz; bu örnek, nesne (object) olarak adlandırılır. Nesne, kalıtım yoluyla sınıftaki bütün talimatları alır, yani ne olduğunu ve geçerli durumda neler yapabileceğini az çok bilir. Nesnelerin metotları (method), yani nesnelerin yaptığı şeyler vardır, bunun dışında kendilerini tanımlayan özellikleri (property) ve yayınlamak ya da cevap vermek için kullandıkları olayları (event) vardır. Bu konuyla ilgili ayrıntıları daha sonra göreceğiz. Şu anda bunun ActionScript 2.0 ın çalışma şeklinin bir parçası olduğunu bilmemiz gerekiyor. ActionScript 2.0, BÜYÜK/küçük harflere duyarlıdır, yani BÜYÜK ve küçük harfleri kullanarak değ işkenler (variable), fonksiyonlar (function) ve örnek isimleri (instance name) oluşturduğunuzda bu öğelere ait tüm referansların tanınabilmesi için referanslarda BÜYÜK/küçük harf yazımına kesin olarak uyulması gerekir. Ayrıca ActionScript tarafından kullanılan metotlar, özellikler ve olayların da kesin olarak bu yazım şekline uyması gerekir. geturl() metodu geturl() ile aynı şey değildir. Eğer R ve L harflerini büyük yazmazsanız, Flash neden bahsettiğinizi ve ne yapmaya çalıştığınızı anlamayacaktır. BÜYÜK/küçük harf yazımına duyarlıdır. ActionScript 2.0 ın belirtmek istediğimiz son özelliği, genişletilebilir (extensible) olmasıdır. Yani ona, ilk geldiğinde yapamadığı şeyleri yaptırabilirsiniz. Flash 8 Basic sadece belirli sınıflar ve becerilerle gelir. Örneğin çalışanlarla ilgili karmaşık veri yönetimi gibi gösterişli işlevlerin bu işlerden anlayan zeki geliştiriciler tarafından yaratılması gerekir. Geliştirici, Flash ta verileri istenen şekilde yönetebilmek amacıyla kendi sınıflarını, nesnelerini, metotlarını ve olaylarını yaratabilir. Bu, ActionScript 2.0 a her şeyi yaptırabileceğiniz anlamına gelmez, ama pek çok şey yaptırmak mümkündür. Ayrıca geliştiriciler kendi ActionScript kodlarını Extension Manager la kurulabilen davranışlara, bileşenlere ya da menü komutlarına dönüştürebilirler (Extension Manager la ilgili ayrıntılı bilgi için, Ek A bölümüne bakınız). Sınıfların, metotların, özelliklerin ve özel nesnelerin oluşturulması bu kitabın kapsamı dışındadır, ama burada bu kavramlara yer vereceğiz. Kendi sınıflarınızı, metotlarınızı ve özelliklerinizi nasıl oluşturacağınızı öğrenmek için Macromedia Flash 8 ActionScript: Training from the Source kitabını inceleyebilirsiniz. Sınıflar, Metotlar ve Özellikler ActionScript 2.0 ve Flash 8 Basic sınıfları, nesneler ve nesne örneklerinin kullanıldığı işlevsel bir model üzerine kurulmuştur. Bu modelin çalışma şekliyle ilgili her şeyi bilmeniz gerekmez; ancak temelini oluşturan kavramları bilirseniz bunun faydasını görürsünüz, çünkü bunlar Flash 8 ve ActionScript 242 DERS 9

262 2.0 ın nasıl çalıştığıyla (ve sizin için nasıl çalıştığıyla) ilgili olarak hemen her noktaya değinmektedir. Ayrıca, bu konu hakkında ne kadar fazla bilgi sahibi olursanız, uygulamanızı yönetmeniz de o kadar kolay olur. Öncelikle bir sınıfın (class) ne olduğunu anlamanız gerekir. Sınıfı, ortak becerileri ve özellikleri tanımlayan script lerden oluşan bir koleksiyondur. Sınıflar önemli bileşenlerdir, çünkü geliştiricileri, aynı ya da farklı uygulamalarda aynı işi yaparken ihtiyaç duydukları kod satırlarını her seferinde tekrar tekrar oluşturma mecburiyetinden kurtarırlar. Sınıfları işlevsellik için kullanılan birer şablon olarak düşünebilirsiniz ve programcılıkta, Flash ta ve gerçek hayatta her şey aslında bir tür sınıfa aittir diyebiliriz. Örneğin, diyelim ki köpekleri çok seviyorsunuz ve bir gün yavru bir köpek aldınız. Yavru köpekler Köpek sınıfına aittir ve Köpek sınıfı, dünya üzerinde bulunan ve çiçek tarhlarına zarar veren her köpeğin ana şablonudur. Bildiğiniz gibi sonuçta köpek, köpektir, çünkü ister küçük, ister büyük olsun, bütün köpekler benzer özelliklere sahiptir ve belirli bir şekilde davranır. Bir üretim çiftliğinden ya da evcil hayvan satıcısından bir köpek aldığınızda köpek sınıfının bir örneğini yaratmış olur (her ne kadar teknik olarak yavru köpek örneğini anne köpek doğurmuş olsa da) ve böylece bir köpek nesnesine sahip olursunuz. Yavru köpek, köpek şablonundan ya da köpek sınıfından oluşturulur ve kalıtım yoluyla köpeklerin doğumdan itibaren sahip oldukları bütün metotları ve özellikleri alır. Sizse sadece coşku dolu bir arkadaş edindiğinizi düşünürsünüz. Bütün köpekler ortak metotlara sahiptir, örneğin havlamak(), salyaakitmak() ve kosmak() gibi. Metotlar, belirli bir nesnenin yaptığı şeylerdir. Köpekler ayrıca benzer özelliklere sahiptir: tuycinsi, boy, ağırlık, cinsiyet, isim, vs. Özellikler, bir nesnenin fiziksel yapısını tanımlar. Bir köpeği eğittiğinizde ona yeni metotlar eklersiniz, köpeğin bakımını yaptığınızda ise onun özelliklerini değiştirirsiniz. Bununla birlikte, metotları çağırmak ve özellikleri değiştirmek, köpeğin temel yapısında bir değişiklik oluşturmaz. Dolayısıyla, ona ne yaparsanız yapın, ne öğretirseniz öğretin, köpek yine köpektir ve hep öyle kalacaktır. Anlaşıldı mı? Güzel. Çünkü köpek gibi bir nesnenin temel yapısını değiştirmeye başlamak istiyorsanız, kendi sınıflarınızı yaratmanız gerekecektir. Neyse ki Flash ta bu kadar ileri gitmeniz gerekmeyecek, çünkü Flash taki mevcut sınıflar sizin gerçekleştirmek istediğiniz işlemler için genelde yeterlidir. Kendi sınıflarınızı yaratmak istiyorsanız, bunların, uzantısı.as olan ve yayınladığınızda SWF dosyasına derlenen harici dosyalarda oluşturulması gerekir. Bu kitaptaki alıştırmalarda herhangi bir sınıf yaratmayacaksınız, ama ActionScript in içinde mevcut olan yerle şik sınıflar ı kullanacaksınız. Bu sınıflar da Flash ın install dizininde harici olarak.as dosyalarında depolanmaktadır. Bunları inceleyebilirsiniz ama sakın değiş iklik yapmayın. ActionScript 2.0, Math sınıfı, Button sınıfı ve Date sınıfı gibi bir dizi yerleşik sınıf içerir. Daha önce MovieClip sınıfını ve onun bazı metotlarını ve özelliklerini (stop ve gotoandplay metotları gibi) kullanmıştınız. MovieClip sınıfı, değiştirebileceğiniz ya da belirli bir örnek için yeniden ACTIONSCRIPT İN TEMELLERİ 243

263 ayarlayabileceğiniz özelliklere de (_visible, _width ve _height gibi) sahiptir. Aslında Stage iniz de MovieClip sınıfının bir örneğidir. Yerleşik bir sınıfın nasıl kullanıldığını kısaca inceleyeceğiz. Flash la gelen MovieClip, Button, TextField ve Component bileşen sınıflarını temel alan nesneler görsel olarak yaratılabilir (diğer bir deyişle bunların örnekleri oluşturulabilir). Ancak birçok Flash sınıfının örneğinin (LoadVars ve Sound gibi) ActionScript kullanılarak oluşturulması gerekir. ActionScript kullanarak bir sınıfın yeni bir örneğini yarattığınızda aslında yapılandırıcı fonksiyon (constructor function) adı verilen bir öğeyi çağırırsınız. Yapılandırıcı fonksiyon, bir sınıfın içinde tanımlanan ve nesneyi oluşturarak belleğe gönderen özel bir fonksiyon türüdür. Bunu bir otomobil fabrikasındaki montaj hattına benzetebiliriz. ActionScript kullanarak yeni bir nesne örneği yaratmak için aşağıdaki gibi bir satır yazabilirsiniz. var rockinsound:sound = new Sound(); Bu örnekte Sound sınıfının yeni bir örneğini yaratarak (ya da yapılandırarak) ona rockinsound örnek ismini veriyorsunuz. Böylece gerektiğinde ona göndermede bulunabilirsiniz. Sound örneği bellekte saklanır, dolayısıyla onu kullanmak için ismiyle çağırmanız gerekir. Çocuğunuzu yuvadan almaya gittiğinizde binaya girip Haydi çocuklar, gidiyoruz! diye bağırmazsınız, çünkü bir sürü çocuk peşinize takılabilir, ya da birkaç çocuk gelebilir veya hiçbir çocuk gelmeyebilir. Ele avuca sığmayan çocuğunuzu çağırmak için Zeynep, haydi! diye bağırmanız gerekir. Çocukları yuvadan alırken ortaya çıkan beklenmedik bir sonuç, aslında kötü bir sonuçtur ve bunu ActionScript e uyarladığımızda benzer bir durum ActionScript te de kötüdür. Haydi Sesi nin Flash için bir anlamı yoktur. Dolayısıyla Sound sınıfı ı örneğini adlandırmanız, sonra da bir şey yapmasını istediğinizde onu ismiyle çağırmanız gerekir. Stage deki bir movie clip in kütüphanede (Library) yer alan bir movie clip sembolünün örneği ya da kopyası olması gibi, rockinsound da Sound sınıfının sadece bellekte bulunan ve sizden alacağı komutları bekleyen bir örneğidir. Sound sınıfı, yerleşik sınıfa bir örnektir. Yerleşik sınıfı demek, Flash la birlikte gelen, bilgisayarınıza yüklenen ve ActionScript diliyle yazılmış olan bir sınıf demektir. Sınıf ayrıca, sınıfın kendisini oluşturan önceden tanımlanmış metotlara ve özelliklere sahiptir. Macromedia a anın programcıları tarafından üretildikleri için bunlar için endişelenmeniz gerekmez. Metotlar ve Özellikler Sınıflar, önceki bölümde gördüğünüz gibi, çeşitli metot ve özelliklerden oluşur demiştik. Metotlar (method), bir nesnenin sınıfıyla (Sound sınıfı gibi) ilişkili fonksiyonlardır ve nesnelerle belirli işlemler yapmak için kullanılırlar. ActionScript 2.0 dilinde, daha önce tanımını öğrendiğiniz yerleşik sınıflara ait yerleşik metotlar mevcuttur. Örneğin setrgb(), Color sınıfına ait bir yerleşik metottur. Bu metot, belirli bir SWF dosyasında yer alan bir örneğin on altı tabanlı renk değerini ayarlar. Özellikler (property) de, ActionScript 2.0 ve Flash 8 Basic le birlikte gelen sınıflarda yerleşik olarak bulunan öğelerdir. Özellikler, bir örneğin fiziksel yapısını tanımlamak için kullanılan 244 DERS 9

264 değişkenler ya da veriler gibidir ve daha çok SWF dosyalarınızda kullandığınız değişkenlere benzerler. Örneğin 6. Ders te aşağıdakine benzer bir kod parçası kullanmıştınız: mymovieclip_mc._visible = true; Bu kodda, _visible, bir örneğin görünürlük durumunu tanımlayan bir özelliktir (görünüyorsa true, görünmüyorsa false değerini alır). Koddan da anlayacağınız gibi görünürlük (visibility) özelliği, Stage deki mymovieclip_mc örneği için kullanılmaktadır. Olayları ve olay iş leyicilerini bu derste daha ileride Olayları ve İşleyicileri Kullanmak başlığı altında inceleyeceğiz. Kesin Tip Belirleme Yönteminin Kullanılması Kesin tip belirleme, bir değişken oluşturulurken, Flash a bunun veri tipinin ne olduğunu, ne tür bir nesne olduğunu, yerleşik bir sınıfı mı, yoksa özel sınıfları mı temel aldığını açık bir şekilde bildirmek anlamına gelir. Yeni bir değişken oluşturduğunuzda (ya da bildirdiğinizde) ve bunu belirli bir sınıf (veri tipi) olarak tanımladığınızda, o sınıfın kuralları uygulanır. Flash, bu değişkende sadece bu türden bir verinin depolanmasını bekler. Örneğin String sınıfı için değişkende bir dizenin depolanmasını bekler. Kesin tip belirleme özelliğini, kendi hatalarınızdan korunmak için kullanırsınız. Sadece karakter içerebilen bir öğeye yanlışlıkla sayı bilgisi göndermeye çalıştığınızda uygulamayı dağıtmadan çok önce bir hata mesajıyla karşılaşırsınız. Uygulamayı çalışır hale getirmeden önce sorunları gidermeniz gerekir. Örneğin aşağıdaki kodda olduğu gibi yeni bir değişken bildirdiğinizde Flash a sadece karakter depolayan benimdizem adında yeni bir değişken yaratmasını söylemiş olursunuz. var benimdizem:string; Değişkeni bildirirken, Flash a sadece hangi veri tipinin kullanılacağını söylemeniz gerekir. Yani, bildirdiğiniz her değişken için kesin tip belirleme işlemini sadece başlangıçta yapmanız gerekir. Kesin tip belirleme yöntemiyle oluşturulan bir değişkende, aşağıda görüldüğü gibi farklı bir veri tipi depolamaya çalışırsanız, bu belgeyi yayınladığınızda bir hata ortaya çıkar. var benimdizem:string; benimdizem = 15; Bir hatanın ortaya çıkmasının nedeni, bu değişkende bir sayı depolamaya çalışmanız ve bunun Flash tarafından kabul edilmemesidir, çünkü Flash a bu değişkeni sadece karakterlerle kullanacağınızı söylemiştiniz. Bu, garajını kiraladığınız adamı, burada timsah beslemek konusunda ikna etmeye çalışmaya benzer. Yukarıdaki örnekte Flash, karakterlerden oluşan bir dize bekler, sayı değil. Bu yüzden buradaki sorunu gidermek için aşağıdaki kodu kullanabilirsiniz. benimdizem = 15 ; 15 sayısı artık 1 ve 5 karakterlerinden oluşmaktadır, dolayısıyla burada bir hata ortaya çıkmaz. ACTIONSCRIPT İN TEMELLERİ 245

265 Actions Panelinde Kod İpuçlarını Kullanmak Kod ipuçları (Code hints), Actions panelinde bulunan ve kendi ActionScript kodlarınızı yazarken kullanabileceğiniz bir özelliktir. Kod ipuçları, script yazarken zaman kazanmanızda yardımcı olur ve hatta script lerinizin çalışmasını engelleyebilecek yazım yanlışlarını ve hataları azaltmanızı sağlar. Kod ipuçları, bir metin alanına bir şey yazarken hangi özelliği kullanmanızın gerektiğini unuttuğunuzda çok işe yarayabilir. Bu açılır menüyü etkinleştirmenin iki yolu vardır: Değişkeni kesin tip belirleyerek tanımlamak ya da değişkene sonek ilave etmek. Kitap boyunca sonek ilave etmeyle ilgili çeşitli örnekler görmüştük. Kod ipuçlarının ekranda belirmesini sağlamak için değişkenlerinizi, nesnelerinizi ve sembol örneklerinizi belirli şekillerde adlandırmanız ya da nesnelerinizi tip belirleyerek tanımlamanız gerekir. Bir değişken ismi oluşturduğunuzda, bu, bir oyunda puan olarak kullanılan bir sayıdan XML verilerine kadar herhangi bir şey için kullanılan bir değişken ismidir. Kesin tip belirleme ya da sonek yazma yöntemini kullandığınızda, Flash a ilgili değişkenin ait olduğu veri tipini (sınıf) söylemiş olursunuz. Değişkenin veri tipini belirtirseniz, kod ipuçları ilgili sınıf için doğru metotları ve özellikleri gösterecektir. Tip belirleme konusunu bu derste daha önce görmüştünüz ve önceki şekilde, script te tipi belirlemeyle tanımlanan bir nesneye göndermede bulunulduğunda kod ipuçlarının belirdiği bir örnek verilmiştir. Bir değişkenin tipini tanımlamanın ikinci yolu sonek (suffix) kullanmaktır. Bu işlem, tip belirleme kadar esnek değildir, çünkü soneklerin ActionScript nesnelerine (sınıflar) göndermede bulunması gerekir (Sound sınıfı ya da MoviClip sınıfı gibi). FLA dosyanızdaki nesnelerin örnek isimlerinde sonek kullandığınızda, Flash bu örnekle ilgili doğru kod ipuçlarını görüntüler. Soneklere örnek 246 DERS 9

266 olarak _mc (MovieClip), _btn (Button), _txt (TextField), _str (String) ya da _lv yi (LoadVars) gösterebiliriz. Her sonek kod ipuçlarının görüntülenmesini sağlamasa da (_gr de olduğu gibi, çünkü grafikler için ActionScript kodu yazamazsınız), bu adlandırma standardına uymanın önemli faydaları vardır. FLA dosyasının kütüphanesindeki her sembolün veri tipini kolayca hatırlamanızı sağlaması gibi. Aşağıda, değişkenlerde sonek kullanımıyla ilgili bir örnek görüyorsunuz. var homecontent_lv = new LoadVars(); homecontent_lv.load( home.txt ); ActionScript teki homecontent_lv değişkenini her kullanışınızda lv soneki ilave edilecektir, çünkü bu sonek değişken isminin bir parçasıdır. Her veri tipinin bir soneki olmayabilir (örneğin Object in bir soneki yoktur). Bu yüzden, farklı değişkenlerinizin her birinde kod ipucu özelliğinden faydalanabilmek için, gerektiğinde bu bölümde anlatılan diğer yöntemleri de kullanmanız gerekebilir. Flash ı n kod ipuçlarını görüntülemesini sağlamak için kullanabileceğiniz üçüncü bir yöntem daha vardır. Bu yöntemde veri tipini (değişkenin içerdiği verinin türü, String, Number, Movie Clip, LoadVars, vs.) ve değişken adını bir açıklamanın içine yazarsınız. Aşağıdaki örneği inceleyin. // LoadVars homecontent; homecontent.load( home.txt ); Açıklama (comment), ActionScript kodunun içine yazılan bir mesajdır. Açıklamaları, genellikle (kendinize ya da başkalarına) kodun o noktada ne işe yaradığını belirtmek ya da yapılması gereken işlemleri hatırlatmak için kullanırsınız. Açıklamalar herhangi bir kodu çalıştırmaz. Ancak bir açıklamayı bu şekilde kullandığınızda, aslında ActionScript nesnesini (burada bir LoadVars nesnesi) ACTIONSCRIPT İN TEMELLERİ 247

267 tip belirleme yöntemiyle tanımlamış olursunuz. Bu yüzden, siz değişken adından sonra nokta işaretini girer girmez Actions panelinde ilgili nesneye ait (yukarıdaki örnekte LoadVars) metotların ve özelliklerin yer aldığı bir liste görüntülenir. Hangi yöntemi kullanacağınız tamamen size kalmıştır. Hangisini kullanacağınıza karar veremiyorsanız, aşağıda gördüğünüz gibi bu yöntemlerin bir bileşimini de kullanabilirsiniz. var homecontent_lv:loadvars = new LoadVars(); Kodu bu şekilde yazmak, sonek kullanılması dolayısıyla değişkenin ne olduğunu hatırlamanızı sağlayacağı için avantajlıdır. Bu teknik, ayrıca kesin tip belirleme yöntemini de içerdiği için, değişkeni kazara Number ya da String gibi yanlış bir veri tipine ayarlamaya çalışmanızı da önler. Fonksiyonları ve Koşullu Deyimleri Kullanmak Fonksiyonlar (function) tipik olarak bir FLA dosyasında tekrar tekrar kullanılan kod bloklarıdır. Fonksiyonlar, yaptıkları işi tamamladıktan sonra bir değer döndürebilir ve ayrıca çalıştırılma şekillerini değiştirmek üzere fonksiyonlara parametre aktarılabilir. Bağı msız değ işken (argument) olarak da adlandırılan parametrelerle, bir fonksiyona değişmeyen (statik) bir değer veya bir değişken aktarabilirsiniz. Bundan sonra, bu değer(ler) fonksiyonunuza ait kodda kullanılabilir ve yönetilebilir. Parametreler fonksiyonunuzun çalıştırılma şeklini değiştirir. Evde akşam yemeğinizi yaparken aslında siz bir fonksiyonu çalıştırırsınız. Bu bir fonksiyondur, çünkü doğduğunuzda yemek yapmayı bilmiyordunuz. Bunu ya babanızdan ya da büyükannenizden öğrenmişsinizdir. Yemek yapma fonksiyonunuzda değişiklik yapmak üzere ne, ne zaman ve ne kadar gibi parametreler kullanılabilir. Eğer kendi yemek yapma fonksiyonunuzu yazsaydınız, bu muhtemelen şöyle olurdu: lezizyemekyap=function(ne,nezaman,nekadar) { sen.hazirla(ne); FırınaKoy(neKadar); pisir=nezaman return ne } Bu örnekte lezizyemekyap, fonksiyonun adıdır. Burada ne yapacağınız yemek; nezaman, yemeği fırına koyacağınız saat ve nekadar da yemeğin fırında kalacağı sürenin miktarıdır. Bu fonksiyonu aşağıda gösterildiği şekilde çağırırsınız. Self.lezizYemekYap(tavuk, 5:00,1hr); 248 DERS 9

268 Fonksiyon çalıştırıldıktan sonra tavuk sonucunu döndürür. Yani tavuk fırından çıkarılır. Mmm, tavuk, nefis. Bileşenlerin de parametre aldığına dikkat etmiş sinizdir. Yani Properties denetçisini ya da Component Inspector panelini kullanarak girdiğiniz ya da ayarladığınız parametre değerleri, aslında ActionScript te bileşenler tarafından kullanılan belirli değerleri ayarlamaktadır. Her bileşendeki ActionScript kodu, Flash tasarım ortamında ayarladığınız değerleri temel alarak ne yapması gerektiğini anlar. Fonksiyonlar, Flash ve ActionScript genelinde kullanılmaktadır. Birçok fonksiyon yerleşik tiptedir, ama ihtiyaçlarınıza göre kendi fonksiyonlarınızı da oluşturabilirsiniz. Daha önce basit stop fonksiyonundan LoadVars sınıfının OnLoad metoduna kadar çeşitli fonksiyon örnekleri görmüştünüz. Aynı script leri tekrar tekrar yazıyorsanız, benzer kod bloklarını tek bir fonksiyona dönüştürerek ve değişen öğeleri parametrelerle tanımlayarak ActionScript kodlarınızı daha rahat yönetebilirsiniz. Koşullu deyim (conditional statement), fonksiyondan farklıdır ve belirli bir koşulun değeri true olursa çalışır. Koşullar bir Boolean değerini döndürür (true ya da false). Elde edilen değer, kodun çalıştırılıp çalıştırılmayacağını ya da bazen hangi kodun çalıştırılacağını belirler. Aşağıdaki örnekte bitter çikolatanın sağlığa yararlı olup olmadığını belirlemek için bir koşullu deyim kullanılmıştır. Eğer doktor sağlıklı olduğunu söylerse bitter çikolatayı yiyebilirsiniz. Aksi takdirde çikolata yiyemezsiniz. if (bittercikolata == saglikli) { //eğer bu deyim doğruysa, şunu yap self.ye(bittercikolata); } else { //eğer bitter çikolata sağlıklı değilse, şunu yap self.agla(); } Gördüğünüz gibi koşullu mantığı normal yaşamınızda da, örneğin markete alışverişe gittiğinizde bitter çikolatayla sağlığınız açısından daha faydalı bir şey arasında seçim yaparken, kullanıyorsunuz. Normal hayatta olduğu gibi ActionScript te de önce durumu değerlendiriyor, sonra da işlemi gerçekleştiriyorsunuz. Yukarıdaki kodda kullanılan çift eşittir iş areti, iki değeri karşı laştırdığınızı gösterir. Daha doğrusu bu şekilde bir şeyin başka bir şeye eşit olup olmadığını görürsünüz. Bu iş lemi eşleştirme yapmak olarak düşünün. ACTIONSCRIPT İN TEMELLERİ 249

269 Faaliyet Alanı Kodlarda çeşitli girintilerin kullanıldığına dikkat etmiş sinizdir. Bunun yapılmasının tek amacı, kodun rahat okunmasını sağlamaktır. Girintili yazılan kodlar bazen hata ayıklamanızda da faydalı olur. Çünkü bu şekilde, kapatmayı unuttuğunuz bir parantezin olup olmadığın kolayca görebilirsiniz. Girintiler, aynı zamanda deyimlerle koşullu deyimleri birbirinden ayırmanızı sağlar. ActionScript kodlarınıza doğru bir şekilde girinti uygulamak isterseniz, Actions panelindeki Auto Format düğmesini kullanabilirsiniz. 6. Derste ActionScript i oluşturan bazı temel kavramları öğrenmiştiniz (değişkenler, anahtar sözcükler ve veri tipleri gibi). Ayrıca noktalı sözdiziminin çalışma şekli ve ActionScript satırları oluştururken bunun kullanılışı hakkında da biraz bilgi edinmiştiniz. Şimdi ActionScript in bir FLA dosyasında nerelerde bulunduğunu göreceğiz. ActionScript le ilgili en önemli ve bazen de en kafa karıştırıcı konulardan biri, değişken faaliyet alanının çalışma şekliyle, bunun kod yazarken ve Flash dosyalarıyla çalışırken kullanılışıdır. Faaliyet alanı (scope), FLA dosyanızın bir değişkene başvuruda bulunabileceğiniz alanıdır. Yani bir değişken bir fonksiyonun içinde ya da bir Timeline gibi belirli bir yerde mevcutsa, faaliyet alanı da oradadır. Faaliyet alanı kavramının nasıl çalıştığını (ve değişkenlerin nerede bulunduğunu) anlamak için, biraz uygulama yapmak, sabır göstermek ve bir miktar deneyim sahibi olmak gerekir. Kendi projelerinizde farklı senaryoları test ederek, faaliyet alanı kavramının bir Flash dosyasını nasıl etkilediğini kolayca anlayabilirsiniz. Faaliyet alanı konusunu kavramak ve kodların üzerindeki etkisini anlamak için biraz uygulama yapmak gerekebilir. Bu yüzden, bu konu başlangıçta karmaşık görünürse endişelenmeyin. 6. Ders te değişkenlerin bir veri parçasını içeren birer kaba benzediğini görmüş ve değişkenleri nasıl adlandıracağınızı öğrenmiştiniz. Unutulmaması gereken en önemli kurallardan biri, iki değişkenin aynı isme sahip olamayacağıdır. Ancak faaliyet alanları farklı olan değişkenler aynı isme sahip olabilirler. Bu da, kodun SWF dosyalarının farklı alanlarında nasıl barındığını gösterir. Aşağıda görüldüğü gibi, Flash ta üç farklı faaliyet alanı vardır. Yerel değişkenler: Bu değişkenler sadece bir fonksiyonun çağrılması durumunda kullanılabilir. Yerel değişkenler, bir fonksiyonun iki kıvrımlı parantezinin arasında yer alan değişkenlerdir (bunu, daha önceki bir uygulamada görmüştük). Bu fonksiyonun dışında (yani bu fonksiyon çağrılmadığında), bu değişkenler mevcut değildir. Yerel değişkenler, var anahtar sözcüğü kullanılarak bir fonksiyonun içinde tanımlanırlar ve bu fonksiyon işini bitirerek devreden çıktığında, içindeki değişkenler ortadan kalkar. Yani bir fonksiyonun içinde kullandığınız değişkenleri, kodunuzda ya da Timeline da başka bir yerde kullanamazsınız. Bu, özellikle ActionScript kodunuzun başka bölümlerinde aynı isme sahip başka değişkenler varsa, bunlarla çakışma olmamasını sağladığı için bir açıdan iyi bir özelliktir. Diğer 250 DERS 9

270 avantajı, Flash ın daha az kaynak kullanmasını sağlamasıdır. Çünkü Flash, uygulamanızda artık kullanımda olmayan çok sayıda değişkeni takip etmek zorunda kalmaz. Yerel değişkenler, sadece fonksiyon çalışırken ortaya çıkar ve sonra yok olurlar. Aşağıda bir yerel değişken örneğini görüyorsunuz. function myvariable() { } var mynum:number; //mynum değişkeni burada //mynum değişkeni artık yok. trace(mynum); //tanımsız mynum değişkeni için fonksiyonun dışında trace deyimini çalıştırırsanız, tanımsız şeklinde bir sonuç döndürülür, çünkü bu değişken sadece myvariable fonksiyonunun içinde mevcuttur. trace deyiminin, bir belgeyi test ederken Output paneline mesaj göndermek ve kodları test etmek için kullanıldığını hatırlayın. Aynı değiş ken isimlerini fonksiyonlarda ve diğer faaliyet alanlarında isim çakışmaları olmadan kullanmak mümkündür, ancak bu her zaman tavsiye edilmez. Aynı isimleri kullanmaktan kaçınmanız iyi olacaktır. Çünkü bir FLA dosyasında farklı faaliyet alanlarında aynı isme sahip değiş kenler kullandığınızda, ileride kodu düzenlerken kafanız karışabilir. Timeline değişkenleri: Bu değişkenler sadece aynı Timeline e eda d bulunan script ler tarafından kullanılabilir. SWF dosyasında birden fazla Timeline olabileceğini unutmayın, çünkü bir movie clip ya da bileşende farklı bir seviyede bir Timeline da bulunabilir. Seviyelerin tanımını sıradaki konuda göreceğiz. SWF dosyanızda birden fazla Timeline varsa, bu alanların her birinde farklı Timeline değişkenleri olabilir ve bunlar herhangi bir çakışma olmadan aynı ismi kullanabilir. Bir değişken bir Timeline e eda d tanımlandığında, o değişken tanımlandığı noktadan sonraki karelerde kullanılabilir. Örneğin, aşağıdaki kod 10 numaralı kareye yerleştirilirse, ana Timeline e eda d numusers adında bir değişken oluşturur. Bu değişken Timeline e eda d 10 numaral ı kareden sonra var olur; 10 numaralı kare oynatılmadan önce, bu değişken SWF dosyasında kullanılamaz. var numusers:number = 5; Global değişkenler: Bu değişkenler SWF dosyasının içindeki bütün Timeline e larda, faaliyet alanlarında ve fonksiyonlarda kullanılabilir. Bu yüzden, bir global değişken bildirebilir ve sonra ana SWF dosyasına yüklenen diğer SWF dosyalarında ve ana SWF dosyası içinde bulunan değişkenleri, ActionScript kodunda ya da dosya yapısında herhangi bir değişiklik yapmadan kullanabilirsiniz. Global değişkenlerin sağladığı faaliyet alanı ilk iki faaliyet alanından çok farklı değildir. Çünkü bu ACTIONSCRIPT İN TEMELLERİ 251

271 değişkenler var anahtar sözcüğü ile tanımlanmaz ve aşağıdaki örnekte olduğu gibi önlerine _global anahtar sözcüğü gelir. _global.numusers = 5; Global değişkenleri tanımlarken var anahtar sözcüğünü kullanamadığınız için, global değişkenlerde kesin tip belirleme yöntemini kullanamazsınız. Global değişkenlerde kod ipucu özelliğinden faydalanmak isterseniz, sonek yöntemini (değişkenin sonuna _mc ya da _lv eklemek) ya da açıklama yöntemini kullanmanız gerekebilir. _root, _parent, this ve Seviyeler SWF dosyanızdaki farklı bir faaliyet alanında veya Timeline da bulunan bir değişkeni hedeflemeniz gerekebilir. Bir movie clip ya da bir bileşen içinde yer alan bir kod yazarsanız ve ana Timeline içindeki bir düğme gibi bir öğeye erişmek isterseniz, diğer Timeline a erişmek için _parent anahtar sözcüğünü kullanmanız gerekir. Bu faaliyet alanlarını, SWF dosyasına ilgili değişkenlere erişmek üzere nereye gitmesinin gerektiğini bildirmek için kullanırsınız. this anahtar sözcüğünü kullandığınızda, geçerli faaliyet alanındaki geçerli nesneye başvuruda bulunursunuz. Örneğin bir movie clip in içindeyken this anahtar sözcüğünü kullandığınızda, movie clip e kendisine bakmasını söylemiş olursunuz. _parent anahtar sözcüğü, geçerli nesnenin ebeveyn öğesini gösterir. Mesela Stage de bir movie clip varsa ve bu movie clip te _parent anahtar sözcüğü kullanılırsa, movie clip in üzerinde bulunduğu Timeline a göndermede bulunmuş olursunuz. SWF dosyalarınızın tamamındaki nesnelere başvuruda bulunmak için, this ve _parent anahtar sözcüklerini birlikte kullanabilirsiniz. Başka bir öğenin içinde bulunan bir movie clip teyken, diğer movie clip örneklerini ya da bileşen değerlerini kontrol etmek üzere SWF dosyasının hiyerarşisinde gezinmek için, aşağıdakine benzer bir kod satırından faydalanabilirsiniz. this._parent._parent.othermovieclip_mc.stop(); this anahtar sözcüğünün kullanımı da anlaşılması zor olabilecek konulardandır. Bağlama göre, this anahtar sözcüğü farklı şeyleri belirtebilir. Bir movie clip örneğinin içinde kullanırsanız, this anahtar sözcüğü bu movie clip in Timeline ı e na göndermede bulunur. Bir düğme fonksiyonunda kullanırsanız, this anahtar sözcüğü düğmenin kendisini değil de düğme örneğini içeren Timeline ı e belirtir. Doğrudan bir movie clip pe e iliştirilmiş bir onclipevent() işleyicisiyle kullanıldığında ise, this anahtar sözcüğü movie clip in Timeline ı e nı belirtir. Sonraki sayfada yer alan kodu inceleyin. Aşağıdaki gibi bir kodu ana Timeline e a yerleştirirseniz, bu kod çok farklı şeyler yapar. Diyelim ki çalışan bir SWF dosyanız var ve Stage ede, d yine bir içeriği oynatmakta olan myclip adında bir movie clip iniz var. ActionScript aracılığıyla ıy onrelease 252 DERS 9

272 olay işleyicisini ekleyerek, movie clip plere birer düğme gibi davranabilirsiniz (bunu daha önce oluşturduğunuz movie clip düğmelerine uygulayacaksınız). myclip_mc.onrelease = function() { }; this.stop(); Bu ActionScript kodu, eğer oynatılıyorsa ıy myclip_mc örneğinin kendisini durdurur. Fonksiyonun içindeki kod, this anahtar sözcüğünü kullanarak movie clip in Timeline ı e nı hedefler. Bunun yerine, aşağıdaki ActionScript kodunu kullandığınızda bu kod movie clip in Timeline ı e yerine ana Timeline ı e durdurur. myclip_mc.onrelease = function(){ }; stop(); Movie clip bir düğme gibi değerlendirilir ve düğmeler içinde bulundukları Timeline ı hedeflerler, düğmenin kendi Timeline ını değil. Bu da tabii ki this anahtar sözcüğünü kullanmamanız durumunda geçerlidir. Flash kullanırken ve başkalarının yazdığı ActionScript kodlarını incelerken, _root anahtar sözcüğünün sıkça kullanıldığını göreceksiniz. _root kullanıldığında, bu ana Timeline ın hedeflendiği anlamına gelir. Bu, sabit diskinizin kök dizinine (örneğin C:) ya da bir Web sitesinin kök klasörüne gitmeye benzer. Buna genelde mutlak başvuru denir. Mutlak başvuru tekniğini Web sitelerinde olduğu gibi (mutlak başvuru kullandığınızda, sitenizi başka bir etki alanına aktarmanız zor olacaktır), Flash hta kullanmak da genelde en iyi yaklaşım değildir, çünkü ActionScript kodlarınızı başka bir yere taşımanız zor olacaktır. Bu, SWF dosyalarını başka SWF dosyalarına yüklerken de sorun yaratabilir. _root kullandığınızda ortaya çıkan sorunların sebebi açıktır. Bir FLA dosyasında _root a başvuruda bulunduğunuzda, belge yayınlandığında SWF dosyasının ana Timeline ına başvurmuş olursunuz. Fakat bu SWF dosyasını farklı bir SWF dosyasına yüklediğinizde root, diğerini kendisine yüklediğiniz SWF dosyası olur. Bu durumu, lockroot özelliğini kullanarak kontrol edebilirsiniz. lockroot, ilgili movie clip e ya da SWF dosyasına, root başvurularının o SWF dosyasından ya da movie clip ten daha ileriye gitmemesi gerektiğini söyler. Bu durumda movie clip lere ve SWF dosyalarına sanki ana belge Timeline ıymış gibi davranmalarını söylersiniz. lockroot, Patron sensin n diyen bir özelliktir ve çok faydalıdır. Bu özellik true ya da false değeri alır ve aslında bu konu kitabın kapsamı dışındadır. Lockroot hakkında daha fazla bilgi için, Kaynağından Eğitim (Training from the Source) serisinin diğer kitaplarına başvurabilirsiniz. Oluşturduğunuz uygulamada, Stage edeki d movie clip lerin içinde yuvalanmış olarak kodlar ya da kodun hedeflediği elemanlar bulunur. Eğer bu movie clip pler boşsa, bunların herhangi ACTIONSCRIPT İN TEMELLERİ 253

273 birine bir SWF dosyası yükleyebilmeniz gerekir ve bu SWF dosyası ana Timeline e edaki d nesneleri hedefleyebilir. Eğer movie clip pe yüklenen SWF dosyasının içinde kodunuz varsa, _parent anahtar sözcüğünü kullanarak ana Timeline ı e ya da ana Timeline e edaki d nesneleri hedefleyebilirsiniz. SWF dosyalarını uygulamaya yüklemenin diğer yolu, seviyeleri kullanmaktır. Seviyeler (level) Flash Player a ait öğelerdir ve döşeme tahtaları görünmeyen birer zemin gibidirler. Bir seviyeye yüklenen ilk SWF dosyası yapının geri kalanının temelini oluşturur ve 0 seviyesine yüklenir. Bu dosya, HTML sayfasındaki Flash Player nesnesinin genişliğini ve yüksekliğini, arka plan rengini ve kare hızını belirler. Buradan itibaren diğer SWF dosyalarını diğer seviyelere yükleyebilirsiniz; bu SWF dosyaları, ilk SWF dosyası tarafından belirlenen arka plan rengini ve kare hızını kalıtım yoluyla alır ve bunların sol üst köşeleri ilk SWF dosyasının sol üst köşesiyle hizalanır. SWF dosyaları binalardaki katlar, ya da baklavanın katları gibi üst üste yığılır. Flash Player a ilk yüklenecek belgenin seviyesi _level0 ile gösterilir. Seviyeler buradan sonra _ level1 dan d başlayarak çok büy ük bir sayıya (kitabın yazarının duyduğuna göre 2 milyonun üstünde bir sayı) kadar üst üste yığılabilir. SWF dosyalarını seviyelere sırayla yüklemeniz gerekmez. İlk SWF dosyasını Flash Player a, gezinti çubuğunu 150 numaralı seviyeye (_level150) ve tüm içeriği bu ikisinin arasında bir yere yükleyebilirsiniz; dolayısıyla ıy gezinti çubuğu her zaman diğerlerinin üstünde olur. Bunların hepsi çok görecelidir. SWF dosyasını _level0 seviyesine yükleyebilir ve ana Timeline ı e n içeriğiyle değiştirebilirsiniz. Bu, orijinal clip in uygulamanın tamamında ihtiyacınız olan değişkenleri ve özellikleri içermesi durumunda pek iyi bir fikir olmayabilir. Bir SWF dosyasını bir movie clip e ya da bileşene (Loader gibi) yüklediğinizde, bu dosya yeni bir seviyeye yüklenmiş olmaz, ilgili movie clip ya da bileşen örneğinin kendisine yüklenir. Bu aşamadan sonra içerik movie clip te saklanır ve Stage deki diğer movie clip ler gibi değerlendirilir. Bu da, değiş ken benzeri verilerin daha kolay yönetilmesini sağlar. Yü klenen bir SWF dosyasının farklı seviyesindeki bir öğeyi hedeflemeniz gerekiyorsa, aşağıdaki gibi bir kod satırı kullanabilirsiniz. _level2.mymovieclip_mc.gotoandplay(3); Yüklenen bir SWF dosyasını hedefleyen bir kodu çağırmadan önce, içeriğin tamamen yüklenmiş olduğundan emin olun. Aksi takdirde, çağırdığınız kod düzgün bir şekilde çalışmayacaktır. LoadVars Sınıfı Tech Bookstore Web sitesi boyunca LoadVars sınıfını kullanmaya devam edeceksiniz. Artık sınıflar, nesneler, metotlar, özellikler, fonksiyonlar ve koşullu deyimler konularına daha fazla hâkim olduğunuza göre, bütün bu kavramları bir araya getirmek için LoadVars sınıfını bir örnek olarak incelemeye hazırsınız demektir. 254 DERS 9

274 LoadVars nesnesi, güncellenmesi kolay dinamik Web siteleri oluşturmak için kullanabileceğiniz basit bir yöntemdir. LoadVars, harici bir metin dosyasında tanımlanan değişkenleri Flash a anında yükleyebilir. Daha sonra bu değişkenler, veri yüklemek için kullandığınız LoadVars nesnesinin özellikleri haline gelir ve benzer şekilde ActionScript kodunuzun geri kalan kısmı boyunca referans olarak kullanılabilir. LoadVars nesnesi SWF dosyası tarayıcıda çalışırken bir metin alanından veri yüklediği için, verilerdeki her türlü değişiklik, Flash dosyasını güncellemek üzere metin dosyasının kendisinde yapılabilir. Dosyayı yeniden yayınlamak gerekmez. LoadVars nesnesini kullanmanın diğer bir avantajı da, sunucu tarafındaki dillerden birini (ColdFusion, PHP, ASP ya da Java gibi) kullanırken, sunucu tarafındaki dilin bir veritabanını sorgulayarak en yeni makaleleri daha sonra bir SWF dosyası tarafından yüklenecek bir metin dosyasına yazmasının mümkün olmasıdır. Flash ve LoadVars nesnesini üç farklı şekilde kullanabilirsiniz: send, sendandload ve load. send, sadece verileri bir sunucuya gönderir. Veriler, burada sunucu tarafındaki script ler tarafından işlenebilir ve bir veritabanına girilebilir, bir XML belgesine eklenebilir, e-posta mesajı olarak gönderilebilir (ya da sunucu tarafındaki çözümü nasıl tasarladıysanız, ona göre kullanılabilir). sendandload, verileri sunucuya gönderir, ama aynı zamanda sunucudan gelen cevabı alarak sonucu bir LoadVars nesnesine yerleştirir. Değişkenler burada yönetilebilir ya da Flash aracılığıyla görüntülenebilir. Değişkenleri yüklemek ve kullanmak, bir ISBN numarasını sunucunuzdaki bir şablona göndermek ve sunucu tarafındaki yazılımın bir veritabanını sorgulamasını, ardından bir kitap incelemesini ya da bir kitapla ilgili bilgileri alarak sonucu bir SWF dosyasında görüntülenmek üzere Flash a göndermesini istiyorsanız, TechBookstore sitesi için faydalı olabilir. Buradaki son metot load dur. Tech Bookstore sitesinde daha çok bu metodu kullanacaksınız. load metodu, bir metin dosyasındaki değişkenleri yükler ve siz de bu değişkenleri TextArea bileşen örneklerinde ya da Tech Bookstore uygulamasında başka bir yerde görüntülersiniz. Aşağıda, Flash tarafından kullanılabilecek basit bir metin dosyası örneğini görüyorsunuz. &name=sue& Önceki basit metin dosyasını sendandload veya load metodunu kullanarak yüklediğinizde, Flash, hedef LoadVars nesnesinde name adında yeni bir değişken oluşturur ve buna Sue değerini atar. Her bir isim/değer çiftini VE işaretiyle (&) ayırarak ve eşittir işaretlerini kullanmaya devam ederek metin dosyasına istediğiniz kadar değişken ekleyebilirsiniz. Şu örneği inceleyin: &name=james& &position=mentor& &manager=nate W& ACTIONSCRIPT İN TEMELLERİ 255

275 Buradaki kod, Flash hta üç ayrı değişken oluşturmaktadır: name, position ve manager. name değişkeninin değeri James, position değişkeninin değeri mentor ve manager değişkeninin değeri Nate W olarak ayarlanmıştır. Bu değerleri LoadVars sınıfını kullanarak Flash a yüklemek için, bu ifadeyi testfile.txt adındaki bir metin dosyasına kaydedin ve boş bir Flash belgesine aşağıdaki ActionScript kodunu ekleyin. var test_lv:loadvars = new LoadVars(); test_lv.load( testfile.txt ); test_lv.onload = function(success:boolean) { trace(this.name); }; Bu örnekte LoadVars kullandığınız için, örnek kodu test etmeden önce Flash belgesini testfile. txt belgesiyle aynı klasöre kaydetmelisiniz. Metin dosyalarını, onları yükleyecek olan SWF dosyasından farklı bir dizine yerleştirebilirsiniz. Bunun için load metodunda dosyaya doğru şekilde başvuruda bulunduğunuzdan emin olmanız yeterlidir: test_lv.load( textfiles/testfile.txt ), vs. Bu kod, test_lv adında bir LoadVars nesnesi yaratmaktadır. Harici dosyayı, LoadVars sınıfındaki load metodunu kullanarak yüklüyorsunuz. Bu da ActionScript kodunun ikinci satırında gerçekleşiyor. Bu metot tek parametre almaktadır. Bu da, yüklemek istediğiniz dosyaya giden yoldur. Burada, geçerli Flash belgesiyle aynı klasörde bulunan testfile.txt adındaki bir dosyaya yüklüyorsunuz. Bir sonraki kod parçası biraz karmaşık gelebilir. LoadVars sınıfı, Flash ı n belirli şeyler gerçekleştiğinde tetiklediği birkaç tane olaya da sahiptir. Buradaki kodda tetiklenen olay onload dur ve bu olay, load metodunda tanımlanan metin dosyası Flash a tamamen yüklendiğinde tetiklenir. Basitçe anlatmak gerekirse bu kod, Belirtilen metin dosyası yüklendikten sonra şu kodu çalıştır der. Dosya tamamen yüklendikten ve onload olayı tetiklendikten sonra, testfile.txt dosyasında tanımlanan üç değişkeniniz test_lv LoadVars nesnesinde depolanır. Yani test_lv.manager ın değerini Trace ile izleyebilir ve Output panelinde Nate W değerini görebilirsiniz. Önceki kodda, yerel ya da anonim fonksiyon adı verilen bir öğe kullanmıştınız; bu, aslında kendisine herhangi bir isim verilmemiş bir fonksiyondur. Bir yerel fonksiyon (inline function), isimli fonksiyonlarla aynı şeyi yapar. Arada bazı farklar var ve bunlardan biri, bu fonksiyonların belirli bir nesneye iliştirilmesi ve belirli bir işlemi gerçekleştirmesidir. Diğer fark da şudur: Bu fonksiyonlar bellekte dolaşarak çağrılmayı beklemezler. Bu fonksiyonlar bir olay gerçekleştiğinde oluşturulur, cevap olarak çalıştırılır ve ihtiyaç duyuldukları bir sonraki duruma kadar bellekten silinirler. 256 DERS 9

276 İnceleme Sayfasının Oluşturulması Artık Flash la çalışmaya başlamanın ve FLA dosyalarına işe yarar bir şeyler yaptırmak için biraz ActionScript kodu eklemenin zamanı geldi. Bu uygulamada, TextArea bileşenine metin yükleyen özel bir fonksiyonun nasıl yazıldığını göreceksiniz. Bu sayfa, bir List bileşeni içeren bir inceleme (Review) sayfası oluşturacaktır. Bu bileşene tıklayarak, okumak istediğiniz incelemeyi seçebilirsiniz. Başlığına tıkladığınız inceleme, List bileşeninin yanında bulunan TextArea bileşeninin içinde görüntülenecektir. İnceleme sayfasının yapısını hazırlamak için bileşenlerden faydalanacaksınız. İnceleme bölümünün gövdesini oluşturmak için, yeni bir FLA belgesi oluşturacak ve daha sonra Tech Bookstore sitesine yüklenmek üzere bir SWF dosyası yayınlayacaksınız. Herhangi bir ActionScript kodu yazmadan önce, Flash ın Actions panelini açın (F9). Actions panelinin sağ üst köşesindeki menüye tıklayın ve açılan menüden View Line Numbers ı (Satır Numaralarını Göster) seçin. Satır numaraları, belgeyi test ettikten sonra Output panelinde gösterilen hataları kolayca bulmanızı sağlar. Çünkü Output paneli hata içeren satırın (ya da satırların) numarasını bildirir. Actions panelinde satır numarası özelliğini etkinleştirirseniz, hataları bulmanız çok daha kolay olacaktır. 1. Yeni bir Flash belgesi olu Y şturun. Stage in genişliğini 720 piksel, yüksekliğini de 345 piksel olarak ayarlayın biraz metaveri ekleyin. Layer 1 katmanının adını form olarak değiştirin. Publish Settings iletişim kutusunu açın ve Formats sekmesinde HTML onay kutusunun işaretini kaldırın. Belgeyi reviews.fla adıyla kaydedin. ACTIONSCRIPT İN TEMELLERİ 257

277 Yeni bir Flash belgesi oluşturun ve Stage in boyutlarını değiştirmek için Properties denetçisindeki Size (Boy) düğmesine tıklayarak ya da Ctrl+J (veya Mac te Cmd+J) tuşlarına basarak Document Properties (Belge Özellikleri) iletişim kutusunu açın. Title (İsim) alanına Tech Bookstore Reviews yazın ve Description (Açıklama) alanına kısa bir açıklama ekleyin. Dimensions (Boyutlar) metin girdi alanlarına genişlik (width) için 720, yükseklik (height) için 345 yazın ve sonra da OK düğmesine tıklayın. Ana belge Timeline ında Layer 1 katmanının ismini form olarak değiştirin. Bu katman, FLA dosyasının ilk katmanıdır ve boyutları ayarlar. Belgeyi yayınladığınızda bir HTML sayfası oluşturmanız gerekmez. Sadece, Tech Bookstore a yükleyeceğiniz SWF dosyasını kullanmanız gerekir. File menüsünden Publish Settings i seçin. Formats kategorisindeki HTML seçeneğinin işaretini kaldırın ve OK e tıklayın. sonra da File menüsünden Save i seçerek yeni dosyayı sabit diskinizdeki TechBookstore klasörüne reviews. fla adıyla kaydedin. 2. Stage e List bileşeninin bir örneğini sürükleyin. Örneği yeniden boyutlandırın ve Properties denetçisini kullanarak örneğin konum değerlerini değiştirin. List bileşeni, büyük ölçüde HTML Ldeki d listeler gibi kullanılır: Kullanıcıların etkileşime gireceği etiketleri görüntüler ve genelde her etiketle bir tür veri ilişkilendirilir. List bileşeni, kullanıcılara çoklu seçim yapma imkânı sunar (eğer siz onlara böyle bir seçenek sunmak istiyorsanız). Components panelini açın ve List bileşeninin bir örneğini Stage e sürükleyin. Stage deki List bileşeni seçili durumdayken Properties denetçisini açın ve bileşenin genişlik değerini DERS 9

278 piksel ve yükseklik değerini de 325 piksel yapın. x ve y koordinatlarını 10 yaparak, bileşenin konumunu belgenin sol üst köşesine gelecek şekilde ayarlayın. Bileşen örneğini reviews_ls olarak adlandırın. List bileşenini, kitaplarla ilgili incelemeleri listelemek için kullanacak ve kullanıcılara okumak istedikleri incelemeye geçme imkânını sunacaksınız. 3. İki inceleme dosyasını sabit diskinize kopyalayın. Properties denetçisini kullanarak List bileşenini yapılandırın. Values iletişim kutusunu kullanarak, List bileşenine iki incelemeye ait veri (data) ve etiket (label) değerlerini ekleyin. İncelemeleri düzenli bir şekilde tutmak için, sabit diskinizdeki TechBookstore klasörünün içinde reviews adıyla yeni bir klasör oluşturun. CD-ROM da d lesson09 klasöründe yer alan iki örnek incelemeyi bu klasöre kaydedin. Bunlar sırasıyla txt ve txt olarak adlandırılmıştır ve bu adlandırma işleminde kitapların ISBN numaraları temel alınmıştır. Bir veritabanı aramasında, kitap ismi yerine ISBN numarasına göre arama yapan bir script oluşturabilirsiniz, çünkü her ISBN numarası tek bir kitaba aittir, ama birden fazla kitap aynı isme sahip olabilir. Bu metin dosyalarından SWF dosyanıza bilgi yüklemek için LoadVars sınıfını kullanacaksınız. İncelemeleri bu iş için ayrılmış bir klasöre yerleştirmek istersiniz, çünkü düzinelerce incelemeyi kök klasöre atmanızın sonucu karmaşa ve bu yüzden klasörün içinde gezinmenin iş kence haline gelmesi olabilir. Bu incelemelerin hepsi basit birer metin dosyasıdır. İsterseniz başka incelemeler de oluşturabilir ve bunları reviews klasörüne ekleyebilirsiniz. Kendi incelemelerinizi, yukarıda bahsettiğimiz metin dosyalarından birini açıp basit HTML biçimlendirme ayarlarını kopyalayarak da ekleyebilirsiniz. Flash uygulamalarının dâhil olduğu her başarılı girişi imin anahtarı organizasyondur. ACTIONSCRIPT İN TEMELLERİ 259

279 List bileşenini birkaç farklı yolla doldurabilirsiniz. Belki de bunların en basiti, Properties denetçisini ya da Component denetçisi panelini kullanarak bilgileri bileşene elle girmektir. Önceki derste anketi oluştururken bunun nasıl yapıldığını görmüştünüz. Her ne kadar o uygulamada bir ComboBox bileşenini doldurmuş olsanız da, List bileşeninin doldurulması da aslında her bakımdan aynıdır. Properties denetçisinde Parameters sekmesine geçin, data satırını seçin, sonra da satırın en sağındaki büyüteç simgesine tıklayarak Values (Değerler) iletişim kutusunu açın. Artı (+) sembolüne iki kez tıklayarak iki değer ekleyin. İncelemeleri düzenli bir şekilde tutmak için, dosyaları kitapların ISBN numarasına göre adlandırmaya karar verdik. Bu yöntemi kullandığınız takdirde, daha ilerideki bir tarihte belirli bir kitabı bulmanız gerektiğinde, kitabı metin dosyalarına bakarak aramak yerine ISBN numarasını aramanız yeterli olacaktır. İlk değerde, değeri reviews/ txt olarak değiştirin. Dizin isminin dosyaya eklendiğine dikkat edin; böylece Flash, dosyanın SWF dosyasıyla aynı dizinde olmadığını anlayacaktır. İkinci değere tıklayın ve reviews/ txt yazın. OK düğmesine tıklayarak iletişim kutusunu kapatın ve Properties denetçisine geri dönün. labels satırına tıklayın ve satırın en sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu tekrar açın. Burada List bileşeninin label (etiket) parametrelerini tanımlayacaksınız. data parametreleri için yaptığınız gibi, artı sembolüne iki kez tıklayarak iki değer ekleyin. 260 DERS 9

280 Üstteki varsayılan değeri Fireworks: TFS (kitabın ismi) olarak değiştirin. İkinci değeri ise Dreamweaver: TFS olarak değiştirin. data ve label parametrelerini ayarlarken, değerleri aynı sırayla girmeye özen gösterin. Bunu yapmadığınız takdirde, kullanıcı bir kitabın ismine tıkladığında karşısına tamamen farklı bir kitapla ilgili incelemeler gelir. Bu işlemleri tamamladıktan sonra, OK e tıklayarak Values iletişim kutusunu kapatın. 4. Stage e bir TextArea bileşeni ekleyin ve Properties denetçisini kullanarak bu bileşenin konumunu ayarlayın. TextArea bileşeninin bir örneğini Stage e sürükleyin ve bunun sol üst köşesini List bileşeninin sağ üst köşesinin yakınına gelecek şekilde hizalayın. Stage de TextArea bileşeni hâlâ seçili durumdayken, Properties denetçisinde genişliği 490 piksel, yüksekliği de 325 piksel olarak değiştirin ve bu örneğe review_txt örnek ismini verin. TextArea bileşeninin x koordinatını 220 piksel, y koordinatını da 10 piksel olarak ayarlayın. Properties denetçisinde ya da Component denetçisi panelinde, editable özelliğini false olarak ayarlayarak, kullanıcıların incelemenin metnini değiştirmesini engelleyin. html özelliğini de true olarak ayarlayın. Böylece metni gömülü HTML etiketleriyle kullanabilirsiniz. 5. Timeline a yeni bir katman ekleyin ve ismini actions olarak değiştirin. Seçilen kitaba ait incelemeyi yükleyecek bir fonksiyon yazın. Timeline a yeni bir katman ekleyin ve bunun ismini actions olarak değiştirin. Actions panelini maksimum boya getirin. Script Assist modu açıksa, Script Assist düğmesine tıklayarak kapatın ACTIONSCRIPT İN TEMELLERİ 261

281 ve vurgusunun kaldırılmasını sağlayın. actions katmanının 1 numaralı karesini seçin, sonra da Actions panelindeki Script bölmesine aşağıdaki fonksiyonu ekleyin. function loadreview(evt) { var review_lv:loadvars = new LoadVars(); review_lv.load(evt.target.selecteditem.data); review_lv.onload = function(success:boolean){ if (success) { review_txt.text = this.content; } else { trace( unable to load text file. ); } }; } Burada, function anahtar sözcüğünü ve ardından function için kullanılmasını istediğiniz ismi kullanarak kendi yeniden kullanılabilir fonksiyonunuzu oluşturuyorsunuz. Fonksiyonun ismini (bu örnekte loadreview) tanımladıktan sonra, parantez içinde tekrar kullanılabilir fonksiyonunuzun alacağı parametreleri tanımlıyorsunuz. ıy Bu fonksiyon, evt isimli tek bir parametre alır. { ve } kıvr ımlı parantezlerinin arasındaki her şey, fonksiyonun gövde kısmı olarak değerlendirilir. Bu satırlar, fonksiyon çağrıldığında çalıştırılacak olan talimatlardır. Bu fonksiyon un yaptığı ilk şey, bellekte bir LoadVars nesnesi oluşturmak ve buna review_lv ismini vermektir. Kodun bir sonraki satırı, Flash htaki yerleşik bir fonksiyona dair bir diğer örnektir. load fonksiyonu tek bir parametre alır (yüklenecek olan dosyanın URL Li). Burada değer, reviews_ ls isimli List örneğinde seçili durumda bulunan öğenin data alanından alınmaktadır. Bir sonraki uygulamada da göreceğiniz gibi, evt.target in değeri, reviews_ls örneğine giden yoldur. Bir bileşene, düğmeye ya da movie clip e her tıkladığınızda ya da bu nesnelerle her etkileşime girdiğinizde, etkileşime girdiğiniz nesne bir olay yayınlar. Bu, birisi donmuş bir hindiyi ayağınıza düşürdüğünde bağırmanıza benzetilebilir. Flash, bu olayı kimin yayınladığını içeren bu bilgiyi yakalar ve target ile type özelliklerine sahip bir nesnede saklar. type, yani tip, olaydır (event). target yani hedef de, yayıncıya giden yoldur. Deminki örneğe dönecek olursak; ayağınıza donmuş bir hindi düştüğünde evt.target mutfak.jim olacaktır. Burada type olarak acıylabağırmak kullanılabilir. Bu bilgileri saklayan nesne de kızkardeşim olabilir (yani buradaki örnekte ayağımın nasıl kırıldığını soranlara bilgi veren kiş i). 262 DERS 9

282 review_lv.onload, farklı bir fonksiyon tipine örnek teşkil ediyor. onload fonksiyonu, aslında dosyanın tamamı Flash tarafından yüklendiğinde tetiklenen bir olaydır. Olay tetiklendiğinde Flash, review_lv.onload kodundan sonra yazılan fonksiyonu çalıştırır. Bu fonksiyon, yerel fonksiyon (inline function) ya da anonim fonksiyon olarak bilinir, çünkü bir fonksiyon ismine sahip değildir ve ancak onload olayı tetiklendiği zaman tetiklenebilir. Yerel fonksiyon success isimli tek bir nitelik alır. Bu nitelik, dosyanın başarıyla yüklenip yüklenmediğini belirtir. success niteliğinin değeri true ise, dosya yüklenmiş demektir. Bu nedenle Flash, review_txt TextArea bileşenindeki text özelliğini, LoadVars belgesindeki content değişkeninin değerine ayarlar. Ama success niteliğinin değeri false ise, dosya yüklenememiş demektir. Bu durumda Output panelinde bir mesaj görürsünüz. Bu örnek kodda sadece birkaç satırla tanımlanan birkaç farklı fonksiyon yer alıyor. Ancak LoadVars, XML, Web Servisleri ya da Flash Remoting özelliğini kullanarak uygulama geliştirirken, metotların ve olayların nasıl çalıştığını anlamak şarttır. 6. Actions panel araç çubuğundaki Check Syntax düğmesine tıklayın ve ActionScript kodunuzun sözdiziminin herhangi bir hata verip vermediğini kontrol edin. Dosyada yapmış olduğunuz değişiklikleri kaydedin. Yeni yazdığınız kodda herhangi bir sözdizimi hatası olup olmadığını kontrol etmek için, Actions panelindeki Check Syntax (Sözdizimini Kontrol Et) düğmesine tıklayın. Her şey düzgün çalışıyorsa, ıy FLA dosyasında yapmış olduğunuz değişiklikleri File menüsünden Save i seçerek kaydedin. Bir sonraki uygulamada bu dosya üzerinde çalışmaya devam edeceksiniz. ACTIONSCRIPT İN TEMELLERİ 263

283 Olayları ve İşleyicileri Kullanmak Önceki uygulamada Flash htaki bir olaya (event) kısaca göz attık. Olaylar, Flash hta bir şey olduğunda yükselen bayraklar gibidir. Olay, bir SWF dosyasında çalışma zamanında gerçekleşen bir eylemdir. SWF dosyası oynatılırken; bir movie clip ya da bir XML dosyası yüklendiğinde, bir düğmeye tıklandığında, v.b., olaylar gerçekleşir. Olay işleyiciler (event handler) ve izleyiciler (listener), bu olayların yönetilmesine yardımcı olan eylemlerdir. Daha önce LoadVars sınıfıyla ıy çalışırken olaylara ait birkaç örmek görmüştünüz. Dosya Flash tarafından yüklendiğinde, Flash hta onload olayı gerçekleşir ve bu olay için tanımlanmış fonksiyonlar çalıştırılır. Bir düğmeye tıklandığında (olay), SWF dosyasının belirli bir kareye gidip onu oynatması bununla ilgili basit bir örnektir. Örneğin bir dosya başarıyla yüklendiğinde ya da yükleme işlemi başarısız olduğunda, LoadVars nesnesi onload olayını tetikleyerek Flash a işlemin tamamlandığını söyler. Bu gereklidir, çünkü Flash SWF dosyası dosyasını durdurup işlemin tamamlandığını söyler. Bu gereklidir, çünkü Flash SWF dosyasını durdurup işlemin tamamlanmasını beklemek yerine, kodu işlemeye devam eder. Bu, asenkron iletişim olarak bilinir. Önceki uygulamada, SWF dosyasından bir metin dosyasının içeriğini yüklemesini istemiştiniz. SWF dosyası bir sonuç aldığında, ya metni TextArea bileşeninde gösterir, ya da Output panelinde bir hata görüntüler (test ortamındaysanız). FLA dosyasını yayınladığınızda trace deyimleri kullanıcıya ıy gönderilmediği için, kullanıcılar SWF dosyanızdaki trace deyimlerinin içeriğini göremez. Flash hta pek çok öğe için kullanılabilen her türden olay mevcuttur. Örneğin Flash ı kullanarak bir MP3 dosyasını çalışma zamanında yüklüyorsan üy ız, üç farklı olay gerçekleşebilir: ID3 verileri (MP3 dosyası hakkındaki bilgiler) kullanılabilir hale geldiğinde onid3 tetiklenir, MP3 dosyasının yüklenmesi tamamlandığında onload tetiklenir ve MP3 dosyasının çalınması bittiğinde onsoundcomplete tetiklenir. Bir olay tetiklendiğinde, Flash bu üç olay için olay işleyicide tanımlanmış fonksiyonları çalıştırır. Aşağıdaki kodda bununla ilgili bir örnek görüyorsunuz. var intro_sound:sound = new Sound(); intro_sound.loadsound( Tool - disgustipated.mp3, true); intro_sound.onid3 = function(success:boolean) { trace(success); }; intro_sound.onsoundcomplete = function() { trace( sound has completed ); }; Bu script, önce Sound nesnesinin yeni bir örneğini tanımlar ve yerleşik loadsound metodunu kullanarak Sound nesne örneğine bir MP3 dosyasını yükler. MP3 dosya isminden sonra yazılan true, SWF dosyasına (oynatmaya başlamadan önce bütün dosyanın yüklenmesini beklemek yerine) MP3 formatındaki şarkının akmasını istediğinizi bildirir. Daha sonra onid3 264 DERS 9

284 olayına ve onsoundcomplete olayına ait olay işleyicileri oluşturursunuz. Bu olaylar gerçekleştiği için, SWF dosyası olay işleyicide tanımlanan her fonksiyonu otomatik olarak çalıştırır. Olay işleyiciler, ilgili olay gerçekleştiğinde çalıştırılan talimatlardır. Yani SWF dosyasında herhangi bir ID3 bilgisi varsa, onid3 olayı tetiklenir, fonksiyon çalıştırılır ve SWF dosyası success niteliğinin değerini kontrol eder. trace, sesin SWF dosyasına başarıyla yüklenip yüklenmediğini size bildirir. MP3 formatındaki ses çalınıp bittikten sonra, onsoundcomplete olayı tetiklenir ve SWF dosyası test ortamında Output panelinde bir mesaj görüntüler. Geçerli MP3 çalınıp bittikten sonra yeni bir MP3 yüklemek istediğinizde, onsoundcomplete fonksiyonu çok işinize yarayabilir. İzleyicileri Kullanmak Bu derste, arabirimlerde bileşenleri kullanırken, izleyicileri sık sık kullanacaksınız. İzleyiciler (listener) Flash ta sıkça kullanılan ve bir olayı yayınlayan belirli bir öğeyi temel alarak bir işlem gerçekleştiren nesnelerdir. İzleyiciler, olay işleyicilere çok benzer, çünkü ikisi de bir SWF dosyasında olayların meydana gelmesini bekler ve olay meydana geldiğinde de bir eylemi gerçekleştirirler. İzleyicilerle olay işleyicileri arasında iki önemli fark vardır: İzleyiciler, izleyici nesneler tarafından yakalanır. İzleyici nesneler, bir yayıncı nesne izleyiciye belirli bir olayı gönderdiğinde çalıştırılan talimatlar içeren nesnelerdir. Bu da beraberinde diğer farkı getirir, yani ActionScript kullanarak bir yayıncı nesneyi (düğme gibi) ve bir izleyici nesneyi ilişkilendirme zorunluluğunu. Burada aslında yayıncıya, bir şey olduğunda bu durumdan izleyicinizi haberdar etmesini söylersiniz. Daha sonra izleyici talimatları çalıştırır. Bileşenlerle çalışırken bunun için addeventlistener metodunu kullanırsınız ve yayınlanacak olayı ve olayı işleyecek izleyici nesneyi belirtirsiniz. Aşağıdaki kodda, izleyicilere dair bir örnek görüyorsunuz. var listenerobject:object = new Object(); listenerobject.click = function(evt) { trace( you clicked the button. ); }; mybuttoncomponentinstance_btn.addeventlistener( click, listenerobject); Burada, önce olayları alacak bir nesne oluşturuyorsunuz. Sonra da, olayı işleyen bir fonksiyon tanımlıyor ve isteğe bağlı olarak bunu bir bağımsız değişken (argument) olarak evt nesnesine atıyorsunuz. Flash, fonksiyonun yakaladığı olayın ismini, fonksiyonun bir özelliği olarak kullanır. Bunu yaparak, tek nesnenin birkaç farklı olayı yakalamasını sağlayabilirsiniz. Son olarak, Stage deki mybuttoncomponentinstance_btn örnek ismine sahip bir düğmeye olay izleyiciyi (event listener) ekliyorsunuz. Sonra da, SWF dosyasına hangi olayı izlediğinizi söylüyorsunuz (bu uygulamada izlenen olay, kullanıcı düğmeye basıp bıraktığında tetiklenen click olayıdır) ve listenerobject i bir parametre olarak aktarıyorsunuz. ACTIONSCRIPT İN TEMELLERİ 265

285 İnceleme Sayfasına Bir İzleyici Eklemek LoadVars sınıfında iki olay vardır: ondata ve onload. ondata olayı, sunucudan bir sonuç döndürüldüğünde, ama sonuçlar Flash tarafından çözümlenmeden önce tetiklenir. onload olayı ise, LoadVars sınıfının load ya da sendandload metodunu çağırdığınız takdirde tetiklenir; ama bu olay, sonuçlar Flash tarafından çözümlendikten sonra tetiklenir. Bu olayların her biri farklı durumda faydalıdır ve aldıkları parametreler de farklıdır. Şunu unutmamanız çok önemli: Kodunuzda ondata olayını kullanıyorsanız, onload olayı, kendisini kodunuzdan özel olarak çağırmadığınız takdirde tetiklenmez. Aşağıdaki uygulamada, kullanıcı List bileşeninin değerini değiştirdiğinde tetiklenen bir olayın işlenmesini göreceksiniz. Bu örnekte de reviews.fla dosyasını kullanacaksınız. 1. ActionScript i kullanarak List bileşeninin bir örneğine bir olay izleyicisi ekletin. actions katmanının 1 numaralı karesini seçin ve Actions panelini açın. Script bölmesinde bulunan fonksiyonun altına aşağıdaki kodu ekleyin: reviews_ls.addeventlistener( change, loadreview); Bu kod reviews_ls List bileşen örneğinize, kullanıcı yeni bir kitap ismine tıkladığında tetiklenen bir olay izleyici (event listener) ekler. addeventlistener metodu iki parametre alır: İzlenen olay (bu örnekte change) ve olay gerçekleştiğinde tetiklenecek fonksiyon (bu örnekte, önceki uygulamada tanımladığınız loadreview fonksiyonu). addeventlistener metodu için, 266 DERS 9

286 olayın işlenmesinde kullanılan bir fonksiyon içeren bir nesneyi belirtmenize imkân sağlayan bir seçenek daha vardır. 2. Belgenin doğru bir şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test Movie yi seçerek belgeyi test edin. Sonra da belgeyi kaydedin ve yayınlayın. Control menüsünden Test Movie yi seçerek belgeyi test edin. Stage in sol tarafındaki reviews_ ls bileşeninde bir kitap ismine her tıkladığınızda, Flash loadreview fonksiyonunu çağırır. Bu fonksiyon da bu kitapla ilgili yorumu TextArea örneğine yükler. Ayrıca şuna da dikkat edin: Harici metin dosyalarının içerikleri TextArea örneğinde görüntülendiğinde, <b> (kalın), <i> (italik) ve <img> (resim) etiketleri gibi HTML biçimlendirmeleri içeren harici dosyalar metnin görünüşünü etkiler. TextArea bileşeni, etiketler de dâhil olmak üzere asıl HTML kaynak kodunu görüntülüyorsa, Component denetçisi panelinde html parametresinin true olarak ayarlanmış olup olmadığını kontrol edin. Metin dosyalarının içeriklerine bakarsanız, bu uygulamaya ait resimlerin amazon.com sunucularından yüklendiğini görürsünüz. Kendi projelerinizi hazırlarken, resimleri amazon.com daki sunuculardan yüklemek yerine, kendi sunucunuzdan yerel olarak yüklemek istersiniz. Resim dosyalarını yerel olarak kaydedebilir ve yüklediğiniz metin dosyalarındaki URL Li değiştirebilirsiniz. Geliştirme ortamına geri dönün ve reviews.fla dosyasında yaptığınız değişiklikleri kaydedin. SWF dosyasını oluşturmak için File menüsünden Publish i seçerek FLA dosyasını yayınlayın. Daha sonraki derslerden birinde, bu dosyayı ana Tech Bookstore SWF dosyasına yükleyeceksiniz. Dosya TechBookstore klasöründe oluşturulur. Daha fazla yorum eklemek isterseniz, mevcut bir yorumdaki metni kopyalayabilir ve bunun üzerinde gereken değişiklikleri yapabilirsiniz. Gereken düzenlemeleri yaptıktan sonra, yeni dosyayı reviews klasörüne kaydedin. Ayrıca, önceki uygulamanın üçüncü adımında yapığınız gibi, Properties denetçisinde List bileşeninin data ve labels parametrelerini değiştirmenizin ve yeni değerler eklemenizin gerektiğini de unutmayın. ACTIONSCRIPT İN TEMELLERİ 267

287 İnceleme Sayfasına CSS Biçimlendirmesi Eklemek CSS (Cascading Style Sheets), bir HTML sayfasındaki metinlere ve diğer öğelere uygulanabilecek stiller tanımlamak için kullanılan bir metottur. CSS belgeleri, bir metin bloğunun hangi fontları kullanmasının gerektiğini, resimler ya da tablo hücreleri gibi belirli öğelerin etrafında ne tür boşlukların bırakılması gerektiğini ya da belirli öğelerde hangi renklerin kullanılacağını tanımlayan kurallar içerir. Bir CSS stil sayfasını kullandığınızda, sitenizdeki her sayfaya tek kural kümesini uygulayabilirsiniz. Ayrıca bu kuralları değiştirdiğiniz takdirde, sitedeki stillerin tutarlılığı da muhafaza edilir ve değişiklikleri stil sayfasını uyguladığınız her sayfada anında görebilirsiniz. Flash, bir SWF dosyasındaki HTML biçimlendirmesi uygulanmış dinamik metinlerin ya da girdi metinlerinin biçimlendirilmesinde orijinal CSS1 spesifikasyonunun kullanılmasını destekler. CSS in farklı sürümleri vardır. CSS2, biçimlendirme için ilave özellikler sunar, ama Flash CSS2 sürümünü desteklemez. CSS1 spesifikasyonu için adresine başvurabilirsiniz. Flash, CSS1 in özelliklerinin sadece bir alt kümesini desteklese de, HTML etiketleri içeren metin bloklarını kolayca biçimlendirmenize imkân sağladığından ve bunların sitenin geri kalan kısmıyla tutarlı görünmesini sağladığından, bu mükemmel bir özelliktir. Flash belgelerine stil sayfaları eklemenin iki yolu vardır: Stil sayfasını çalışma zamanında yüklemek ve stil sayfalarını ActionScript kullanarak tanımlamak. Tech Bookstore uygulaması boyunca birkaç farklı SWF dosyasında aynı stilleri kullanacağınız içi, harici bir CSS stil sayfası kullanmanız ve bunu SWF dosyalarının her birine yüklemeniz daha kolaydır. Aynı stil sayfasını, oluşturacağınız HTML sayfalarında da kullanarak (sayfanın SWF dosyası içermesinden ya da sadece HTML kodu olmasından bağımsız olarak), sitenizin tutarlılığını muhafaza edebilirsiniz. 1. Önceki uygulamalarda kullandığınız reviews.fla belgesini tekrar açın ve form katmanını kilitleyin. Önceki uygulamalarda üzerinde çalıştığınız reviews.fla belgesini açın ve form katmanını kilitleyin. actions katmanının 1 numaralı karesini seçin. Bir sonraki adımda buraya ActionScript kodu ekleyeceksiniz. Üçüncü adımda, metni biçimlendiren harici stil sayfasını oluşturacaksınız. 268 DERS 9

288 2. reviews.fla dosyasına, çalışma zamanında reviews.swf dosyasına bir CSS dosyasını yükleyecek olan ActionScript kodunu ekleyin. Actions katmanının 1 numaralı karesinde bulunan kodun üstüne aşağıdaki kodu ekleyin. var flash_css = new TextField.StyleSheet(); flash_css.load( styles.css ); flash_css.onload = function(success:boolean) { if (success) { review_txt.stylesheet = flash_css; } else { trace( Error loading CSS file. ); } }; Bu kod, LoadVars nesnesini kullandığınız uygulamalardakine benzemektedir. Burada önce yeni stil sayfasını içerecek flash_css isimli yeni bir Timeline değişkeni oluşturuyor, sonra da styles. css isimli harici bir CS dosyasını yüklüyorsunuz. styles.css dosyasını henüz oluşturmadınız. Dolayısıyla, bu dosyayı şimdi kaydedip test ederseniz, Output penceresinde Error loading CSS File (CSS dosyası yükleme hatası) mesajını görürsünüz. Sonraki kod bloğu, Flash bir onload olayı aldığında tetiklenir ve stil sayfasının başarıyla yüklenip yüklenmediğini belirten tek bir parametre (success) alır. Stil sayfası yüklenirse, kod stil sayfasını review_txt TextArea örneğine atar. Stil sayfası başarıyla yüklenemezse, Output paneline bu durumu bildiren bir hata mesajı gönderilir. Şimdi Ctrl+Enter (ya da Mac te Cmd+Return) tuşlarına basarak SWF dosyasını test ederseniz, Flash Output panelinde SWF dosyasının CSS dosyasını bulamadığını belirten bir hata mesajı görüntüleyecektir. Bunun nedeni, stil sayfasının henüz TechBookstore dizininde yer almamasıdır. 3. Metin stillerini tanımlamak için, styles.css isimli bir CSS dosyası oluşturun. Dosyayı TechBookstore klasörüne kaydedin. Bilgisayarınızda bir metin editörünü ya da CSS i destekleyen Dreamweaver gibi herhangi bir editörü açın. PC kullanıyorsanız, muhtemelen Not Defteri (Notepad) bilgisayarınızda kurulu ACTIONSCRIPT İN TEMELLERİ 269

289 durumdadır. Mac kullanıyorsanız, TextEdit in kurulu olması gerekir. Aşağıdaki kodu girin ve dosyayı styles.css adıyla kaydedin. p { font-family: Arial,Helvetica,sans-serif; font-size: 11px; color: #000000; }.headline { font-family: Arial,Helvetica,sans-serif; font-size: 24px; color: #999999; } Bu stil sayfası iki stil tanımlamaktadır. Bu stillerden biri <p> etiketine uygulanır. Diğeri ise, her bir incelemede kitabın ismine uygulayacağınız headline isimli özel bir stildir. headline stili, metnin rengini gri, boyunu da 24 piksel olarak ayarlar. Böylece başlık kısmının inceleme kısmından ayırt edilmesi kolaylaşır. Dosyayı sabit diskinizdeki TechBookstore klasörüne kaydedin ve metin editörünü kapatın. 4. reviews.fla belgesini tekrar test edin. Her şey düzgün çalışıyorsa, belgeyi kaydedin ve FLA dosyasını yayınlayarak güncellenmiş bir SWF dosyası oluşturun. Ctrl+Enter (ya da Mac te Cmd+Return) tuşlarına basarak Flash belgesini test edin. Şimdi bir kitabın ismine tıkladığınız takdirde, Flash kitapla ilgili yorumları yükleyecek ve stil sayfasını TextArea ya uygulayacaktır. Dosyayı kaydedin ve Flash belgesini tekrar yayınlayarak TechBookstore klasöründeki SWF dosyasını güncelleyin. 270 DERS 9

290 Katalog Sayfalarını Oluşturmak Bu bölümde, bir sonraki uygulamada oluşturacağınız catalog.fla dosyasına aktarılacak iki yeni katalog sayfasını hazırlayacaksınız. Katalog sayfaları, Tech Bookstore da satılan kitapların her birine ait bilgileri içeren son derece basit sayfalardır. Katalogda şu anda sadece birkaç kitabı tanıtacaksınız, ama isterseniz çok daha fazla kitabı da tanıtabilirsiniz. Her katalog sayfasında başka sayfaları açan iki düğme yer alacaktır: İçindekiler kısmını açan bir düğme ve örnek bir bölüm açan başka bir düğme. Bu düğmeleri daha önce movie clip leri kullanarak oluşturmuştunuz. Katalog sayfaları, ayrıca kitap kapağının bir resmini ve kitabın içeriğinin kısa bir açıklamasını da içerir. Katalog sayfalarının istediğiniz gibi görünmesini sağlamak için, bunlara istediğiniz grafikleri ekleyebilirsiniz. 1. TechBookstore klasöründe catalog isimli yeni bir klasör oluşturun. bookstore12.fla dosyasını açın ve dosyanın yeni bir versiyonunu bookstore13.fla ismiyle kaydedin. Önce sabit diskinizdeki TechBookstore klasörünün içinde catalog isimli yeni bir klasör oluşturun. Bu uygulamada oluşturacağınız ve daha sonra ana Tech Bookstore uygulamasına yüklenecek olan yeni FLA ve SWF dosyalarını buraya kaydedeceksiniz. Sabit diskinizdeki TechBookstore klasöründen ya da CD-ROM un lesson09/start dizininden bookstore12.fla dosyasını açın. File menüsünden Save As i seçerek, bookstore12.fla dosyasının yeni bir versiyonunu bookstore13.fla ismiyle sabit diskinizdeki TechBookstore klasörüne kaydedin. 2. catalog01.fla isimli yeni bir belge oluşturun ve bu belgeyi TechBookstore klasöründeki catalog klasörüne kaydedin. Publish Settings iletişim kutusunu açın ve Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın. Stage i yeniden boyutlandırın. Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız olmaz. Burada sadece, belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekir, çünkü neticede bu SWF dosyası başka bir SWF dosyasına yüklenecektir. Bu nedenle, File menüsünden Publish Settings i seçin, Formats sekmesindeki HTML seçeneğinin işaretini kaldırın, işiniz bittikten sonra OK e tıklayın. Properties denetçisini kullanarak Stage in boyutlarını 490 x 325 olarak değiştirin. 3. İki movie clip düğmesini, bookstore13.fla dosyasının kütüphanesinden catalog01.fla dosyasının kütüphanesine sürükleyin. Eğer açık değilse catalog01.fla daki belge kütüphanenizi açın. New Library Panel (Yeni Kütüphane Paneli) düğmesine tıklayın ve yeni paneldeki kütüphane (Library) açılır listesinden bookstore13.fla ACTIONSCRIPT İN TEMELLERİ 271

291 dosyasını seçin. mcsamplechapter ve mctoc sembollerinin birer örneğini bookstore13.fla nın kütüphanesinden catalog01.fla nın kütüphanesine sürükleyin. 4. Table of Contents (İçindekiler) ve Sample Chapter (Örnek Bölüm) düğmelerini Tech Bookstore kütüphanesinden silin ve FLA dosyasını kapatın. mcsamplechapter ve mctoc sembolleri catalog01.fla belgesindeyken, her birini seçip bookstore13.fla dosyasının kütüphanesinin alt kısmındaki çöp kutusu simgesinin üzerine sürükleyerek bu sembolleri bu kütüphaneden silebilirsiniz. FLA dosyasının boyunu minimum seviyede tutabilmek için, FLA dosyasında kullanılmayan sembolleri silme alışkanlığını edinmeniz iyi olacaktır. Sembollerin silinmesi yayınlanan SWF dosyasının boyunu etkilemez, çünkü siz Flash belgesini yayınladığınızda, kullanılmayan semboller SWF dosyasına dâhil edilmez. Fakat bu, bileşenler için doğru değildir. Bileşenler, siz özel olarak kullanılmayan bileşenleri kütüphaneden silmedikçe SWF dosyası ile birlikte yayınlanır. 272 DERS 9

292 5. CD-ROM daki lesson09/assets klasöründe bulunan catalog01.png ve catalog02.png dosyalarını sabit diskinize kopyalayın. CD-ROM daki lesson09/assets klasöründe, Kaynağından Eğitim serisinin orijinal İngilizce basımlarına ait kapak resimlerini içeren catalog01.png ve catalog02.png resimleri yer alıyor. Bu dosyaların ikisini de sabit diskinize kopyalayın. 6. Layer 1 katmanının ismini pages olarak değiştirin ve Loader bileşeninin bir örneğini katmanın üzerine sürükleyin. contentpath parametresini catalog01.png olarak değiştirin. pages katmanının üzerine yeni bir katman ekleyin ve bu yeni katmanı buttons olarak adlandırın. buttons katmanını seçin ve iki düğmeyi Stage e sürükleyin. static text isimli bir katman ekleyin. Text aracını kullanarak Stage de yeni bir statik metin alanı oluşturun, sonra da Stage deki bütün öğelerin yerleşim düzenini ayarlayın. Önce Layer 1 katmanını ismini pages olarak değiştirin. Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage e sürükleyin. Örneği, aşağıda verilen şekildekine benzer biçimde Stage in sol üst kenarına yakın bir noktaya yerleştirin ve genişlik değerini 120, yükseklik değerini de 150 olarak ayarlayın. contentpath parametresini catalog01. png olarak ve autoscale özelliğini de false olarak ayarlayın. Loader bileşeninden uzakta bir yere tıkladığınızda bileşen ortadan kaybolmuş gibi görünür. Seçimi kaldırıldığında onun bulunduğu konumu görmek için Layers panelinde View Outlines seçeneğini etkinleştirin. Pages katmanının üzerinde yeni bir katman oluşturun ve bu yeni katmanın ismini buttons olarak değiştirin. Buttons katmanı seçili durumdayken, iki movie clip düğmesi örneğini kütüphaneden Stage e sürükleyin. İki movie clip düğmesini Stage de Loader bileşen örneğinin altına yerleştirin. İkinci movie clip düğmesini ilk düğmenin altına yerleştirin. Son olarak, Tools panelindeki Text aracına tıklayın ve Properties denetçisini açın. Metin tipini Static, fontunu Arial 10 pt, rengini de siyah olarak ayarlayın. Font render yöntemi olarak Antialias for readability yi seçin. Static text katmanını seçin ve Stage e tıklayıp imleci sürükleyerek, bu alan için uygun genişlikte bir metin alanı oluşturun. Bu alana metin girdiğinizde, dikey ACTIONSCRIPT İN TEMELLERİ 273

293 olarak ek satırlar oluşturulacaktır. Oluşturduğunuz statik metin alanına bir şeyler yazın (ne yazdığınız önemli değil). Göstermelik metin olarak lorem ipsum metnini kullanabilir, tamamlanmış catalog01.fla dosyasını açıp tamamlanmış FLA dosyasında bulacağınız metni kullanabilir ya da İnternet ten kitabın gerçek incelemesini bulabilirsiniz. 7. İki movie clip düğmesine yeni örnek isimleri verin. Sonra actions isimli yeni bir katman ekleyin ve iki düğmenin çalışmasını sağlayacak fonksiyonları ekleyin. Selection aracını kullanarak Stage in üst kısmındaki düğmelerin her birine tıklayın ve bunlara örnek isimleri verin. table of contents (içindekiler) düğmesi için toc_mc örnek ismini girin. Sonra da sample chapter (örnek bölüm) düğmesi için samplechapter_mc örnek ismini girin. FLA dosyasında en üstteki katmanı seçin ve yeni bir katman ekleyin. Yeni katmana actions ismini verin. Actions panelini maksimum boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin. stop(); samplechapter_mc.onrelease = function() { geturl( _ blank ); } toc_mc.onrelease = function() { gotoandstop( toc ); } 274 DERS 9

294 Bu ActionScript kodu oynatım kafasını geçerli karede durdurur ve iki fonksiyon tanımlar. Bunların biri oynatım kafasını belirli bir kare etiketine gönderecek, diğeri de bir tarayıcı penceresi açacaktır. Kullanıcı sample chapter düğmesine tıklarsa tarayıcı açılır ve örnek bir bölüm içeren bir sayfaya gider. Kullanıcı table of contents düğmesine tıkladığında ise, oynatım kafası bir sonraki adımda toc olarak etiketlenecek kareye gider. 8. Yeni bir katman ekleyin ve bu yeni katmanın ismini labels olarak değiştirin. Sonra 5 numaralı kareye toc kare etiketini (label), 1 numaralı kareye de home kare etiketini ekleyin. pages ve actions katmanlarında, kare etiketinin altına yeni boş anahtar kareler ekleyin, sonra da actions katmanının 5 numaralı karesine bir stop eylemi ekleyin. Yeni bir katman ekleyin ve bunu actions katmanının hemen altına taşıyın. Katmanın ismini labels olarak değiştirin. Timeline da bu katmanın 5 numaralı karesine sağ tıklayın (ya da Mac te Control tuşunu basılı tutarak tıklayın), bağlam menüsünden Insert Blank Keyframe i seçerek boş bir anahtar kare ekleyin ve Properties denetçisini kullanarak bu kareye toc etiketini uygulayın. Katmandaki 1 numaralı kareyi seçin, buna da home kare etiketini ekleyin. actions katmanındaki 5 numaralı kareye yeni bir anahtar kare eleyin (F6) ve Actions paneline stop(); yazın. Sonra F6 tuşuna basarak, pages katmanındaki 5 numaralı kareye yeni bir anahtar kare ekleyin. 1 numaralı karedeki metin alanı 5 numaralı kareye kopyalanacaktır. buttons katmanını 5 numaralı kareye kadar uzatmanız gerekmez, çünkü özellikle içindekiler sayfasının görüntülenmesi için kullanılan, örnek bölümün açılması pek gerekmeyen bir sayfa hazırlıyorsunuz. ACTIONSCRIPT İN TEMELLERİ 275

295 Bu katmana boş bir kare eklemek yerine bir anahtar kare ekleyerek, Stage deki statik metin alanında bulunan metni değiştirebilir ve metin alanının konumunu koruyabilirsiniz. Bu, aynı zamanda bütün öğeleri tam olarak aynı konumda tutmanıza da imkân sağlar; böylece ziyaretçiler ikinci alana geçtiklerinde öğeler kaymaz. Metin alanlarını değiştirerek, bunun kitabın tanıtımı yerine içindekileri göstermesini sağlayın. Son olarak da, Stage deki pages katmanının üzerinde bulunan toc anahtar karesine bir back (geri) düğmesi ekleyin. Kendi düğmenizi oluşturabilir, ya da Components panelinde Button bileşeninin bir örneğini pages katmanının üzerine sürükleyebilirsiniz. Button bileşeninin bir örneğini kullanıyorsanız, label parametresini Back, örnek ismini de back_btn olarak değiştirin. actions katmanının 5 numaralı karesini seçin ve Actions paneline aşağıdaki kodu yazın. back_btn.onrelease = function() { gotoandstop( home ); } 276 DERS 9

296 9. catalog01.fla dosyasını test edin, bir sorun yoksa dosyayı kaydedin ve yayınlayın. Sonra da File menüsünden Save As i seçerek catalog01.fla dosyasının yeni bir versiyonunu kaydedin ve yeni dosyaya catalog02.fla ismini verin. Bu dosyanın catalog klasörüne kaydedildiğinden emin olun. Loader bileşeninin contentpath parametresini catalog02.png olarak değiştirin ve katalogun metin alanlarında değişiklik yapın. catalog01.fla dosyasını test ederek belgenin beklediğiniz gibi çalıştığından emin olun. Herhangi bir sorun yoksa dosyayı kaydedin ve File menüsünden Publish i seçerek yayınlayın. catalog01.fla dosyasının yeni bir versiyonunu catalog02.fla ismiyle kaydettikten sonra, yapmanız gereken sadece FLA dosyasında aşağıda ayrıntıları verilen birkaç küçük değişikliği yapmak ve bu dosyayı tekrar yayınlamaktır. İkinci bir katalog sayfası oluşturmak istemiyorsanız, CD-ROM daki lesson09 klasöründe catalog02.fla dosyasını sabit diskinizdeki TechBookstore klasörüne kaydedebilir ve bu dosyayı yayınlayabilirsiniz. Ama bu durumda herkes size tembel gözüyle bakar ve ayrıca bu şekilde pratik kazanamazsınız. Herhangi bir dosyayı (örneğin catalog01.fla dosyasını) yerleşim düzenini ve tarzı bozmadan yeniden yapılandırmanın genellikle en hızlı yolu, dosyanın yeni bir kopyasını kaydedip sonra sadece gereken şeyleri değiştirmektir. Bu aslında bir movie clip sembolünü çoğaltmayla aynı prensibe dayanır. Bu yöntemi kullanırsanız, dosyanın tamamını sıfırdan başlayarak yeniden oluşturmak ve öğelerin her birini aynı şekilde yerleştirmekle uğraşmak zorunda kalmazsınız. ACTIONSCRIPT İN TEMELLERİ 277

297 pages katmanındaki Loader bileşenini seçin ve contentpath parametresini catalog2.png olarak değiştirin. Bunu pages katmanının 5 numaralı anahtar karesinde de yapmanız gerekecek. Son olarak, dilerseniz pages katmanının 5 numaralı karesindeki metni değiştirin. 10. catalog02.swf dosyasını bir tarayıcı penceresinde test edin. Sayfa doğru bir şekilde çalışıyorsa, geliştirme ortamına geri dönün, FLA dosyasını kaydedin ve bunu yayınlayarak catalog klasöründe catalog02.swf dosyasını oluşturun. Geliştirme ortamında File menüsünden Publish Preview > Default u seçerek catalog02.swf dosyasını bir tarayıcı penceresinde test edin. Her şey düzgün görünüyorsa, SWF dosyalarının farklı bölümlerine gidebiliyorsanız ve yeni bir tarayıcı penceresi açabiliyorsanız, dosyayı kaydedin ve yeni catalog02.swf dosyasını oluşturun. Artık catalog klasöründe, bu kitapta daha ileride Tech Bookstore a aktaracağınız iki SWF dosyanız var. Ana Katalogu Hazırlamak TechBookstore un katalog (Catalog) bölümü, daha önceki uygulamalarda oluşturduğunuz incelemeler (Reviews) bölümüne çok benzer. Ana katalog dosyasında, birkaç kitabın isimlerinin yer aldığı bir List bileşeni vardır. Listedeki kitaplardan birine tıkladığınızda, önceki uygulamada oluşturduğunuz katalog sayfaları yüklenerek Stage in içeriği güncellenir. Katalog ve incelemeler bölümleri arasındaki en önemli fark, katalog sayfasının harici bir SWF dosyasını bir Loader bileşenine yüklemesi, incelemeler bölümünün ise içeriği görüntülemek için LoadVars nesnesini ve TextArea bileşenini kullanmasıdır. 1. Yeni bir Flash belgesi oluşturun ve Stage in genişliğini 720 piksel, yüksekliğini de 345 piksel olarak ayarlayın. File menüsünden Publish Settings i seçerek Publish Settings iletişim kutusunu açın ve Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın. Sonra da dosyayı catalog.fla ismiyle kaydedin. File menüsünden New u ve sonra Flash Document ı seçerek yeni bir Flash belgesi oluşturun. Properties denetçisini kullanarak Stage in boyutlarını 720 x 345 piksel olarak değiştirin. Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız yok. Sadece belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekiyor. Bu nedenle, File menüsünden Publish Settings i seçin. Formats sekmesinin altındaki HTML onay kutusunun işaretini kaldırın ve OK düğmesine tıklayın. Bu işlemleri tamamladıktan sonra FLA dosyasını catalog.fla ismiyle kaydedin. 2. Layer 1 katmanının ismini form olarak değiştirin ve Stage de form katmanına bir List bileşeni ekleyin. Properties denetçisini kullanarak List örneğinin genişliğini 200, yüksekliğini de 325 piksel olarak ayarlayın ve örneği Stage in sol üst köşesine taşıyın. List örneğini catalog_ls olarak adlandırın. 278 DERS 9

298 Katalog bölümünde, katalogdaki kitapların isimlerini içeren bir List bileşeni yer alır. Bunlara tıklandığında Stage deki içerik güncellenir. Layer 2 katmanının ismini form olarak değiştirin. Components panelini açın ve sonra da List bileşeninin bir örneğini Stage e sürükleyin. Properties denetçisinde List örneğinin x ve y koordinatlarının ikisini de 10 piksel olarak değiştirin. Örneğin genişliğini 200, yüksekliğini de 325 piksel olarak değiştirin ve bunu catalog_ls olarak adlandırın. 3. Values iletişim kutusunu kullanarak List bileşeninin değerlerini ve etiketlerini ayarlayın. List bileşeni hâlâ seçili durumdayken, Properties denetçisini ya da Component denetçisi panelini açın ve data satırına tıklayın. data satırının sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu açın. Add (+) düğmesine iki kez tıklayarak iki yeni değer ekleyin ve üstteki değer için catalog/catalog01.swf, alttaki için de catalog/catalog02.swf yazın. Bu değerlerin ikisinde de catalog/ önekinin bulunduğuna dikkat edin. Bu önek, SWF dosyasını catalog isimli bir alt klasörde aramasını söyler. OK düğmesine tıklayarak Values iletişim kutusunu kapatın ve Properties denetçisinde labels satırını seçin. Yine büyüteç simgesine tıklayarak Values iletişim kutusunu açın ve List bileşenine ait değerleri girin. İki yeni değer ekleyin; üstteki değeri Flash ActionScript: TFS, alttakini de Dreamweaver: TFS olarak ayarlayın. Değerleri eklerken, verileri her zaman etiketleri eklediğiniz sırayla eklemeye özen gösterin; aksi halde kullanıcı bir kitabın ismine tıkladığında başka bir kitaba ait bilgiler görüntülenir. 4. Stage e Loader bileşeninin bir örneğini ekleyin, sonra da Properties denetçisini kullanarak bu örneğin konumunu ve boyutlarını değiştirin. Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage e sürükleyin. Bileşenin genişliğini 490, yüksekliğini de 325 piksel olarak ayarlayın. Sonra da bunu x koordinatı 225 piksel, y koordinatı 10 piksel olacak şekilde yerleştirin. Loader bileşenine catalog_ldr örnek ismini verin. Properties denetçisini ya da Component Inspector panelini kullanarak autoload parametresini ve scalecontent parametresini false olarak ayarlayın. ACTIONSCRIPT İN TEMELLERİ 279

299 5. Bir actions katmanı oluşturun ve List bileşeninde seçili durumda olan kitaba göre bir katalog SWF dosyasını yükleyecek ActionScript kodunu ekleyin. Flash belgesine yeni bir katman ekleyin ve yeni katmanın ismini actions olarak değiştirin. Yeni katmanın Timeline yığınında diğer katmanların üzerinde olduğundan emin olun. actions katmanının 1 numaralı karesini seçin ve Actions paneline aşağıdaki kodu ekleyin. function loadcatalog(evt) { catalog_ldr.load(catalog_ls.selecteditem.data); } catalog_ls.addeventlistener( change, loadcatalog); Bu kod, loadcatalog isimli bir fonksiyonu tanımlar. Bu fonksiyon, seçili öğeye ait data özelliğinin değerini (SWF dosyasının konumu) yükler. Fonksiyon, bu SWF dosyasını Stage deki Loader bileşen örneğine yükler. Bu bileşenin örnek ismi catalog_ls dir. Bu ActionScript kodunun sonuna, kullanıcının katalogdaki List örneğine tıklamasını bekleyen bir izleyici (listener) yerleştirdiniz. Listedeki bir öğeye tıklandığında, loadcatalog fonksiyonu çağrılır. Fonksiyon catalog_ldr a listede seçili olan öğenin değerini yüklemesini söyler. Bu değer Values iletişim kutusunda tanımlanır ve SWF dosyasına ait yolu içerir. 280 DERS 9

300 6. FLA dosyasının doğru bir şekilde çalıştığından emin olmak için onu test edin. Herhangi bir sorun yoksa catalog.fla dosyasında yapmış olduğunuz değişiklikleri kaydedin. Sonra da File menüsünden Publish i seçerek dosyayı yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır. Önceki uygulamada, ana TechBookstore klasörünün içinde catalog isimli bir alt klasör oluşturmuş ve catalog01.swf ve catalog02.swf dosyalarını bu alt klasöre kaydetmiştiniz (bu klasör CD- ROM daki d lesson09/complete klasöründe de bulunuyor). Yani bu dosyayı test ettiğinizdeki bu iki SWF dosyasını catalog klasöründen catalog.swf dosyasına yüklemesi gerekir. Dosyalar yüklenmiyorsa, catalog klasörünü açın ve SWF dosyalarının ve klasörün kendisinin) burada olduklarından ve doğru adlandırıldıklarından emin olun. Ayrıca üçüncü adımda değerleri Values iletişim kutusuna doğru bir şekilde eklediğinizden de emin olun. Her şey düzgün çalışıyorsa ıy FLA dosyasını kaydedin, sonra da yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır. Çözüm dosyasında PNG resimlerine giden yol, bu dersteki alıştırmalarda ayarlad ığınız yoldan farklıdır. Yollar (path), çözüm dosyalarının dizin yapısıyla çalışılacak şekilde oluşturulmuştur. Bu nedenle, tamamlanmış dosyalardan birini kopyalayıp kendi TechBookstore klasörünüze yapıştırırken, dizin referanslarını sizin dosya yapınızla eşleşecek şekilde değiş tirmeyi unutmayın. Haberler Sayfasını Oluşturmak Tech Bookstore eun Haberler (News) sayfasını oluşturmak son derece kolaydır, çünkü bu sayfa daha önce oluşturduğunuz İncelemeler (Reviews) sayfasına çok benzer. Haberler sayfası; bir TextArea bileşeni, CSS ile biçimlendirilmiş bir metin ve uzak bir dosyadan metin içeriğinin yüklenmesini sağlayan bir LoadVars deyiminden oluşmaktadır. Bu uygulamada, CD-ROM da d bulunan bazı metin dosyalarını kullanacaksınız. ACTIONSCRIPT İN TEMELLERİ 281

301 1. Yeni bir belge oluşturun ve Stage in genişliğini 635 piksel, yüksekliğini de 345 piksel olarak ayarlayın. Publish Settings iletişim kutusunu açın ve HTML onay kutusunun işaretini kaldırın. OK düğmesine tıklayın, ana belgeye geri dönün ve dosyayı news.fla ismiyle kaydedin. Yeni bir Flash belgesi oluşturun ve Properties denetçisini kullanarak Stage in boyutlarını değiştirin. Stage in boyutlarını 635 piksel genişlikte ve 345 piksel yükseklikte olacak şekilde ayarlayın.flash belgesini TechBookstore klasörünün köküne (root) kaydedin ve yeni bölgeyi news.fla olarak adlandırın. Belgeyi yayınladığınızda bir HTML sayfasının oluşturulmasına ihtiyacınız yoktur. Burada sadece, belgeyi yayınladığınızda oluşturulan SWF dosyasını kullanmanız gerekir. bu nedenle, File menüsünden Publish Settings i seçin, Formats sekmesindeki HTML seçeneğinin işaretini kaldırın, sonra da OK düğmesine tıklayın. 2. TextArea bileşeninin bir örneğini Stage e sürükleyin ve örneğin genişliğini 615, yüksekliğini de 325 piksel olarak ayarlayın. TextArea örneğinin Stage deki konumunu ayarlayın. TextArea bileşeninin bir örneğini Components panelinden Stage e sürükleyin. Properties denetçisini maksimum boya getirin. TextArea bileşeninin genişliğini 615 piksel, yüksekliğini de 325 piksel olarak değiştirin. Örneğin Stage deki x ve y koordinatlarını 10 piksel olarak ayarlayın. Bu ayar, bileşene Stage in her yanında 10 piksel kalınlığında bir çerçeve uygulanmasını sağlayacaktır. TextArea örneğine news_txt ismini verin. Properties denetçisinde editable veya html parametrelerini ayarlamakla uğraşmanıza gerek yoktur. Bu parametreleri, daha ilerideki bir adımda ActionScript kullanarak ayarlayacaksınız. 3. Timeline daki Layer 1 katmanının ismini form olarak değiştirin ve bir actions katmanı ekleyin. Timeline daki Layer 1 katmanına çift tıklayın ve katmanın ismini form olarak değiştirin. form katmanının üzerine yeni bir katman ekleyin ve buna da actions ismini verin. Bu katmanlara 282 DERS 9

302 kazara herhangi bir sembol eklenmesini önlemek için bunları kilitleyin. Artık Stage e başka sembol eklemeyeceğiniz için, katmanları kilitleyebilir ve bu durumda da ActionScript kodları ekleyebilirsiniz. 4. CSS in SWF dosyasına ithal edilmesini sağlayacak ActionScript kodunu ekleyin. Daha önce yaptığınız bir uygulamada stil sayfalarının nasıl ithal edildiğini öğrenmiştiniz. Harici bir stil sayfası kullandığınız takdirde, Flash belgelerinizin her birinde aynı stil sayfasını kullanabilir ve tutarlı bir görünüm elde edebilirsiniz. actions katmanının 1 numaralı karesini seçin ve Actions paneline aşağıdaki kodu ekleyin. var flash_css = new TextField.StyleSheet(); flash_css.load( styles.css ); flash_css.onload = function(success:boolean) { if (success) { news_txt.stylesheet = flash_css; } else { trace( Error loading CSS file. ); } }; Bu ActionScript kodu, önceki uygulamada gördüğünüz koda çok benzer, ama bir farkla: Burada stil sayfasını review_txt örneğine bağlamak yerine, news_txt örneğine atıyorsunuz. 5. news isimli metin dosyasını yükleyin ve TextArea bileşeninin özelliklerini ayarlayın. Actions katmanının 1 numaralı karesindeki stil sayfası kodunun altına, aşağıdaki ActionScript kodunu ekleyin. Bu kod, harici bir metin dosyasının LoadVars nesnesi kullanılarak yüklenmesini sağlar. var news_lv:loadvars = new LoadVars(); news_lv.load( news.txt ); news_lv.onload = function(success:boolean) { if (success) { news_txt.text = this.content; } else { trace( unable to load text file. ); } }; Bu ActionScript kodunu da daha önceki uygulamalardan hatırlayacaksınız. ACTIONSCRIPT İN TEMELLERİ 283

303 6. TextArea örneğinin html ve editable özelliklerini ActionScript kullanarak ayarlayın. html ve editable özelliklerini Properties denetçisini kullanarak ayarlamak yerine ActionScript kullanarak ayarlayacaksınız. Bunu, aşağıdaki kodu mevcut LoadVars kodunun altına yerleştirerek yapabilirsiniz. news_txt.html = true; news_txt.editable = false; Buradaki ilk satır, html özelliğini true olarak ayarlar. Bu da HTML ile biçimlendirilmiş metni TextArea örneğinde (news_txt) görüntüleyebilmenizi sağlar. İkinci özellik (editable), kullanıcının metinde değişiklik yapmasını ve TextArea bileşenindeki içeriği değiştirmesini önler. editable özelliğini true olarak ayarlasanız (ya da bu satırı hiç yazmasanız) ve kullanıcı alandaki içeriği değiştirse bile siteniz zarar görmez. Değişiklikler sadece kullanıcının bilgisayarında görüntülenir; başka kimse bunları göremez. 7. news.fla dosyasını test edin ve SWF dosyasının doğru bir şekilde çalıştığından emin olun. Herhangi bir sorun yoksa FLA dosyasını kaydedin, sonra da Publish Settings iletişim kutusunu açarak buradaki HTML seçeneğinin işaretini kaldırın. Belgeyi yayınladığınızda TechBookstore klasöründe news.swf dosyası oluşturulacaktır. Metnin doğru bir şekilde yüklendiğinden emin olmak için Control >Test Movie komutunu kullanarak SWF dosyasını test edin. Her şeyin düzgün çalıştığından emin olduktan sonra belgeyi kaydedin (birinci adımda dosyayı kaydetmediyseniz belgeyi news.fla olarak adlandırın) ve FLA dosyasını yayınlayın. SWF dosyası ana TechBookstore sitesine yüklenecektir. 284 DERS 9

304 Giriş Sayfasını Oluşturmak Giriş (Home) sayfası da, LoadVars nesnesi kullanılarak Tech Bookstore a yüklenen biçimlendirilmiş bir metin bloğudur. Metin TextArea bileşeninin bir örneğine yüklenir. Bu bölümde, Tech Bookstore Web sitesinin giriş sayfasına yüklenecek olan SWF dosyasını oluşturacaksınız. Bu uygulamada, daha önceki uygulamalarda oluşturduğunuz varlıklardan bazılarını kullanacaksınız. Varlıkların tekrar kullanılması geliştirme sürecini hızlandırdığı için, burada kullanabileceğiniz en kolay yol, sayfayı sıfırdan başlayıp oluşturmak yerine, Haberler (News) bölümünün bir kopyasını oluşturup, bunun üzerinde gereken değişiklikleri yapmaktır. Bu nedenle, bu uygulamada Haberler sayfasının kopyasını oluşturacak ve bu kopyayı Giriş sayfasına dönüştüreceksiniz. 1. Önceki uygulamada oluşturduğunuz news.fla dosyasını açın. dosyanın yeni bir versiyonunu home.fla adıyla TechBookstore klasörüne kaydedin. news.fla dosyasını başlangıç dosyası olarak kullanmak, yeni dosyayı oluştururken uygulamanız gereken pek çok adımı atlamanızı sağlar ve ActionScript kodunu da sıfırdan başlayarak yazmak zorunda kalmazsınız. Yapmanız gereken tek şey, Stage in ve TextArea bileşeninin boyutlarını değiştirmek, örnek isimlerinde ve ActionScript kodunda biraz değişiklik yapmaktır; bu da size zaman kazandırır. Önceki derste oluşturduğunuz news.fla dosyasının kopyasını açın. File menüsünden Save As i seçin. Belgeye home.fla ismini verin, sonra da Save düğmesine tıklayın. Bu dosyayı önceki belgeyle aynı yere, TechBookstore klasörüne kaydedin. 2. Belgede Stage in ve TextArea örneğinin boyutlarını değiştirin. Tech Bookstore sitesinin Giriş sayfasının bir gündemdeki kitap modülü olduğu için, home.fla belgesinin boyutlarını siteye uyacak şekilde değiştirmeniz gerekiyor. Selection aracını kullanarak Stage deki TextArea bileşen örneğine tıklayın ve Properties denetçisini kullanarak bileşenin genişliğini 570 piksel olarak ayarlayın. Bileşenin yüksekliğini 325 piksel, x ve y koordinatların da 10 piksel olarak bırakın. Stage e tıklayın ve belgenin boyutlarını 580 x 345 piksel olarak ayarlayın. ACTIONSCRIPT İN TEMELLERİ 285

305 3. TextArea örneği için yeni bir örnek ismi girin ve actions katmanındaki ActionScript kodunu değiştirin. Stage deki TextArea bileşen örneğini seçin ve Properties denetçisine yeni bir örnek ismi (home_txt) yazın. Bileşen örneğinin ismini değiştirdiğiniz için, ActionScript kodunuzda TextArea bileşenine ait başvuruları da değiştirmeniz gerekiyor. Ayrıca news_lv başvurularını da home_lv olarak değiştireceksiniz. Kodun değiştirilmiş hali aşağıdaki gibi olacaktır. var flash_css = new TextField.StyleSheet(); flash_css.load( styles.css ); flash_css.onload = function(success:boolean) { if (success) { home_txt.stylesheet = flash_css; } else { trace( Error loading CSS file. ); } }; var home_lv:loadvars = new LoadVars(); home_lv.load( home.txt ); home_lv.onload = function(success:boolean) { if (success) { home_txt.text = this.content; } else { trace( unable to load text file. ); } }; home_txt.html = true; home_txt.editable = false; Bu ActionScript kodu news.fla dosyasına ait kodla neredeyse aynıdır. Burada, sadece örnek isimlerinin ve yüklenen harici metin dosyasının ismini değiştirmeniz gerekti. Bu ActionScript kodunun ikinci satırdan son satıra kadar olan kısmı, Stage deki home_txt örneğinin HTML ile biçimlendirilmiş metni doğru olarak göstereceğinden emin olmanızı sağlar. Metninize ilave biçimlendirme özellikleri eklemek için resimler, kalın, italik metinler ve madde imli listeler kullanabilirsiniz. Son satır ise editable özelliğini false olarak ayarlar. Bu da, kullanıcıların ekranlarındaki metinde değişiklik yapmasını engeller. 4. CD-ROM daki lesson09/assets klasöründe bulunan home.txt, home01.jpg ve home02. jpg dosyalarını TechBookstore klasörüne kopyalayın. Flash belgenizi doğru bir şekilde test edebilmek içim, LoadVars kullanarak yüklenebilen bir metin dosyasını kopyalamanız ya da oluşturmanız gerekir. Tech Bookstore sitesinin giriş sayfası için bir metin dosyası uygundur. Bu dosyayı CD-ROM da bulabilirsiniz, yani giriş 286 DERS 9

306 sayfasının içeriğini sizin yapmanız gerekmiyor. Tech Bookstore sitesinin giriş sayfasına yazmak istediğiniz başka şeyler varsa, tabii ki bunları yazabilirsiniz. Ama tercihiniz bu yönde değilse, CD deki home.txt dosyasını kullanabilirsiniz. CD-ROM da lesson09 klasörünü bulun. home.txt dosyasını ve iki resmi (home01.jpg ve home02.jpg) sabit diskinizdeki TechBookstore klasörüne kopyalayın. Metin dosyasını açın ve HTML biçimlendirme kodlarını inceleyin. İki resim dosyası, HTML ile biçimlendirilmiş i metinde kullanılıyor ve SWF dosyasına home.txt dosyasındaki <img> etiketi kullanılarak yükleniyor. Tech Bookstore a yüklenecek metin dosyasını kendiniz oluşturuyorsanız, HTML kodunu ve biçimlendirmeyi istediğiniz basitlikte ya da karmaşıklıkta oluşturabilirsiniz. Flash, HTML sürüm 1.0 etiketlerinin küçük bir alt kümesini destekler. Anchor <a>: Flash metin alanlarınıza linkler eklemenize imkân sağlar. <a> etiketi ayrıca, linkin hangi karede ya da pencerede açılmasının gerektiğini belirtmenize imkân sağlayan target niteliğinin kullanımını da destekler. Bir stil sayfası kullanıyorsanız, a:link, a:hover ve a:active e ait renkleri ve nitelikleri de belirtebilirsiniz. Bold <b>: Metni kalın olarak görüntüler. Break <br>: Belirtilen noktaya bir satır sonu ekler. Font <font>: Geçerli fontu, büyüklüğünü ve rengini değiştirmenize imkân sağlar. Stil sayfalarını kullanmadığınız ve metninizi biçimlendirmek istediğiniz durumlarda bu etiket çok faydalıdır. Image <img>: Metin alanlarınıza resim eklemenize imkân sağlar. Bu etiket, yerel ya da harici resim dosyalarının, SWF dosyalarının, hatta kütüphaneden sembollerin yüklenmesini destekler (sembolü bir bağlantı tanıtıcısına atayarak). Italics <i>: Metni italik olarak görüntüler. List Item <li>: HTML Lden d biraz farklı olarak, <li> etiketi bir çift <ol> (ordered list; sıralı liste) ya da <ul> (unordered list; sırasız liste) etiketinin arasında yer almaz. Flash htaki <li> etiketi, madde işaretli listeleri kolayca oluşturmanıza imkân sağlar. Paragraph <p>: Yeni bir paragraf eklemenizi sağlar. Span <span>: Bir kod bloğuna stiller eklemenize imkân sağlar. TextFormat <textformat>: Flash hta basit tablolar oluşturmanıza imkân sağlar. Underline <u>: Metnin bir bölümünün altını çizer. Flash sadece bir düzine kadar etiketi desteklese de, sitenizdeki metinleri, bunları Flash ı n yerleşik CSS desteğiyle bir arada kullanarak biçimlendirdiğinizde son derece etkileyici sonuçlar elde edebilirsiniz. ACTIONSCRIPT İN TEMELLERİ 287

307 Bir resmi sadece TextArea örneğine yüklerseniz ve resmin boyutları TextArea örneğinin boyutlarından büyükse, kaydırma çubukları görüntülenmez. Kaydırma çubuklarının etkin hale gelebilmesi için, resmi takip eden bir metnin olması gerekir. büyük resimler yüklüyor ve bunların kaydırılabilmesini istiyorsanız, TextArea yerine ScrollPane bileşenini kullanmanız gerekir. Aynı iş i yapması için bir movie clip le birlikte kendi ActionScript kodunuzu da yazabilirsiniz. Bu dosyayı olduğu gibi kullanmak istiyorsanız kapatın. Fakat tercihiniz bu değilse, artık nasıl biçimlendirildiğini bildiğinize göre dosyada istediğiniz değişiklikleri yapabilirsiniz. 5. Flash belgesinde her şeyin doğru bir şekilde çalıştığından emin olun. home.fla dosyasını kaydedin, sonra da yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır. Control menüsünden Test Movie yi seçip FLA dosyasını test ortamında test ederek, çalışmasında herhangi bir sorun olmadığından emin olun. SWF dosyasında ve biçimlendirmede herhangi bir sorun olmadığını gördükten sonra, geliştirme ortamına geri dönün. Sonra da FLA dosyasını kaydedin ve yayınlayın. TechBookstore klasöründe bir SWF dosyası oluşturulacaktır. Menüyü Canlandırmak Bu uygulamada, her düğmeye tıklandığında Tech Bookstore sitesinde aşağıya doğru açılan menüleri canlandıracaksınız. Bunların işlevselliğini adresindeki örnek Web sitesinde görebilirsiniz. Bir düğmeye tıklandığında menü aşağıya doğru açılır, imleç menüden uzaklaştırıldığında ise, menü yukarı doğru kayarak kapanır. Menünün kullanılacağı animasyonu daha önceki derslerden birinde oluşturmuştunuz. Şimdi de ziyaretçi 288 DERS 9

308 düğmelere tıkladığında ya da imleci bunlardan uzaklaştırdığında animasyonun oynamasını sağlayacak ActionScript kodunu yazacaksınız. 1. bookstore13.fla dosyası açık değilse, sabit diskinizdeki TechBookstore klasöründen bu dosyayı açın. Bu dosyada daha önce bazı düzenlemeler yaparak kütüphanedeki mcsamplechapters ve mctoc u silmiştiniz. 2. Bu uygulamada daha sonra ActionScript kodu kullanarak, düğmeleri ve movie clip leri kontrol edebilmek için menüdeki tüm örneklere birer örnek ismi verin. Gezinti çubuğundaki üç ana düğmeye, sonra da bunların arkasında bulunan üç menüye örnek isimleri vermeniz gerekiyor. Ana Stage in üst kısmında yer alan üç düğmeyi adlandırın. Bunu yaparken gerekiyorsa buttons katmanının kilidini çözün. Products (Ürünler) düğmesine products_btn, Company (Firma) düğmesine company_btn ve Contact (İrtibat) düğmesine de contact_btn örnek isimlerini verin. Bu işlemleri tamamladıktan sonra buttons katmanını kilitleyin. Şimdi de, bu üç düğmenin arkasında bulunan üç menüye örnek isimleri vereceksiniz. buttons katmanını gizlemek işinizi kolaylaştırabilir. Menülerin kendisi graphics katman klasöründe menu katmanında yer almaktadır. Menü katmanına sağ tıklayın ya da Control tuşuyla tıklayın ve bağlam menüsünden Lock Others komutunu seçin. Mask katmanını gizleyin. Products düğmesinin arkasındaki menüye tıklayın ve buna productsmenu_mc örnek ismini verin. Sonra da Company düğmesinin arkasındaki menüye companymenu_mc,, Contact düğmesinin arkasındaki menüye de contactmenu_mc örnek ismin verin. Sembol örneklerinin her birine soneklerin eklenmiş olduğuna dikkat edin. ActionScript kodunu yazmaya başladığınızda bunlar sayesinde kod ipuçlarını (code hints) kullanabileceksiniz. Menü movie clip inin içinde isim vermeniz gereken başka bir movie clip vardır. productsmenu_ mc örneğine çift tıklayın ve bu movie clip in içindeki menüyü seçin. Properties denetçisini maksimum boya getirin ve bu klibe menu1_mc örnek ismini verin. Örneğin üzerinde ACTIONSCRIPT İN TEMELLERİ 289

309 bulunduğu katmanın kilidini çözmeniz gerekebilir. Sonra, bu katmanda yer alan menüye ait tween animasyonundaki ikinci örneği seçin. Buna da aynı ismi (menu1_mc) verin. Bu işlemi bu animasyondaki üçüncü ve son anahtar kare için de tekrarlayın. Düzenleme çubuğunu kullanarak ana Stage e geri dönün. companymenu_mc örneğine çift tıklayın ve bunun içindeki klibe menu2_mc örnek ismini verin. Düzenleme çubuğunu kullanarak ana Stage e geri dönün ve bu işlemleri son menü için de tekrarlayarak Properties denetçisine menu3_mc örnek ismini girin. İşiniz bittikten sonra menu katmanını kilitleyin. 3. actions katmanının 1 numaralı karesinde, Actions paneline aşağıdaki ActionScript kodunu ekleyin. Bu kod menünün değişkenlerine ilk değerlerini atar. Koda ayrıca, ziyaretçi Stage e sağ tıkladığında menüyü kaldıran bir satırı da ekleyeceksiniz. Bu kareye bir stop eylemi girilmiş durumdadır. Bu eylemin altına aşağıdaki üç kod satırını eklemeniz gerekiyor. Üç değişken, üç menüden hangisinin açık durumda olduğunu (tabii açık bir menü varsa) izlemek için kullanacağınızı bayraklardır (flag). Değer 0 olarak ayarlanmışsa, kayan menü kapalı durumdadır (etkin durumda değildir). Değişkenin değerinin 1 olması, menünün açık (etkin) ve Stage de görünür durumda olduğunu gösterir. var prodmenu:number = 0; var compmenu:number = 0; var contactmenu:number = 0; Sonra değişkenlerin altına aşağıdaki ActionScript kod satırını ekleyin. Stage.showMenu = false; Bu ActionScript kodunu belgenize eklediğinizde, SWF dosyası yayınlandıktan sonra ziyaretçiler dosyaya sağ tıkladıklarında (ya da Control tuşunu basılı tutup tıkladıklarında) 290 DERS 9

310 Flash Player menü seçeneklerinin çoğunu göremezler. Normalde açılan bağlam menüsü Zoom (Yakınlaş) ve Play (Oynat) gibi birkaç seçenek içerir. Ama bu ActionScript kodunu eklerseniz, ziyaretçinin Flash Player ayarlarını kontrol etmesine imkân sağlayan Settings (Ayarlar) seçeneğinin dışındaki seçeneklerin hepsi menüden çıkarılır. 4. actions katmanının 1 numaralı karesine, kullanıcı imleci menü alanından uzaklaştırdığında bütün menülerin kapanmasını sağlayan aşağıdaki kodu girin. Görünmez düğme, kullanıcı imleci üzerine getirdiğinde bütün menüleri kapatır. Kitapta daha önce, menüler açık durumdayken bunların etrafını çevreleyen görünmez bir düğme oluşturmuştunuz. Daha sonra, imleç görünmez düğmenin üzerine getirildiğinde, SWF dosyasına menüleri kapatacak fonksiyonu ne zaman çağırmasının gerektiğini söyleyen ActionScript kodunu eklemeniz gerekiyor. İmleç düğmenin üzerine getirildiğinde, bu ActionScript kodu kullanılarak açık durumdaki bütün menüler kapatılır. Aşağıdaki kodun yerine ActionScript teki for..in döngüsü de kullanılabilirdi. Her ne kadar bu konu kitabın kapsamı dışında olsa da, ActionScript öğrenmeye devam ederseniz, bu konuyu araştırarak buradaki kodu uygun şekilde değiş tirebilirsiniz. Bu durumda yapacağınız şey, yukarıdaki adımda tanımlanan üç değiş keni bir nesneye yerleştirmektir. for.. in döngüsü kullanılarak, nesnedeki her bir öğe üzerinde döngüye girebilir ve bir kod bloğunu çalıştırabilirsiniz. Bu da gereken kod miktarını azaltmanızı, ayrıca kodu daha esnek hale getirmenizi sağlar. Tech Bookstore a ekleyeceğiniz ActionScript kodu çok uzun olmadığı için, ActionScript kodunun tekrarlanmasında bir sakınca yoktur. Şu an için, dilin bu kısımlarını doğru bir şekilde kullanmayı öğrenmek bu işin en önemli tarafı. //görünmez düğme this.btnreturnmenus.onrollover = function() { if (contactmenu == 1) { contactmenu_mc.gotoandplay( slideup ); contactmenu = 0; } if (compmenu == 1) { companymenu_mc.gotoandplay( slideup ); compmenu = 0; } if (prodmenu == 1) { productsmenu_mc.gotoandplay( slideup ); prodmenu = 0; } }; ACTIONSCRIPT İN TEMELLERİ 291

311 Bu fonksiyon btnreturnmenus örneğe ait bir onrollover olay işleyicisinin içine yerleştirilmiştir. Yani kullanıcı imleci btnreturnmenus örneğinin (Stage deki görünmez düğmenin) üzerine her getirdiğinde, bu fonksiyon çalıştırılır. Kod menülerin her birine bakar ve değerin 1 olup olmadığını, yani SWF dosyasında menünün açık olup olmadığını kontrol eder. Değişkenin değeri 1 ise, menü açıktır (yani aşağıya doğru tam olarak açılmış) ve kapatılması (yukarı doğru canlandırılması) gerekiyor demektir. Bu nedenle, menünün kapanması için ilgili movie clip e (productsmenu_mc, companymenu_mc ya da contactmenu_mc) ait oynatım kafasının slideup etiketli kareye gitmesini sağlamanız gerekiyor. Yukarıdaki kodda, kapanan yuvalanmış movie clip lere giden yola da dikkat edin. Kod btnreturnmenus örneği için yazıldığından, menü movie clip lerine ait yollar contactmenu_m c.gotoandplay( slideup ) olarak gösterilebilir. Bu, üzerine yerleştirildiği Timeline a (yani Stage e) başvuruda bulunan bir düğme kodudur. Stage den contactmenu_mc örneğine ve buna ait gotoandplay metoduna doğrudan başvuruda bulunabilirsiniz. 5. Görünmez düğmenin kodu eklendiğine göre, bunun altına menülerin kendisi için gereken kodları girebilirsiniz. İmleç görünmez düğmenin üzerine getirildiğinde menülerin kapanmasını sağlayacak kodu eklediğinize göre, ana gezinti öğelerine tıklandığında menüleri canlandıracak kodu eklemenin zamanı geldi demektir. Eklemeniz gereken kod btnreturnmenus örneğinin koduna çok benzer. Ama burada yapmanız gereken, üzerine tıklanan menüyü açmak ve diğer iki menü açıksa bunları kapatmaktır. //products (ürün) menüsü this.products_btn.onrollover = function() { if (contactmenu == 1) { contactmenu_mc.gotoandplay( slideup ); contactmenu = 0; } if (compmenu == 1) { companymenu_mc.gotoandplay( slideup ); compmenu = 0; } if (prodmenu == 0) { productsmenu_mc.gotoandplay( slidedown ); prodmenu = 1; } }; 292 DERS 9

312 //company (firma) menüsü this.company_btn.onrollover = function() { if (prodmenu == 1) { productsmenu_mc.gotoandplay( slideup ); prodmenu = 0; } if (contactmenu == 1) { contactmenu_mc.gotoandplay( slideup ); contactmenu = 0; } if (compmenu == 0) { companymenu_mc.gotoandplay( slidedown ); compmenu = 1; } }; //contact (irtibat) menüsü this.contact_btn.onrollover = function() { if (compmenu == 1) { companymenu_mc.gotoandplay( slideup ); compmenu = 0; } if (prodmenu == 1) { productsmenu_mc.gotoandplay( slideup ); prodmenu = 0; } if (contactmenu == 0) { contactmenu_mc.gotoandplay( slidedown ); contactmenu = 1; } }; Bu kod ilk bakışta çok uzun gibi görünse de, aslında son derece basittir, çünkü belirli kod parçaları sürekli olarak tekrarlanmaktadır. Gezinti bölümünde üç menü yer alır: products, company ve contact. Her menü öğesi için, diğer iki menüyü kontrol ederek bunların açık olmadığından emin olmanız gerekir. Bunu daha önce ayarlamış olduğunuz üç değişkene (prodmenu, compmenu ve contactmenu) bakarak anlayabilirsiniz. Bu değişkenlerin değerleri 1 ise, ilgili menünün açık olduğunu ve açılması gereken menüyü görüntüleyebilmek için bunları kapatmanızın gerektiğini anlarsınız. ACTIONSCRIPT İN TEMELLERİ 293

313 Yukarıdaki kod, her biri bir menü öğesine ait üç ana kısımdan oluşuyor. products_btn düğmesine tıkandığında, Flash compmenu ya da contactmenu değişkeninin değerinin 1 olup olmadığını (yani bunlarla ait menülerin açık olup olmadığını) kontrol eden yerel fonksiyonu çalıştırır. Eğer bir menü açıksa, buna ait değişkenin değeri 0 olarak ayarlanır ve menü kapatılır; bu daha önce btnreturnmenus örneğine ait koda benzerdir. Son olarak da, açılması gereken menünün (bu örnekte products) açık mı, kapalı mı olduğunu kontrol edersiniz. Bu menü kapalıysa, açılmasını sağlamanız gerekir. Bu kodda herhangi bir else deyiminin kullanılmasına gerek yoktur, çünkü açılması gereken menü zaten açıksa işlem tamamlanmış demektir. Bu durumda yapmanız gereken tek şey, bir sonraki menü öğesine giderek onun açık olup olmadığını kontrol etmektir. company_btn örneğinde de mantık aynıdır. Aradaki tek fark, burada prodmenu ve contactmenu nün kapalı olup olmadığını kontrol etmenizdir. Yine her şeyi mümkün olduğu kadar basit tutmak amacıyla, buradaki menüler için olabilecek en zarif kodu kullanmadık. Burada önemli olan sadece yöntem değil, ayrıca menülerin nasıl hedeflendiği ve if deyimlerinin anlaşılması. Bu kod kısaltılabilir, ama kısaltıldığı oranda karmaşıklığı da artabilir ve nasıl çalıştığının anlaşılması zorlaşabilir. Bu kodu basitleştirmenin belki de en iyi yolu, iki parametre (geniş letilen bir menü öğesi ve gizlenen menü öğelerinden oluşan bir dizi) alan bir fonksiyon oluşturmaktır. Bu mantığı bir fonksiyona dönüştürerek, kodu üç durumda da tekrar kullanabilirsiniz. Böylece, sadece fonksiyona aktarılan parametreleri ayarlamanız yeterli olur. 6. Kodunuzun sözdizimini kontrol edin ve Actions panelini kullanarak biçimlendirin. Sonra da test ortamında menünün animasyonunu test edin. Actions panelinin üst kısmında yer alan Check Syntax (Sözdizimini Kontrol Et) düğmesine tıklayın. ActionScript kodunuzda herhangi bir sorun varsa (örneğin bir parantezin girilmesi unutulmuşsa), Output panelinde bir mesaj görüntülenir. Bu durumda kodunuzun 3-5. adımlardaki kodlarla aynı olup olmadığını tekrar kontrol etmeniz gerekir. hataları düzelttikten sonra, Actions panelinin araç çubuğundaki Auto Format düğmesine tıklayın. Bu düğmeye tıkladığınızda ActionScript kodundaki girintiler uygun şekilde ayarlanır ve deyimlerin sonunda eksik olan noktalı virgüller tamamlanır. Menülerin SWF dosyasında doğru şekilde hareket edip etmediklerini görmek için, Ctrl+Enter (ya da Mac te Cmd+Enter) tuşlarına basın. Herhangi bir sorunla karşılaşırsanız, öncelikle ActionScript kodunun 3-5. adımlardaki kodun aynısı olup olmadığını kontrol edin. Sorun maskeyle ya da görünmez düğmeyle ilgili gibi görünüyorsa, maskenin menü açıldığında menüyü uygun bir şekilde kapladığından ve görünmez düğmenin menünün etrafını uygun bir şekilde çevrelediğinden emin olun. 294 DERS 9

314 Menüyü test ettiğinizde, maskenin pek uygun bir şekilde ayarlanmamış olduğunu görebilirsiniz. Menüler maskenin dışına çıkıyorsa, maskenin büyüklüğünü menüyü kapatmayacak şekilde tekrar ayarlamanız gerekir. görünmez düğmenin menüyü kapatan hit alanının doğru çalışmadığını da fark edebilirsiniz. Durum buysa, menünün boyutlarını biraz değiş tirmeniz gerekir. 7. Menü animasyonu düzgünse, FLA dosyasında yaptığınız değişiklikleri kaydedin. bookstore13.fla dosyasında yaptığınız değişiklikleri kaydedin ve bir sonraki uygulamaya geçin. Bu uygulamada, menünün içindeki düğmelerin çalışmasını sağlayacak kodu ekleyeceksiniz. Menünün Düğmelerini Kontrol Etmek Önceki uygulamayla karşılaştırıldığında menünün düğmeleri çocuk oyuncağıdır. Bir düğmenin faaliyet alanı, olay fonksiyonlarının düğmenin Timeline ını değil, düğmenin üzerinde bulunduğu Timeline ı etkilediği anlamına gelir. Yani, başka bir şey belirtmediğiniz takdirde, düğmeler ana Timeline ı kontrol eder. Bu uygulamada, ana Timeline ı movie clip lerde yuvalanmış bulunan bir Timeline dan kontrol etmek istediğiniz için bazı ayarlar yapmanız gerekiyor. Bu biraz ustalık istiyor gibi görünse de, bu derste daha önce gördüğümüz faaliyet alanı konusunu anımsarsanız işiniz o kadar zor olmayacaktır. Bir menüdeki düğmelerden birine tıklandığında, bir mesaj birkaç Timeline dan geçerek ana Timeline a gider. Sonra da oynatım kafası yeni bir sayfaya gider. 1. Properties denetçisini kullanarak menüdeki düğmelerin her birine örnek isimleri verin. Bu düğmeleri ActionScript kodunuzda hedefleyebilmeniz için, bunlara örnek isimleri vermeniz gerekir. Hatırlayacağınız gibi, menünün düğmelerinin her biri, ana menü movie clip inin içinde yuvalanmış bulunan movie clip menüsünün içine yerleştirilmiştir. Bu nedenle, productsmenu_mc örneğine ve sonra da menu1_mc örneğine tıkladığınızda iki düğme bulacaksınız. Catalog düğmesine tıklayın ve Properties ACTIONSCRIPT İN TEMELLERİ 295

315 denetçisine catalog_btn örnek ismini girin. Sonra da sağdaki düğmeye tıklayın ve buna da reviews_ btn örnek ismini verin. Düzenleme çubuğunu kullanarak ana Stage e geri dönün ve bu işlemleri diğer iki menü için de tekrarlayın. Bunlara verdiğiniz isimler son derece sezgisel olmalıdır. menu2_mc örneğinin içindeki düğmelere tour_btn ve news_btn örnek isimlerini verin. Sonra da menu3_mc düğmelerine feedback_btn ve map_btn örnek isimlerini verin. 2. Yeni oluşturduğunuz açılır listelerde bulunan altı düğmeyi kontrol etmek için kullanılan ActionScript kodunu ekleyin. Bu kodu, önceki uygulama eklediğiniz kodun sonuna yerleştirin. Bu düğmeleri, ziyaretçilerin Tech Bookstore da dolaşmalarına yardımcı olmak için oluşturdunuz ve ActionScript i kullanarak bunları hedefleyebilmek için bunlara örnek isimleri verdiniz. ActionScript kodu, düğmeyi hedefler ve böylece, düğmeye tıklandığında fonksiyonun çağrılmasını sağlar, sonra da fonksiyon ana Timeline ın üzerindeki oynatım kafasına Tech Bookstore daki doğru sayfaya gitmesini söyler. Düğme nereye yerleştirilirse yerleştirilsin, düğmenin üzerine yerleştirildiği Timeline ın etkileneceğini unutmayın. Bu nedenle, bir movie clip in içinde yuvalanmış olan bir düğme için kod yazıyor olsanız bile, yazdığınız fonksiyon geçerli Timeline ı etkiler. Yani, Flash a düğmeyi nerede araması gerektiğini söylemeniz gerekir, ama oynatım kafasının hareket edeceği doğru Timeline için faaliyet alanını belirtmeniz gerekmez. Ana Timeline daki actions katmanının 1 numaralı karesini seçin. Actions panelini maksimum boya getirin ve Script bölmesine aşağıdaki ActionScript kodunu girin. this.productsmenu_mc.menu1_mc.catalog_btn.onrelease = function() { gotoandstop( catalog ); }; 296 DERS 9

316 this.productsmenu_mc.menu1_mc.reviews_btn.onrelease = function() { gotoandstop( reviews ); }; this.companymenu_mc.menu2_mc.tour_btn.onrelease = function() { gotoandstop( tour ); }; this.companymenu_mc.menu2_mc.news_btn.onrelease = function() { gotoandstop( news ); }; this.contactmenu_mc.menu3_mc.feedback_btn.onrelease = function() { gotoandstop( feedback ); }; this.contactmenu_mc.menu3_mc.map_btn.onrelease = function() { gotoandstop( map ); }; Düğme fonksiyonlarını, daha önce oluşturduğunuz FLA dosyalarında diğer düğmeler için girdiğiniz koddan hatırlıyor olmalısınız. Yapı size tanıdık gelse de, düğmenin hedeflenmesi tanıdık gelmeyebilir. Bu bağlamda, this anahtar sözcüğü geçerli Timeline ı, yani ana Stage i gösterir. Kod bu sözcük kullanılmasa da çalışır, ama ActionScript kodunuzu başka bir yere taşıdığınızda, bu sözcük faydalı olabilir. Bunun ardından, ana Stage de bulunan contactmenu_ mc movie clip ini, sonra da bunun içindeki menu3_mc movie clip ini hedefliyorsunuz. menu3_mc movie clip inin içinde düğme yer aldığı için, map_btn örnek ismiyle devam ediyorsunuz. Kullanmak istediğiniz örneği hedeflediğiniz için, onrelease olay işleyicisini ve yerel fonksiyonunu kalan kısmını yazabilirsiniz. Şu anda, yeni bir sayfanın başladığı her karede etiketleriniz var. Bu kare etiketleri, Tech Bookstore sitesinde dolaşmak için kullanılıyor. gotoandstop eyleminin hedefi map tir (kare etiketinin ismi). Kare etiketleri tırnak içinde yazılmalıdır (bu onların bir dize olduğunu gösterir). Tech Bookstore sitesi içine gereken ActionScript kodlarının büyük bir kısmını şaşılacak derecede kısa bir sürede yazıp bitirdiniz. Bu kitaptaki çalışmanızın geri kalan kısmında, bu derste ve daha önceki derslerde hazırladığınız FLA dosyalarını ana siteyle bütünleştireceksiniz. Ayrıca, 10. Ders te siteyi optimize edeceksiniz. 3. Düğmelerin doğru şekilde çalışıp çalışmadığını görmek için, Control menüsünden Test Movie yi seçerek bunları test edin. Bir menüyü açmak için bir düğmeye tıkladığınızda, menü aşağıya doğru hareket eder. İmleci menü alanından uzaklaştırıp görünmez düğmenin üzerine getirdiğinizde, yukarı doğru hareket ederek menüyü kapatır. Menüdeki bir düğmeye tıklarsanız, bunun sizi Tech Bookstore da başka bir sayfaya götürmesi ve durması gerekir. Menüler doğru şekilde ACTIONSCRIPT İN TEMELLERİ 297

317 hareket etmiyorsa, geri dönün ve örnek isimlerinizi ve bu dersteki kodu bir daha kontrol edin. Üç menüdeki düğmelerin sizi doğru sayfaya götürdüğünden de emin olun. Menü hâlâ doğru çalışmıyorsa, CD-ROM da tamamlanmış dosyayı bulun ve kendi oluşturduğunuz dosyayı, bu FLA dosyasıyla karşılaştırın. Şu anda bu sayfaların içeriği yüklenmemektedir. Bu sorunu bir sonraki derste gidereceksiniz. Şimdilik Stage in sağ tarafındaki başlığa bakarak sayfaların değişip değişmediğini kontrol etmeniz yeterli. 4. FLA dosyasında yaptığınız değişiklikleri kaydedin. Tamamlanmış çalışmaların kopyalarını CD-ROM daki lesson09/complete klasöründe bookstore13.fla, catalog.fla, home.fla ve news.fla isimleriyle bulabilirsiniz. Yazdığınız kodla ilgili herhangi bir sorun varsa, bu dosyada ana Timeline ın üzerinde kodların bir kopyasını bulabilirsiniz. Sıradaki derste, önce bu derste ve önceki derslerde oluşturduğunuz SWF dosyalarının hepsini yükleyeceksiniz. Sonra da Tech Bookstore sitesini test edecek, hataları ayıklayacak ve uygulamadaki bölümlerin her biri için bir ilerleme çubuğu (ProgressBar bileşeni) ekleyeceksiniz. Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: ActionScript 2.0 ı öğrendiniz (Sayfa 242). Nesnelerin, metotların ve özelliklerin nasıl kullanıldığını öğrendiniz (Sayfa ). Kesin tip belirleme özelliğinin değişkenlerde nasıl kullanıldığını öğrendiniz (Sayfa 245). ActionScript kodlarının yazılmasını hızlandırmak için kod ipuçlarını kullandınız (Sayfa ). Fonksiyonları ve koşullu deyimleri kullandınız (Sayfa ). Faaliyet alanları ve değişkenler hakkında bilgi edindiniz (Sayfa ). ActionScript kodunuzda _root, _parent ve seviyeleri nasıl kullanacağınızı öğrendiniz (Sayfa ). LoadVars nesnesini yoğun bir şekilde kullandınız (Sayfa ). Reviews sayfasını oluşturdunuz (Sayfa ). Kodunuza olaylar, olay işleyicileri ve izleyiciler eklediniz (Sayfa ). Bir belgeye yüklenen metni biçimlendirmek için CSS i kullandınız (Sayfa ). Catalog, News ve Home sayfalarını oluşturdunuz (Sayfa ). Tech Bookstore daki menülerin hareket etmesini sağlayacak kodu eklediniz (Sayfa ). Tech Bookstore menülerinin çalışmasını sağlayacak ActionScript kodunu eklediniz (Sayfa ). 298 DERS 9

318 Flash İçeriğini 10 Yüklemek ve Optimize Etmek Parçaları birleştirmeye başlamanın zamanı geldi. Kitapta şu ana kadar, Tech Bookstore Web sitesinin içeriğini barındıracak olan FLA dosyasını oluşturdunuz. Web sitesinin içeriği, sadece birinin belirli bir düğmeye tıklaması sonucunda arabirime yüklenecek olan küçük parçalara bölündü. Bu, herhangi tipte bir Macromedia Flash uygulaması oluştururken kullanılabilecek en hassas yaklaşımdır; çünkü başlangıçtaki (indirilecek) SWF dosyasını olabildiğince küçük tutmaktadır. İçeriğ in Tech Bookstore sitesine yüklenmesi

319 Web sitesi içeriğini küçük parçalara ayırmanın başka avantajları da vardır. Bunlar diğer avantajlara göre daha az dikkat çekici olmalarına rağmen daha önemsiz değildir. Bu şekilde son kullanıcılar, ilgilenmedikleri içeriğin indirilmesini beklemek zorunda bırakılmaz ve projenin geliştirilmesiyle ilgilenen birden fazla insan proje üzerinde çalışabilir. Eğer her şeyi tek bir Flash dosyasının içine yerleştirdiyseniz, indirme süresi çok uzun olacaktır ve projenin üzerinde sadece siz çalışabilirsiniz. Bu derste, Web sitesinin işlevsel özelliklerini tamamlayacak ve sitenin yayınlanması işlemini Ders 11 e bırakacaksınız. İşe, oluşturduğunuz küçük SWF dosyalarını toplamakla başlayacak ve Flash uygulamanızı olabildiğince verimli kullanılabilecek bir hale getirmeyi öğreneceksiniz. İşiniz bittikten sonra, yayınlamadan ve İnternet e (ya da burada olduğu gibi yerel Web sunucunuza) göndermeden önce her şeyin düzgün çalıştığından emin olmak için uygulamayı test edecek ve hatalarını ayıklayacaksınız. Yarısı yenmiş bir muzu satamayacağınız gibi, yarısı çalışan bir Flash uygulamasını da İnternet üzerinden sunamazsınız. Böyle bir şeyi aklınızdan geçirdiyseniz kendinizden utanmalısınız. Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Web sitelerinin nasıl optimize edileceğini öğreneceğiz. Flash projelerini nasıl organize edeceğimizi öğreneceğiz Oynatım performansını artırmak için runtime bitmap caching (çalışma zamanında bitmap i ön belleğe alma) özelliğini kullanacağız. SWF dosyalarını bir Loader bileşen örneğine yükleyeceğiz. Yü kleme işleminin ilerleyişini göstermek için olay işleyicilerle birlikte dinamik bir metin alanı kullanacağız. Metin görüntülemek için LoadVars nesnesiyle birlikte dinamik bir metin alanı kullanacağız. Giriş, Katalog, İnceleme, Tur ve Haber sayfalarına içerik yükleyeceğiz. Flash htan dışarıya veri göndereceğiz. Yü klenmekte olan içeriğe ilerleme çubukları ekleyeceğiz. MovieClipLoader ı kullanarak Tech Bookstore sitesini yükleyeceğiz. Tech Bookstore sitesini test edecek ve hatalarını ayıklayacağız. 300 DERS 10

320 Yaklaşık Süre Bu dersi yaklaşık 2 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: lesson10/assets/video1.swf lesson10/assets/video2.swf lesson10/assets/video3.swf lesson10/assets/sectiontext.txt Başlangıç Dosyaları: lesson10/start/tour_start.fla lesson10/start/bookstore13.fla lesson10/start/map.fla Tamamlanmış Dosyalar: lesson10/complete/bookstore14.fla lesson10/complete/loader.fla lesson10/complete/map.fla lesson10/complete/techbookstore.fla lesson10/complete/tour.fla FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 301

321 Flash Belgelerinin Optimize Edilmesi Optimizasyon, işlerin yürümesi anlamına gelen harika bir terimdir. Ciddiyim. Bu terimin kapsamında yer alan işlemleri; SWF dosyalarının boyunu küçültmek ve hızlıca indirilebilir hale getirmek, SWF leri içeriğe özgü küçük SWF dosyalarına ayırmak (kullanıcıların, uygulamadan faydalanmak üzere uygulamanın inmesini çok uzun bir süre beklemek zorunda kalmamaları için) ve SWF dosyalarının son kullanıcıların makinesinde saygısızca davranmamasını sağlamak (en çok ihmal edilen adım) olarak sıralayabiliriz. Bu son maddeyle, uygulamanın, son kullanıcının sisteminde bulduğu tüm işlemci ve bellek kaynaklarını sonuna kadar harcamamasını sağlamayı kast ediyoruz. Oburlardan kimse hoşlanmaz (belki eski Romalılar hoşlanıyordu), bu yüzden siz de SWF dosyanızın teknoloji büfesindeki her şeyi bir çırpıda yiyip bitirmesini istemeyeceksinizdir. İyi organize edilmiş, iyi planlanmış bir Flash uygulaması, geliştirme sonrası optimizasyon işlemlerine nadiren ihtiyaç duyar; yine de her zaman küçük düzeltmeler yapmanız gerekir. Bu derste, bazı yönlerden en önce düşünülmesi gereken çeşitli kavramlar anlatılmaktadır. Ama bir bağlam olmadan ele aldığımızda optimizasyon konusunu iyi anlatamayacağımızı düşünüyorum, bu yüzden de bu konuyu, kitapta sondan bir önceki derse bıraktım. Burada anlatılanları iyice kavramaya, içselleştirmeye çalışın, daha sonra bu bilgiler çok işinize yarayacak. Kendi Flash projelerinizin üzerinde çalışırken optimizasyon dersinde öğrendiklerinizi en başta, planlama, storyboard (resimlenmiş öykü) hazırlama, geliştirme süreci ve bütün test aşamalarında değerlendirmeniz gerekir. Bu, Flash la yaptığınız çalışmalarda çok büyük önem taşır. Şu ana kadar Flash uygulamaları hazırlama konusuyla ilgili birçok faydalı yaklaşım öğrendiniz ve belki de bunların neden kullanıldığını tam olarak anlamadınız. Örneğin içeriğin büyük bir kısmını (haberler, giriş, vs.) ayrı ayrı ve daha küçük SWF dosyalarında oluşturdunuz. Alfa tween lerine yer vermekten ve animasyonu yoğun olarak kullanmaktan kaçındınız. Harici resim dosyaları yüklediniz. Şimdi bütün bunların nedenleri hakkında konuşacağız. Uygulamaları Organize Etmek ve İyi Alışkanlıklar Bilgilerin nasıl düzenlendiğini incelediğimizde, Web sitelerinin birçok farklı türünün olduğunu söyleyebiliriz. Bazı Flash sitelerinde, sitenin tamamı ziyaretçinin bilgisayarına her şeyi içeren dev gibi bir dosya halinde yüklenir. FLA dosyasının tamamı ve onunla ilişkilendirilen her şey (JPEG resimleri, sesler, vs. de dâhil olmak üzere) tek bir SWF dosyasında bulunur. Bu dosya başından sonuna dek aşamalı olarak indirilir ve bundan sonra ziyaretçiler tıklayarak sayfalar arasında gezinebilir. Web sitesinin ne kadarının indirilmesi gerektiği belirlenirken, ziyaretçinin içeriğin tamamını görmek istemeyip istemediğine bakılmaz. Ziyaretçiler, neleri görmek istediklerine bakılmaksızın Web sitesinin tamamını indirir. Şayet Web siteniz çok küçük değilse, bu, kullanabileceğiniz en iyi yaklaşım değ ildir. Neden? diyeceksiniz. Neden son kullanıcılar sitenizi kullanmaya başlamadan önce, asla ilgilenmeyecekleri bir içeriği indirmek için beklemek zorunda kalsın? Neden kullanıcılar aşırı uzun bir indirme süresi boyunca bekleyerek vakit harcasın? İnternet te gezen insanlar genelde 302 DERS 10

322 dikkatlerini uzun süre aynı nokta üzerinde yoğunlaştıramazlar ve bir şeyin gerçekleşmesi için uzun süre beklediklerinde muhtemelen beklemeden ulaşabilecekleri benzer bir kaynağa yönelirler. İlerleme çubukları ya da indirme sürecini gösteren başka araçlarla bu durumu biraz kendi lehinize çevirebilirsiniz, ama bu durumda bile insanlar aynı bilgilere ya da ürünlere başka bir yerden daha hızlı bir şekilde ulaşabiliyorlarsa sizin sitenizde beklemeyeceklerdir. Sitenizin tüm içeriğini tek ve büyük bir dosyada barındıran bir FLA dosyası oluşturmak yerine, içeriğin büyük bir kısmını çalışma zamanında (SWF dosyası Flash Player da oynatılırken) dinamik olarak yükleyen bir site oluşturmalısınız. Tech Bookstore sitesi, konuları anlamanızı sağlamak amacıyla sunulan bazı istisnalar haricinde, büyük ölçüde bu şekilde çalışmaktadır. Verileri harici olarak saklamanın birçok yolu mevcuttur; siteyi bir veritabanına bağlamak, Flash Remoting, Web servisleri ya da XML metin dosyalarını yoğun şekilde kullanmak gibi. JPEG, PNG, GIF, MP3, metin ve diğer SWF dosyalarını belgenize anında yükleyebilirsiniz. Bütün bu yöntemlerle, uygun zamanda sadece ilgili bilgileri yüklerken Flash belgelerinizin çalışma şeklini geliştirir ve dinamik içerikle çalışırsınız. Kullanılabilirlik Kullanılabilirlik basit bir kavramdır. İnsanlar Web sitenizde bir kullanım kılavuzuna ihtiyaç duymadan gezinebilir mi? Eğer bu sorunun cevabı Evet ise, kullanılabilirlik konusundaki en önemli testi başarıyla geçtiniz demektir. Flash dosyanızın kullanılabilirliği ve ziyaretçiler için sitenizde gezmenin kolay olup olmadığı konusunda düşünmeniz gerekir. Metinlerinizin boyu, okunacak kadar büyük mü? Kullandığınız fontlar okunaklı mı? Ziyaretçiler kullandığınız fontları yüklemek zorunda mı, yoksa bu fontları belgeye gömecek misiniz? Düğmeler yeterince büyük mü ve bunların birer düğme olduğu anlaşılıyor mu? Sitenizin farklı bölümleri arasında gezinmek kolay mı? Bazen ziyaretçilerin nasıl gezineceklerini bilmedikleri, sanatsal özelliklere sahip bir site yaratmak isteyebilirsiniz. Farklı gezinti özelliklerine sahip bir site, belirli durumlarda kabul edilebilir (bununla ilgili mükemmel bir örnek için, bkz. ama bu durumda hedef kitlenizin kim olduğunu ve bu kitledeki kullanıcıların sitenizde ne bulmak isteyebileceğini düşünerek yola çıktığınızdan emin olmalısınız. Evcil hayvan malzemeleri satan bir firma için bir alışveriş sepeti uygulaması hazırlıyorsanız, tabii ki Stage in sağ alt köşesinde üç küçük + simgesi istemezsiniz. Bu yaklaşım deneysel bir site için uygun olabilir, ama genel bir ticari uygulaması için kullanışlı değildir. Bir zamanlar Flash sitelerinin giriş (intro) bölümleri olurdu. Bu bölümler genellikle alâkasız müziklerin çalındığı hantal, gereksiz ve biteviye oynatılan animasyonlardan ibaretti. Bir açıdan iyiydiler, kuşkusuz. Ama aradan bir hafta geçtikten sonra kimse bu giriş bölümlerini önemsemiyordu. Tamam diyorlardı, Anladık, Flash kullanabiliyorsunuz. Şunun girişi atla (skip intro) düğmesi nerede? Neyse ki, artık çok fazla Flash giriş sayfası görmüyoruz; bunda insanların tepkisinin de payı var. İnsanların çoğu girişleri sevmez ve bu düşüncelerini, kendilerini dinleyecek herkese ifade eder. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 303

323 Ancak, her şeye karşın girişleri seven müşteri ve bireyler hâlâ var; onlar Web siteleri için giriş hazırlamaya devam ettiklerinden, girişler tamamen ortadan kaybolmadı. Bazı durumlarda giriş kullanmak güzel de olabilir, örneğin bir Flash oyunu tarayıcı önbelleğine yüklenirken bir giriş animasyonu oynatılabilir. Uyulması gereken güzel kurallardan biri şudur: Her zaman para ödeyen müşterilerin sizden istediklerini yapın, eğer bir giriş hazırlayacaksanız, bir girişi atla (skip intro) düğmesi eklemeyi de unutmayın. Bu girişi atlama olayı, Web siteleri oluştururken kullanılabilirliğe dikkat etmenin ve iyi veya standartlaşmış uygulamaları takip etmenin önemli olduğunu ispatlamıştır. Girişi atlama düğmesi, kullanıcıyı anında Web sitesinin ana kısmına gönderir, girişin yüklenmesini ve bant genişliği tüketmesini önler. Bu da gelen kutunuzda daha az olumsuz mesaj olması anlamına gelir. Girişi i atlama olayında dikkat etmeniz gereken en önemli şey, ziyaretçiye kontrol imkâ nı vermektir. Ziyaretçiler bir şeyi yüklemek istemiyorsa, bunu durdurarak yollarına devam etmesine izin vermelisiniz. Sizin müziğinizi dinlemek istemiyorlarsa, kapatma seçeneğini onlara vermelisiniz. Ayrıca, siteyi tam ekranda göstererek ziyaretçinin bilgisayarını ele geçirmek de her zaman için kötü bir fikirdir! Mümkün olan her durumda bant geniş liği açısından ağır içeriği dinamik olarak yükleyin, bu sırada ziyaretçinizin bilgiyi yüklemek isteyip istemediği konusunda seçim yapabilmesini sağlayın. Animasyonu Optimize Etmek Animasyonun tehlikeli yönlerini daha önce görmüştünüz. Tekrarlayacak olursak, bunlar alfa tweenler (fade in ve fade out) ve shape tween leri idi ve bunların her ikisi de işlemciyi yoğun olarak kullanan özelliklerdir. Parlaklık ve tint tween de dosya boyunu büyütebilir. Ancak bunların arasında dikkat etmemiş olabileceğinizi düşündüğümüz bir nokta daha var: Vektörlere animasyon uygulamak işlemciyi ciddi şekilde yorabilir. Gelin şimdi bunun sebeplerine bir göz atalım. Vektör grafiklerinin bir kareden diğerine giderken tümüyle yeniden çizilmesi gerekir. Bir vektör grafiğine motion tween uyguluyorsanız, resmi oluşturan her vektör nesnesinin yeni konumunda tümüyle yeniden çizilmesi gerekir. Buna bir de animasyon oynatılırken, farklı bir katmanda bulunan vektör tabanlı arka plan grafiklerinin her karede yeniden çizilmek zorunda olması gerçeğini ekleyin. İşte size güzel bir işlemciye yüklenme örneği. Bu durumda 12 fps lik (bir saniyede oynatılan kare) bir kare hızı, 12 fpy (bir yılda oynatılan kare) gibi görünmeye başlayacaktır. Peki, o zaman ne yapmak gerek? Motion tween uygulayan grafiklerde mümkün olan her yerde vektör çizimlerini bitmap çizimlerine dönüştürün. Bu işlemi bir harici editörde gerçekleştirebilirsiniz. Karmaşık vektör tabanlı arka planlarda ya da diğer statik vektör grafiklerinde vektörleri bir movie clip nesnesine dönüştürün, sonra da Properties denetçisini kullanarak runtime-bitmap caching özelliğini etkinleştirin. 304 DERS 10

324 Runtime bitmap caching (Çalışma zamanında bitmap leri önbelleğe alma) özelliği, tarayıcı önbelleğine indirildikten sonra movie clip lere, düğmelere ve hatta bileşenlere bitmap resimleriymiş gibi davranır. Bu daha verimli bir kullanım şeklidir; çünkü bu durumda, önbelleğe alınmış bir düğme ya da movie clip hareket ettiğinde veya sabit olarak kaldığında bilgisayar, grafiği oluşturan her nesneyi yeniden çizmek yerine, pikselleri açıp kapatır. Animasyon içeren movie clip lerde ya da hareketli movie clip ler içeren düğmelerde runtime bitmap caching özelliğini kullanmamalısınız. Bazen bir animasyonu ActionScript le oluşturmak, özenle motion tween uygulayarak movie clip leri Timeline da canlandırmaya göre daha hızlıdır. ActionScript kullanmak bazen (her zaman değil) bir şeylere animasyon uygulamanız gerektiğinde bu iş için harcanan çabayı azaltır ve dosya boyunu küçültür, ancak kullandığınız ActionScript kodları, işlemciyi, Timeline üzerindeki bir animasyon tween ine göre daha fazla yorabilir. ActionScript tabanlı animasyonların çoğu bir interval (aralık) ya da enterframe isimli movie clip olayını kullanır. Animasyon bittiğinde bunların açık bir şekilde silinmesi gerekir. Ne setinterval, ne de enterframe kendi başına duramaz ve bunların her ikisi de animasyon bitse bile çalışmaya devam ederek işlemciyi yorar. Durmaları için bunları silmeniz gerekir. setinterval ve enterframe konuları bu kitabın kapsamı dışındadır, ama bunların yaratabileceği olumsuz sonuçları bilmeniz gerekir. Farklı işlemci hızları da bir SWF dosyasının oynatımını etkileyebilir. Hızlı ve modern işlemcilerle karşılaştırıldığında eski işlemciler bir SWF dosyasını oynatma konusunda bir kaplumbağaya benzetilebilir. Bunu kontrol etmenin en iyi yolu, SWF dosyasını farklı bilgisayarlarda test etmek ve SWF dosyasının her makinede nasıl çalıştığını gözlemektir. Bazı eski bilgisayarlar ActionScript, tween ya da animasyon kullanımına bakmaksızın, SWF dosyalarını oynatmada zorlanırlar. Yavaşça beliren ya da hareket eden nesneler bu makinelerde çok yavaş ya da kesik kesik görünebilir. Hedef kitlenizi iyi tanıyorsanız, uygulamanızı, en küçük ortak paydayı düşünerek geliştirebilirsiniz, ama bu, işleri biraz daha güçleştirecektir. Runtime Bitmap Caching Özelliğiyle Bir Arka Planı Daha Verimli Hale Getirmek Bu alıştırmada, bir animasyonun oynatım performansını maksimuma çıkarmak için runtime bitmap caching özelliğini kullanacaksınız. Burada map.fla dosyası üzerinde çalışacaksınız. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 305

325 1. Sabit diskinizdeki TechBookstore klasöründe ya da kitabın CD-ROM undaki lesson10/ start klasöründe bulunan map.fla dosyasını açın. map.fla dosyasında, birden fazla kareyi kapsayan vektör tabanlı bir arka plan bulunmaktadır. Bu arka plandaki grafikleri bir movie clip e dönüştürecek ve sonra çalışma zamanında runtime bitmap caching özelliğini açarak vektör grafiklerinin kullanıcının bilgisayarında her karede yeniden çizilmek zorunda kalmamasını sağlayacaksınız. 2. map katmanını seçin, sağ tıklayın ya da Control tuşunu basılı tutarak tıklayın ve bağlam menüsünden Lock Others ı seçin. Sadece background katmanındaki grafikleri seçmek istiyorsunuz. Diğer katmanları kilitlediğinizde, istediğiniz grafik dışındaki öğeleri seçmeyi engellemiş olursunuz. 3. map katmanı seçili durumdayken Edit > Select All komutunu seçin ve ardından F8 klavye kısayolunu kullanarak seçili durumdaki tüm grafikleri bir movie clip e yerleştirin. Selection aracını kullanarak tüm Stage in etrafında bir seçim kutusu da oluşturabilirsiniz. Edit > Select komutunu kullandığınızda da seçilmeyen hiçbir öğe kalmamasını sağlarsınız. background katmanındaki tüm grafikler ve metinler seçildikten sonra F8 klavye kısayoluna basarak grafikleri tek ve büyük bir movie clip sembolüne dönüştürün. Sembolü mcbackground olarak adlandırın ve ona bir movie clip davranışı atayın. OK düğmesine tıklayın. 4. Stage deki movie clip i seçin ve runtime bitmap caching özelliğini etkinleştirin. Runtime bitmap caching özelliği, Properties denetçisi kullanılarak etkinleştirilir ve sadece Flash Player 8 ve daha yeni sürümlerde kullanılabilir. Stage deki movie clip i seçin ve Use runtime bitmap caching onay kutusunu işaretleyin. 306 DERS 10

326 5. Dosyayı kaydedin ve animasyonu izlemek için Control > Test movie komutunu seçin. Filmi test ettiğinizde animasyonda ciddi bir fark görmeyeceksiniz. Fakat runtime bitmap caching özelliği, son kullanıcın bilgisayarı diğer programlar çalıştırıldığında zorlanırken daha iyi bir oynatım performansı sağlayacaktır. Bant Genişliği ve Dosya Boyu Bant genişliği i (bandwidth), istemci bilgisayarlarla Web sunucusu arasında aktarılan bilgi miktarıdır. Örneğin,yoğun bir Web sitesi ayda 5 Gigabayt bant genişliği kullanabilir. Ziyaretçiler Web sitenize her eriştiğinde, sayfaları ve üzerindeki ortam dosyalarını yüklemek için bir miktar bant genişliğini tüketir. Sahip olduğunuz ziyaretçi sayısına ve Web sitenizin ne kadar büyük olduğuna bağlı olarak, site trafiğiyle birlikte bant genişliği de artar ve yavaşlamalar görülebilir. Bu, kaynamış suya mısır nişastası atmaya benzer. Ne kadar çok atarsanız, yapışkanlık düzeyi o oranda artar ve işler de o oranda yavaşlar. Bu, yahni gibi bir yemek pişirirken iyidir, ama ağ trafiği için kesinlikle aynı şeyi söyleyemeyiz. Bu yaklaşımın kötü olmasının bir sebebi daha var: Bazı ISS ler aylık bant genişliği tüketimine göre ödeme yapılmasını istemektedir. Bu yüzden, ziyaretçilerin her sayfada yükledikleri bilgi miktarını azaltmaya çalışırsınız. Bant genişliği tüketimini kısıtlamak, sıradaki konularda göreceğiniz gibi, FLA dosyanızı oluşturma şeklinizi pek çok açıdan etkiler. Ziyaretçilerinizin sadece gerek duydukları bilgileri yüklemelerini sağlamalı ve ilgi duymadıkları gereksiz bilgileri kısıtlamalısınız. Bant genişliğini azaltmak için yapmanız gereken ilk şey, tüm vektörel çizimleri, bitmap resimlerini ve ses dosyalarını gözden geçirerek, bunların, SWF dosyası üretilirken kullanılan yayınlanma ayarlarını kontrol etmektir. Vektörel çizimleriniz için Modify menüsünden Shape > Optimize ı seçerek optimizasyon yapabilirsiniz. Bu, şekildeki vektörleri azaltabilir (veya yumuşatabilir). Çok miktarda tırtıklı kenar varsa, şekli optimize etmek çizimin Flash tarafından görüntülenmesi için gereken hesaplamaların sayısını azaltır. Bu, genel dosya boyunu azaltır ve SWF dosyasının performansını artırır. Daha önceki derslerde kütüphanedeki ses ve resimler gibi diğer ortam varlıkları için yaptığınız gibi, ilgili varlığın üzerine sağ tıklayıp (ya da Mac te Control tuşuyla tıklayıp) Properties i seçebilirsiniz. Özellikleri, Publish Settings (Yayınlama Ayarları) iletişim kutusunu kullanarak da değiştirebilirsiniz. Son olarak, Flash taki Bandwidth Profiler ı kullanarak da dosya boyunu analiz edebilir, dosya boyunu minimuma indirebilir ve SWF dosyasının ziyaretçinin makinesine nasıl yükleneceğini kontrol edebilirsiniz. Bandwidth Profiler bu derste daha ileride anlatılacaktır. Publish Settings iletişim kutusunu da bir sonraki derste göreceksiniz. Kullanıcı Platformları SWF dosyaları farklı bilgisayarlarda farklı şekillerde yönetilir. Windows ve OS X gibi işletim sistemleri, Firefox ve Internet Explorer gibi tarayıcılar SWF dosyalarını birbirlerine göre biraz daha farklı şekilde yönetebilir. Genellikle SWF dosyanız, platform ya da tarayıcıdan bağımsız olarak, FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 307

327 uygulamayı kullanan ve izleyen herkesin makinesinde aynı şekilde oynatılacaktır. Aradaki farklar, JavaScript, style sheet içeren HTML sayfaları, vb. öğelerle karşılaştırıldığında çok küçüktür. Ancak dikkat edilmesini gerektirecek kadar önemli bazı küçük uyumsuzluklar da söz konusudur. Bir Mac, SWF dosyanızı, Windows yüklü bir makineye göre biraz daha yavaş oynatacaktır. Bunun sebebi işletim sistemi ve Flash Player dır, ancak bu durum Flash Player 8 ile büyük ölçüde düzeltilmiştir, dolayısıyla kullanıcılarınız Flash Player ın bu sürümünü kullanıyorsa, aradaki fark çok küçük olacaktır. Mac ler ve PC ler renkleri farklı şekilde iş ler. Bir Mac te (Macintosh) üretilen ve Windows yüklü bir makinede görüntülenen grafikler, Mac tekine göre daha koyu görünecektir. Windows ta oluşturulan ve Mac te görüntülenen grafikler için de bunun tersi geçerlidir. Bunun SWF dosyasının kendisiyle bir ilgisi yoktur; bu, makineler arasındaki gama düzeltme (gamma-correction) iş leminde görülen farklılıklardan kaynaklanır. Bu uyumsuzluk, Web sitenizi oluştururken ne kullanırsanız kullanın, karşı nıza muhakkak çıkacaktır. Böyle farklılıkları kontrol altında tutabilmek için mümkünse daha belirgin tonlar ve daha fazla kontrast içeren renkler kullanın. Harici İçeriğin Yüklenmesi Ders 6 ve Ders 9 da harici içeriğin nasıl yüklendiğini öğrenmiş ve ayrıca JPEG, PNG, GIF ve SWF dosyalarını movie clip lere ya da Loader bileşenine yükleyebileceğinizi görmüştünüz. Şu ana kadar yapmadığınız şey, içeriğin aslında yüklenmekte olduğunu insanlara bildirmek ya da belirli bir kullanıcı etkileşimine göre Loader a ya da movie clip örneklerine hangi içeriğin yüklendiğini belirtmektir. Bunu bir sonraki alıştırmada yapacaksınız. Bunun mantığı şöyle açıklanabilir: Bir Timeline da başka bir anahtar kare üzerine ayrı bir movie clip örneğiniz ya da Loader bileşeniniz olabilir. Kullanıcı bir düğmeye tıkladığında yeni örneğin bulunduğu bu anahtar kareye gidersiniz ve bu noktada arabirimdeki yeni içeriği yüklersiniz. Bu, son kullanıcının kaynaklarının kullanımı için aşırı derecede karmaşık ve verimsiz bir yöntemdir. Oluşturduğunuz bir Loader bileşeni ya da movie clip in her örneği, son kullanıcının makinesinin belleğinde yeni bir nesne oluşturur, bu da kaynakları harcar. Tek bir nesneyi mümkün olduğu kadar tekrar tekrar kullanmak daha mantıklı bir yaklaşımdır. Bir sonraki alıştırmanın amacı da budur. İşe başlamadan önce, bilgileri görüntülemek için iki dinamik metin alanı kullanacağınızı hatırlatmak isterim. Bunlardan biri, Loader bileşen örneğine yüklenen dosyanın indirilmesinin ilerleyişini, diğeri de tıklanan düğmeye bağlı olarak Web sitesinin ilgili kısmıyla ilgili bilgileri görüntüleyecektir. Bunların hepsi tek kareli bir Timeline da gerçekleşecek ve ActionScript le kontrol edilecektir. Daha önce Stage e Loader bileşenlerini eklemiş, grafikleri çizmiş ve Button bileşenleri oluşturmuş ya da kullanmıştınız. Yani dosyanın temelleri oluşturulmuş durumda, bu da zaman ve emekten tasarruf demek. Böylece dinamik metin alanlarına ve yazacağınız ActionScript kodlarına yoğunlaşmanızı sağlayacak. 308 DERS 10

328 1. Kitabın CD-ROM undaki lesson10/start/tour_start.fla dosyasını açın ve sabit diskinizdeki TechBookstore klasörüne tour.fla adıyla kaydedin. Bu dosyanın yapısına kısaca bir göz atın. Dosyada, biraz sonra kendisine ActionScript kodu ekleyeceğiniz boş bir actions katmanı var. loaderdisplay adındaki katmanda, Stage deki Loader bileşenine yüklenecek her dosyada indirilme işleminin ilerleyişini gösterecek bir dinamik metin alanı oluşturacaksınız. components katmanında, sırasıyla btnreviews, btncompany ve btncontact adında üç düğme yer alıyor. SWF leri yükleyeceğiniz Loader bileşeni de burada bulunuyor. frame katmanında sadece Stage de aynı boyda bir grafikle Stage deki Loader bileşen örneğiyle aynı boyda ikinci bir grafik var. text fields katmanında şu anda statik bir metin var ve buraya, LoadVars sınıfını kullanarak bir metin dosyasından alınan bilgilerin görüntüleneceği çok satırlı bir dinamik metin alanı ekleyeceksiniz. 2. Eğer TechBookstore dizininde mevcut değilse, lesson10/assets klasöründe bulunan video1.swf, video2.swf ve video3.swf dosyalarını sabit diskinizdeki TechBookstore klasörünüze kopyalayın. lesson10/assets klasöründeki sectiontext.txt dosyasını da yine Tech Bookstore klasörünüze kopyalayın. Bunlar, yükleyeceğiniz SWF dosyaları. Windows Explorer ı veya Mac teki Get Info aracını kullanarak bunların özelliklerini incelediğinizde her birinin 1.8 Megabayt olduğunu göreceksiniz. Bu sizin gömülü videonuz. Bu dosyaları akıtamayacağımız için bunların indirilmesinin ilerleyişiyle ilgili bilgileri göstermemiz ve dosya boyunu kullanıcıların beklentilerine göre makul bir düzeye çekmemiz gerekiyor. Dosyalar indirilirken kullanıcılara meşgul olmaları için okuyabilecekleri bazı metinler sunacaksınız. Bu sinsice, ama etkili bir yöntem. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 309

329 3. loaderdisplay katmanında bir dinamik metin alanı, text fields katmanında da çok satırlı bir dinamik metin alanı oluşturun. loaderdisplay metin alanı indirme işleminin ilerleyişini gösterecektir. text fields katmanındaki metin alanında ise, bir metin dosyasından yüklenen ve Web sitesinin nasıl kullanıldığını anlatan bir metin görüntülenecektir. Text aracını seçin ve tıklayıp sürükleyerek loaderdisplay katmanındaki Loader bileşen örneğinin üst kısmında sabit genişlikli bir metin alanı oluşturun. Metin tipini Dynamic olarak ayarlayın. Font, font boyu ve hizalamayı istediğiniz gibi ayarlayın; çözüm dosyasında Arial Black, 12 pt, sola hizalama (left-justified) ayarları kullanılmıştır. Metin alanına percentloaded örnek ismini verin. Metin alanını ayarlama ve yerleştirme işlemlerini tamamladıktan sonra loaderdisplay katmanını kilitleyin. text fields katmanını seçin ve kilidini açın. İmleci tıklayıp sürükleyerek Yaklaşık 270 piksel genişliğinde, 280 piksel yüksekliğinde büyük bir dinamik metin alanı oluşturun (genişlik ve yüksekliğin tam olarak bu değerlerde şart değil). Properties denetçisinde Line Type (Satır tipi) açılır listesinden Multiline ı seçin. Render Text as HTML düğmesine basarak vurgulu hale getirin. Metin alanına displaysection örnek ismini verin. Metin alanını, diğer sayfadaki şekile benzeyecek biçimde yerleştirin. 310 DERS 10

330 4. actions katmanının 1. karesini seçin ve Actions panelini açın. ActionScript te bir dizi adım gerçekleştirmeniz gerekiyor. Önce, SWF dosyasının yüklenmesi işlemini yönetecek tekrar kullanılabilir bir fonksiyon oluşturmanız gerekiyor. Ardından, dosya yüklenirken ve işlem bittikten sonra ne olacağını belirleyen bir nesne yaratmanız, ayrıca bir metin dosyasındaki bilgileri yükleyecek bir LoadVars nesnesi oluşturmanız gerekiyor. Buna ve düğmelerle kullanılan olay işleyicileri konusuna yabancı değilsiniz. Yani burada yeni öğrenmeniz gereken bir şey yok. Bunları birer alıştırma olarak düşünün. 5. SWF dosyalarını Stage deki Loader bileşenine yüklemek için bir fonksiyon oluşturun ve bunu loadvideo olarak adlandırın. Script Assist modu açıksa kapatın. Actions panelinin üst kısmına aşağıdaki ActionScript kodunu yazın. //loader bileşenini kullanarak SWF dosyalarına gömülü videoyu yükler function loadvideo(pathtofile:string,texttoload:string):void { videoloader.contentpath= ; videoloader.contentpath=pathtofile; displaysection.htmltext=loadsectiontext[texttoload]; } FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 311

331 İşe, fonksiyonun amacını tanımlayan bir açıklama yazmayla başlayacaksınız. Sonra, loadvideo adında ve iki argüman alan yeni bir fonksiyon oluşturacaksınız. İlk argüman olan pathtofile, (yerleştirildikten sonra) sabit diskteki ya da sunucudaki harici dosyaya giden yolu temsil eder. İkinci argüman texttoload ise, siz oluşturduktan sonra LoadVars nesnesinde depolanacak olan bir metin dizesini (text string) temsil eder. videoloader.contentpath=, Stage deki Loader bileşen örneğinde mevcut bulunan içeriği temizlemek için kullanabileceğiniz bir yöntemdir. Stage deki Loader bileşeni videoloader örnek ismine sahiptir ve burada bileşen örneğine ne yükleneceğini belirtmek için Properties denetçisi yerine ActionScript kullanırsınız. Bir sonraki satır, fonksiyon çağrıldığında sabit diskteki ya da sunucudaki dosyaya giden yolu atamaktadır. Son satır, displaysection metin alanına, kendisine yazılan metni, HTML biçimlendirmesi uygulanmış gibi değerlendirmesi gerektiğini söyler ve bununla ilgili bilgileri LoadVars nesnesinden alır. loadsection[texttoload] şeklindeki atama işlemi, köşeli parantezler yüzünden biraz farklı görünebilir. Köşeli parantezler Flash a, satırın geri kalan kısmı çalıştırılmadan önce texttoload değerini eklemesi gerektiğini söyler, böylece doğru olarak okunur. Aksi takdirde Flash, asıl değeri değil, LoadVars nesnesindeki bir özelliği (texttoload) arar. Fonksiyon çalıştığında değişkene kendi değeri verilir, açma köşeli parantezi bir... simgesine dönüştürülür ve kapama köşeli parantezi silinir. dynamic evaluation olarak adlandırılan bu işlem, Önce bunu yap, satırın geri kısmıyla sonra ilgilen demenin bir yoludur. Siz de daha önce hiç cebir dersi görmediğinizi düşünürsünüz. 6. Düğme örneklerini varsayılan olarak devre dışı bırakın. Mevcut kodunuzun altına aşağıdaki ActionScript kodunu yazın. //başlangıç düğme durumlarını ayarla btnreviews.enabled=false; btncompany.enabled=false; btncontact.enabled=false; Burada da bir açıklamayla işe başlıyorsunuz. Düğmeler ve Button bileşenlerinin enabled adında bir özelliği vardır ve bu özellik true ya da false değerini alır. enabled özelliği false olarak ayarlandığında, kullanıcı düğmeye tıklayamaz, eğer bir Buttton bileşeni kullanılıyorsa, bu bileşen seçilemez hale gelir. Burada LoadVars nesnesi metin dosyasını tamamen yükleyene kadar düğmeleri devre dışı bırakmak istiyoruz. Aksi takdirde insanlar düğmeleri tıklayacak ve henüz yüklenmediyse metni göremeyecektir. Bu, bir kullanılabilirlik örneğidir. 7. displaysection metin alanına varsayılan metni atayın. Mevcut kodunuzun en altına aşağıdaki ActionScript satırlarını yazın. 312 DERS 10

332 //varsayılan metni oluşturur displaysection.htmltext= <p>press a button below to view more information about a section of the website</p> ; Bu işlemle, HTML biçimlendirmesi uygulanan yazı, kullanıcıya bir sonraki adımda ne yapacağını bildiren displaysection metin alanına atanır. Bu noktada dosyanızı kaydeder ve test ederseniz, yazının metin alanında belirdiğini görürsünüz ve düğmeleriniz seçilemez duruma gelir. 8. Bir LoadVars nesnesi oluşturun, bir metin dosyası yükleyin ve metin tümüyle yüklendikten sonra düğmeleri etkinleştirin. Mevcut script inizin altına şu kodu ekleyin: //bölüm metnini yüklemek için loadvars nesnesini oluşturur var loadsectiontext:loadvars=new LoadVars(); loadsectiontext.load( sectiontext.txt ); loadsectiontext.onload=function() { btnreviews.enabled=true; btncompany.enabled=true; btncontact.enabled=true; } Daha önce LoadVars nesnesiyle çalışmıştınız. Burada farklı olan tek şey, bu nesnenin, hemen metni görüntülemek yerine, düğmeleri tekrar tıklanabilir hale getirmek için kullanılmasıdır. Gayet zekice, değil mi? Tekrarlıyorum, bu bir kullanılabilirlik örneğidir. Kullanıcı bir düğmeye tıkladığında bir şey olmasını bekler. Bilgiler tümüyle yüklenene kadar düğmeleri devre dışı bıraktığınızda, bir şeye tıkladıklarında uygulamanın herhangi bir işlem yapmaması durumunda kullanıcıların sinirlenmesini engellemiş olursunuz. 9. progress ve complete olaylarına cevap veren bir izleyici (listener) nesnesi oluşturun. İzleyici nesnesini Loader bileşen örneğine ekleyin. Ders 9 da izleyici nesnesi kavramını kısaca görmüştünüz. Burada tek bir nesnenin iki işlemle ilgilenmesini istiyoruz. Öncelikle, birine belirli bir dosyanın yüklendiğini söylemek için izleme yapması gerekiyor (progress olayı). Buradaki biri Loader örneğidir; bu konuya birazdan değineceğiz. Ayrıca bu nesnenin, dosyanın yüklenmesi işlemi bittikten sonra bir şey yapmasını istiyoruz (complete olayı). Son olarak, izleyici nesnesi, birisi doğrudan onu hedeflemediği sürece kendisiyle kimin konuştuğuna pek dikkat etmez. New Yorklular da böyledir. İnsanlar New Yorkluların etrafında bağırıp çağırsalar bile, bu, New Yorkluların pek umurunda olmaz. Ama biri gelip onlara Times Meydanı ne tarafta acaba? diye sorarsa, keyifleri yerindeyse doğru yönü gösterebilirler (ama gençlere fazla güvenmeyin, genellikle sizi başka yerlere gönderirler). ActionScript te Loader FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 313

333 bileşenine, bir dosyayı yüklerken ya da bir dosyanın yüklenmesi bittiğinde izleyici nesnenizi bu durumdan haberdar etmesini söylemeniz gerekir. Bu ricanız yerine getirilecektir. Kodunuzun en altına aşağıdaki ActionScript satırlarını yazın. //ilerleme durumuyla ilgilenmek için bir izleyici nesnesi yaratır ve //video tümüyle yüklendiğinde ilerleme göstergesini temizler. var myloadit:object=new Object(); myloadit.progress=function() { percentloaded.autosize= left ; percentloaded.text=math.round(videoloader.percentloaded)+ % of the video has loaded ; } myloadit.complete=function() { percentloaded.text= ; } videoloader.addeventlistener( progress,myloadit); videoloader.addeventlistener( complete,myloadit); Kendinizle gurur duyabilirsiniz. Şu ana kadar çok iyiydiniz. Her zaman olduğu gibi burada da bir açıklamayla işe başlıyorsunuz. Daha sonra Object sınıfından myloadit adında genel (generic) tipte bir nesne oluşturuyorsunuz. Object nesnesi, Flash hta temel sınıftır, çünkü her şeyin temeli odur. Ama garip olan bir şey var ki o da bu nesnenin kendi özelliklerinin ya da metotlarının olmamasıdır. Bu da onu bir izleyici nesnesi için ideal kılmaktadır. Onu bir model hamuru gibi düşünebilirsiniz. Elinizde olduktan sonra istediğiniz şekle sokabilirsiniz. Nesne oluşturulduktan sonra ona, bir dosya yükleme işleminin ilerlemekte olduğunu bildiren her şeye cevap vermesi gerektiğini söylersiniz. Nesne ne olup bittiğini bildiği takdirde, Stage deki videoloader bileşen örneğine yüklenen verilerin yüzdesine bakacak, sayıyı yuvarlayacak ve bu sayıyı, daha önce oluşturduğunuz percentloaded metin alanında görüntüleyecektir. Metin alanında görüntülenen bilgilere bir parça metin eklemek için bitiştirme (concatenation) özelliğini kullanırsınız; bu özellik ActionScript in yapıştırıcısıydı. Böylece son kullanıcı ne olup bittiğini anlayacaktır. Son iki satırda, videoloader bileşenine, bir dosyayı yüklerken ya da bir dosyanın yüklenmesi işlemini bitirdiğinde izleyici nesnenizi durumdan haberdar etmesi gerektiğini söylemek için Loader bileşeninin addeventlistener metodu kullanılmaktadır. Yapılacak son bir iş daha kaldı. Ondan sonra dosyayı test edebilirsiniz. 314 DERS 10

334 10. Gömülü video içeren farklı SWF dosyaları yüklemek üzere düğmeleriniz için olay işleyiciler oluşturun. Mevcut script inizin altına şu ActionScript satırlarını yazın: //düğmeler video ve metinlerin görüntülenmesini sağlar btnreviews.onrelease=function() { loadvideo( video1.swf, productsandreviews ); } btncompany.onrelease=function() { loadvideo( video2.swf, companyandnews ); } btncontact.onrelease=function() { loadvideo( video3.swf, contactandmap ); } Düğmeler için olay işleyiciler oluşturmuştunuz. Bu olay işleyicilerde farklı olan nokta, loadvideo fonksiyonunu çağırmanız ve fonksiyona, oluşturduğunuz LoadVars nesnesindeki görüntülenecek metnin ve videonun yolunu aktarmanızdır. Ayrıca her SWF dosyasını, mevcut içeriği yenisiyle değiştirerek tek bir Loader bileşen örneğine yüklüyorsunuz. Yeni bir düğme seçildiğinde Loader bileşeni içerik yüklüyorsa, mevcut indirme iş lemi yeni indirme iş lemine yer vermek için durdurulacaktır. 11. Dosyanızı kaydedin ve test edin. İlerlemenin nasıl gösterildiğini görmek için bir indirme işlemini taklit edin. tour.fla dosyasını kaydedin ve Control > Test Movie komutunu seçin. Bandwidth Profiler açık değilse Test Movie ortamında View > Bandwidth Profiler komutunu seçin. Siz bir filmi test ederken ve film sabit diskteki bazı bilgileri yüklerken, içerik hızlı bir şekilde yükleniyormuş gibi görünür, ama buna aldanmayın, yanlış olabilir. Bir indirme işlemini taklit FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 315

335 etmek için View Download Settings i seçin ve sonra bir seçeneği işaretleyin. Ardından View > Simulate Download komutunu seçin. Siz bir videoya tıkladığınızda, ilerleme göstergesi yüklenen her SWF dosyasının yüzdesini gösterecek ve indirme işlemi başlayacaktır. İndirme işlemi bittikten sonra, yüklenen yüzdeyi gösteren metin alanı temizlenir. 12. tour.fla dosyasını kaydedin ve kapatın. Sonraki alıştırmalarda ana Tech Bookstore Web sitesine içerik yükleyeceksiniz. Burada, yeni öğrendiğinize benzeyen ve birkaç küçü k değişiklik içeren bazı teknikleri kullanacaksınız. İçeriği Ana Uygulamaya Yüklemek Kitap boyunca farklı noktalarda, sonuçta Tech Bookstore sitesine yüklemek üzere içerik oluşturdunuz (bu içeriğin bir kısmı kullanıcı bir düğmeye tıkladığında, bir kısmı da uygulama ilk ekrana geldiğinde yüklenmeye başlayacak). Bu, ana Flash SWF dosyasında depolamanız gereken bilgilerin ve özellikle SWF dosyanızın boyunu hızla artıracak bileşenlerin miktarını azaltır. Gelin şimdi içeriğin geri kalanını Tech Bookstore sitesine ekleyelim. 1. Açık değilse bookstore13.fla dosyasını açın ve File menüsünden Save As i seçerek dosyanın yeni bir versiyonunu kaydedin. Yeni belgeyi bookstore14.fla ismiyle kaydedin. Bu dosyanın sabit diskinizdeki TechBookstore klasörüne kaydedildiğinden emin olun. Ayrıca bookstore13.fla dosyasının bir kopyasını kitabın CD-ROM unda bulabilir ve dilerseniz çalışmaya bu dosyayla başlayabilirsiniz. Bu alıştırmada içeriği Stage e yerleştirirken menülerin açılabilmesi için yeterince boşluk bıraktığınızdan emin olun. Dikey cetvelde yaklaşık 140 piksel hizasına bir yatay kılavuz sürükleyin. Yeni içeriğin tamamını bu kılavuzun altına yerleştirin. 316 DERS 10

336 2. home katmanına bir Loader bileşeni örneği ekleyin. Bileşen örneğini 580 x 345 olarak boyutlandırın ve ona bir örnek ismi verin. home katmanı, pages katman klasöründedir. Loader bileşen örneği, harici bir SWF dosyası olan giriş sayfası içeriğini yükleyecektir. Components panelini genişletin ve Loader bileşeninin bir örneğini pages klasöründe home katmanının 1. karesine sürükleyin. Bileşene home_ldr örnek ismini verin ve onu aşağıdaki grafikteki gibi, navigasyon çubuğunun altına, Stage in sol tarafına yerleştirin. Bileşeni, yükleneceği home.swf belgesinin boyutlarına (genişlik 580, yükseklik 345) ayarlayın. home.swf belgesini Ders 9 da oluşturmuştunuz. Bileşeni varsayı lan boyutları nda bırakabilir ve örneğin yeniden boyutlandırı lması iş lemini içerik yüklenirken yapması için Flash a bırakabilirsiniz. Bileşeni elle boyutlandırmak genelde daha kolaydır, çünkü bu şekilde içeriğin Stage deki diğer örneklere göre nereye yükleneceğini görebilirsiniz. Ayrıca scalecontent in false olarak ayarlandığından emin olun. Eğ er true olarak ayarlanırsa, içeriğiniz yeniden boyutlandırı lır ve bu da içerikte bozulmalara sebep olabilir. Metinler ölçeklendikten sonra çok kötü görünebilir. Properties denetçisinin Parameters sekmesinde Loader bileşeninin contentpath parametresini home.swf olarak ayarlayın. Bu, bileşene yüklemek istediğiniz içeriğe ait URL Ldir. d Properties denetçisini kullanarak Loader bileşeninin üç özelliğini değiştirebilirsiniz. autoload: Kare yüklendiğinde içeriğin otomatik olarak yüklenip yüklenmeyeceğini belirler (true). Aksi takdirde, load fonksiyonunu açıkça çağırmanız gerekir (false). FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 317

337 contentpath: Yü klenmesi gereken içeriğin adresini belirten URL. Bu alan, hem göreceli, hem de mutlak URL Lleri kabul eder. scalecontent: Boolean değeri. Loader bileşeninin yüklenmekte olan içeriğe uygun olarak yeniden boyutlandırılmasını (false) veya içeriğin mevcut Loader öğesinin boyuna göre ölçeklenmesini (true) sağlar. Web sitesindeki bütün kısımlarda, autoload parametresinin true, scalecontent parametresinin de false olarak ayarlandığından emin olun. 3. catalog adında yeni bir katman ekleyin. Katalog (Catalog) sayfasına bir Loader bileşen örneği ekleyin. Örneği yeniden boyutlandırın, contentpath parametresini ayarlayın ve Stage e yerleştirin. home katmanının tam altına yeni bir katman ekleyin. Bu yeni katmana catalog ismini verin. 10. kareye yeni bir anahtar kare ekleyin ve 19. kareden sonraki tüm kareleri silin. Bunu yapmak için, katmandaki kareleri fareyle seçin ve ardından sağ tıklayarak (veya Control tuşunu basılı tutup tıklayarak) bağlam menüsünden Remove Frames i seçin. Timeline e edaki d catalog katman ının 10. karesine tıklayın ve Loader bileşeninin bir örneğini Stage ee sürükleyin. Bileşene catalog_ldr örnek ismini verin. Properties denetçisini genişletin ve contentpath parametresini catalog.swf olarak ve scalecontent özelliğini false olarak ayarlayın. Bileşeni, Ders 9 da d oluşturduğunuz catalog.swf belgesiyle aynı boya gelecek şekilde yeniden boyutlandırın (720 x 345). Bileşeni, aşağıdaki resimde görüldüğü gibi, kabaca ana içerik alanının merkezine yerleştirin. 318 DERS 10

338 4. reviews adında yeni bir katman ekleyin. Reviews (İncelemeler) sayfasına reviews.swf dosyasını yüklemek üzere yeni bir Loader örneği ekleyin. Bileşenin parametrelerini ayarlayın, bileşeni yeniden boyutlandırın ve yerleştirin. catalog katmanının tam altına yeni bir katman ekleyin. Ardından F6 tuşuna basarak 20. kareye yeni bir anahtar kare ekleyin ve katmanda numarası 30 dan numaralı kareden büyük olan tüm kareleri silin. Bunun için, imleçle kareleri seçin ve sağ tıklayarak (ya da Control tuşuyla tıklayarak) açılan bağlam menüsünden Remove Frames i seçin. reviews katmanının 20. karesine tıklayın ve Loader bileşeninin bir örneğini Stage üzerine sürükleyin. Properties denetçisinde örnek ismini reviews_ldr olarak, contentpath özelliğini reviews.swf olarak ve scalecontent özelliğini de false olarak ayarlayın. Bileşenin boyunu 720 x 360 olarak ayarlayın ve Stage in ortasına yerleştirin. 5. tour adında yeni bir katman ekleyin. tour.swf dosyasını yüklemek üzere Tour sayfasına bir Loader örneği ekleyin. Bileşeni yeniden boyutlandırın, yerleştirin ve parametrelerini değiştirin. reviews katmanının hemen altına yeni bir katman ekleyin. Ardından F6 tuşuna basarak 30. kareye yeni bir anahtar kare ekleyin ve katmanda numarası 40 tan büyük olan bütün kareleri silin. Bunu için kareleri imleçle seçin, sağ tıklayın (ya da Control tuşuyla tıklayın) ve bağlam menüsünden Remove Frames i seçin. tour katmanının 30. karesine tıklayın ve Loader bileşeninin bir örneğini Stage e sürükleyin. Properties denetçisinde örnek adını tour_ldr olarak ve contentpath özelliğini tour.swf olarak ayarlayın. Ardından scalecontent özelliğini false olarak ayarlayın. Bileşenin boyunu 720 x 360 olarak ayarlayın ve Stage in ortasına yerleştirin. 6. news adında yeni bir katman ekleyin ve Stage e bir Loader örneği ekleyin. Bu örneğe bir örnek ismi verin, ardından yeninden boyutlandırın ve Stage de yerine yerleştirin. Yeni bir katman ekleyin, bunu news olarak adlandırın ve bu katmanın tour katmanının hemen altında olduğundan emin olun. 40. kareye tıklayın, F6 ya basarak yeni bir anahtar kare ekleyin ve ardından katmanda numarası 49 dan büyük olan tüm kareleri silin. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 319

339 news katmanının 40. karesine tıklayın ve bir Loader bileşeni ekleyin. Bileşenin örnek ismini news_ldr yapın, contentpath parametresini news.swf olarak ayarlayın ve scalecontent parametresini false olarak ayarlayın. Loader örneğini genişliği 635, yüksekliği de 345 olacak şekilde yeniden boyutlandırın ve News (Haberler) sayfasının yatay merkezine yerleştirin. İşiniz bittiğinde, Timeline ın görüntüsü aşağıdaki şekildekine benzeyecektir. 7. map katmanında bulunan Loader örneğine yeni bir örnek ismi verin. Map (Harita) sayfasında, Stage üzerinde önceki dersten kalan bir Loader bileşeni vardır. Örneğe tıklayın ve Properties denetçisini kullanarak buna map_ldr örnek ismini verin ve scalecontent özelliğini false olarak ayarlayın. 8. Tech Bookstore sitesine ilave grafikler veya metinleri ekleyin. İşi tamamlamadan önce, biraz renk katmak amacıyla bazı sayfalara statik metin eklemek isteyebilirsiniz. Bu tabii ki isteğe bağlı bir adımdır. 9. Kütüphaneyi temizleyin. Ardından FLA dosyasında yaptığınız değişiklikleri test edin ve dosyayı kaydedin. Oluşturduğunuz yeni grafikleri veya sembolleri ve yeni bileşenleri kütüphanedeki (Library) uygun klasörlere yerleştirin. Bu noktada bütün Tech Bookstore uygulamasını test edebilirsiniz. Ctrl+Enter veya Cmd+Enter tuşlarına basarak SWF dosyasını test ortamında deneyin ya da F12 tuşuna basarak Web tarayıcısında görüntüleyin. Sayfalarda gezinmek için menü düğmelerinin birine tıkladığınızda, her kısmın içeriğinin yüklendiğini göreceksiniz. 320 DERS 10

340 SWF dosyalarından biri yüklenmediyse, bu dosyanın TechBookstore dizinine kaydedildiğinden ve SWF dosyasının isminin ilgili Loader örneğine ait Properties denetçisinde doğru şekilde (yazım hatası olmadan) girildiğinden emin olun. Flash tan Dışarıya Veri Göndermek Bu noktada, buradaki uygulamayı tamamlamak için gereken son birkaç adımı gerçekleştireceksiniz. Tamamlamanız gereken son işlerden biri, Ders 8 de oluşturduğunuz formları kullanarak Flash htan dışarıya veri göndermek. Bir sonraki alıştırmanın konusunu bu oluşturuyor. Sonra da, sayfaya ilk geldiklerinde kullanıcılara Tech Bookstore Web sitesinin yüklendiğini bildirmek için basit bir ilerleme çubuğu oluşturacaksınız. İlk önce, ilk yapılması gereken yapılacak, yani verilerin gönderilmesi. Flash 8 Basic te, Flash htan dışarıya veri göndermek için kullanılan çeşitli yöntemler mevcuttur ve bunların hepsinde belirli bir düzeyde ActionScript gerekir. Flash htan dışarıya veri göndermek için LoadVars nesnesini kullanabilirsiniz (ve bu alıştırmada bunu yapacaksınız). Ayrıca geturl, XML ve daha karmaşık uygulamalarda Flash Remoting kullanabilirsiniz. Hangi metodu kullanacağınız, oluşturduğunuz uygulamaya bağlıdır, ama bunların hepsinin bir ortak noktası olduğunu unutmayın: Bir Web sunucusunda ya da benzer bir konumda, gönderdiğiniz verileri bekleyen ve bu verilerin ne olduğunu, onlarla ne yapacağını bilen bir teknolojinin olması gerekir. İşin bu kısmı kitabın kapsamı dışındadır, çünkü Flash htan çok farklı teknolojiler hakkında bilgi sahibi olmayı gerektirir. Eğer tasarımcı olarak çalışıyorsanız, gerçek projelerde veri almak ve işlemek için bu en son teknolojinin geliştirilmesi konusunda size yardımcı olabilecek bir geliştiriciyle çalışmanız mantıklı olacaktır. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 321

341 Geribildirim Formundaki Verileri Göndermek Bir sonraki uygulamada, formunuzdaki bilgileri toplayan ve sonra da bunları bir sunucuya gönderen bir LoadVars nesnesi oluşturacaksınız. Sunucu bu bilgilerle ne yapması gerektiğini biliyor ve şu aşamada işin bu kısmı gerçekten de sizi ilgilendirmiyor. Bizi ilgilendiren nokta, bilgiyi dışarıyaı çıkarmak. Bilgileri, gerçek bir Web sunucusunda yaratılan bir script i kullanarak e-posta adresinize göndereceksiniz. Bu derste de yine bookstore14.fla dosyasıyla çalışacaksınız. 1. feedback katmanının 50.karesini seçin. Verileri toplayarak Flash htan dışarıya gönderen ActionScript kodunu her bir movie clip Timeline ına yerleştireceksiniz. mcquestionform ve mcfeedbackform movie clip leriniz 50. karede bulunuyor. 2. mcfeedbackfrom a çift tıklayın. Verileri göndereceğiniz e-posta adresi için kullanılacak bir değeri tutması için Stage e gizli bir TextInput örneği ekleyin. Movie clip in Timeline ına girmek için Stage deki mcfeedbackform a çift tıklamanız gerekiyor. ActionScript kodunu ve gizli form öğesini buraya yerleştireceksiniz. Ana belge Timeline ındaki feedback katmanının kilidinin açıldığından emin olmanız gerekir, böylece mcfeedbackform movie clip ini düzenleyebilirsiniz. TextInput bileşeninin bir örneğini form katmanında Stage in üzerine sürükleyin. Properties denetçisini kullanarak text parametresini geribildirim verilerini göndermek istediğiniz e-posta adresine (siz@sizindomaininiz.com gibi) ayarlayın. Buraya kendi e-posta adresinizi (ya da kontrol edebileceğiniz bir adresi) girin. Window > Component Inspector komutunu seçerek Component inspector panelini açın ve Parameters sekmesine tıklayın. Stage deki örneği gizlemek için visible parametresini false olarak ayarlayın. visible parametresine Properties denetçisinden erişemezsiniz, bu yüzden bu parametrenin değerini değiştirmek için Component inspector panelini kullanıyorsunuz. Properties denetçisini kullanarak TextInput Örneğine ti to örnek ismini verin. 322 DERS 10

342 3. mcfeedbackform movie clip Timeline ında actions katmanının birinci karesinde Actions paneline aşağıdaki ActionScript kodunu ekleyin. mcfeedbackform Timeline ı e nda actions katmanının 1. karesini seçin ve Actions paneline aşağıdaki kodu girin. Bu ActionScript kodu, forma girilen verileri bir e-posta adresine göndermek için kullanılacaktır. Kodun ne işe yaradığı aşağıda anlatılmaktadır. //Bilgileri Flash ın dışına gönderir bsend.onrelease = function() { var targetloadvars:loadvars = new LoadVars(); var myloadvars:loadvars = new LoadVars(); myloadvars. from = ti .text; myloadvars. to = ti to.text; myloadvars.subject = tisubject.text; myloadvars.message = tamessage.text; myloadvars.sendandload ( submit_feedback.cfm, targetloadvars, POST ); targetloadvars.onload = function() { trace(this.success); }; gotoandstop( thankyou ); }; Yeni girdiğiniz script biraz korkutucu görünebilir, ama ne işe yaradığını öğrendikten sonra öyle olmadığını anlayacaksınız. Sonuç itibarıyla birtakım bilgileri topluyor, bir klasörün programlama versiyonunda depoluyor ve dışarıya gönderiyorsunuz. İşe, daha önce öğrendiğiniz sebeplerden dolayı açıklama ekleyerek başlıyorsunuz. Açıklamalar sizin dostunuzdur, bunu unutmayın. Bir sonraki adımda, send düğmesi için bir onrelease olay işleyicisi eklenir. Bu işleyici, kullanıcı bsend Button örneğine tıkladığında çağrılır. Ardından verileri dışarıya göndermek için iki LoadVars nesnesi oluşturursunuz. İlk LoadVars nesnesi, çalıştırıldıktan sonra sunucu tarafındaki script in döndüreceği değişkenleri tutmak için kullanılır. İkinci LoadVars nesnesi ise, sunucu tarafındaki script e gönderilen tüm değişkenleri tutar. LoadVars nesneleri oluşturulduktan sonra, kod, dört metin alanı (ti , ti to, tisubject ve tamessage) değerini myloadvars değişkenine kopyalar. myloadvars nesnesi bir URL Le gönderildiğinde bu değişkenlerin hepsi dâhil edilir. Ardından değişkenleri işlemek için sunucu tarafındaki bir script kullanılabilir. Sunucu tarafındaki script dediğimiz şey, PHP, ColdFusion veya ASP gibi bir dil kullanılarak yazılan bir koddur. Script, Web sayfalarıyla etkileşime girer ve belirli bir işlemi gerçekleştirmek için kullanılır. Script bir sunucuda durur ve veri yüklemek, bir veritabanıyla etkileşime girmek ve kodun ne amaçla yazıldığına bağlı olarak benzer başka işlemleri gerçekleştirmek için kullanılabilir. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 323

343 Flash, aşağıdaki kod satırıyla myloadvars nesnesindeki değerleri sunucu tarafındaki script inize gönderir. myloadvars.sendandload( targetloadvars, POST ); LoadVars nesnesindeki değerler adresine gönderilir. Sunucu tarafındaki script ten gönderilen bütün sonuçlar targetloadvars nesnesine kaydedilecektir. sendandload() fonksiyonundaki son parametre POST tur. POST parametresi Flash a, verilerin sunucu tarafındaki script e nasıl gönderileceğini bildirir. LoadVars nesnesini POST metodunu kullanarak gönderirken, bütün alanlar sunucu tarafındaki script e form değişkenleri olarak gönderilir. Form değişkenleri, HTTP başlığında gönderilen ve ziyaretçi tarafından görülmeyen değişkenlerdir. Bu, uzun değişken grupları için uygundur ve daha da önemlisi gereklidir, çünkü script, verilerin bu şekilde gelmesini bekler. POST yerine kullanılabilecek diğer bir metot seçeneği GET tir. r GET metodu, değerleri sunucu tarafındaki script lerinize sorgu dizesi ile birlikte URL değiş kenleri olarak gönderir. Sorgu dizesi (query string), yani adres çubuğundaki URL in soru iş aretinden sonraki kısmı, kısa değiş kenleri göndermek için uygundur. Örneğin URL inde sorgu dizesi name=jdehaan d ır. Girdiğiniz kod bloğunun son ActionScript kısmı, sadece test ortamında hata ayıklama için kullanılır. Veriler Flash htan sunucu tarafındaki script e gönderildiğinde, trace deyimi Output panelinde belirir. Bu da, siz test ortamında çalışırken Flash ı n verileri gönderdiğini öğrenmenizi sağlar. trace deyimleri sadece geliştirme ve test amacıyla kullanılır ve dosya yayınlanmadan ve Web sitesi için kullanılan sunucuya (buna bazen üretim ortamı da denir) yüklenmeden önce silinmelidir. Son olarak aşağıdaki kodu görürsünüz: targetloadvars.onload = function() { }; trace(this.success); Bu kod, Flash, sunucu tarafındaki script ten bir cevap aldığında tetiklenir. Bazen Flash bir cevap a beklediği için, bunun çalıştırılmasından önce kısa bir süre geçer. Geçerli durumda sunucu başarı veya başarısızlık durumunu gösteren bir dize (string) değeri döndürür ve bu değer Output panelinde görüntülenir (yine test amacıyla). Dersin sonunda Tech Bookstore sitesine ait düğmeleri ve menüleri çalışır hale getirdikten sonra bu formu test edebileceksiniz. Gerçekte, sadece verilerin başarıyla gönderilmesi durumunda kullanıcıları bir Teşekkür Ederiz (thank you) sayfasına yönlendirirsiniz ve veriler gönderilmediği takdirde de kullanıcılara göstermek 324 DERS 10

344 üzere hata mesajları oluşturulmasını sağlarsınız. Bu uygulamada, hata oluşması durumunda son kullanıcıya bir geribildirim sunmayacaksınız. Bununla birlikte, başarı sayfası, oynatım kafasını thankyou kare etiketine yönlendiren gotoandstop( thankyou ); satırında hedeflenmiştir. 4. bookstore14.fla dosyasında yaptığınız değişiklikleri kaydedin. Dosyanızı kaydedin ve Control > Test Movie komutunu kullanarak test edin. Sitenin geribildirim bölümüne gidin ve geribildirim formunu doldurun. Send düğmesine tıklayın ve 2. adımda e-posta adresinizi belirttiyseniz, gelen kutunuzda Flash tarafından gönderilen bir e- posta mesajı görürsünüz. Eğer back (geri) düğmeniz çalışmıyorsa, thankyou karesine gidin, onu seçin ve Actions panelini açın. Ders 8 de Script Assist i kullanarak bir ActionScript kodu eklemiş tiniz. Eğer Script Assist modundaysanız, onu kapatın ve 2. satırı this._parent.gotoandstop( form ) ile değiş tirin. Bu satır, düğmeye movie clip Timeline ında oynatım kafasını belirli bir şekilde kontrol etmesini söyler. This, düğmeyi, parent da movie clip Timeline ını gösterir. Her şey düzgün çalışıyorsa, ıy dosyay ı kaydedin ve açık bırakın. Bir sonraki adımda anket formundaki verileri göndereceksiniz. Anket Formundaki Verileri Göndermek Bu alıştırmada, önceki alıştırmada geribildirim formundan veri gönderirken kullandığınıza benzer bir yöntemle bir sunucuya değer göndermek için LoadVars nesnesini kullanacaksınız. Anket formu geribildirim formuna göre daha karmaşık, çünkü burada sadece metin alanları yok. Bu formda ayrıca, değerlerini almanız gereken bir NumericStepper bileşeni, List bileşeni, TextArea bileşeni ve iki CheckBox bileşeni var. Buradaki alıştırmada, değişkenleri sunucu tarafındaki bir script e göndermek için ActionScript ten faydalanacaksınız. Daha sonra bu script sonuçları işleyerek hesaplanmaya hazır hale getirecek. 1. bookstore14.fla dosyasında ana belge Timeline ının 50. karesinde olduğunuzdan emin olun. mcquestionform u üzerine çift tıklayarak sembol düzenleme modunda açın. Stage deki bileşen örnekleri için örnek isimleri girin. Açık değilse, sabit diskinizdeki TechBookstore klasöründe bulunan ve bu derste daha önce üzerinde çalıştığınız bookstore14.fla dosyasını açın. feedback katmanının 50. karesinde olduğunuzdan emin olun. mcquestionform a çift tıklayarak örneği sembol düzenleme modunda açın. actions katmanına yanlışlıkla herhangi bir sembol eklememek için bu katmanı kilitleyin. Önce Stage deki bileşenlere birer örnek ismi vermeniz gerekir. NumericStepper a nsnumyears örnek ismini, ComboBox a da cbnavigation örnek ismini verin. TextArea bileşenine tabooks örnek ismini atayın. Sonra da Designer CheckBox a chdesigner örnek ismini, Developer CheckBox FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 325

345 örneğine de chdeveloper örnek ismini atayın. Son olarak da, eğer henüz adlandırılmadıysa Send düğmesine bsend örnek ismini atayın. 2. Actions panelini kullanarak actions katmanının 1. karesine aşağıdaki ActionScript kodunu ekleyin. mcquestionform örneğinde actions katmanının 1. karesini seçin ve Actions panelini açın ya da genişletin (F9). Panele aşağıdaki kodu yazın: //anket verilerini dışarıya, sunucuya gönderir bsend.onrelease = function(){ var targetloadvars:loadvars = new LoadVars(); var myloadvars:loadvars = new LoadVars(); myloadvars.surveyexperience = nsnumyears.value; myloadvars.surveynavigation = cbnavigation.selecteditem.label; myloadvars.surveybooks = tabooks.text; myloadvars.surveydesigner = chdesigner.selected; myloadvars.surveydeveloper = chdeveloper.selected; myloadvars.sendandload( targetloadvars, POST ); trace( send ); targetloadvars.onload = function() { trace(this.success); }; gotoandstop( thankyou ); }; 326 DERS 10

346 Bu kod, geribildirim verilerini sunucu tarafındaki script e göndermek için LoadVars kullandığınız önceki alıştırmadaki koda benziyor. Bu iki script arasında birkaç önemli fark var. Ankette TextInput ve TextArea yerine farklı bileşen tipleri kullanıldığı için, bileşenden verileri alma ve bunları LoadVars nesnesine ekleme işlemleri biraz daha karmaşıktır. Her bileşen farklıdır, dolayısıyla her biri bileşenin değerine erişmek için farklı bir yol kullanır. Örneğin TextArea ve TextInput bileşenleri metindeki geçerli değeri depolarken, CheckBox bileşeninin bir değeri yoktur, ama bunun yerine selected adında bir Boolean (Yes/No) parametresine sahiptir ve bileşenin işaretlenip işaretlenmediğini gösterir. NumericStepper bileşeninin geçerli değerine erişmek için önce value parametresine erişirsiniz. List bileşeni, kendi içinde bir nesne olan ve iki değeri (data ve labels) bulunan selecteditem parametresini kullanır. labels ve data değerlerini Ders 8 de List bileşenin Stage in üzerine sürükledikten sonra tanımlamıştınız. labels için kullanılan değer, geçerli durumda seçili olan öğenin etiketidir ve data için kullanılan değer, Properties denetçisinde veya Component inspector panelinde geçerli durumda seçili olan örnek için tanımladığınız değerdir. Peki, bütün bunları nasıl bileceksiniz? ActionScript in en zor kısmı, neyin ne işe yaradığını bilmek ve bilgileri bileşenler, movie clip ler ve düğmeler gibi yerleşik öğelerle bilgileri yönetmeyi öğrenmektir. ActionScript 2.0 hakkında yazılan kitaplar ve kılavuzların dışında, Flash hta bulunan ve neyin ne işe yaradığını anlatan dokümantasyondan faydalanabilirsiniz. F1 klavye kısayolunu kullanarak Help menüsünü açabilir ya da Help > Flash Help komutunu kullanabilirsiniz. Burada bileşenlerle ilgili sayısız başlık bulunmaktadır ve bunları inceleyerek her birinin nasıl çalıştığını daha iyi anlayabilirsiniz. Yardım (Help) özelliğini unutmayın. Gerçekten çok faydalıdır. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 327

347 Aynen geribildirim formunda olduğu gibi, burada da kodda, talep sunucuya gönderildiğinde sizi bundan haberdar etmek için kullanılan trace deyimleri bulunmaktadır, sunucu cevap verdiğinde işlemin başarılı olduğunu gösteren bir sonuç döndürülecektir. Uygulamanın düzgün çalıştığından eminseniz, bu iki trace deyimini rahatça silebilirsiniz. 3. FLA dosyasındaki değişiklikleri kaydedin. İşiniz bittikten sonra File > Save komutunu seçerek dosyada yapılan değişiklikleri kaydedin. Control > Test movie komutunu seçerek dosyanızı test edin ve anketi doldurun. Send düğmesine tıkladığınızda, her bir bileşende yer alan değerler LoadVars nesnesinde depolanacak ve bir ColdFusion sayfasına gönderilecektir. ProgressBar Bileşenini Eklemek İlerleme çubukları (progress bar), pek çok büyük Flash belgesinin önemli bir parçasıdır; özellikler video, ses kullanan veya tamamen Flash kullanılarak hazırlanan sitelerde büyük önem kazanırlar. Burada, bu durumların hepsiyle karşı karşıyasınız! İçeriği yüklerken, ekranda yüklemenin gerçekleştiğini belirten bir göstergeyi görüntülemek önemlidir. Web sitenizi izlemek için modem kullanan ziyaretçileriniz olabileceği gibi, en hızlı geniş bant bağlantılarına sahip ziyaretçilerin bile izlemeye başlamak için beklemesi gereken büyük bir video dosyanız da olabilir. Bu gibi durumlarda, bir ilerleme çubuğu ziyaretçiye içeriğin yüklenmeye devam ettiğini bildirir. Bu ilerleme çubuğu veya önyükleme içeriği kullanmazsanız, kullanıcılarınız herhangi bir işlem göremedikleri için siteyle ilgili bir sorun olduğunu zannedebilir. SWF dosyası yüklenirken kısa bir süre saniye beklemeleri konusunda onları bilgilendirmek için görsel öğeler kullanmak önemlidir. Bu derste daha önce, Loader bileşenine yüklenen bir SWF dosyasının yükleme sürecini gösteren dinamik bir metin alanı kullanmıştınız. Sonraki iki uygulamada hemen hemen aynı işi yapan bir ilerleme çubuğu kullanacaksınız. Bunun tek farkı, metin alanını sizin eklemeyecek olmanız, çünkü bu işi sizin yerinize ProgressBar bileşeni halledecek. Ne güzel, değil mi? Burada da bookstore14.fla dosyasını kullanacaksınız. 1. Açık değilse, sabit diskinizden TechBookstore klasöründeki bookstore14.fla dosyasını açın. Hâlâ önceki alıştırmada kullandığınız FLA dosyasıyla çalışıyorsunuz. 2. home katmanının 1. karesini seçin. Components panelini genişletin ve bir ProgressBar bileşeni örneğini Stage e sürükleyin. İlerleme çubuğunu (ProgressBar), Loader bileşeninin ortasına yerleştirin ve ona pbhome örnek ismini verin. 328 DERS 10

348 Properties denetçisinde Parameters sekmesinde mode parametresini polled olarak ayarlay ın ve source parametresini Loader bileşeninin örnek ismine (home_ldr) ayarlayın. polled modu, ilerleme çubuğunu getbytesloaded() ve getbytestotal() adındaki ilerleme durumunu takip etmek için faydalanılan iki ActionScript metoduyla çalışabilen her türlü öğeyle birlikte kullanmanızı sağlar. Bu derste daha önce ilerleme durumunu progress (ilerleme) olayı ile (getbytesloaded() ve getbytestotal() değil) göstermiş ve bu bilgiyi bir metin alanında görüntülemiştiniz. Movie clip plerinin bir progress olayı yoktur; dolayısıyla, ıy bu Loader örneğini bir movie clip ple birlikte kullanmak istediğinizde, eğer event (olay) modundaysa (sadece progress ve complete olaylarıyla çalışır) şansınız yok demektir. Burada bir Loader bileşeniyle çalıştığınız için event ya da polled modlarının her ikisini de sorunsuzca kullanabilirsiniz. 3. Olay izleyici nesnenin ActionScript kodunu ekleyin. Bu kodu, actions katmanının 1. karesine ekleyin. İçerikte Loader bileşeni görüntülendiğinde, ProgressBar görünür durumda ve % 100 değerinde kalır. İçeriğin yüklenmesinin bitmesini bekleyen ve ardından ProgressBar bileşenini gizleyen bir olay işleyici oluşturmanız gerekmektedir. actions katmanında birinci kareyi seçin ve Actions panelinde mevcut kodun altına aşağıdaki kodu ekleyin: var pblistener:object = new Object(); pblistener.progress = function(evt) { evt.target._visible = true; }; pblistener.complete = function(evt) { evt.target._visible = false; }; FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 329

349 Bu ActionScript kodunu daha önce görmüştünüz: progress ve complete olaylarını izleyecek bir nesne oluşturuyorsunuz. Ancak bu kez bu olaylar ProgressBar tarafından tetiklenecek. Burada ProgressBar bir tür aracı gibi davranıyor. Loader bileşeninin progress ve complete olaylarını izliyor ve kendi progress ve complete olaylarıyla eşleştiriyor. İlerlemenin gösterilmesi sonuçta sizin bir ActionScript kodu yazmanıza gerek kalmadan gerçekleşiyor. ActionScript kodunuz, ProgressBar ın sadece bir dosya yüklenirken görünmesini sağlıyor ve dosya tamamlandığında görünmez hale getiriyor. evt denen seçenek işte bununla ilgileniyor. evt seçeneği, izleyici nesneyle konuşan bileşen ya da yayıncı d ır (burada ProgressBar bileşeni). progress ve complete olaylarını, ProgressBar bileşeninin görünürlüğünü ayarlamak için kullanacaksınız. Harici SWF dosyası Loader bileşenine yüklenmekteyken, ProgressBar bileşeni Stage de görünür haldedir ve dosyanın yüzde kaçının yüklendiğini gösterir. complete olayı gerçekleştiğinde, içerik tamamen yüklenmiştir ve ProgressBar bileşeni Stage de gizlenebilir, çünkü Loader örneği zaten yüklenen içeriği görüntüler. 4. ProgressBar örneğini gizlemek için, pbhome ProgressBar bileşeni için bir olay izleyici oluşturun. Loader bileşenindeki içeriğin yüklenmesi tamamlandıktan sonra Stage deki pbhome ilerleme çubuğunu gizlemek için, actions katmanının altına aşağıdaki ActionScript kodunu eklemeniz gerekir. Aşağıdaki kodu, 3. adımda girdiğiniz ActionScript kodunun altına ekleyin. pbhome.addeventlistener( progress, pblistener); pbhome.addeventlistener( complete, pblistener); Bu ActionScript kodu, Stage deki pbhome örneğine iki olay izleyici ekler. Şimdi, pbhome ProgressBar progress (ilerleme) olayını aldığında, pblistener a haber verir; sonra da pblistener progress olay işleyicisindeki talimatları çalıştırır. Flash tarafından complete olayı tetiklendiğinde, pblistener olay işleyicisi hedef bileşenin (olayı üreten bileşen, yani burada pbhome) görünürlüğünü (visibility) false olarak ayarlar. Olay, Stage deki sembolü gizler. 3. adımdaki evt.target yerine pbhome yazsanız da kod aynı şekilde çalışacaktır. pbhome u fonksiyonda sabit şekilde kodlamanın (değeri değişebilen bir değişken yerine, kesin bir değer kullanmak) sakıncası, fonksiyonun sadece o bileşen örneğiyle çalışmasıdır. Fonksiyonu dinamik tutarak ve evt.target kullanarak, aynı ProgressBar izleyici nesnesini FLA dosyasındaki diğer ProgressBar örneklerinin her biri için kullanabilirsiniz. 330 DERS 10

350 5. Siteye dinamik olarak yüklenmesi gereken diğer SWF dosyaları için de ProgressBar örnekleri ekleyin. Her örneğe yeni bir örnek adı verin. ProgressBar bileşenlerini Stage e ekleme işlemini Reviews, News, Catalog, Tour ve Map kısımlarını yükleyen Loader bileşen örnekleri için de tekrarlayın. Her yeni ProgressBar bileşen örneğine tekil bir isim verin. ProgressBar bileşeninin her yeni örneği için source parametresini, izleyeceği Loader bileşen örneğine göre ayarlayarak değiştirdiğinizden emin olun (news_ldr, map_ldr, vs). Her bir ProgressBar bileşenini, bu Loader örneklerinin üzerinde bulunduğu her sayfa (map, news, reivews) için kullanılan katmana eklediğinizden emin olun. Birden çok sayfayı kapsayan bir katman seçerseniz, ProgressBar örneğiniz ait olmadığı sayfalarda da görüntülenecektir. 6. Bir ProgressBar bileşeni içeren her sayfaya bir olay izleyici ekleyin. actions katmanına kodu ekleyin. Koddaki örnek ismini, o sayfadaki ProgressBar örneğinin ismiyle aynı olacak şekilde değiştirin. actions katmanında ProgressBar bileşenleri içeren her kareye, 5. adımda kullandığınız iki satırlık olay izleyici kodunu da eklemeniz gerekir. Her izleyici, FLA dosyasının 1. karesinde tanımlanan pblistener olay işleyici nesnesini yeniden kullanabilir, fakat izleyiciler bileşen örnekleriyle aynı kareye eklenmelidir, çünkü oynatım kafasıyla karşılaşıncaya kadar var olmayacaklardır. Örneğin, news etiketli karedeki kod (40. kare) için ProgressBar bileşeninin pbnews örnek ismine sahip olduğu varsayılırsa, actions katmanına şu kodu eklemeniz gerekir: pbnews.addeventlistener( progress, pblistener); pbnews.addeventlistener( complete, pblistener); FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 331

351 Söylediğimiz gibi, bir ProgressBar içeren her kareye ilgili ActionScript kodunun eklenmesi gerekir. Her sayfada, stop eylemi olan anahtar kareler vardır. Bu kodu her stop eyleminin arkasına eklemek istiyoruz. Koddaki örnek ismini, ilgili sayfanın üzerindeki ProgressBar bileşeninin örnek ismiyle değiştirmeyi unutmamalısınız. 7. Dosyanızı kaydedin ve test edin. ProgressBar bileşenlerinizin yapmaları gereken şeyleri yaptığından emin olun. Control > Test movie komutunu seçin. Siz sayfalar arasında ilerlerken ProgressBar bileşeni saniyenin kesirleri mertebesindeki süreler boyunca görünecek ve sonra da kaybolacaktır. Buradan da complete olayının yapması gerekeni yaptığını, yani her sayfada tüm bilgiler Loader bileşenine yüklendikten sonra bileşeni görünmez hale getirdiğini anlarsınız. ProgressBar bileşeninin ilerleme durumunu görüntülemesini görmek için View > Simulate Download komutunu seçin ve sitenizde dolaşın. View > Download Settings komutunu seçerek indirme hızlarında değişiklik yapabilirsiniz. 332 DERS 10

352 ProgressBar bileşenleriniz çalışmıyorsa, bütün Loader bileşenlerinizin, ProgressBar bileşenlerinizin örnek isimlerini ve bunların ActionScript teki ilgili referanslarını kontrol edin. BÜYÜK/küçük harflerin yazımının doğru olduğunu ve bileşenlere ait tüm referansların tutarlı olduğunu görmeniz gerekir. Tech Bookstore u Yüklemek Tech Bookstore çok büyük bir dosya değildir, çünkü içeriğinin büyük bir kısmı Loader movie clip lerine yüklenmektedir. Ancak, telefon modemleriyle ilerleme çubuğunun yüklenmesi bile çok uzun sürer, bu yüzden sitenin geneli için farklı bir ilerleme çubuğu eklemeliyiz. Bu amaçla, Tech Bookstore sitesinin tamamını yükleyen özel bir SWF dosyası oluşturacaksınız. Bu, problemi çözmenin tek yolu değildir; fakat muhtemelen en kolay yollarından biridir ve daha da önemlisi, MovieClipLoader sınıfının harici içeriği bir movie clip e yüklemek üzere nasıl çalıştığını gösterir. MovieClipLoader sınıfının bu amaç için ve daha sonra geliştireceğiniz sitelerde oldukça faydalı olduğunu göreceksiniz. MovieClipLoader sınıfı, Flash 8 Basic le birlikte gelen bir ActionScript sınıfıdır. Görevi, SWF dosyalarının ve JPG, PNG ve GIF resimlerinin yüklenmesini başlatmak, denetlemek ve tamamlamaktır. Kendisiyle ilişkilendirilmiş görsel bir bileşeni olmadığından, indirme işleminin ilerleyişini göstermek üzere kendi ilerleme çubuğunuzu ya da benzer bir öğeyi oluşturmayı planladığınız uygulamalar için çok uygundur. Şimdiki uygulamada bunu yapacaksınız. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 333

353 1. loader.fla adında yeni bir FLA dosyası oluşturun ve bunu TechBookstore klasörüne kaydedin. Bu dosya TechBookstore sitesine online olarak yüklenecek ve MovieClipLoader sınıfını kullanarak siteyi yüklemek için oluşturacağınız bir ilerleme çubuğu içerecek. MovieClipLoader sınıfı, resimler gibi içeriklerin ve oluşturduğunuz çok sayıda bookstore.fla dosyası gibi SWF dosyalarının movie cip lere başarılı bir şekilde yüklenip yüklenmediğini takip edebilir. ProgressBar bileşeni kendi başına 30 KB gibi bir dosya boyu artışına neden olduğundan, çok az yer kaplayan bir SWF dosyası oluşturarak, çevirmeli bağlantı kullanan ziyaretçilerin ProgressBar bileşeninin yüklenmesini beklerken boş bir SWF dosyası görmesini engelleyeceksiniz. Ziyaretçileriniz beklerken onları eğlendirmek için küçük bir grafik veya küçük bir animasyon eklemek isteyebilirsiniz. Bu animasyonun boyu küçük olmalıdır, aksi takdirde ziyaretçi bir de bunun yüklenmesini beklemek zorunda kalacaktır. 2. Yeni FLA dosyasının kare hızını (Frame rate) 21 fps ve boyutlarını (Size) 780 (genişlik) x 520 (yükseklik) olarak ayarlayın. Layer 1 in adını progress olarak değiştirin. Bunun üzerine yeni bir katman ekleyin ve actions olarak adlandırın. Bu boyutlar ve kare hızı Tech Bookstore unkilere uygundur. Yani SWF dosyanız loader.swf dosyasına yüklendikten sonra yavaşlamayacaktır. Neden yavaşlasın ki? diye sorabilirsiniz. Çünkü bir SWF dosyasını diğerine yüklediğinizde ebeveyn SWF dosyasının kare hızını alır. Dosya yükleme işlemini yönetmek için actions katmanına bir ActionScript kodu ekleyeceksiniz; progress katmanı da indirme işleminin ilerleyişini görsel olarak ifade eden grafikler içerecek. 3. Stage üzerinde Merge Drawing modunda kendi seçtiğiniz dolgu rengiyle bir dikdörtgen oluşturun. Dikdörtgeni yaklaşık genişliği 150 piksel, yüksekliği de 10 piksel olacak şekilde boyutlandırın. Bu dikdörtgen daha önce kullandığınız bileşen gibi bir ilerleme çubuğu olarak çalışacaktır. Dikdörtgenin boyutlarını değiştirebilirsiniz, ancak aynı oranları ve şekli korumaya çalışın. 334 DERS 10

354 Dolgu rengi, SWF dosyası yüklenirken boyu büyüyen ilerleme çubuğunun görevini görecek ve kenarın çevresindeki dış hat ilerleme çubuğunu içerecek; bu sayede ziyaretçilere SWF dosyasının daha ne kadar veri yüklemesi gerektiği gösterilecektir. Tools panelinde Rectangle aracını seçin. İstediğiniz bir dış hat ve dolgu rengini seçin, Merge Drawing modunda olduğunuzdan emin olun ve Stage in üzerinde herhangi bir şekilde ve boyda bir dikdörtgen çizin. 4. Dolguyu seçin ve bunu bir movie clip e dönüştürün. Bu movie clip e bar_mc örnek ismini verin. Ardından dikdörtgenin dış hattını seçin, bunu da bir grafik sembolüne dönüştürün ve Modify menüsünden Arrange > Bring to Front u seçin. Stage deki dolguyu seçin ve F8 tuşuna basarak bunu bir movie clip e dönüştürün. Properties denetçisini açın ve <Instance Name> alanına bar_mc yazın. Dolguyu bir movie clip e dönüştürdüğünüzde, movie clip i çevreleyen dış hattın üzeri örtülür. Bu yüzden bütün dış hattı seçmeniz (bütün kısımları seçmek için dış hatta çift tıklayın) ve F8 e basarak grafik sembole dönüştürmeniz gerekir. Graphic radyo düğmesini seçin, sembolü graphic_gr olarak adlandırın ve OK düğmesine tıklayın. Dış hattın kendisiyle ilgili bir şey yapmayacaksınız, dolayısıyla dosya boyunu korumak için bir grafik sembole dönüştürülür. Movie clip lerin daha büyük bir yük eklediğini hatırlayın. Dış hat bir sembole dönüştürüldükten sonra seçili durumdayken Modify > Arrange > Bring to Front komutunu seçin. Bu işlem sembolün konumunu değiştirir ve tekrar bar_mc nin önünde görünmesini sağlar. 5. Stage de dinamik bir metin alanı oluşturun ve loading (yükleniyor) yazın. Metin rengini siyah, boyunu 12 pt, fontunu Arial olarak ayarlayın ve Alias text düğmesine tıklayın. Metin alanını sağa hizalayın ve metin alanını önünde biraz boşluk olacak şekilde boyutlandırın. Ardından, alanı dikdörtgenin yanına yerleştirin ve ona pctloaded_txt örnek adını verin. Metin alanına loading yazın. Metin, yüklenen bu metne ek olarak SWF dosyasının yüklenen yüzdesini görüntüleyecek ve yüklenen içeriğin yüzdesi değişecektir, çünkü bu alan bir dinamik metin alanı olarak ayarlanmıştı. Alanın hizalama ayarını sağda olacak şekilde değiştirin. Böylece, dilerseniz metni ilerleme çubuğunun sağına hizalayabilirsiniz. Sol taraftaki metin değiştiği için ve loading (yükleniyor) yazısı değişmeden kaldığı için, bu metin alanı SWF dosyası yüklendiğinde daha iyi görünür. Metin alanına dinamik olarak yüklenen metnin boy değişimi için biraz alana sahip olacağı şekilde, metin alanının önünde biraz boşluk bırakmanız gerekiyor; çünkü metin FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 335

355 alanındaki sayılar değiştikçe, metnin boyutları da değişecek. Önceki şekilde gördüğünüz gibi, metin alanının boyunu, metnin alanına atadığınız yazının tamamını alabileceği şekilde ayarlamalısınız. Metin alanına çift tıklayarak sağ alt köşesinde beyaz bir karenin görüntülenmesini sağlayın. Bu kareye tıklayın ve sürükleyerek metin alanının boyunu ayarlayın. Ardından Properties denetçisini kullanarak pctloaded_txt örnek ismini ekleyin; ActionScript kullanarak buna bir metin değeri atayacaksınız. 6. Dikdörtgeni ve metin alanını seçin. Ardından F8 tuşuna basarak bunları bir movie clip e dönüştürün. Bu movie clip e loader_mc örnek ismini (instance name) verin. Tı klarken Shift tuşunu basılı tutarak her iki örneği de seçin. Ardından F8 tuşuna basın ve Movie clip radyo düğmesini seçin. Yeni movie clip in sembol ismi olarak loader_mc yazın ve OK düğmesine tıklayın. Ardından Stage üzerindeki örneği seçin ve Properties denetçisini açın. Properties denetçisinde movie clip in örnek ismini loader_mc olarak ayarlayın. 7. actions katmanının 1. karesine MovieClipLoader sınıfı için kullanılacak ActionScript kodunu ekleyin. actions katmanının 1. karesini seçin ve Actions panelini açın. Script bölmesine aşağıdaki kodu yazın. Bu ActionScript kodunun açıklaması, kodun altındadır. loader_mc.bar_mc._xscale = 0; var myloader_mcl:moviecliploader = new MovieClipLoader(); var mcllistener:object = new Object(); mcllistener.onloadprogress = function(target_mc:movieclip) { var prog:object = myloader_mcl.getprogress(target_mc); var pctloaded:number = Math.round((prog.bytesLoaded/prog.bytesTotal)*100); loader_mc.bar_mc._xscale = pctloaded; loader_mc.pctloaded_txt.text = pctloaded+ % loaded ; }; myloader_mcl.addlistener(mcllistener); myloader_mcl.loadclip( bookstore14.swf, this.createemptymovieclip( holder, 2)); Bu ActionScript kodu şu ana kadar çalıştığınız kodlardan biraz farklı, ama bu fark çok büyük değil. Aslında burada sadece birkaç yenilik var. MovieClipLoader sınıfı, movie clip e yüklenmekte olan dosyaların ilerlemesini ve durumunu almakta kullanılır. 336 DERS 10

356 Yeni bir MovieClipLoader nesnesi örneği ve MovieClipLoader tarafından oluşturulan olayları izlemek için yeni bir izleyici nesnesi oluşturursunuz. addlistener metodunu kullanarak, mcllistener nesnesine yeni bir izleyici ekler ve ardından loadclip metodunu kullanarak SWF dosyasını yüklersiniz. loadclip metodu şu şekilde çalışır: MovieClipLoader.loadClip( url, clip); URL yolu (göreceli veya mutlak), yüklemekte olduğunuz dosyaya ait yoldur ve clip, dosyayı içine yüklediğiniz movie clip örneğidir (Loader örneği veya seviye). Bu, MovieClip.loadMovie metoduyla aynı şekilde çalışır. Yeni içerik ziyaretçinin bilgisayarına yüklendiğinde, onloadprogress izleyicisi çağrılır ve yüklemenin ilerlemesini görüntülemek için kullanılır (ilerlemeyi görüntülemek için bar_mc yi kullanmanıza yardım eder). MovieClipLoader sınıfı, parametre olarak SWF dosyasını yüklediğiniz hedef movie clip i alan bir getprogress metoduna sahiptir. Bu, prog olarak adlandırılan nesneyi döndürür. prog nesnesinin iki özelliği vardır: bytesloaded ve bytestotal. Ardından bunu yuvarlar ve 100 ile çarparak movie clip in yüklenen yüzdesini elde edersiniz. Yü klenen yüzdeyi pctloaded isimli bir değişkene kaydedersiniz. bar_mc movie clip ini, _xscale MovieClip özelliği ile pctloaded değişkenini kullanarak, yüklenen yüzdeye göre ölçeklersiniz. _xscale, örneğin yatay eksen (X ekseni) üzerindeki ölçeklenme oranını belirtir. Ardından yüzdeyi görüntülemek için dinamik metin alanının değerini ayarlar ve bir miktar metin eklersiniz (% loaded yazısı). SWF dosyası 0 seviyesine yüklendiği için, burada bulunan içeriği atacak veya iptal edecektir. Yani, SWF dosyasının yüklenmesi tamamlanır tamamlanmaz, yükleyici SWF dosyası (ilerleme çubuğuyla birlikte) yok olur. Bir movie clip e içerik yüklüyorsanız, FLA dosyanızda şu ActionScript kodlarını kullanabilirsiniz: mcllistener.onloadcomplete = function(evt) { loader_mc._visible = false; }; bu satırları doğrudan myloader_mcl.addlistener(mcllistener) ın üstüne yerleştirin; onloadcomplete izleyicisi çağrıldığında, dosya tamamen indirilmiş demektir. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 337

357 Bu gerçekleştiğinde, loader_mc nin (ilerleme çubuğu) visibility (görünürlük) parametresi false olarak ayarlanır. Böylece, Tech Bookstore sitesinin arkasında kalmaya devam etmez (bu, son derece kötü görünürdü). 8. FLA dosyasını test edin. FLA belgesini test ederken, dosya sabit diskinizden son derece hızlı bir biçimde yüklendiğinden, dosyanın yüklenmesini izleyemeyebilirsiniz. Dosyayı Web e koyduktan ve yükleyiciyi test ettikten sonra aradaki farka dikkat edin. Sonraki alıştırmada, tüm dosyaları test ederek çalışıp çalışmadıklarını kontrol edeceksiniz. 9. Eğer her şey istendiği gibi çalışıyorsa, ActionScript kodundaki son satırı değiştirin. Sonra da dosyada yaptığınız değişiklikleri kaydedin. bookstore14.fla ayı dosyanın son versiyonuna yüklemeyeceğiniz için, Tech Bookstore FLA dosyasının geçerli versiyonunu yüklediğiniz son satırı değiştirmeniz gerekiyor. Actions katmanındaki bu kodu şöyle değiştirin: myloader_mcl.loadclip( TechBookstore.swf, 0); Bu kod, bunun yerine Tech Bookstore FLA dosyasının son sürümü olan TechBookstore.swf yi yükleyeceğinizi belirtir. TechBookstore.swf dosyası 0 seviyesine yüklendiği için, mevcut içeriğin üzerine yazar. Bir Linux ya da Unix sunucusu kullanıyorsanız, BÜYÜK/küçük harf duyarlılığına dikkat edin. 338 DERS 10

358 Tech Bookstore Sitesini Test Etmek ve Hata Ayıklamak Şu anda Tech Bookstore sitesi tamamlanmak üzere. Son iki derste eklediğiniz ActionScript kodları sayesinde menü ve düğmelerle sayfalar arasında dolaşabilirsiniz. Önceki alıştırmalarda sayfalara yüklediğiniz Loader bileşenleri sayesinde, içerik her sayfaya yüklenir, ayrıca sayfalarda yüklenmekte olan içerik için kullanılan önyükleyiciler bulunmakta (sabit diskiniz çok hızlı olduğu için bu ilerleme durumunu göremeyebilirsiniz). Şimdi, içeriğin yüklendiğinden ve ProgressBar bileşeni örneklerinin düzgün çalıştığından emin olmak için alanları test edeceksiniz. Daha önce her şeyin yolunda gittiğinden emin olmak için bazı test işlemleri uygulamıştınız, burada test işleminin ayrıntılarına gireceksiniz. Eğer bu noktada işler beklediğiniz gibi yürümezse veya bir öğe yüklenmezse, bazı değişiklikler yapabilirsiniz. İlk olarak, bütün dosyalarınızın TechBookstore klasöründe ve bunun içinde oluşturduğunuz alt klasörlerde doğru konumda bulunup bulunmadığını kontrol etmelisiniz. Yeni klasörler eklediğiniz için URL leri düzeltmeniz gerekebilir veya başka klasör kullanmadan her şeyi TechBookstore klasöründe depolamayı da seçebilirsiniz (bu yöntem biraz karışıklığa neden olabilir, fakat başlangıçta idealdir, biz de bu yüzden onu seçtik). Bandwidth Profiler (Bant Genişliği Profilcisi), SWF dosyasının indirilme performansını belirlemenizi sağlar. Bunu yapmak için, farklı bant genişliği ayarlarında (modemler, vs.) SWF dosyasının indirilme işlemini taklit ederek dosyanın nasıl görüneceğini size gösterir. Dosyanız önbelleğe alındığında, bazen sizin ayarladığınız bant geniş liği profilinden daha hızlı yükleniyor gibi görünebilir. Bir indirme iş lemini taklit etmeyi seçerseniz (Ctrl+Enter ya da Cmd+Enter tuşlarına bir sabiye basarak), SWF dosyasının görüntülenmesiyle ilgili sorunlarla da karşı laşabilirsiniz. Bu arada sırada meydana gelebilir. Profiler, SWF dosyasının her karesinde depolanan veri miktarını gösterir. Bu, SWF içeriğini görüntülemeden önce, ne kadar bilginin önyüklemeyle indirilmesinin gerektiğini gösterir. Bir SWF akıyorsa (streaming), diğerlerinden daha fazla içeriğe sahip bir karede daha uzun kalabilir. Bu da, oynatımın istediğiniz kadar düzgün olmamasına neden olur. Daha önce bahsettiğimiz gibi, içeriğin sunucudan akarak değil, ilerleyerek yüklendiğini hatırlayın. Bu alıştırmanın ilerleyen kısımlarında, Bandwidth Profiler hakkında yeni bilgiler edineceksiniz. FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 339

359 1. bookstore14.fla dosyasını açın ve and Bandwidth Profiler da SWF dosyasını test edin. Bandwidth Profiler a test ortamında SWF dosyasını test ederken erişebilirsiniz. Control menüsünden Test Movie eyi seçin ya da Ctrl+Enter tuşlarına basın. Test ortamındayken, View menüsünden Bandwidth Profiler ı seçebilir ya da Ctrl+B tuşlarına basabilirsiniz. Bandwidth Profiler da d Stage in boyutları, geçerli kare hızı, SWF dosyasının kilobayt cinsinden boyu (aynı zamanda bayt cinsinden boyu), SWF dosyasındaki kare sayısı, SWF dosyasının bir ziyaretçi tarafından oynatılmasının kaç saniye sürdüğü gibi birçok faydalı bilgi bulunur. Bandwidth Profiler, aynı zamanda her karede ne kadar veri gönderildiğini gösteren bir grafik içerir. Bu, SWF dosyasını optimize etmenize yardımcı olur. Bir karede çok fazla bilgi varsa ve oynatımı yavaşlatıyorsa, bu verinin bir kısmını, daha az veri içeren başka bir kareye taşımak isteyebilirsiniz. Bandwidth Profiler ile ilgili başka bir özellik de, Flash test ortamında yükleme sürelerini taklit etme yeteneğidir. View menüsünden Simulate Download u seçerek, Flash SWF dosyanızın yavaş bir modeme sahip bir ziyaretçi tarafından oynatılmasını taklit edebilirsiniz. Bu, yavaş İnternet bağlantılarında (çevirmeli bağlantı gibi) SWF dosyalarının nasıl oynatıldığını görebilmenizi sağlar ve kullanıcıların içeriği yüklemesinin ne kadar süreceğini gösterir. 2. İndirme ayarını taklit etme özelliğini kullanın, ardından ilerleme çubuklarınızın ve düğmelerinizin çalıştığını son bir kez doğrulamak için bütün menü düğmelerinizi test edin. View menüsünden Download Settings i seçtikten sonra açılır menüden farklı bir ayar seçerek, oynatım hızlarını değiştirebilirsiniz. Hızlar, saniyede 1.2 KB lık 14.4 çevirmeli bağlantıyla, saniyede KB değerine sahip ve bariz şekilde daha hızlı olan T1 bağlantısı arasında değişir. Test etmek istediğiniz belirli bir hız bu listede yoksa test etmek üzere saniyedeki bayt sayısını belirleyebileceğiniz maksimum üç özel yükleme ayarını ekleyebilirsiniz. SWF dosyasını çeşitli hızlarda test etmek her zaman iyi bir fikirdir, çünkü ziyaretçi içeriği görüntülemeden önce ne kadar sürenin geçtiği hakkında genel bir fikir verir. Bu, Web sitesinin sunduğu genel deneyimi büy ük ölçüde etkiler ve Macromedia a anın söylediği gibi: Deneyim Önemlidir... Kullanıcılar SWF dosyasının 340 DERS 10

360 yüklenmesi için uzun süre beklemek zorunda kalırlarsa, büy ük olasılıkla Flash içeriğinin bir kısmını bile görmeden siteyi terk edeceklerdir. Sahip olduğunuz her menü seçeneğini ve her düğmeyi test ettiğinizden emin olun. Geribildirim ve anket formlarını doldurun ve bunların da çalıştığından emin olun. Bütün resimlerinizin ve SWF dosyalarınızın arabirime yüklendiğinden emin olun. Hataları bulmaya çalışın ve bulduğunuz hataları düzeltin. 3. bookstore14.fla dosyasının yeni bir versiyonunu techbookstore14.fla olarak kaydedin. Kitap mağazası dosyalarının tümünü tamamlamak için yeni bir dosya adı kullanıyoruz. Tech Bookstore FLA dosyalarını ve bunlarla ilişkili SWF dosyalarını tamamladınız. Yapılması gereken tek şey, dosyaları yayınlamaya başlamak ve Web e yüklemektir. İşin zor kısmı bitti, şu ana dek öğrendiğiniz ve uyguladığınız şeylerle gurur duyabilirsiniz. Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Web sitelerinin nasıl optimize edildiğini öğrendik (Sayfa ). Runtime bitmap caching (çalışma zamanında bitmap leri ön belleğe alma) özelliğiyle oynatım performansını artırdık (Sayfa ). Farklı platformları göz önüne aldık (Sayfa ). Bir Loader bileşen örneğine harici SWF dosyaları yükledik ve indirme işleminin ilerleyişini gösterdik (Sayfa ). Tech Bookstore sitesindeki kalan sayfaların her biri için SWF dosyaları yükledik (Sayfa ). LoadVars nesnesini kullanarak Flash htan dışarıya veri gönderdik (Sayfa ). Siteye yüklenen içeriği görüntülemek için ProgressBar örnekleri ekledik (Sayfa ). Bir SWF dosyasını yüklemek için MovieClipLoader sınıfını kullandık (Sayfa ). Tech Bookstore sitesini test ettik ve hatalarını ayıkladık (Sayfa ). FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 341

361

362 11 Flash Belgelerini Yayınlamak Macromedia Flash 8 Basic, pek çok farklı türde uygulama oluşturmak için kullanılabilir. Flash uygulamalarının en popüler kullanım şekillerinden biri, bunları İnternet üzerinden yayınlamaktır. Tabii ki Flash uygulamalarının kullanımı bununla sınırlı değildir. Flash, cep telefonlarında, PDA lerde, halka açık kiosk larda, televizyon yayıncılığında ve bu tür uygulamaların kullanılabildiği her yerde karşımıza çıkmaktadır. Flash 8 uygulamalarının herhangi bir platformda kullanılabilmesi için önce yayınlanması gerekir. Bundan önceki 10 derste Flash ın geliştirme ortamında çalıştınız. Bu derste geliştirme dosyasını yayınlayarak Flash Player ın anlayabileceği bir formata, yani SWF formatına dönüştüreceksiniz. Ayrıca SWF dosyanızla birlikte HTML dosyalarınızı da yayınlayacak ve SWF dosyalarınıza metaveri ekleyeceksiniz.. Böylece arama motorlarının sitenizle ilgili bilgileri daha kolay bulmasını ve arama listelerinde daha üst sıralarda görüntülemesini sağlayacaksınız. TechBookstore sitesi bir HTML sayfasına gömülü durumda

363 Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Bir dosyaya metaveri ekleyeceğiz. Yeni bir yayınlama profili oluşturacağız. Yayınlama ayarlarımızı nasıl değiştireceğimizi öğreneceğiz. Ziyaretçilerin Flash Player ını algılatarak, gerekiyorsa onları başka bir sayfaya yönlendireceğiz. Bir SWF dosyasının nasıl gömüldüğünü öğreneceğiz. Tech Bookstore sitesi için bir HTML sayfası oluşturacağız. Dosyalarımızı bir sunucuya yükleyecek ve Tech Bookstore sitesini online olarak izleyeceğiz. Yaklaşık Süre Bu dersi yaklaşık 1 saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: lesson11/assets/tile.gif Başlangıç Dosyaları: lesson11/start/techbookstore.fla lesson11/start/loader.fla Tamamlanmış Dosyalar: Lesson11/complete/TechBookstore/(TüTü m Dosyalar) 344 DERS 11

364 Metaveri Eklemek ve SWF Dosyalarını Yayınlamak Macromedia Flash 8 Basic (ve Professional) sürümünde tasarımcılar ve geliştiriciler SWF dosyalarına metaveri ekleyebilirler ve böylece arama motorları bunları bulabilir, indeksleyebilir ve arama sonuçlarında daha üst sıralarda görüntüleyebilir. Stage boyu ve cetvel birimleri gibi belge özelliklerini değiştirirken metaverinin nereden eklendiğini görmüştünüz. Bir Flash belgesini Web e yerleştirmek için, işe bir SWF dosyasın yayınlamakla başlamanız gerekir. Ders 7 de videoyu gömerken ve uygulamanızı Control > Test Movie ile her test edişinizde SWF dosyalarını yayınlamıştınız. Tech Bookstore Web uygulamanızı tümüyle görebilmenizin sebebi budur. Ancak Tech Bookstore uygulamanızın Web de görünebilmesi için en azından SWF dosyasını (burada TechBookstore.swf ve loader.swf) bir HTML belgesine gömmeniz gerekir. Neyse ki Flash Publish Settings iletişim kutusunda SWF dosyasını HTML belgesine gömen HTML etiketlerini ve bu HTML belgesini sizin yerinize oluşturabilir. Bu derste belirli ayarlarla Tech Bookstore sitesini ve loader.swf dosyasını, ayrıca yükleyici SWF dosyasını yayınlayacak ve sonra da belgeleri bir Web sayfasına gömeceksiniz. FLASH BELGELERİNİ YAYINLAMAK 345

365 1. Ders 10 da oluşturduğunuz techbookstore.fla dosyasını açın. Metaveri eklemek için Modify > Document komutunu seçin. Document Properties iletişim kutusuna Properties denetçisindeki Size düğmesine tıklayarak da geçebilirsiniz. Document Properties iletişim kutusunda Title (Başlık) alanına açıklayıcı bir isim, Description (Açıklama) alanına TechBookstore Web sitesinin ne olduğunu, ne işe yaradığını ve neler sunduğunu anlatan kısa bir açıklama girin. Ne yazacağınızı bilmiyorsanız önceki resimden faydalanabilirsiniz. İşiniz bittiğinde OK düğmesine tıklayın. Arama sonuçlarında üst sıralarda çıkma olasılığını artırmak için, açıklama kısmında önemli anahtar sözcükleri abartmadan tekrarlayın. Sık rastlanan sözcük ve bağlaçları kullanmaktan kaçının. Tech Bookstore gibi bir sitenin açıklama metninde kitaplar (books) ya da yaz ılım (software) sözcüklerini tekrar etmek mantıklı bir yaklaşım olacaktır. Normalde, yayınlamadan önce tüm Flash dosyalarınıza metaveri eklersiniz. Burada sadece ana uygulamanın kendisine odaklanıyoruz. 2. File > Publish Settings komutunu seçerek Publish Settings iletişim kutusunu açın. Buna ek olarak, kitabın CD-ROM undaki lesson11/start klasöründe yer alan techbookstore.fla dosyasını da açabilirsiniz. Publish Settings (Yayınlama Ayarları) iletişim kutusundaki sekmeleri kullanarak, Flash tarafından oluşturulan dosyaları kontrol edebilirsiniz. Çeşitli derslerde belgeyi SWF dosyasıyla birlikte yayınlamamak için Formats sekmesini kullanarak HTML seçeneğinin işaretini kaldırmıştınız (çünkü buna ihtiyacınız yoktu). Bu sekmenin yardımıyla, yayınlamak üzere ilâve dosya formatları seçebilirsiniz. Bu formatların arasında EXE ve HQX de vardır (genellikle Flash projector dosyası olarak bilinirler). Bu dosyalar CD-ROM ve kiosk sunuları oluşturmak 346 DERS 11

366 için çok faydalıdır. Flash Player, doğrudan çalıştırılabilir dosyaya gömülür ve böylece kullanıcının en yeni Flash Player sürümüne sahip olup olmadığı konusunda endişe etmeye gerek kalmaz. Diğer dosya formatları arasında çeşitli resim dosya formatları ve hatta MOV video formatı vardır. 3. Publish Settings iletişim kutusunun üst tarafındaki Create New Profile düğmesine tıklayın. Yayınlama profili için bir isim yazın ve OK düğmesine tıklayın. Sabit diskinize, profili oluşturmadan önce yaptığınız yayınlama ayarlarıyla ilgili bilgileri içeren bir yayınlama profili kaydedilecektir. Bu, aynı ayarları birden fazla belgeyi yayınlamak için kullanıyorsanız oldukça faydalıdır (TechBookstore dosyasına yüklediğiniz bütün SWF dosyaları gibi). Bu belge için bir yayınlama profiline ihtiyacınız yok, ancak bu uygulamayla en azından nasıl hazırlandığını öğrenmiş olacaksınız. Bu profili bir sonraki uygulamada kullanacaksınız, fakat loader.fla dosyası için gereken yayınlama ayarlarına uyması için üzerinde bazı değişiklikler yapacaksınız. Siz Create New Profile (Yeni Profil Yarat) düğmesine tıkladıktan sonra, Create New Profile iletişim kutusu açılacaktır. Buradaki metin alanına yayınlama profilinin ismi için Tech Bookstore ya da buna benzer bir şey yazın, sonra OK düğmesine tıklayın. Publish Settings iletişim kutusuna döndüğünüzde, yeni yazdığınız ismin Current Profile (Geçerli profil) açılır menüsüne eklenmiş olduğunu göreceksiniz. Artık yayınlama profilinin ayarlarında gereken değişiklikleri yapabilirsiniz. Bu ayarlar profile kaydedilecektir. FLASH BELGELERİNİ YAYINLAMAK 347

367 4. SWF formatının işaretlenmiş, HTML formatının da işaretlenmemiş olduğundan emin olun. TechBookstore.swf dosyasını loader.swf dosyasına yüklediğiniz için, siteye ait bir ilerleme çubuğu görüntülenecektir. Bu yüzden kitap mağazası için bir HTML sayfasına ihtiyacınız yok ve bu onay kutusunun işaretini kaldırabilirsiniz. HTML sayfası, yükleyici SWF dosyası için gerekecektir. Onu da bir sonraki uygulamada ekleyeceksiniz. 5. Flash sekmesine tıklayın ve belgenin ayarlarının şu şekilde olduğundan emin olun: Version = Flash Player 8, Load order = Bottom up ve ActionScript version = ActionScript 2.0. Compress movie onay kutusu da işaretli olmalıdır. Protect from import ve Omit trace actions onay kutularını da işaretleyin. Bütün bu ayarları aşağıdaki şekilde görüyorsunuz. Flash sekmesini kullanarak, dosyanın hangi Flash Player sürümüne göre yayınlanacağını belirleyebilirsiniz. Kullandığınız ActionScript sürümünü de değiştirebilirsiniz (ActionScript 2.0 ı kullanan varsayılan bileşenler de buna dâhildir). Belgenin varsayılan ActionScript 2.0 ayarını değiştirmeyin. 348 DERS 11

368 Player sürümünü, Flash belgesinin içeriğine bağlı olarak belirlemeniz gerekir. Seçtiğiniz Player sürümüyle çalışmayan bir ActionScript kodu kullanıyorsanız, Output panelinde çeşitli hatalar görüntülenir ve dosyayı kaydetmeye kalktığınızda bir hata mesajıyla karşılaşırsınız. Flash Player 8 isteyen bileşenler kullandığınızda, çalışmaları için Player sürümünü Flash Player 8 (ve ActionScript 2.0) olarak ayarlamanız gerekir. Diğer bileşenler Flash Player 6 ya da 7 ye göre ayarlanabilir ve ActionScript 2.0 kullanılabilir. Hangi Flash Player veya ActionScript sürümüne ihtiyacınız olduğunu tam olarak bilemiyorsanız, Ctrl+Enter tuşlarına basarak ve Player da sonuçları inceleyerek SWF dosyasını test etmeyi deneyebilirsiniz. SWF dosyanızda bir öğeyi göremiyorsanız, ayarları değiş tirmenizin gerektiğini anlarsınız. Seçtiğiniz Player tarafından desteklenmeyen ActionScript kodları, Actions panelinde sarıyla vurgulanacaktır. Load order (Yükleme sırası) FLA dosyalarınızdaki katmanların çalışma zamanında Flash Player a yüklenme sırasını belirler. Bottom up ı seçerseniz (varsayılan ayar), katmanlar en alttan en üste doğru yüklenir. İnternet bağlantısı yavaş olan ziyaretçilerde bunun etkisi açıkça görülebilir; çünkü öğeler Stage in üzerinde sizin belirlediğiniz sırayla belirir. Bu, ActionScript kodlarınızı da etkileyebilir, çünkü bu ayarı kullandığınızda daha alt katmanlardaki eylemler (eğer varsa) daha üst katmanlarda yer alan eylemlerden daha önce yüklenecektir. Load order ayarı, SWF dosyanızın sadece ilk karesini etkiler. Bu sekmede pek çok ilâve seçenek bulunmaktadır. Generate Size Report u (Boy raporu hazırla) işaretlediğinizde Output paneli sonuçtaki SWF dosyasında bulunan veri miktarını gösterir: İçerik; kareler, semboller, metin karakterleri, eylemler ve bitmap ler olmak üzere çeşitli bölümler halinde gösterilir. Omit Trace Actions (İzleme eylemlerini ihmal et) seçeneğini işaretlerseniz, SWF dosyasını test ettiğinizde Output panelinde izlenen bir şey göremezsiniz. Bununla birlikte, SWF dosyanızın son versiyonunu yayınladığınızda ve izleme eylemleriyle birlikte Actionscript kullandığınızda bu ayarı kullanmanız şarttır. Bu seçeneği işaretlediğinizde Flash, ActionScript kodlarınızdaki izleme eylemlerini siler, bu da hem final dosyasının boyunu küçültür, hem de performansı biraz artırır. Son kullanıcıların tarayıcılarında bir Output penceresi yoktur, ama bu, Flash Player ın izleme eylemlerini çalıştırmayı denemesine engel olmaz. Bir FLA dosyasının ithal edilmesini Protect From Import seçeneğiyle engellerseniz, diğer insanlar (password alanına girdiğiniz şifreye sahip değillerse) SWF dosyanızı kendi FLA belgelerine aktaramazlar. SWF dosyaları bir dizi kare, bitmap ve grafik sembolü olarak ithal edilir. Bir SWF dosyası ithal edildiğinde hiçbir ActionScript kodu, katman ve bileşen korunmaz. Bir FLA dosyasını kaybederseniz, SWF dosyasını ithal ederek FLA dosyanızı geri getirmeniz mümkün değildir. Bu, resimleri almanıza yarar, ancak FLA dosyasının diğer öğelerini yeniden oluşturmanız gerekir. Zaten dosyalarınızı bu yüzden yedekliyorsunuz, öyle değil mi? FLASH BELGELERİNİ YAYINLAMAK 349

369 SWF dosyalarının ithal edilmesini engelleseniz bile, İnternet te bulunabilecek bazı araçlar bu seçeneği geri alabilir. Ayrıca, SWF dosyalarınızı açmaya ve kullandığınız ActionScript kodlarını görüntülemeye yarayan araçlar da mevcuttur. SWF dosyalarına asla önemli bilgilerinizi (ş ifre, vs.) yerleştirmeyin. Debugging Permitted (Hata ayıklamaya izin veriliyor) seçeneğini işaretlerseniz, SWF dosyasının hatalarını uzaktan ayıklayabilirsiniz. Dosyaya online olarak erişebilir ve istendiğinde şifresini girebilirsiniz. Bu, SWF dosyasının korunmasına da yardımcı olur. Biri bu SWF dosyasını indirdiğinde, Flash a ithal etmek için bu şifreyi kullanması gerekir. Ve son olarak Compress Movie (Filmi Sıkıştır) seçeneği de, SWF dosyasını sıkıştırarak dosya boyunu küçültmenizi sağlar. Bu seçenek sadece Flash Player ın 6 r65 ve daha yeni sürümleri için geçerlidir (r65, Flash Player 6 nın bir alt sürümünü belirtir). Yani, SWF dosyasını izleyebilmeleri için ziyaretçilerinizin bilgisayarında Flash Player ın en az bu sürümü kurulu olmalıdır. Flash Player 8 için dosya oluşturduğunuzdan, burada sorun yoktur. 6. JPEG quality ayarını 100 yapın ve Override sound settings onay kutusunu işaretleyin. Audio stream ve Audio event ayarlarının varsayılan seçeneklerini değiştirmeyin. JPEG quality (JPEG kalitesi) ayarı, FLA dosyanızdaki bitmap resimlerini (JPEG ler gibi), bu sürgüyle üy belirledi ğiniz kalite değerine göre sıkıştırır. Sürgüyle üy ayarladığınız yüksek bir değer daha iyi bir resim kalitesi elde etmenizi sağlar, çünkü JPEG resimleri çok fazla sıkıştırılmaz. Bu ayarı çok düşük bir değere ayarlarsanız, SWF dosyasının boyu daha küçü k olur, fakat resimlerin kalitesi bozulabilir. Resimlerin İnternet te görüntülenmesini istiyorsanız, resimlerinizi Macromedia Fireworks ya da Adobe ImageReady gibi bir araçla optimize edin ve bu sürgüyüy ü 100 değerine getirin. Buradaki diğer kontrollerle, resmin kalitesi üzerinde (resim dosyası boyunun tersine) daha fazla kontrol imkânına sahip olursunuz. Bu arada, daha önce sıkıştırılmış bir resmi tekrar sıkıştırmanın çok kötü bir fikir olduğunu aklınızdan çıkarmayın. Resimleriniz Web için optimize edildiğinden, başka bir sıkıştırma işlemi yapılmasını engellemek için Quality ayarını 100 yapıyorsunuz. Override sound settings (Ses ayarlarını dikkate alma) onay kutusunu işaretleyin. Bu durumda, geliştirme ortamında her ses için kütüphaneyi ve Properties iletişim kutusunu kullanarak yaptığınız bireysel ayarların yerine, SWF dosyasının geneli için yapılan bu ayarlar kullanılır. Bu da, yayınlandığında genel olarak SWF dosyasının boyunun küçü lmesine yardımcı olur. Set düğmelerini kullanarak sıkıştırma ayarını (Compression), örnekleme hızını (Sample Rate) ve sesin türünü (olay sesi veya akan ses) değiştirebilirsiniz. Varsayılan ayarlar TechBookstore sitesi için uygundur (MP3, 16Kbps lik BitRate ve Mono). Sesi Library panelindeki Sound Properties kısmında sıkıştırdıysan ıy ız, bunu yapmak için muhtemelen çok iyi bir sebebiniz olmalı. Bu durumda, bu ayarları dikkate alırsınız. 350 DERS 11

370 Bir dosyayı tek adımda yayınlamak isterseniz, tek yapmanız gereken şey, File menüsünden Publish i seçmektir. Bu iş lem, Publish Settings iletişi im kutusundaki geçerli ayarları kullanarak, FLA dosyası otomatik olarak yayınlar. Dosyalar, geçerli FLA dosyasının bulunduğu dizinde oluşturulur. Local playback security (Yerel oynatım güvenliği) ayarında varsayılan seçenek olan Access local files only yi (Sadece yerel dosyalara Eriş) değiştirmeyin. Bir SWF dosyasını yerel olarak oynattığınızda SWF dosyanız, yerel bilgisayarınızdaki ya da bağlı olduğunuz ağdaki farklı kaynaklarla etkileşime girebilir. Örneğin SWF dosyası çalıştığında dinamik olarak yüklenebilen bir JPEG ya da PNG resmini bilgisayarınızdaki veya ağınızdaki bir dizinde depolayabilirsiniz. Ancak farklı bir domain nden d ya da bir İnternet kaynağından (Amazon. com ya da Petco.com gibi) bilgi alamaz. Access network only (Sadece ağa eriş) seçeneğini kullanırsanız, LoadVars metin dosyalarınız gibi kaynaklara sadece bir ağdan erişilebilir (yerel olarak erişilemez). 7. Dosyayı yayınlamak için Publish düğmesine tıklayın. Ardından Import/Export Profile düğmesine tıklayın ve yeni oluşturduğunuz yayınlama profilini ihraç etmek için karşınıza gelen menüden Export komutunu seçin. Siz Publish düğmesine tıkladıktan sonra, TechBookstore klasöründe techbookstore.swf isminde bir dosya oluşturulur. Bu aşamada, diğer FLA dosyalarında kullanabilmek için yayınlama profilini ihraç etmeniz gerekir. Profil, sabit diskinize bir XML belgesi olarak kaydedilir. Bu XML dosyası ayarlarınızı içerir; bu profile ihtiyaç duyulan başka bir FLA dosyası yarattığınızda, bu ayarlar Publish Settings iletişim kutusuna ithal edilebilir. Import/Export Profile düğmesine tıkladığınızda açılan menüden Export u seçin. Export Profile (Profili İhraç Et) iletişim kutusu açılacaktır. Bu iletişim kutusuna bir isim girerek profili başka bir isimle kaydedebilir ya da adını Tech Bookstore olarak bırakabilirsiniz. Yayınlama profilini ihraç etmek için Save (Kaydet) düğmesine tıklayın. Artık profili, oluşturduğunuz diğer FLA dosyalarına aktarabilirsiniz. FLASH BELGELERİNİ YAYINLAMAK 351

371 8. OK düğmesine tıklayarak Publish Settings iletişim kutusunu kapatın. File menüsünden Save komutunu seçerek Tech Bookstore dosyasında yaptığınız değişiklikleri kaydedin. Kitap mağazasına ait SWF dosyasını yayınladıktan ve yayınlama profilini ihraç ettikten sonra, kitap mağazasıyla işimiz bitti. Flash Player ı Tespit Etmek Bir ziyaretçi sitenize girdiğinde, ziyaretçinin sisteminde Flash Player ın kurulu olup olmadığını ya da bunun, hangi sürüm olduğunu bilmeyebilirsiniz (ziyaretçilerin bilgisayarında Flash Player ın herhangi bir sürümü büyük ihtimalle yüklüdür). Ziyaretçilerin Tech Bookstore sitesine yüklenen SWF dosyalarının (örneğin tur) içeriğini ve kitap mağazasını görebilmeleri için, bilgisayarlarında Flash Player ın doğru sürümünün (Flash Player 8) kurulu olması gerekmektedir. Flash Player ın başarıyla tespit edilmesi için gereken işlemler oldukça karmaşıktır, çünkü bir HTML sayfasına yazılan belirli bir JavaScript kodunu kullanmayı gerektirir. Ama dosyayı yayınladığınız anda bir Player tespit sistemi oluşturarak bu zor işin dosya yayınlanırken yapılmasını sağlayabilirsiniz. Bunun için aşağıdaki adımları izleyin. 1. loader.fla belgesini açın ve File menüsünden Publish Settings i seçerek Publish Settings iletişim kutusunu açın. Önceki uygulamada oluşturduğunuz yayınlama profilini ithal edin. Önceki uygulamada oluşturduğunuz TechBookstore isimli yayınlama profilini ithal edin. Import/ Export Profile düğmesine tıklayın ve açılır menüden Import u seçin. Import Profile iletişim kutusu açılacaktır. Bu iletişim kutusunu kullanarak aktaracağınız profili seçebilirsiniz. TechBookstore.xml profiline, sonra da Open düğmesine tıklayın. Tech Bookstore profili Current Profile (Geçerli Profil) menüsünde görünecektir. Tech Bookstore profilini seçin. Bu profilde, SWF dosyasında kullandığınız ayarlar yer alır. Aşağıdaki adımlarda bu ayarların bazılarını değiştireceksiniz. 2. Formats sekmesinde Flash ve HTML onay kutularının işaretli olduğundan emin olun. Bu seçeneğin etkin durumda olması, onay kutusunu işaretlediğinizde HTML sayfasının oluşturulacağı anlamına gelir. HTML sayfalarını ve SWF belgesini yayınlamanız gerekiyor. HTML alanındaki HTML dosyasının adını bookstore.html olarak değiştirin. Bu dosyada dersin ilerleyen sayfalarında bazı değişiklikler yapacağız. Flash sekmesinde herhangi bir ayarı değiştirmeniz gerekmiyor, daha önce oluşturduğunuz yayınlama profilindeki varsayılan ayarları aynen bırakabilirsiniz. 3. HTML sekmesini seçin. Detect Flash Version (Flash Sürümünü Tespit Et) onay kutusunu işaretleyin ve Playback (Oynatım) bölümündeki Loop (Döngü) ve Display menu (Menüyü göster) seçeneklerinin işaretini kaldırın. İşiniz bittikten sonra OK düğmesine tıklayın. 352 DERS 11

372 HTML sekmesinde bazı değişiklikler yapmanız gerekiyor. Bir Flash Player algılama sistemi oluşturmak için Detect Flash Version (Flash Sürümünü Tespit Et) onay kutusunu işaretleyin. Siz bu seçeneği işaretlediğinizde Flash, sizin Flash sekmesinde belirttiğiniz Flash Player sürümünü (burada Flash Player 8) tespit eden JavaScript kodunu ekleyecektir. Bilgisayarında Flash Player kurulu olmayan kullanıcılar otomatik olarak adresine yönlendirilecektir. Kullanıcılar bu adresten Web sayfanızdaki Flash içeriğini görebilmeleri için gereken Flash Player sürümünü indirebilir ve makinelerine kurabilirler. Düzenlemeleri yaptıktan sonra OK düğmesine tıklayarak Publish Settings iletişim kutusuna geri dönün. HTML sekmesindeki Loop seçeneğinin işaretini kaldırdığınızdan emin olun ve işiniz bittikten sonra Publish düğmesine tıklayın. Flash Player tespit sistemini, ancak dosyayı Flash Player 4 ya da daha sonraki bir sürüm için yayınladığınızda kullanabilirsiniz. HTML sekmesinde yer alan diğer seçeneklerin değiştirilmesi gerekmiyor, ama isterseniz bu seçeneklerin ne işe yaradıklarına kısaca göz atalım. Template (Şablon): bu ayar, filmin HTML kısmını yayınlamak için kullanılacak şablonun türünü belirtir. Kullanılabilir durumdaki her bir şablon türü hakkında daha fazla bilgi edinmek istiyorsanız, bu ayarın yanındaki Info düğmesine tıklayın. Dimensions (Boyutlar): Belgeye gömülecek Flash SWF dosyasının boyutlarını ayarlayabilirsiniz. Varsayılan Match Movie (Filme Uydur) boyutları, Stage in geçerli boyutlarıdır. Ama buraya istediğiniz boyutları piksel ya da yüzde cinsinden girebilirsiniz. FLASH BELGELERİNİ YAYINLAMAK 353

373 Playback (Oynatım): Bu seçenekler, SWF dosyasının çalışma zamanında nasıl oynatılacağını belirler. Loop (Döngü), SWF dosyasının Timeline daki son kareye ulaştıktan sonra 1 numaralı kareye dönmesini ve tekrar oynatılmasını sağlar. Paused at start (Başlangıçta duraklat) seçeneğini kullanarak, SWF dosyası oynatılmaya başladığında duraklatılmasını sağlayabilir ve oynatımı elle kontrol edebilir ya da bağlam menüsünü kullanabilirsiniz. Display menü seçeneğini işaretleyerek veya işaretini kaldırarak, bir bağlam menüsünün görüntülenmesini ya da görüntülenmemesini sağlayabilirsiniz. Ayrıca SWF dosyasında aygıt fontlarının kullanılmasını ya da kullanılmamasını da sağlayabilirsiniz (bunları Ders 3 te metinlerin kullanımında anlatmıştık). Statik metinle aygıt fontlarını kullanmak için, Device font (Aygıt fontu) seçeneğini işaretleyin. Statik metnin, aygıt fontlarını kullanacak şekilde özel olarak ayarlanmasını gerektiğine dikkat edin. Quality (Kalite): Bu menüyü kullanarak SWF dosyasının kalitesini Low ile Best arasında çeşitli değerlere ayarlayabilirsiniz. Low (düşük) ayarı anti-aliasing kullanmaz ve en hızlı oynatımı sağlar. Auto-Low (otomatik düşük) ise, mümkünse kaliteyi yükseltmeye çalışır, ama aynı zamanda SWF dosyasını hızlı oynatmaya da çalışır. High (yüksek) varsayılan seçenektir. Burada bu seçeneği kullanacağız, ayrıca her zaman anti-aliasing uygulayacağız, ama eğer bir animasyon kullanılıyorsa bitmap ler yumuşatılmaz (yumuşatma daha iyi bir görünüm sağlar, ama SWF dosyasının oynatımını yavaşlatır). Window Mode (Pencere Modu): Bu seçeneği kullanarak, HTML dosyasındaki wmode niteliğini kontrol edebilirsiniz. Transparent Windowless (şeffaf penceresiz) seçeneği, Flash belgesinin arka planını şeffaf olarak ayarlar ve etrafındaki tarayıcı penceresini kaldırır (başlık çubuğu dâhil olmak üzere). Örneğin, reklâmlarınızdan birinin bir HTML sayfasının üzerinde kayıyormuş gibi görünmesini sağlamak için bu modu kullanabilirsiniz. Opaque Windowless (opak penceresiz) seçeneği Flash belgesinin arka planını kaldırmaz, ama etrafındaki tarayıcı penceresini kaldırır. SWF dosyasının herhangi bir yerine, bu dosyanın kapatılmasını sağlayan bir düğmeyi yerleştirmeyi unutmamalısınız. Window (Pencere) varsayılan moddur ve Flash belgesinin normal bir tarayıcı penceresinde görüntülenmesini sağlar. Penceresiz modları desteklemeyen tarayıcılar da vardır. Bütün önemli tarayıcılar gibi, Netscape tarayıcısının en son sürümleri (NS 7+), ayrıca Internet Explorer 5 (Windows) ve Internet Explorer 5.1 (Mac) ve sonraki sürümler artık penceresiz modu desteklemektedir. HTML Alignment (HTML Hizalaması): Bu seçenek, HTML sayfasındaki SWF dosyasını tarayıcı penceresinin çeşitli kenarlarına hizalayarak yerleştirmenize yardımcı olur. Scale (Ölçek): Dimensions ayarında SWF dosyasının boyutlarını değiştirdiyseniz, bu seçenek SWF dosyasının boyutlarını ayarlar. Default seçeneği orijinal SWF dosyasının en/boy oranını korur, Exact Fit seçeneği ise belgeyi en/boy oranını korumadan, ama ayarladığınız boyutları dolduracak şekilde görüntüler. No Border seçeneği SWF dosyasını en/boy oranını koruyarak ölçekler, ama gerekiyorsa Stage i kırpar. No Scale seçeneği ise, kullanıcı tarayıcı penceresinin boyutlarını değiştirdiğinde SWF dosyasının ölçeklenmesini önler. 354 DERS 11

374 Flash Alignment (Flash Hizalaması): Bu seçenek, SWF dosyasını tarayıcı penceresinde hizalar ve gerekiyorsa kırpma işlemini gerçekleştirir. Bu da SWF dosyanızı, özellikler farklı boyutlar seçtiğiniz ve Stage in kırpıldığı durumlarda etkiler. 4. FLA dosyasında yaptığınız değişiklikleri kaydedin. Bütün işlemleri tamamladıktan sonra FLA dosyasını (hatta Flash ı da) kapatabilirsiniz. Dosyayı yayınlama işlemini tamamladınız. Şimdi tek yapmanız gereken, oluşturulan HTML dosyalarını düzenlemek ve bütün bu dosyaları online olarak sunmaktır (dosyaları tek bir yerde de yayınlayabilir, böylece Web sitenizi yerel olarak test edebilirsiniz). Bir SWF Dosyasını Bir HTML Sayfasına Gömmek SWF dosyalarını online olarak sunarken, onları genellikle bir HTML sayfasına gömersiniz. Bunu yapmak için HTML dilini öğrenmenize gerek yoktur, çünkü Flash kodu sizin yerinize oluşturur. Bununla birlikte, bu uygulamada bir resmin döşendiği bir arka plan ekleyebilmek ve SWF dosyasını sayfada ortalayabilmek için, Flash ı n oluşturduğu HTML belgesini biraz değiştireceksiniz. Flash bir HTML dosyası oluşturduğunda SWF dosyası zaten gömülü durumdadır. Bu uygulamada bir HTML sayfası oluşturacak ve Tech Bookstore SWF dosyasını bunun içine gömeceksiniz. SWF dosyaları HTML sayfalarına <object> ve <embed> etiketleri kullanılarak gömülür. 1. bookstore.html dosyasını bir HTML editöründe veya istediğiniz bir metin editöründe açın. Bu uygulamada Macromedia Dreamweaver 8 gibi gelişmiş özelliklere sahip bir editörü de, Not Defteri (Notepad) gibi basit bir metin editörünü de kullanabilirsiniz. Mevcut dosyada çok küçük değişiklikler yapacağınız için, gelişmiş araçlar kullanmanız gerekmez. 2. title etiketlerinin arasında yer alan metni değiştirerek siteye bir isim verin. Bu isim Web tarayıcısının başlık çubuğunda görünecektir. Başlık çubuğunda sitenin isminin nasıl görünmesini istediğinize bağlı olarak, bu başlığı istediğiniz şekilde değiştirebilirsiniz. Biz burada Tech Bookstore ismini tercih ettiğimiz için, bu satırı aşağıdaki gibi yazıyoruz. <title>tech Bookstore</title> 3. body etiketinden = #ffffff yi silin. Bu niteliği background= tile.gif olarak değiştirin. title ve head etiketlerinin altında body etiketi yer alır. bgcolor niteliği, HTML sayfasının arka plan rengini ayarlar. Bununla birlikte, arka plan rengini uygulamak yerine bir arka plan resmi kullanmak isteyebilirsiniz. CD-ROM daki lesson11/assets klasöründe tile.gif adında bir dosya bulunuyor. Bu dosyayı TechBookstore klasörüne kopyalayın, sonra da <body> etiketini aşağıdaki gibi değiştirin. FLASH BELGELERİNİ YAYINLAMAK 355

375 <body background= tile.gif > Bir arka plan resmi eklemek, resmin, Web sitesinin arka planının tamamını kaplayacak şekilde döşeneceği anlamına gelir. Bu arka plan, SWF dosyasının arkasında a görünür. Buradaki küçük boyutlu ve iddiasız GIF dosyası, arka planda belli belirsiz bir desen oluşturacaktır. Arka planların HTML nitelikleri değil de CSS kullanılarak ayarlanması en iyi yaklaşım şeklidir. Bu uygulamada HTML niteliğini değiş tirmek kabul edilebilir, ama şu zamanda bile CSS kullanmıyorsanız, biraz demode kalmışsınız demektir. CSS yi öğrenin, sevin ve hayatınıza katın. 4. Tech Bookstore u içerecek bir DIV etiketi ekleyin ve sayfada yatay olarak ortalayın. <body> etiketinin altında bazen, açıklama olarak eklenmiş pek çok satır görürsünüz. HTML belgesi böyle satırlar içeriyorsa, bu satırlar kodun ne yaptığını açıklamak ve kodu geliştirecek diğer insanlara talimat sağlamak amacıyla eklenmiş olmaları açısından, bir Flash dosyasındaki açıklama haline getirilen kodlara benzer. 356 DERS 11

376 Oluşturulan HTML dosyalarına açıklama olarak eklenen bu metinler, SWF dosyasında bulunan ve arama motorları için içeriğin daha iyi bir şekilde indekslenmesine yardımcı olan metinler içerir. <body background= tile.gif > etiketinin altına aşağıdaki satırı ekleyin: <div align= center> Bu satırlardan sonra, SWF dosyasını gömerek bütün tarayıcıların onu görmesini sağlayan kodlarla birlikte <object> ve <embed> etiketleri gelir. Bu kodların sonuna ve </body> etiketinin hemen üstüne, DIV etiketini kapatan ve Flash dosyasını içerecek olan şu kodu ekleyin: </div> Body Etiketini Aç DIV Etiketini Aç DIV Etiketini Kapat Body Etiketini Kapat FLASH BELGELERİNİ YAYINLAMAK 357

377 Siz bütün bu işlemleri tamamladıktan sonra, bookstore_content.html sayfasına ait HTML dosyası tamamı aşağıdaki gibi görünecektir. HTML dosyasını düzenledikten sonra, loader.fla dosyasına ait Publish Settings iletişi im kutusuna geri dönüp Formats sekmesindeki HTML seçeneğinin iş aretini kaldırmayı unutmayın. Böylece, FLA dosyasını tekrar yayınladığınız takdirde, HTML belgelerinde yapmış olduğunuz ayarların değiş mesini önlemiş olursunuz. 5. HTML dosyasında yaptığınız değişiklikleri kaydedin, sonra da HTML sayfasını açarak varsayılan tarayıcıda görüntüleyin. HTML dosyasını kaydettikten sonra kapatabilirsiniz. TechBookstore klasöründe dosyayı bulun ve yayınlanan bookstore.html dosyasına çift tıklayarak kitap mağazasını varsayılan Web tarayıcında açın. Bilgisayarınızdaki varsayılan ayar nedeniyle bir metin editörü açılıyorsa, bunu bir tarayıcı penceresinde açılacak şekilde ayarlayın. Dosyanın farklı yerlerine tıklayarak bunun farklı alanlarını inceleyin. Aşağıdaki uygulamada bütün dosyaları bir sunucuya yükleyecek ya da size gereken dosyaları tek klasöre yerleştireceksiniz. 358 DERS 11

378 Tech Bookstore Sitesini Web Sunucusuna Yüklemek Dosyaları yüklemek için Web erişimi imkânına sahipseniz, bir sonraki adım, Tech Bookstore sitesini online olarak görüntülenecek şekilde yüklemektir. Web sitesi için, kitap boyunca oluşturduğunuz bütün dosyalara ihtiyacınız olmadığından, site için kullanılacak dosyaları tek bir klasörde toplamanız ve sonra bu dosyaları sunucuya yüklemeniz gerekir. Web alanınız yoksa dosyaların yüklendiği adımda durmanız ve siteyi sabit diskinizde yerel olarak test etmeniz gerekir. Eğer sitenizin online olarak görüntülenmesini istiyorsanız, aşağıdaki adımları sonuna kadar takip edin. 1. Sabit diskinizdeki TechBookstore klasörünü açın. Sonra da Tech Bookstore sitesinde kullanacağınız dosyaları taşımak (veya kopyalamak) için sabit diskinizde yeni bir klasör oluşturun. Dosyalarınızın çoğunu TechBookstore klasörüne kaydettiğiniz için, bu klasörde (yüklenmesi gerekmeyenlerle birlikte) pek çok dosya mevcuttur. Bu dosyaların hepsini yüklemeniz gerekmez, çünkü Web sitesi için FLA dosyalarına veya ithal edilmiş resimlere online olarak ihtiyacınız yok. Bu dosyalardan sadece bazılarını yüklemeniz gerekmektedir: HTML dosyaları, SWF dosyaları ve siteye dinamik olarak yükleyeceğiniz veya linkleyeceğiniz dosyalar. Yeni oluşturduğunuz klasörü istediğiniz gibi adlandırabilirsiniz (mesela bookstore). 2. Aşağıdaki dosyaları yeni oluşturduğunuz klasöre taşıyın. Site için ihtiyacınız olan bütün dosyaları tek bir konumda toplamanız gerekir. Bunların içinde SWF dosyaları ve SWF dosyalarına yüklenen ortam dosyalarıyla birlikte, bu derste yayınladığınız HTML belgeleri yer alır. Kolaylık sağlaması için, ihtiyacınız olan dosyalar aşağıda listelenmiştir. bookstore.html loader.swf tile.gif TechBookstore.swf home.swf catalog.swf reviews.swf tour.swf news.swf map.swf video1.swf video2.swf video3.swf mmpresslogo.jpg home01.jpg home02.jpg styles.css home.txt news.txt sectiontext.txt Diğer dosyaların yanında, catalog ve reviews klasörlerini de bu klasörün içine taşımanız gerekir. FLASH BELGELERİNİ YAYINLAMAK 359

379 Dosyalarınızı yükleyeceğiniz bir Web sunucunuz yoksa yeni oluşturduğunuz bu klasörü açın ve bookstore.html dosyasına çift tıklayın. Bu iş lem, tamamlanmış Tech Bookstore sitesini bir Web sayfasında açacaktır. İşte bu kadar. Tebrikler! 3. Tech Bookstore için gereken bütün dosyaları tek konumda topladıktan sonra, bu malzemeleri içinde barındırmak istediğiniz Web sunucusunu açın ve belgeleri İnternet e yükleyin. Bir Web sunucusuna bağlanmak için muhtemelen FTP den ya da başka bir dosya transfer yönteminden faydalanacaksınız (barındırma işlemini kendi bilgisayarınızda yapıyor olabilirsiniz.) Sonuç itibarıyla, İnternet ten erişilebilir hale getirmek için dosyalarınızı bir sunucuya aktarmanız gerekmektedir. Önceki adımda oluşturduğunuz klasörde yer alan bütün dosyaları aktarın. Klasörün kendisini de aktarmanız gerekmez. Ancak büyük ihtimalle, sunucuda bu dosyaların tümünü bir arada tutacak bir klasör yaratmak isteyeceksiniz. Sunucudaki mevcut dosyalardan herhangi birinin üzerine kaydetmediğinizden emin olun. Bütün dosyaların içinde yer alacağı ayrı bir klasör yaratmak, sitenizdeki mevcut dosyaların (bir index dosyası gibi) üzerine yazmadığınızdan emin olmak için kullanabileceğiniz basit bir yöntemdir. 4. Tech Bookstore sitesini bir Web tarayıcısında açın. Kitap mağazasının index sayfasına ait konumu istediğiniz bir tarayıcının adres kısmına girin. Flash Player ı yüklediğiniz için, bookstore.html sayfası SWF dosya içeriğiyle birlikte yüklenecektir. Ziyaretçilerinizin makinesinde doğru Flash Player sürümü kurulu değilse (muhtemelen Flash Player 9 den daha eski bir sürüm) veya herhangi bir Flash Player sürümü mevcut değilse, bu ziyaretçiler kendilerine bu durumu ve Player ı indirebilecekleri yeri bildiren go/getflash sayfasına yönlendirilecektir. Bir dosyayı yayınlamayı unutmak veya sabit diskte yanlış bir dizine kaydetmek gibi hatalara kolayca düşülebilir. Listedeki SWF dosyalarından herhangi birini bulamıyorsanız, FLA dosyasını tekrar açın ve bu FLA dosyasını yayınlayarak bir SWF dosyasının TechBookstore klasörüne kaydedilmesini sağlayın. Sonra bu yeni dosyayı sunucuya, doğru dizine yükleyin. catalog ve review klasörlerini de yüklediğinizden emin olun. Son olarak, dosyalarınızı gönderdikten sonra harici verilerinize ait tüm referansların hâlâ geçerli olduğundan emin olmak isteyeceksiniz. Yayınlanan tamamlanmış Tech Bookstore sitesini CD-ROM daki lesson11/complete/techbookstore klasöründe bulabilirsiniz. Bu klasör, Web sitesi için kullanılan tamamlanmış SWF dosyalarını ve HTML dosyalarını içermektedir. 360 DERS 11

380 Sonuç Web sitesini başarıyla tamamladınız (böyle olduğunu ümit ediyoruz). Yorucu bir çalışmadan sonra biraz ara vermek ve dinlenmek çok önemlidir. Yani bu kitaptaki son adımınız işte bu: Gidin ve güzelce dinlenin. Kendinize bir dondurma alın, çikolataya fıstık sosuna bulayın. Bunu hak ettiniz. Umarız Flash la çalışmanın tadına varmış ve yazılımı kullanmaya başlamanın ne kadar kolay olduğunu anlamışsınızdır. Tabii ki Flash eğitimi burada bitmiyor. Umarız, bu kitapla sağlam bir Flash temeli edinmenizde, ayrıca denemeler yapmak ve bilgilerinizi geliştirmek için kendinize güvenmenizi sağlama ve serbestçe düşünebilme konularında size yardımcı olabilmişizdir. Bütün bir Web sitesi oluşturduğunuza göre, bir yandan yeni ipuçları ve kolaylıkları öğrenmeye devam ederken, diğer yandan da Flash kullanarak kendi projelerinizi hazırlamaya girişebilirsiniz. Kitapla ilgili olarak hazırlanan forumlara ( katılmayı ihmal etmeyin. Verdiğimiz bu adreste kitapla ilgili yardım konularına ve eklentilerle ilgili bilgilere ayrılmış özel bir forum bulunmaktadır. Maalesef mükemmel bir kitap yazmak ya da eksiksiz bir yazılım üretmek genellikle pek mümkün değildir. Zaman zaman yazılımla ya da Flash Player la ilgili güncellemeler olacaktır. Bu durumda, Tech Bookstore uygulamasında da bazı değişiklikler yapmak gerekebileceğini aklınızdan çıkarmayın. Böyle bir durumun (ya da başka bir şeyin) gerçekleşmesi durumunda, gönderdiğiniz sorular forumda cevaplanabilir. Kitap boyunca pek çok kez belirttiğim kitabın destek sitesinde ( yer alan Errata (Düzeltmeler), Forum ve FAQ (Sık Sorulan Sorular) sayfalarında sorularınıza daha çabuk cevap alabilirsiniz. Muhtemelen ActionScript ile ilgili aklınızda birtakım sorular kalmıştır. Çünkü bir eğitim formatı, ActionScript diliyle ilgili olarak sormak isteyeceğiniz her soruyu cevaplamak için yeterli değildir. Yardım almak için, önemli ölçüde Flash kullanıcılarının oluşturduğu gruplardan faydalanabilirsiniz. Macromedia Flash 8 kullanmanın en güzel yanlarından biri de budur. Kitabımızı okuduğunuz için teşekkür ederiz. Bundan sonraki projelerinizde hepinize iyi şanslar. Görüşmek üzere! FLASH BELGELERİNİ YAYINLAMAK 361

381 Bu Derste Öğrendiklerimiz Bu derste şunları öğrendiniz: Arama motorunda görünmesi için bir dosyaya metaveri ekledik (Sayfa ). Yeni bir yayınlama profili oluşturduk (Sayfa 347). Yayınlama ayarlarını değiştirdik (Sayfa ). Flash Player sürümünü tespit ettik (Sayfa ). Bir SWF dosyasını Bir HTML sayfasının içine gömdük (Sayfa ). Tech Bookstore sitesini online hale getirdik (Sayfa ). 362 DERS 11

382 A Eklentileri Yüklemek Flash programına bileşenler, efektler, araçlar, ekran tipleri, davranışlar ve komutlar içeren çeşitli eklentiler yükleyebilirsiniz. Bu eklentileri Macromedia nın Extension Manager aracını kullanarak ya da sabit diskinizdeki Flash dizinine elle yerleştirerek yükleyebilirsiniz. Daha önce yüklemiş olduğunuz mevcut eklentileri Extension Manager ı kullanarak tek bir arabiriminden yönetebilirsiniz. Extension Manager ın en yeni sürümünü şu adresten indirin: Flash 8 Basic e eklenti yüklemek için Macromedia Extension Manager 1.7 (ya da daha yeni bir sürüm) kullanmanız gerekir. Extension Manager la Dreamweaver 8 ve Fireworks 8 yazılımlarına da kendi eklentilerini yükleyebilirsiniz. Extension Manager ı indirdikten ve çalışır durumdaki bütün Macromedia yazılımlarını kapattıktan sonra kurulum programını çalıştırabilirsiniz. Yüklendikten sonra Extension Manager diğer bağımsız programlar gibi açılacaktır. Extension Manager ı Windows ta Başlat (Start) menüsünü, Mac te de Applications klasörünü kullanarak açabilirsiniz. Extension Manager a Help > Manage Extensions komutu kullanılarak doğrudan Flash ın içinden de erişilebilir. Eklentileri ve Bileşenleri Yüklemek Bileşenler, Extension Manager kullanılarak yüklenen MXP dosyalarıyla dağıtılır. Bir MXP dosyasına çift tıkladığınızda eklentiyi yüklemek üzere Extension Manager açılır, yani eklentiye Flash içinden erişmek mümkündür. Eklentiyi yükledikten sonra buna doğrudan Flash ın içinden erişebilirsiniz. Diğer eklentiler EXE, SWC hatta FLA dosyaları olarak dağıtılabilir. SWC ve FLA dosyalarının düzgün bir şekilde çalışabilmesi için doğru dizine yerleştirilmeleri gerekir.

383 EXE dosyalarıyla yüklenen eklentilerle de karşı laşabilirsiniz. Bu eklentilerde normal bir yükleme iş lemi söz konusudur. Kimi zaman sizden bir seri numarası girmeniz de istenebilir. Bir eklentinin Flash taki konumu, o eklentinin ne için kullanıldığına bağlıdır. Timeline efekt eklentilerine Insert > Timeline Effects komutunu seçerek eriş ebilirsiniz. Bir eklentiyi bilgisayarınıza yüklemek için Extension Manager ı açın ve File > Install Extension (Eklenti Kur) komutunu seçerek Extension to Install iletişim kutusunu açın. Bunun için Install New Extension düğmesine de tıklayabilirsiniz. Select Extension to Install (Kurulacak Eklentiyi Seç) iletişim kutusu açılacaktır. Bu iletişim kutusunu kullanarak sabit diskinizde bulunan MXP dosyalarından yüklemek istediğiniz birini seçebilir ve sonra gerekli açıklama notunu okuyarak kabul edersiniz. 364 EK A

384 Bileşen yüklendikten sonra aşağıdaki şekilde gördüğünüz gibi yükleme işleminin başarıyla sonuçlandığını bildiren bir mesaj göreceksiniz. Eklentileri sisteminize yükledikten sonra Extension Manager ı kullanarak bunları sıralayabilir, silebilir ya da aralarında geçiş yapabilirsiniz. Listeden bir eklenti seçtiğinizde bu eklentiyle ilgili kısa bir açıklamayla birlikte yazarının eklentiyle ilgili girdiği ilave bilgileri ve eklentiye erişme ve kullanmayla ilgili notları görürsünüz. Çok kullanıcılı bir ortamda (Windows NT, 2000, XP ya da Mac OS X) bir eklenti yüklediğinizde Extension Manager bileşenleri sadece o oturumu açan kullanıcı için yükler. EKLENTİLERİ YÜKLEMEK 365