[B][SIZE="3"]Sembol Oluşturmak ve Düzenlemek[/SIZE][/B]

Flash’ı etkin bir şekilde kullanmak istiyorsanız sembollere mutlaka ihtiyacınız olacaktır. Flash dokümanlarının verimli bir yapıya kavuşması, dosya boyutlarının düşürülmesi, animasyonların oluşturulması ve etkileşimin sağlanmasında sembollerin büyük rolü vardır. Sembolsüz bir Flash dosyası tencere/tava kullanmadan yemek yapmaya çalışmaya benzer.


Bu dersimizde Flash 8’deki çeşitli sembolleri tanıyacak ve her birinin ne için kullanıldığını öğreneceğiz. Oluşturduğumuz bir sembolü defalarca farklı yerlerde kullanabileceğimizi ve orijinal sembol üzerinde yapacağımız değişikliklerin o sembolün yer aldığı tüm çalışmalara yansıdığını göreceğiz. Kompleks efektler oluşturmak için sembolleri iç içe kullanacağız ve dokümanlarımıza etkileşim kazandırmak için de yine sembollerden yararlanacağız.

[B]Bu derste şunları öğreneceksiniz:[/B]

• Sembolleri ve nasıl kullanıldıklarını öğreneceğiz.
• Grafik sembolünü daha yakından tanıyacağız.
• Görünür ve görünmez düğme sembolleri oluşturacağız.
• Düğme sembolü için bir tıklama alanı tanımlayacağız.
• Sembolleri iç içe kullanacağız.
• Düğme işlevi gören bir animasyon oluşturacağız.

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

[B]Not:[/B] 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.

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.

[B]İpucu:[/B] Öğ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.


[B]İpucu:[/B] 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.

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.


[B]İpucu:[/B] 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.

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.

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


[B]Not:[/B] 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üğ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.

[B]Not:[/B] 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.

[B]1.

dosyasını açın ve dosyayı bookstore8.fla adıyla kaydedin.[/B]

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

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

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.

[B]İpucu:[/B] 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.

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

media klasörünün simgesine çift tıklayarak klasörü açın. Klasörde yer alan

,

,

,

,

ve

isimli bitmap resimleri sitemizdeki düğmelerin farklı hâllerini göstermek için kullanacağız.

[B]4. Up hâlini seçin ve

resmini düğmeye ekleyin. Grafiğin x ve y noktalarını 0 ve 0 olarak belirleyin.[/B]

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.

[B]5.

resmini düğme sembolünün Over hâline ekleyin.[/B]

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.

[B]İpucu:[/B] 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.

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

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.


[B]Not:[/B] 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.

[B]İpucu:[/B] 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.

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

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.

[B]8. Bir sonraki uygulamaya geçmeden önce dosyanızı kaydedin.[/B]

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

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

[B]1. buttons adlı yeni bir katman oluşturun.[/B]

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.

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

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.

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

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 [B]115[/B] değerini girin. Benzer şekilde btnCompany için x değerini [B]200[/B], btnContact için de x değerini [B]285[/B] olarak girin.


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

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.

[B]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.[/B]

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.

[B]6. Çalışmanızı kaydedin.[/B]

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

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.

[B]Not:[/B] 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.

[B]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.[/B]

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 [B]CATALOG[/B] (buradaki gibi büyük harfle) yazın.

[B]Not:[/B] 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.

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

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


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

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

[B]4. Düğmeye Over, Down ve Hit durumlarını ekleyin.[/B]

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.

[B]İpucu:[/B] 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.

[B]5. Rectangle aracıyla Hit karesinde tıklanabilir bir alan oluşturun.[/B]

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.


[B]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.[/B]

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.
[B]
7. Dosyanızı kaydedin.[/B]

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

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.

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

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.


[B]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.[/B]

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


[B]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.[/B]

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.

[B]İpucu:[/B] 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.

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

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


[B]Not:[/B] 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.

[B]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.[/B]

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.

[B]6. Dikdörtgenleri Hit karesine sürükleyin.[/B]

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.

[B]İpucu:[/B] 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.

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

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.

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

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

[B]9. Çalışmanızı kaydedin.[/B]