Macromedia Flash 8 (Ders 4)

Semboller

İkinci dersimizde Web sitemizin arka zemini için çeşitli grafikler hazırlamış ve bir grafik sembolü oluşturmuştuk; grafik sembolleri aynı grafiği farklı yerlerde kullanmak istediğimizde çok faydalıdır. Aynı derste Stage’e kütüphaneden çeşitli öğeler taşımış ve kütüphanenin FLA dosyalarındaki öğeleri saklayan bir depo vazifesi gördüğünü öğrenmiştik. Kütüphane sadece sembolleri (grafik, animasyon, düğme ve font sembolleri) değil video klipleri, bitmap resimleri, ses dosyalarını ve diğer bileşenleri de saklar. Kısacası, Stage üzerinde çizdiğiniz ancak sembole dönüştürmediğiniz grafikleri saymazsak, gördüğünüz ya da duyduğunuz her şey kütüphanede saklanır.

Flash geliştirme ortamında oluşturabileceğiniz üç ana sembol türü vardır: Klipler, düğmeler ve grafikler. İkinci dersimizde çizim araçlarını kullanarak çeşitli vektörel grafikler oluşturmuş ve bu grafikleri içeren grafik sembolleri hazırlamıştık. Bu dersimizde düğme ve klip sembollerini de öğreneceğiz. Düğmeler, farenin kullanımına bağlı olarak görünüm ve işleyişleri değişebilen sembollerdir. Düğmeleri kullanarak SWF dosyamızda etkileşimli öğeler (açılır menüler, fareyle üzerine gelince ipucu gösteren düğmeler, vs) oluşturabiliriz.

Klip sembolü de Flash’taki önemli sembol türlerinden biridir. Stage bile aslında bir klip sembolüdür. Klipler kendilerine ait bir Timeline’ları bulunan küçük Flash uygulamalarıdır. Klipleri kod yazarak özelleştirmeniz mümkündür; bu da onları etkileşim, animasyon ve daha birçok etkileyici uygulama için ideal bir araç haline getirir.

Flash’ta ayrıca font sembolleri de oluşturabilirsiniz. Font sembolleri kütüphanede saklanır ve hiçbir zaman Stage’e sürüklenmezler. Font sembolleri genellikle unutulan ancak dosya boyutunun küçük tutulmak istendiği veya istenen fontun ilgili sistemde bulunmadığı anlarda çok işe yarayan sembollerdir.

Semboller daima kütüphanede saklanır. Bir sembolü kütüphaneden Stage’e sürüklediğinizde o sembolün bir örneğini Stage’e taşımış olursunuz. Stage’e taşıdığınız bu örnek gerçekte kütüphanedeki sembole bir referanstır; kütüphanedeki tek bir sembolün pek çok örneğini Stage’de kullanabilirsiniz. Stage’de kullandığınız örnek modelleri birbirlerinden bağımsız olarak yeniden boyutlandırma, renklendirme, saydamlaştırma, döndürme, bükme, koyulaştırma ya da rengini açma gibi çeşitli işlemlere tâbi tutabilirsiniz. Klip ve düğme sembol örneklerine Properties denetçisini kullanarak isim verebilir, böylece onları ActionScript veya Flash 8’in diğer özellikleri içinden çağırabilirsiniz. Bir sembol örneğinin özelliklerini ActionScript veya Properties denetçisi ile değiştirdiğinizde kütüphanedeki sembol bundan etkilenmez. Ancak sembol düzenleme modunda iken doğrudan kütüphanedeki sembolün özelliklerini değiştirirseniz o sembolün Stage’de yer alan tüm örnekleri bu değişikliklerden etkilenir. Yani kütüphanedeki sembol üzerinde yaptığınız düzenlemeler tüm sembol örneklerine otomatik olarak yansıtılır. Bunu kazara yapmanız halinde ise
Undo komutu ile değişiklikleri geri alabilirsiniz.

Özetleyecek olursak, semboller yeniden kullanılabilir öğelerdir. Renk ve boyutları farklı 18 kareye ihtiyacınız varsa her kareyi baştan çizmeniz gerekmez. İstediğiniz şekli içeren bir grafik sembolü oluşturabilir ve bu sembolün 18 örneğini Stage’e taşıyabilirsiniz. Ardından örnek modeller üzerinde dilediğiniz değişiklikleri yapabilirsiniz. Bu örnekler kütüphanedeki esas sembole sadece birer referans olduklarından dosya boyutunuz daha küçük olur. 18 kareyi ayrı ayrı çizmeniz halinde dosya boyutu gereksiz bir şekilde artacaktır.

Not: Dokümanınıza video klip, bitmap resim, font ve ses gibi öğeler aldığınızda (import) bunların kütüphaneye de eklendiğini unutmayın. Yani Stage’e taşıdığınız öğeler aslında kütüphanedeki öğelerin birer kopyası ya da örneğidir.

Stage Üzerinde Semboller Oluşturmak ve Düzenlemek

Yeni bir sembol oluşturmanın iki yolu vardır: Stage’deki hazır öğelerden birini kullanabilir veya sembol düzenleme modunda tamamen yeni bir sembol oluşturabilirsiniz. Eğer elinizde bir grafik varsa ve onu dönüştürmek istiyorsanız Stage’de grafiği seçin ve klavyeden F8 tuşuna basın. Böylece grafik sembolün içine yerleştirilir.

İpucu: Öğeleri sembollere dönüştürmek için şu adımları da izleyebilirsiniz: Modify > Convert to Symbol komutunu verin; grafiğe sağ tıklayın ve açılan menüden Convert To Symbol komutunu seçin; ya da öğeyi açık doküman kütüphanesine sürükleyin.

Örneğin Stage üzerinde bir kare çizdiyseniz onu seçin ve Modify > Convert to Symbol komutunu verin. Böylece çizdiğiniz kareyi içine alan bir sembol oluşturmuş olursunuz. Sembol oluşturmakla yaptığınız şey aslında seçtiğiniz şekli bir sembole sarmaktır. Bu işlemi bir kareye yapabileceğiniz gibi bir bitmap resme, hatta bir başka sembole de yapabilirsiniz.


Sembol oluşturmanın ikinci yolu sembol düzenleme modunu kullanarak sembole tamamen yeni içerik eklemektir. İkinci dersimizden de hatırlayabileceğiniz gibi sembol düzenleme modu Stage’den tümüyle bağımsız farklı bir düzenleme alanıdır. Kütüphanedeki bir sembole çift tıklayarak sembol düzenleme moduna girebilirsiniz. Sembol düzenleme modunda iken düzenleme çubuğu (Timeline’ın hemen üstünde; Mac’lerde Timeline’ın hemen altında) üzerindeki linklerle sembolü düzenlemekte olduğunuzu size hatırlatır.

Sembolleri ayrıca kendi yerlerinde de düzenleyebilirsiniz. Bu yöntemle, sembolün Stage’deki diğer öğelere göre olan konum ve boyutunu düzenleme esnasında görebilirsiniz. Bir sembolü kendi yerinde düzenlemek için Stage üzerinde sembole çift tıklayın. Düzenleme sırasında Stage’de o sembolün dışındaki her şey silikleşir ve seçilemez halde olur. Düzenleme çubuğu sembolü yerinde düzenlemekte olduğunuzu belirtir.


İpucu: Doğrudan Stage üzerinde oluşturduğunuz vektörel çizimleri FLA dosyasını yayınlamadan önce sembollere dönüştürmenizi tavsiye ederiz. İşlenmemiş öğe niteliğinde olan vektörel çizimler seçildiklerinde üzerlerinde bir çarpı işareti belirir. SWF dosyası görüntüleniyorken, Stage üzerindeki işlenmemiş öğeler oynatım kafası Timeline’da ilgili kareye geldiğinde yeniden hesaplanmak ve çizilmek durumundadır, çünkü kütüphanede saklanmış olan bir bilgi yoktur. Bu hesaplama ve çizimler de performansı düşürür. Öğeyi sembolü dönüştürerek onu kütüphaneye alabilir ve Timeline’da sırası geldikçe defalarca hesaplanıp çizilmesi yerine öğeye sadece bir kez başvuru yapılmasını sağlayabilirsiniz. Bu aynı zamanda eğer Merge Drawing modunda çizilmişse grafiğin daha kolay seçilmesini de sağlar.

Kütüphanedeki Sembolleri Görmek

