Macromedia Flash 8 Dersleri [1,2,3,4,5,6]

BY/SUSKUN · 4 Şub 2010

Macromedia Flash 8 Dersleri 

folklorcu08 · 5 Şub 2010

Macromedia Flash 8 (Ders 1)

1 Temeller

Flash Basic 8 veya Flash Professionel 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ıştrabilirsiniz. Flash Player’ın yaygınlığı ve Flash’ın HTML’in sınırlarını tanımak zorunda
olmaması da Flash’ı Web siteleri İnşa etmek ve Web’den gelip PC’nizde çalışan uygulamalar
geliştirmek için ideal bir araç haline getirir.

İ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 anlatılacak dersler boyunca geliştireceğimiz örnek uygulamayı göreceğiz.

Bu Derste Öğrenecekleriniz:

 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.
 Projenizin son halini inceleyeceksiniz.

Flash 8’e Giriş

Macromedia Flash, Web sitelerinden PC tabanli eğitim modüllerine kadar her şeyi üretmenize imkân veren tasarım ve geliştirme uygulamasıdır. Flash’ın zengin çizim araçları ve nesne yönelimli scrip 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 itibari ile iki farklı yazılım modülünden oluşur. Düzenleme ortamı adını verbileceğimiz ilk kısım kendi uygulamalarınızı geliştirmek için kullandığınız bölümdür. Programın ikini 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.

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

İpucu: Flash eklentileri 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. Bu 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 ç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; derslerimiz boyunca ilerlerken bunların hepsini göreceksiniz. Oyüzden endişe etmeyin ve Flash’a dair çok değerli tecrübeler edineceğiniz bu serüvenin tadını çıkarmaya bakın.

Flash 8 Çalışma Alanı

Flash 8’i ilk kez açtigmizda göreceğiniz şey Start (Başlangic) sayfasıdır. Kendisi de bir SWF dosyası olan Start sayfasında Open a Recent Item (Son Kullanılan Ögelerden Birini Aç), Create New (Yeni 01uştur) ve Create from Template (Şablon Kullanarak Oluştur) seçenekleri bulunur. Sayfanın alt kısmında ise tanışma / eğitim modüllerinde linkler yer alır ve varsa Flash güncellemeleri görüntülenir.

İpucu: Açılış sayfasında Flash 8 güncellemelerini görebilmeniz için Internet’e bağlı olmanız gerekir. Internet 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 adlandinlan Flash çaliş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ışmalarınızda yer alan türn 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 pozisyonlan temsil ederler ve bir araya gelerek hareketin doğmasmı sağlarlar. Aşşağıdaki resimlerde görüldüğü gibi Flash 8’in Mac ve Windows platformlarmdaki çalişma alanını görüyorsunuz. Bu derste ve göreceğiniz diğer dersler boyunca çalışma alanında yer alan her şeyin nasıl kullanıldığını sırayla ögreniyor 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.

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 derslerin 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ördiiklerinize çok benzer. Flash menülerinde de Save (Kaydet), Copy (Kopyala), Paste (Yapi§tır) ve Help (Yardım) gibi komutlar bulunur. Bunlarm dışında menülerde Flash’a özgü komutlar da yer alır.
• Timeline (Zaman çizgisi): SWF dosyalan, 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 cı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 tiim 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 tiim 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 acık dosyalar arasında hızla geçiş yapabilir. Doküman sekmelerinin hemen altında yer alan düzenleme çubuğunun işleviyse neleri diizenlemekte olduğunuzu size göstermektir (örneğin sahneler, ekranlar, semboller, gruplanmiş öğeler gibi). Düzenleme çubuğu aynca iizerindeki bir açılır liste ile Stage’in ekrandaki büyüküğünü kontrol edebileceğiniz yakınlaştırma seçeneklerine ulaşmanızı sağlar.

