Macromedia Flash 8 (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.



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.

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.

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.

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.

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

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

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.

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.

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.

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 vekilidi açık bir katmanda oldukları sürece).


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

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

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

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.

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

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. resimlerinizi seçin; öğ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.


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.

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

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.

Hades yeni başlayanlar için güzel bilgiler yer alıyor ellerine emeğine sağlık...

Vektörel Şekillerin Alınması

Flash’a FreeHand (.FH7’den .FH11’e) ve Adobe Illustrator (.AI) dosyaları gibi karmaşık vektörel çizimler alabilirsiniz. Katmanları her tür dokümanda koruyabilirsiniz; ancak FreeHand ile hazırlanmış dokümanları aldığınızda doküman üzerindeki kontrolünüz özellikle daha fazla olacaktır. Vektörel çizimler kullanmanın en önemli avantajlarından biri doküman boyutunu değiştirmenin bitmap resimlerde yaşadığımızın aksine hiçbir çözünürlük kaybına yol açmamasıdır. Vektörel çizimlerin yapıtaşı pikseller değil matematiksel fonksiyonlardır; şekli yeniden boyutlandırdığınızda fonksiyon yeniden hesaplanır ve hiç kalite kaybı yaşanmaz.

Şimdiki uygulamamızda FreeHand MX ile hazırlanmış bir dosyayı Flash’a alacağız. Dosyadaki öğelere ilişkin çeşitli seçimler yapıp onları düzgün bir şekilde Flash dokümanına yerleştireceğiz.

1. Yeni bir Flash dokümanı oluşturun ve dokümanın özelliklerini değiştirin.

Web sitesindeki harita, Web sayfasına (SWF dosyasına) çalışma zamanında dinamik olarak yüklenmektedir. Kullanıcı haritayı ziyaret ettiğinde ilgili SWF dosyası Tech Bookstore ana SWF dosyasına yüklenir. Yani haritayı yeni bir FLA dosyasına eklememiz gerekiyor, böylece ilgili SWF dosyasının daha sonra ana SWF dosyasına yüklenmesini sağlayabiliriz.

File > New komutunu verin ve Type listesinden Flash Document seçimini yapıp OK (Tamam) deyin. Ayrı bir doküman sekmesinde yeni bir FLA dosyası açılır. Daha önceden açılmış olan dokümanlarınız varsa doküman sekmeleri ile kolayca onlara geçiş yapabilirsiniz.

Properties denetçisinde Size (Boyut) düğmesine basın ve Stage’in boyutlarını değiştirin; genişlik (w) olarak 500, yükseklik (h) olarak da 355 değerlerini girin. Frame rate değerini 21 yapın. (Hatırlarsanız Ders 1’deki ana SWF dosyamızın kare gösterim hızını da 21 fps olarak ayarlamıştık.)

2. FreeHand ile hazırlanmış vektörel bir dosyayı yeni Flash dosyanıza alın.

Vektörel olarak hazırlanmış bir haritamız var. FreeHand MX ile hazırlanmış olan bir dosya. FreeHand dosyaları sembol, sayfa, katman ve metin gibi bileşenleri Flash’a aktarıldıkları zaman da korurlar, yani dosya içeriğini Flash altında da düzenleyebilirsiniz.

Layer 1 ismine çift tıklayarak katman ismini map olarak değiştirin. FreeHand dokümanını almadan önce map katmanını seçtiğinizden emin olun. File > Import > Import to Stage (Stage’e Al) komutunu verin ve map.FH11 dosyasını alın. FreeHand Import iletişim kutusu karşınıza gelecektir.


Pages (Sayfalar) için Scenes (Sahneler) veya Keyframes (Anahtar kareler) seçeneklerinden herhangi birini seçebilirsiniz; hangisini seçtiğiniz dosyada birden fazla sayfa olmadığı için önemli değil. Eğer dosyada birden fazla sayfa olsaydı her sayfa ana Timeline üzerinde ayrı sahne veya anahtar karelere
yerleştirilecekti.

Layers için Flatten (Düzleştir) seçimini yapın; yeni bir katmana ekleyeceğimiz bir sembolün haricinde haritanın farklı bölümlerinin farklı katmanlarda olmasına gerek duymuyoruz.

3. Stage üzerindeki sembolleri hizalayın.

Dosya Stage üzerinde rasgele bir yere konulabilir. Stage üzerindeki tüm sembolleri seçmek için Edit > Select All (Tümünü Seç) komutunu verin ve Properties denetçisinde X ve Y için 0,0 değerlerini girin. Böylece haritamız daha düzgün bir şekilde yerleştirilmiş olacaktır.