Ctrl+L (veya Mac’te Command+L) komutuyla kütüphaneyi açabilir ve FLA dosyanızda yer alan sembolleri görebilirsiniz. Her sembol bir isim ve simge ile gösterilir. Sembolün ne tür bir öğe olduğunu Type sütunundan görebilirsiniz. Use Count (Kullanım Adedi) sütunu dokümanda o sembolün kaç örneğinin kullanıldığını belirtir. Linkage (Bağlantı) sütunu da öğenin ihraç (export) edilip edilmediğini, ortak bir kütüphaneyle ilişkili olup olmadığını ve FLA dosyasındaki bir şeye (örneğin bir bileşene) bağlı olup olmadığını gösterir. Linkage hakkında kitabın ilerleyen bölümlerinde daha detaylı bilgiler bulacaksınız.


İpucu: Kullanım adedi bilgisinin otomatik olarak yenilenmesini istiyorsanız Library Options (Kütüphane Seçenekleri) menüsünden Keep Use Counts Updated (Kullanım Adedini Güncel Tut) komutunu verin.

Düğme ve klip sembol örneklerine Properties denetçisindeki <Instance Name> alanını kullanarak isim verebilirsiniz. Böylece ActionScript kodu içinden bunları çağırmanız mümkün olur. Bir örneğe verdiğiniz isimle sembolü ilk oluşturduğunuz anda sembole verdiğiniz isim birbirlerinden farklıdır. Kütüphanedeki isim öğelerin daha iyi bir şekilde organize edilebilmesini sağlar. Stage üzerinde oluşturduğunuz bir örnek kütüphanedeki ana sembol ile aynı ismi taşıyabilir ancak bundan sonra Stage üzerinde oluşturacağınız her örneğin ismi farklı olmak zorundadır. Sembol örneklerinin adlandırılmasını altıncı dersimizde detaylı bir şekilde göreceğiz.

Sembollerin İç İçe Kullanılması

Font sembolü dışındaki tüm sembollerin metin, video, grafik ve diğer sembolleri barındırabilen kendilerine ait birer Timeline’ları vardır. Bu Timeline’ların her birinin nasıl çalışacağı oluşturduğunuz sembolün türüne bağlıdır. Örneğin düğmeler her katman için sadece dört kare gösterebilirler: Up, Over, Down ve Hit. Grafik sembolleri dilediğiniz kadar kare içerebilir, yani bu sembollerde animasyonlar oluşturabilirsiniz. Ancak bir grafik sembolünün Timeline’ı bütünüyle ana Timeline’a bağımlıdır ve ana Timeline hareket etmediği sürece o da hareket etmeyecektir. Son olarak, bir klip sembolünün Timeline’ı ise tamamen bağımsızdır ve ana dokümanın Timeline’ının yaptığı her şeyi o da aynen yapabilir. Daha gelişmiş animasyon ve etkileşimler oluşturmak için düğmelerin içine klipler, kliplerin içine düğmeler veya kliplerin ve düğmelerin içine grafik sembolleri yerleştirebilirsiniz. Ancak bir düğme Timeline’ı içine bir düğme sembolü veya bir grafik sembolü içine bir düğme örneği yerleştirmezsiniz; çünkü grafik sembolleri ActionScript içeremez veya ActionScript ile kontrol edilemezler.

İkinci dersimizde düzenleme çubuğunu görmüştük. Bu derste sembollerle daha sık çalıştıkça düzenleme çubuğunun önemini daha iyi kavrayacak ve iç içe geçmiş semboller kullanan dokümanlar arasında dolaşırken işinizi ne kadar kolaylaştırdığını daha yakından göreceksiniz.

Grafik Sembolleri

İkinci dersimizde çizim araçlarıyla çalışırken çeşitli grafik sembolleri oluşturmuştuk. Grafik sembolleri, kütüphanedeki statik grafikleri veya bitmap resimleri dokümanımız boyunca sürekli kullanmak istediğimiz anlarda oldukça faydalıdır. Statik grafikler herhangi bir hareket ya da animasyon içermeyen sabit görsellerdir. Grafik sembolleri ActionScript ile kontrol edilemediklerinden örnek isimleri bulunmaz.

Grafik sembollerinin içinde animasyonlar oluşturabilirsiniz ancak burada dikkat etmeniz gereken bir şey vardır: Grafik sembolünün içindeki animasyon, sadece grafik sembolünü barındıran Timeline’ın oynatılması halinde görüntülenir. Grafik sembollerini annelerinin elinden tutmuş çocuklara benzetebilirsiniz. Anne durduğu zaman çocuk da duracak, anne harekete geçtiği zaman çocuk da hareket edecektir. Bu işleyişin sizin için faydalı olabileceği çok az sayıda durum vardır, o yüzden animasyonları ana dokümanın Timeline’ı yerine sembollerin içinde kullanmanızı klip sembollerinin haricinde tavsiye etmiyoruz.


Not: Grafik sembollerine filtre uygulayamazsınız.

Stage üzerinde seçtiğiniz bir grafik sembol örneğinin özelliklerini Properties denetçisinde değiştirebilirsiniz. Instance Behavior menüsünü kullanarak sembolün bir düğme veya klip gibi davranmasını sağlayabilirsiniz. Swap düğmesi ise sembolü kütüphanenizdeki başka bir sembolle değiştirmenize imkân verir. Grafik seçenekleri, grafik sembolünün Timeline’ında içermekte olabileceği animasyonları bir noktaya kadar denetlemenize imkân verir. Animasyonun ana Timeline devam ettiği sürece oynamasını (Loop), sadece bir kez oynamasını (Play Once) veya sadece tek bir kare göstermesini isteyebilirsiniz (Single Frame). Color menüsü kullandığınız örneğe ilişkin efektleri düzenlemenizi ve parlaklık, renk tonu, alfa (opaklık) değerlerini değiştirebilmenizi sağlar. Beşinci dersimizde grafik sembollerinin özelliklerini daha detaylı bir şekilde göreceğiz.

Düğme Oluşturmak

Düğmeler Flash animasyonlarınızın etkileşim kazanmasını sağlar. Altıncı ve dokuzuncu derslerimizde de öğreneceğiniz gibi düğmeler doldurduğunuz formları göndermek veya Flash dokümanınızı kontrol eden ActionScript kodunu çalıştırmak için kullanılabilir. Düğmelerin ayrıca çeşitli “olaylara” tepki veren işlevleri de vardır. Örneğin kullanıcının fare ile düğmenin üzerine tıklaması bir olaydır. Bu tür işlevlerin ActionScript kodu ile düğmeye eklenmesi hakkında dokuzuncu dersimizde daha detaylı bilgi alabilirsiniz.

Sitemiz için öncelikle başlık alanının hemen altında yer alacak olan üç temel düğme oluşturacağız.

Her düğme kendisine ait birer menüye sahip olacak. düğmeleri oluştururken ikinci dersimizde FLA dosyasına almış olduğumuz 6 adet PNG bitmap resmini kullanacağız. Her düğme sembolünün dört farklı hâli vardır; bunlar kullanıcı SWF dosyasında düğmeyle etkileşime geçtiğinde düğmenin nasıl görüneceğini belirler.


Düğmenin Up durumu etkileşimli değildir ve hiçbir şey yapmaz; düğmeyi asılı, hareketsiz bir şekilde gösterir. Over durumu fare düğmenin tıklanabilir alanı üzerine getirildiğinde, Down durumu da düğmeye tıklandığında düğmenin nasıl bir görünüm alacağını belirler. Hit durumunda yer alan herhangi bir imaj ya da çizimse düğmenin tıklanabilir alanını belirler. Düğmeyi asıl tanımlayan şey Hit işlevidir; Up, Over ve Down durumları daha ziyade estetik amaçlara yöneliktir.

Not: Bazı SWF dosyalarında fare düğmenin üzerine geldiğinde fare imleci bir el simgesine dönüşür. Bunun amacı farenin tıklanabilir bir alan üzerinde olduğunu ziyaretçiye göstermektir. Fare imlecini ActionScript ile değiştirebilirsiniz.

1. bookstore7.fla dosyasını açın ve dosyayı bookstore8.fla adıyla kaydedin.

File > Save As komutunu vererek dosyayı yeni bir isimle kaydedin.

2. Insert > New Symbol komutuyla btnProducts adlı yeni bir düğme sembolü oluşturun.

Bu komutu vermenizin ardından Create New Symbol penceresi açılır. Name alanına btnProducts yazın ve Button radyo düğmesini seçin. Bu işlemle düğme sembolünün kütüphanede kullanılacak ismi belirlenmiş olur. Daha sonra bu sembolün bir örneğini Stage’e taşıdığınızda bu örneğe de bir isim vereceksiniz (örneğe vereceğiniz ismin sembolün esas isminden farklı olduğunu hatırlayın). OK düğmesine tıkladığınızda sembol düzenleme modu açılır. Sembolü kütüphanede de görebilirsiniz.