İpucu: Stage, ekranı kaplar durumda değilken dokOman sekmelerini göremezsiniz. Simge durumuna kugultülmCi§ (Minimize edilmi§) durumda iken turn dokOmanlar gali§ma alanı etrafında ba§ibo§ ydzer durumdadır. Stage ba§lık gubuğunda Ekranı Kapla (Maximize) dOgmesine basarak sekmelere ve daha derli toplu bir görOnOme yeniden kavu§abilirsiniz.
• Properties denetçisi: O anda seçili olan nesneye (Stage, metin, diigme, 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.

ilk Flash 8 Dokümanınız

Flash ile çeşitli tiirlerde 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 tarifinidüşü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 çalişmamrzda 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.
Not: FLA dosyası aslında Flash uygulamanızın düzenlenebilir (edit edilebilir) halidir ve son kullanıcı için işlevsel bir uygulama olarak kullanılamaz veya Web üzerinden görüntülenemez. Siz bir tasanı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..
1. Flash’ı başlatın.
Windows altında Start (Başlat) > All Programs (Programlar) > Macromedia > Macromedia Flash 8 yolunu izleyerek Flash'i açabilirsiniz. Macintosh kullanıyorsanız Macromedia Flash 8’i Applications klasörü altında görebilir ve simgesine çift tıklayarak programı çalıştırabilirsiniz.
Kurulum sonrası Flash'ı ilk kez çalıştırdığınızda ürün aktivasyonu yapmanız gerekir. Aktivasyon basit bir işlemdir ve bir diyalog kutusu bu işlem esnasında takip etmeniz gereken adımları size söyler. Yazılım aktivasyonu hakkında detaylı bilgi igin www.macromedia.com/software I activation sayfasını ziyaret edebilirsiniz.
Flash varsayılan olarak Start (Başlangic) sayfası ile açılır. Bu sayfadaki seçenekleri kullanarak yeni bir Flash dokümam oluşturabilir veya doküman oluşturmak için hazır şablonları kullanabilirsiniz. En son kullandığımız dokümanlara yine Start sayfasmdan ulaşabilirsiniz.
2. Create New (Yeni Oluştur) başlığının hemen altındaki Flash ******** 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 ayarlan 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.

Not: Flash Basic 8 ile FLA ve ActionScript dosyalan oluşturabilirsiniz. Flash Professional 8’de ise bunlara ek olarak form uygulamaları, sunumlar ve Flash projeleri gibi doüdmanlar da oluşturabilirsiniz.
3. Yeni dokümanınız açıkken arka zemine (Stage’e) tıklayın. ******** Properties (Doküman Özellikleri) iletişim kutusunu kullanarak Stage’in boyutlannı 780 x 520 piksel yapın.
Properties (Özellikler) denetçisi şimdi sizin için de gerçek bir anlam kazanacak. Dokümanınızı açıp Stage’e tıkladıktan sonra Properties denetçisine bakın, bir Size (Boyut) düğmesi göreceksiniz. Bu düğmeye bastığınız anda ******** 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ı m e t a bilgilerdir (m e t a veri) ve bu yönleriyle HTML’deki m e t aetiketlere (m e t atag) benzerler. Amaçları, Web sitenizin (Flash SWF dosyalarının ve diğer öğelerin) arama motorlan tarafından bulunma ihtimalini artıran bilgilerin tutulmasına imkân sağlamaktır.
Pencereyi kapatmak için OK düğmesine basın.
4. Properties denetçisinde, dokümanınızın frame rate (kare gösterim hızı) değerini 21 fps olarak değiştirin.
Bunu biraz önce kapattığınız ******** Properties iletişim kutusunda iken de yapabilirdiniz; ancak
böyle durumlarda ilk tercihiniz Properties denetçisi olsun.

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..
Not : 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çlan 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.)
İpucu: 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 Ayarlan) 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.)
İpucu: Çalışmanız, Flash 8’den önceki bir Flash Player sürümünee yönelikse Publish
Settings düğmesine basın ve hedeflediğiniz sürümü hemen şimdi, dökü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 > Farkh Kaydet) komutunu segin ve dosyayı bookstorel.fla adıyla kaydedin.
Dosyayı kaydetmeden önce masaüstünde TechBookstore adlı bir klasör oluşturun. Tüm dosyalarınızı bu klasöre kaydedeceksiniz. Dosyanızı bookstorel.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 segin ve henüz kaydetmiş olduğunuz dokümam kapatın.
Ancak çalışmanızı sıradaki uygulamalarla sürdürmek istiyorsanız dokümanınızı kapatmak zorunda değilsiniz.

Paneller

Birkaç sayfa önce panellerden kısaca söz etmiştik Son yaptığımrz 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 > Ag) komutunu verin ve sabit diskinize kaydetmiş olduğunuz
bookstorel.fla dokümanını açın.
Eğer bir önceki uygulama sonrası bookstorel.fla dosyasını kapatmadıysanız bu adımı pas geçebilirsiniz.

İpucu: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 sizing 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ığımı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 tutacagı 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.

Window menüsünden bir panel seçtiğiniz zaman bu panel çalışma alanınızda rasgele bir yerde açılacak, acık olan diğer panellerin yanında sabit olmayacaktır. Yeni açtığımı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şagı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 acı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şagı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 bashkgubuğ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şagıya doğru açabilir veya sadece başlık çubuğu görünür olacak şekilde kısaltabilir / kapatabilirsiniz.
İpucu : 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ığımızda panelleri çoğu zaman klavye kısayollan 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.