İpucu: Kütüphanede FreeHand Objects (FreeHand Nesneleri) adlı yeni bir klasör göreceksiniz. Bu klasör FreeHand dokümanı ile Flash’a aktarmış olduğunuz öğeleri içerir. Bu sembolleri de tıpkı Flash’ta oluşturduğunuz diğer semboller gibiçalışmalarınızda kullanabilirsiniz.

4. Bir sembolü kesin ve yeni bir katmana yapıştırın.

map katmanı seçili iken Insert New Layer düğmesine basın ve yeni bir katman ekleyin. Yeni katmana map star ismini verin.

map katmanındaki sarı renkli yıldız sembolünü seçin ve Edit > Cut (Kes) komutunu verin. Bu komutun ardından sembol kesilecek ve daha sonra istediğiniz yere yapıştırılmak üzere hafızaya alınacaktır.

map star katmanını seçin ve Edit > Paste In Place (Aynı Konuma Yapıştır) komutunu verin. Bu komut sayesinde sembol, kesilmiş olduğu katmandaki aynı x ve y koordinatları ile yeni katmana yapıştırılır. Şu anda sembolü başka bir katmana taşımış olduk; bu sembol daha sonra yeniden karşımıza çıkacak.

5. Dosyayı map.fla adıyla kaydedin ve yayınlayın.

File > Save komutu ile dosyayı sabit diskinizdeki TechBookstore klasörüne kaydedin. Dosya ismi olarak File Name alanına map.fla yazın ve OK düğmesine tıklayın. Şimdi de ana SWF dosyasına yüklenecek olan bir SWF dosyası yayınlamamız gerekiyor. File > Publish Settings komutunu verin ve Formats sekmesinde HTML’deki onay işaretini kaldırın; bir HTML dosyası üretmek istemiyoruz. Son olarak Publish düğmesine bastığınızda SWF dosyası oluşturulacaktır.

İlerleyen derslerde FLA dosyalarına ses ve video gibi diğer medya türlerini de aktaracaksınız. Şimdilik bu işlem hakkında temel bir bilgi ve deneyim edinmiş olmanız yeterli. Flash’a aldığınız öğenin türü ne olursa olsun aktarım işlemi aşağı yukarı hepsinde aynıdır. Bazen, örneğin video aktarımı esnasında küçük farklar olsa da temelde değişen bir şey yoktur.

Şahsen ben mesaj yazıp bölmeyim diyordum ancak bu bilgiler o kadar çok insanın işine yarıyor ve yarıyacakki anlatamam tekrardan teşekkürler hades.

Bitmap ve Degrade Dolgular

Bu derste dolgulara bolca zaman ayırdık. Oluşturduğumuz menü arka plan grafiği sadece dolgu kullanıyor, kenar çizgileri içermiyordu. Dolgu renklerini belirlemek için onaltılık değerler kullanabileceğimiz gibi renk paletlerinden seçimler de yapabiliyorduk. Hatırlarsanız Color Mixer bize dolgu renkleriyle ilgili olarak Tools panelinden daha fazla seçenek sunuyordu. Color Mixer şu anda çalışma alanınızda Color panelinde açık durumda olmalı. Eğer değilse Window > Color Mixer komutuyla açabilirsiniz. Color Mixer kontrollerini kullanarak bitmap ve degrade dolgular oluşturabiliriz.

Flash’a almış olduğunuz bitmap resimleri dolgu olarak da kullanabilirsiniz. bookstore5.fla dosyanızda şu anda da çeşitli bitmap öğeler mevcuttur. Bir bitmap resmi dolgu olarak kullanmak istiyorsanız Color Mixer penceresindeki Type menüsünden Bitmap seçimini yapabilir ve bu seçimi yapmanızın ardından beliren Import düğmesini kullanabilirsiniz.


Import düğmesine basmanızla birlikte o anda kütüphanede bulunan bitmap resimler görüntülenir. Bunlardan birini seçip dolgu yapabilirsiniz.

Not: Bir alana bitmap dolgu uygulanırsa bitmap resim o alana döşenecektir (tile). Bitmap dolguyu yeniden boyutlandırmak için Gradient Transform (Degrade Dönüşüm) aracı kullanılır. Bu araçla bitmap dolguları boyutlandırabilir, döndürebilir ve bükebilirsiniz. Gradient Transform aracını dersimizin ilerleyen bölümlerinde kullanacağız.

