Uygulayarak Öğrenin:Macromedia Flash 8 Kaynağından Eğitim kitabı, zengin bir Flash arabirimi hazırlamak için bilmeniz gereken önemli bütün kavramları tanıtmaktadır. Uygulamalı dersler; kendi grafiklerinizi oluşturmayı, ortam öğelerini aktarmayı, metin kullanımını, animasyon oluşturmayı ve etkileşim eklemeyi öğrenirken size kılavuzluk edecektir. Bu kitapla, daha çekici bir uygulama yaratmak için video ve ses özelliklerini nasıl kullanacağınızı, ayrıca tümüyle işlevsel bir Flash uygulaması oluşturmak üzere ActionScript’i Script Assist’le kullanmayı öğreneceksiniz. Kitabın son bölümünde de çalışmalarınızı çeşitli formatlarda nasıl yayınlayacağınızı öğreneceksiniz.

Macromedia Flash 8 Kaynağından Eğitim kitabı, Flash 8 Basic’le birlikte tanıtılan yeni özellikleri ve Flash’ın eski sürümlerinin önemli özelliklerini öğrenirken iyi bir yol arkadaşı olacaktır. Flash kullanmaya yeni başlıyorsanız, bu kitap Flash dünyasındaki yolculuğunuz için mükemmel bir başlangıç noktası olacaktır.

CD’de Neler Var?Kitapla birlikte verilen CD-ROM, projeleri kendi başınıza oluşturmak için gereken her şeyi, ayrıca kendi sonuçlarınızı karşılaştırmak için kullanabileceğiniz ve gelecekteki projelerinizde örnek olarak faydalanabileceğiniz tamamlanmış ders dosyalarını içermektedir. CD-ROM’da ayrıca, Macromedia Flash 8’in deneme sürümünü de bulabilirsiniz.

Minimum Sistem Gereksinimleri

Windows®• 800 MHz Intel Pentium III ya da eşdeğer bir işlemci• Windows 2000 ya da Windows XP

Macintosh®• 600 MHz PowerPC G3 ya da daha iyi bir işlemci• Mac OS X 10.3 ya da 10.4

W/M CD-ROM

James English

macromedia®

Kaynağından Eğitim

FLASH®

8

Pratik Uygulamalarla 16-20 Saat İçinde Kendi Kendinize Öğrenin

Animasyonlar ve grafikler içeren bir arabirim hazırlayın.

Animasyonlar oluşturun.

Script Assist’i ve davranışları kullanarak etkileşim ekleyin.

Ses ve video kullanarak kullanıcılarınızın daha da memnun kalmasını sağlayın.

Metinler ve bileşenlerle Web formları oluşturun

Kayn

ağ

ınd

an

Eğ

itim

macro

media

®

FL

AS

H® 8

Macromedia Flash 8 Kaynağından Eğitim kitabıyla şunları öğreneceksiniz:• Macromedia Flash 8 geliştirme ortamını kullanarak

bir uygulama oluşturacaksınız.• Resimler, grafikler, semboller ve metinler kullanarak

bir kullanıcı arabirimi oluşturacaksınız.• Motion tween ve shape tween animasyonları

yaratacaksınız.• Seslerle ve videolarla çalışarak uygulamanızı daha

çekici bir hale getireceksiniz.• Uygulamanızı harici veri kaynaklarına bağlayacaksınız.• Kullanıcı bilgilerini toplayarak bunları bir sunucuya

göndereceksiniz.• Script Assist’i ve yerleşik davranışları kullanarak Flash

ActionScript’le etkileşim özellikleri oluşturacaksınız.• Uygulamanızı Web üzerinden yayınlayacaksınız.

Medyasoft Bilgi Sistemleri San. ve Tic. Ltd.

Gürsel Mah. Dünür Sk. No: 3 Bilişim Center 34384 Okmeydanı • İSTANBULTel : 0.212.220 54 52 • Faks: 0.212.210 52 78Web : http://www.medyasoft.com.trE-posta : kitap@medyasoft.com.tr

ISBN: 975-6675-32-2

kapak_flash8.indd 1 10.04.2006 18:59:52

macromedia®

FLASH® 8Kaynağından Eğitim

James English

macromedia®

FLASH® 8Kaynağından Eğitim

Macromedia Flash 8Kaynağından Eğitim

James English

Çeviren: Cüneyt Belge - Günay İnkayaEditör: Suat Koyuncu

ISBN: 975-6675-32-2

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:http://www.medyasoft.com.tr | http://www.peachpit.com | http://www.macromedia.com

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 – İSTANBULTel: 0 (212) 220 54 52

Faks: 0 (212) 210 52 78E-posta: kitap@medyasoft.com.tr

Web: http://www.medyasoft.com.tr

“Authorized translation from the English language edition, entitled Macromedia Flash 8 Training from the Source(1st edition, 0-321-33629-1 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 8Training 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 MarkalarFlash, 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 2006Basım ve Cilt : ELMA Bilgisayar Basım / İSTANBUL

Türkiye’de basılmış ve ciltlenmiştir.

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

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.

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 Editör: Teknik Editör: Teknik 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

İçindekiler TablosuGiriş . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .ix

DERS 1 Temeller. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Flash 8’e GirişFlash 8 Çalışma Alanıİlk Flash 8 DokümanınızPanellerTimeline (Zaman Çizgisi) ve KarelerKatmanlarTercihlerinizi BelirleyinBir FLA Dosyasının Test EdilmesiYardım AlmakProjemizi İnceleyelim

DERS 2 Grafikler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Tools (Araçlar) PaneliDolgular ve Kenar Çizgilerini TanıyalımVektörel Grafikler ve Bitmap ResimlerRenklerin KullanımıÇizim Araçlarını Kullanarak Grafik OluşturalımKoordinatlar, Kılavuzlar, Izgara ve Kenetlenme ÖzelliğiYeni Bir Grafik Sembolü OluşturmaMaskelerKenar Çizgileri EklemekKütüphanenin KullanımıBitmap Resimlerin Alınması ve Optimize EdilmesiVektörel Şekillerin AlınmasıBitmap ve Degrade DolgularGrafikler Üzerinde Yapabileceğiniz Diğer İşlemler

DERS 3 Metinler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Text Aracının KullanılmasıStatik Metinler ve Aygıt FontlarıDokümanlara Statik Metin EklemekGömülü Fontların KullanımıFont ÖzellikleriMetin Alanına Timeline Efektleri EklemekYazım Denetimi YapmakMetin Tabanlı Bileşenlerin KullanımıDinamik Metin Alanları

DERS 4 Sembol Oluşturmak ve Düzenlemek . . . . . . . . . . . . . . . . . . . 91

SembollerStage Üzerinde Semboller Oluşturmak ve DüzenlemekKütüphanedeki Sembolleri GörmekSembollerin İç İçe KullanılmasıGrafik SembolleriDüğme OluşturmakDüğmeleri Stage’e YerleştirmekMetin Düğmeleri OluşturmakGörünmez Bir Düğme OluşturmakKlip Oluşturmak ve KullanmakMenüyü TasarlıyoruzKlip Düğmeleri OluşturmakSembolleri Çoğaltmak ve Stage’e Eklemek

DERS 5 Animasyon Hazırlama . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125

Animasyonlara GirişMotion Tween için HazırlıkMotion Tween’lerin EklenmesiAlfa Seviyelerinin AnimasyonuKlip Düğmesinin AnimasyonuShape Tween OluşturmaKare Kare Animasyon HazırlamaBir Yol Boyunca Animasyon Oluşturmak

İÇİNDEKİLER TABLOSU ix

DERS 6 Temel Etkileşim Eklemek . . . . . . . . . . . . . . . . . . . . . . . . . . Eklemek . . . . . . . . . . . . . . . . . . . . . . . . . . Eklemek 157

Flash Belgelerini Etkileşimli Hale GetirmekDavranışlarDavranışları Kullanarak Bir JPEG Resmi YüKullanarak Bir JPEG Resmi YüKullanarak Bir JPEG Resmi Y klemekBir Web Sayfasını Açmak için Davranışları KullanmakBileşen Kullanarak Harici Bir SWF Dosyası YüYüY klemekScript Assist’i TanıyalımTimeline’ı Kontrol Etmek İçin Eylemleri KullanmakBir Giriş Sayfası Düğmesi OluşturmakEl Şeklindeki İmleci Yok EtmekMovie Clip Düğmesinin Çalışmasını SağlamakScript Gezgini’ni ve Raptiyeleri Kullanmak

DERS 7 Ses ve Video Eklemek. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185

Ses ve Video KullanmakSesleri ve Videoları DüzenlemekMedya Öğelerini Kullanırken Sorumlu DavranmakSıkıştırma, Codec’ler ve Plug-in’ler ve Plug-in’ler ve Plug-in lerMedya Öğelerini Çevrimiçi Olarak SunmakDosya BoyutuBir Belgeye Ses AktarmakSes Eklemek ve Sesleri ÖzelleştirmekBir Düğmeye Ses EklemekFlash’Flash’Flash a Video AktarmakVideonun Kodlanması

DERS 8 Bileşenlerle Form Oluşturmak . . . . . . . . . . . . . . . . . . . . . . .turmak . . . . . . . . . . . . . . . . . . . . . . .turmak 211

Formlar ve VerilerFlash Bileşenlerine GirişGeribildirim Formunun OluşturulmasıButton Bileşenini KullanmakFlash Kullanarak Bir Anket OluşturmakFocus Manager’ı Kullanmak

x İÇİNDEKİLER TABLOSU

DERS 9 ActionScript’in Temelleri . . . . . . . . . . . . . . . . . . . . . . . . . . . 239

ActionScript 2.0Sınıflar, Metotlar ve ÖzelliklerMetotlar ve ÖzelliklerKesin Tip Belirleme YöKesin Tip Belirleme YöKesin Tip Belirleme Y nteminin KullanılmasıActions Panelinde Kod İpuçlarını KullanmakFonksiyonları ve Koşullu Deyimleri KullanmakFaaliyet Alanı_root, _parent, this ve SeviyelerLoadVars Sınıfıfı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 EklemekKatalog Sayfalarını OluşturmakAna Katalogu HazırlamakHaberler Sayfasını OluşturmakGiriş Sayfasını OluşturmakMenüyü CanlandırmakMenünün Düğmelerini Kontrol Etmek

DERS 10 Flash İçeriğini Yüklemek ve Optimize Etmek . . . . . . . . . . 299

Flash Belgelerinin Optimize EdilmesiUygulamaları Organize Etmek ve İyi AlışkanlıklarKullanılabilirlikAnimasyonu Optimize EtmekRuntime Bitmap Caching Özelliğiyle Bir Arka Planı Daha Verimli Hale GetirmekBant Genişliği ve Dosya BoyuKullanıcı PlatformlarıHarici İçeriğin Yüin Yüin Y klenmesiİçeriği Ana Uygulamaya Yüi Ana Uygulamaya Yüi Ana Uygulamaya Y klemekFlash’Flash’Flashtan Dışarıya Veri GöndermekProgressBar Bileşenini EklemekTech Bookstore’u Yüu Yüu Y klemekTech Bookstore Sitesini Test Etmek ve Hata Ayıklamak

İÇİNDEKİLER TABLOSU xi

DERS 11 Flash Belgelerini Yayınlamak . . . . . . . . . . . . . . . . . . . . . . .nlamak . . . . . . . . . . . . . . . . . . . . . . .nlamak 343

Metaveri Eklemek ve SWF Dosyalarını Yayınlamak Flash Player’ı Tespit EtmekBir SWF Dosyasını Bir HTML Sayfasına GömmekTech Bookstore Sitesini Web Sunucusuna YüTech Bookstore Sitesini Web Sunucusuna YüTech Bookstore Sitesini Web Sunucusuna Y klemekSonuç

EK A Eklentileri Yüklemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .klemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .klemek 363

Eklentileri ve Bileşenleri YüklemekFlash’Flash’Flash a Komutlar ve Davranışlar EklemekEklenti Bulabileceğiniz Yerler

EK B Kaynaklar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369

Macromedia.comUygulama ve Kaynak SiteleriForumlarE-posta ListeleriEklentiler ve FontlarÜçüncü Parti Araçlar ve Bunların Flash İle BütünleştirilmesiKonuyla İlgili Macromedia Kitapları

EK C Klavye Kısayolları. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 377

Dizin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385

xii İÇİNDEKİLER TABLOSU

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.

Giriş

xiv GİRİŞ

Ön GereksinimlerBu 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.

ÖzetSizin 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üini Yüini Y klemek ve Optimize Etmek

Ders 11: Flash Belgelerini Yayınlamak

Proje SitesiMacromedia Flash 8: KaynağıMacromedia Flash 8: KaynağıMacromedia Flash 8: Kayna ndan Eğndan Eğ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“online kitap ma“ ğazası” uygulaması oluşturacaksınız (bu uygulamada bir alışveriş sepeti olmayacağını hatırlatayım). Uygulamada

GİRİŞ xv

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’ithal edilen grafikler, Flash’ithal edilen grafikler, Flashta 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 ’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İpucuİ sözcüğüyle gösterilen kısa metinlerde, anlatılan işlan iş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ş iniz ek temel bilgiler verilmiş iniz ek temel bilgiler verilmi ve becerilerinizi gelişve becerilerinizi geliş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’Flash’Flashta 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

xvi GİRİŞ

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üEklentileri YüEklentileri Y klemek” klemek” klemek adını taşıyan Ek A’A’Ada, Macromedia Extension Manager’da, Macromedia Extension Manager’ ’ın yüklenmesi ve kullanılmasıyla ilgili bilgiler yer alır. “Kaynaklar” adındaki Ek B’de ’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’de de Flash 8 Basic’ ’deki k’deki k’ ısayollar birer liste halinde verilmiştir.

• CD-ROM: Kitapla birlikte verilen CD’de Macromedia Flash 8’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’de bu dosyalar’ ı derslere göre organize edilmiş bir şekilde bulacaksınız. Örneğin Ders 4’ün dosyaları CD’de lesson04 klas’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ıfıf rdan başlayarak oluşturmayı deneyin.

Macromedia Kaynağından Eğitim SerisiMacromedia’Macromedia’Macromedianın “Kayna“Kayna“ ğıKaynağıKayna ndan Eğndan Eğndan E itim” ve “İ“İ“ leri Düzey Kaynağızey Kaynağızey Kayna ndan Eğndan Eğndan E itim” dizileri, Macromedia ile işbirliğiyle geliştirilmekte ve ürün destek ekipleri tarafın destek ekipleri tarafı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ğıKaynağıKayna ndan Eğndan Eğndan E itim kitabı, dersler halinde,

GİRİŞ xvii

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 SistemiBu kitap, kaynaktan gelen içeriği kullanarak kendi kendinize çalışabilmenizi sağlayacak şekilde tasarlanmıştır. Macromedia Yetkili EğMacromedia Yetkili EğMacromedia Yetkili E itim Ortağıitim Ortağıitim Orta (Macromedia Authorized Training Partner) programı kapsamında yer alan diğer eğitim seçeneklerini de değerlendirebilirsiniz. Macromedia Sertifikalı Eğ Eğ E itmenler (Macromedia Certified Instructors) tarafitmenler (Macromedia Certified Instructors) tarafitmenler ı (Macromedia Certified Instructors) tarafı (Macromedia Certified Instructors) taraf ndan verilen uygulamalı derslerle eğitiminizi çok kısa sürede tamamlayabilirsiniz. Macromedia University’den online etkile’den online etkile’ şimli eğitim alarak bu konudaki her şeyi kendi kendinize öğrenmeniz de mümkümkümk n. Tün. Tü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 http://www.macromedia.com/go/training adresini ziyaret edebilirsiniz. Ayrıca bu kitabın Tün Tü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: http://www.medyasoft.com.tr/MedyaSoft/egitimmerkezi/

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 ActionScript ’in Flash belgelerinizle nasıl çalıştığını öğrenecek ve bileşenlerin çalışmasını sağlayacaksınız.

• ActionScript ActionScript ’i kullanarak Flash programının dışına bilgi göndereceksiniz.

• Dinamik olarak harici içerik yükleyeceksiniz.

• Arama motorunun istedi 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.

xviii GİRİŞ

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, 10.4

• 256 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.

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.

1 Temeller

Flash arabirimi

2 DERS 1

İ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 ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:Yok

Başlangıç Dosyaları:Yok

Tamamlanmış Dosyalar:lesson01/complete/bookstore3.fla

TEMELLER 3

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 www.macromedia.com/exchange 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.

4 DERS 1

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.

TEMELLER 5

Başlık çubuğu ve doküman ismiBaşlık çubuğu ve doküman ismiAna menüDüzenleme çubuğu

Doküman sekmeleriTimeline (Zaman çizgisi)

Tools (Araçlar) paneli

Properties (Özellikler) denetçisi

Stage (Sahne) Açık paneller

Başlık çubuğu ve Başlık çubuğu ve doküman ismiDoküman sekmeleri Ana menü

Düzenleme çubuğu

Timeline (Zaman çizgisi)

Tools (Araçlar) paneli

Properties (Özellikler) denetçisi

Stage (Sahne)

Paneller

6 DERS 1

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.

TEMELLER 7

İ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.

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

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.

1. Flash’ı başlatın.

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

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 www.macromedia.com/software/activation 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.

8 DERS 1

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 520piksel 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 21fps 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.

TEMELLER 9

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.flaadı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.

10 DERS 1

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.

Tutacak

Genişletme / Toparlama oku

Panel başlık çubuğu

Options (Seçenekler) menüsü

TEMELLER 11

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.

12 DERS 1

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.

Sola hizala

Yatay olarak ortala Sağa hizala

Stage’e göre hizala

Aşağıya hizala

Dikey olarak ortalaYukarıya hizala

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.

TEMELLER 13

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.

14 DERS 1

Ş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ı göster / gizle

Katmanları taslak olarak göster

Oynatım kafası Kare görüntüleme menüsü

Katman ekle

Hareket kılavuzu ekle

Katman klasörü ekle

Katmanı sil

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.

TEMELLER 15

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.

16 DERS 1

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

Anahtar kare (dolu)

Kare

TEMELLER 17

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.

18 DERS 1

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.

Üstteki katmanın içeriği

Alttaki 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.

TEMELLER 19

Ş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.

20 DERS 1

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.

TEMELLER 21

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.

22 DERS 1

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.

Rectangle Tool (Dikdörtgen Aracı)

Oval Tool (Elips 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ı.

TEMELLER 23

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

24 DERS 1

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.

TEMELLER 25

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.

26 DERS 1

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.

TEMELLER 27

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 EMBEDetiketleri ile belirtilmiş ve Flash’ın koda ilişkin tüm parametreleri sizin için doldurmuş olduğuna dikkat edin.

28 DERS 1

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) • Extending (Genişleme İmkânları)

• Tutorials & Samples (Rehberler & Örnekler)

• Language Reference (ActionScript and Components)

• ActionScript 2.0 • Flash Lite

• Components (Bileşenler) • 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.

İçindekiler Bilgi ve dokümantasyon paneli

Arama (Search)

İleri düğmesi

Geri düğmesi İçindekiler düğmesi

Update (Güncelle) düğmesi

Print (Yazdır) düğmesi

TEMELLER 29

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 http://flash.TrainingFromTheSource.com/ adresinde görebilirsiniz.

30 DERS 1

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ü www.macromedia.com/go/getflashplayer adresinden yükleyebilirsiniz.

Bu Derste ÖğrendiklerimizBu 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).

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.

2 Grafikler

Tamamlanmış arka plan

32 DERS 2

Bu Derste ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:lesson02/assets/company_down.pnglesson02/assets/company_up.pnglesson02/assets/contact_down.pnglesson02/assets/contact_up.pnglesson02/assets/products_down.pnglesson02/assets/products_up.pnglesson02/assets/title.pnglesson02/assets/logo.pnglesson02/assets/map.FH11

Başlangıç Dosyaları:lesson02/start/bookstore3.fla

Tamamlanmış Dosyalar:lesson02/complete/bookstore6.flalesson02/complete/ma.fla

GRAFİKLER 33

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.

Renkler

Seçili araç

Görünüm

Açılır menü

Seçenekler (Değiştiriciler)

Araçlar

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

34 DERS 2

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)

Çizgi (Line)

Elips (Oval )

Kurşunkalem (Pencil)

Dolmakalem (Pen)

Serbest dönüşüm (Free Transform)

Mürekkep şişesi (Ink Bottle)

Damlalık (Eyedropper)

El (Hand)

Siyah / beyaz (Black and white)

Nesnelere kenetlen (Snap to Objects)

Alt seçim (Subselection)

Kement (Lasso)

Metin (Text)Dikdörtgen / Çokgen (Rectangle / Polystar)

Fırça (Brush)

Degrade dönüşüm (Gradient Transform)

Boya kovası (Paint Bucket)

Silgi (Eraser)

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.

GRAFİKLER 35

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 çizimKenar çizgisi ve dolgu birbirinden ayrı

Birleşik çizim

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

36 DERS 2

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 Merge Drawing modeliyle çizilmiş nesneçizilmiş nesne

Object Drawing modeliyle Object Drawing modeliyle çizilmiş nesneçizilmiş nesne

ç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

GRAFİKLER 37

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.

38 DERS 2

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 0-255 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

GRAFİKLER 39

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.

40 DERS 2

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 #666666 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 #666666 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.

GRAFİKLER 41

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 15girin ve Enter tuşuna basın. Dikdörtgenin boyutlarının değiştiğini göreceksiniz.

42 DERS 2

4. Oval aracını kullanarak bir daire çizin. Dolgu rengi olarak #999999 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 #999999 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 100yapı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

GRAFİKLER 43

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.

44 DERS 2

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.

GRAFİKLER 45

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.

46 DERS 2

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.

GRAFİKLER 47

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 #666666 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 #666666 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.

48 DERS 2

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 #999999 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.

GRAFİKLER 49

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.

50 DERS 2

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 mask olarak isimlendirin. mask katmanında kılavuzların arasında kalacak ve onlara maskkenetlenecek ş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.

GRAFİKLER 51

Kenar çizgisi kapatma stili

Özel stil düğmesi (Custom stroke style)

Kenar çizgisi stili (Stroke style)

Kenar çizgisi kalınlığı (Stroke height)

Kenar çizgisi rengi (Stroke color)

Kenar çizgileri birleşme stili

Ölçü (Scale)Kenar çizgisi vurgulama (Stroke hinting)

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.

52 DERS 2

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 #000000 (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.

GRAFİKLER 53

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ı

Öğeler

New Symbol (Yeni Sembol)

New Folder (Yeni Klasör)New Folder (Yeni Klasör)

Seçenekler menüsü

New Library panel (Yeni kütüphane paneli)

Pin current library (Mevcut kütüphaneyi sabitle)

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

54 DERS 2

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.

GRAFİKLER 55

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.

56 DERS 2

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.

GRAFİKLER 57

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.

58 DERS 2

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.

GRAFİKLER 59

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.

60 DERS 2

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.

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.

GRAFİKLER 61

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.

62 DERS 2

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.flaolarak 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çiciDegrade tanım çubuğu

Onaltılık değer

GRAFİKLER 63

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 taşı

Degradeyi döndür

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.

64 DERS 2

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.

GRAFİKLER 65

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 0tamamen saydam olmasını istiyoruz, bunun için Alpha değeri olarak 0tamamen saydam olmasını istiyoruz, bunun için Alpha değeri olarak 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 grGlow yazın, sembol türü olarak da grGlowGraphic 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.

66 DERS 2

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)

GRAFİKLER 67

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 grGlowsembolü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ı.

68 DERS 2

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 ÖğrendiklerimizBu 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).

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.

3 Metinler

Bu derste Tech Bookstore sitesine metin alanları ekleyeceğiz.

70 DERS 3

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 ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:Yok

Başlangıç Dosyaları:lesson03/start/bookstore6.fla

Tamamlanmış Dosyalar:lesson03/complete/bookstore7.fla

METİNLER 71

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.

Font boyuFont

Metin/dolgu rengi

İtalik

Kalın

Sola yasla

Sağa yasla

Ortala

Her iki yana yasla

Biçimlendirme seçenekleri

Metin yönünü değiştir

Karakter aralığı

Üst simge / alt simge

Font gösterim Font gösterim metodu

Seçilebilir

Otomatik karakter aralığı

düğmesi

URL bağlantısı

Metin türü

72 DERS 3

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 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), Anti-alias for readability (okunabilirlik için yumuşatma) ve sadece Flash Professional 8’de bulunan Custom anti-alias (özel yumuşatma).

METİNLER 73

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 page names adını verin. Bir page nameskatman 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 namesadı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.