7. Components (Bileşenler) panelinin Options (Segenekler) menüsünü agin.
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 Cıkar) ve Close Panel (Paneli Kapat) komutlan 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 - Segim 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 list sırasında yer alan düğmeleri kullanın.

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 diigmeniz Stage’in merkezine yerleştirilmiş olur.
10. ihtiyacınız oldukça diğer panelleri de Window menüsünden açın.
Kitabımrz boyunca Actions (Eylemler) panelini sık sık kullanacagiz, eğer afik 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 yapacagimızı göreceğiz.
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) alanma TechBookstore yazın ve OK düğmesine tıklaym. Böylece çalişma alanının mevcut yerleşimini en son açtığımı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ğımız diğer değişikliklerin de kalıcıı olması için yerleşim düzenini yine aynı isimle kaydetmeniz yeterlidir.
İpucu: Panel yerleşim düzenlerini silmek veya yeniden adlandırmak igin 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 uygulamamamız Timeline ve kareler (frame’ler) ile ilgili. Çalışmanızı kaydetmeyi unutmayın.

folklorcu08 · 5 Şub 2010

Timeline (Zaman Çizgisi) ve Kareler

SWF dosyalarındaki her şey bir Timeline (zaman çizgisi) iizerine 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öriintü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 tamamlanı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'm aynı çalışma içinde nasıl varolabildiğini Ders 4’te öğreneceksiniz.
Şimdiki uygulamamızda Timeline'i kullanmayı, kareleri seçmeyi, taşımayı ve silmeyi öğreneceğiz. Çalişmamızı yine bookstore2.fla dosyası üzerinde yapacağız.

1. Timeline açık değilse Window > Timeline komutu ile onu açın.
Flash'i başlattığımı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.

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

2. Katman isimlerini görmek igin 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.

İpucu: 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'in 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ürn dolu ve boş karelerin küçük resimler (thumbnail) halinde izlenebilmesini sağlar; bu özellik animasyon hazırlarken çok işinize yarayabilir çünkü animasyonun zamana baglı 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ırakacagiz.

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.

Not : Timeline's 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.

İpucu: Kare ve anahtar kare oluşturmak igin menü komutlarını ya da klavye kısayollarını kullanabilirsiniz. Bir kare konumuna sağ tıkladığımı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 l’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 bos. 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. Iç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.
Yukandaki 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ürn 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ürn kareleri seçmek istiyorsanız bir kare üzerine sağ tıklayın ve Select All Frames (Türn Kareleri Seç) komutunu verin.

Layer l’de 2 ve 3 no’lu kareleri seçin ve bunları farenizle 4 ve 5 no’lu karelere sürüleyip 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şletildiğ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.

Not: Timeline’da bir anahtar kareyi seçtiğinizde bu anahtar karenin taşıdığı turn 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.

Not: Cut komutu istenilen yere yapıştınlabilsin 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ıi 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 acı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.

folklorcu08 · 5 Şub 2010

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.

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_l gibi hiç açıklayıcı olmayan bir isim vermek yerine sabit_metin gibi daha anlamlı bir isim vermelisiniz.

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

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

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.

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

İpucu: 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. Aynca 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 katmanlan 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ü acı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.
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.

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

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ığmızda hem katmanın kendisi hem de katmandaki tüm içerik silinecektir.

İpucu: Katman ismine sağ tıklayıp Delete Layer seçeneğine tıklayarak da katmanı silebilirsiniz.

11. Çalışmanızı kaydedin.

folklorcu08 · 5 Şub 2010

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 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 (Uyanlar) 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 ********-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: ********-level Undo, seçimler dahil doküman üzerinde yapılan her değişikliği tek bir geçmiş islemler 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.

General sayfasında bu iki Undo metodu arasında geçiş yaptigmiz zaman ekrana bir uyarı penceresi gelir ve size bu geçişin o ana kadar tutulan geçmis. işlemler listesinin silinmesine yol açacağı, ancak dosyanızı etkilemeyeceği hatırlatılır.

İpucu: 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şlangiç Sayfasını Göster) şeklindeki On launch(Açılış) seçeneğini istiyorsanız Last ********s open olarak değiştirin.

Bu tercihi yaparsanız Flash'i 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.

folklorcu08 · 5 Şub 2010

Bir FLA Dosyasının Test Edilmesi