Şekilleri degrade ile de doldurabilirsiniz. Degrade, bir renkten başka bir renge kademeli olarak geçiş demektir. Flash ile iki farklı tipte degrade uygulayabilirsiniz: Çizgisel (linear) ve dairesel (radial). Dairesel degradelerde renk geçişi (renk değişimi) dairesel bir şekilde olurken çizgisel degradelerde bu geçiş düz bir hat üzerinde kendini gösterir. Daha zengin grafikler oluşturmak için her iki degrade tipinde de 16 renk kullanabilirsiniz. Gradient Transform aracı da degradenin odak noktasını hassas bir şekilde kontrol edebilmenize imkân tanır.

Şimdiki uygulamamızda ana SWF dosyasındaki öğelerin bir kısmı için degradeler oluşturacağız. Çalışma alanımızda daha önce Stage’in dışına taşıdığımız bir daire ve bir de dikdörtgen olmalı. Bu iki öğeye farklı dolgular uygulayacağız.

1. bookstore5.fla dosyasını sabit diskinizdeki TechBookstore klasörüne bookstore6.fla olarak yeniden kaydedin.

Önemli değişiklikler yapacağız, bu yüzden dosyanın yeni bir kopyası üzerinde çalışacağız.

2. background katmanının kilidini açın. Daha önce oluşturmuş olduğunuz dikdörtgeni yeniden Stage’e taşıyın ve Color Mixer’i kullanarak bir degrade uygulayın.

Daha önce 779’a 15 piksel boyutlarında bir dikdörtgen oluşturmuştuk. Dikdörtgeni seçin ve Stage’e taşıyın. Color Mixer ekranında Type menüsünden Linear seçimini yapın. Bu seçimi yapmanızla birlikte dikdörtgene çizgisel bir degrade uygulanacaktır.


Degrade tanım çubuğunun solundaki renk seçiciye tıklayın. Hemen üstteki onaltılık değer alanına #CCCCCC girin ve Enter’a basın. Alternatif olarak renk seçiciye tıkladıktan sonra üstteki renk paletini kullanarak da istediğiniz rengi belirleyebilirsiniz. Degrade tanım çubuğunun sağındaki renk seçici hâlâ beyaz renkte olmalı; eğer değilse simgesine tıklayın ve rengini beyaz (#FFFFFF) yapın.

İpucu: Rengi RGB alanlarını kullanarak da değiştirebilirsiniz.

İpucu: Degradeye bir renk eklemek için degrade tanım çubuğunda herhangi bir yere tıklayın. Böylece yeni bir renk seçici belirir ve siz de renginizi ekleyebilirsiniz. En fazla 16 renk ekleyebileceğinizi hatırlayın. Bir rengi çıkarmak için seçiciyi çubuktan uzağa doğru sürüklemeniz yeterlidir.

3. Gradient Transform aracını kullanarak degradeyi değiştirin.

Eğer degradeniz dikdörtgene bir şekilde uygulanamadıysa Tools panelinden Paint Bucket (Boya Kutusu) aracını seçin ve ardından dikdörtgeninize tıklayın. Degradenin şimdi uygulanmış olması lâzım. Degrade verdik ancak henüz boyutlandırma ve döndürme yapmadık; bunlar için de Gradient Transform aracını kullanacağız.

Tools panelinden Gradient Transform aracını seçin ve dikdörtgendeki degradeye tıklayın. Çeşitli kontrol öğeleri belirecektir.


Dikdörtgenin sağında, üstteki döndürme tutacağına tıklayın ve fareyi aşağıya doğru sürükleyerek degradeyi saat yönünde 90 derece döndürün. Böylece degrade dönüşümü yatay değil dikey olacaktır. Ancak dikdörtgen yüksekliği çok düşük olduğundan yeni dönüşüm çok etkili görünmeyebilir. Degradeyi daha etkin kılmak için yeniden boyutlandırmamız gerekir. Şimdi şeklin altına gelmiş olan kare simgesine tıklayın ve onu hafifçe yukarıya doğru sürükleyin. Sürükleme esnasında beliren yatay sınırlayıcı çizgilerin dikdörtgenin kenarlarına kenetlenmesini sağlayarak daha belirgin bir degrade oluşturabilirsiniz.

4. Dikdörtgeni bir grafik sembolüne dönüştürün ve title.png grafiğinin hemen altına yerleştirin.

Selection aracı ile dikdörtgeni seçin; dikdörtgenin tümüyle seçili olmasına dikkat edin. Dikdörtgeni Object Drawing modeliyle çizdiğimiz için üzerine bir kere tıklamak onu seçmek için yeterli olacaktır (çift tıklama yaparsak düzenleme moduna gireriz). Dikdörtgeni bir grafik sembolüne dönüştürmek için F8’e basın veya ana menüden Modify > Convert to Symbol komutunu verin. Yeni sembolü grBar olarak isimlendirin.

Properties denetçisinde sembolün X ve Y değerlerini sırsıyla 0 ve 109 yapın. Bu koordinatlar sembolü title.png grafiğinin hemen altına taşıyacaktır. Düzenli yapıyı muhafaza etmek için grBar sembolünü kütüphanede graphics klasörüne yerleştirin.

Not: Bir sembolü, Object Drawing modeliyle çizilmiş bir nesneyi veya gruplanmış bir öğeyi seçtiğinizde öğenin etrafında onu seçmiş olduğunuzu gösteren mavi bir çerçeve belirir.

5. Kütüphanede graphics klasöründeki grMenuGraphic sembolünü açın. gradient
katmanındaki şekli çizgisel bir degrade ile doldurun.

Önce kütüphanedeki graphics klasörüne, sonra da bu klasördeki grMenuGraphic sembolüne çift tıklayın. Şu anda sembol düzenleme moduna girmiş oldunuz. Tools panelindeki Zoom aracını ya da düzenleme çubuğundaki yakınlaştırma menüsünü kullanarak grafiği büyütebilirsiniz. Layers panelinde gradient katmanına sağ tıklayın ve Lock Others (Diğerlerini Kilitle) komutunu verin. Bu komut seçilemez durumdaysa (silik görünüyorsa) muhtemelen diğer katmanlar zaten kilitlidir. Eğer gradient katmanı da kilitli ise onun kilidini açın. Böylece diğer katmanlar üzerinde yanlışlıkla bir değişiklik yapılması ihtimalini de ortadan kaldırmış oluyoruz.

Burada da yukarıdaki dikdörtgen için kullandığımız degradeyi uygulayacağız. Son uygulamadan bu yana dolgu tipini değiştirmediğimiz için doğrudan Paint Bucket (Boya Kovası) aracını seçebilir ve sonra da gradient katmanındaki şeklin üzerine bir kez tıklayarak degrade dolguyu uygulayabiliriz.

Gradient Transform aracı ile degradeyi saat yönünde 90 derece döndürün ve degradenin dikey uygulanmasını sağlayın. Ardından yukarıda dikdörtgen örneğinde yaptığımız gibi degrade boyutunu şeklin kenarları ile aynı seviyeye getirin.


Düzenleme çubuğundaki Scene 1’e tıklayın ve ana Stage’e dönün.

6. Daha önce oluşturduğunuz daireyi Stage’de boş bir yere taşıyın ve şekle dairsel bir degrade verin. Daireyi bir sembole dönüştürün ve kendi katmanına taşıyın.

Daha önce oluşturduğumuz daire logonun da yer alacağı animasyonun bir parçası olacak. Önce daireyi Stage’de boş bir yere taşıyın. Color Mixer penceresine gidin ve Type olarak bu kez Radial seçimini yapın. Soldaki renk seçiciye tıklayın ve onaltılık değer alanına #00cc00 girin. Bu değer parlak, yeşil bir renge ait. Şu anda çok hoşunuza gitmeyebilir ancak site tamamlandığında diğer öğelerle birlikte daha çekici görünecek.

Şimdi de degrade tanım çubuğunun sağındaki renk seçiciye tıklayın. Degradenin bu bölgesinin tamamen saydam olmasını istiyoruz, bunun için Alpha değeri olarak 0 girin ve Enter’a basın. (Değeri belirtmek için Alpha menüsündeki çubuğu da kullanabilirsiniz.)


Degradenin daireye uygulandığından emin olun. Ardından daireyi bir sembole dönüştürmek için F8 tuşuna basın (daire seçili iken). Sembol ismi alanına grGlow yazın, sembol türü olarak da Graphic seçeneğini işaretleyin. İşiniz bittiğinde sembolü kütüphanedeki graphics klasörüne taşıyın. background katmanına sağ tıklayın ve Insert Layer komutu ile yeni bir katman ekleyin. Yeni katmana glow animation adını verin. grGlow sembolünü background katmanında iken kesin ve yeni katmana yapıştırın.

İpucu: Degrade kullanımında ölçülü olun; degradeler dosya boyutunu önemli oranda artırabilirler.

7. Dokümanı kaydedin.

hades ellerine sağlık..

Grafikler Üzerinde Yapabileceğiniz Diğer İşlemler

Tech Bookstore Web sitesi için yeni grafikler oluşturduk, farklı kaynaklardan grafikler aldık ve grafiklerde dolgu kullandık. Ancak grafikler üzerinde yapabileceğimiz çalışmalar sadece bunlarla sınırlı değil. Dilerseniz grafikleri döndürebilir, boyutlarını, alfa değerlerini ve renk kullanımlarını değiştirebilirsiniz. Şimdiki uygulamamızda çeşitli araçları ve Properties denetçisini kullanarak grafiklerde bazı yeni değişiklikler yapacağız.

1. bars adlı yeni bir katman oluşturun ve grBar sembolünü bu katmana taşıyın.

background katmanının hemen üzerinde bars isimli yeni bir katman oluşturun. background katmanında duran grBar grafik sembolüne sağ tıklayın ve Cut (Kes) komutunu verin. Yeni oluşturduğunuz bars katmanını seçin ve Edit > Paste In Place (Aynı Konuma Yapıştır) komutunu vererek sembolün kesilmiş olduğu yerdeki aynı x ve y koordinatları ile yeni katmana yapıştırılmasını sağlayın.

2. grBar grafik sembolünü kütüphaneden Stage’e taşıyın ve döndürün.

Kütüphaneden Stage’e taşıdığınız semboller birbirlerinden bağımsızdır. Stage üzerinde bir sembolü değiştiriyorken diğerine hiç müdahale etmeyebilirsiniz. Ancak Stage’deki bir sembole çift tıklamanız halinde sembol düzenleme modu açılır ve bu modda yapacağınız değişiklikler o sembolün tüm örneklerine yansır. Kısacası, konu semboller ise çift tıklarken dikkatli olun. bars katmanı seçili iken grBar sembolünü kütüphaneden Stage’e taşıyın. Sembole çift tıklayarak sembol düzenleme moduna girin. Tools panelinden Gradient Transform aracını seçin ve saat yönünün aksine döndürerek degradenin ters yönde verilmesini sağlayın.

3. Align paneli yardımıyla ikinci grBar sembolünü Stage’in altına taşıyın.

Align paneli açık değilse Window > Align (Hizala) komutunu verin. Panelin sağındaki To stage düğmesinin basılı (parlak durumda) olmasına dikkat edin; böylece nesneleri dizerken Stage’i referans almış oluyoruz. Bu düğme basılı değilken seçilmiş olan nesneler birbirlerine göre hizalanacaklardır.


Align kısmındaki Align left edge düğmesine basarak sembolün sol tarafı ile Stage’in sol kenarının aynı hizada olmasını sağlayın. Yine Align kısmındaki Align bottom edge düğmesine basın ve sembol ile Stage’in alt kenarlarının aynı hizada olmasını sağlayın. Ardından bars katmanını kilitleyin.

4. grGlow grafik sembolünün alfa değerini ve boyutunu değiştirin.

Daha önce Tech Bookstore için bir logo almış ve bunu logo katmanında Stage’e yerleştirmiştik. Şimdiki adımda logo katmanının kilitli durumda olması gerekiyor. glow animation katmanında yer alan grGlow sembolünü seçin ve Stage’in sol üst köşesindeki logoya doğru sürükleyin. Logonun etrafındaki parlaklığın görünür olup olmadığına bakın. Eğer parlaklığın yeterince görünmediğini düşünüyorsanız Gradient Transform aracı ile grGlow sembolündeki degradeyi yeniden boyutlandırabilirsiniz (sembole çift tıklayıp sembol düzenleme moduna girerek). Bu işlem sonrasında logonun etrafında hafif bir parlaklık fark ediliyor olmalı.


Rengin çok parlak olduğunu düşünüyorsanız sembolün alfa değerini düşürebilirsiniz. Sembol seçiliyken Properties denetçisinde görünen Color menüsüne tıklayın ve Alpha seçimini yapın. İlgili alana uygun bir değer girip Enter’a basın.



5. Tüm katmanlarınızı kilitleyin ve çalışmanızı kaydedin.


Bu derste şunları öğrendiniz:

• Tools panelini ve araçları tanıdık.
• Merge Drawing ve Object Drawing modellerini gördük.
• Vektörel çizimler ve bitmap resimler kullandık.
• Grafik çizim araçlarını kullandık.
• Kılavuzların kullanımını öğrendik.
• Grafik sembolleri oluşturduk.
• Maske katmanları oluşturduk.
• Kenar çizgileriyle çalıştık.
• Öğeleri düzenlemek için kütüphaneyi kullandık.
• Flash’a bitmap resimler ve vektörel çizimler aktardık.
• Degradeler kullandık.
• Mevcut grafikler üzerinde çeşitli değişiklik işlemleri gerçekleştirdik

bişi sorcam bu 6 resmi nerden bulucaz ki kendimiz mi yapıcaz

süper paylaşım bu programın fullunu bulmak mumkun mu?