A-PDF Split DEMO : Purchase from www.a-pdf.com to remove the watermark 2 Grafikler Bir uygulama ya da doküman grafiklerin yokluğunda ne kadar güzel olabilir? Grafikler, kullanıldıkları her arabirimde görsel ipuçları sağlamak, uygulamayla etkileşimde bulunmak ve duyguları harekete geçirmek gibi önemli roller üstlenirler. Evet, grafik öğeleri kullanmadan da Macromedia Flash uygulamaları geliştirebilirsiniz, ancak bu durumda uygulamalarınızın hiçbir hayat belirtisi taşımayacağını da bilmelisiniz. Görsellik insanoğlu olarak doğamızda vardır. Bu dersimizde Flash taki çizim araçlarını kullanarak kendi grafiklerimizi oluşturmayı öğreneceğiz. Ayrıca hazır resimleri nasıl kullanabileceğimizi de göreceğiz. Bu derste oluşturacağımız ya da hazır kullanacağımız grafiklerin tümü, kitabımız boyunca geliştirmekte olacağımız projenin ana sayfa taslağı, logo animasyonu ve menü sisteminde rol alacak. Grafikler üzerinde işlemler yapmak için Flash taki araç ve panellerden faydalanmak ve maske efektleri oluşturmak için katmanları kullanmak da bu dersin diğer konuları arasında. Son olarak, elimizdeki öğeleri organize etmek için Library (Kütüphane) panelini nasıl kullanabileceğimizi öğreneceğiz. Tamamlanmış arka plan
Bu Derste Öğrenecekleriniz Bu derste şunları öğreneceksiniz: Tools (Araçlar) panelini kullanacağız Kenar çizgilerini (stroke) ve dolguları (fill) tanıyacağız Object Drawing (Nesne Çizim) modelini göreceğiz Çizim araçlarıyla grafik oluşturacağız Kılavuzları ve kenetlenme (snapping) özelliğini tanıyacağız Grafikler üzerinde işlemler yapacağız Bir maske katmanı (mask layer) oluşturacağız Kütüphane hakkında bilgi edineceğiz Bitmap resimlerle ve vektörel çizimlerle çalışacağız Dolgu ve degradeler uygulayacağız Yaklaşık Süre Bu dersi yaklaşık bir buçuk saatte tamamlayabilirsiniz. Gerekli Dosyalar Ortam Dosyaları: lesson02/assets/company_down.png lesson02/assets/company_up.png lesson02/assets/contact_down.png lesson02/assets/contact_up.png lesson02/assets/products_down.png lesson02/assets/products_up.png lesson02/assets/title.png lesson02/assets/logo.png lesson02/assets/map.fh11 Başlangıç Dosyaları: lesson02/start/bookstore3.fla Tamamlanmış Dosyalar: lesson02/complete/bookstore6.fla lesson02/complete/ma.fla 32 DERS 2
Tools (Araçlar) Paneli Bir önceki dersimizde Tools paneliyle tanışmış ve buradaki birkaç aracı kullanmıştık. Şimdiki dersimizde bu paneldeki çizim araçlarına daha yakından bakacağız. Tools paneli dört ana bölüme ayrılmıştır: Tools (Araçlar), View (Görünüm), Colors (Renkler) ve Options (Seçenekler). Bu bölümlerde görmüş olduğunuz düğmelerin hepsinin ayrı birer ismi ve görevi vardır. Fare imlecini düğmelerin üzerine getirip çok kısa bir süre bekleterek açıkça yazılı olmayan bu düğme isimlerini görebilirsiniz. Sağ alt köşelerinde minik bir ok simgesi taşıyan düğmeler kendilerine ait bir menüye sahiptir; örneğin Rectangle Tool (Dikdörtgen Aracı) düğmesine tıklar ve farenin tuşunu basılı tutarsanız bu düğmeye ait menüyü görebilirsiniz. Seçili araç Araçlar Açılır menü Görünüm Renkler Seçenekler (Değiştiriciler) Tools panelinde yer alan araçlar grafikler oluşturmak ve grafikler üzerinde çeşitli işlemler yapmak için kullanılır. Ayrıca Stage deki görünümü ya da Stage in ve üzerindeki öğelerin konumlarını değiştirmek için de buradaki araçlardan faydalanırız. Bazı araçlar ilave seçeneklere sahiptir; bu ek seçenekleri ilgili araç seçili olduğu zaman panelin en altındaki Options kısmında görebilirsiniz. Tools panelinden bir araç seçimi yaptığınızda Properties denetçisinin içeriği o araca ait özellikleri yansıtacak şekilde değiştir. Örneğin Text (Metin) aracını seçerseniz Properties denetçisinde metne GRAFİKLER 33
ait olan (ve değiştirebileceğiniz) bilgiler görüntülenir (metin türü, yazı tipi, sayfa yerleşimi, vs). Bir çizim aracı seçtiğinizde Properties denetçisi kenar çizgisi ve dolgulara ilişkin seçenekleri görüntüler. Seçim (Selection) Serbest dönüşüm (Free Transform) Çizgi (Line) Dolmakalem (Pen) Elips (Oval ) Kurşunkalem (Pencil) Mürekkep şişesi (Ink Bottle) Damlalık (Eyedropper) Alt seçim (Subselection) Degrade dönüşüm (Gradient Transform) Kement (Lasso) Metin (Text) Dikdörtgen / Çokgen (Rectangle / Polystar) Fırça (Brush) Boya kovası (Paint Bucket) Silgi (Eraser) El (Hand) Siyah / beyaz (Black and white) Nesnelere kenetlen (Snap to Objects) Büyüteç (Zoom) Kenar çizgisi rengine (Stroke color) ilişkin kontroller Dolgu rengine (Fill color) ilişkin kontroller Renkleri değiştir (Swap colors) Renksiz (No color) Selection, Subselection ve Lasso araçları Stage deki öğeleri seçmek; Line, Pen, Text, Oval, Rectangle, Polystar, Pencil ve Brush araçları grafik oluşturmak; Free Transform, Fill Transform, Ink Bottle, Paint Bucket, Eyedropper ve Eraser araçları da grafikleri değiştirmek için kullanılır. View alanında gördüğünüz Hand aracı Stage i çeşitli yönlerde hareket ettirmek, Zoom aracı da Stage in görünümünü büyütmek ya da küçültmek için kullanılır. Colors alanındaki kontroller şekil oluştururken kenar çizgisi veya dolgu renklerini belirlemenizi sağlar. Ayrıca seçili durumdaki her araç için Options alanında ve/veya Properties denetçisinde ilave denetimler bulunur. Dolgular ve Kenar Çizgilerini Tanıyalım Flash 8 de bir şekil çizim aracı kullanarak ister ayrı ayrı ister bir arada dolgular (fill) ve kenar çizgileri (stroke) oluşturabilirsiniz. Kenar çizgileri oluşturmak için Line ve Pencil araçları kullanılır. Kenar çizgileri farklı stil, kalınlık ve renklerde olabilir. 34 DERS 2
Kenar çizgilerini şekillerden bağımsız olarak çizebilirsiniz; bir şekil aracı seçtikten sonra dolgu rengini etkisiz hale getirir (Fill color düğmesi basılı iken No color seçimi yaparak) ve ardından bir kenar çizgisi rengi belirlerseniz (Stroke color düğmesiyle açılan menüden) seçmiş olduğunuz şeklin kenarlarını Stage üzerinde çizebilirsiniz. Oluşturduğunuz bir kenar çizgisini değiştirmek için Ink Bottle aracını kullanabilirsiniz; bunun için aracı seçin, Properties denetçisinden çizginin görünümüne ilişkin dilediğiniz değişiklikleri yapın ve sonra da araçla çizginin üzerine tıklayın. Kenar çizginizin değiştiğini göreceksiniz. Brush aracını kullanarak dolgu oluşturabilir, yani kapalı ya da açık bir şeklin içini doldurabiliriz. Düz renkler, çizgisel ya da dairesel degradeler veya bitmap resimler dolgu olarak kullanılabilir. Daha önce kenar çizgilerini belirlediğimiz kapalı bir şeklin içini Paint Bucket aracıyla anında doldurabiliriz. Oval, Rectangle veya Polystar gibi şekil araçları varsayılan olarak hem kenar çizgileri hem de dolgusu olan şekiller oluşturur. Tools panelinde Color kısmında Stroke color kontrolünü No color yaparak kenar çizgilerinin çizilmesini engelleyebilirsiniz. Kenar çizgisi olmayan dolgulara Ink Bottle aracıyla tıklarsanız onların da kenar çizgileri oluşturulur. Stage üzerinde bir şekil ya da kenar çizgisi oluşturmak için kullanabileceğiniz iki farklı çizim modeli vardır: Varsayılan teknik olan Merge Drawing (Birleşik Çizim) modeli ve alternatif teknik olan Object Drawing (Nesne Çizim) modeli. Merge Drawing modelinde bir şekli başka bir şeklin üstüne koymanız halinde bu iki şekil birleştirilir. Bu durumda üstteki şekli alttakinden ayırırsanız, alttaki şeklin biraz önce üstteki şekil tarafından kaplanmış olan bölümünün kesildiğini görürsünüz. Merge Drawing modelinde kenar çizgileri ve dolgular farklı nesneler olarak işlem görürler. Örneğin hem kenar çizgileri hem de dolgusu olan bir şeklin ortasına tıklayıp farenizi sürüklediğiniz zaman kenar çizgileri yerinde kalır ancak şeklin içi (dolgusu) taşınır. Şekli kenar çizgileriyle birlikte taşımak için ortasına çift tıklamanız gerekir. Birleşik çizim Kenar çizgisi ve dolgu birbirinden ayrı Bu birleştirme mantığı ilk bakışta kafanızı karıştırabilir veya kenar çizgileri ile dolguların ayrı işlem görmesi size garip gelebilir. Ancak tecrübeniz arttıkça bu yöntemle normalden çok daha ilginç şekil ve efektler üretebileceğinizi fark edeceksiniz. Yine de kendinizi bu teknikle ilgili çok rahat GRAFİKLER 35
hissetmiyorsanız değişik çözümler mevcut: Şekilleri gruplandırabilir, grafiklerinizi farklı katmanlarda çizebilir veya Object Drawing modelini kullanabilirsiniz. Object Drawing modelinde her bir şekil ayrı birer nesnedir. Bu durumda şekiller birbirleri üzerine konulsalar dahi birleşmezler ve altta kalan şekillerin kesilmesine yol açmazlar. Tools panelinde bir şekil aracı seçiliyken Options kısmında görülen Object Drawing düğmesine basarak Object Drawing modelini kullanabilirsiniz. Merge Drawing modeliyle çizilmiş nesne Object Drawing modeliyle çizilmiş nesne Vektörel Grafikler ve Bitmap Resimler Flash ta yaptığınız çizimlerin tümü vektöreldir: Grafikleri oluşturan çizgi ve eğriler matematiksel fonksiyonlarla hesaplanır. Vektörel grafikler Flash ın doğal çizim formatıdır. Buna karşın bitmap resimler ise boyutları sabit olan piksellerden meydana gelir. Vektörel grafikler gerçekte sadece 36 DERS 2
matematiksel fonksiyonlardan ibaret olduğundan genellikle daha düşük bir dosya boyutuna sahiptir. Ancak çizimin karmaşıklığı ve içerdiği öğeler arttıkça vektörel grafik dosyasının boyutu da hızla artar, bitmap resimlere olan ihtiyaç da bu noktada kendini belli eder. Bol miktarda ton farkı, degrade ve gölge efekti içeren karmaşık bir grafiğin bazen bitmap bazlı çizilmesi daha uygundur, böylece dosya boyutu makûl bir seviyede tutulabilir. Fotoğrafların da bitmap olması daha doğrudur. Bu iki formatın her biri diğerine dönüştürülebilir. Vektör formatının en büyük avantajı çizimlerin büyütülmesi ya da küçültülmesi gerektiğinde ortaya çıkar. Vektörel bir grafiğin boyutunu değiştirdiğinizde aslında yaptığınız şey o grafiği çizen denklemi değiştirmektir; grafiği ister küçültün ister büyütün hiçbir çözünürlük kaybı yaşamazsınız. Bitmap resimlerin böyle bir avantajı yoktur çünkü sabit büyüklükteki bir ızgara üzerinde yer alırlar; ızgarayı büyüttüğünüz zaman pikseller de büyür ve sonuçta ortaya bozulmuş, çirkinleşmiş bir görüntü çıkar. Piksellerin büyümesiyle birlikte görüntü kalitesi ve keskinliği kaybolur. Hatta bu kalite kaybı bazen pikselleri küçülttüğünüzde dahi fark edilebilir. Renklerin Kullanımı Flash ta renk seçimleri paletler aracılığıyla yapılır ve kullanımınıza hazır çeşitli renk paletleri bulunur. Bunlara ek olarak Color (Renk) panelini kullanarak kendi renklerinizi de oluşturabilir ve kaydedebilirsiniz. Kitabımız boyunca oluşturacağımız Tech Bookstore Web sitesi için 216 renk içeren Web 216 paletini kullanacağız. Bu paletten seçeceğiniz renkler neredeyse her bilgisayarda düzgün bir şekilde görüntülenebilir. Color Mixer ile paletlere özel renkler de ilave edebilirsiniz. Bunun için yapmanız gereken tek şey Color Mixer sayfasından rengi dilediğiniz gibi ayarladıktan (veya Eyedropper aracı ile Flash ta bir öğenin rengini seçtikten) sonra Color panelinin Options menüsünden Add Swatch (Renk Örneği Ekle) komutunu vermek. Belirlemiş olduğunuz yeni renk açmış olduğunuz paletin alt satırında yeni bir renk örneği olarak görünecektir. GRAFİKLER 37
Web 216 (Web Safe yani Web güvenli olarak da bilinir) renk paleti monitörlerin sadece 256 rengi destekleyebildiği bir dönemde geliştirilmişti. Mac ve PC ler farklı renk sistemleri kullanıyordu ve sadece bu 216 renk her ikisinde de ortaktı. Bugünse cep telefonları ve PDA ler dahil neredeyse her cihaz on binlerce rengi ve daha fazlasını destekleyebiliyor. Bu durumda çok ilkel bir araca yönelik uygulamalar tasarlamadığınız sürece istediğiniz rengi kullanabilirsiniz. Çalışmanızda bir GIF dosyasındaki renkleri de kullanabilirsiniz. Bunun için Color panelinin Options menüsünden Add Colors komutunu verdikten sonra renklerini kullanmak istediğiniz dosyanın yerini belirtmeniz yeterli. Paletlerdeki renkleri şekilleri doldurmak, kenar çizgilerine uygulamak veya Stage in arka plan rengini değiştirmek için kullanabilirsiniz. Renkleri tanımlamanın çeşitli yolları vardır. RGB (Red/Gren/Blue Kırmızı/Yeşil/Mavi), HSB (Hue/Saturation/Brightness Ton/Doygunluk/ Parlaklık) veya standart onaltılık (hexadecimal) değerler kullanarak renkleri belirleyebilir ya da değiştirebilirsiniz. Bu yöntemlerin her biri renkleri tanımlamak için farklı değerler kullanır. RGB ve HSB arasında her an geçiş yapabilirsiniz. Onaltılık değerler seçeneğini de her zaman kullanabilirsiniz. RGB metodunda renkler her biri 0-255 arasında olan üç sayı ile tanımlanır. HSB metodunda H 0º-360º arasında yer alan, renk çemberindeki dönüş miktarını gösteren açısal bir değerdir. S (doygunluk) ve B (parlaklık) ise yüzdesel değerler alır. Onaltılık değerler yönteminde ise renklerin tanımlanması için rakam ve harflerden oluşan altı karakterlik bir değer kullanılır. Renklerin onaltılık değerlerle tanımlanması Web için kullanılan standart metod olduğundan HTML kod yazdıysanız bu değerler size tanıdık gelebilir. Bu derste ve kitapta renkler için onaltılık değerler kullanacağız ancak aynı renkleri varsayılan renk paletini (Web 216) kullanarak da seçebilirsiniz. RGB değerleri Onaltılık (hexadecimal) değer 38 DERS 2
HSB değerleri Onaltılık (hexadecimal) değer Kenar çizgileri ya da dolgularınızın rengini Tools panelinin Colors bölümünde yer alan kontrolleri (veya Properties denetçisini) kullanarak belirleyebilirsiniz. Kenar çizgileri için Stroke color ya da dolgular için Fill color düğmesine bastığınızda bir renk paleti açılır ve fare imleci Eyedropper (Damlalık) aracına dönüşür. Palet, Stage veya masaüstündeki bir rengin üzerine Eyedropper ile tıklayarak o rengi seçebilirsiniz. Tools panelindeki Eyedropper aracı da aynı şekilde kullanılır. Farklı renkleri hızlı bir şekilde karşılaştırmak veya başka bir programdaki (Fireworks gibi) çalışmanızdan renk almak için de Eyedropper aracını kullanabilirsiniz. Çizim Araçlarını Kullanarak Grafik Oluşturalım Şimdi temel çizim araçlarını kullanarak Tech Bookstore uygulamamız için ilk grafiklerimizi oluşturacağız. Flash 8 ile gelen temel çizim araçlarını ve çeşitli hazır bileşenleri kullanarak başka bir uygulamaya hiç gerek duymadan zarif arabirimler geliştirebiliriz. Daha karmaşık ve üst düzey grafikler oluşturmak istiyorsanız Macromedia Fireworks veya Macromedia FreeHand gibi bir uygulamaya ihtiyacınız olabilir. Bu uygulamalar hem daha çok sayıda filtreye hem de daha gelişmiş düzenleme ve efekt kontrollerine sahiptir. Yine de Flash ın tek başına neler yapabileceğiyle sizi şaşırtacağına emin olabilirsiniz. Şimdi yapacağımız alıştırmada bir şekil oluşturmak için Flash ın temel çizim araçlarını nasıl kullanabileceğimizi ve şeklin kenar çizgileri ile dolgusunun rengini nasıl belirleyebileceğimizi öğreneceğiz. Şekli seçtikten sonra Properties denetçisinden nasıl değiştirebileceğimizi de göreceğiz. GRAFİKLER 39
1. Sabit diskinizdeki TechBookstore klasöründen veya CD deki Lessons\lesson02\start\ dizininden bookstore3.fla dosyasını açın ve bookstore4.fla ismiyle kaydedin. Publish Settings ekranında Formats sekmesine tıklayın, burada HTML seçeneğindeki işareti kaldırın. Doküman üzerinde birtakım önemli değişiklikler yapacağız, o yüzden dosyayı farklı bir isimle sabit diskimizdeki TechBookstore klasörüne yeniden kaydediyoruz. File > Publish Settings komutuyla veya Properties denetçisinden Publish Settings düğmesine basarak Publish Settings iletişim kutusunu açın. Formats sekmesine gelin ve HTML kutusundaki işareti kaldırın. Dokümanımızda yaptığımız her değişikliğin ardından yeni bir HTML dosyası üretilsin istemiyoruz. Ders 11 de bir HTML dokümanı oluşturacağız. 2. Tools panelinden Rectangle aracını seçin ve Colors kısmındaki kontrolleri kullanarak dolgu rengini #CCCCCC, kenar çizgisi rengini de #666666 yapın. Object Drawing modeli kullanarak bir dikdörtgen çizin. Rectangle aracını seçtikten sonra kenar çizgisi ve dolgu rengini 3 yerden değiştirebilirsiniz: Tools panelinin Colors bölümünden, Properties denetçisinden ve Color Mixer penceresinden. Properties denetçisindeki veya Tools panelinin Colors bölümündeki Fill color düğmesine tıklayın. Bir renk paleti açılacaktır. Bu palette gördüğünüz renklerden birini seçebilir veya paletin sol üst köşesindeki beyaz alana elle onaltılık renk kodunu girebilirsiniz. Beyaz alan tıklayın ve #CCCCCC yazıp Enter a basın, bu sizin dolgu renginiz olacak. Sonra da Stroke color düğmesine tıklayın, açılan paletteki beyaz alana bu kez #666666 yazın ve Enter a basın, bu da kenar çizginizin rengi olacak. Renk paletinden alfa (alpha) değerini de belirleyebilirsiniz. Alfa değeri şeklin saydamlık düzeyini belirtir ve 0 ile 100 arasında değişen yüzdelik bir değer alır. 40 DERS 2
Kenar çizgisi ve dolgu rengi ayarlarını yaptıktan sonra Rectangle aracı hâlâ seçili durumdayken Tools panelinin Options alanındaki Object Drawing düğmesini aktifleştirin. Ardından farenizi Stage üzerinde boş bir yere tıklayın ve sürükleyin. Fare düğmesini bıraktığınızda dikdörtgeniniz çizilmiş olacaktır. Dikdörtgenin boyutlarını daha sonra Properties denetçisinden değiştireceğiz. Çizmiş olduğunuz şeklin kenar çizgisi ve dolgu renklerini Tools paneli Colors bölümündeki kontroller ile dilediğiniz zaman değiştirebilirsiniz. Kenar çizgisinin stil ve boyutunu nasıl değiştirebileceğimizi de biraz sonra öğreneceğiz. Object Drawing modeliyle çizilmiş bir nesneye çift tıklarsanız bir bakıma o nesneye nüfuz etmiş olursunuz. Bu durumda düzenleme çubuğunda, Scene 1 in hemen sağında bir Drawing Object etiketi belirir. Object Drawing modeliyle çizdiğiniz nesneler bir kutuya dizilen eşyalar misâli bir şekilde gruplandırılır; nesneye çift tıklamak içeriğini değiştirmek üzere kutuya ulaşmanıza imkân sağlar. Drawing Object tekniğiyle düzenleme yapmak birkaç koşulda avantaj sağlasa da pek çok değişikliği bu tekniği kullanmadan da yapabilirsiniz. Drawing Object modundan çıkmak için Stage üzerinde boş bir yere çift tıklayabilir ya da düzenleme çubuğunda Scene 1 i seçebilirsiniz. 3. Properties denetçisini kullanarak dikdörtgenin genişliğini 779 piksel, yüksekliğini de 15 piksel yapın. Stage üzerindeki bir nesneyi seçtiğinizde nesnenin genişlik ve yükseklik değerlerini Properties denetçisinin sol alt köşesinde W (width) ve H (height) ile belirtilen alanlarda görebilirsiniz. Burada görmüş olduğunuz değerleri değiştirebilirsiniz. Şeklin genişlik/yükseklik oranını korumak istiyorsanız W ve H alanlarının hemen solundaki kilit simgesine tıklayıp kilidi kapatmanız yeterlidir. Nesnenin Stage üzerindeki x ve y koordinatlarını da değiştirebilirsiniz. x ve y koordinatları varsayılan olarak şeklin sol üst köşesine göre belirlenir. Kilit simgesi açık haldeyken W alanına tıklayın, 779 yazın ve Enter a basın. Şimdi de H alanına 15 girin ve Enter tuşuna basın. Dikdörtgenin boyutlarının değiştiğini göreceksiniz. GRAFİKLER 41
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. Bilgisayarınıza bağlı bir çizim tableti kullanıyorsanız Flash ın tablet kaleminin basınç ve açısından faydalanmanıza imkân veren çizim özelliklerini seveceksiniz. Böyle bir durumda Tools panelinin Options alanından Brush aracı için Pressure (Basınç) ve Tilt (Eğim) değerleri belirleyebilirsiniz. 5. Dokümanınızı kaydedin. Koordinatlar, Kılavuzlar, Izgara ve Kenetlenme Özelliği Flash ta neredeyse her şeyin koordinatlarla bir ilgisi vardır. Her doküman kendi x ve y koordinatlarına sahiptir ve orijin dokümanın sol üst köşesidir. Grafikleri doğru yerlere yerleştirmekten ActionScript ile animasyon ayarlarına kadar pek çok şey koordinatlar yardımıyla yapılır. x dokümanın yatay eksenini, y de dikey eksenini temsil eder. Bir sembol oluşturuyorsanız ve 42 DERS 2
sembol düzenleme modunda iseniz merkezdeki artı simgesi bu sembolün kendi bağımsız koordinat sisteminin orijinini belirtir. Bu dersimizde sembol oluşturma konusuna çok kısaca değinecek olsak da semboller ve sembol düzenleme modu hakkındaki detaylı bilgileri Ders 4 te öğreneceğiz. Flash ta bir z endeksi yoktur ancak aynı amaca hizmet eden bir derinlik unsuru bulunur. Koordinatlar arasında gezinmenize yardımcı olacak unsurlar ise kılavuzlar (guide), ızgara (grid) ve kenetlenme (snapping) özelliğidir. Kılavuzlar ve ızgara taslak çalışması ve çizimler esnasında size yardımcı olur. Kenetlenme özelliği de oluşturmakta olduğunuz bir nesnenin kılavuzlara ya da ızgaraya kenetlenmesini (yaslanmasını) sağlar. Kılavuzlar ve ızgara sadece düzenlenebilir bir Flash dosyası ile çalışırken kullanılabilir ve son SWF dosyasında görünmezler. Kılavuzları kullanmak için cetvellerin de açık olması gerekir. Cetvelleri görünür yapmak için ana menüden View > Rulers komutunu verebilirsiniz. Cetveller açıldığında kılavuzlar da kullanıma hazır hale gelir ancak siz onları kullanmaya başlayana kadar görünmezler. Kılavuzları aktifleştirmek ya da iptal etmek için View > Guides > Show Guides komutunu kullanabilirsiniz. Izgarayı görüntülemek için de View > Grid > Show Grid komutunu verebilirsiniz. Kılavuz çizgilerine ilişkin ayarları Edit > Guides > Edit Guides komutuyla görebilir ve değiştirebilirsiniz. Guides penceresinde kılavuz çizgilerinin rengini değiştirebilir, görünür olup olmayacaklarını belirtebilir ve yanlışlıkla hareket ettirilmelerini önlemek amacıyla onları kilitleyebilirsiniz. Yine aynı ekranda nesnelerin kılavuz çizgilerine hangi hassasiyetle kenetleneceklerini de belirleyebilirsiniz. Grid penceresinde ızgara çizgilerinin rengini ve hücrelerin boyutlarını değiştirebilir, kenetlenme ve görünür olma seçeneklerini belirleyebilirsiniz. Kenetlenme (snapping) seçeneklerini View > Snapping menüsünden de ayarlayabilirsiniz. Cetvelin üzerine tıklayıp sürükle ve bırak yaparak kılavuzları Stage e taşıyabiliriz. Fareyle Stage deki bir kılavuzun üzerine geldiğinizde fare imlecinde kılavuzu başka bir yere taşıyabileceğinizi belirten yeni bir simge belirir. Kılavuzlardan kurtulmak için onları View > Guides > Show Guides komutuyla iptal edebilir ya da aldığınız cetvele geri taşıyabilirsiniz. GRAFİKLER 43
Kitabımız boyunca nesneleri kılavuzlara kenetlenmiş olarak kullanacağız (Guides penceresinde Snap to guides işaretli olacak). Yeni Bir Grafik Sembolü Oluşturma Bu uygulamada Tech Bookstore sitesindeki aşağı açılır menülerde kullanacağımız arka plan grafiğini oluşturacağız. Ardından bunu bir grafik sembolüne dönüştüreceğiz, bu sayede grafiği dosya boyutunu büyütmeden yeniden kullanabiliriz. Sitede üç menü olduğundan bu yöntemi benimsememiz gayet mantıklı, böylece projemizdeki dosya boyutlarının daha küçük olmasını sağlayabiliriz. Sembollerin detaylarına şimdilik fazla takılmayın, Ders 4 te sembolleri daha geniş bir şekilde inceleyeceğiz. Yine Rectangle aracını kullanacağız ancak bu kez Corner Radius düğmesiyle köşeleri yuvarlatacağız. Dolgu renkleri, araçlar, cetveller ve kılavuzlar da bu örnekte sıkça kullanacağımız öğeler olacak. Grafik sembolleri kendi Timeline ve katman yapılarına sahip olabilirler. Bu özellik, ana dokümanın Timeline ı üzerinde herhangi bir değişiklik yapmadan daha karmaşık grafikler oluşturmanıza imkân sağlar. 1. bookstore4.fla dosyasını açın ve bookstore5.fla olarak kaydedin. Nesnelere kenetlenme özelliğini açın. Nesnelere kenetlenme özelliğini açmak için Tools panelinde Options kısmında yer alan Snap to Objects (Nesnelere Kenetlen) düğmesini aktifleştirin (bu düğmede bir mıknatıs simgesi vardır). Dilerseniz ana menüden View > Snapping > Snap to Objects komutuyla da aynı şeyi yapabilirsiniz. 2. Insert > New Symbol komutu ile yeni bir grafik sembolü ve Layers panelindeki Insert New Layer düğmesiyle bu sembolün içinde üç yeni katman oluşturun. Bu şekilde yeni bir sembol oluşturduğunuzda ana dokümanın Timeline ını terk etmiş ve sembolün Timeline ına girmiş olursunuz. Font sembolü istisna olmak kaydıyla Flash taki her sembolün kendi Timeline paneli ve kendi katmanları vardır. Bu Timeline ların nasıl çalıştığı ise ne tür bir sembol seçmiş olduğunuzla yakından ilgilidir. Yeni bir sembol oluşturmak için ana menüden Insert > New Symbol komutunu verin. Create New Symbol (Yeni Sembol Oluştur) penceresi açılacaktır. Create New Symbol penceresinin Basic (Basit) ve Advanced (Gelişmiş) olmak üzere iki farklı görünümü vardır. Basic görünümü varsayılan moddur. Advanced düğmesine bastığınızda Advanced görünümüne geçiş yapılır. Biz Basic modu kullanacağız. 44 DERS 2
Name (İsim) alanına girdiğiniz sembol ismi dokümanın Library (Kütüphane) panelinde kullanılır. Library panelini daha sonra öğreneceğiz. Type (Tür) seçimi Flash a sembolün nasıl davranması gerektiğini söyler. Sembol ismi olarak grmenugraphic yazın ve Type olarak da Graphic i seçin. Ardından OK düğmesine basın. İsmin önüne koyduğumuz gr öneki sadece bunun ne tür bir sembol olduğunu daha rahat anlamamız içindir ve zorunlu değildir. Bir isimlendirme metodu belirlemenizi ve projelerinizde bu metoda göre isimler kullanmanızı tavsiye ederiz. Şimdi artık sembol düzenleme modundayız. Düzenleme çubuğuna bakacak olursanız Scene 1 in hemen sağında küçük bir simge ve sembolünüzün ismini görebilirsiniz; buradan ana sembolü düzenlemekte olduğumuz sonucuna varabiliriz. Timeline panelinde sembolün Timeline ı ve varsayılan olarak Layer 1 adını almış olan katmanı yer almaktadır. Şimdi üç katman daha oluşturun ve elinizdeki toplam dört katmana yukarıdan aşağıya doğru gradient, inner (iç), middle (orta) ve outer (dış) isimlerini verin. (Katmanları yeniden isimlendirmek için katman ismine çift tıkladığınızı hatırlayın.) 3. Düzenleme çubuğundaki açılır menüden yakınlığı 800% yapın. Oluşturmak üzere olduğunuz grafiğin dış kılavuzlarını belirleyin. Şimdi menü arka planımız için bir dizi kılavuz oluşturacağız. Arka planda sınırları göstermek amacıyla birkaç farklı rengimiz olacak. Köşeleri yuvarlatılmış dikdörtgenler içeren katmanlar kullanacağız ve bu katmanları üst üste koyarken kılavuzlardan faydalanacağız. GRAFİKLER 45
Eğer henüz açmadıysanız View > Rulers komutuyla cetvelleri açın. Çalışma alanının solunda ve üstünde cetveller belirecektir. Cetveller açık değilken kılavuzları kullanamayacağınızı unutmayın. Düzenleme çubuğunun en sağında yer alan açılır menüden 800% seçimini yapın. Çalışma alanımızı bu şekilde büyütmemizin sebebi oluşturacağımız menünün sadece 110 piksel genişliğinde ve 15 piksel uzunluğunda olması; böylece daha rahat çalışabiliriz. Dikey (soldaki) cetvele tıklayın ve fareyi sürükleyerek bir kılavuz oluşturun; kılavuzu yatay cetveldeki 0 noktasına getirin. Bu durumda kılavuz Stage deki artı işaretinin dikey çizgisi ile kesişecektir. Artı işaretinin bulunduğu nokta sembolün merkezi ve sembolün koordinat sisteminin orijin noktasıdır. Aynı şekilde yataydaki 110 noktasına gelecek bir kılavuz daha oluşturun. Şimdi de alt ve üst kılavuz çizgilerini çekin; alttaki kılavuz 0 da, üstteki kılavuz da 17 de olsun. 46 DERS 2
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. GRAFİKLER 47
View > Guide > Lock Guides (Kılavuzları Kilitle) komutuyla kılavuzları kilitlemek isteyebilirsiniz; böylece kılavuzların yerini yanlışlıkla değiştirme riski ortadan kalkar. Kılavuzların en sol üstteki kesişme noktasına çok yakın bir yere tıklayın ve fareyi en sağ alttaki kesişme noktasına çok yakın bir yere kadar sürükleyin. Fare düğmesini bıraktığınızda dikdörtgenimiz en dıştaki kılavuzlara hizalanmış olarak çizilecektir. 6. middle katmanında dolgu rengi #FFFFFF ve kenar çizgisi de renksiz olan başka bir dikdörtgen oluşturun. Dikdörtgeni, en dıştaki dikdörtgenin sol, sağ ve alt kenarından birer piksel içeride kalacak şekilde çizin. İkinci dikdörtgeni oluşturmak üzere middle katmanını seçin. Dolgu rengini #FFFFFF yapın. Kenar çizgisi için yine No color (renksiz) seçili olsun. Biraz önce outer katmanında çizdiğiniz dikdörtgenin sol, sağ ve alt kenarından birer piksel içeride olacak şekilde yeni dikdörtgeni çizin. Dikdörtgenin üst kenarı ilk dikdörtgen ile aynı seviyede olabilir. Çizimi geri almak ve şekli yeniden çizmek için Ctrl+Z veya Cmd+Z komutlarını kullanabilirsiniz. Üçüncü ve dördüncü dikdörtgenleri de aynı şekilde çizin. Dikkat etmeniz gereken tek şey her çizimde sol, sağ ve alttan birer piksel daha içeriye gelmek. inner katmanındaki dikdörtgen için dolgu rengini #999999 yapın, kenar çizgisi yine renksiz olsun. gradient katmanındaki dikdörtgen için dolgu rengini şimdilik #CCCCCC olarak belirleyin. Dersimizin ilerleyen bölümlerinde bu grafiğe lineer bir degrade uygulayacağız. 7. Menünün üst tarafını kırpın ve katmanları kilitleyin. Her şeyi yanlışlıkla aynı katmana çizmekten kaçınmak için katmanlarınızdan bir ya da birkaçını daha önceden kilitlediyseniz şimdi tüm katman kilitlerini açın. Dikey cetveldeki 15 piksel noktasına yeni bir kılavuz çekin. Selection aracını seçin. Fare ile en sol üst köşenin biraz dışına tıklayın ve yatay cetvelde 110 u biraz geçene, dikey cetvelde de 15 çizgisine kadar fareyi sürükleyin ve bırakın. Noktalı bir desen göreceksiniz, bu desen ilgili alanı (tüm grafiğin üst bölümünü) başarıyla seçmiş olduğunuzu gösteriyor. Menü grafiğinin bu kısmına ihtiyacımız olmayacağından Delete veya Backspace tuşuna basarak bu bölümü silin. Layers panelinin üst kısmında yer alan kilit simgesine tıklayarak tüm katmanları kilitleyin. 48 DERS 2
8. Ana Stage ekranına geri dönün. Hâlâ sembol düzenleme ekranında olduğunuzu hatırlayın. Düzenleme çubuğunun en sağında yer alan yakınlaştırma menüsünden tekrar 100% boyutunu seçin. Şimdi düzenleme çubuğunun en solunda bulunan Scene 1 e tıklayın ve ana Stage ekranına geçiş yapın. Grafiğiniz ana Stage de görüntülenmez, kütüphanede saklanır ve kullanılmayı bekler. Tools panelindeki Zoom aracına çift tıklayarak da sayfayı 100% boyutuna getirebilirsiniz. 9. Çalışmanızı kaydedin. Maskeler Maskeler, çizmiş olduğunuz şekle bağlı olarak Stage in bölümlerini gizleyen ya da gözler önüne seren unsurlardır. Bir maskeyi bir şeyin üzerindeki örtü gibi düşünebilirsiniz; üzerlerinde durdukları şeyi gizlerken bir yandan da o şeye ilişkin ipuçları verirler. Bazı şaşırtıcı ve karmaşık efektlere imkân tanıdıklarından maskeleri kullanmak hayli etkili olabilir. Maskeler Stage de sabit kalabilecekleri gibi hareket de edebilirler. Maske etkisi katmanlarla ilgili bir özelliktir; katmanlardan biri üzerinde durmakta olduğu diğer katmanı maskeler (gizler). Şimdiki uygulamamızda Stage in bir bölgesini maskeleyecek basit bir şekil oluşturacağız. Arabirimde 3 adet menümüz olacak. Bu menüler normalde görünmeyecek, kullanıcının kendilerini kontrol eden düğmelerin üzerine gelmesi halinde ise aşağıya doğru açılacaklar. Yine bookstore5.fla dosyasını kullanıyoruz. 1. Ana Stage e yatay ve dikey kılavuz çizgileri taşıyın. Şu anda Stage üzerinde daha önceki alıştırmalarda çizdiğimiz uzun bir dikdörtgen ve oval bir şekil duruyor olmalı. Tüm bu grafikleri şimdilik Stage in dışına sürükleyin. Bir önceki uygulamada yaptığımız gibi burada da bazı kılavuz çizgilerine ihtiyacımız olacak. Öncelikle kılavuzların kilitli olmaması gerekiyor. Kılavuzlar kilitliyse View > Guide > Lock Guides ile kilidi kaldırabilirsiniz. Şimdi iki tane dikey kılavuz çekin; biri 115 diğeri de 405 pikselde olsun. İki tane de yatay kılavuz oluşturun; biri 125 diğeri 140 pikselde olsun. GRAFİKLER 49
2. Yeni bir katmanda bir dikdörtgen oluşturun ve sonra katmanı bir maske haline getirin. background katmanını seçin ve iki yeni katman ekleyin. Alttaki katmanı menu ve onun üzerindeki katmanı da mask olarak isimlendirin. mask katmanında kılavuzların arasında kalacak ve onlara kenetlenecek şekilde bir dikdörtgen oluşturun. Şimdi mask katmanına sağ tıklayın ve açılan menüden Mask komutunu verin. Bu komutun ardından Layers panelinde menu katmanındaki katman ismi otomatik olarak sağa kaydırılır: Bu durum menu katmanının artık maskelenmiş olduğunu gösterir. 3. mask katmanının kilitlendiğinden emin olun ve kılavuzları kaldırın. Flash ta bir maske hazırladığınızda maske katmanı ve maskelenen katman otomatik olarak kilitlenir. Bu, maskenin düzenleme ortamında düzgün bir şekilde çalışmasını sağlar. Bu katmanlardan herhangi birinin kilidini açtığınızda maske grafiği yeniden görünür olur ve maskelenmiş katmanın içeriğini yeniden konumlayabilir ya da maskeleyen katmanın içeriğini yeniden şekillendirebilirsiniz. Katmanlar kilitli durumdayken filmi test etmeniz halinde de maske yine beklendiği gibi davranır. (Control > Test Movie, Ctrl+Enter veya OS X altında Cmd+Enter ile filmi test edebilirsiniz.) Filmi test etmek şu aşamada çok anlamlı değil çünkü maskelenen katmana henüz içerik yerleştirmiş değiliz. mask katmanının kilitlendiğinden emin olun. Katmanın Show/Hide All Layers (Katmanları Göster/ Gizle) sütununda yer alan siyah noktasına da tıklayın; böylece katmanı aynı zamanda gizlemiş de oluyoruz. Son olarak, kılavuzlara şimdilik ihtiyaç duymayacağımız için View > Guides > Clear Guides (Kılavuzları Temizle) komutuyla onları hızlı bir şekilde cetvellere geri gönderin. Kenar Çizgileri Eklemek Kenar çizgileri nesnelerin ya da şekillerin etrafındaki bağımsız hatlar veya çizgilerdir. Flash 8 de kenar çizgileri için kullanılabilecek çeşitli hazır stiller ve stilleri özelleştirmenize imkân veren birkaç seçenek bulunur. Kenar çizgilerinin kapatılması (cap) ve birleştirilmesi (join) için de çeşitli araçlar vardır. Şekillere kenar çizgileri eklemek için Ink Bottle aracını veya çizgi çekme araçlarından birini kullanabilirsiniz. 50 DERS 2
Kenar çizgisi kalınlığı (Stroke height) Kenar çizgisi rengi (Stroke color) Özel stil düğmesi (Custom stroke style) Kenar çizgisi stili (Stroke style) Kenar çizgisi kapatma stili Kenar çizgisi vurgulama (Stroke hinting) Ölçü (Scale) Kenar çizgileri birleşme stili Stroke height alanı Stage deki çizginin kalınlığını belirler. Alanın hemen sağındaki oka bastığınızda kalınlığı ayarlayabileceğiniz bir kaydırma çubuğu açılır. Bu çubuğu kullanarak ya da doğrudan alana bir değer girerek kalınlığı belirleyebilirsiniz. Kalınlık değeri 0.1 ile 200 arasında değişir. Stroke style menüsünde Flash 8 ile gelen stilleri görebilirsiniz. Bunlardan biri olan hairline stilinin ebadı hep aynıdır ve Stage ekranını ne kadar büyütürseniz büyütün çizginin kalınlığı değişmez. Şu ana kadar kullandığımız kenar çizgilerinin kalınlığı biz Stage i yaklaştırdıkça artıyordu. Custom düğmesine basarak çizgi stillerini özelleştirmek için kullanabileceğiniz birkaç seçeneğe ulaşabilirsiniz. FLA dosyanızda özelleştirilmiş stil kullanımına fazla ağırlık vermeyin; bu tür kullanımlar SWF dosyanızın boyutunu artıracaktır. Benzer şekilde hairline ve normal stil çizgilerinin dışında kalan stiller de dosya boyutunu artıran faktörlerdir. Kenar çizgisinin uç noktalarının nasıl görüneceğine ilişkin seçeneklere Cap düğmesi ile ulaşabiliriz. None çizgiye hiçbir müdahalede bulunmaz. Round ve Square ise çizgiyi çok az uzatarak çizginin yuvarlatılmış veya köşeli bir şekilde sonlanmasını sağlarlar. Join menüsündeki seçenekler iki kenar çizgisinin nasıl buluşacağını belirler. Buradaki üç seçenek Miter (Keskin köşeli), Round (Yuvarlatılmış) ve Bevel (Düz köşeli) şeklindedir. Join seçeneklerini kenar çizgilerinin birleşen uçlarını seçtikten sonra uygulayabilirsiniz. Stroke hinting seçeneğini işaretlemeniz halinde çizim esnasında yatay veya dikey çizgilerin bulanıklaşmasını engellemiş olursunuz. GRAFİKLER 51
Son olarak, Pencil aracını ve Tools panelinin Options alanında da Smooth (Yumuşak) modunu seçmişseniz Properties denetçisinde Smoothing (Yumuşatma) adında yeni bir seçenek belirir. Bu seçeneği kullanarak kenar çizgisinin sertliğini değiştirebilirsiniz. Smoothing (Yumuşatma) değeri 1. Yeni bir katman ekleyin ve başka bir dikdörtgen oluşturun. background katmanını seçin ve Insert Layer ile yeni bir katman ekleyin. Katmana outline ismini verin ve background katmanını kilitleyin. Tools panelinden Rectangle aracını seçin. Stroke color olarak #000000 (siyah) verin, Fill color olarak No color (renksiz) seçimini yapın. Stroke height olarak 1 değerini verin (daha önce değiştirmediyseniz burası zaten varsayılan değer olan 1 dir). Cap düğmesine tıklayın ve None seçimini yapın. Son olarak Tools panelinin Options alanında Set Corner Radius (Köşe Yarıçapı Belirle) düğmesine basın ve köşe yarıçapının 0 olduğunu teyit edin. Stage üzerinde herhangi bir yere küçük bir dikdörtgen çizin. Rectangle aracını seçtikten sonra Properties denetçisinde değiştirebileceğiniz seçenekleri göremiyorsanız Selection aracını seçin, arka zemine bir kez tıklayın ve tekrar Rectangle aracını seçin. 2. Dikdörtgenin boyutlarını ve konumunu değiştirin. Dikdörtgeni seçin ve Properties denetçisinden W için 770, H için 519 girin. Bu değerler dikdörtgenin Stage in tüm kenarları boyunca görünür olmasını sağlayacaktır. Dikdörtgeni Stage ile aynı boyutta çizerseniz SWF dosyasını yayınlamanızın ardından dikdörtgenin bazı kısımları kesilebilir. X ve Y değerlerinin her ikisine de 0 girin. Böylece grafiğin sol üst köşesi ile Stage in sol üst köşesi aynı noktaya denk gelecektir. SWF dosyasının sağ tarafı ve alt kısmı çift çizgiye ve biraz kaba bir görünüme sahipmiş gibi dursa da dosya yayınlanıp bir tarayıcıda izlendiğinde çizgiler düzgün bir şekilde görüntülenecektir. Dikdörtgeni tam boyuta ayarlarsanız Stage in sağında ya da altında çizgiler görünmez. 52 DERS 2
3. Dikdörtgeni bir sembole dönüştürün ve katmanı kilitleyin. Dikdörtgen Stage de hâlâ seçili durumda olmalı. Modify (Değiştir) > Convert to Symbol (Sembole Dönüştür) komutunu verin ve grafiği groutline olarak isimlendirin. Type olarak Graphic seçimini yapın ve OK düğmesine tıklayıp çıkın. Son olarak outline katmanını kilitleyin. Kütüphanenin Kullanımı Kütüphane (Library), Flash FLA dosyanızda kullandığınız sembol, bileşen, ses, bitmap resimler ve dijital video öğelerinin tutulduğu yerdir. Yeni bir sembol oluşturduğunuzda veya ses, video, resim aldığınızda (import) tüm bunlar otomatik olarak kütüphaneye eklenir. Flash ta kullanabileceğiniz neredeyse her öğeyi kütüphanede görebilir, klasörlere yerleştirebilir, yeniden isimlendirebilir ya da diğer bazı işlemlere (özelliklerini değiştirmek gibi) tâbi tutabilirsiniz. Ayrıca kütüphanedeki öğeleri sürükle ve bırak ile Stage üzerinde herhangi bir yere taşıyabilirsiniz (öğeler anahtar bir karede ve kilidi açık bir katmanda oldukları sürece). Library (Kütüphane) menüsü Küçük resimler (thumbnail) halinde gösterim ekranı Seçenekler menüsü New Library panel (Yeni kütüphane paneli) Pin current library (Mevcut kütüphaneyi sabitle) Öğeler New Symbol (Yeni Sembol) New Folder (Yeni Klasör) Delete (Sil) Properties (Özellikler) Flash ta her dokümanın kendi kütüphanesi vardır. Dahası, doküman kütüphanelerini FLA dosyasından bağımsız bir şekilde açabilir, başka bir kütüphanedeki öğeleri kullanabilirsiniz. Birden fazla Flash dokümanı açık olduğunda Library menüsü doküman kütüphaneleri arasında hızla gezinmenizi sağlar. Açılır menüde gözükmekte olan kütüphane o anda aktif olan dokümanın kütüphanesidir; Pin current library düğmesine basarak istediğiniz kütüphanenin açılır menüde GRAFİKLER 53
sabit olarak kalmasını sağlayabilirsiniz. New Library panel düğmesi o anda seçili olan kütüphaneyi ayrı bir pencere halinde görüntüler. Yeni semboller oluşturmak, seçili öğeleri silmek, öğe özelliklerini görüntülemek ve öğeleri klasörlere yerleştirmek için gereken düğmelerin tümü Library panelinin sol alt köşesinde yer alır. Şimdiki uygulamamızda kütüphaneyi biraz daha yakından tanıyacağız ve dokümana alacağımız birtakım öğeleri organize etmek için bazı klasörler oluşturacağız. Çalışma dosyamız yine bookstore5.fla olacak. 1. Eğer açık değilse Window > Library komutuyla kütüphaneyi açın. Library paneli de tıpkı Flash taki diğer paneller gibidir: Başlık çubuğu durumuna küçültülebilir, aşağıya doğru uzatılabilir, bir noktaya sabitlenebilir ya da serbest halde kullanılabilir. Kütüphanemizde şu anda üç adet öğe görünüyor olmalı; Button bileşeni, grmenugraphic ve groutline sembolleri. grmenugraphic ve groutline, bu grafikleri sembollere dönüştürdüğünüzde kütüphaneye otomatik olarak eklenmişti. Benzer şekilde Button öğesini Stage e sürükleyip bıraktığımız zaman o da kütüphaneye eklenmişti. Bunun sebebi öğelerin kolayca yeniden kullanılabilir olmasına imkân vermektir. Siz bir öğeyi Stage den silseniz dahi öğe kütüphaneden kaldırılmaz. Çizim araçlarını kullanarak Stage üzerinde çizdiğiniz grafikler sembol değildir, bu yüzden kütüphaneye eklenmezler. Flash ta bu tür grafiklere ham ya da basit grafikler denir. Ana Stage üzerinde çizmiş olduğunuz hiçbir şey siz onları özellikle öyle yapana kadar sembol değildir. 2. Button bileşenini kütüphaneden silin. Bir öğeyi kütüphaneden kaldırmak için öğeyi seçin ve panelin alt kısmında duran çöp tenekesi simgesine tıklayın. Öğeye sağ tıklayıp Delete komutunu vermeniz de aynı işi görür. Eğer kütüphanede, uygulama tarafından kullanılmayan öğeler varsa bunlar SWF dosyasını yayınladığınız zaman dosyaya aktarılmazlar (Flash ın dahili bileşenleri bir istisnadır). Dosya boyutunu gereksiz yere büyütmemek için kullanmadığınız öğeleri doküman kütüphanelerinden silin. 54 DERS 2
3. New Folder düğmesini kullanarak yeni bir kütüphane klasörü oluşturun. Klasöre graphics ismini verin ve her iki grafik sembolünü de klasörün içine koyun. Genellikle çok fazla sayıda öğeniz olacağından böyle durumlarda büyük fayda sağlayan kütüphane klasörlerine ihtiyaç duyacaksınız. Öğelerinizi doğru isimler verilmiş klasörlere yerleştirerek çalışmanız boyunca hayatınızı kolaylaştıracaktır. Library panelinin altındaki New Folder düğmesine basın ve oluşan klasöre graphics ismini verin. klasör ismini değiştirmek isterseniz isim üzerine çift tıklamanız ve yeni ismi girip Enter a basmanız yeterlidir. Şimdi her iki grafik sembolünü de bu klasöre sürükleyin. Kütüphane klasörü varsayılan olarak kapalıdır. Klasör simgesine (klasör ismine değil) çift tıklayarak onu açabilir ve içindekileri görebilirsiniz. Klasör ismine çift tıklarsanız Flash ismi değiştirmek istediğinizi düşünecektir. 4. Dört kütüphane klasörü daha oluşturun, bunlara components, buttons, media ve movie clips isimlerini verin. Sıradaki uygulamalarımızda bu klasörlerin her birine yeni öğeler atacağız. 5. Kütüphaneden grmenugraphic sembolünü açın. Kütüphanede bir sembole çift tıkladığınızda sembol düzenleme moduna geçiş yapmış olursunuz. Bu modda sembolün temel özellikleri üzerinde yaptığınız değişiklikler sembolün dokümanınızdaki her kullanımını etkiler. graphics klasörünüz kapalıysa simgesine çift tıklayarak onu açın. grmenugraphic sembolüne çift tıklayın ve sembol düzenleme moduna geçin. Herhangi bir değişiklik yapmayın; sadece kütüphaneden sembol düzenleme moduna nasıl girebileceğimizi görmek için buradayız. Düzenleme çubuğundaki Scene 1 e tıklayın ve sembol düzenleme modundan çıkın. 6. Çalışmanızı kaydedin. Bitmap Resimlerin Alınması ve Optimize Edilmesi Şu anda Stage in üzerinde veya etrafında çeşitli grafik öğeleriniz var, bunların tümü vektörel grafikler. Ancak bazen bitmap resimlere de ihtiyacınız olacak; örneğin bitmap resimler arabiriminizi görsel bakımdan daha çarpıcı yapmanıza yardımcı olabilir. Bitmap resimler animasyon sırasında da kolaylık sağlarlar. Bir bitmap resmin animasyonu için piksellerin ekran üzerindeki yerlerinin değiştirilmesi yeterli iken vektörel bir grafiğin animasyonu için her karenin baştan çizilmesi (hesaplanması) gereklidir. GRAFİKLER 55
Bitmap resimlerin problemi yeniden boyutlandırmalar esnasında yaşanan çözünürlük kayıplarıdır. Bir bitmap resmi büyüttüğünüzde, hatta bazen küçülttüğünüzde bile, Stage üzerindeki resmin çözünürlüğü düşecektir. Bu bakımdan bitmap resimleri orijinal boyutlarında kullanmanız, büyütme ya da küçültmelerden kaçınmanız en doğrusu olacaktır. Resim ve grafikleri herhangi bir görüntü işleme programıyla oluşturabilirsiniz; Adobe Photoshop veya Macromedia Fireworks bu tür programlara iki güzel örnek. Flash ayrıca hem Fireworks hem de Photoshop ile resim düzenleme desteğine sahiptir: Grafikteki bitmap resme sağ tıklayıp Edit ya da Edit with komutunu verir ve resmi Fireworks veya Photoshop ta güncellerseniz tüm değişiklikler otomatik olarak Flash a da yansıtılır; resmi yeniden almanıza (import etmenize) lüzum kalmaz. Şimdiki uygulamamızda bizim için daha öncesinden hazırlanmış olan bitmap resimler alacağız ve bunları düğmeler, logo ve başlık alanında kullanacağız. Resimlerimiz burada PNG formatında, ancak Flash neredeyse varolan her bitmap formatını da destekler. 1. File > Import > Import to Library (Kütüphaneye Al) komutu ile düğmeler için kullanacağımız altı PNG dosyasını alın. Ardından düğmeleri kütüphanedeki buttons klasörüne koyun. Import to Library komutunu seçtiğinizde alınan tüm öğeler Stage e değil doğrudan kütüphaneye yerleştirilir. Dilerseniz öğeleri doğrudan Stage e de alabilirsiniz, ancak yine de öğelerin birer kopyası kütüphaneye konulur. File menüsünden Import > Import to Library komutunu verin. CD deki Lessons\lesson02\assets\ dizini altında yer alan company_up, company_down, contact_up, contact_down, products_up ve products_down resimlerini seçin; bu öğelerin hepsini aynı ekranda iken seçmek için öğelere tıklarken klavyeden Ctrl tuşunu basılı tutun (OS X kullanıyorsanız Command tuşu). Resimleri seçtikten sonra Open (Aç) ya da Import to Library (Kütüphaneye Al) düğmesine bastığınızda resimler kütüphaneye alınacaktır. 56 DERS 2
Resimler kütüphaneye girdikten sonra tümünü buttons isimli kütüphane klasörüne taşıyın. Yukarıda yaptığınız gibi yine Ctrl ya da Command tuşu ile tıklayarak birden fazla öğeyi aynı anda seçebilirsiniz. 2. Almış olduğunuz bitmap resimlerin optimizasyon ayarlarını kontrol edin. Flash almış olduğunuz resim dosyaları için birkaç optimizasyon ayarı yapmanıza imkân verir. Varsayılan olarak, SWF dosyanızı yayınladığınızda tüm resimler JPG formatında ve % 50 kalite ile Optimize edilmiş durumda olurlar. Bu seçenekleri değiştirmek için kütüphaneden resmi seçin ve alttaki Properties düğmesine (mavi daire içindeki beyaz i simgesi) basın. Bu düğmeye bastığınızda açılan Bitmap Properties (Bitmap Özellikleri) iletişim kutusunda sıkıştırma metodunu belirleyebileceğiniz bir Compression menüsü vardır. Bu menüyü kullanarak Lossless (PNG/GIF) ve Photo (JPEG) sıkıştırma türleri arasında seçim yapabilirsiniz. Biraz önce almış olduğumuz düğmeler sadece birkaç basit renge sahip olduklarından PNG/GIF en doğru seçim olacaktır. Çok sayıda renk, tonlama ve degrade içeren grafikler içinse JPEG en uygun seçenektir. JPEG, Flash ın varsayılan sıkıştırma türüdür. En iyi sıkıştırma ve görüntü kalitesine ulaşmak için resimlerinizi Flash a almadan önce optimize etmeniz çok daha iyi olacaktır. Allow smoothing (Yumuşatma yap) kutusunu işaretlerseniz bitmap resimdeki kenarlar daha az keskin görünecektir. Yumuşatma çoğu zaman resmin daha iyi görünmesini sağlar. 3. CD deki Lessons\lesson02\assets\ dizininden title.png dosyasını alın ve sıkıştırma özelliklerini değiştirin. Yine File > Import > Import to Library komutunu verin ve title.png dosyasını alın, sonra da kütüphanedeki media klasörüne taşıyın. Şimdi resme sağ tıklayın ve gelen menüden Properties komutunu vererek Bitmap Properties iletişim kutusunu açın; bu da Bitmap Properties iletişim kutusunu açmanın bir diğer yolu. GRAFİKLER 57
title.png dosyasının Compression metodu olarak Photo (JPEG) seçin ve Use document default quality (Kalite için varsayılan doküman değerini kullan) kutusundaki işareti kaldırın, Quality değerini de 50 yerine 80 yapın. Son olarak OK düğmesine tıklayın ve çıkın. 4. Resmi background katmanında Stage e yerleştirin ve 0,0 noktasına getirin. Ardından background katmanını kilitleyin. İlk olarak, eğer kapalıysa background katmanının kilidini açın. background katmanını seçin ve title.png dosyasını kütüphaneden Stage e taşıyın. Şeklin etrafındaki delikli şeride dikkat edin; bu, şeklin bir sembol değil ham bir grafik olduğunu belirtir. Şekil seçili iken Properties denetçisine gidin ve X ve Y koordinat değerlerinin her ikisine de 0 girin. Şimdi de background katmanını kilitleyin, böylece şeklin yanlışlıkla hareket ettirilmesinin önüne geçmiş olursunuz. Grafik tam olarak Stage ile aynı genişlikte hazırlanmıştır, bu yüzden pozisyonunun sabit kalmasını istiyoruz. 5. Logo grafiğini kütüphaneye alın ve sıkıştırma metodunu Photo yapın. logo isimli yeni bir katman oluşturun ve grafiği bu katmanda Stage e taşıyın. CD deki Lessons\lesson02\assets\ dizininden logo.png resmini alın ve kütüphanedeki media klasörüne koyun. Resme sağ tıklayıp Properties komutunu verin. Compression değerini Photo yapın ve kaliteyi 80 olarak değiştirin. background katmanını seçin ve Insert Layer düğmesine basarak background katmanının üzerinde yeni bir katman oluşturun. Yeni katmana logo ismini verin. logo.png dosyasını yeni katmanda Stage e sürükleyin ve aşağıdaki resimde gördüğünüz gibi sol üst köşeye yerleştirin. Logonun bu köşede tam olarak nerede durması gerektiğine siz karar verin, ancak altında kalan grafiğin yazısını kapatmıyor olmasına da dikkat edin. Logoyu yerleştirdiğinizde logo katmanını da kilitleyin. 6. Çalışmanızı kaydedin. 58 DERS 2