Bir Flash dosyasnı Web üzerinden paylaşmanın en iyi yolu dosyayı Flash Player'ın görüntüleyebileceği bir formatta yaymlamaktır. Dosyamzı 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 ll’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ığımızda dokümanınızın SWF sürümünün de oraya kaydedilmiş olduğunu göreceksiniz.

5. Çalışmanızı bir Web tarayıcısında görmek için File > Publish Preview (Yayın Ön izleme) > Default (Varsayılan) komutunu verin.

Publish Preview ile çalısmanı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ı yukardaki 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 HTMLde hem OBJECT hem de EMBED etiketleri ile belirtilmis. ve Flash'ın koda ilişkin tüm parametreleri sizin için doldurmuş olduğuna dikkat edin.

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.

folklorcu08 · 5 Şub 2010

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ğı acılır bir konu listesi, tüm kategori başlık ve alt başlıklarının yer aldıgı 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 konulan şunlardır:

• Features (Özellikler)
• Tutorials & Samples (Rehberler & Örnekler)
• ActionScript 2.0
• Components (Bileşenler)
• Extending (Genişleme İmkânları)
• Language Reference (ActionScript and Components)
• Flash Lite
• 3rd Party (Üçüncü Partiler)

1. Yardım panelini açmak için ana menüden Help > Flash Help komutunu verin veya klavyeden F1’e basın.

Yardım panelini ve içeriğini inceleyerek ihtiyacmiz olduğunda neyi nasıl arayabileceğiniz hakkında fikir edinmeye çalışın.

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.

İpucu: 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çlan Iç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 Rash Support Center’ı (Flash Destek Merkezi) seçin.

Bu komut sizi Macromedia’nın Flash destek sayfasına ***ürür. Burada Flasha ilişkin çeşitli makaleler, ipuçları ve cevaplar bulabilirsiniz. Aradığmız bilgiyi Flash’ın yardım dokümantasyonunda bulamıyorsanız Web’deki kaynaklara, özellikle Macromedia’nın sitesine bakmayı da ihmal etmeyin

folklorcu08 · 5 Şub 2010

Projemizi inceleyelim

Bu derslerin sonuna geldiğinizde bütütünyle 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.

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 üc 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 şunları öğrendiniz:

• Flash geliştirme ortamı ile tanıştık.
• Flash dokümanları oluşturmayı ve bunları kaydetmeyi öğrendik.
• Panellerle çalıştık.
• Timeline üzerinde kare ve katmanları kullandık, değiştirdik.
• içeriği organize etmek için katmanlardan faydalandık.
• Kendi ayar ve tercihlerimizi belirledik.
• FLA dosyamızı test ettik.
• Yardım seçeneklerimizin ne olduğunu öğrendik.
• Dersler boyunca inşa ediyor olacağımız projenin bitmiş halini inceledik.

folklorcu08 · 5 Şub 2010

Macromedia Flash 8 (Ders 2)

B]Grafikler

Bir uygulama ya da doküman grafiklerin yokluğunda ne kadar güzel olabilir? Grafikler, kullanıldıkları her arabirimde görsel ipuçları sağlamak, uygulamayla etkileşimde bulunmak ve duyguları harekete geçirmek gibi önemli roller üstlenirler. Evet, grafik öğeleri kullanmadan da Macromedia Flash uygulamaları geliştirebilirsiniz, ancak bu durumda uygulamalannı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 aralıklarını kullanarak kendi grafiklerimizi oluşturmayı öğreneceğiz. Aynca 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ü, derslerimiz 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.

[/b]

Bu derste şunları öğreneceksiniz:

• Tools (Araçlar) panelini kullanacağız.
• Kenar çizgilerini (stroke) ve dolguları (fill) tanıyacağız.
• Object Drawing (Nesne Çizim) modelini göreceğiz.
• Çizim araçlarıyla grafik oluşturacağız
• Kılavuzları ve kenetlenme (snapping) özelliğini tanıyacağız.
• Grafikler üzerinde işlem 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.

folklorcu08 · 5 Şub 2010

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.

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

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.

folklorcu08 · 5 Şub 2010

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.

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.

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

folklorcu08 · 5 Şub 2010

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

folklorcu08 · 5 Şub 2010

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

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

İpucu: Ç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.

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.

folklorcu08 · 5 Şub 2010

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

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

1. Sabit diskinizdeki TechBookstore klasöründen 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.

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

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.

İpucu: Ç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.