74 DERS 3

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 catalog yazın ve Enter’a basın. Label type catalog(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 reviews, tour, news, feedback ve reviews, tour, news, feedback 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 #666666 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.

METİNLER 75

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

76 DERS 3

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 #999999 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.

METİNLER 77

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 #666666 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.

78 DERS 3

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.

METİNLER 79

E-posta adresini içeren metin alanını seçin ve Properties denetçisindeki URL link alanına mailto:info@trainingfromthesource.com?subject=TechBookstore 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 e-mail 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.

80 DERS 3

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 İnsanlaryazı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.

METİNLER 81

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.

82 DERS 3

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.

METİNLER 83

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

84 DERS 3

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.

Bitmap metin (yumuşatma yok)

Okunabilirlik için yumuşatılmış (Anti-alias for readability)

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.

METİNLER 85

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.

86 DERS 3

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.

1. 1 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.

METİNLER 87

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 BOOKyazı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ü

88 DERS 3

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.

METİNLER 89

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

90 DERS 3

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 ÖğrendiklerimizBu 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).

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.

4 Sembol Oluşturmak ve Düzenlemek

Tech Bookstore sitesine klip, grafik ve düğme sembolleri ekliyoruz

92 DERS 4

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 ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:Yok

Başlangıç Dosyaları:lesson04/start/bookstore7.fla

Tamamlanmış Dosyalar:lesson04/complete/bookstore8.fla

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 93

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 www.TrainingFromTheSource.com/bonus 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

94 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 95

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

96 DERS 4

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 Use Count (Kullanım Adedi) sütunu dokümanda Use Counto 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.

Ön izleme paneli Seçenekler menüsü

Sembol ismi

Bağlantı/İhraç (Linkage/Export)

Kullanım adediSembolün

türü

Son değiştirilme tarihi

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 97

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.

Sembol örneğinin ismi

Kütüphanede kullanılan isimKütüphanede kullanılan isim

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

98 DERS 4

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

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 99

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.

100 DERS 4

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 btnProductsyazı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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 101

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.

102 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 103

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ı.

104 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 105

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.btnCatalog yazın ve OK düğmesine tıklayarak işlemi tamamlayın.btnCatalog

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

106 DERS 4

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 REVIEWS, TOUR, NEWS, FEEDBACK ve REVIEWS, TOUR, NEWS, FEEDBACKMAP. 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 “görünmez bir düğme oluşturacağız. Görünmez düğmeleri HTML’deki “görünmez hot spot”lar olarak düşünebilirsiniz; bunlar bir düğme gibi görünmeseler de üzerlerine tıkladığınızda bir şey

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 107

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.

108 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 109

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.

110 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 111

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

112 DERS 4

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 #999999 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

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 113

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 glow adını verin. Bu katmanın Timeline’daki glowkatmanlar 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ü glow sembolünü glow 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 grGlowseçin. Edit > Paste in Place komutunu vererek grGlowseçin. Edit > Paste in Place komutunu vererek sembolünün ve logo grafiğinin düzgün bir şekilde hizalanmasını sağlayın.

114 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 115

İ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, #666666 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 bg olarak bgisimlendirdikten sonra mcProducts klibinin içine yeni bir katman ekleyin ve bu katmana dividerismini verin. Tools panelinden Line aracını seçin ve Stroke color olarak #666666 değerini girin. Stage’de düz, dikey bir çizgi oluşturun. Çizgiyi seçin ve Properties denetçisinden yüksekliği 11yapı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.

116 DERS 4

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 bg olarak isimlendirin. Ardından bg 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

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 117

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 btnMapdüğ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.

118 DERS 4

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 #999999 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 #999999 olarak

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 119

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 textadı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.

120 DERS 4

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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 121

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.

122 DERS 4

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 contentsyazı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.

SEMBOL OLUŞTURMAK VE DÜZENLEMEK 123

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 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.

124 DERS 4

Bu Derste ÖğrendiklerimizBu 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 99-102).

• Düğmeleri Stage’e yerleştirdik (Sayfa 102-104).

• Bir metin düğmesinin tıklanabilir alanını değiştirdik (Sayfa 104-106).

• Görünmez bir düğme oluşturduk (Sayfa 106-110).

• Klip sembolleri oluşturduk (Sayfa 111-117).

• Bir klip düğmesi tasarladık (Sayfa 117-121).

• Sembolleri çoğalttık (Sayfa 121-123).

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.

5 Animasyon Hazırlama

Tech Bookstore sitesindeki animasyon

126 DERS 5

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 ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:Yok

Başlangıç Dosyaları:lesson05/start/bookstore8.flalesson05/start/mapStarter.fla

Tamamlanmış Dosyalar:lesson05/complete/bookstore9.flalesson05/complete/map.fla

ANİMASYON HAZIRLAMA 127

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

128 DERS 5

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.

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.

ANİMASYON HAZIRLAMA 129

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 actionsgirin. 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

130 DERS 5

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 listesi

Script Assist düğmesi

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.

ANİMASYON HAZIRLAMA 131

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.

Eylemin nasıl eklenebileceğine dair açıklamalarEklenecek eylem

Eylemin tanımıKareye ActionScript eklenmişKareye ActionScript eklenmiş

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

132 DERS 5

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 slideupyazı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.

ANİMASYON HAZIRLAMA 133

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 mcCompanyMenuve 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.

134 DERS 5

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,

ANİMASYON HAZIRLAMA 135

menü 1-12 no’lu kareler arasında aşağı, 12-20 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.

136 DERS 5

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

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.

ANİMASYON HAZIRLAMA 137

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, mcCompanyMenuve 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 mcBookGlow adlı bir klip sembolüne mcBookGlowdö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).

138 DERS 5

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

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.

ANİMASYON HAZIRLAMA 139

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.

140 DERS 5

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.

ANİMASYON HAZIRLAMA 141

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.

142 DERS 5

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.

ANİMASYON HAZIRLAMA 143

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:

144 DERS 5

Ç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.

ANİMASYON HAZIRLAMA 145

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.

146 DERS 5

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.

ANİMASYON HAZIRLAMA 147

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.

148 DERS 5

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.

ANİMASYON HAZIRLAMA 149

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

150 DERS 5

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.

ANİMASYON HAZIRLAMA 151

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

152 DERS 5

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.

ANİMASYON HAZIRLAMA 153

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.

154 DERS 5

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

ANİMASYON HAZIRLAMA 155

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.

156 DERS 5

Bu Derste ÖğrendiklerimizBu 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 127-137).

• Alfa değerini zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween uyguladık. (Sayfa 137-139).

• Parlaklığı zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween uyguladık. (Sayfa 140-141).

• Sayfa çevirme animasyonu için bir shape tween uyguladık. (Sayfa 142-145).

• Bir kare kare animasyon oluşturma çalışması yaptık. (Sayfa 145-149).

• Merge Drawing Model ile çizilmiş vektörel bir yol boyunca bir sembolü hareket ettirdik.(Sayfa 149-155).

• Bir animasyonun sürekli tekrarlanmasını önlemek için bir stop() eylemi kullandık(Sayfa 155).

Ş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.

6 Temel Etkileşim Eklemek

Tech Bookstore Web sitesine etkileşim özellikleri eklendi.

158 DERS 6

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 ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:lesson06/assets/mmpresslogo.jpg

Başlangıç Dosyaları:lesson06/start/bookstore9.fla

Tamamlanmış Dosyalar:lesson06/complete/bookstore10.fla

TEMEL ETKİLEŞİM EKLEMEK 159

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 lar ve larScript Assist şeklinde karşınıza çıkmaktadır. Script Assist, ActionScript panelinde bulunan ve Script Assist şeklinde karşınıza çıkmaktadır. Script Assist, ActionScript panelinde bulunan ve Script AssistActionScript konusunda her şeyi öğrenmeye gerek kalmadan daha karmaşık eylemler eklerken kullanılan bir özelliğidir.

Davranışlar

Davranışlar (behaviors), bir panelin ilar (behaviors), bir panelin ilar ç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 (’dir (’ www.macromedia.com/go/exchange).

160 DERS 6

İki yere davranış ekleyebilirsiniz: bir Timeline’daki anahtar karelere ya da do’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’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şu, geliş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 ’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şıya uygulamada neyle karşıya uygulamada neyle kar laşacağı konusunda ipucu verir.

TEMEL ETKİLEŞİM EKLEMEK 161

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’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’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 hedef olarak kullanılması için örnek isimlerine ihtiyaç vardır. Herhangi bir amaçla hedefbir 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

162 DERS 6

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’deki bir nesneye g’ öndermede bulunabilmek için ihtiyaç duyduğu bir öğedir. Küedir. Kü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.

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.

Geçerli SeçimAdd Behavior (Davranış Ekle)

Remove Behavior (Davranışı Kaldır)

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 assets/mmpresslogo.jpg yazın ve assets/mmpresslogo.jpgkullanı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

164 DERS 6

ş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ıkodunu inceleme fı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’Go to URL (URL’Go to URL (URLe Git) iletişim kutusu açılacak ve burada hedef seçenekleri görüntülenecektir: _self, _parent,

_blank ya da _top. Bu seçeneklerin her biri HTML’eneklerin her biri HTML’eneklerin her biri HTMLdeki kar’deki kar’ şılığının aynısıdır. Buradaki değeri _blank olarak de_blank olarak de_blank ğiştirin.

3. Go to URL iletişim kutusunda davranış için hedef URL’i ayarlayın

Hedef URL’Hedef URL’Hedef URLi 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’in hedef URL’in hedef URLi http://www.peachpit.com olarak ayarlayın. URL’n. URL’n. URLi yazdıktan sonra OK düğmesine tıklayarak Stage’e geri d’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şto URL iletişto URL ileti im kutusunda URL’in başına http:// eklemeyi unutmayhttp:// eklemeyi unutmayhttp:// ın. Yeni tarayıcılar hepimizi tembelleştirdi, çünkü artık bir Web sayfasına gitmek için adres penceresine http:// yazmamhttp:// yazmamhttp:// ız gerekmiyor. Eğz gerekmiyor. Eğ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 ’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

166 DERS 6

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’bir URL’bir URLe 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’zda URL’zda URLi 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ıtemel ActionScript konuları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şişi tirmek için bunun bazı durumlarda kullanılabilecek en akılabilecek en akı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

TEMEL ETKİLEŞİM EKLEMEK 167

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şiş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. truedeğeri içeriğin otomatik olarak yükleneceğini; false değeri de yüklenebilmesi için onu tetiklemeniz gerektiğini belirtir.

168 DERS 6

• 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şiş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şişi tirebileceğiniz şeyler, kullandığınız bileşene bağlıdır; bununla birlikte, değişişi tirilebilir tüm seçenekler Parameters sekmesinde listelenmişsekmesinde listelenmişsekmesinde listelenmi 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 yazmap.swf yazmap.swf ı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şiş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’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.

TEMEL ETKİLEŞİM EKLEMEK 169

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’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 to find uszeninde “How to find uszeninde “ ” 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’da dosyay’ ı test ederken içerik görünecektir. Eğer görünmezse contentPathparametrenizi kontrol etmeniz ve doğru ayarlandığından emin olmanız gerekir.

170 DERS 6

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 ’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’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”. 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ıp getirecektir. Uzun lafı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 ’e ilgili ’ öğenin nerede olduğunu söylemeniz gerekir. Yollarla çalışırken özel bir yazım şekli olan “Noktalı Yazım”ı m”ı mkullanı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);

TEMEL ETKİLEŞİM EKLEMEK 171

Bu ikinci örnekte ustkat.yatakodasi.masa.gozluk, gözlüğünüzün bulunduğu yeri gösterir. thisanahtar sözcüğü ise burada sizi göstermektedir.

Anahtar sözcükler (keywords), Flash tarafkler (keywords), Flash tarafkler ı (keywords), Flash tarafı (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’ıinde, bunun sebebi, Flash’ı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ınesnelerine Flash tarafı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’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.

172 DERS 6

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 ’da ’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’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.

TEMEL ETKİLEŞİM EKLEMEK 173

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ü nkü 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ü nkü 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ü nkü 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ızerine getirin. Tı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üçükte küçü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 t’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üKü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.

174 DERS 6

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 ’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”, 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.

TEMEL ETKİLEŞİM EKLEMEK 175

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şişi tirmeniz gerekecektir. Kare etiketlerini kullanmak işkullanmak iş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’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üKüK tüphaneyi mümkün olduğu kadar temiz tutmanız iyi olur. Küz iyi olur. Küz iyi olur. K tüphanedeki btnHotspotsembolü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 EtmekBir 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.

176 DERS 6

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 bulunan ve a’de 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ü nkü 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 = metninin sonuna = metninin sonuna false yazın.

İşiniz bittikten sonra Actions pencerenizin görüntüsü aşağıdaki şekilde gösterildiği gibi olacaktır.

TEMEL ETKİLEŞİM EKLEMEK 177

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’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ükü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’n. Timeline’n. Timelineda ’da ’14 numaralı kareyi seçin, F6 tuşuna basarak bir anahtar kare ekleyin, sonra da Script bölmesine stop(); yazın.

178 DERS 6

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’ı eylemini eklemenizin nedeni, Flash’ı eylemini eklemenizin nedeni, Flash n, bir movie clip oluşturduğunuzda her bir kare etiketinde duracak şekilde programlanmış olmasıdır. Flash’ır. Flash’ır. Flash n durmasına izin verirseniz, parlaklık tween animasyonu oynatılmaz. Bu nedenle, Flash’lmaz. Bu nedenle, Flash’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.

TEMEL ETKİLEŞİM EKLEMEK 179

Kullanıcı düğmeye tıkladığında bir parlaklık tween’k tween’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’e geri d’ önün.

6. FLA dosyasında yaptığınız değişiklikleri kaydedin.

Ana Stage’deyken, File > Save komutunu se’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’da, kullan’ ıcı imleci düğmenin üzerine getirdiğinde ve düğmeden uzaklaştırdığında tetiklenen başka olayları da öğreneceksiniz.

180 DERS 6

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.

TEMEL ETKİLEŞİM EKLEMEK 181

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ır. Bu panelin sol tarafır. Bu panelin sol taraf nda Actions araç çubuğu ve Script gezgini, sağ tarafıtarafı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.

182 DERS 6

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’e t’ ıkladıktan sonra Pin active script düğmesine tıklayın. Stage’de bir script i’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ıyorsanı ız, muhtemelen bu aracı çok faydalı bulacaksınız.

Sekmeleri Actions paneline sığmayacak kadar çok iğnelenmiş nelenmiş nelenmi script’iniz varsa, panelin sağında iki uçlu bir ok belirir. Bu düğmeye tıklarsanız, iğnelenmiş nelenmiş nelenmi 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, ActionScript dili ve ’da, 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.

TEMEL ETKİLEŞİM EKLEMEK 183

Bu Derste ÖğrendiklerimizBu derste şunları öğrendiniz:

• Bir FLA dosyasındaki Timeline’a ve bir örneğe davranışlar ekledik (Sayfa 159–164).

• Bir belgeye eklediğimiz davranışlarda değişiklik yapmayı öğrendik (Sayfa 164–166).

• Bir JPEG resmini bir Loader bileşenine yükleyerek temel sunucu etkileşimi oluşturduk (Sayfa 166–169).

• ActionScript dilinin temelleri hakkında bilgi edindik (Sayfa 170–171).

• Bir SWF dosyasındaki oynatım kafasını kontrol etmek için stop(); eylemleri ekledik (Sayfa 171–172).

• Tech Bookstore sitesine yeni bir giriş sayfası (home) düğmesi ekledik (Sayfa 173–175).

• Bir düğmeden el şeklindeki imleci kaldırmak için Script Assist’i kullandık (Sayfa 175k (Sayfa 175k –177).

• Movie clip düğmesinin bir düğme olarak canlandırılması için gereken kodu ekledik (Sayfa 177–179).

• Belgemizdeki script’leri bulmak ve düzenlemek için Script gezginini ve iğnelenmiş script’leri nasıl kullanacağımızı öğrendik (Sayfa 180–182).

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.

7 Ses ve Video Eklemek

Video ve ses Tech Bookstore Web sitesini çok daha çekici kıkık lacaktılacaktılacakt r

186 DERS 7

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 ÖğreneceklerinizBu 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.

SES VE VIDEO EKLEMEK 187

Gerekli DosyalarOrtam Dosyaları:lesson07/assets/video1.movlesson07/assets/video2.movlesson07/assets/video3.movlesson07/assets/sound.mp3lesson07/assets/click.wav

Başlangıç Dosyaları:lesson07/start/bookstore10.fla

Tamamlanmış Dosyalar:lesson07/complete/bookstore11.flalesson07/complete/video1.flalesson07/complete/video2.flalesson07/complete/video3.flalesson07/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.

188 DERS 7

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.

SES VE VIDEO EKLEMEK 189

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 ’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.

190 DERS 7

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ı

SES VE VIDEO EKLEMEK 191

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şekli tam 0 işekli tam 0 i aretinden geçerken keserseniz, döngünün sonunda rahatsız edici “pıt” sesini duymazsınız. Eğz. Eğ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şturmak iş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.

192 DERS 7

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’ırudan Flash’ırudan Flash n içindeki kükük tüphaneye aktarılacaktır. Kür. Kü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 aktarıya aktarı ılmasıyla ilgili ayarlarda deıyla ilgili ayarlarda deı ğişiklik yapabilirsiniz.

SES VE VIDEO EKLEMEK 193

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. Burada bir MP3 dosyasr. Burada bir MP3 dosyasr ı 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’rmak size Flash’rmak size Flashtaki 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.

Kaliteyi değişişi tirmek için kullanılan Bit rate ayarı

Yeni ses sıkıştırma ayarını kontrol etmek için kullanılan Test düğmesi

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şPublish Settings iletişPublish Settings ileti im kutusunu kullanarak (File > Publish Settings) bütün ihraç seçeneklerini ayarlayabilirsiniz. Ancak Sound Properties iletişeneklerini ayarlayabilirsiniz. Ancak Sound Properties iletişeneklerini ayarlayabilirsiniz. Ancak Sound Properties ileti im kutusunda yaptığınız dosya ihraç etme ayarları daha önceki ayarları geçersiz kılacaktır. Bununla birlikte Publish Settings iletişr. Bununla birlikte Publish Settings iletişr. Bununla birlikte Publish Settings ileti im kutusunda “Override sound settings” (Ses ayarlarını geçersiz kıl) seçeneğini işini işini i aretlerseniz, Sound Properties iletişProperties iletişProperties ileti im kutusunda yapılan ayarlar geçersiz kılınır. Publish Settings iletişiletişileti im kutusu hakkında ayrıntılı bilgi için Ders 11’e bakabilirsiniz.’e bakabilirsiniz.’

5. Bir sonraki uygulamaya geçmeden önce dosyayı kaydedin.

194 DERS 7

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’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 ’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.

SES VE VIDEO EKLEMEK 195

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ızenleyebilir ya da zarfızenleyebilir ya da zarf n (Envelope) içinde kanallar da kendiniz bir efekt olukanallar da kendiniz bir efekt olukanallar şturabilirsiniz. Kanallar hoparlörleri temsil eder. Üstteki Ü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.

Ortalama Ses

Sol Kanal

Sağ Kanal

Efekt menüsü

Zarf tutamaçları (Time In/Out Kontrolleri)

Zoom In (Yakınlaş)

Zoom Out (Uzaklaş) Seconds (Saniyeler)

Frames (Kareler)

Timeline

Stop (Durdur)

Play (Oynat)

(Time In/Out Kontrolleri)

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.

196 DERS 7

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 layabilir veya layabilir durabilir ya da durabilir ya da durabilir akabilir.akabilir.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şnda bir kartta işnda bir kartta i lenir. Flash bu işlenir. Flash bu 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.

SES VE VIDEO EKLEMEK 197

WAV, sıkça kullanılan bir sıkıştırılmamış ses dosyası formatıdır. WAV dosyasını Flash’Flash’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 ’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’ktan sonra Flash’ktan sonra Flashtaki 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.

198 DERS 7

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üKü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’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çinizde ses (hafifç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 ’de ’sesi görsel olarak temsil eden bir öğe göremezsiniz ve sesin içinde bulunduğu anahtar kareden

SES VE VIDEO EKLEMEK 199

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 btnContactdüğmelerine ekleyin. İşinizi bitirdikten sonra buttons katmanını tekrar kilitleyin.

btnProducts örneğine sesi ekledikten sonra düzenleme çubuğundaki Scene 1’e t’e t’ ıklayarak ana Stage’e d’e d’ önün. Kün. Kü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.

200 DERS 7

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’ız) Flash’ı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üMü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 cross-fading 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

SES VE VIDEO EKLEMEK 201

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 ’dan ’farklı olduğunu unutmayın. Doğrudan Flash’a aktar’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 ’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 179.

2. 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.

202 DERS 7

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, ’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 dosyasvideo1.mov dosyasvideo1.mov ı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.

SES VE VIDEO EKLEMEK 203

4. Video dosyasını Flash belgesine gömme seçeneğini işaretleyin ve ardından Continuedüğ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

204 DERS 7

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 ’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’Stage’Stagee yerle’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üyü ük bir videodan küçük bir videodan küçü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 ’a almadan ’ önce uygun bir video düzenleme programıyla düzenlemek daha hassas çalışma imkâma imkâma imk nı sağlar, çünkü Flash’taki video düzenleme işzenleme iş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.

SES VE VIDEO EKLEMEK 205

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ız alanlarız alanlar n sıkışkışk tırırır lması çok daha zordur. Bir videoyu kodlarken piksel blokları piksel blokları piksel bloklar haline görüntülenecek ilk alan bunlardır, çünkü bu alanları bu alanları bu alanlarsıkışkış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.

206 DERS 7

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.

SES VE VIDEO EKLEMEK 207

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şiş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

208 DERS 7

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.

SES VE VIDEO EKLEMEK 209

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.

210 DERS 7

Bu Derste ÖğrendiklerimizBu derste şunları öğrendiniz:

• İnternet’te ortam varlıklarının kullanılması konusunda bilgi edindik (Sayfa 187–190).

• Ses dosyalarının nasıl ithal edildiğini öğrendik (Sayfa 190–193).

• Flash’Flash’Flashta belirli bir sesi özelleştirdik (Sayfa 194–195).

• Üç düğmeye ses ekledik (Sayfa 196–199).

• Import Video iletişim kutusunu kullanarak bir videoyu ithal ettik (Sayfa 200–205).

• Flash’Flash’Flashtaki sıkıştırma ayarlarıyla ilgili ayrıntıları öğrendik (Sayfa 205–209).

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.

8 Bileşenlerle Form Oluşturmak

Tech Bookstore projesinde bileşenlerin kullanıldığı ldığı ld iki form

212 DERS 8

Bu Derste ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:Yok

Başlangıç Dosyaları:lesson08/start/bookstore11.flalesson08/start/mail_icon.fla

Tamamlanmış Dosyalar:lesson08/complete/bookstore12.fla

BİLEŞENLERLE FORM OLUŞTURMAK 213

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şveriş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şveriş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ı

214 DERS 8

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ı şenler SWC dosyaları şenler SWC dosyalar eklinde derlenir ve İnternet ünternet ünternet zerinden satın alınabilir ya da

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şene erişene eri ebilir ve bunları çebilir ve bunları çebilir ve bunlar alışmalarımaları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ıen dosyalarıen dosyalar nın yer aldığı bir veritabanı bulunmaktadır ve sadece Flash bileşenlerini konu alan birçenlerini konu alan birç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.

BİLEŞENLERLE FORM OLUŞTURMAK 215

Flash 8 Professional Accordion, Alert, DataGrid, DateChooser, DateChooser, DateChooser DateField, Menu, MenuBar ve MenuBar ve MenuBar Tree gibi ek bileşenler içermektedir. Flash 8 Professional’da ayr’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.

216 DERS 8

• 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’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üçülar. Küçü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.

BİLEŞENLERLE FORM OLUŞTURMAK 217

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 adlandmcFeedback olarak adlandmcFeedback ırın. Layer 1 adındaki katmanın ismini background olarak değiştirin.

Alternatif olarak CD-ROM’daki ’daki ’ lesson08/start klasöründe yer alan bookstore12.fla dosyasını açabilirsiniz. Yeni bir movie clip sembolü ekleyin. mcFeedback admcFeedback admcFeedback ındaki yeni movie clip’i oluşturduktan sonra Layer 1 katmanını background olarak adlandırın.

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

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

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

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

218 DERS 8

Stage’Stage’Stagee t’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’ktan sonra Stage’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ıeken insanlar tarafı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’ini Stage’ini Stagee, ikinci ’e, ikinci ’adımda oluşturduğunuz dikdörtgenin sol kenarına yakın bir konuma sürükleyin.

BİLEŞENLERLE FORM OLUŞTURMAK 219

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

Stage’Stage’Stagedeki ilk Label ’deki ilk Label ’ örneğini seçin ve Properties denetçisini açın. Properties denetçisinde Parameters sekmesinin seçili olduğundan emin olun ve text parametresine tıklayın. text parametresinin karşısına Your email (e-postanYour email (e-postanYour email ı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şişi tirebilirsiniz. Burada, Properties denetçisinde bulunmayan bazı seçenekler bulunur ve bu seçeneklere burası dışında sadece ActionScript kullanılarak erişlarak erişlarak eri ilebilir.

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

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

Stage’Stage’Stagede Your email Label ’de Your email Label ’ örneğini seçin ve Properties denetçisini ya da Info panelini kullanarak X koordinatını 13 ve Y koordinatını da 44 olarak de44 olarak de44 ğ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.

220 DERS 8

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’enin Stage’enin Stagede etkinlik ve hatta ’de etkinlik ve hatta ’görünürlük durumunu ayarlayabilirsiniz.

TextInput bileşeninin iki örneğini Stage’ini Stage’ini Stage in üzerine sürükleyin. Properties denetçisini maksimum boya getirin ve <Instance Name> alanına tiEmail yaztiEmail yaztiEmail ı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’Stage’Stage in üzerindeki ikinci TextInput bileşeni örneğini seçin ve örnek adını tiSubject olarak tiSubject olarak tiSubjectayarlayı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üyü üklükteyken Stage’kteyken Stage’kteyken Stagedeki ’deki ’ tiEmail örneğini seçin. X koordinatını 108 piksel, Y koordinatını da 44 piksel olarak de44 piksel olarak de44 ğiştirin. Böylece bu TextInput örneği, daha önce oluşturduğunuz Your email etiketiyle hizalanacaktır. tiSubject ötiSubject ötiSubject rneğinin X koordinatını 108 piksel ve Y koordinatını da 66 piksel olarak değiştirerek bunun da Subject etiketiyle hizalanmasını sağlayın.

BİLEŞENLERLE FORM OLUŞTURMAK 221

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’ıFlash’ı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.

222 DERS 8

Burada kullanılan adlandırma yöntemine dikkat etmiş ntemine dikkat etmiş 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’de nesneleri g’ öremezsiniz. Bu adlandırma yöntemi, nesnelerin ne olduğunu anlamanızı kolaylaştırır.

Stage’deki TextArea bile’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.

BİLEŞENLERLE FORM OLUŞTURMAK 223

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üda olabilirsiniz. Kü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 Sendyazarak 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.

224 DERS 8

Örnek, Stage’deki dikd’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’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 ’daki ’ lesson08/startklasö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’n Flash’n Flashta yaşadığı sorunların birçoğu iki sebebe dayanır: planlama eksikliği ve tutarlılık eksikliği. Burada, sizin kullandığınızdan farklı bir adlandırma sistemi kullanan

BİLEŞENLERLE FORM OLUŞTURMAK 225

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 grSendyazarak 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’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’e geri d’ önün.

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

Stage’Stage’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ükük tüphanesinde nesneleri bulmak için kullandığı bir öğedir. Bu öğe büyüyü ük küçük küçük k k harfe duyarlıdır, dolayısıyla icon parametresinin karıyla icon parametresinin karı şısına yazarken, ismin aynen Linkage iletişim kutusundaki gibi

226 DERS 8

olmasına dikkat edin. İşinizi bitirdikten sonra Button örneğine ait etiketin (Send) sol tarafı) sol tarafı) 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’z Stage’z Stagede bu movie clip’de bu movie clip’ ’de bu movie clip’de bu movie clip in bir örneği olmadığından, şu anda test ettiğinizde formla ilgili herhangi bir şey göremezsiniz.

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

Button örneğindeki simgenin konumunu değiştirmek için Properties denetçisindeki labelPlacement parametresini kullanabilirsiniz. Varsayılan durumda labelPlacement parametresi right olarak ayarlanmıştır. Bu, etiketin simgenin sağ tarafıtarafı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’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.

BİLEŞENLERLE FORM OLUŞTURMAK 227

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

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

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

10 numaralı kareyi seçin ve Insert menüsünden Timeline > Blank Keyframe komutunu seçin. Sonra Text aracını seçin, metnin tipini Static olarak ayarlayın ve bir font seçerek geri bildirimin gönderildiğini belirten bir mesaj yazın. İşinizi bitirdikten sonra Components panelini açın ve bir Button bileşeni örneğini Stage’in üzerine sürükleyin. Properties denetçisini kullanarak düğmenin etiket metnini Back olarak değiştirin, örnek adını bBack olarak ayarlaybBack olarak ayarlaybBack ı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

228 DERS 8

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)click)click ’tir. Dtir. Dtir üğ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)click)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

BİLEŞENLERLE FORM OLUŞTURMAK 229

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.’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. NumericSteppersadece sayısal verileri kullanır.

ComboBox, kullanıcıların bir açılır menüden (yukarıdaki kurabiye örneğinde böyle bir menüde çikolatalı, fı, fı, 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 sembolmcFeedback sembolmcFeedback ü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.

230 DERS 8

Selection aracını kullanarak “Send us a message” metnine çift tıklayın. Metni Questionnaireolarak değiştirin. Stage’deki ’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’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’don’don t carry? (Bu sitede olmayan, istediğiniz kitaplar var mı?) ve 4) Are you a: (Siz bir:).

BİLEŞENLERLE FORM OLUŞTURMAK 231

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’ini Stage’ini Stagee ekleyin: NumericStepper, ComboBox, TextArea, Button. Sonra CheckBox ’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’kullanarak Stage’kullanarak Stagedeki NumericStepper bile’deki NumericStepper bile’ şenini seçin. Onu, ilk sorunun sol alt köşesine yerleştirin. Properties denetçisini kullanarak şu parametreleri değiştirebilirsiniz: NumericStepper’da kullan’da kullan’ ılabilecek maksimum ve minimum aralık, kullanıcı bileşen örneğindeki yukarı (up) ya da aşağı (down) düğmesine tıkladığında geçerli değerin artırılacağını ya da azaltılacağını belirleyen stepSize parametresi ve bileşenin geçerli değerini veya başlangıç değerini tanımlayan value parametresi.

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

232 DERS 8

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

Stage’deki ComboBox bile’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ıst tarafı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’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’e geri d’ önün.

BİLEŞENLERLE FORM OLUŞTURMAK 233

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

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

Stage’deki CheckBox bile’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ıer tarafı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’e yerle’ ştirdiğinize göre, dikdörtgenin sol tarafırtgenin sol tarafı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 tiEmail’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ıfıf nı destekler. FocusManager sınıfıfı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ı ama formları ın bir kısmında veya tamamında Tab tuşunu kullanmak zorunda olan görme engelli ziyaretçiler için de elzemdir. FocusManager sınıfı fı f bütünüyle ActionScriptüyle ActionScriptü ’ten oluşur, yani onu kullanmak için kendi kodlarınızı yazmanız gerekir. Endişelenmeyin, alıştıktan sonra bu o kadar da zor değil. Yazdığınız script çoğu kullanıcı arabirimi bileşeninin ortak bir özelliği olan tabIndex ile birlikte çalışır. Bu özelliği kullanarak, kullanıcı Tab tuşuna bastığında klavyenin hangi sırayla geçiş yapacağını gösteren sayıları belirlersiniz.

234 DERS 8

Focus Manager’ın özelliklerinin ve metotlarızelliklerinin ve metotlarızelliklerinin ve metotlar nın tanımlanması için kullanıla herhangi bir kullanıcı arabirimi kontrolü olmadığını unutmayıunutmayıunutmay n. Bu nedenle, sekme sırasını ayarlamak ya da öğelerin arasında Tab tuşuyla geçiş iş 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. tiEmail ö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.

tiEmail.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 ’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ırneklerinizi kopyalayırneklerinizi kopyalay p yeni bir Flash belgesine yapıştırabilirsiniz.

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

BİLEŞENLERLE FORM OLUŞTURMAK 235

Sekmeli hale getirilmiş Sekmeli hale getirilmiş Sekmeli hale getirilmi movie clip’lere ve düğmelere ait örneklerin etrafırneklerin etrafı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ıenlerin etrafı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’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’labilmesi, HTML’labilmesi, HTMLde form doldururken kullan’de form doldururken kullan’ ılan bir davranışa benzer. Actions panelindeki ActionScript kodunun altına aşağıdaki kod satırını ekleyin.

focusManager.defaultPushButton = bSend;

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

4. formda tiEmail ö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(tiEmail);

Bu kod satırı, Stage’deki’deki’ tiEmail ö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.

236 DERS 8

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’da map katman’ ının üstüne yeni bir katman ekleyin ve bu yeni katmanın ismini feedback olarak defeedback olarak defeedback ğiştirin. Timeline’da feedback katman’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üKü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.

BİLEŞENLERLE FORM OLUŞTURMAK 237

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

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

Bu Derste ÖğrendiklerimizBu derste şunları öğrendiniz:

• Formlar ve veriler hakkında daha fazla bilgi edindik (Sayfa 212–213).

• Flash UI bileşen grubunu öğrendik (Sayfa 214–217).

• Bir geribildirim formu oluşturduk (Sayfa 217–222).

• Button bileşenini kullandık (Sayfa 223–228).

• Bir anket formu oluşturduk (Sayfa 228–233).

• Focus Manager’ın nasıl kullanıldığını öğrendik (Sayfa 233–236).

238 DERS 8

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.

9 ActionScript’in Temelleri

ActionScript Tech Bookstore sitesine canlısitesine canlısitesine canl lılıl k kazandıkazandıkazand rırır r

240 DERS 9

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 ÖğreneceklerinizBu 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.

ACTIONSCRIPT’İN TEMELLERİ 241

Yaklaşık Süre

Bu dersi yaklaşık 3 saatte tamamlayabilirsiniz.

Gerekli DosyalarOrtam Dosyaları:lesson09/assets/catalog01.pnglesson09/assets/catalog02.pnglesson09/assets/home01.jpglesson09/assets/home02.jpg

Başlangıç Dosyaları:lesson09/start/bookstore12.fla

Tamamlanmış Dosyalar:lesson09/complete/bookstore13.flalesson09/complete/reviews.flalesson09/complete/news.flalesson09/complete/catalog/catalog01.flalesson09/complete/catalog/catalog02.flalesson09/complete/reviews/0321213408.txtlesson09/complete/reviews/0321219198.txtlesson09/complete/home.flalesson09/complete/home.txtlesson09/complete/styles.css

242 DERS 9

ActionScript 2.0

ActionScript 2.0, nesne yönelimli (object-oriented) bir script dilidir. Nesne yönelimli diller, belirli işlev tiplerini alıp sınıfıfı (class) adı verilen araçlar (sınıflar, bu işlevselliği kullanması gereken öğeler için f (class) adı verilen araçlar (sınıflar, bu işlevselliği kullanması gereken öğeler için fbirer ş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ğdeğde işkenler (variable), kenler (variable), kenler fonksiyonlar (function) ve fonksiyonlar (function) ve fonksiyonlar ö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 letilebilir (extensible) olmasıdır. Yani letilebilirona, 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 ÖzelliklerActionScript 2.0 ve Flash 8 Basic sınıflarıfları , nesneler ve nesneler ve nesneler 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

ACTIONSCRIPT’İN TEMELLERİ 243

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ıfı , ortak becerileri ve özellikleri f, ortak becerileri ve özellikleri ftanı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“yerle“ şik sınıflar”ı kullanacaksınız. Bu sınıflar da Flash’ın install dizininde harici olarak .as dosyalarında depolanmaktadır. Bunları inceleyebilirsiniz ama sakın değişişi iklik yapmayın.

ActionScript 2.0, Math sınıfıfıf , Button sınıfı fı f ve Date sınıfı fı f gibi bir dizi yerleşik sınıf içerir. Daha önce MovieClip sınıfıfıf nı ve onun bazı metotlarını ve özelliklerini (stop ve gotoAndPlay metotları gibi) kullanmıştınız. MovieClip sınıfıfıf , değiştirebileceğiniz ya da belirli bir örnek için yeniden

244 DERS 9

ayarlayabileceğiniz özelliklere de (_visible, _width ve _height gibi) sahiptir. Aslında Stage’iniz de MovieClip sınıfıfıf nın bir örneğidir. Yerleşik bir sınıfıfıf n nasıl kullanıldığını kısaca inceleyeceğiz.

Flash’Flash’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ıfıf nın örneğinin (LoadVars ve Sound gibi) ActionScript kullanılarak oluşturulması gerekir. ActionScript kullanarak bir sınıfıfı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ıfı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’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ı öfı ö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’deki bir movie clip’ ’in kütüphanede (Library) yer alan bir movie clip sembolünün örneği ya da kopyası olması gibi, rockinSound da Sound sınıfıfıf nın sadece bellekte bulunan ve sizden alacağı komutları bekleyen bir örneğidir.

Sound sınıfıfıf , yerleşik sınıfa bir örnektir. Yerleşik sınıfıfı demek, Flash’demek, Flash’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ıfıf n kendisini oluşturan önceden tanımlanmış metotlara ve özelliklere sahiptir. Macromedia’zelliklere sahiptir. Macromedia’zelliklere sahiptir. Macromedianın programcıları tarafıtarafıtaraf ndan üretildikleri için bunlar için endişelenmeniz gerekmez.

Metotlar ve ÖzelliklerSı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 Basiczellikler (property) de, ActionScript 2.0 ve Flash 8 Basiczellikler ’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

ACTIONSCRIPT’İN TEMELLERİ 245

değişkenler ya da veriler gibidir ve daha çok SWF dosyalarınızda kullandığınız değişkenlere benzerler. Örneğin 6. Ders’te aşağıdakine benzer bir kod parçası kullanmıştınız:

myMovieClip_mc._visible = true;

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

Olayları ve olay işve olay iş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.

246 DERS 9

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’zda, Flash’zda, Flash a ilgili değişkenin ait olduğu veri tipini (sınıf) söylemiş olursunuz. Değişkenin veri tipini belirtirseniz, kod ipuçları ilgili sınıf için doğru metotları ve özellikleri gösterecektir. Tip belirleme konusunu bu derste daha önce görmüştünüz ve önceki şekilde, script’te tipi belirlemeyle tanımlanan bir nesneye göndermede bulunulduğunda kod ipuçlarının belirdiği bir örnek verilmiştir.

Bir değişkenin tipini tanımlamanın ikinci yolu sonek (suffix) kullanmaktır. Bu işlem, tip belirleme kadar esnek değildir, çünkü soneklerin ActionScript nesnelerine (sınıflar) göndermede bulunması gerekir (Sound sınıfı fı f ya da MoviClip sınıfı fı f gibi). FLA dosyanızdaki nesnelerin örnek isimlerinde sonek kullandığınızda, Flash bu örnekle ilgili doğru kod ipuçlarını görüntüler. Soneklere örnek

ACTIONSCRIPT’İN TEMELLERİ 247

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’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’ıFlash’ı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)

248 DERS 9

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 dosyasFonksiyonlar (function) tipik olarak bir FLA dosyasFonksiyonlar ında tekrar tekrar kullanılan kod bloklarıdır. Fonksiyonlar, yaptıkları işi tamamladıktan sonra bir değer döndürebilir ve ayrıca çalıştırılma şekillerini değiştirmek üzere fonksiyonlara parametre aktarılabilir. BağıBağıBa msız değz değ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” ne zaman” 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ıfıf rına koyacağınız saat ve neKadar da yemeğin fıin fı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);

ACTIONSCRIPT’İN TEMELLERİ 249

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

Bileşenlerin de parametre aldığına dikkat etmişna dikkat etmişna dikkat etmi sinizdir. Yani Properties denetçisini ya da Component Inspector panelini kullanarak girdi ya da Component Inspector panelini kullanarak girdi

ğiniz ya da ayarladığınız parametre değerleri, aslında ActionScript’te bileşenler tarafıenler tarafıenler taraf ndan kullanılan belirli değerleri ayarlamaktadır. Her bileşendeki ActionScript kodu, Flash tasarıendeki ActionScript kodu, Flash tasarı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ıfı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şittir işittir i areti, iki değeri karşıeri karşı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şBu işBu i lemi eşleştirme yapmak olarak düşünün.

250 DERS 9

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

Faaliyet Alanı

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

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

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

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

Yerel değişkenler, var anahtar sözcüğü kullanılarak bir fonksiyonun içinde tanımlanırlar ve bu fonksiyon işini bitirerek devreden çıktığında, içindeki değişkenler ortadan kalkar. Yani bir fonksiyonun içinde kullandığınız değişkenleri, kodunuzda ya da Timeline’da başka bir yerde kullanamazsınız. Bu, özellikle ActionScript kodunuzun başka bölümlerinde aynı isme sahip başka değişkenler varsa, bunlarla çakışma olmamasını sağladığı için bir açıdan iyi bir özelliktir. Diğer

ACTIONSCRIPT’İN TEMELLERİ 251

avantajı, Flash’ın daha az kaynak kullanmasını sağlamasıdır. Çünkü Flash, uygulamanızda artık kullanımda olmayan çok sayıda değişkeni takip etmek zorunda kalmaz. Yerel değişkenler, sadece fonksiyon çalışırken ortaya çıkar ve sonra yok olurlar.

Aşağıda bir yerel değişken örneğini görüyorsunuz.function myVariable() {

var myNum:Number;

//myNum değişkeni burada

}

//myNum değişkeni artık yok.

trace(myNum); //tanımsız

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

Aynı değişiş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şişi kenler kullandığınızda, ileride kodu düzenlerken kafanız karışabilir.

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

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

var numUsers:Number = 5;

Global değişkenler: Bu değişkenler SWF dosyasının içindeki bütün Timeline’n Timeline’n Timeline larda, faaliyet alanlarında ve fonksiyonlarda kullanılabilir. Bu yüzden, bir global değişken bildirebilir ve sonra ana SWF dosyasına yüklenen diğer SWF dosyalarında ve ana SWF dosyası içinde bulunan değişkenleri, ActionScript kodunda ya da dosya yapısında herhangi bir değişiklik yapmadan kullanabilirsiniz. Global değişkenlerin sağladığı faaliyet alanı ilk iki faaliyet alanından çok farklı değildir. Çünkü nkü nk bu

252 DERS 9

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 _lveklemek) 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’bu movie clip’bu movie clip in Timeline’ıin Timeline’ıin Timeline na göndermede bulunur. Bir düğme fonksiyonunda kullanırsanız, this anahtar sözcüğü düğmenin kendisini değil de düğme örneğini içeren Timeline’ı eren Timeline’ı eren Timeline belirtir. Doğrudan bir movie clip’rudan bir movie clip’rudan bir movie clipe ili’e ili’ ştirilmiş bir onClipEvent() işleyicisiyle kullanıldığında ise, this anahtar sözcüğü movie clip’movie clip’movie clip in Timeline’ıin Timeline’ıin Timeline nı belirtir.

Sonraki sayfada yer alan kodu inceleyin. Aşağıdaki gibi bir kodu ana Timeline’daki gibi bir kodu ana Timeline’daki gibi bir kodu ana Timeline a yerleştirirseniz, bu kod çok farklı şeyler yapar. Diyelim ki çalışan bir SWF dosyanız var ve Stage’z var ve Stage’z var ve Stagede, yine bir ’de, yine bir ’içeriği oynatmakta olan myClip adında bir movie clip’nda bir movie clip’nda bir movie clip iniz var. ActionScript aracılığıyla ığıyla ığı onRelease

ACTIONSCRIPT’İN TEMELLERİ 253

olay işleyicisini ekleyerek, movie clip’leyicisini ekleyerek, movie clip’leyicisini ekleyerek, movie clip lere birer düğme gibi davranabilirsiniz (bunu daha önce oluşturduğunuz movie clip düğmelerine uygulayacaksınız).

myClip_mc.onRelease = function() {

this.stop();

};

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

myClip_mc.onRelease = function(){

stop();

};

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

Flash kullanırken ve başkalarının yazdığı ActionScript kodlarını incelerken, _root anahtar sözcüğünün sıkça kullanıldığını göreceksiniz. _root kullanıldığında, bu ana Timeline’ın hedeflendiği anlamına gelir. Bu, sabit diskinizin kök dizinine (örneğin C:) ya da bir Web sitesinin kök klasörüne gitmeye benzer. Buna genelde mutlak başvuru denir. Mutlak başvuru tekniğini Web sitelerinde olduğu gibi (mutlak başvuru kullandığınızda, sitenizi başka bir etki alanına aktarmanız zor olacaktır), Flash’r), Flash’r), Flashta 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’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” Patron sensin” Patron sensin diyen bir özelliktir ve çok faydalıdır. Bu özellik true ya da false değeri alır ve aslında bu konu kitabın kapsamı dışındadır. 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’unuz uygulamada, Stage’unuz uygulamada, Stagedeki movie clip’deki movie clip’ ’deki movie clip’deki movie clip lerin içinde yuvalanmış olarak kodlar ya da kodun hedeflediği elemanlar bulunur. Eğer bu movie clip’er bu movie clip’er bu movie clip ler boşsa, bunların herhangi

254 DERS 9

birine bir SWF dosyası yükleyebilmeniz gerekir ve bu SWF dosyası ana Timeline’ana Timeline’ana Timelinedaki nesneleri ’daki nesneleri ’hedefleyebilir. Eğer movie clip’er movie clip’er movie clipe yüklenen SWF dosyasının içinde kodunuz varsa, _parent anahtar sözcüğünü kullanarak ana Timeline’ı kullanarak ana Timeline’ı kullanarak ana Timeline ya da ana Timeline’ya da ana Timeline’ya da ana Timelinedaki nesneleri hedefleyebilirsiniz. SWF ’daki nesneleri hedefleyebilirsiniz. SWF ’dosyalarını uygulamaya yüklemenin diğer yolu, seviyeleri kullanmaktır.

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

Flash Player’a ilk yüklenecek belgenin seviyesi _level0 ile gösterilir. Seviyeler buradan sonra _level1’dan ba’dan ba’ şlayarak çok büyüyü ük bir sayıya (kitabıya (kitabı ın yazarının duyduğuna göre 2 milyonun üstünde bir sayı) kadar üst üste yığılabilir. SWF dosyalarını seviyelere sırayla yüklemeniz gerekmez. İlk SWF dosyasını Flash Player’a, gezinti çubuğunu 150 numaralı seviyeye (_level150) ve tüm içeriği bu ikisinin arasında bir yere yükleyebilirsiniz; dolayısıyla gezinti ıyla gezinti ı çubuğu her zaman diğerlerinin üstünde olur. Bunların hepsi çok görecelidir. SWF dosyasını _level0 seviyesine yükleyebilir ve ana Timeline’ıTimeline’ıTimeline n içeriğiyle değiştirebilirsiniz. Bu, orijinal clip’tirebilirsiniz. Bu, orijinal clip’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’e ya da bile’ şene (Loader gibi) yüklediğinizde, bu dosya yeni bir seviyeye yüklenmiş klenmiş 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 ’deki ’diğer movie clip’ler gibi değerlendirilir. Bu da, değişişi ken benzeri verilerin daha kolay yöyöy netilmesini sağlar.

YüYü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üYüY klenen bir SWF dosyasını hedefleyen bir kodu çağırmadan önce, içeriğin tamamen yüklenmiş klenmiş 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ıfı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ıfıf nı bir örnek olarak incelemeye hazırsınız demektir.

ACTIONSCRIPT’İN TEMELLERİ 255

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’kenleri Flash’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ıda, sunucu tarafıda, sunucu taraf ndaki dillerden birini (ColdFusion, PHP, ASP ya da Java gibi) kullanırken, sunucu tarafırken, sunucu tarafırken, sunucu taraf ndaki dilin bir veritabanını sorgulayarak en yeni makaleleri daha sonra bir SWF dosyası tarafıtarafıtaraf ndan yüklenecek bir metin dosyasına yazmasının mümkün olmasıdır.

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

• send, sadece verileri bir sunucuya gönderir. Veriler, burada sunucu tarafınderir. Veriler, burada sunucu tarafınderir. Veriler, burada sunucu taraf ndaki script’ler tarafıtarafıtaraf ndan işlenebilir ve bir veritabanına girilebilir, bir XML belgesine eklenebilir, e-posta mesajı olarak gönderilebilir (ya da sunucu tarafınderilebilir (ya da sunucu tarafı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ındermek ve sunucu tarafı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’zere Flash’zere Flash a göndermesini istiyorsanız, TechBookstore sitesi için faydalı olabilir. Buradaki son metot load’dur. Tech Bookstore ’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ıda, Flash tarafı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 Suedeğ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&

256 DERS 9

Buradaki kod, Flash’Buradaki kod, Flash’Buradaki kod, Flashta üç ayrı değişken oluşturmaktadır: name, position ve manager. namedeğişkeninin değeri James, position değişkeninin değeri mentor ve manager değişkeninin değeri Nate W olarak ayarlanmıştır. Bu değerleri LoadVars sınıfıfıf nı kullanarak Flash’kullanarak Flash’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ı, LoadVarssınıfıfıf ndaki load metodunu kullanarak yüklüyorsunuz. Bu da ActionScript kodunun ikinci satırında gerçekleşiyor. Bu metot tek parametre almaktadır. Bu da, yüklemek istediğiniz dosyaya giden yoldur. Burada, geçerli Flash belgesiyle aynı klasörde bulunan testfile.txt adındaki bir dosyaya yüklüyorsunuz.

Bir sonraki kod parçası biraz karmaşık gelebilir. LoadVars sınıfıfıf , Flash’ı, Flash’ı, 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’dur ve bu olay, load metodunda tan’ ımlanan metin dosyası Flash’Flash’Flash a tamamenyü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 LoadVarsnesnesinde 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.

ACTIONSCRIPT’İN TEMELLERİ 257

İ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. Yeni bir Flash belgesi olu. şturun. Stage’in genişliğini 720 piksel, yüksekliğini de 345piksel 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.

258 DERS 9

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

Components panelini açın ve List bileşeninin bir örneğini Stage’e sürükleyin. Stage’deki ’deki ’ List bileşeni seçili durumdayken Properties denetçisini açın ve bileşenin genişlik değerini 200

ACTIONSCRIPT’İN TEMELLERİ 259

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_lsolarak 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 ’da ’ lesson09 klasöründe yer alan iki örnek incelemeyi bu klasöre kaydedin. Bunlar sırasıyla 0321219198.txt ve 0321213408.txt olarak adlandırılmıştır ve bu adlandırma işleminde kitapların ISBN numaraları temel alınmıştır. Bir veritabanı aramasında, kitap ismi yerine ISBN numarasına göre arama yapan bir script oluşturabilirsiniz, çünkü nkü 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ıfıf nı kullanacaksınız.

İncelemeleri bu iş ncelemeleri bu iş 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şinde gezinmenin işinde gezinmenin i kence haline gelmesi olabilir. Bu incelemelerin hepsi basit birer metin dosyasıdır. İsterseniz baİsterseniz baİ şka incelemeler de oluşturabilir ve bunları reviews klasörüne ekleyebilirsiniz. Kendi incelemelerinizi, yukarıda bahsettiğimiz metin dosyalarından birini açıp basit HTML biçimlendirme ayarlarını kopyalayarak da ekleyebilirsiniz. Flash uygulamalarının dâhil olduğu her başarılı girişgirişgiri imin anahtarı organizasyondur.

260 DERS 9

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

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

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

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

ACTIONSCRIPT’İN TEMELLERİ 261

Ü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’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’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 koordinatx koordinatx ını 220piksel, 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

262 DERS 9

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 tanparametreleri tanparametreleri ımlıyorsunuz. Bu fonksiyon, ıyorsunuz. Bu fonksiyon, ı evt isimli tek bir parametre alır. { ve } kıvrı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_lvismini vermektir. Kodun bir sonraki satırı, Flash’, Flash’, Flashtaki yerleşik bir fonksiyona dair bir diğer örnektir. load fonksiyonu tek bir parametre alır (yüklenecek olan dosyanın URL’n URL’n URLi). 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’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şsoranlara bilgi veren kişsoranlara bilgi veren ki i).

ACTIONSCRIPT’İN TEMELLERİ 263

review_lv.onLoad, farklı bir fonksiyon tipine örnek teşkil ediyor. onLoad fonksiyonu, aslında dosyanın tamamı Flash tarafıFlash tarafıFlash taraf ndan yüklendiğinde tetiklenen bir olaydır. Olay tetiklendiğinde Flash, review_lv.onLoad kodundan sonra yazılan fonksiyonu çalıştırır. Bu fonksiyon, yerel fonksiyon (inline function) ya da anonim fonksiyon olarak bilinir, çünkü nkü 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ı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 ı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, FLA dosyasışıyorsa, FLA dosyasışı ında yapmış olduğunuz değişiklikleri File menüsünden Save’Save’Save i seçerek kaydedin. Bir sonraki uygulamada bu dosya üzerinde çalışmaya devam edeceksiniz.

264 DERS 9

Olayları ve İşleyicileri Kullanmak

Önceki uygulamada Flash’nceki uygulamada Flash’nceki uygulamada Flashtaki bir olaya (event) kısaca göz attık. Olaylar, Flash’k. Olaylar, Flash’k. Olaylar, Flashta 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 leyiciler (event handler) ve leyiciler izleyiciler (listener), izleyiciler (listener), izleyicilerbu olayların yönetilmesine yardımcı olan eylemlerdir. Daha önce LoadVars sınıfıfıf yla ıyla ı çalışırken olaylara ait birkaç örmek görmüştünüz. Dosya Flash tarafız. Dosya Flash tarafız. Dosya Flash taraf ndan yüklendiğinde, Flash’inde, Flash’inde, Flashta onLoadolayı 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ıyla yı üklendiğinde ya da yükleme işlemi başarısız olduğunda, LoadVars nesnesi onLoad olayını tetikleyerek Flash’tetikleyerek Flash’tetikleyerek Flasha işlemin tamamlandığını söyler. Bu gereklidir, çünkü nkü nkFlash SWF dosyası dosyasını durdurup işlemin tamamlandığını söyler. Bu gereklidir, çünkü nkü nk Flash SWF dosyasını durdurup işlemin tamamlanmasını beklemek yerine, kodu işlemeye devam eder. Bu, asenkron iletişim olarak bilinir. Önceki uygulamada, SWF dosyasından bir metin dosyasının içeriğini yüklemesini istemiştiniz. SWF dosyası bir sonuç aldığında, ya metni TextArea bileşeninde gösterir, ya da Output panelinde bir hata görüntüler (test ortamındaysanız). FLA dosyasını yayınladığınızda trace deyimleri kullanıcıya gıya gı önderilmediği için, kullanıcılar SWF dosyanızdaki trace deyimlerinin içeriğini göremez.

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

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

Bu script, önce Sound nesnesinin yeni bir örneğini tanımlar ve yerleşik loadSound metodunu kullanarak Sound nesne örneğine bir MP3 dosyasını yükler. MP3 dosya isminden sonra yazılan true, SWF dosyasına (oynatmaya başlamadan önce bütün dosyanın yüklenmesini beklemek yerine) MP3 formatındaki şarkının akmasını istediğinizi bildirir. Daha sonra onID3

ACTIONSCRIPT’İN TEMELLERİ 265

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

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

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

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

266 DERS 9

İnceleme Sayfasına Bir İzleyici Eklemek

LoadVars sınıfıfıf nda iki olay vardır: onData ve onLoad. onData olayı, sunucudan bir sonuç döndürüldüğünde, ama sonuçlar Flash tarafılar Flash tarafılar Flash taraf ndan çözümlenmeden önce tetiklenir. onLoadolayı ise, LoadVars sınıfıfıf nın load ya da sendAndLoad metodunu çağırdığınız takdirde tetiklenir; ama bu olay, sonuçlar Flash tarafılar Flash tarafı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ı olayı olay nı kullanıyorsanız, onLoad olayıolayı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,

ACTIONSCRIPT’İN TEMELLERİ 267

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ıin sol tarafı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 HTMLkaynak 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’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’ndaki URL’ndaki URLi 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’nden Publish’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 .

268 DERS 9

İ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

ama Flash CSS2 s

ürümünü desteklemez. CSS1 spesifikasyonu için

http://www.w3.org/TR/REC-CSS1 adresine başvurabilirsiniz.

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

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

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

ACTIONSCRIPT’İN TEMELLERİ 269

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

270 DERS 9

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.

ACTIONSCRIPT’İN TEMELLERİ 271

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. catalog isimli yeni bir klasör oluşturun. catalogBu 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

272 DERS 9

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.

ACTIONSCRIPT’İN TEMELLERİ 273

5. CD-ROM’daki lesson09/assets klasöründe bulunan catalog01.png ve catalog02.png dosyalarını sabit diskinize kopyalayın.

CD-ROM’daki ’daki ’ lesson09/assets klasöründe, Kaynağından Eğitim serisinin orijinal İngilizce basımlarına ait kapak resimlerini içeren catalog01.png ve catalog02.png resimleri yer alıyor. Bu dosyaların ikisini de sabit diskinize kopyalayın.

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

Önce Layer 1 katmanını ismini pages olarak değiştirin. Components panelini maksimum boya getirin ve Loader bileşeninin bir örneğini Stage’e sürükleyin. Örneği, aşağıda verilen şekildekine benzer biçimde Stage’in sol üst kenarına yakın bir noktaya yerleştirin ve genişlik değerini 120, yükseklik değerini de 150 olarak ayarlayın. contentPath parametresini catalog01.png olarak vepng olarak vepng 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 buttonsolarak 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’de Loader bile’ şen örneğinin altına yerleştirin. İkinci movie clip düğmesini ilk düğmenin altına yerleştirin.

Son olarak, Tools panelindeki Text aracına tıklayın ve Properties denetçisini açın. Metin tipini Static, fontunu Arial 10 pt, rengini de siyah olarak ayarlayın. Font render yöntemi olarak Anti-alias for readability’yi seçin. Static text katmanını seçin ve Stage’e t’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

274 DERS 9

olarak ek satırlar oluşturulacaktır. Oluşturduğunuz statik metin alanına bir şeyler yazın (ne yazdığınız önemli değil). Göstermelik metin olarak lorem ipsum metnini kullanabilir, tamamlanmış catalog01.fla dosyasını açıp tamamlanmış FLA dosyasında bulacağınız metni kullanabilir ya da İnternet’ten kitabın gerçek incelemesini bulabilirsiniz.

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

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

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

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

ACTIONSCRIPT’İN TEMELLERİ 275

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’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 tocetiketini 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.

276 DERS 9

Bu katmana boş bir kare eklemek yerine bir anahtar kare ekleyerek, Stage’deki statik metin ’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 ’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”);}

ACTIONSCRIPT’İN TEMELLERİ 277

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

catalog01.fla dosyasını test ederek belgenin beklediğiniz gibi çalıştığından emin olun. Herhangi bir sorun yoksa dosyayı kaydedin ve File menüsünden Publish’Publish’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 ’daki lesson09 ’klasöründe catalog02.fla dosyasını sabit diskinizdeki TechBookstore klasörüne kaydedebilir ve bu dosyayı yayınlayabilirsiniz. Ama bu durumda herkes size tembel gözüyle bakar ve ayrıca bu şekilde pratik kazanamazsınız.

Herhangi bir dosyayı (örneğin catalog01.fla dosyasını) yerleşim düzenini ve tarzı bozmadan yeniden yapılandırmanın genellikle en hızlı yolu, dosyanın yeni bir kopyasını kaydedip sonra sadece gereken şeyleri değiştirmektir. Bu aslında bir movie clip sembolünü çoğaltmayla aynı prensibe dayanır. Bu yöntemi kullanırsanız, dosyanın tamamını sıfıfıf rdan başlayarak yeniden oluşturmak ve öğelerin her birini aynı şekilde yerleştirmekle uğraşmak zorunda kalmazsınız.

278 DERS 9

pages katmanındaki Loader bileşenini seçin ve contentPath parametresini catalog2.png olarak catalog2.png olarak catalog2.pngdeğ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 345piksel 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.

ACTIONSCRIPT’İN TEMELLERİ 279

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’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 x ve x y koordinatlary koordinatlary ının ikisini de 10 piksel olarak değiştirin. Örneğin genişliğini 200, yüksekliğini de 325 piksel olarak değiştirin ve bunu catalog_ls olarak adlandırın.

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

List bileşeni hâlâ seçili durumdayken, Properties denetçisini ya da Component denetçisi panelini açın ve data satırına tıklayın. data satırının sağındaki büyüteç simgesine tıklayarak Values iletişim kutusunu açın. Add (+) düğmesine iki kez tıklayarak iki yeni değer ekleyin ve üstteki değer için catalog/catalog01.swf, catalog/catalog01.swf, 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.

280 DERS 9

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

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

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

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

Bu bileşenin örnek ismi catalog_ls’dir. Bu ActionScript kodunun sonuna, kullan’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.

ACTIONSCRIPT’İN TEMELLERİ 281

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 lesson09/complete ’daki lesson09/complete ’ klasöründe de bulunuyor). Yani bu dosyayı test ettiğinizdeki bu iki SWF dosyasını catalog klasöründen catalog.swf dosyasına yüklemesi gerekir. Dosyalar yüklenmiyorsa, catalog klasörünü açın ve SWF dosyalarının ve klasörün kendisinin) burada olduklarından ve doğru adlandırıldıklarından emin olun. Ayrıca üçüncü adımda değerleri Values iletişim kutusuna doğru bir şekilde eklediğinizden de emin olun.

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

Çözüm dosyasında PNG resimlerine giden yol, bu dersteki alıştırmalarda ayarlad

ayarlad

ığınız yoldan farklıdır. Yollar (path), çözüm dosyalarının dizin yapısıyla

çalışılacak şekilde oluşturulmuştur. Bu nedenle, tamamlanmış dosyalardan birini kopyalayıp kendi TechBookstore klasörünüze yapıştırırken, dizin referanslarını sizin dosya yapınızla eşleşecek şekilde değişişi tirmeyi unutmayın.

Haberler Sayfasını Oluşturmak

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

282 DERS 9

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.flaismiyle 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’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’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

ACTIONSCRIPT’İN TEMELLERİ 283

kazara herhangi bir sembol eklenmesini önlemek için bunları kilitleyin. Artık Stage’e ba’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.

284 DERS 9

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 adlandnews.fla olarak adlandnews.fla ırın) ve FLA dosyasını yayınlayın. SWF dosyası ana TechBookstore sitesine yüklenecektir.

ACTIONSCRIPT’İN TEMELLERİ 285

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.

286 DERS 9

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

Stage’deki TextArea bile’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 dehome_lv olarak dehome_lv ğ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 ’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’da bulabilirsiniz, yani giri’ ş

ACTIONSCRIPT’İN TEMELLERİ 287

sayfasının içeriğini sizin yapmanız gerekmiyor. Tech Bookstore sitesinin giriş sayfasına yazmak istediğiniz başka şeyler varsa, tabii ki bunları yazabilirsiniz. Ama tercihiniz bu yönde değilse, CD’deki ’deki ’ home.txt dosyasını kullanabilirsiniz. CD-ROM’da lesson09 klas’da lesson09 klas’ örünü bulun. home.txt dosyasını ve iki resmi (home01.jpg ve home02.jpg) sabit diskinizdeki TechBookstore klasörüne kopyalayın. Metin dosyasını açın ve HTML biçimlendirme kodlarını inceleyin.

İki resim dosyası, HTML ile biçimlendirilmiş imlendirilmiş imlendirilmi 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’HTML’HTMLden biraz farkl’den biraz farkl’ ı olarak, <li> etiketi bir çift <ol> (ordered list; sıralı liste) ya da <ul> (unordered list; sırasız liste) etiketinin arasında yer almaz. Flash’nda yer almaz. Flash’nda yer almaz. Flashtaki <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’Flash’Flashta 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’ıFlash’ıFlash n yerleşik CSS desteğiyle bir arada kullanarak biçimlendirdiğinizde son derece etkileyici sonuçlar elde edebilirsiniz.

288 DERS 9

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

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

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

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

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

Menüyü Canlandırmak

Bu uygulamada, her düğmeye tıklandığında Tech Bookstore sitesinde aşağıya doğru açılan menüleri canlandıracaksınız. Bunların işlevselliğini http://flash.TrainingFromTheSource.comadresindeki ö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

ACTIONSCRIPT’İN TEMELLERİ 289

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, 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

290 DERS 9

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’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’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’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)

ACTIONSCRIPT’İN TEMELLERİ 291

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 etrafı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şişi tirebilirsiniz. Bu durumda yapacağınız şey, yukarıdaki adımda tanımlanan üç değişişi keni bir nesneye yerleştirmektir. for.. in döngüsü kullanılarak, nesnedeki her bir öğe üzerinde döngüye girebilir ve bir kod bloğunu çalıştırabilirsiniz. Bu da gereken kod miktarını azaltmanızı, ayrıca kodu daha esnek hale getirmenizi sağlar.

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

//görünmez düğmethis.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; }};

292 DERS 9

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’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_mc.gotoAndPlay(“slideup”) olarak gösterilebilir. Bu, üzerine yerleştirildiği Timeline’a (yani Stage’e) ba’e) ba’ şvuruda bulunan bir düğme kodudur. Stage’den ’den ’ contactmenu_mc örneğine ve buna ait gotoAndPlay metoduna doğrudan başvuruda bulunabilirsiniz.

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

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

//products (ürün) menüsüthis.products_btn.onRollOver = function() { 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; }};

ACTIONSCRIPT’İN TEMELLERİ 293

//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.

294 DERS 9

Yukarıdaki kod, her biri bir menü öğesine ait üç ana kısımdan oluşuyor. products_btndüğ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 anlaif deyimlerinin anlaif şı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ş(geniş(geni letilen bir menü öğesi ve gizlenen menü öğelerinden oluşan bir dizi) alan bir fonksiyon oluşturmaktır. Bu mantığı bir fonksiyona dönüştürerek, kodu üç durumda da tekrar kullanabilirsiniz. Böylece, sadece fonksiyona aktarılan parametreleri ayarlamanız yeterli olur.

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

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

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

ACTIONSCRIPT’İN TEMELLERİ 295

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

296 DERS 9

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’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_mcdüğ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’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’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’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’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”);};

ACTIONSCRIPT’İN TEMELLERİ 297

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_’de bulunan contactmenu_’mc movie clip’ini, sonra da bunun içindeki menu3_mc movie clip’ini hedefliyorsunuz. menu3_mcmovie 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”. Men” üdeki bir düğmeye tıklarsanız, bunun sizi Tech Bookstore’da ba’da ba’ şka bir sayfaya götürmesi ve durması gerekir. Menüler doğru şekilde

298 DERS 9

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’da tamamlanm’ ış dosyayı bulun ve kendi oluşturduğunuz dosyayı, bu FLA dosyasıyla karşılaştırın.

Şu anda bu sayfaların içeriği yüklenmemektedir. Bu sorunu bir sonraki derste gidereceksiniz. Şimdilik Stage’in sağ tarafıtarafı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’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 ÖğrendiklerimizBu derste şunları öğrendiniz:

• ActionScript 2.0’ı öğrendiniz (Sayfa 242).

• Nesnelerin, metotların ve özelliklerin nasıl kullanıldığını öğrendiniz (Sayfa 242–245).

• Kesin tip belirleme özelliğinin değişkenlerde nasıl kullanıldığını öğrendiniz (Sayfa 245).

• ActionScript kodlarının yazılmasını hızlandırmak için kod ipuçlarını kullandınız (Sayfa 246–248).

• Fonksiyonları ve koşullu deyimleri kullandınız (Sayfa 248–250).

• Faaliyet alanları ve değişkenler hakkında bilgi edindiniz (Sayfa 250–252).

• ActionScript kodunuzda _root, _parent ve seviyeleri nasıl kullanacağınızı öğrendiniz(Sayfa 252–254).

• LoadVars nesnesini yoğun bir şekilde kullandınız (Sayfa 254–256).

• Reviews sayfasını oluşturdunuz (Sayfa 257–263).

• Kodunuza olaylar, olay işleyicileri ve izleyiciler eklediniz (Sayfa 264–267).

• Bir belgeye yüklenen metni biçimlendirmek için CSS’i kullandınız (Sayfa 268–270).

• Catalog, News ve Home sayfalarını oluşturdunuz (Sayfa 271–288).

• Tech Bookstore’daki men’daki men’ ülerin hareket etmesini sağlayacak kodu eklediniz (Sayfa 288–295).

• Tech Bookstore menülerinin çalışmasını sağlayacak ActionScript kodunu eklediniz (Sayfa 295–298).

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.

10Flash İçeriğini Yüklemek ve Optimize Etmek

İçeriğeriğeri in Tech Bookstore sitesine yüyüy klenmesi

300 DERS 10

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 ÖğreneceklerinizBu 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üYü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’Flash’Flashtan dışarıya veri göndereceğiz.

• YüYü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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 301

Yaklaşık Süre

Bu dersi yaklaşık 2 saatte tamamlayabilirsiniz.

Gerekli DosyalarOrtam Dosyaları:lesson10/assets/video1.swflesson10/assets/video2.swflesson10/assets/video3.swflesson10/assets/sectionText.txt

Başlangıç Dosyaları:lesson10/start/tour_start.flalesson10/start/bookstore13.flalesson10/start/map.fla

Tamamlanmış Dosyalar:lesson10/complete/bookstore14.flalesson10/complete/loader.flalesson10/complete/map.flalesson10/complete/techBookstore.flalesson10/complete/tour.fla

302 DERS 10

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ğdeğ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

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 303

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. http://cmart.design.ru), 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.

304 DERS 10

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şGirişGiri i atlama olayında dikkat etmeniz gereken en önemli şey, ziyaretçiye kontrol imkâkontrol imkâ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şn olan her durumda bant geniş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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 305

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.

306 DERS 10

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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 307

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ğliğli 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,

308 DERS 10

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şekilde iş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şzeltme (gamma-correction) iş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, karşı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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 309

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 btnContactadı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.

310 DERS 10

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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 311

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üklerfunction loadVideo(pathToFile:String,textToLoad:String):Void{ videoLoader.contentPath=””; videoLoader.contentPath=pathToFile; displaySection.htmlText=loadSectionText[textToLoad];}

312 DERS 10

İşe, fonksiyonun amacını tanımlayan bir açıklama yazmayla başlayacaksınız. Sonra, loadVideoadı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’deki Loader bile’ şen örneğinde mevcut bulunan içeriği temizlemek için kullanabileceğiniz bir yöntemdir. Stage’deki Loader bile’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 LoadVarsnesnesinden alır. loadSection[textToLoad] şeklindeki atama işlemi, köşeli parantezler yüzünden biraz farklı görünebilir. Köşeli parantezler Flash’eli parantezler Flash’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”yla sonra ilgilen”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ı ayarlabtnReviews.enabled=false;btnCompany.enabled=false;btnContact.enabled=false;

Burada da bir açıklamayla işe başlıyorsunuz. Düğmeler ve Button bileşenlerinin enabledadında bir özelliği vardır ve bu özellik true ya da false değerini alır. enabled özelliği falseolarak 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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 313

//varsayılan metni oluştururdisplaySection.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ştururvar 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’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ın etrafı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

314 DERS 10

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ıfıf ndan myLoadIt adında genel (generic) tipte bir nesne oluşturuyorsunuz. Object nesnesi, Flash’Flash’Flashta 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 ’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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 315

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şişi lemi yeni indirme işlemi yeni 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

316 DERS 10

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üçü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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 317

2. home katmanına bir Loader bileşeni örneği ekleyin. Bileşen örneğini 580 x 345olarak 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’da olu’ şturmuştunuz.

Bileşeni varsayıeni varsayıeni varsay lan boyutlarılan boyutlarılan boyutlar nda bırakabilir ve örneğin yeniden boyutlandırırır lması işişi lemini içerik yüklenirken yapması için Flash’a b’a b’ ırakabilirsiniz. Bileşeni elle boyutlandırmak genelde daha kolaydır, çünkü nkü nk bu şekilde içeriğin Stage’deki di’deki di’ ğer örneklere göre nereye yükleneceğini görebilirsiniz. Ayrırebilirsiniz. Ayrırebilirsiniz. Ayr ca scaleContent’in false ’in false ’olarak ayarlandığından emin olun. Eğ Eğ E er true olarak ayarlanırsa, içeriğiniz yeniden boyutlandırırır lır ve bu da içerikte bozulmalara sebep olabilir. Metinler ölçeklendikten sonra çok köok köok k tü görürü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’e ait URL’e ait URLdir.’dir.’

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).

318 DERS 10

• contentPath: YüYüY klenmesi gereken içeriğin adresini belirten URL. Bu alan, hem göreceli, hem de mutlak URL’hem de mutlak URL’hem de mutlak URLleri 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. catalog ismini verin. 10. catalogkareye 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’Timeline’Timelinedaki catalog katman’daki catalog katman’ ının 10. karesine tıklayın ve Loader bileşeninin bir örneğini Stage’Stage’Stagee sürükleyin. Bileşene catalog_ldr örnek ismini verin. Properties denetçisini genişletin ve contentPath parametresini catalog.swf olarak ve catalog.swf olarak ve catalog.swf scaleContent özelliğini false olarak ayarlayın. Bileşeni, Ders 9’da olu’da 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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 319

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’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 reviews.swf olarak ve reviews.swf 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 tour.swf olarak tour.swfayarlayın. Ardından scaleContent özelliğini false olarak ayarlayın. Bileşenin boyunu 720 x 360olarak 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’dan b’ üyük olan tüm kareleri silin.

320 DERS 10

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 ayarlaynews.swf olarak ayarlaynews.swf ın ve scaleContentparametresini 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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 321

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’de olu’ şturduğunuz formları kullanarak Flash’kullanarak Flash’kullanarak Flashtan 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’te, Flash’te, Flashtan 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’zeyde ActionScript gerekir. Flash’zeyde ActionScript gerekir. Flashtan 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’Flash’Flashtan ç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.

322 DERS 10

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ı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’Verileri toplayarak Flash’Verileri toplayarak Flashtan 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 ’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 mcFeedbackFormmovie 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 ’deki ’ örneği gizlemek için visible parametresini falseolarak 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 tiEmailTo örnek ismini verin.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 323

3. mcFeedbackForm movie clip Timeline’ında actions katmanının birinci karesinde Actions paneline aşağıdaki ActionScript kodunu ekleyin.

mcFeedbackForm Timeline’ı Timeline’ı Timeline nda actions katmannda actions katmannda ı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önderirbSend.onRelease = function() { var targetLoadVars:LoadVars = new LoadVars(); var myLoadVars:LoadVars = new LoadVars(); myLoadVars.emailFrom = tiEmail.text; myLoadVars.emailTo = tiEmailTo.text; myLoadVars.subject = tiSubject.text; myLoadVars.message = taMessage.text; myLoadVars.sendAndLoad (“http://www.flash-mx.com/ws/ 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ıktan sonra sunucu tarafı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ıtarafıtaraf ndaki script’e gönderilen tüm değişkenleri tutar.

LoadVars nesneleri oluşturulduktan sonra, kod, dört metin alanı (tiEmail, tiEmailTo, tiSubjectve taMessage) değerini myLoadVars değişkenine kopyalar. myLoadVars nesnesi bir URL’ nesnesi bir URL’ nesnesi bir URLe gönderildiğinde bu değişkenlerin hepsi dâhil edilir. Ardından değişkenleri işlemek için sunucu tarafıtarafıtaraf ndaki bir script kullanılabilir. Sunucu tarafıSunucu tarafıSunucu taraf ndaki script dediript dediript ğ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.

324 DERS 10

Flash, aşağıdaki kod satırıyla myLoadVars nesnesindeki değerleri sunucu tarafıerleri sunucu tarafıerleri sunucu taraf ndaki script’inize gönderir.

myLoadVars.sendAndLoad(“http://www.flash-mx.com/ws/submit_feedback.cfm”, targetLoadVars, “POST”);

LoadVars nesnesindeki değerler http://www.flash-mx.com/ws/submit_feedback.cfm adresine gönderilir. Sunucu tarafınderilir. Sunucu tarafı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’Flash’Flash a, verilerin sunucu tarafıa, verilerin sunucu tarafı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ın alanlar sunucu tarafın alanlar sunucu taraf ndaki script’e form ’e form ’değişkenleri olarak gönderilir. Form değişkenleri, HTTP başlığında gönderilen ve ziyaretçi tarafıtarafı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 kullanPOST yerine kullanPOST ılabilecek diğer bir metot seçeneği GET’tir. tir. tir GET metodu, deGET metodu, deGET ğerleri sunucu taraf

sunucu taraf

ısunucu tarafısunucu taraf ndaki script’lerinize sorgu dizesi ile birlikte URL değişişi kenleri olarak

gönderir. Sorgu dizesi (query string), yani adres çubuğundaki URL’in soru işişi aretinden sonraki kıaretinden sonraki kıaretinden sonraki k smı, kı, kı, k sa değişişi kenleri göndermek için uygundur. Örneğin http://www.TrainingFromTheSource.com/index.cfm?name=jdehaan URL’inde sorgu dizesi name=jdehaan’d’d’ ır.r.r

Girdiğiniz kod bloğunun son ActionScript kısmı, sadece test ortamında hata ayıklama için kullanılır. Veriler Flash’r. Veriler Flash’r. Veriler Flashtan sunucu tarafıtan sunucu tarafıtan sunucu taraf ndaki script’e gönderildiğinde, trace deyimi Output panelinde belirir. Bu da, siz test ortamında çalışırken Flash’ırken Flash’ı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ıBu kod, Flash, sunucu tarafıBu kod, Flash, sunucu taraf ndaki script’ten bir cevap aldığında tetiklenir. Bazen Flash bir cevap nda tetiklenir. Bazen Flash bir cevap ndabeklediğ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üekküekk r Ederiz” (thank you) sayfasına yönlendirirsiniz ve veriler gönderilmediği takdirde de kullanıcılara göstermek

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 325

ü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ımda e-posta adresinizi belirttiyseniz, gelen kutunuzda Flash tarafımda e-posta adresinizi belirttiyseniz, gelen kutunuzda Flash taraf ndan gönderilen bir e-posta mesajı görürsünüz.

EğEğE er back (geri) düğmeniz çalışmıyorsa, “thankyou” karesine gidin, onu se” karesine gidin, onu se” çin ve Actions panelini açın. Ders 8’de Script Assist’de Script Assist’ ’i kullanarak bir ActionScript kodu eklemişkodu eklemişkodu eklemi tiniz. Eğtiniz. Eğtiniz. E er Script Assist modundaysanız, onu kapatın ve 2. satırı this._parent.gotoAndStop(“form”) ile değişiş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, dosyayışıyorsa, 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

326 DERS 10

ö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önderirbSend.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(“http://www.flash-mx.com/ws/submit_survey.cfm”, targetLoadVars, “POST”); trace(“send”); targetLoadVars.onLoad = function() { trace(this.success); }; gotoAndStop(“thankyou”);};

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 327

Bu kod, geribildirim verilerini sunucu tarafıBu kod, geribildirim verilerini sunucu tarafıBu kod, geribildirim verilerini sunucu taraf ndaki script’e göndermek için LoadVarskullandığı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 selectedItemparametresini kullanır. labels ve data değerlerini Ders 8’de List bile’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’Flash’Flashta 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.

328 DERS 10

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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 329

Properties denetçisinde Parameters sekmesinde mode parametresini polled olarak ayarlaypolled olarak ayarlaypolled ı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’tiniz. Movie clip’tiniz. Movie clip lerinin bir progress olayı yoktur; dolayısıyla, bu Loader ıyla, bu Loader ı örneğini bir movie clip’movie clip’movie clip le birlikte kullanmak istediğinizde, eğer event (olay) modundaysa (sadece progress ve complete olaylarıyla ı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;};

330 DERS 10

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ıturuyorsunuz. Ancak bu kez bu olaylar ProgressBar tarafı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”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’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, ’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 ’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 ’deki ’ pbHome örneğine iki olay izleyici ekler. Şimdi, pbHomeProgressBar progress (ilerleme) olayını aldığında, pbListener’a haber verir; sonra da pbListener progress olay işleyicisindeki talimatları çalıştırır.

Flash tarafıFlash tarafı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’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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 331

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’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 sourceparametresini, 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ı ok sayfayı 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);

332 DERS 10

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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 333

ProgressBar bileşenleriniz çalışmıyorsa, bütün Loader bileşenlerinizin, ProgressBar bileşenlerinizin örnek isimlerini ve bunlarırnek isimlerini ve bunlarırnek isimlerini ve bunlar n ActionScript’teki ilgili referanslarıteki ilgili referansları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ıreferansları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.

334 DERS 10

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ıfı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

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 10piksel 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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 335

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’deki dolguyu se’ çin ve F8 tuşuna basarak bunu bir movie clip’e d’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’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’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 yazloading yazloading ı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

336 DERS 10

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ıTı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ıfıf , movie clip’e yüklenmekte olan dosyaların ilerlemesini ve durumunu almakta kullanılır.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 337

Yeni bir MovieClipLoader nesnesi örneği ve MovieClipLoader tarafı tarafı 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.loadMoviemetoduyla 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ıfı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üYü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’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.

338 DERS 10

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 ’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’bookstore14.fla’bookstore14.flayı 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.

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 339

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ı Bandwidth Profiler (Bant Genişliği Profilcisi), SWF dosyasının indirilme performansını Bandwidth Profilerbelirlemenizi 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şz bant genişz bant geni liği profilinden daha hızlı yükleniyor gibi görünebilir. Bir indirme işnebilir. Bir indirme iş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şılenmesiyle ilgili sorunlarla da karşı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ı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.

340 DERS 10

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’nden Test Movie’nden Test Movieyi 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 Stage’da Stage’ ’da Stage’da 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ıtarafı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ı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ıi tarafı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, ıyla, ısaniyede 131.2 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ü nkü 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“deneyimi“ ” büyüyü ük ölçüde etkiler ve Macromedia’de etkiler ve Macromedia’de etkiler ve Macromedianın söylediği gibi: “Deneyim Önemlidir.” nemlidir.” nemlidir. Kullanıcılar SWF dosyasının

FLASH İÇERİĞİNİ YÜKLEMEK VE OPTİMİZE ETMEK 341

yüklenmesi için uzun süre beklemek zorunda kalırlarsa, büyü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 ÖğrendiklerimizBu derste şunları öğrendiniz:

• Web sitelerinin nasıl optimize edildiğini öğrendik (Sayfa 302–305).

• Runtime bitmap caching (çalışma zamanında bitmap’leri ön belleğe alma) özelliğiyle oynatım performansını artırdık (Sayfa 305–307).

• Farklı platformları göz önüne aldık (Sayfa 307 –308).

• Bir Loader bileşen örneğine harici SWF dosyaları yükledik ve indirme işleminin ilerleyişini gösterdik (Sayfa 308–316).

• Tech Bookstore sitesindeki kalan sayfaların her biri için SWF dosyaları yükledik (Sayfa 316–321).

• LoadVars nesnesini kullanarak Flash’LoadVars nesnesini kullanarak Flash’LoadVars nesnesini kullanarak Flashtan dışarıya veri gönderdik (Sayfa 321–328).

• Siteye yüklenen içeriği görüntülemek için ProgressBar örnekleri ekledik (Sayfa 328–333).

• Bir SWF dosyasını yüklemek için MovieClipLoader sınıfıfıf nı kullandık (Sayfa 333–338).

• Tech Bookstore sitesini test ettik ve hatalarını ayıkladık (Sayfa 339–341).

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.

11 Flash Belgelerini Yayınlamak

TechBookstore sitesi bir HTML sayfasına gömülü durumda

344 DERS 11

Bu Derste ÖğreneceklerinizBu 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 DosyalarOrtam Dosyaları:lesson11/assets/tile.gif

Başlangıç Dosyaları:lesson11/start/techBookstore.flalesson11/start/loader.fla

Tamamlanmış Dosyalar:Lesson11/complete/TechBookstore/(TüLesson11/complete/TechBookstore/(TüLesson11/complete/TechBookstore/(T m Dosyalar)

FLASH BELGELERİNİ YAYINLAMAK 345

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.

346 DERS 11

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“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â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

FLASH BELGELERİNİ YAYINLAMAK 347

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.

348 DERS 11

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.

FLASH BELGELERİNİ YAYINLAMAK 349

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’da sonu’ çları inceleyerek SWF dosyasını test etmeyi deneyebilirsiniz. SWF dosyanızda bir öğeyi göremiyorsanız, ayarları değişişi tirmenizin gerektiğini anlarsınız.

Seçtiğiniz Player tarafıiniz Player tarafı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?

350 DERS 11

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 (şnemli bilgilerinizi (ş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’inde, Flash’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 belirlediüyle belirlediü ğiniz kalite değerine göre sıkıştırır. Sürgüyle ayarladüyle ayarladü ığınız yüksek bir değer daha iyi bir resim kalitesi elde etmenizi sağlar, çünkü nkü 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üçün boyu daha küçü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.ıyorsunuz.ı

Override sound settings (Ses ayarlarını dikkate alma) onay kutusunu işaretleyin. Bu durumda, geliştirme ortamında her ses için küin kü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üçün boyunun küçü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ıysanı ız, bunu yapmak için muhtemelen çok iyi bir sebebiniz olmalı. Bu durumda, bu ayarları dikkate alırsınız.

FLASH BELGELERİNİ YAYINLAMAK 351

Bir dosyayı tek adımda yayınlamak isterseniz, tek yapmanız gereken şey, Filemenüsünden Publish’i seçmektir. Bu işmektir. Bu işmektir. Bu i lem, Publish Settings iletişlem, Publish Settings iletişlem, Publish Settings ileti 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’bir domain’bir domainden ya da bir ’den 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.

352 DERS 11

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.

FLASH BELGELERİNİ YAYINLAMAK 353

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 http://www.macromedia.com/go/getFlash/ 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.

354 DERS 11

• 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’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ıeffaf olarak ayarlar ve etrafı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ırmaz, ama etrafı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.

FLASH BELGELERİNİ YAYINLAMAK 355

• 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’ıin, Flash’ı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’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.

356 DERS 11

<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” nda” nda 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şişi tirmek kabul edilebilir, ama şu zamanda bile CSS kullanmıyorsanız, biraz demode kalmışsınız demektir. CSS’yi ’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.

FLASH BELGELERİNİ YAYINLAMAK 357

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

358 DERS 11

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şSettings iletişSettings ileti im kutusuna geri dönüp Formats sekmesindeki HTML seçeneğinin işinin iş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şişi mesini önlemiş nlemiş 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.

FLASH BELGELERİNİ YAYINLAMAK 359

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 video1.swfloader.swf video2.swftile.gif video3.swfTechBookstore.swf mmpresslogo.jpghome.swf home01.jpgcatalog.swf home02.jpgreviews.swf styles.csstour.swf home.txtnews.swf news.txtmap.swf sectionText.txt

Diğer dosyaların yanında, catalog ve reviews klasörlerini de bu klasörün içine taşımanız gerekir.

360 DERS 11

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şn. Bu iş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 dosyaların dosyalar n içinde yer alacağı ayrı ayrı ayr bir klasör yaratmak, sitenizdeki mevcut dosyalarısitenizdeki mevcut dosyalarısitenizdeki mevcut dosyalar n (bir index dosyası gibi) üzerine yazmadığınızdan emin olmak için kullanabileceğiniz basit bir yöiniz basit bir yö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 www.macromedia.com/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.

FLASH BELGELERİNİ YAYINLAMAK 361

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 (www.TrainingFromTheSource.com/forum) 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 (www.TrainingFromTheSource.com) 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!

362 DERS 11

Bu Derste ÖğrendiklerimizBu derste şunları öğrendiniz:

• Arama motorunda görünmesi için bir dosyaya metaveri ekledik (Sayfa 345–346).

• Yeni bir yayınlama profili oluşturduk (Sayfa 347).

• Yayınlama ayarlarını değiştirdik (Sayfa 348–352).

• Flash Player sürümünü tespit ettik (Sayfa 352–355).

• Bir SWF dosyasını Bir HTML sayfasının içine gömdük (Sayfa 355–358).

• Tech Bookstore sitesini online hale getirdik (Sayfa 359–361).

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: www.macromedia.com/exchange/em_download.

Flash 8 Basic’e eklenti y’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.

364 EK AEK AEK

EXE dosyalarıyla yüklenen eklentilerle de karşıklenen eklentilerle de karşıklenen eklentilerle de kar laşabilirsiniz. Bu eklentilerde normal bir yükleme işkleme iş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şerek eriş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.

EKLENTİLERİ YÜKLEMEK 365

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.

366 EK AEK AEK

Eklenti bir FLA ya da SWF dosyası olarak geldiyse, bileşenleri elle de yükleyebilirsiniz. Windows tabanlı bir sistemde şu konuma bakarak kullanıcı konfigürasyon klasörünü bulun. C:\Documents and Settings\<KULLANICIADINIZ>\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Extensions (ya da Mac’te <kullanıcıadınız>\Library\Application Support\Macromedia\Flash 8\en\Configuration). Documents and Settings klasörünüzün konumunu ya da varsayılan ayarlarınızı değiştirdiyseniz bu yol biraz farklı olacaktır.

Az önce listelenen bütün klasörleri görmek için, klasör seçeneklerini Windows Gezgini’nin (Windows Explorer) gizli dosyaları görüntüleyeceği şekilde ayarlamanız gerekebilir. Bunun için Windows Gezgini’nin Araçlar (Tools) menüsünden Klasör Seçenekleri’ni (Folder Options) seçin. Açılan Klasör Seçenekleri (Folder Options) iletişiletişileti im kutusunda Görünüm (View) sekmesine tıklayın ve Gelişn ve Gelişn ve Geli miş miş mi Ayarlar (Advanced Settings) bölmesinde yer alan Gizli dosya ve klasörler (Hidden files and folders) klasörünün içindeki Gizli dosya ve klasörleri göster (Show hidden files and folders) seçeneğinin işinin işinin i aretli olduğundan emin olun.

Aralarında Behaviors, Components, Effects, Libraries, Panel Sets ve Templates’in de yer aldığı birçok klasör Configuration klasöründe yer alır. Bileşenleri doğrudan kullanıcı klasörünün içine yerleştirerek yüklediğinizde bunları Extension Manager’la yönetemezsiniz.

Yeni bileşenleri ya da davranışları yükledikten sonra Components panelinde Reload komutunu seçmeniz ya da Flash’ı yeniden başlatmanız gerekir. Yeni bileşenlere Components panelinden erişComponents panelinden erişComponents panelinden eri ebilirsiniz.

Eklentiler Components paneli, Common Library pencereleri, Commands menüsü ya da Behaviors panelinde görünebilir. Eklentileri bir EXE dosyası yerine Extension Manager’ı kullanarak yükleyebilirsiniz ya da bazı eklentileri belirli bir dizine elle yerleştirmeniz gerekebilir. Eğer bir eklentiyi MXP dosyası kullanarak ve Extension Manager aracılığıyla yüklediyseniz, gerektiğinde eklentiyi iptal etmek için kullanabileceğiniz bir On/Off onay kutusu olduğunu göreceksiniz. Eklentiyi silmek için kullanabileceğiniz bir de File > Remove Extension seçeneği mevcuttur.

Flash’a Komutlar ve Davranışlar Eklemek

Komutlar belirli işlemleri tekrar tekrar uygulamak için kullanılır. Flash Exchange sitesinden yeni komutlar indirebilir ya da History panelinde belirli adımları kaydederek kendi komutlarınızı kendiniz oluşturabilirsiniz. Komutlar ve davranışlar da Extension Manager kullanılarak yüklenebilir.

Aşağıdaki adımları kullanarak kendi özel komutlarınızı da kolayca oluşturabilirsiniz.

EKLENTİLERİ YÜKLEMEK 367

1. History panelini açın.

Window > Other Panels > History komutunu seçerek History (Geçmiş) panelini açın.

2. Flash’ta sık kullanılan işlemlerden birini yapın.

Sık kullanılan işlemlere örnek olarak bir actions katmanı oluşturmayı gösterebiliriz. History paneline kaydedilen ve daha sonra tekrarlamak isteyebileceğiniz bir işlem yapın.

3. History panelinde komut olarak kaydedilmesi gereken adımları seçin.

Bunlar, komutu çalıştırdığınızda yeniden uygulanacak olan adımlardır.

4. History panelinde sağ tıklayın (ya da Mac’te Control tuşunu basılı tutarak tıklayın) ve açılan bağlam menüsünden Save As Command (Komut Olarak Kaydet) komutunu seçin.

Bir iletişim kutusu açılacak ve sizden bu komut için bir isim girmeniz istenecektir.

5. Komuta bir isim verin.

Bir isim verdikten sonra komutu çalıştırabilirsiniz. Tek yapmanız gereken, Commands menüsünden ilgili komutun adını ya da Commands > Run Command komutunu seçmektir. İkinci seçeneği kullandığınızda bir Open (Aç) iletişim kutusu açılacaktır. Bu iletişim kutusundan sabit diskinizde yer alan bir komutu seçmeniz gerekir. Komutlar Flash JavaScript dosyaları olarak kaydedilir ve JSFL uzantısını alır. Eğer History panelini kullanarak kendi özel komutlarınızı oluşturuyorsanız, JSFL dosyaları muhtemelen şu dizine kaydedilecektir: C:\Documents and Settings\<KULLANICIADINIZ>\ Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Commands (ya da Mac’te <kullanıcıadınız>\Library\Application Support\Macromedia\Flash 8\en\ Configuration\Commands).

Davranışlar (behaviors), SWF dosyalarınızı, Flash tasarım ortamında ilave ActionScript kodları yazmaya gerek kalmadan çok daha etkileşimli bir hale getirmenizi sağlar. Kitaptaki çeşitli uygulamalarda çok sayıda davranış kullandınız. Bir davranışı Extension Manager’ı kullanarak yükleyebilir ya da doğrudan sabit diskteki bir klasöre yerleştirebilirsiniz. Davranışları yerleştirmek için şu klasörü kullanın: C:\Documents and Settings\<KULLANICIADINIZ>\Local Settings\Application Data\Macromedia\Flash 8\en\Configuration\Behaviors (ya da Mac’te <kullanıcıadınız>\Library\Application Support\Macromedia\Flash 8\Configuration\). Bir davranışı Behaviors klasörüne yerleştirdikten sonra Flash’ı yeniden başlatmanız ya da Behaviors panelinin seçenek menüsünden Reload komutunu seçmeniz gerekir. Bir davranışı silmek isterseniz, o davranışa ait XML dosyasını yukarıda belirtilen kullanıcı klasöründen silmeniz gerekir.

368 EK AEK AEK

Eklenti Bulabileceğiniz Yerler

Flash eklentilerini bulabileceğiniz en iyi yerlerden biri (en iyisi olmasa da) Macromedia Exchange sitesidir (www.macromedia.com/go/flash_exchange). Exchange sitesine erişmek gayet basittir. Bu siteye Help > Flash Exchange komutunu seçerek ya da giriş sayfasındaki Macromedia Flash Exchange linkine tıklayarak Flash’ıklayarak Flash’ıklayarak Flash n içinden erişebilirsiniz.

Eklentiler (bileşenler, kod parçaları ya da plug-in’ler de dâhil) Macromedia’nın kendisi ) Macromedia’nın kendisi ) Macromediatarafından ve Flash kullanıcı grubunun üyeleri tarafından hazırlanır. Birçok eklenti ücretsizdir, ama bazıları için belirli bir ücret talep edilir. Bazı eklentilerin ya da bileşenlerin ücretini, onları indirmeden önce ödemeniz gerekir. Bu, bazen belirli düzeyde bir müşteri desteğiyle birlikte daha kaliteli bir bileşen ya da eklenti edinmek anlamına gelir. Bazı eklentileri kişisel ya da ticari Web sitelerinden, blog’lardan, hatta forumlardan edinebilirsiniz.

Macromedia, Flash 8 ve önceki sürümlerin plug-in’leri şeklinde üçüncü parti eklentiler oluşturan firmaların bir listesini yayınlamıştır. www.macromedia.com/software/flash/extensions adresinde plug-in üreten seçkin firmaların bir listesini bulabilirsiniz. Bu eklentilerin arasında metin efektleri, grafikler ve resim efektleri oluşturan çeşitli plug-in’ler yer almaktadır. Hatta iki boyutlu çizimleri ve metinleri üç boyutlu animasyonlara dönüştüren bir eklenti bile bulunmaktadır.

Üçüncü parti araçlar ve eklentileri bulabileceğiniz yerler için Ek B’de verilen ayrıntılı listeye bakabilirsiniz.

Flash’ta Commands > Get More Commands komutunu seçerek Flash Exchange sitesinde başka Flash’ta Commands > Get More Commands komutunu seçerek Flash Exchange sitesinde başka Flashkomutlar da bulabilirsiniz.

KaynaklarBu kitap yazılırken Macromedia Flash’la ilgili kaynakların çoğu Flash MX 2004’e özgüydü. Bununla birlikte, Flash kullanıcılarının oluşturduğu topluluk yeni sürümleri takip etme konusunda çok hızlı olduğu için, ek bölümündeki listede verilen kaynakların en kısa sürede Macromedia Flash 8’i de içerecek şekilde güncelleneceğinden şüpheniz olmasın.

Online kaynaklar, Flash ile ilgili sorularınıza ve gereksinimlerinize yanıt verme konusunda son derece kapsamlı ve faydalıdır. Forumlar, e-posta listeleri, blog’lar (“web günlükleri”) ve eğitim uygulamalarının yer aldığı Web siteleri, Flash kullanıcıları için son derece önemlidir. Son yıllarda Flash ile ilgili blog’ları her yerde görüyoruz. Bu Web sayfaları, Flash camiasının başarılı üyelerinin deneyimlerini ve bilgilerini diğer kullanıcılarla günlük halinde paylaşmalarını sağlar. Flash blog’larını takip etmek, sizinle aynı yoldan giden başka kişilerin çalışmaları hakkında bilgi edinmek ve her gün yeni bir şeyler öğrenmek için harika bir yoldur. Bunların çoğu, yapılan her giriş hakkında yorum yapmanıza bile imkân sağlar.

Macromedia.com

Macromedia.com’da pek çok mükemmel kaynak keşfedilmeyi bekliyor. Aşağıda, kitapla çalışırken ve hatta kitabı bitirdikten sonra bile yararlanabileceğiniz bazı faydalı linkler verilmiştir. Download Software: www.macromedia.com/downloads

Bu adresten yazılımların deneme sürümlerini indirebilir ve satın alabilirsiniz.

Developer Center for Flash: www.macromedia.com/devnet/flash/

Flash Developer Center, pek çok faydalı makale ve kaynak bulacaksınız. Çeşitli konularda yazılmış makalelerden yardımcı kılavuzlara ve örnek uygulamalara kadar, buradaki kaynakları kolay kolay tüketemeyeceksiniz.

B

370 EK BEK BEK

Tech Notes (Flash): www.macromedia.com/support/flash/technotes.html

Tech Notes, yazılımı kullanırken sorunla karşılaşan ya da Flash’an ya da Flash’an ya da Flash la ilgili ipuçları ve hileler arayanlar için harika bir kaynaktır. Tech Notes sayfasını dev bir FAQ (Sık Sorulan Sorular) bölümü olarak düşünebilirsiniz. Flash’nebilirsiniz. Flash’nebilirsiniz. Flash la ilgili sorunlarız varsa, buraya girerek destek alabilirsiniz.

Macromedia Exchange: www.macromedia.com/cfusion/exchange/index.cfm

Macromedia Exchange sayfasına girerek kendi bileşenlerinizi ya da eklentilerinizi yükleyebilir ya da buradaki araçları indirebilirsiniz. Bu araçların çoğu ücretsizdir, ancak bazıları için ücret ödemeniz gerekmektedir.

Third-Party Extensions: www.macromedia.com/software/flash/extensions/

Bu, Macromedia’Bu, Macromedia’Bu, Macromedianın en yeni üçüncü parti eklentilerinin tanıtıldığı bir listedir. Bu sayfa, yükleyerek denemek veya satın almak isteyebileceğiniz çeşitli eklentilere ait linkleri içermektedir. Macromedia, Flash’Macromedia, Flash’Macromedia, Flashtan daha çok faydalanmanızda yardımcı olan kullanışlı eklentiler geliştiren şirketlerle işbirliği yapmaktadır.

Wish List: www.macromedia.com/software/flash/contact/wishlist/

Wish List’e (’e (’ İstek Listesi) girerek, bulduğunuz hataları bildirebilir ya da Flash’bildirebilir ya da Flash’bildirebilir ya da Flash a eklenmesini çok istediğiniz özellikleri göndererek belirtebilirsiniz. Yazılımla ilgili önemli olduğunu düşündüğünüz fikirleriniz (ya da bildirmek istediğiniz bir hata) varsa bu formu doldurun. Form incelenmek üzere Flash ekibine gönderilecektir.

User Groups: www.macromedia.com/cfusion/usergroups/

User Groups yani kullanıcı grupları, sizi Macromedia ürünleriyle içerik geliştiren diğer insanlarla buluşturan harika bir araçtır. Yaşadığınız bölgede bir grup bulun ya da kendi grubunuzu oluşturun.

MX News Aggregator (MSNA): www.markme.com/mxna

Macromedia ürünleriyle ilgili blog’ları içeren MX News Aggregator (MX Haberleri Toplayıcısı). Kapsamlı blog zinciri için işe buradan başlayın ve Macromedia ile ilgili her şey hakkında en yeni haberleri öğrenin.

Uygulama ve Kaynak SiteleriPek çok uygulama ve kaynak sitesi vardır, ama aradığınızı bulabilmek için biraz araştırma yapmanız gerekir. Karşınıza Flash camiasına katılmak için pek çok fıok fıok f rsat çıkacak. İnternet’te araştırma yaparak size faydalı olabilecek siteleri bulabilirsiniz. Flash’ı öğolabilecek siteleri bulabilirsiniz. Flash’ı öğolabilecek siteleri bulabilirsiniz. Flash renme sürecinizde size yardımcı olmaya istekli pek çok dost insan olduğunu göreceksiniz. Bu sitelerin pek çoğunda forum bölümleri yer alır ve konuyla ilgili bir topluluk da oluşmuş durumdadır.

KAYNAKLAR 371

Flash MX: www.flash-mx.com

Bu Web sitesinde, Flash tabanlı eğitim uygulamalarına, haberlere, kitap ve yazılım incelemelerine yer veriliyor.

Macromedia Developer Center: www.macromedia.com/devnet

DevNet olarak da bilinen Developer Center (Geliştirme Merkezi), Macromedia ürün serisindeki tüm ürünler için kaynaklar sunuyor. Ürünlerin her biri için, ayrı bir bölümde, o yazılımı kullanarak geliştirme için kaynaklar yer alıyor.

Informit Network: www.informit.com

Web tasarımcılarına ve geliştiricilerine yönelik olarak hazırlanmış büyük bir kaynak sitesidir. Bu sitede Flash’Bu sitede Flash’Bu sitede Flash a ayrılmış bir bölüm yer alıyor.

ActionScript.com: www.actionscript.com

Bir Flash başvuru kaynağı ve online topluluk. Bu site, sürekli olarak gelişen bir ActionScript başvuru kaynağı sunuyor; buradaki yorum sistemini kullanarak siz de bu siteye katkıda bulunabilirsiniz. ActionScript Reference, resmi olmayan bir Macromedia LiveDocs sistemi gibidir.

ActionScript.org: www.actionscript.org

Kapsamlı bir başvuru ve eğitim sitesi.

Studiowhiz: www.studiowhiz.com

Studiowhiz sitesinde, Web tasarım ve geliştirme çalışmalarıyla ilgili her konuda eğitim uygulamaları, incelemeler ve bir forum yer alıyor. Bu Web sitesi, Macromedia Flash ile ilgili pek çok bilgi içeriyor.

UltraShock: www.ultrashock.com

Flash programının öğrenilmesi için faydalı kaynaklar sunan bir online topluluk.

Flash Zone: www.flzone.net

Macromedia Flash ile ilgili kaynaklar ve bilgiler. Bu sitede, eğitim uygulamaları, eklentiler ve haberler yer alıyor.

Tip of the Day: www.flash2004.com/tipoday

Çok sayıda online Macromedia kullanıcısı tarafıtarafıtaraf ndan hazırlanan ve her gün Flash (ya da Studio MX) ile ilgili ipuçları veren bir site.

Flash Enabled: www.flashenabled.com

Taşınabilir aygıtlar için Flash içerikleri oluşturulması konusunda bilgiler içeriyor.

372 EK BEK BEK

SwiftDev: www.swiftdev.com

Swift ile çalışan kullanıcılar için kaynaklar ve online topluluk.

Person 13: www.person13.com

Joey Lott tarafıJoey Lott tarafıJoey Lott taraf ndan, özellikle Flash Remoting ve ActionScript 2.0 konularında yazılmış olan makaleleri ve bilgileri içeriyor.

Lionbich Studios: http://www.lionbichstudios.com/flash_tutorials_01.htm

Macromedia Studio paketiyle ilgili eğitim uygulamaları içeriyor. Bunlara Flash konusundaki basit ve ileri seviyede eğitim uygulamaları da dâhil.

FullAsAGoog: www.fullasagoog.com

Flash blog’ları içeren mükemmel bir site.

MX Developers Journal: www.sys-con.com/mx

MX ürün ailesiyle ilgili bilgileri içeren bir dergi.

Forumlar

İnternet’te pek çok forumla karşılaşıyoruz. Flash forumları pek çok dilde ve boyda sunuluyor. Trafiğin çok yoğun olduğu forumlar da, fazla insanın katılmadığı küçük forumlar da mevcut. Aradıklarınızı muhtemelen bu forumlarda bulacaksınız.

Flash MX 2004 Forums: www.flashmx2004.com/forums

Bu forumlar, özellikle Macromedia Flash ile yapılan çalışmalarla ilgili.

Were Here Forums: www.were-here.com

Flash tasarımcılarına ve geliştiricilerine yönelik olarak hazırlanan, çok sayıda kişinin katıldığı hareketli bir forum.

Macromedia Web Forums (Flash): http://webforums.macromedia.com/flash/

Resmi Macromedia Web forumları. Haber grubu formatında da sunuluyor (news://forums.macromedia.com)

Flash Move: www.flashmove.com/board/index.php

Flash için bir online topluluk.

FlashKit: www.flashkit.com

En büyük ve en eski forumlardan biri. Muhtemelen en hareketli forum olduğunu da söyleyebiliriz.

KAYNAKLAR 373

Flash MX Files: www.flashmxfiles.com/phpBB2/

Flash ile ilgili pek çok konuyu içeren ve trafiği de bir hayli yoğun olan bir forum.

E-posta Listeleri

Forumlara katılmayı tercih etmiyorsanız, belki e-posta tabanlı listelere katılmak ilginizi çekebilir. Bu e-posta listelerinin trafiği yoğun, orta ya da az olabilir. Katılabileceğiniz pek çok e-posta listesi vardır. Şansınız varsa bunların en iyileriyle karşılaşabilirsiniz. En çok kullanılan e-posta listelerinden bazılarını aşağıda veriyorum. Tabii bunların dışında daha pek çok e-posta listesi var.

Flashcoders: http://chattyfig.figleaf.com/mailman/listinfo/flashcoders

ActionScript ile kod yazmanın inceliklerini gösteren ileri seviyede bir liste. Burada ActionScript ile ilgili olarak sadece orta ve ileri seviyedeki konuları bulabilirsiniz. Bu listenin trafiği bir hayli yoğun.

Flash Newbie: http://chattyfig.figleaf.com/mailman/listinfo/flashnewbie

Flashcoders’ı hazırlayan yardımsever insanlar tarafından, Flash kullanmaya yeni başlayanlara yönelik çalışan bir liste.

Flash Lounge: http://chattyfig.figleaf.com /mailman/listinfo/flashlounge

Flashcoders’ı hazırlayan insanlar tarafından çalıştırılan harika bir liste.

Flasher: www.chinwag.com/flasher

Genel Flash konuları hakkında tartışmalar içeriyor.

DevMX: www.devmx.com/mailing_list.cfm

Dinamik Flash içerikleri konulu bir e-posta listesi.

Eklentiler ve Fontlar

Üçüncü parti eklentilerin arasında, bileşenler, plug-in’ler, davranışlar ve komutlar da yer alır. Aşağıdaki Web siteleri ücretsiz eklentiler içeriyor. Macromedia Web sitesinde sunulan eklentiler için Macromedia linklerinin yer aldığı kısma bakın. Bu kitap yazılırken Flash’ın genişletilebilme özelliğinden faydalanılmasını sağlayan pek fazla online araç yoktu. Şu anda erişebileceğiniz en yeni linkler için www.TrainingFromTheSource.com/resources adresine bakabilirsiniz.

Bu sitelerde bulacağınız eklentilerin Flash 8’deki bile’deki bile’ şenlerle uyumlu olmayabileceğini unutmayın. Eğn. Eğn. E er indirdiğiniz bileşenler ActionScript 1.0 kullanılarak oluşturulmuşsa (Flash MX için), bunlar Flash ile hazırladığınız sitelerde kullandığınız ActionScript kodlarıyla ya da bileşenlerle doğru şekilde çalışmayabilir.

374 EK BEK BEK

Flash Component.com: www.flashcomponent.com

Flash bileşenleri için harika bir değiş tokuş sitesi. Buradaki bileşenler ücretsiz ve her biri için yorumunuzu yazabilirsiniz ya da mevcut yorumları okuyabilirsiniz. Bu kitap yazıldığı sırada, burada sunulan içerik sadece Flash MX ve Flash MX 2004’e yönelikti.

Flash Components.net: www.flashcomponents.net

Bu siteden ücretsiz bileşenler indirebilirsiniz. Bileşenlerin önizlemesini görebilir ve sitede yer alan eğitim uygulamalarını kullanarak, bunların Flash’n Flash’n Flashta nasıl kullanıldığını ve bileşenlerin nasıl oluşturulduğunu öğrenebilirsiniz. Bu kitap yazıldığı sırada, burada sunulan içerik sadece Flash MX 2004’e yönelikti.

Ghostwire component set: www.ghostwire.com

Flash ile birlikte gelen varsayılan bileşen grubuna alternatif oluşturan mükemmel sürüm 1 bileşenleri. Boyları küçük ve son derece faydalı olan bu bileşenler şu anda Flash MX ve Flash MX 2004’le uyumlu ve Flash 8’de de kullan’de de kullan’ ılabilecek.

Flash DB Components: www.flash-db.com/Components

İndirilebilen bileşen kütüphaneleri.

Flash Components.com: www.flashcomponents.com

Abone olunarak kullanılabilen bir servis. Belirli bir aylık ücret karşılığında bu siteden bileşen indirebilirsiniz.

Miniml: www.miniml.com

Piksel fontları hakkında iyi bir geçmişe sahip, saygı gören bir kaynak

Fonts for Flash: www.fontsforflash.com

Bu kaynakta pek çok ilginç ve benzersiz piksel fontunu bulabilirsiniz.

Üçüncü Parti Araçlar ve Bunların Flash İle Bütünleştirilmesi

Üçüncü parti araçlar, üç boyutlu öğeler ya da videolar gibi özel içerikleri bütünleştirmek için farklı yolların bulunmasında gerçekten çok önemlidir. Bunların deneme sürümlerini indirerek inceleyebilirsiniz. Bu üçüncü parti araçlar, Flash ile bütünleştirilecekleri göz önünde bulundurularak hazırlanmıştır. Ayrıca, bazen neye ihtiyaç duyduğunuza bağlı olarak sunucu tarafıtarafıtaraf ndaki yazılımların bütünleştirilmesi gerekir. Aşağıdaki adresler arasında, uygulama sunucusu yazılımları için de bazı iyi kaynaklar yer alıyor.

KAYNAKLAR 375

Toon Boom Studio: www.toonboom.com

Genellikle animatörler tarafırler tarafırler taraf ndan kullanılan, eserlerin doğrudan Flash’rudan Flash’rudan Flash a aktarılmasını sağlayan profesyonel bir animasyon ve çizim aracı.

Swift 3D: www.swift3d.com ya da www.erain.com

Flash’Flash’Flash a aktarılabilen içeriklerin oluşturulmasında kullanılan bağımsız bir üç boyut programı. 3D Studio Max’ten SWF dosyaları kaydetmek için bir ihraç aracını da kullanabilirsiniz.

Sorenson Squeeze: www.sorenson.com

Flash’Flash’Flash a aktarılabilen ortamların sıkıştırılması için kullanılan bir yazılım. Çıktıları video, SWF dosyası ya da FLV dosyası gibi formatlarda alabilir, sonra da bunları Flash uygulamalarınızda kullanabilirsiniz.

Wildform Flix: www.wildform.com

Flix, videolarınızı sıkıştırarak bunların Flash’n Flash’n Flash a aktarılabilmesini sağlar. Squeeze gibi Flix de, SWF ve FLV de dâhil pek çok farklı türde video dosyalarının oluşturulmasında kullanılabilir. Bu yazılımın birkaç sürümü mevcuttur. Wildform, Flash ile birlikte kullanılabilen başka araçlar da sunar.

SWiSH: www.swishzone.com

Flash’Flash’Flashta bir FLA dosyası oluşturmanıza gerek kalmadan kolayca animasyonlar ve daha pek çok şey hazırlamanıza imkân sağlar. Bu Web sitesinde pek çok ilginç efekt bulabilirsiniz.

ActionScript Viewer (ASV): www.buraks.com/asv

Eğer daha önce bir FLA dosyasını kaybettiyseniz, bu yazılımın inanılmaz derecede faydalı olduğunu göreceksiniz. ASV, bir Flash belgesinin içini ve bunun çalıştırılması için kullanılan kodu görüntülemenize imkân sağlar. Ayrıca, örneklerin Timeline’daki konumlar’daki konumlar’ ını da görebilir ve SWF dosyasının içindeki grafikleri alabilirsiniz. Bu yazılım FLA dosyasını yeniden oluşturmaz (çünkü bu mümkün değildir). (Editörün Notu: Üstelik bir Tüstelik bir Tüstelik bir T rk sitesidir.)

Flash Jester: www.flashjester.com

Flash’ıFlash’ıFlash n becerilerini geliştirmek için kullanılan bir araç.

SWF Studio: www.northcode.com

Flash Projector dosyalarının kapasitelerinin genişletilmesi için kullanılan bir araç.

Ming: http://ming.sourceforge.net/

SWF dosyalarının oluşturulması için kullanılan bir C kütüphanesidir. Ayrıca Python, C++, PHP ve daha başka programlar için çeşitli sarmalayıcılar içerir.

376 EK BEK BEK

Flash Remoting: www.macromedia.com/software/flashremoting

Flash Remoting MX’le ilgili resmi site. Sitenin bu bölümünde Flash MX 2004’e yükleyebileceğiniz Flash Remoting bileşenlerini bulabilirsiniz. Flash Remoting, ColdFusion MX (sunucuyla birlikte gelir) . NET ve Java için destek sağlar. NET ve JAVA destekli Flash Remoting ücretsiz değildir.

AMFPHP: www.amfphp.org

PHP ile Flash Remoting için hazırlanan resmi site. Bu, Macromedia tarafırlanan resmi site. Bu, Macromedia tarafırlanan resmi site. Bu, Macromedia taraf ndan desteklenmeyen bir üçüncü parti araçtır ve aynı zamanda ücretsizdir.

Flash Communication Server: www.macromedia.com/software/flashcom/

Macromedia sitesinde Flashcom sunucusu için hazırlanan resmi bölüm.

ColdFusion MX 7: www.macromedia.com/software/coldfusion/

ColdFusion MX’in resmi sitesi: ColdFusion, Flash’in resmi sitesi: ColdFusion, Flash’in resmi sitesi: ColdFusion, Flash la birlikte uyumlu olarak çalışan bir uygulama sunucusudur. Form bilgilerinizi gönderdiğiniz sunucu script’i, ColdFusion’ıi, ColdFusion’ıi, ColdFusion n işaretleme dili olan CFML kullanılarak yazılmıştır.

Konuyla İlgili Macromedia Kitapları

Flash 8 öğrenmeye devam ederken ilginizi çekebilecek diğer Macromedia Press kitapları. Bu kitaplardan Medyasoft tarafıkitaplardan Medyasoft tarafıkitaplardan Medyasoft taraf ndan Tündan Tündan T rkçe’ye kazandırılanları öğrenmek ve bilgi almak için, www.medyasoft.com.tr/urunler/kitaplar/ adresini ziyaret edebilirsiniz.

• ActionScript for Macromedia Flash 8: Training from the Source Yazan: Francis Cheng; Jen deHaan; Robert L. Dixon; ve Shimul Rahim (ISBN 0-321-33619-4)• Developing Extensions for Macromedia Flash 8 Yazan: Barbara Snyder (ISBN 0-321-39416-X)• Learning Actionscript 2.0 for Macromedia Flash 8, Yazan: Jen deHaan ve Peter deHaan (ISBN 0-321-39415-1)• Macromedia Flash 8: A Tutorial Guide

Yazan: Jan Armstrong ve Jen deHaan (ISBN 0-321-39414-3)• Macromedia Flash MX 2004 ActionScript: KaynağıMacromedia Flash MX 2004 ActionScript: KaynağıMacromedia Flash MX 2004 ActionScript: Kayna ndan Eğndan Eğndan E itim Yazan: Derek Franklin ve Jobe Makar (ISBN 0-321-21343-2)• Macromedia Flash MX Professional 2004 Application Development: Training from the Source Yazan: Jeanette Stallons (ISBN 0-321-23834-6)• Object-Oriented Programming with ActionScript 2

Yazan: James Talbot (ISBN 0-735-71380-4)• Using ActionScript Components with Macromedia Flash 8

Yazan: Bob Berry, Jen deHaan, Peter deHaan, David Jacowitz ve Wade Pickett (ISBN 0-321-39539-5)• Macromedia Flash 8 Professional: KaynağıMacromedia Flash 8 Professional: KaynağıMacromedia Flash 8 Professional: Kayna ndan Eğndan Eğndan E itim

Yazan: Tom Green ve Jordan Chilcott (ISBN 0-321-38403-2)

Klavye Kısayolları

Bu ek bölümünde, Macromedia Flash 8 menülerindeki komutları kullanmak için faydalanabileceğiniz klavye kısayolları tablolar halinde listelenmiştir. Her komutun hem Windows, hem de Macintosh kısayolu verilmiştir. Menü tablolarındaki komutlar, Flash 8 menüsündeki sıralarıyla verilmiştir.

File MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

New Yeni Ctrl+N Cmd+N

Open Aç Ctrl+O Cmd+O

Close Kapat Ctrl+W Cmd+W

Save Kaydet Ctrl+S Cmd+S

Save As Farklı Kaydet Ctrl+Shift+S Cmd+Shift+S

Publish Settings Yayınlama Ayarları Ctrl+Shift+F12 Option+Shift+F12

Publish Yayınla Ctrl+F12 Shift+F12

Print Yazdır Ctrl+P Cmd+P

Exit Çık Ctrl+Q Cmd+Q

Import to Stage Çalışma Alanına İthal Et Ctrl+R Cmd+R

Open External Library Harici Kütüphaneyi Aç Ctrl+Shift+O Cmd+O

Export Movie Filmi İhraç Et Ctrl+Alt+Shift+S Cmd+Option+Shift+S

Default Publish Preview Varsayılan Yayınlama F12 F12(HTML) Önizlemesi (HTML)

C

378 EK CEK CEK

Edit MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

Undo Geri Al Ctrl+Z Cmd+Z

Redo Yinele Ctrl+Y Cmd+Y

Cut Kes Ctrl+X Cmd+X

Copy Kopyala Ctrl+C Cmd+C

Paste in Center Merkeze Yapıştır Ctrl+V Cmd+V

Paste in Place Yerine Yapıştır Ctrl+Shift+V Cmd+Shift+V

Clear Sil Backspace Delete

Duplicate Çoğalt Ctrl+D Cmd+D

Select All Tümünü Seç Ctrl+A Cmd+A

Deselect All Tümünü Seçimden Çıkar Ctrl+Shift+A Cmd+Shift+A

Find and Replace Bul ve Değiştir Ctrl+F Cmd+F

Find Next Sonrakini Bul F3 F3

Edit Symbols Sembolleri Düzenle Ctrl+E Cmd+E

Cut Frames Kareleri Kes Ctrl+Alt+X Cmd+Option+X

Copy Frames Kareleri Kopyala Ctrl+Alt+C Cmd+Option+C

Paste Frames Kareleri Yapıştır Ctrl+Alt+V Cmd+Option+V

Clear Frames Kareleri Temizle Alt+Backspace Option+Delete

Remove Frames Kareleri Kaldır Shift+F5 Shift+F5

Select All Frames Tüm Kareleri Seç Ctrl+Alt+A Cmd+Option+A

Preferences Tercihler Ctrl+U Flash > Preferences

KLAVYE KISAYOLLARI 379

View MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

Go to First İlkine Git Home Home

Go to Previous Öncekine Git Page Up Page Up

Go to Next Sonrakine Git Page Down Page Down

Go to Last Sonuncuya Git End End

Zoom In Yakınlaş Ctrl+= Cmd+=

Zoom Out Uzaklaş Ctrl+- Cmd+-

Magnification: 100% Büyütme: % 100 Ctrl+1 Cmd+1

Magnification: 400% Büyütme: % 400 Ctrl+4 Cmd+4

Magnification: 800% Büyütme: % 800 Ctrl+8 Cmd+8

Show Frame Kareyi Göster Ctrl+2 Cmd+2

Show All Tümünü Göster Ctrl+3 Cmd+3

Outlines Dış hatlar Ctrl+Alt+Shift+O Cmd+Option+Shift+O

Fast Hızlı Ctrl+Alt+Shift+F Cmd+Option+Shift+F

Anti-alias Antialias Ctrl+Alt+Shift+A Cmd+Option+Shift+A

Anti-alias Text Metne Antialias Ctrl+Alt+Shift+T Cmd+Option+Shift+T

Work Area Çalışma Alanı Ctrl+Shift+W Cmd+Shift+W

Rulers Cetveller Ctrl+Alt+Shift+R Cmd+Option+Shift+R

Show Grid Izgarayı Göster Ctrl+’ Cmd+’

Edit Grid Izgarayı Düzenle Ctrl+Alt+G Cmd+Option+G

Show Guides Kılavuzları Göster Ctrl+; Cmd+;

Lock Guides Kılavuzları Kilitle Ctrl+Shift+; Cmd+Shift+;

Edit Guides Kılavuzları Düzenle Ctrl+Alt+Shift+G Cmd+Option+Shift+G

Snap to Grid Izgaraya Kenetlen Ctrl+Shift+’ Cmd+Shift+’

Snap to Guides Kılavuzlara Kenetlen Ctrl+Shift+; Cmd+Shift+;

Snap to Objects Nesnelere Kenetlen Ctrl+Shift+/ Cmd+Shift+/

Hide Edges Kenarları Gizle Ctrl+H Cmd+Shift+E

Show Shape Hints Şekil İpuçlarını Göster Ctrl+Alt+H Cmd+Option+H

Insert MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

New Symbol Yeni Sembol Ctrl+F8 Cmd+F8

Frame Kare F5 F5

380 EK CEK CEK

Modify MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

Document Belge Ctrl+J Cmd+J

Convert to Symbol Sembole Dönüştür F8 F8

Break Apart Parçala Ctrl+B Cmd+B

Optimize Optimize Et Ctrl+Alt+Shift+C Cmd+Option+Shift+C

Add Shape Hint Şekil İpucu Ekle Ctrl+Shift+H Cmd+Shift+H

Distribute to Layers Katmanlara Dağıt Ctrl+Shift+D Cmd+Shift+D

Convert to Keyframes Anahtar Karelere Dönüştür F6 F6

Clear Keyframe Anahtar Kareyi Temizle Shift+F6 Shift+F6

Convert to Blank Boş Anahtar Karelere F7 F7Keyframes Dönüştür

Rotate 90 degrees CW 90 derece Saat Ctrl+Shift+9 Cmd+Shift+9Yönünde Döndür

Rotate 90 degrees CCW 90 derece Saat Ctrl+Shift+7 Cmd+Shift+7Yönünün Tersine Döndür

Remove Transform Dönüşümü Kaldır Ctrl+Shift+Z Cmd+Shift+Z

Bring to Front En Öne Getir Ctrl+Shift+Up Option+Shift+Up

Bring Forward Öne Getir Ctrl+Up Cmd+Up

Send Backward Arkaya Gönder Ctrl+Down Cmd+Down

Send to Back En Arkaya Gönder Ctrl+Shift+Down Option+Shift+Down

Lock Kilitle Ctrl+Alt+L Cmd+Option+L

Unlock All Tümünün Kilidini Çöz Ctrl+Alt+Shift+L Cmd+Option+Shift+L

Align Left Sola Hizala Ctrl+Alt+1 Cmd+Option+1

Align Horizontal Center Yatay Merkezi Hizala Ctrl+Alt+2 Cmd+Option+2

Align Right Sağa Hizala Ctrl+Alt+3 Cmd+Option+3

Align Top Üste Hizala Ctrl+Alt+4 Cmd+Option+4

Align Vertical Center Düşey Merkezi Hizala Ctrl+Alt+5 Cmd+Option+5

Align Bottom Alta Hizala Ctrl+Alt+6 Cmd+Option+6

Distribute Widths Genişlikleri Dağıt Ctrl+Alt+7 Cmd+Option+7

Distribute Heights Yükseklikleri Dağıt Ctrl+Alt+9 Cmd+Option+9

Make Same Width Aynı Genişliğe Ayarla Ctrl+Alt+Shift+7 Cmd+Option+Shift+7

Make Same Height Aynı Yüksekliğe Ayarla Ctrl+Alt+Shift+9 Cmd+Option+Shift+9

To Stage Çalışma alanına Ctrl+Alt+8 Cmd+Option+8

Group Grupla Ctrl+G Cmd+G

Ungroup Grubu Çöz Ctrl+Shift+G Cmd+Shift+G

KLAVYE KISAYOLLARI 381

Text MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

Plain Normal Ctrl+Shift+P Cmd+Shift+B

Bold Kalın Ctrl+Shift+B Cmd+Shift+P

Italic İtalik Ctrl+Shift+I Cmd+Shift+I

Align Left Sola Hizala Ctrl+Shift+L Cmd+Shift+L

Align Center Ortaya Hizala Ctrl+Shift+C Cmd+Shift+C

Align Right Sağa Hizala Ctrl+Shift+R Cmd+Shift+R

Justify İki Yana Yasla Ctrl+Shift+J Cmd+Shift+J

Tracking Increase Karakter Aralığını Artır Ctrl+Alt+Right Cmd+Option+Right

Tracking Decrease Karakter Aralığını Azalt Ctrl+Alt+Left Cmd+Option+Left

Tracking Reset Karakter Aralığını Ctrl+Alt+Up Cmd+Option+Up İlk Haline Getir

Control MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

Play Oynat Enter Enter/Return

Rewind Geri Al Ctrl+Alt+R Cmd+Option+R

Step Forward One Frame Bir Kare İleri Git . .

Step Backward One Frame Bir Kare Geri Git , ,

Test Movie Filmi Test Et Ctrl+Enter Cmd+Enter

Debug Movie Filmde Hata Ayıkla Ctrl+Shift+Enter Cmd+Shift+Enter

Test Scene Sahneyi Test Et Ctrl+Alt+Enter Cmd+Option+Enter

Test Project Projeyi Test Et Ctrl+Alt+P Cmd+Option+P

Enable Simple Buttons Basit Düğmeleri Etkinleştir Ctrl+Alt+B Cmd+Option+B

382 EK CEK CEK

Window MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

New Window Yeni Pencere Ctrl+Alt+K Cmd+Option+K

Project Proje Shift+F8 Shift+F8

Properties Özellikler Ctrl+F3 Cmd+F3

Timeline Zaman Çizgisi Ctrl+Alt+T Cmd+Option+T

Tools Araçlar Ctrl+F2 Cmd+F2

Library Kütüphane Ctrl+L ya da F11 Cmd+L ya da F11

Align Hizala Ctrl+K Cmd+K

Color Mixer Renk Karıştırıcı Shift+F9 Shift+F9

Color Swatches Renk Numuneleri Ctrl+F9 Cmd+F9

Info Bilgi Ctrl+I Cmd+I

Scene Sahne Shift+F2 Shift+F2

Transform Dönüştür Ctrl+T Cmd+T

Actions Eylemler F9 Option+F9

Behaviors Davranışlar Shift+F3 Shift+F3

Components Bileşenler Ctrl+F7 Cmd+F7

Component Inspector Bileşen Denetçisi Alt+F7 Option+F7

Debugger Hata Ayıklayıcı Shift+F4 Shift+F4

Output Çıktı F2 F2

Web Services Web Servisleri Ctrl+Shift+F10 Cmd+Shift+F10

Accessibility Erişilebilirlik Alt+F2 Option+F2

History Geçmiş Ctrl+F10 Cmd+F10

Movie Explorer Film Gezgini Alt+F3 Option+F3

Strings Dizeler Ctrl+F11 Cmd+F11

Hide Panels Panelleri Gizle F4 F4

Help MenüsüKomut Türkçe Karşılığı Windows Macintosh Kısayolu Kısayolu

Help Yardım F1 F1

KLAVYE KISAYOLLARI 383

Actions PaneliKomut Türkçe Karşılığı Windows Kısayolu Macintosh Kısayolu

Pin Script Script’i İğnele Ctrl+= Cmd+=

Close Script Script’i Kapat Ctrl+- Cmd+-

Close All Scripts Tüm Script’leri Kapat Ctrl+Shift+- Cmd+Shift+-

Go to Line Satıra Git Ctrl+G Cmd+,

Find Bul Ctrl+F Cmd+F

Find Again Tekrar Bul F3 Cmd+G

Replace Değiştir Ctrl+H Cmd+Shift+H

Auto Format Otomatik Biçimlendir Ctrl+Shift+F Cmd+Shift+F

Check Syntax Sözdizimini Kontrol Et Ctrl+T Cmd+T

Show Code Hint Kod İpucu Göster Ctrl+Boşluk çubuğu Cmd+Boşluk çubuğu

Import Script Script’i İthal Et Ctrl+Shift+I Cmd+Shift+I

Export Script Script’i İhraç Et Ctrl+Shift+X Cmd+Shift+X

View Line Numbers Satır Numaralarını Göster Ctrl+Shift+L Cmd+Shift+L

Word Wrap Sözcük Kaydır Ctrl+Shift+W Cmd+Shift+W

Preferences Tercihler Ctrl+U Cmd+U (sadece Actions panelinde)

Debugger PaneliKomut Türkçe Karşılığı Windows Kısayolu Macintosh Kısayolu

Continue Devam F10 F10

Stop Debugging Hata Ayıklamayı Durdur F11 F11

Step In İçine Adımla F6 F6

Step Over Üzerine Adımla F7 F7

Step Out Dışarı Adımla F8 F8

Output PaneliKomut Türkçe Karşılığı Windows Kısayolu Macintosh Kısayolu

Copy Kopyala Ctrl+C Cmd+C

Find Bul Ctrl+F Cmd+F

Find Again Tekrar Bul F3 F3

384 EK CEK CEK

DizinAAccordion bileşeni, 215Actions araç kutusu, 129–130

global fonksiyonlar, 131Actions paneli

açmak, 12, 129–132bölümleri, 130kod ipuçları, 246–247

ActionScript. Bkz. Script Assistaçıklamalar, 245anahtar kareler, 13anahtar sözcükler, 171_parent, 252_root, 253this, 252–253, 297

animasyon, 127, 305menüler, 288–295

davranışlar, düzenleme, 166deyimlerif, 294koşullu, 249trace, 324

dinamik metin, 71etkileşimli FLA belgeleri, 159faaliyet alanı

global değişkenler, 251–252Timeline değişkenleri, 251yerel değişkenler, 250–251

Flash, 3fonksiyonlar

isimli, 256parametreler, 248–249yerel, 256, 263, 294

for..in döngüleri, 291–292girdi metni, 71girinti, 250izleyiciler, 265, 313–314, 329–331, 337

kare etiketleri, 20kod ipuçları, 246–247metotlar, 242–244

LoadVars sınıfıfıf , 255–256POST ve GET, 324

nesneler, 242olay işleyicileri, 264–265, 315olaylar

cevap vermek, 242düğmeler, 99onLoad, 264yayınlamak, 242, 262, 265

Output paneli, hatalar, 257, 264özellikler, 242–245seviyeler, 254sınıflar, 7, 242

kesin tip belirleme, 245örnek oluşturmak, 243–244özel, 245yerleşik, 243–245

sözdizimini kontrol etmek, 263açıklama kare etiketleri, 20açıklamalar (ActionScript), 245adlandırmak/adlandırma standartları

grafikler, 45katmanlar, 18–19örnekler

bileşenler, 222semboller, 97

panel yerleşim düzenleri, 18–19ADPCM sıkıştırma formatı, 197AIFF dosyaları, 190–191, 197Alert bileşeni, 215alfa düzeyleri/kontrolleri

anahtar kareler, 148motion tween, 137–139

parlaklık tween’k tween’k tween i, 136, 304

386 DİZİN

opaklık, 40renk, 68

Align panelidüğmeler, 103seçenekler, 66, 67

anchor tipindeki kare etiketleri, 20dosya boyu, 307

Angular harmanlama seçeneği, 143animasyonlar/animasyon uygulamak. Bkz.

kare kare; motion tween; shape tweenActionScript kullanmak, 127, 305eylemler, durdurmak, 129–132genel bakış, 127menüler, 288–295Movie Clip düğmesi, 140–141movie clip kullanmak, 127oluşturmak, movie clip’lerde, 128optimize etmek, 304–305sesle senkronize etmek, 196sürüklemek, 136–137yerinde düzenleme modu, 129yollar, 149–155yuvalamak, 98

anket (form), 213anket formları, 228–233

veri göndermek, 325–328anti-aliasing

aygıt fontlarında, 72bitmap grafikleri, 57Bitmap Text seçeneği, 84metin, 74, 77

araç ipuçları, 33arama formları, 213arka plan rengi, 9asenkron iletişim, 264audio. Bkz. Sesaygıt fontları

anti-aliasing desteklenmiyor, 72dinamik metin ve girdi metni, 80

BBandwidth Profiler, 307, 315, 339–340bant genişliği, 307Başlık çubuğu, 5Behaviors paneli, 159

davranış eklemekAdd Behavior düğmesi, 163, 164

nesne örnekleri, 160eylem listesi, 165

eylemlerde değişiklik yapmak, 166olay listesi, 165

belge seviyesinde geri alma, 24belgeler

koordinatlar, 42sekmeler, 5–6statik metin, 73

bileşenlerFocus Manager, 233–237örnekler

davranışlar, 160, 163adlandırma standartları, 222

parametreler, 249sekme sırası, 233–237silmek, dosya boyunu küçültmek için, 54Web kaynakları, 373–374yüklemek, 363–366

bit rate, 193bitmap dolguları, Color Mixer, 61bitmap grafikleri

anti-aliasing, 57ithal etmek, optimizasyon ayarları, 57ölçeklemek, 56

dezavantajları, 37sıkıştırma, 57, 58

Bitmap Properties iletişim kutusuanti-aliasing, 57sıkıştırma, 57–58

Bitmap Text seçeneği, anti-aliasing, 84Button sınıfıfıf , 243, 244bütünleştirilebilen araçlar, kaynaklar, 374–376

CCascading Style Sheets (CSS), 268–270, 283

sürümler, 268TextArea bileşeni, 221

cetveller, görüntülemek, 43, 46Character Embedding iletişim kutusu, 80Character Spacing, 85CheckBox bileşeni, 215, 231, 233

anket verilerini göndermek, 325–328Color Mixer

bitmap dolguları, 61lineer degradeler, 62–63özel renkler, 37

DİZİN 387

Color Swatches paneli, 37Options menüsü, 37–38

ComboBox bileşeni, 215, 229, 231–232Component denetçisi, 168, 219–220, 222Component sınıfıfıf , 244Components paneli

açmak, 11düğmeler, 26kullanıcı arabirimi bileşenleri, 12, 218Options menüsü, 12UI bileşenleri, 12, 218

Create New Symbol iletişim kutusumod’lar: basic ya da advanced, 44mod’lar: temel ya da gelişmiş, 44sembol tipleri, 45

CSS (Cascading Style Sheets), 268–270, 283sürümleri, 268TextArea bileşeni, 221

Ççalışma alanı

panel yerleşim düzenleri, 13Stage, 4

çember, Bkz. daireçizgiler

movie clip’e d’e d’ önüştürmek, 112nesnelere bir yol boyunca animasyon

uygulamak, 149–150çizim araçları, 39

fıfıf rça darbeleri, 50Oval, 42Rectangle, 40–41

Ddaire

çizmek, 42nesnelere bir yol boyunca animasyon

uygulamak, 149–150radyal degrade, 65yeniden boyutlandırmak, 42

DataChooser bileşeni, 215DataGrid bileşeni, 215, 218Date sınıfıfıf , 243DateField bileşeni, 215davranışlar

etkileşimli FLA belgeleri, 159JPEG’leri yüklemek, 160–164

üçüncü parti davranışlar, 160Web kaynakları, 373–374Web sayfalarını açmak, 164–166

degradelerdegrade tanımlama çubuğu, 63değişiklik yapmak, 63–65lineer, 62radyal, 62

Description alanları, metaveri, 8deyimler (ActionScript)if, 294koşullu, 249trace, 324

dikdörtgençizmek, 21–22, 40döndürmek, 63grafik sembollere dönüştürmek, 53, 64katmanlar, yığın sırası, 23konumunu ayarlamak, 52Merge Drawing modu, 108yeniden boyutlandırmak, 41, 52yuvarlatılmış köşeler, 47, 51

dinamik metin, 71ActionScript, 71aygıt fontları, 72, 80gömülü fontlar, 80–81HTML ile biçimlendirilmiş metin, 90Properties denetçisi seçenekleri, 72statik metin, 90TextArea ve TextInput bileşenleri, 89–90

dinamik olarak yüklemek, 160–164, 172Distribute to Layers özelliği, 133Distributive harmanlama seçeneği, 143Document Properties iletişim kutusu, 8, 59dolgular

bitmap dolguları, 61boyunu değiştirmek, 62

renk, 40–42, 47–48şekiller, 119temeller, 34–36

dosya yüklemekdavranışlar, 160–164Loader bileşeni, 166–169MovieClipLoader sınıfıfıf , 333–338Tech Bookstore, 333–338yükleme işleminin ilerlemesini göstermek,

308–316

388 DİZİN

dosyaları dinamik olarak yüklemek, 160–164 Down durumu, düğmeler, 99–101, 105Dreamweaver

Flash’Flash’Flash la bütünleştirmek, 3Sürüm 8 eklentilerini yüklemek, 363

Drop Shadow efekti, 86Duplicate Symbol iletişim kutusu, 229durumlar, düğmeler, 99–100düzenleme çubuğu, 5–6

sembol düzenleme modu, 45

EEdit Envelope iletişim kutusu, 194–195eğitim uygulamaları, Web siteleri, 370–372eğriler, nesnelere bir yol boyunca animasyon

uygulamak, 149–150eklentiler

Web kaynakları, 373–374yüklemek, 363–366

Enable Simple Buttons komutu, 199encoding. Bkz. sıkıştırmae-posta listeleri, kaynaklar, 373Eraser aracı, 34etkileşimli FLA belgeleri, davranışlar, 159EXE dosyaları, bileşenleri yüklemek, 363–364Extension Manager.

Bkz. Macromedia Extension Manager 1.7Eyedropper (Damlalık) aracı, 34

özel renkler, 37renk seçenekleri, 39

eylemlerkareler, 120menü düğme kontrolleri, 296–297Timeline kontrolleri, 171–172

Ffaaliyet alanı ve değişkenler (ActionScript)

global, 251–252Timeline, 251yerel, 250–251

fade ses efektleri, 195fıfıf rça darbeleri

fıfıf rça darbesi ipuçları, 51join seçenekleri, 51özel, 51renk, 47–48renkler, 40–42

seçenekler, 50–51temeller, 34–36uç stilleri, 51

Fill Color kontrolleri, 34, 42, 47Fill Transform aracı, 34

bitmap dolguları, 62degradeler, 63–65

filtreler, desteklenmediği yerler, 98Fireworks

Flash’Flash’Flash la bütünleştirmek, 3sürüm 8 eklentilerini yüklemek, 363

Firefox tarayıcısı, 307–308FLA belgeleri

bileşenleri yüklemek, 363, 366dosya boyu, 307etkileşim, 159kullanılabilirlik, 303–304kütüphaneler, 52oluşturmak, 59

ilk adımlar, 7–9optimize etmek, 302

iyi alışkanlıklar, 302–303test etmek, 26, 339–341varsayılan ayarlar, 7yayınlamak, 61yazım denetimi, 88–89

FlashActionScript, 3açmak, 7aktivasyon (etkinleştirme), 7çalışma alanı

başlangıç sayfası, 4, 7panel yerleşim düzenini kaydetmek, 13

diğer Macromedia yazılımlarıyla bütünleştirmek, 3

dokümantasyon güncellemeleri, 28–29üçüncü parti plug-in’parti plug-in’parti plug-in ler, 368

Flash 8 BasicFLA dosyaları, 8geriye dönük uyumluluk, 3yerleşik bileşenler, 71

Flash 8 Professionalfarklı belge tipleri, 8geriye dönük uyumluluk, 3yerleşik bileşenler, 71

Flash Exchange, komutlar, 366, 368Flash grafik formatı. Bkz. vektör grafikleri

DİZİN 389

Flash Lite Player, 3ayarları değiştirmek, 9

Flash Playeralgılamak, 352–355Publish Settings, 9, 348–349seviyeler, 254SWF dosyalarını ulaştırmak, 3

Flash Remoting, 213FLV video formatı, 202, 215FocusManager sınıfıfıf , 233–237font özellikleri

metin, 74, 77metin boyu, 84

font sembolleri, 93fontlar

Font Rendering Method açılır listesi, 77Web kaynakları, 373–374

for..in döngüleri (ActionScript), 291–292Foreground/Background aracı, 34formlar. Bkz. geribildirim formları; anketler;

anket formları; arama formlarıtipleri, 213

forumlar, kaynaklar, 372Fotoğraf (JPEG) sıkıştırma, 57, 58Frame View, Timeline, 15Free Transform aracı, 34

grafiklerdöndürmek, 66ölçeklemek, 67

semboller, ölçeklemek, 138–139Freehand. Bkz. Macromedia Freehand

Ggeçmiş, geri almak, 24–25geliştirme ortamı. Bkz. çalışma alanıgeri alma sayısı, 24–25geri almak, geçmiş, 24–25geribildirim formları, 213, 217–222

sekme sırası, 234–235veri göndermek, 322–325

gezinti, SWF dosyaları, 20GIF resimleri, yüklemek

dinamik olarak, 160Loader bileşeni, 167

girdi metni, 71ActionScript, 71aygıt fontları, 72, 80

dinamik metin, 90Properties denetçisi seçenekleri, 72statik metin, 90TextArea ve TextInput bileşenleri, 89–90

girinti (ActionScript), 250Go to URL iletişim kutusu, 164

transfer protokolleri, 165görünmez düğmeler, 106–110Görünüm alanı, Tools paneli, 33grafik sembolleri

animasyon uygulamak, 149–155animasyon, 98dikdörtgenleri dönüştürmek, 53, 64dolguları grafik sembollere dönüştürmek, 119dosya boyu, movie clip’ler ya da düğmelerin

dosya boyu, 111kesmek/yapıştırmak, 60koordinatlar, 43oluşturmak, 44–45örnekler, 66özellikler, 98–99renk, alfa, 68semboller, genel bakış, 93yuvalamak

movie clip’ler, 114–115Timeline’lar, 97

grafiklerçizim araçları, 39döndürmek, 66hizalamak, Stage’e, 66’e, 66’oranları kısıtlamak, 41ölçeklemek, 37, 56, 67

grafikleri ölçeklemek, 67bitmap’ler, 56vektörler ve bitmap’ler, 37

gripper (tutamaç), 10panelleri kenetlemek, 11

Hham grafikler/ilkel grafikler, 54

boyunu ayarlamak, 8sembollere dönüştürmek, 119shape tween uygulamak, 142Stage, 54şekiller, oluşturmak, 21–22

Hand aracı, 34

390 DİZİN

hareket kılavuzları/hareket kılavuzu katmanları, 18, 127

tween seçenekleri, 153yollar, 149, 151

katman oluşturmak, 151Smooth ve Ink modifier’ları, 151Snap to Objects modifier’ı, 152

harmanlama seçenekleri, shape tween, 143hedefler/hedeflemek

semboller, 161URL’URL’URLler, 165

Help paneliarama alanı, 28–29online Flash destek sayfası, 28

History paneli, 10en küçük boyuta getirmek, 11özel komutlar, 367

Hit durumu, düğmeler, 99–101görünmez düğmeler, 106–107metin düğmesi, 105

hizalamagrafikleri Stage’e hizalamak, 66’e hizalamak, 66’metinler, 74, 77, 78nesneler, Snap Tolerance ayarı, 122

HSB (hue, saturation, brightness) renk modu, 38HTML dosyaları

dinamik metinler ve girdi metinleri, 90Publish Preview özelliği, 27SWF dosyalarını HTML sayfalarına gömmek,

355–358HTML etiketleri, 287HTML sekmesi, Publish Settings iletişim

kutusu, 352–354

I – İImport Video iletişim kutusu, 202–206Ink Bottle aracı, 34

fıfıf rça darbeleri, 50fıfıf rça darbelerini değiştirmek, 35

Internet Explorer tarayıcısı, 307–308ızgaralar, 43izleyiciler (ActionScript), 265, 313, 329, 337

JJPEG resimleri

ilerlemeli/standart, 160yüklemek

dinamik olarak, 160–164, 172Loader bileşeni, 167

JSFL dosyaları, 367

Kkarakter aralığı, 85kare etiketleri, 20, 174–175

kare numaraları, 20tipleri, 20

kare görünümü, Timeline, 15kare hızı

değiştirmek, 8fps (kare/saniye), 9, 13, 334video sıkıştırma, 206

kare kare animasyonlardosya boyu, 127, 145duraklatılma görünümü, 149onion skin, 146–147sayfanın yavaş yavaş kaybolması, 148soğan zarı, 146–147temeller, 145

kare numaraları, kare etiketleri, 20kareler

boy ve görünüm, 15etiketler, 120eylemler, 120Internet Explorer’da favorilere eklemek, 20’da favorilere eklemek, 20’içerik

eklemek, 16önizleme, 15

kopyalamak ve taşımak, 17renklendirilmiş kareler, 15seçmek, 16silmek, 16–17taşımak, 16–17Timeline, 13–14Tinted Frames, 15yer tutucular, 16

katman klasörlerikatmanları organize etmek, 18oluşturmak, 21

katmanlaradlandırmak, 18Distribute to Layers özelliği, 133düzleştirmek, 60eklemek, 17, 19katman isimleri, 14–16

DİZİN 391

kilitlemek/kilidi çözmek, 20, 48arka plan katmanları, 58

silmek, 114katmanlar ve içerikler, 23

statik metin, eklemek, 73Timeline, 13–14yeniden adlandırmak, 19yığın sırası, 23

Kayıpsız (PNG/GIF) sıkıştırma formatı, 57kayıt noktaları, semboller, 101kaynak kodu, SWF dosyaları, 27kaynaklar

bütünleştirilebilen araçlar, 374–376e-posta listeleri, 373forumlar, 372Macromedia Press kitapları, 376Macromedia Exchange

bileşenler, 214davranışlar, 160

Üçüncü parti araçlar, 374–376Web siteleri

eğitim uygulamaları, 370–372eklentiler ve fontlar, 373–374Macromedia Web siteleri, 369–370

kesin tip belirleme, 245Key Press olayı, 166kılavuz katmanları, 18kılavuzlar

cetvelden taşımak, 46–47görüntülemek, 43kenetlenme özelliği, 43kilitlemek, 48

kilitlemek/kilidi çözmekkatmanlar, 20, 48

arka plan katmanları, 58kılavuzlar, 48maske katmanları, 50yollar, 151

klasörler, kütüphaneler, 55kod ipuçları (ActionScript), 246–247komutlar

Flash Exchange sitesinden indirmek, 366, 368özel, History paneli, 367Web kaynakları, 373–374

kullanıcı arabirimi bileşenleri, 217, 218kullanıcı platformları, 307–308

küçük Web dosyaları. Bkz. SWFkütüphaneler

açmak, 54klasörler, 55semboller, 93sembolleri düzenlemek, 94varlıklar

başka kütüphanelerden kopyalamak, 53örnek isimleri ve kütüphane isimleri, 162silmek, 54temeller, 53

LLasso aracı, 34Layer Properties iletişim kutusu,

katman ismini ve tipini değiştirmek, 19Layers paneli

Insert Layer Folder, 73katmanlar, oluşturmak, 44–45kaydırmak, 15Timeline, 14

Line aracı, 34, 112fıfıf rça darbesi oluşturmak, 34–36nesnelere bir yol boyunca animasyon

uygulamak, 149lineer degradeler, 62–63

şekiller, 64Linkage Properties iletişim kutusu, 225List bileşeni, 215

anket verilerini göndermek, 325–328katalog, 279, 280kullanmak, 257–260olay izleyicileri, 266–267

Load Graphic iletişim kutusu, 163Loader bileşeni, 166–169, 216

harici dosyalar, 167, 308, 311izleyiciler, 313–314

katalog sayfaları, 273, 277katalog, 279özellikler, 317–318parametreler, 167–168

LoadVars sınıfıfıf , 254–256, 262Flash’Flash’Flashtan dışarıya veri göndermek, 322–325metin dosyaları, 313onData olayı, 266–267onLoad olayı, 264, 266–267

392 DİZİN

MMacromedia Exchange

bileşenler, 214davranışlar, 160Timeline efektleri, 86

Macromedia Extension Manager 1.7, yüklemekdavranışlar, 367eklentiler ve bileşenler, 363–366

Macromedia Fireworks, 39Macromedia Flash. Bkz. FlashMacromedia Freehand, 39

vektör grafiklerini ithal etmek, 59, 60Macromedia Web sitesi

kaynaklar, 369–370üçüncü parti plug-in’parti plug-in’parti plug-in ler, 368

Manage Workspace Layouts iletişim kutusu, 13maske katmanları/maskeler, 18, 49–50Math sınıfıfıf , 243Media bileşenleri, 215Menu bileşeni, 215MenuBar bileşeni, 215menüler, 5, 6

animasyon uygulamak, 288–295düğmeler, 295–298oluşturmak, 114–117

Merge Drawing modu, 35–36dikdörtgenler, 108nesnelere animasyon uygulamak, 151

metaveri, 8, 345–352metin

dinamik metin alanları, 308–316düğme hit alanı, 102yeniden boyutlandırmak, 122yerleşik bileşenler, 71

metin düğmeleri. Bkz. düğmeleroluşturmak, 104–105renk, 105–106rollover, 105yuvalamak, 116–117

metotlar (ActionScript), 242–244LoadVars sınıfıfıf , 255–256POST ve GET, 324

mobil aygıtlar, yazılım, 3motion tween, 127, 141

alfa düzeyleri, 137–139dosya boyu, 128

dönme ayarları, 136eklemek, 134

uyarılar, 134hareket kılavuzları, 127parlaklık düzeyleri, 136

alfa düzeyleri, 136, 304süre, 135

movie clip düğmeleri, 117animasyon uygulamak, 140–141durdurmak/oynatmak, 177–179oluşturmak, 117–121

movie clip’leranimasyon, 127çizgileri dönüştürmek, 112–113dosya boyu, düğmeler ve grafik sembollerin

dosya boyu, 111movie clip’in içinde animasyon oluşturmak, 128turmak, 128turmak,örnekler

davranışlar, 160–164örnek isimleri ve kütüphane isimleri, 162

semboller, genel bakış, 93sembolleri çoğaltmak, 121Stage, eklemek/silmek, 122SWF dosyalarını yüklemek, 166–169temeller, 111Timeline, ilişki kurmak, 111yuvalamak

grafik semboller, 114–115metin düğmeleri, 116–117Timeline, 97

yuvalanmış animasyonlar, 98MovieClip sınıfıfıf , 243–244MovieClipLoader sınıfıfıf , 333–338MP3 dosyaları, 190–193, 215MXP dosyaları, bileşenleri yüklemek, 363–364

Nname tipi kare etiketi, 20nesne seviyesinde geri almak, 24nesneler

ActionScript, 242davranışlar, 160, 163

No Color düğmesi, 34, 35, 42noktalı sözdizimi, 170normal katmanlar, 18NumericStepper bileşeni, 216, 229, 231

anket verilerini göndermek, 325–328

DİZİN 393

OObject Drawing modu, 35–36

dikdörtgenler, 40–41kapatmak, 47

olay işleyicileri (ActionScript), 264–265, 315tanımı, 99

olaylar (ActionScript)cevap vermek, 242düğmeler, 99onLoad, 264yayınlamak, 242, 262, 265

On Release olayı, 165–166On2 VP6 codec’i, 189, 205–206onaltılık renk modu, 38onion skin, 146–147opaklık, 40Options alanı, Tools paneli, 33Orient to path seçeneği, hareket kılavuzları, 153Output paneli (ActionScript), 257, 264Oval aracı, 22, 34–35

daire çizmek, 42katmanlar, yığın sırası, 23

Over durumu, düğmeler, 99-101 Metin düğmesi, 105

oynatım kafası, 6oynatım performansı, video, 209

Öölçeklemek, semboller, 138–139örnekler

grafik semboller, 66örnekleri adlandırmak

davranışlar, eklemek, 161örnek isimleri ve kütüphane isimleri, 162semboller, 97

semboller, 93özellikler (ActionScript), 242, 243, 244–245

PPaint Bucket aracı, 34–35

degradeler, 63paneller, 5–6, 10–11

yerleşim düzenlerini kaydetmek, silmek, ya da yeniden adlandırmak, 13

pano, 17, 60Paste In Place komutu, 60

Pen aracı, 34nesnelere bir yol boyunca animasyon

uygulamak, 149Pencil aracı, 34

nesnelere bir yol boyunca animasyon uygulamak, 149, 151

fıfıf rça darbesi oluşturmak, 34–36Smooth modu, 52

plug-in’plug-in’plug-in ler, Web kaynakları, 373–374PNG resimleri

ithal etmek, 56yüklemek

dinamik olarak, 160Loader bileşeni, 167

Polystar aracı, 34–35Preferences iletişim kutusu

açmak, 23–24General kategorisi, geri alma sayısı, 24On Launch, 25

Preview in Context, 15ProgressBar bileşeni, 216, 328–333Properties denetçisi, 5–6, 8

daireler, yeniden boyutlandırmak, 42dikdörtgenler, yeniden boyutlandırmak, 41kare etiketleri, 20Tools paneli, 33–34

Publish Preview özelliği, 27Publish Settings iletişim kutusu

açmak, 346Debugging Permitted seçeneği, 350Flash Player, 9, 348–349HTML sekmesi, 352–354Local Playback Security seçeneği, 351Protect From Import ayarları, 348–350Sound Properties iletişim kutusu, 193yayınlama profilleri, 347, 351

RRadioButton bileşeni, 216radyal degradeler, 62

daireler, 65Rectangle aracı, 34–35, 40–41

şekiller, 21–22renkler

alfa, 68dolgular, 40–42, 47–48fıfıf rça darbeleri, 40–42, 47–48

394 DİZİN

ızgaralar ve kılavuzlar, 43Mac ve PC arasındaki farklar, 308metin, 74, 77metin düğmeleri, 105–106modlar, 38–39opaklık, 40özel renkler, 37video sıkıştırma, 205

resim düzenleme yazılımı, 56RGB (red, green, blue) renk modu, 38rollover, metin düğmeleri, 105

Ssaç çizgisi, fıizgisi, fıizgisi, f rça darbeleri, 51Script Assist, 130–131

kullanmak, 174temeller, 170–171

etkileşimli FLA belgeleri, 159Script bölmesi, 129–130Script Gezgini, 129–130

script raptiyeleri, 180–182ScrollPane bileşeni, 216, 288seçilebilir metin, 83sekme sırası, bileşenler, 233–237Selection aracı, 34Selection aracı, bileşenler, düğme, 17sembol düzenleme modu

düzenleme çubuğu, 45koordinatlar, 43Library panelinden geçmek, 55

semboller. bkz. düğmeler; font sembolleri; grafik sembolleri; movie clip’ler

alfa düzeyleri ve boy, 137–139animasyon uygulamak, bir yol boyunca,

149–155boyunu ayarlamak, 138–139çoğaltmak, 121düzenlemek, 95gruplamak, 103ham grafikleri sembollere dönüştürmek, 119kayıt noktaları, 101kütüphane, sembolleri düzenlemek, 94motion tween, 127–128oluşturmak

öğeleri dönüştürmek, 94yeni içerik ekleyerek, 95

ölçeklemek, 138

örnekler, 93adlandırmak, 97özellikleri değiştirmek, 94

vektör grafiklerini dönüştürmek, 96yuvalamak, Timeline, 97–98

senkronize etmek sesi ve animasyonu, 196

sesanahtar kareler, 13animasyonla senkronize etmek, 196dosya boyları, 189–190döngüler, 191duraklatma/çalma geçiş kontrolleri, 188düzenlemek, 188eklemek, 194–195

düğmelere eklemek, 196–199ithal etmek

AIFF, 190–191, 197MP3, 190–193Sound Designer II, 191WAV, 190, 197

kapatma düğmesi, 188özelleştirmek, 194–195ses kontrol araçları, 188sıkıştırmak, 189, 197yüklemek, 189–190

ilerlemeli ya da akan tipte, 190, 194seviyeler (ActionScript), 254shape tween, animasyonu optimize etmek, 304

dosya boyu, 128harmanlama seçenekleri, 143oluşturmak, 143–145şekil ipuçları, 142vektör grafikleri, 142

Show/Hide All layers, 50sıkıştırma

bitmap grafikleri, 57codec’ler, 189, 197, 205profesyonel çözümler, 189dosyaları yeniden sıkıştırmak, 189, 197video, 205–209

sınıflar (ActionScript), 7, 242. Bkz. özel sınıflar kesin tip belirleme, 245örnek oluşturmak, 243–244özel, 245yerleşik, 243, 244, 245

sınırlayıcı kutular, 64

DİZİN 395

Smooth modifier’ı, 151Smooth modu, Pencil aracı, 52Snap seçeneği, hareket kılavuzları, 153Snap to Objects özelliği, 34, 43

etkinleştirmek, 44hareket kılavuzu katmanları, 152Snap Tolerance ayarı, 122

Sorensen Spark codec’i, 189Sound Designer II dosyaları, 191Sound Properties iletişim kutusu

bit rate, 193dosya tipleri, 192, 197Publish Settings iletişim kutusu, 193sıkıştırma, 193, 197

Sound sınıfıfıf , 243–244sözdizimi kontrolü (ActionScript), 263Spark codec’i, 205Stage, 5

anahtar kareler, Timeline’la ilişkisi, 17belge sekmeleri, görünürlük, 6düğmeler

hizalamak, 12yerleştirmek, 102–104

grafikler, hizalamak, 66Merge Drawing model, 35–36movie clip’ler, eklemek/silmek, 122Object Drawing modu, 35–36oval, çizmek, 22öğeleri ithal etmek, 56öğeleri silmek, 17

standart onaltılık renk modu. Bkz. onaltılık renk modu

Start sayfası, 4, 7statik metin, 71

anti-aliasing, 74, 77aygıt fontları, 72belgelere eklemek, 73boy, 84dinamik metin ve girdi metni, 90font özellikleri, 74, 77genişleyebilir alanlar, 75hizalamak, 74, 77, 78karakter aralığı, 85karakter çifti aralığı, 82Properties denetçisi seçenekleri, 72renk, 74, 77sabit genişlikli alanlar, 75, 82

seçilebilir metin, 83Timeline efektleri, 86typeface, 83URL linkleri, 78–79

stop eylemleri, yollar, 155Stroke Color kontrolleri, 34, 42, 47Stroke Style menüsü, 51Subselection aracı, 34sürüklemek

animasyonlarda, 136tanımı, 137

Swap Colors düğmesi, 34SWC dosyaları, 363, 366SWG dosyaları, Loader bileşeni, 166–169SWF dosyaları (küçük Web dosyaları), 3

HTML sayfalarına gömmek, 355–358kaynak kodu, 27oluşturmak, 61oynatımı optimize etmek, 305Publish Preview özelliği, 27tarayıcılarda gezinmek, 20test etmek, 339–341yayınlamak, 345–352

test etmek, 26Sync seçeneği, hareket kılavuzları, 153

Şşablonlar, 4, 7şekiller

dolgular, grafik sembollere dönüştürmek, 119lineer degradeler, 64nesnelere bir yol boyunca animasyon

uygulamak, 149–150oluşturmak, 21–22

TTable of Contents alanı, Help paneli, 28–29taşıma imleci, 10

panelleri kenetlemek, 11Tech Bookstore projesi

HTML sayfasına gömmek, 355–358İnternet ortamına yüklemek, 359–360son içeriği yüklemek, 316–321

test ortamı, 26Text aracı, 34TextArea bileşeni, 216, 221–222, 231

anket verilerini göndermek, 325–328

396 DİZİN

dinamik metin ve girdi metni, 89–90Giriş sayfası, 285–286, 288Haberler sayfası, 281–284kullanmak, 257, 261, 264

TextField sınıfıfıf , 243TextInput bileşeni, 216, 220

anket formu verileri, 327dinamik metin ve girdi metni, 89–90geribildirim formu verileri, 322

Timeline, 5, 6açmak, 14anahtar kareler, 13–14

davranışlar, eklemek, 160, 163eylemler, 132içerik eklemek, 16

animasyonlar, 136–137eylemler

durdurmak, 129–132kontrol etmek, 171–172

kare etiketleri, kare numaraları, 20Kare görünümü, 15kareler, 13–14

içerik eklemek, 16kopyalamak ve taşımak, 17seçmek, 16silmek, 16taşımak, 16–17

katmanlar, 13–14eklemek, 17, 19

Layers paneli, 14maksimum/minimum boya getirmek, 14movie clip’ler, ilişki, 111semboller, yuvalamak, 97–98yeniden boyutlandırmak, 15

Timeline efektleri, drop shadow, 86Tinted Frames seçeneği, 15Tools paneli, 5

düzenlemek, 25menüleri görüntülemek, 33Properties denetçisi, 33–34varsayılan ayarlar, 25

Transform aracı, semboller, 138Tree bileşeni, 215tween

hareket kılavuzları, seçenekler, 153terimin kaynağı, 127

U – ÜUI bileşenleri, 217–218Up durumu, düğmeler, 99–101URL link’URL link’URL link leri, statik metin, 78–79uzaklaştırma/yakınlaştırma seçenekleri, 49üçüncü parti plug-in’parti plug-in’parti plug-in ler

Flash, 368kaynaklar, 374–376Macromedia Web sitesi, 368

VValues iletişim kutusu, 259–260vektör grafikleri

animasyonu optimize etmek, 304dosya boyu, 307ithal etmek, 59–60katmanları düzleştirmek, 60ölçeklemek, avantajları, 37sembole dönüştürmek, 96

videodosya boyu, 189–190, 209duraklatma/çalma geçiş kontrolleri, 188editörler, 188ithal etmek, 200–204ses kontrol araçları, 188sıkıştırma, 189, 201, 205–209yüklemek, 189–190

ihraç edilen SWF dosyalarına bağlamak, 203ilerlemeli ya da akan tipte, 190, 194, 203–204

View alanı, Tools paneli, 33

W – XWAV dosyaları, 190, 197Web 216, 37–38Web uyumlu renk paleti, 37–38Window bileşeni, 216Window menüsü, paneller, 10–11x ve y koordinatları, 42–43

Yyardım panelleri, 28–29yayınlamak, FLA belgeleri, 61yazım denetimi aracı, 88–89yer tutucular, 16

DİZİN 397

yerinde düzenleme modu, 64animasyon, 129

yerleşik bileşenler, metin, 71yığın sırası, katmanlar, 23yollar, 170

döndürmek, 154hareket kılavuzu katmanları, 149

oluşturmak, 151Smooth ve Ink modifier’ları, 151Snap to Objects modifier’ı, 152tween seçenekleri, 153

kilitlemek, 151 stop eylemleri, 155yuvalamak

animasyonlar, 98

movie clip’lerdegrafik semboller, 114–115metin düğmeleri, 116–117

semboller, Timeline, 97–98yuvalanmış animasyonlar, 98yuvarlatılmış köşeler, dikdörtgenler, 47, 51yüklemek

bileşenler, 363–366davranışlar, 367eklentiler, 363–366

ZZoom aracı, 34Zoom seçenekleri, 49

LİSANS ANLAŞMASIKİTAPLA BİRLİKTE VERİLEN BU YAZILIM MEDYASININ PAKETİNİAÇMADAN ÖNCE EKTEKİ ANLAŞMA ŞARTLARINI OKUYUNUZ.

BU KAPALI YAZILIM PAKETİNİ AÇARAK, AŞAĞIDA YAZILMIŞ OLAN ANLAŞMA KOŞULLARINI KABUL ETMİŞ OLURSUNUZ.

EĞER BU KOŞULLARI KABUL ETMİYORSANIZ, PAKETİ AÇMAYINIZ. SADECE PAKETİ GERİ VERİNİZ.

Bu kitaptaki bilgiler sadece bilgilendirme amaçlı olup ve önceden haber verilmeksizin üzerinde değişiklik yapılabilir. Macromedia, Inc., Macromedia Press ve Medyasoft

Yayınları, bu kitapta olabilecek hatalardan ve yanlışlıklardan dolayı hiçbir sorumluluk üstlenmemektedir. Bu kitapta ele alınan yazılım lisanslı bir yazılım olup, sadece lisans koşullarına uygun olarak kullanılabilir veya kopyalanabilir.

Kitapla birlikte verilen CD-ROM’daki yazılım dosyalarının telifi Macromedia, Inc.’e aittir. Bu programları ve dosyaları özel olarak kullanma hakkınız yoktur.

Bunları bir defada tek bir bilgisayarda kullanabilirsiniz. Bunları bir ağ üzerindeki başka bir bilgisayara kopyalayamazsınız. Orijinal

CD-ROM’a sahip olduğunuz sürece dosyaları tek bir sabit diske kopyalayabilirsiniz.

Yazılım üzerinde kaynak kodları göstermek için hiçbir işlem yapamaz, kaynak kodlarını değiştiremez ya da parçalara ayıramazsınız. Macromedia, Inc.’in yazılı izni olmaksızın

yazılımı değiştiremez, çeviremez ya da kopyalarını dağıtamazsınız.

Yazılım ortamı “olduğu gibi” esaslarına göre garantisiz olarak dağıtılmaktadır. Yazarlar, yazılım geliştiricileri, yayıncı Pearson Education Inc. ve

Medyasoft Yayınları, yazılım programlarının kaliteleriyle, doğruluklarıyla veya belirli amaçlar için kullanılmalarıyla ilgili kesin veya dolaylı olarak

hiçbir garanti ya da tavsiyede bulunmamıştır.

Bu yüzden, yazarlar, yazılım geliştiricileri, yayıncı Pearson Education Inc. ve Multimedya Yayıncılık, medya üzerinde bulunan yazılımların dolaylı olarak veya doğrudan sebep olduğu öne sürülen kayıp veya hasarlar nedeniyle size

veya hiçbir kişi veya varlığa karşı sorumluluk kabul etmez. Bu, hizmetin yarıda kesilmesi veri kayıpları, zaman kaybı, danışma ve beklenti

yararı kaybı veya bu programların kullanımına bağlı olan zararları içerir, fakat bununla sınırlı değildir. Eğer medya kusurluysa, değiştirmek üzere iade edebilirsiniz.

CD paketinin açılması lisans anlaşmasını kabul ettiğiniz anlamına gelir. Yükleme talimatları için, CD içindeki (İngilizce) ReadMe dosyasına bakınız.

Macromedia Teknik Destek: http://www.macromedia.com/support

Uygulayarak Öğrenin:Macromedia Flash 8 Kaynağından Eğitim kitabı, zengin bir Flash arabirimi hazırlamak için bilmeniz gereken önemli bütün kavramları tanıtmaktadır. Uygulamalı dersler; kendi grafiklerinizi oluşturmayı, ortam öğelerini aktarmayı, metin kullanımını, animasyon oluşturmayı ve etkileşim eklemeyi öğrenirken size kılavuzluk edecektir. Bu kitapla, daha çekici bir uygulama yaratmak için video ve ses özelliklerini nasıl kullanacağınızı, ayrıca tümüyle işlevsel bir Flash uygulaması oluşturmak üzere ActionScript’i Script Assist’le kullanmayı öğreneceksiniz. Kitabın son bölümünde de çalışmalarınızı çeşitli formatlarda nasıl yayınlayacağınızı öğreneceksiniz.

Macromedia Flash 8 Kaynağından Eğitim kitabı, Flash 8 Basic’le birlikte tanıtılan yeni özellikleri ve Flash’ın eski sürümlerinin önemli özelliklerini öğrenirken iyi bir yol arkadaşı olacaktır. Flash kullanmaya yeni başlıyorsanız, bu kitap Flash dünyasındaki yolculuğunuz için mükemmel bir başlangıç noktası olacaktır.

CD’de Neler Var?Kitapla birlikte verilen CD-ROM, projeleri kendi başınıza oluşturmak için gereken her şeyi, ayrıca kendi sonuçlarınızı karşılaştırmak için kullanabileceğiniz ve gelecekteki projelerinizde örnek olarak faydalanabileceğiniz tamamlanmış ders dosyalarını içermektedir. CD-ROM’da ayrıca, Macromedia Flash 8’in deneme sürümünü de bulabilirsiniz.

Minimum Sistem Gereksinimleri

Windows®• 800 MHz Intel Pentium III ya da eşdeğer bir işlemci• Windows 2000 ya da Windows XP

Macintosh®• 600 MHz PowerPC G3 ya da daha iyi bir işlemci• Mac OS X 10.3 ya da 10.4

W/M CD-ROM

James English

macromedia®

Kaynağından Eğitim

FLASH®

8

Pratik Uygulamalarla 16-20 Saat İçinde Kendi Kendinize Öğrenin

Animasyonlar ve grafikler içeren bir arabirim hazırlayın.

Animasyonlar oluşturun.

Script Assist’i ve davranışları kullanarak etkileşim ekleyin.

Ses ve video kullanarak kullanıcılarınızın daha da memnun kalmasını sağlayın.

Metinler ve bileşenlerle Web formları oluşturun

Kayn

ağ

ınd

an

Eğ

itim

macro

media

®

FL

AS

H® 8

Macromedia Flash 8 Kaynağından Eğitim kitabıyla şunları öğreneceksiniz:• Macromedia Flash 8 geliştirme ortamını kullanarak

bir uygulama oluşturacaksınız.• Resimler, grafikler, semboller ve metinler kullanarak

bir kullanıcı arabirimi oluşturacaksınız.• Motion tween ve shape tween animasyonları

yaratacaksınız.• Seslerle ve videolarla çalışarak uygulamanızı daha

çekici bir hale getireceksiniz.• Uygulamanızı harici veri kaynaklarına bağlayacaksınız.• Kullanıcı bilgilerini toplayarak bunları bir sunucuya

göndereceksiniz.• Script Assist’i ve yerleşik davranışları kullanarak Flash

ActionScript’le etkileşim özellikleri oluşturacaksınız.• Uygulamanızı Web üzerinden yayınlayacaksınız.

Medyasoft Bilgi Sistemleri San. ve Tic. Ltd.

Gürsel Mah. Dünür Sk. No: 3 Bilişim Center 34384 Okmeydanı • İSTANBULTel : 0.212.220 54 52 • Faks: 0.212.210 52 78Web : http://www.medyasoft.com.trE-posta : kitap@medyasoft.com.tr

ISBN: 975-6675-32-2

kapak_flash8.indd 1 10.04.2006 18:59:52