İpucu: Sembol isminin önünde “btn” ifadesini kullanmamızın sebebi kütüphaneyi daha etkin bir şekilde organize edebilmek. Tutarlı bir tarz belirlediğiniz sürece dilediğiniz isimlendirme metodunu kullanabilirsiniz.

3. Kütüphaneyi açın ve media klasörüne koymuş olduğunuz bitmap resimleri bulun.

media klasörünün simgesine çift tıklayarak klasörü açın. Klasörde yer alan products_up.png, products_down.png, company_up.png, company_down.png, contact_up.png ve contact_down.png isimli bitmap resimleri sitemizdeki düğmelerin farklı hâllerini göstermek için kullanacağız.

4. Up hâlini seçin ve products_up.png resmini düğmeye ekleyin. Grafiğin x ve y noktalarını 0 ve 0 olarak belirleyin.

Düğme sembolünü açtıktan sonra Timeline’da düğmeye tahsis etmek için kullanabileceğiniz dört hâlin varlığını göreceksiniz. Bunlar biraz önce bahsetmiş olduğumuz Up, Over, Down ve Hit durumları. Timeline’da Up karesini seçin ve products_up.png resmini kütüphanedeki media klasöründen düğme sembolüne taşıyın.


Stage’de grafiği seçin ve Properties denetçisinde x ve y pozisyonu olarak 0 ve 0 değerlerini verin.

5. products_down.png resmini düğme sembolünün Over hâline ekleyin.

Bir düğmenin Timeline’ı içindeki her öğe anahtar karelerde yer almak zorundadır. Layer 1’de Over karesini seçin ve Insert > Timeline > Blank Keyframe komutuyla boş bir anahtar kare ekleyin. Up karesindeki bitmap resmin yeni anahtar kareye kopyalanmasını istemediğimiz için boş bir anahtar kare ekliyoruz. Over karesine başka bir resim ekleyeceğiz.

products_down.png bitmap resmini media klasöründen düğmenin Over durumuna sürükleyin. Bu, ziyaretçiler fareyi düğmenin üzerine getirdiklerinde görünecek olan resimdir. Yani fare imleci düğmenin üzerine geldiğinde düğmenin görünümü değişecektir. Properties denetçisinden grafiğin x ve y konumunu 0,0 şeklinde belirleyin, böylece grafik Up karesindeki grafikle örtüşecektir.

İpucu: Sembolün yer alacağı (konumlandırılacağı) nokta bir çarpı işareti ile belirtilir. Bazen, özellikle de ActionScript kullanıyorsanız, bir düğme ya da klip sembolünün yerini değiştirmek isteyebilirsiniz. Yeni x ve y koordinatları belirleyerek sembolün konumunu değiştirebilirsiniz.

6. Hit karesini seçin ve F5 tuşuna basarak resmi Down ve Hit karelerine ekleyin.

F5 tuşuna bastığınızda products_down.png bitmap resmi düğme sembolünün Down ve Hit durumlarına eklenir ve resmin pozisyonu her iki karede de aynı olur. Hit durumu düğmenin tıklanabileceği alanı belirler. Aynı resmi aynı konumda kullandığınızdan tıklanabilir alan ile düğmenin diğer alanları birbirleriyle tam olarak örtüşecektir.


Not: Tıklama alanının Stage’de görünür olmadığını hatırlayın. Bitmap resim olarak parlak, yeşil bir dikdörtgen kullanabilirsiniz ancak bu ziyaretçileriniz SWF dosyanızı açtığında görüntülenmez. Bu durumda düğmenizin tıklama alanını belirtmek için en iyi yol Timeline’da hazırda duran, boyutu ve konumu doğru bir şekilde ayarlanmış olan grafiği kullanmaktır.

İpucu: Tıklama alanı tanımlamak için metin uygun bir seçim değildir. Bunun sebebi karakterler arasındaki boşlukların veya “o” harfinin ortasının arka zemin olarak algılanması ve tıklanamaz durumda olmasıdır. Eğer bir düğmenin Timeline’ında metniniz varsa Hit karesine dikdörtgen gibi bir grafik yerleştirmeli ve bunun boyutunu tüm metni içine alacak şekilde ayarlamalısınız. Aksi hâlde posta kutunuz sitenizdeki düğmelerin çalışmadığıyla ilgili sayısız mesajla dolabilir.

7. İki düğme daha oluşturacağız. Ardından sembolleri kütüphanedeki buttons klasörüne ekleyeceğiz.

Ana başlık alanının altında şirket (company) ve irtibat (contact) için iki düğme daha oluşturmamız gerekiyor. Yukarıdaki adımları izleyerek btnCompany ve btnContact isimli iki düğme oluşturun. İşiniz bittiğinde kütüphaneyi açın ve üç düğme sembolünü buttons klasörüne taşıyın. Düğmeleri şimdilik kütüphanede bırakın. Sıradaki uygulamamızda düğmeleri Stage’e ekleyeceğiz.

8. Bir sonraki uygulamaya geçmeden önce dosyanızı kaydedin.

Ctrl+S veya Command+S ile dosyanızı kaydedin.

Düğmeleri Stage’e Yerleştirmek

Şimdi elimizde kütüphanede duran 3 adet düğme var. Bu düğmeleri Stage’e yerleştireceğiz. Üç düğmenin kendi katmanlarında grBar grafiğinin üzerine yerleştirilmeleri gerekiyor. Dersimizin sonunda bu üç düğmeyi saran görünmez bir düğme oluşturacak ve menüleri bu düğmelerle hizalayacağız.

1. buttons adlı yeni bir katman oluşturun.

Timeline’da text katman klasörünü seçin ve Insert New Layer düğmesine tıklayın. Yeni katman oluşturulduğunda isme çift tıklayın ve katman ismi olarak buttons yazın.

2. Oluşturduğunuz üç düğmeyi kütüphaneden Stage’e taşıyın.

btnProducts, btnCompany ve btnContact düğmelerinin tümü kütüphanedeki buttons klasöründe duruyor olmalıdır. Düğmeleri Stage’e sürüklediğinizde onların grBar ile aynı yükseklikte olacak şekilde oluşturulduklarına dikkat edin.

3. Üç düğmeyi yan yana getirin ve Properties denetçisinı kullanarak doğru x koordinatlarını girin.

Düğmeleri btnProducts, btnCompany ve btnContact şeklinde soldan sağa dizin. Konumlarını tam olarak ayarlamak için Properties denetçisini açın, btnProducts örneğini seçin ve x koordinatı olarak 115 değerini girin. Benzer şekilde btnCompany için x değerini 200, btnContact için de x değerini 285 olarak girin.


4. Align panelini kullanarak üç düğmeyi birbirleriyle yatay olarak hizalayın.

Align panelini açın ve To Stage düğmesinin seçilmemiş olmasına dikkat edin. Sembollere tıklarken Shift tuşunu basılı tutarak üç düğmeyi aynı anda seçin. Ardından Align vertical center düğmesine basarak düğmelerin birbirleri ile hizalanmasını sağlayın.

5. Align panelini kullanarak üç düğmeyi grBar ile gruplayın ve hizalayın. İşiniz bitince üç düğmenin grubunu çözün ve buttons katmanını kilitleyin.

Sembolleri gruplayarak sanki tek bir nesneymiş gibi düzenlenmelerini sağlayabilirsiniz. Bazen Stage üzerindeki sembolleri aynı anda hareket ettirmek ya da döndürmek isteyebilirsiniz, bunun en kolay ve hızlı yolu sembolleri gruplamaktır.

Shift tuşunu basılı tutun ve düğmelerin her birine tıklayarak üç düğmeyi de seçin. Ardından ana menüden Modify > Group komutunu verin. Üç düğmeyi artık tek bir nesneymiş gibi hizalayabilirsiniz. Düğmeler grubunu seçin ve Stage’de grBar’ın altına taşıyın. bars katmanının kilidini açın ve grBar’ı seçmek için Shift tuşuna basın. Şimdi grBar sembolü ve düğmeler grubu seçilmiş durumda olmalıdır.

Align panelinde Align top edge düğmesine tıklayarak gruplanmış düğmeleri grBar’ın üstüne hizalayın. Modify > Ungroup komutuyla düğmelerin grubunu çözün. Son olarak buttons ve bars katmanlarını kilitleyin.

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

Şimdi Stage’de arkalarında duran çubukla hizalanmış durumda üç adet düğmeniz bulunuyor. Üç düğme grBar’ın üst kenarına göre hizalanmış ve eşit mesafe ile ayrılmış durumda olmalı. Düğmelerin bu şekilde yerleştirilmiş olması, onlara menüler eklediğimizde daha önce oluşturduğumuz maske ile düzgün bir hizada olmalarını sağlayacak.

Metin Düğmeleri Oluşturmak

Bazen sadece metinden ibaret olan, arka zemin içermeyen düğmelere ihtiyaç duyarsınız. Bu gibi durumlarda yapacağımız şey metin düğmeleri oluşturmaktır. Şimdiki uygulamamızda metin düğmeleri oluşturacak ve dersin ilerleyen bölümlerinde bunları menüye ekleyeceğiz.

Metin düğmeleri oluştururken dikkat edeceğimiz en önemli noktalardan biri tıklama alanlarının tanımlanmasıdır. Tıklama alanı, kullanıcının fare ile düğmenin üzerinde tıklama yapabileceği alandır. Eğer bir tıklama alanı tanımlamadan metni Stage üzerinde bırakırsanız metin düğmesine tıklamak kullanıcılar açısından çok zor bir hâl alabilir. Kullanıcı böyle bir durumda tam olarak karakterleri oluşturan ince çizgilerin üzerine gelip tıklama yapmak durumda kalır ki bu hiç de kolay olmayabilir.

Not: Metin düğmeleri oluşturmanız pek tavsiye edilmez çünkü yeniden kullanılabilir olma özellikleri yoktur. En iyisi hiç metin içermeyen grafik tabanlı bir düğme sembolü oluşturmak ve sonra da bunu defalarca bir metin katmanının altında kullanmaktır. Kütüphaneye ekleyeceğiniz her düğmenin dosya boyutunu artıracağını unutmayın.

Şimdiki uygulamamızda menüye ekleyeceğimiz metin düğmeleri oluşturacak ve her bir düğme için tıklama alanları tanımlayacağız. Metin düğmelerinde uygun bir tıklama alanı tanımlamak zor değildir, tek yapmanız gereken şimdi anlatacağımız adımları takip etmek.

1. Text aracını seçin ve Stage’e tıklayarak bir metin alanı oluşturun. Properties denetçisinde açılır listeden Static text seçimini yapın, fontu Arial olarak belirleyin, metin rengini siyah (#000000) ve font boyunu da 8 olarak verin. Bold düğmesine tıklayın. Son olarak Anti-alias for readability metodunu seçin.

Text aracı seçiliyken Stage’e tıkladıktan sonra Properties denetçisini açarak yukarıda belirttiğimiz font, renk ve boyut değerlerini girin. Doğru metin türünü (Static) seçtiğinizden ve Bold düğmesine bastığınızdan emin olun. Metin için Anti-alias for Readability seçimini yapmayı unutmayın.

Timeline’da buttons katmanını (kilidinin açılmış olmasına dikkat edin) seçin ve Stage’de text aracını seçtikten sonra yeni metin alanına CATALOG (buradaki gibi büyük harfle) yazın.

Not: Metin alanını hangi katmanın üzerinde oluşturduğunuz önemli değil çünkü uygulama tamamlanınca bu geçici düğmeleri Stage’den sileceğiz.

2. Metin alanını seçin ve F8 tuşuna basarak onu bir düğme sembolünün içine yerleştirin.

Tools panelinden Selection aracı ile metin alanını seçin. Klavyeden F8’e basarak veya ana menüden Modify > Convert to Symbol komutunu vererek metin alanını bir düğme sembolüne dönüştürün. İsim alanına btnCatalog yazın ve OK düğmesine tıklayarak i işlemi tamamlayın.


3. btnCatalog’u sembol düzenleme modunda açın ve semboldeki metin alanını ortalayın.

Üzerine çift tıklayarak düğmeyi sembol düzenleme modunda açın. Metin alanını seçin ve alanı ortalamak için Align panelini kullanın. Align panelinde To Stage düğmesinin seçildiğinden emin olun ve önce Align Horizontal Center sonra da Align Vertical Center düğmelerine basın.

4. Düğmeye Over, Down ve Hit durumlarını ekleyin.

Down karesini seçin ve bir kare eklemek için F5’e basın. Metin düğmesinin farklı durumları için farklı görünümlere ihtiyacımız olmadığından düğmenin Up, Over ve Down karelerinde aynı metin görüntülenir.

İpucu: Tıklama veya fareyle üzerine gelme halinde metnin renklenmesini istiyorsanız Over ve/veya Down karelerinde bir anahtar kare eklemeli, ardından metin alanını seçip Properties denetçisinden metin rengini belirtmelisiniz. Böylece ziyaretçi fareyi düğmenin üzerine getirdiğinde veya düğmeye tıkladığında metnin rengi değişecektir.

5. Rectangle aracıyla Hit karesinde tıklanabilir bir alan oluşturun.

Hit karesini seçin ve yeni bir anahtar kare eklemek için F6’ya basın. Down karesindeki metnin Hit karesine de girildiğini göreceksiniz. Tıklama alanının neresi olacağını belirlemek için metin alanını bir referans olarak alabilirsiniz. Rectangle aracını seçin ve dolgu rengi olarak istediğiniz bir rengi, kenar rengi olarak da No Color seçeneğini belirleyin. Karedeki metni tam olarak içine alan bir dikdörtgen çizin. Dikdörtgeni metin alanından biraz daha büyük yapın, böylece düğmenin tıklanması daha kolay olacaktır.


6. Menü için beş düğme daha oluşturun: REVIEWS, TOUR, NEWS, FEEDBACK ve
MAP. Ardından bunları Stage’den silin ve buttons katmanını kilitleyin.

Her düğme için yukarıdaki adımları yeniden izleyin (ancak bu kez metin olarak yine hepsi BÜYÜK harflerle olmak üzere REVIEWS, TOUR, NEWS, FEEDBACK ve MAP girin). Bu işlem bittiğinde kütüphanede 6 yeni düğmeniz olmalı: btnCatalog, btnReviews, btnTour, btnNews, btnFeedback ve btnMap. Kütüphanedeki düğmelerin sayısını kontrol ettikten sonra metin düğmelerini Stage’den silin. Kütüphanede sembolleri buttons klasörüne taşıyın. Kütüphanedeki bu düğmeleri dersimizin ilerleyen bölümlerinde oluşturacağımız üç menüye ekleyeceğiz.

İşiniz bittiğinde buttons katmanını kilitleyin.

7. Dosyanızı kaydedin.

Devam etmeden önce dosyanızı kaydetmeyi unutmayın.

Görünmez Bir Düğme Oluşturmak

Bir düğmenin Hit durumuna girmiş olduğunuz şeylerin SWF dosyası çalıştırılıyorken görünür olmadığını öğrendiniz. Şimdi bu özellikten faydalanacak ve sadece tıklanabilir bir alanı olan, hiç grafik içermeyen görünmez bir düğme oluşturacağız. Görünmez düğmeleri HTML’deki “hot spot”lar olarak düşünebilirsiniz; bunlar bir düğme gibi görünmeseler de üzerlerine tıkladığınızda bir şey olur ya da bir olay gerçekleşir. Görünmez düğmeler de bir SWF dosyasında aynı şeyi yaparlar. Tech Bookstore sitesinin ana navigasyon öğeleri olarak işlev gören üç menünün kapatılmasını tetiklemek için görünmez bir düğme kullanacağız.

Sitemizdeki üç düğmeden biri üzerine fareyle geldiğinizde aşağıya doğru açılan bir menü animasyonu göreceksiniz. Ardından fareyi görünmez düğmenin üzerine getirdiğinizde menü bu kez yukarı yönlü bir animasyonla kapanacak. Fare menü alanının dışına çıktığında açılmış olan menünün kapatılmasını istiyoruz.

1. buttons katmanının altında invisible button adlı yeni bir katman oluşturun.

text katman klasörünü seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana çift tıklayın ve isim olarak invisible button yazın. Bu katman, buttons katmanında oluşturduğunuz ve menüleri açmak için kullanılacak olan üç düğmenin altında yer alır. Görünmez düğmeyi üç düğmenin altına yerleştirerek menülerin açılması işlemine karışmasını önlüyoruz. Eğer görünmez düğme katmanı üç düğmenin üzerinde yer alsaydı menüler açılmayacak, görünmez düğme menüleri kapanmaya zorlayacaktı. Katman sıralaması bu yüzden büyük önem taşıyor.


2. Stage’e 120, 140 ve 160 piksel noktalarında üç adet yatay kılavuz çizgisi ekleyin. 450 piksel noktasında da dikey bir kılavuz çizgisi oluşturun.

Cetveller görünür durumda değilse ana menüden View > Rulers komutunu verin. Stage’e yatay cetvelden dikeydeki 120, 140 ve 160 piksele denk gelecek üç kılavuz çizgisi çekin. Dikey cetvelden de yataydaki 450 piksel noktasına denk gelecek dikey bir kılavuz oluşturun.


3. Tools panelinden Rectangle aracını ve dolgu rengi olarak da istediğiniz bir rengi seçin. Merge Drawing moduna geçin ve dokümanın sol üst köşesinden 450 ve 120’deki kılavuzların kesiştiği noktaya uzanan bir dikdörtgen çizin. Dokümanın sol kenarından 450’deki dikey kılavuza uzanan, 140 ve 160’taki kılavuzların arasındaki alanı kapsayan bir dikdörtgen çizin.

Menüleri tetikleyen düğmeler grBar grafiğinin içinde yer alır ve menüler bu grafiğin altında kılavuzun bulunduğu hizaya kadar açılırlar. Menülerin tam olarak bulunduğu alanın haricinde kalan bir bölgeyi kapsamak istiyoruz. Ayrıca Stage’in kalan diğer alanlarını kapsamaya da gerek yok. Düğmenin, Stage’in menülerin altında kalan bir bölgesini kapsaması yeterli; bu bölge de kılavuzun altından başlıyor. Merge Drawing modunu kullanıyoruz, böylece biraz daha kompleks bir şekil oluşturma imkânımız olabilir. Birbirleriyle örtüşen ve bir araya geldiklerinde daha büyük bir grafik oluşturan çeşitli dikdörtgenler çizeceğiz; şeklimiz menü yapısına göre özelleştirilebilir bir yapıya sahip olacak.

Stage’in sol üst köşesinden başlayan ve yaklaşık 450 piksel genişliğinde olan bir dikdörtgen çizin. Dikdörtgen dikey cetveldeki 120 piksel noktasında, yani düğmelerin hemen altında son bulsun.

İpucu: Bu düğme için tıklanabilir alanı oluşturuyorken Stage’de nelerin olduğunu görebilmek istiyorsanız Color Mixer panelini açın, fill color simgesine tıklayın ve Alfa değerini % 20 yapın. Böylece dikdörtgenlerin dolgu rengi saydamlaşır, bu da tıklanabilir alanı görmenize yardımcı olur. Eğer hâlihazırda çeşitli dikdörtgenler oluşturmuşsanız Alfa yüzdesini düşürmeden önce bu şekilleri seçmeniz gerekir.

Kılavuzun altında oluşturacağınız ikinci dikdörtgen Stage ile aynı genişlikte olmalı ve menülerin açıldığı yerin hemen altında bulunmalıdır. 140 piksel noktasında yer alan kılavuzun altında bir dikdörtgen çizin. Bu dikdörtgen yaklaşık 20 piksel uzunluğunda olsun.

4. Düğmelerin sağ ve sol taraflarına da birer dikdörtgen ekleyin.

Kullanıcının fareyi menünün sağ veya sol tarafına hareket ettirmesi durumu için de menülerin bulunacağı alanın sağ ve soluna birer dikdörtgen çizmemiz gerekiyor. Tüm bu çizimler bittiğinde dikdörtgenler birleştirilmiş ve ortaya aşağıdaki gibi bir şekil çıkmış olmalı.


Not: Etkileşimli menü tasarımınız sona erdiğinde, FLA dosyanızda düğme ve menülerin tam olarak nerede olduklarına bağlı olarak görünmez düğmenin konumunu biraz değiştirmek zorunda kalabilirsiniz.

Oluşturduğunuz dikdörtgenlerin yükseklikleri, bunlar üst ve altlarındaki dikdörtgenlerle kesiştikleri ve böylece arada boşluk kalmadığı sürece önemli değildir. Dikdörtgenler arasında boşluğun kalacağı yer açılır menülerin görüneceği alandır.

5. invisible button katmanındaki anahtar kareye tıklayın ve henüz çizmiş olduğunuz dikdörtgeni seçin. Modify > Convert to Symbol komutunu verin ve Button radyo düğmesini seçin. Düğmeyi btnInvisible olarak adlandırın ve OK düğmesine tıklayın. Stage’deki sembole çift tıklayın ve sembol düzenleme moduna girin.

btnInvisible sembolünü oluşturmanızın ardından Stage’deki içeriğin etrafında sınır çizgileri belirmiş olmalıdır. Sembol düzenleme modunu açmak için sembole çift tıklayın. Henüz çizmiş olduğunuz tüm dikdörtgenler düğmede ilk karede (Up) olmalıdır. Ancak düğmenin sadece tıklanabilir alanını kullandığımızdan sadece Hit karesinde içeriğe ihtiyacımız var.

6. Dikdörtgenleri Hit karesine sürükleyin.

Up karesindeki anahtar kareye tıklayın ve sonra onu Hit karesine taşıyın.


Diğer durumların tümünü boş bırakabilirsiniz, bu durumda düğmenin grafik içeren hiçbir hâli olmaz. Bu karedeki hiçbir şey SWF dosyasında görünür değildir. Artık elinizde görünmez bir düğme var.

İpucu: Bir seçimi hızlı bir şekilde bir sembole dönüştürmek için F8’e basın veya seçimi kütüphaneye sürükleyin. Seçimi Preview panelinin altındaki alana sürüklediğinizde Convert to Symbol penceresi açılacaktır.

7. Scene 1’e tıklayıp Stage’e dönün, invisible button katmanını gizleyin ve kilitleyin.

Stage üzerinde şu anda turkuvaz renkli hafif saydam geniş bir alan bulunuyor olmalı. Turkuvaz renkli alan görünmez düğmenin tıklanabilir alanını gösterir. Bu alanı menülerin kapanmasını tetikleyen alan olarak kullanacaksınız. Turkuvaz renkli bu saydam alan yayınlayacağınız SWF dosyasında görünür olmasa bile Flash geliştirme ortamındaki çalışmanızı etkileyebilir.

Timeline’a gidin ve invisible button katmanındaki Hide layer noktasına (göz simgesinin altındaki nokta) tıklayın. Lock simgesine tıklayarak katmanı kilitleyin. Böylece katman görülemez, seçilemez ve katmana yanlışlıkla yeni içerik eklenemez.

8. Doküman kütüphanesinde btnInvisible sembolünü buttons kütüphane klasörüne sürükleyin.

İkinci dersimizde buttons adlı bir kütüphane klasörü oluşturmuştuk. Daha önceki son üç uygulamada oluşturduğumuz tüm düğme sembollerini buttons klasörüne taşıyın.

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

Klip Oluşturmak ve Kullanmak

Klipler ya da film klipleri Flash tasarımcı ve geliştiricilerinin en sık kullandığı sembol türüdür. Bir klip gerçekte minyatür bir uygulamadır. Her klibin kendine ait bir Timeline’ı vardır ve bu Timeline Flash dokümanındaki ana Timeline’dan bağımsız hareket eder. Bu sayede bir yandan animasyonların sürekli dönmesini sağlarken bir yandan da dosya boyutunun büyümesini önlemiş olursunuz.

Uzun animasyonlar oluşturmak zorunda değilsiniz. Tek bir döngü oluşturun ve bu klibi Stage’e yerleştirin. Klip siz istediğiniz sürece ana Timeline’dan bağımsız olarak tekrarlanacaktır. Klipler ayrıca sürekli dönmek zorunda da değildir. Bir klip oluşturabilir ve bunun belli bir olayın ardından gösterilmesini sağlayabilirsiniz.

Klipler sadece animasyonları barındırmaktan çok daha fazlasını yapabilir. Örneğin klip sembolleriyle karışımları (blend) bir arada kullanabilirsiniz. Karışımlar bir klipteki renklerin daha alt katmandaki bir nesnenin renkleriyle nasıl bir etkileşimde olacağını belirler. Kitabımızda karışımlar konusuna girmiyoruz ancak Flash dokümantasyonunda bu konuda geniş bilgi bulabilirsiniz. Kliplerle mini uygulamalar oluşturabilir ve uygulamaları onlara sürükleyebilirsiniz. Kitabımız boyunca kliplerle çalışıyor olacağız. Tüm detayları öğrenmek için acele etmeyin. Bu dersimizde işe sadece yeni dostumuzu biraz olsun tanımakla başlayacağız.

Bir sonraki uygulamamızda Tech Bookstore için çeşitli klipler oluşturacağız. Bu dersimizdeki klipler kullanıcı arabiriminde yer alacak animasyonları kapsayacak. Kitabımızın ilerleyen bölümlerinde mini uygulamaları veya sunucudan yüklenen içeriği taşıyan klipler de oluşturacaksınız.

Klipler de tıpkı grafik ve düğme sembolleri gibi oluşturulur. Ancak klipler bir sembole düğme veya grafik sembollerine göre daha zengin bir işlevsellik katmanıza imkân verirler. Klipleri ayrıca ActionScript ile de oluşturabilir ve kullanabilirsiniz. Klip sembolünün Stage’deki örneğine bir isim verebilir ve daha sonra bu ismi ActionScript içinde çağırabilirsiniz. Altıncı ve dokuzuncu derslerimizde ActionScript hakkında daha fazlasını öğreneceğiz.

Not: Klipler, SWF dosyasının boyutunu düğme ya da grafik sembollerinden daha fazla artırır. Kliple vermek istediğiniz efekti bir düğme veya grafikle yapabildiğiniz durumlarda klip kullanmaktan vazgeçebilirsiniz. Ancak çoğu zaman kliplerin zengin yeteneklerine ihtiyacınız olacak.

1. logo sembolünü seçin ve sembolü yeni bir klibin içine eklemek için F8’e basın.

İsim alanına mcLogo yazın, Movie clip radyo düğmesine tıklayın ve OK düğmesine tıklayarak yeni bir klip oluşturun. mcLogo birkaç bağımsız animasyon içerecek, bu yüzden diğer klipleri ana klibin içindeki katmanlara yerleştirebilmek amacıyla logo.png bitmap resmini bir klibin içine eklememiz gerekiyor.

İpucu: Stage üzerinde logoyu seçmek için öncelikle logo katmanının kilidini açmanız gerekir.

2. mcLogo’ya çift tıklayın, Layer 1’e yeni bir isim verin ve sonra da klibe yeni bir katman ekleyin.

Klibin içinde Layer 1’de logo.png bitmap resmini göreceksiniz. Layer 1’in ismini logo olarak değiştirin. Insert New Layer düğmesine tıklayarak logo.png resminin üzerine yeni bir katman ekleyin. Yeni katmana pageTurn ismini verin.

3. Line aracı ile pageTurn katmanında bir çizgi oluşturun.

Bir çizgi oluşturmadan önce pageTurn katmanın seçildiğinden emin olun. Line aracını seçin ve Object Drawing moduna dönün. Tools panelinde Stroke color düğmesine tıklayın ve kenar çizgisi rengini #999999 olarak belirleyin. Tools panelinden Line aracını seçin.

Aşağıdaki şekilde gördüğünüz gibi fareyi kitap kapağının sol dıştaki ucundan kapağın içteki kenarına kadar tıklayın ve sürükleyin. Çizgiyi, kitabın sol kapak kenarı ile aynı açı ve yükseklikte olacak şekilde konumlandırın.


İpucu: Çizgi seçili durumda değilken fareyi çizgilerin uç noktalarına getirin ve imlecin “L” şeklini aldığını görün. Bu imleçle çizgiyi tıklar ve sürüklerseniz çizginin konum ve uzunluğunu değiştirebilirsiniz. Bu sayede çizgiyi logoya göre daha hassas bir şekilde ayarlayabilirsiniz. Tüm çizgiyi seçerseniz fareyle üzerine geldiğinizde imleç dört yönlü bir ok şeklini alır; çizgiyi bununla tıklayıp sürüklemeniz çizginin bir bütün olarak taşınmasına yol açar.

4. F8 ile çizimi yeni bir klibe yerleştirin.

Henüz oluşturduğunuz çizgiyi bir bütün olarak seçin (ancak hareket ettirmeyin) ve F8’e basarak bir klip sembolüne dönüştürün. İsim alanına mcPageTurn yazın, Movie clip radyo düğmesini seçin ve OK deyin. mcLogo’nun içinde yeni bir klip oluşturulur, böylece mcPageTurn mcLogo’nun içine geçmiş olur. Düzenleme çubuğu iç içe geçmiş klipler arasında nerede olduğunuzu size gösterecektir.

İpucu: Önce mcLogo ve sonra da mcPageTurn’e çift tıklarsanız mcPageTurn klibinin içine girer ve burada daha önce oluşturduğunuz çizgiyi düzenleyebilirsiniz. Çizgi işlenmemiş grafik durumunda olduğundan üzerinde shape tween uygulayabilirsiniz. Bu tekniği beşinci dersimizde öğreneceğiz.

mcLogo klibinin içinde gösterilecek olan bir animasyon oluşturmamız gerekiyor. Animasyon ana Timeline’dan bağımsız olacağından onu bir klibin içine yerleştirmeliyiz.

5. mcLogo içine yeni bir katman ekleyin ve onu katman yığınının en altına taşıyın.

Parlama efekti logonun altında görünecek, bu yüzden onu logonun altına koymamız gerekiyor. Insert New Layer düğmesine tıklayın ve yeni katmana glow adını verin. Bu k katmanın Timeline’daki katmanlar yığınının en altında bulunduğundan emin olun.


Düzenleme çubuğunda Scene 1’e tıklayarak ana Timeline’a dönün.

6. logo katmanını kilitleyin. Timeline’da glow animation katmanını seçin, içeriğini kesin ve glow sembolünü mcLogo klibinin içine yerleştirin.

graphics katman klasörünü açın. İkinci dersimizde oluşturduğumuz grGlow sembolü hâlâ Stage’de duruyor olmalı. Düzenleme çubuğunda Scene 1’e tıklayarak Stage’e dönün. grGlow sembolünü seçin ve Edit > Cut komutunu verin.

Kütüphanede mcLogo’ya çift tıklayarak onu sembol düzenleme modunda açın ve glow katmanını seçin. Edit > Paste in Place komutunu vererek grGlow sembolünün ve logo grafiğinin düzgün bir şekilde hizalanmasını sağlayın.

7. Ana Stage’e dönün ve glow animation katmanını silin. Dosyanızı kaydedin.

Düzenleme çubuğunda Scene 1’e tıklayın ve ana Stage’e dönün. İçeriğini logo katmanındaki klibe taşıdığınız için glow animation katmanının artık boş olduğuna dikkat edin. glow animation katmanında sağ tıklayın ve Delete Layer komutunu verin. Katman kalıcı olarak Timeline’dan silinecektir. Daha fazla ilerlemeden önce FLA dosyanızı kaydedin.

Artık logo animasyonu için gereken tüm parçalarımız hazır. Şimdi yapmamız gereken şey sitenin menüsünü oluşturmak. Bir sonraki uygulamamızda hem grafik hem de düğme sembollerini içeren bir klip tasarlayacağız.

Menüyü Tasarlıyoruz

Menü için arka zemin grafiğini ikinci dersimizde oluşturmuştuk, bu yüzden Tech Bookstore menüleri için elimizde sağlam bir temel var. Bir sonraki adımlarımız grMenuGraphic’i bir klip sembolünün içine yerleştirmek, birkaç yeni grafik eklemek ve metin düğmelerini yerleştirmek olacak.

1. grMenuGraphic örneğini menu katmanına sürükleyin ve yeni bir klip sembolüne yerleştirin. Ardından iki grMenuGraphic örneğini daha Stage’e sürükleyin ve onları da iki yeni klibe yerleştirin.

grMenuGraphic adlı menü arka zemin grafiği kütüphanede graphics klasöründe duruyor olmalı. Üç grMenuGraphic sembol örneğini Timeline’daki menu adlı maskelenmiş katmana sürükleyin.


İlk sembol örneğini seçin ve F8’e basarak onu yeni bir klip sembolüne yerleştirin. İsim alanına mcProducts yazın, Movie clip radyo düğmesine basın ve OK düğmesine tıklayın. İkinci örneği mcCompany, üçüncü örneği de mcContact adlı klip sembollerine yerleştirin. Şimdi elimizde her bir menü için birer tane olmak üzere toplam üç klip var; üç klip de arka zemin görüntüsü için aynı grafik sembolünü paylaşıyorlar.

2. Stage’deki örneğe çift tıklayarak mcProducts klibini açın ve Layer 1’e bg ismini verin. Yeni bir katman ekleyin ve 11 piksel uzunluğunda, #666666 renginde dikey bir çizgi oluşturun.

Şimdi menülerdeki metin düğmelerinin kenarlarını (sınırlarını) belirteceğiz. Layer 1’i bg olarak isimlendirdikten sonra mcProducts klibinin içine yeni bir katman ekleyin ve bu katmana divider ismini verin. Tools panelinden Line aracını seçin ve Stroke color olarak #666666 değerini girin. Stage’de düz, dikey bir çizgi oluşturun. Çizgiyi seçin ve Properties denetçisinden yüksekliği 11 yapın.

3. Stage’de yine 11 piksel uzunluğunda ikinci bir dikey çizgi oluşturun. Bu çizgi ise beyaz (#FFFFFF) olsun.

Stroke color düğmesine basarak rengi değiştirin ve biraz önceki çizginin sağında, aynı uzunlukta ikinci bir dikey çizgi oluşturun. Çizgiyi seçin ve Properties denetçisindeki yüksekliği 11 yapın.

4. Her iki çizgiyi birbirine yaklaştırın ve ikisini birden seçin. Çizgileri grDivider adlı yeni bir grafik sembolüne dönüştürün ve sembolü grMenuGraphic’in ortasına taşıyın.

Çizgileri Stage üzerinde yan yana getirin ve sonra her ikisini birden seçin (bunun için çizgilere tıklarken Shift tuşunu basılı tutun). F8’e basarak çizgileri bir sembole dönüştürün. İsim alanına grDivider yazın, Graphic radyo düğmesini seçin ve OK düğmesine tıklayarak sembolü oluşturun.
Selection aracı ile grDivider sembolünü seçin ve menünün ortasına taşıyın. Sembol şimdi cetveldeki 0’ın yaklaşık olarak 55 piksel sağında olmalıdır.


5. grDivider’ı mcCompany ile mcContact kliplerine ekleyin ve her iki klibin de ortasında olacak şekilde hizalayın.

Scene 1’e tıklayarak ana Stage’e dönün ve kütüphaneyi açın. mcCompany klibine çift tıklayın ve Layer 1’i bg olarak i isimlendirin. Ardından divider adlı yeni bir katman ekleyin. grDivider’ın bir örneğini kütüphaneden divider katmanına sürükleyin ve menünün ortasında yer alacak şekilde hizalayın.

Aynı işlemi mcContact için de gerçekleştirin.

Egzersizimizin bir sonraki kısmında dersin daha önceki bölümlerinde oluşturduğumuz metin düğmelerini menüye ekleyeceğiz.

6. Kütüphaneyi açın ve metin düğmelerini her bir menüye ekleyin.

Menüler için oluşturmuş olduğunuz metin düğmeleri kütüphanede buttons adlı bir klasörde duruyor olmalı. Çift tıklayarak mcProducts klibini açın, Timeline’da divider katmanının üstüne yeni bir katman ekleyin ve katmanı buttons olarak isimlendirin. btnCatalog’u grDivider’ın soluna, btnReviews’ı da grDivider’ın sağına sürükleyin. btnCatalog’u mcProduct’ın sol kenarı ve grDivider arasında, btnReviews’ı da grDivider ve mcProduct’ın sağ kenarı arasında ortalayın.


Aynı prosedürü diğer iki klip menüsü ile de uygulayın. mcCompany klibine yeni bir katman ekleyin ve bu katmanı buttons olarak adlandırın. btnTour ve btnNews düğmelerini grDivider’ın sağına ve soluna sürükleyin. Son olarak bu adımları mcContact için de izleyin. btnFeedback ve btnMap düğmelerini grDivider’ın sağına ve soluna sürükleyin ve diğer menülerde de yaptığınız gibi onları grDivider’ın her iki tarafında hizalayın.

Ana Stage’e dönün. Şimdi menu katmanında her biri iki metin düğmesi içeren üç menümüz yer almaktadır.

7. Kütüphaneyi temizleyin ve FLA dosyanızı kaydedin.

Şu anda kütüphanede çeşitli klipler bulunuyor. Bu klipleri ikinci dersimizde oluşturduğumuz movie clips klasörüne, grDivider’ı da graphics klasörüne taşıyın. Ana menüden File > Save komutunu vererek FLA dosyanıza yaptığınız değişiklikleri kaydedin.

Beşinci dersimizde menüye bir animasyon efekti ekleyip menünün açılıp kapanmasını, dokuzuncu dersimizde de biraz ActionScript kodu ile menünün SWF dosyası gösterimde iken çalışmasını sağlayacağız.

Klip Düğmeleri Oluşturmak

Flash’ta düğme oluşturmak için bir yol daha vardır: Klip sembollerini kullanmak. Klip düğmeleri daha önce oluşturduğunuz düğmelerden daha kompleks düğmeler oluşturmanıza imkân tanır. Elbette ki bu tüm düğmelerinizi klip sembollerine dönüştürmeniz gerektiği anlamına gelmiyor.

Kliplerin dosya boyutunu düğme sembollerine göre daha fazla artırdığını hatırlayın. Ayrıca klip düğmeleri tasarlamak genellikle normal düğmeler tasarlamaktan daha uzun zaman alır. Klip düğmeleri kullanmak düğmelere ekstra özellikler (örneğin HTML’deki ziyaret edilen linklerin görünümünde olduğu gibi) veya özel animasyonlar eklemek istediğinizde faydalıdır.

Şimdiki uygulamamızda sitenin katalog bölümünde kullanılmak üzere bir çift klip düğmesi oluşturacağız. Düğmelerden biri siteden kitapların örnek sayfalarını indirmek için, diğeri de kitabı satın alabileceğiniz siteye link vermek için kullanılacak.

Klip düğmelerinin oluşturacağımız ilk kısmı düğmelerin grafik ve metinleri olacak.

1. Timeline’da buttons katmanını ve Tools panelinde Rectangle aracını seçin. Dolgu rengini #CCCCCC ve kenar çizgisi rengini de siyah yapın.

Rectangle aracını seçtikten sonra Round Rectangle Radius düğmesine tıklayın. Dikdörtgeni oluşturmadan önce köşe yarıçapının 0 olmasına dikkat edin. Ardından dolgu rengini #CCCCCC ve kenar çizgisi rengini de siyah (#000000) yapın.

2. Bir dikdörtgen oluşturun ve onu bir klibe dönüştürün.

Properties denetçisinde ilgili değerleri girdikten sonra dikdörtgeni oluşturun. Dikdörtgenin içine çift tıklayarak hem dolguyu hem de kenar çizgilerini seçin. Ardından dikdörtgenin genişliğini 85, yüksekliğini de 15 yapın.

Dikdörtgen seçili durumda iken Modify > Convert to Symbol komutunu verin ve onu bir klibe dönüştürün. Klibe mcSampleChapter ismini verin, Movie clip radyo düğmesini seçin ve OK düğmesine tıklayın.

3. Klibi açın, kenar çizgisini seçin ve onu fill isimli yeni bir katmana yerleştirin.

mcSampleChapter klibine çift tıklayarak klibi sembol düzenleme modunda açın. Bu modda iken Insert New Layer komutunu verin ve Timeline’a yeni bir katman ekleyin. Katmana stroke adını verin, Layer 1’e çift tıklayın ve ismini fill olarak değiştirin.

fill katmanında dikdörtgenin kenar çizgilerini seçin (kenar çizgisine çift tıklayarak). Ardından Edit > Cut komutunu verin. stroke katmanının 1 no’lu karesini seçin ve Edit > Paste in Place komutunu verin.

4. Kenar çizgisinin iki segmentini değiştirin ve rengi #999999 yapın; stroke katmanını kilitleyin.

stroke katmanında iken Shift’e basın, ardından kenar çizgilerinin üst ve soldaki segmentlerine tıklayın. Tools panelindeki Stroke color kontrolünü kullanarak kenar çizgisi rengini #999999 olarak belirleyin. Bu değişiklik düğmenin etrafında bir derinlik efektinin oluşmasını sağlayacaktır. Son olarak stroke katmanını kilitleyin.


5. text isimli yeni bir katmandaki düğmeye “sample chapter” metnini ekleyin ve sonra text katmanını kilitleyin.

Şu ana kadar düğmemiz fazla açıklayıcı değildi. Bu yüzden düğmeye statik bir metin ekleyeceğiz. stroke katmanını seçin, düğmenin Timeline’ında iken yeni bir katman ekleyin ve katmana text adını verin. Tools panelinden Text aracını seçin ve Stage’e tıklayın. Metin özelliklerini Static, Arial, 10 punto, siyah dolgu rengi ve Anti-alias for readability şeklinde belirleyin. Stage’deki metin alanına sample chapter yazın.


İşiniz sona erdiğinde text katmanını kilitleyin.

6. fill katmanını seçin, şeklin dolgusunu (içini) seçin ve grFill adlı bir grafik sembolüne dönüştürün. Ardından bu yeni katmanı kilitleyin.

Bu prosedür klip düğmesi içine yeni bir grafik sembolü yerleştirir. grFill sembolüne animasyon uygulanacağından sembol kendi katmanına alınmış ve bir grafik sembolüne dönüştürülmüştür (çünkü kenar çizgisine bir animasyon uygulamaya gerek yoktur).

İpucu: İşlenmemiş bir grafiğe animasyon uygulamadan önce onu bir grafik sembolüne dönüştürün ve her animasyonu kendi katmanına yerleştirin.

İşiniz sona erdiğinde fill katmanını kilitleyin.

7. Timeline’a labels ve actions katmanlarını ekleyin.

Timeline’a labels ve actions adlı iki yeni katman ekleyin. Bu katmanlar sırasıyla kare etiketlerini ve kare eylemlerini barındıracaktır. Etiketleri ve eylemleri kendi katmanlarında bulundurmak her zaman için daha iyidir, böylece bunların SWF dosyasındaki diğer şeyler ile karışması engellenir.

8. Her bir katmanın 25 no’lu karesine tıklayın ve F5’e basarak yeni kareler ekleyin. Ardından labels katmanında 5 ve 15 no’lu karelere anahtar kareler ekleyin.

Klip düğmesinin Timeline üzerinde uzanan çeşitli durumları olacaktır. Flash bir düğmenin Up, Over ve Down durumlarını bir klip düğmesine özel kare etiketleri girerek anlar. Bunların her biri tıpkı bir düğme sembolündeki Up, Over ve Down kareleri gibi işlem görür. Ardından bu kare etiketlerinin tıpkı daha önce düğme sembollerinde yaptığınız gibi her birinde çizimler, grafikler ve metinler kullanabilirsiniz.

Not: Siz özellikle farklı bir bölge tanımladığınız sürece tıklanabilir alan klibin kendisidir. Böyle bir tanımlama yapmak isterseniz ayrı bir klip sembolü kullanmalı ve bunu ActionScript ile tıklanabilir alan olarak belirtmelisiniz. Bu düğmeler belirgin öğeler olduklarından düğmenin görsel alanını tıklanabilir alan olarak almak en iyisidir. O bakımdan tıklanabilir alan olma görevini üstlenecek ayrı bir klip sembolü oluşturmanıza gerek yoktur.

9. labels katmanındaki anahtar karelere kare etiketleri ekleyin. Tüm katmanları kilitleyin ve dosyanızı kaydedin.

Her anahtar karede kare etiketleri eklerseniz Flash her alanı düğmenin bir hâli olarak kabul eder. Properties denetçisini açın ve labels katmanında 1 no’lu kareyi seçin. <Frame Label> metin alanına _up yazın. Aynı alana, 5 no’lu kareyi seçip _over ve 15 no’lu kareyi seçip _down yazın.


Bu düğmelere beşinci dersimizde animasyonlar ekleyeceğiz. Beşinci dersimizde düğmelere ilginç efektler kazandırmak için motion tween kullanımını öğreneceğiz.

SWF dosyasını test edecek olursanız düğmenin çalışmadığını görürsünüz. Flash’ın bu klibi bir düğme olarak algılayabilmek için ActionScript gereklidir. Bunu altıncı dersimizde göreceğiz.

Sembolleri Çoğaltmak ve Stage’e Eklemek

Bir düğmeyi yeniden tasarlamak yerine doğrudan sembolü çoğaltabilir ve böylece pek çok şeyi en başından tekrar yapmaktan kurtulabilirsiniz. Bu belki biraz tembellik demek ama ekonomik olduğu da çok açık. Düğmeyi çoğaltarak da üzerinde çeşitli değişiklikler (örneğin yazılı metni değiştirmek gibi) yapabilirsiniz.

1. Kütüphaneyi açın ve mcSampleChapter klibini bulun. Sembole sağ tıklayıp Duplicate komutunu verin.

Duplicate komutunu seçtikten sonra Duplicate Symbol penceresi açılır. Yeni sembole mcToc adını verin ve OK deyin. Yeni klip kütüphaneye eklenecektir.

2. mcToc sembolüne çift tıklayın ve metni değiştirin.

Üzerine çift tıkladığınızda klip sembol düzenleme modunda açılır. text katmanının kilidini açın ve statik metin alanına çift tıklayın. Font ve metin boyutu aynı kalsın. Metin alanına table of contents yazın.

Selection aracını seçin ve metni arka zemin üzerinde ortalayın.

Not: Eğer yeni metin dikdörtgenin içine tam olarak sığmıyorsa metni seçin ve font boyunu 9 olarak değiştirin. Gerekiyorsa karakter aralığı olarak -0.5 girin. Böyle bir şey yaparsanız mcSampleChapter sembolünü açıp aynı değişiklikleri onda da yapın, böylece her iki düğme de aynı görünümde olacaktır.

3. mcSampleChapter klibini Stage’den silin.

mcToc klibini kütüphanede düzenlediğimizden mcSampleChapter’ın aksine Stage’e eklenmez. mcSampleChapter klibini seçin ve Backspace veya Delete tuşuna basarak klibi Stage’den silin. Onu daha sonraki derslerimizden birinde başka bir FLA dosyasına ekleyeceğiz. Şimdilik her iki klibi de kütüphanede bırakabiliriz.

Şu anda Stage’de ve kütüphanede çok sayıda yeni sembol yer alıyor. Bir sonraki dersimize geçmeden önce bunları organize etmek isteyebilirsiniz. btnProducts, btnCompany ve btnContact düğmelerini daha önce Stage’e yerleştirmiştik. Bu düğmelerle ilişkili menülerin ise Stage’e yerleştirilmesi gerekiyor.

4. Üç menüyü kendilerine ait düğmelerle hizalayın.

Üç menü hâlâ Stage üzerinde duruyor olmalı, ancak ilgili düğmeler ile aynı hizada olmayabilirler. catalog ve reviews’ı içeren menüyü seçin ve menünün sol alt köşesini btnProducts düğmesinin sol alt köşesi ile aynı noktaya getirin. Menülerin konumunu değiştirmek için eğer kilitli ise menu katmanının kilidini açmanız gerekir. Menüleri taşırken gerekiyorsa buttons katmanını kilitleyin,
çünkü menüler doğrudan düğmelerin arkasında olmalı. menüyü düğmeye yaklaştırdığınızda hizalamaya yardımcı olacak noktalı bir çizgi göreceksiniz.

Not: Stage’deki nesneleri hizalamanıza yardımcı olacak noktalı çizgileri göremiyorsanız ana menüden View > Snapping > Edit Snap Align komutunu verin. Snap Tolerance (Kenetlenme Toleransı) varsayılan olarak 10 pikseldir. Yani birbirlerinin 10 piksel yakınına gelen nesneler kenetlenecektir. Bu durumda noktalı çizgileri görebilir ve nesnelerin yatay veya dikey olarak kenarları boyunca kenetlenmesini sağlayabilirsiniz. Nesnelerin yatay ya da dikey merkezlerini de hizalamak istiyorsanız (daha önce üç düğmede yaptığınız gibi) Center Alignment’ın (Merkezî Hizalama) altındaki her iki kutuyu da işaretleyin.

Aynı prosedürü diğer iki menü için de uygulayın. tour ve news içeren menüyü btnCompany düğmesi ile, feedback ve map içeren menüyü de btnContact ile hizalayın. İşiniz bittiğinde buttons katmanını kilitleyin. Ardından menu katmanını da kilitleyin.


Not: mcSampleChapter ve mcToc düğmeleri gerçekte Tech Bookstore Web sitesinde kullanılmayacak. Bu öğeleri ilerleyen derslerde başka bir FLA dosyasına kopyalayacağız.

5. Kütüphaneyi temizleyin ve dosyanızı kaydedin.

Kütüphanede biraz önce oluşturduğunuz tüm klipleri movie clip klasörüne, grFill grafiğini de graphics klasörüne taşıyın. Dosyanızı kaydedin.


Bu derste şunları öğrendiniz:

• Sembollerin ne olduğunu öğrendik.
• Stage’de ve kütüphanede semboller oluşturduk, düzenledik ve görüntüledik.
• Sembolleri iç içe yerleştirdik.
• Grafik sembolleri hakkında daha fazla bilgi edindik.
• Düğmeler ve tıklanabilir alanlar oluşturduk.
• Düğmeleri Stage’e yerleştirdik.
• Bir metin düğmesinin tıklanabilir alanını değiştirdik.
• Görünmez bir düğme oluşturduk.
• Klip sembolleri oluşturduk.
• Bir klip düğmesi tasarladık.
• Sembolleri çoğalttık.

teşekkürler hades

Hades bu konular o kadar çok insanın işine yarıyacakki =). Şimdiden onların adınada teşekkür ederim...

kardeşşşşş emeğine sağlık diğer derslerde teşekkür etmedim ama şimdi gerçekten ihtiyaç duydum sağolasın çak cuk anlatmamışsın emeğine saplık artık flash da yapacağım her iş için sana teşekkür borçluyum sağolasın kardeş

çalışma için teşekkürler. Çok güzel olmuş

yalnız bir sorun var! rapid'e yüklemiş olduğunuz png uzantılı resim dosyaları silinmiş...

hepsini tek klasörde toplayıp tek linkte verirseniz çok süper olur...

evet dosyalar için linkler ölmüş tekrar verir misiniz?

Arkadaşım ben flashta sadece 2 boyut animasyon yapıyordum,
taki senin actionstrip yazılarına kadar. Katiyen anlamam diye
düşündüğüm davranışları rahatlıkla yapabiliyorum gerçekten
iyi bir öğreticisin çok çok teşekür ederim..