Not: Object Drawing modeliyle çizilmiş bir nesneye çift tıklarsanız bir bakıma o nesneye nüfuz etmiş olursunuz. Bu durumda düzenleme çubuğunda, Scene 1’in hemen sağında bir Drawing Object etiketi belirir. Object Drawing modeliyle çizdiğiniz nesneler bir kutuya dizilen eşyalar misâli bir şekilde gruplandırılır; nesneye çift tıklamak içeriğini değiştirmek üzere kutuya ulaşmanıza imkân sağlar. Drawing Object tekniğiyle düzenleme yapmak birkaç koşulda avantaj sağlasa da pek çok değişikliği bu tekniği kullanmadan da yapabilirsiniz. Drawing Object modundan çıkmak için Stage üzerinde boş bir yere çift tıklayabilir ya da düzenleme çubuğunda Scene 1’i seçebilirsiniz.

3. Properties denetçisini kullanarak dikdörtgenin genişliğini 779 piksel, yüksekliğini de 15 piksel yapın.

Stage üzerindeki bir nesneyi seçtiğinizde nesnenin genişlik ve yükseklik değerlerini Properties denetçisinin sol alt köşesinde W (width) ve H (height) ile belirtilen alanlarda görebilirsiniz. Burada görmüş olduğunuz değerleri değiştirebilirsiniz. Şeklin genişlik/yükseklik oranını korumak istiyorsanız W ve H alanlarının hemen solundaki kilit simgesine tıklayıp kilidi kapatmanız yeterlidir. Nesnenin Stage üzerindeki x ve y koordinatlarını da değiştirebilirsiniz. x ve y koordinatları varsayılan olarak şeklin sol üst köşesine göre belirlenir.

Kilit simgesi açık haldeyken W alanına tıklayın, 779 yazın ve Enter’a basın. Şimdi de H alanına 15 girin ve Enter tuşuna basın. Dikdörtgenin boyutlarının değiştiğini göreceksiniz.

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 100 yapın. Böylece daha sonra kullanacağımız logoya uygun bir elips elde etmiş olduk.

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

folklorcu08 · 5 Şub 2010

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

Not: 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ılavuzla (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.

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

Derslerimiz boyunca nesneleri kılavuzlara kenetlenmiş olarak kullanacağız (Guides penceresinde Snap to guides işaretli olacak).

folklorcu08 · 5 Şub 2010

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.

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

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.

İpucu: İ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 üzereolduğ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.

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.

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.

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

İpucu: Ç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.

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.

İpucu: Tools panelindeki Zoom aracına çift tıklayarak da sayfayı 100% boyutuna getirebilirsiniz.

9. Çalışmanızı kaydedin.

folklorcu08 · 5 Şub 2010

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.

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 a arasında kalacak ve onlara kenetlenecek şekilde bir dikdörtgen oluşturun. Şimdi mask katmanına sağ tıklayın ve açılan menüden Mask komutunu verin. Bu komutun ardından Layers panelinde menu katmanındaki katman ismi otomatik olarak sağa kaydırılır: Bu durum menu katmanının artık maskelenmiş olduğunu gösterir.

3. mask katmanının kilitlendiğinden emin olun ve kılavuzları kaldırın.

Flash’ta bir maske hazırladığınızda maske katmanı ve maskelenen katman otomatik olarak kilitlenir. Bu, maskenin düzenleme ortamında düzgün bir şekilde çalışmasını sağlar. Bu katmanlardan herhangi birinin kilidini açtığınızda maske grafiği yeniden görünür olur ve maskelenmiş katmanın içeriğini yeniden konumlayabilir ya da maskeleyen katmanın içeriğini yeniden şekillendirebilirsiniz. Katmanlar kilitli durumdayken filmi test etmeniz halinde de maske yine beklendiği gibi davranır. (Control > Test Movie, Ctrl+Enter veya OS X altında Cmd+Enter ile filmi test edebilirsiniz.) Filmi test etmek şu aşamada çok anlamlı değil çünkü maskelenen katmana henüz içerik yerleştirmiş değiliz.

mask katmanının kilitlendiğinden emin olun. Katmanın Show/Hide All Layers (Katmanları Göster/ Gizle) sütununda yer alan siyah noktasına da tıklayın; böylece katmanı aynı zamanda gizlemiş de oluyoruz. Son olarak, kılavuzlara şimdilik ihtiyaç duymayacağımız için View > Guides > Clear Guides (Kılavuzları Temizle) komutuyla onları hızlı bir şekilde cetvellere geri gönderin.

folklorcu08 · 5 Şub 2010

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.

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.

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

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.

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.

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

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

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.

folklorcu08 · 5 Şub 2010

Macromedia Flash 8 (Ders 3)

Metinler

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

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

folklorcu08 · 5 Şub 2010

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.

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

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

Macromedia Flash 8 Dersleri [1,2,3,4,5,6]

Uzman üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye