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

folklorcu08 · 5 Şub 2010

Statik Metinler ve Aygıt Fontları

Bir FLA dosyasında statik metin kullandığınızda Flash metindeki her karakterin birer taslağını oluşturur ve metni göstermek için bu taslakları kullanır. Seçmiş olduğunuz font ne olursa olsun metni görüntüleyen herkes bu karakterleri aynen Stage üzerinde oldukları gibi görebilir. Bu kullanımın bir dezavantajı ise statik metinlerin SWF dosyasının boyutunu artırmasıdır. Ancak aygıt fontlarını kullanarak bu problemi bertaraf edebilirsiniz. Aygıt fontları metodunda Flash’ın oluşturduğu taslaklar değil dosyanın görüntülendiği sistemde yüklü olan fontlar kullanılır.

Giriş metinleri ve dinamik metinler için varsayılan değer olan aygıt fontları yatay statik metin alanları için de kullanılabilir. Eğer seçmiş olduğunuz font son kullanıcının makinesinde yüklü değilse SWF dosyası Web tarayıcısının varsayılan değeri olan sans fontunu kullanır. Flash’ta üç adet varsayılan aygıt fontu vardır: _sans, _serif ve _typewriter. _sans fontu Arial veya Helvetica’ya, _serif Times New Roman’a ve _typewriter da Courier fontuna benzer.

İpucu: Aygıt fontlarında yumuşatma (anti-alias) yapılamaz, bu da onları küçük boyutlu kullanımlar için uygun bir hale getirir.

Flash 8, font böyundan bağımsız olarak okunabilirliği artırmanızı sağlayacak araçlara sahiptir. Font seçimini zorlu kılan etkenlerden biri de Flash’ın yumuşatma (anti-aliasing) özelliğidir. Statik metinler Flash’ta varsayılan olarak yumuşatılır, bu da özellikle font boyu küçük olduğunda yazıların bulanık görünmelerine yol açar ve okunmalarını zorlaştırır. Geçmiş sürümlerde bu olumsuzluktan kaçınmanın tek yolu ya yumuşatma seçeneğini tümden kapatmak ya da bir aygıt fontu veya dinamik bir metin alanı kullanmaktı. Şimdi ise Properties denetçisindeki Font rendering method (font görüntüleme metodu) menüsünü kullanarak çeşitli alternatifler arasından seçim yapabilirsiniz: Bitmap metin (yumuşatma yapılmaz), Anti-alias for animation (animasyon için yumuşatma), Antialias for readability (okunabilirlik için yumuşatma) ve sadece Flash Professional 8’de bulunan Custom anti-alias (özel yumuşatma).

folklorcu08 · 5 Şub 2010

Dokümanlara Statik Metin Eklemek

Flash’ta metinleri etkin bir şekilde kullanmayı öğrenmenin ilk adımı Stage’e basit statik metinler eklemektir. Şimdiki alıştırmamızda FLA dosyasına statik bir metin ekleyeceğiz. Karakterler dosyaya dahil edileceğinden istediğiniz fontu kullanmakta serbestsiniz; siteyi ziyaret eden herkes bu fontları aynen görebilecek.

1. bookstore6.fla dosyasını açın ve bookstore7.fla olarak kaydedin.

2. Statik metin için yeni bir katman ekleyin ve bu katmana page names adını verin. Bir katman klasörü oluşturun ve bunu da text olarak isimlendirin.

graphics katman klasörünü seçin ve onun üzerine yeni bir katman ekleyin; katmana page names adını verin. Bu yeni katmanı seçin ve Layers panelinin sol alt kısmındaki Insert Layer Folder düğmesine tıklayarak yeni bir katman klasörü oluşturun; buna da text adını verin. page names katmanını text klasörüne sürükleyin.

3. Ana dokümanın Timeline’ını 70 kare olarak belirleyin.

Tech Bookstore sitesindeki çeşitli sayfaları ana dokümanın Timeline’ı boyunca organize edeceğiz. Bu sayfaların her birinde sayfanın adını belirten statik bir metin alanı bulunacak.

Not: Şimdi uygulayacağımız prosedür en iyi yöntemlerden biri değilse de öğrenme amaçlı olarak gayet faydalı. Normalde sitenizdeki farklı “sayfaların” her biri, kullanıcıdan gelen istekler doğrultusunda arabirime yüklenen farklı SWF dosyaları olacaktır. Bu yöntemi ilerleyen dersimizde öğreneceğiz ancak şimdilik istediğimiz tek şey metinleri Timeline ile nasıl kullanabileceğimizi görmek.

labels katmanının 70. karesine tıklayın (sadece bu kare seçilmiş olmalı). Shift tuşunu basılı tutun ve background katmanının da 70. karesine tıklayın. Kareleri seçerken Shift tuşunu basılı tutmanız aradaki tüm katmanların da 70. karelerinin seçilmesini sağlar. Şimdi klavyeden F5 tuşuna basarak ya da ana menüden Insert > Timeline > Frame komutunu vererek tüm katmanları aynı anda 70 kareye genişletin.

4. Web sitesinin sayfalarını belirleyecek şekilde katmanları organize edin.

İlk olarak Tech Bookstore Web sitesinin farklı bölümlerini göstermek üzere labels katmanına çeşitli anahtar kareler eklememiz gerekiyor. labels katmanının 10. karesini seçin ve bir anahtar kare eklemek için F6’ya basın. Aynı şekilde 20, 30, 40, 50 ve 60. karelere de birer anahtar kare ekleyin. Bu anahtar karelerin her biri o bölümün başlığıyla etiketlenecektir.

labels katmanının 1. karesi zaten etiketlenmiş durumda (home adıyla). 10. kareyi seçin ve Properties denetçisindeki <Frame Label> metin alanına catalog yazın ve Enter’a basın. Label type (Etiket türü) alanını Name olarak bırakın. Diğer beş anahtar kare için de aynı işlemi yapın ve bunlara sırasıyla reviews, tour, news, feedback ve map isimlerini verin.

5. Text aracını seçin ve Properties denetçisinden font özelliklerini değiştirin.

Tools panelinden Text aracını seçin. Properties denetçisinde Text type (Metin türü) menüsünden Static Text (Statik Metin) seçimini yapın. Font menüsünden Arial fontunu seçin ve font boyu olarak 12 girin. Text (fill) color (Metin [dolgu] rengi) düğmesine tıklayın ve açılan paletin sol üst köşesindeki hexadecimal alana #666666 değerini girin. Bold (Kalın) düğmesine basın; böylece metnimiz normalden daha kalın olacaktır. Metnin sağa dayalı olmasını istiyoruz, onun için Align Right (Sağa Yasla) düğmesine basın. Diğer ayarları varsayılan değerlerde bırakabilirsiniz. Font rendering method (Font gösterim metodu) menüsünden Anti-alias for readability (Okunabilirlik için yumuşat) seçimini yapın. Yaptığınız tüm bu değişikliklerin ardından Properties denetçiniz aşağıdaki gibi görünüyor olmalıdır.

6. Statik metin kullanarak sitenin her bir alanına sayfa isimlerini ekleyin.

Şimdi Stage üzerinde bir metin alanı oluşturacağız. Sayfa isimleri, başlık alanının altında duran çubuk grafiğinin sağ tarafında yer alacak.

page names katmanında 1. kareyi seçin. Metnin sağa dayalı olacağını hatırlayın; bu yüzden Stage üzerinde metnin bitmesini istediğiniz yere tıklayın. Metin alanına HOME yazın. Ardından Tools panelinden Selection aracını seçin ve henüz oluşturmuş olduğunuz metin alanını sayfa isimlerinin görünmesini istediğiniz yere taşıyın.

İpucu: Metin alanlarını iki şekilde oluşturabilirsiniz. Siz yazdıkça genişleyen bir metin alanı istiyorsanız tek yapmanız gereken Stage’e tıklamak ve yazmaya başlamak. Böyle bir durumda alanın sağ üst köşesinde gördüğünüz minik beyaz daire metin alanının genişleyebilir olduğunu belirtir. Eğer metin alanınızın sabit bir genişlikte olmasını istiyorsanız Stage’e tıklayın ve Text aracını istediğiniz noktaya kadar sürükleyin. Bu kez sağ üst köşede beyaz bir kare belirecektir; bu da metin alanının sabit genişlikte olduğunu gösterir. Bu daire ve kareyi tutup sürükleyerek metin alanının genişliğini değiştirebilirsiniz.

page names katmanını Timeline’ı genişlettikten sonra eklemiş olduğunuzdan bu katmandaki kareler 70. kareye kadar uzanmış durumdadır. Burada 10. kareyi seçin ve F6 tuşuna basarak bir anahtar kare ekleyin. Anahtar kare ekleme adımını 20, 30, 40, 50 ve 60. karelerde de tekrarlayın.

Şimdi de her sayfaya gerçek isimlerini vermemiz gerekiyor, çünkü şu anda hepsinin ismi HOME. 10. kareye gidin ve HOME olarak gözüken sayfa ismine çift tıklayın. Sayfa ismi olarak CATALOG yazın. Bu esnada Stage üzerindeki metin alanını ya da metinle ilgili değerleri değiştirmemeye dikkat edin, böylece metin alanları her sayfada tutarlı ve aynı görünümde olacaktır.

Aynı adımları diğer sayfalar için de izleyin ve sayfalara 4. adımda kare etiketleri için kullandığınız isimleri verin. Tek yapmanız gereken page names katmanındaki anahtar kareleri tek tek seçmek ve HOME olarak gözüken ismi o anahtar karenin ismiyle değiştirmek. Sayfa isimlerini BÜYÜK harflerle yazın.

Tüm sayfalara isim verdikten sonra page names katmanını kilitleyin. Timeline şu anda biraz önceki gibi görünüyor olmalıdır.

7. Statik metin kullanarak başlık alanının üst kısmına sitenin sloganını yazın.

Şimdi sayfa isimleri için kullandığımız alanın üzerinde bir başka metin alanına ihtiyacımız var. Bunun için öncelikle yeni bir katman oluşturmamız gerekiyor çünkü sayfa isimleri her sayfada farklıyken sloganımız her sayfada aynı olmalı.

page names katmanını seçin ve yeni bir katman ekleyin. Yeni katmana propaganda ismini verin. Katmandaki boş anahtar kare ve diğer kareler 70. kareye kadar uzatılacaktır. Text aracını seçin. Properties denetçisinde daha önceden girilmiş değerlerin çoğunu aynen koruyacağız. Bu kez ayrıca Italic (İtalik) düğmesine de basın ve Text (fill) color değerini #999999 yapın. propaganda katmanında iken, Stage üzerinde logonun yer aldığı başlık bölümüne Text aracı ile tıklayın ve SELLING QUALITY BOOKS about MACROMEDIA SOFTWARE yazın. Tools panelinden Selection aracını kullanarak metni başlık bölümünün sağ alt tarafında uygun bir yere taşıyın. Sloganın sayfa isimleri ile aynı hizada olmasını istiyorsanız dikey bir kılavuz kullanın. Dikey cetvelden bir kılavuz sürükleyin ve onu sayfa isminin sağ tarafı ile aynı hizaya getirin. Ardından sloganı seçin ve metin alanının kılavuza kenetlenmesini sağlayın.

8. Stage’in altına fontları yumuşatılmamış bir metin ekleyin.

Flash’ta küçük fontların okunması bazen çok zor olabilir; Flash’ın fontlar için taslaklar oluşturması ve yumuşatma (anti-aliasing) yapması fontların bulanık görünmesine yol açar. Properties denetçisindeki Font rendering method (Font görüntüleme metodu) menüsünden Bitmap text (no anti-alias) seçimini yaparak bu bulanıklığı önleyebilirsiniz. Yumuşatma (anti-aliasing) işlemine maruz kalmamış fontlar ekranda daha keskin görünecektir.

Not: Mümkün olduğunca 8 puntodan küçük fontlar kullanmayın. Aksi halde yazılarınızın okunması zorlaşacaktır. 8 puntodan daha küçük bir değer kullanmaya mecbur kaldıysanız mutlaka Bitmap text seçimini yapın.

Şimdi propaganda katmanına biraz daha metin ekleyeceğiz. Sayfanın sonunda telif ve irtibat bilgileri bulunmalı. Bu bilgileri küçük fontlarla vereceğiz çünkü fazla dikkat dağıtıcı olmalarını istemiyoruz.

Text aracını seçin. Properties denetçisinde font yine Arial olarak kalsın. Ancak font boyunu 10 yapın ve Text (fill) color değerini yine #666666 olarak belirleyin. Bold ve Italic bu kez seçili olmasın. Font rendering method menüsünden Bitmap text (no anti-aliasing) seçimini yapın, böylece yazılarımız Stage üzerinde daha rahat okunabilir bir durumda olacak. Text aracı ile Stage’in altında yer alan çubuğun ortasına tıklayın ve Tech Bookstore © 2006 yazın.

İpucu: OS X altında © sembolünü yazmak için Option+G tuşlarını kullanabilirsiniz. Windows altında ise Başlat > Programlar > Donatılar > Sistem Araçları > Karakter Eşlem (Start > Programs > Accessories > System Tools > Character Map) uygulamasını açarak sembolü buradan kopyalayabilirsiniz.

Aynı çubukta ikinci bir metin alanı açın. Şimdi ekleyeceğimiz metin alanı da az önce eklediğimiz alanla aynı özelliklere sahip olduğundan Properties denetçisinde herhangi bir değişiklik yapmamıza lüzum yok. Stage’e tıklayın ve [email protected] adresini yazın.

9. Align panelini kullanarak Stage’deki küçük metinleri hizalayın.

Her iki test alanını da oluşturduktan sonra Selection aracını seçin ve Align panelini açın. To stage: düğmesinin basılı (parlak) olmasına dikkat edin. Oluşturduğunuz ilk metin alanına tıklayın ve sonra da Align horizontal center düğmesine basın; böylece metin alanı Stage’in tam ortasına yerleştirilir. Metnin çubuktaki dikey konumunu ortalamak içinse klavyenizden aşağı ve yukarı ok tuşlarını kullanın.

E-posta adresinin yazılı olduğu ikinci metin alanını seçin ve Align panelinde Align right edge düğmesine basın. Bu işlem sonunda metin alanı Stage’in en sağ kenarına yaslanacaktır. Eğer metin alanının çok fazla sağa kaydığını düşünüyorsanız alanı seçin ve sol ok tuşuyla biraz sola taşıyın.

Şimdi de bu iki metin alanının birbirlerine göre yatay olarak hizalandığından emin olalım. Selection aracı ile alanlardan birini seçin. Ardından Shift tuşunu basılı tutarak diğer alanı da seçin. Align panelinde To stage: düğmesine bir kez tıklayarak onu basılı olmayan duruma getirin. Son olarak Align vertical center düğmesine basarak alanların yatay olarak aynı hizada olmalarını sağlayın.

10. Properties denetçisindeki URL link alanını kullanarak sitenin e-posta adresine bir linke dönüştürün.

Bazen bir metnin aynı zamanda bir URL linki gibi çalışmasını isteyebilirsiniz. Bunu yapmanın bir yolu metnin üzerine görünmez bir düğme yerleştirmek ve sonra da bu görünmez düğmeye URL linkini çağıran bir işlev yüklemektir. Diğer bir yöntemse şimdi burada yapacağımız gibi metne doğrudan bir URL linki uygulamak.

Not: HTML’den farklı olarak Flash’ta yapacağımız URL verme işlemi metnin altını çizmez ve mavi renkli olmasını sağlamaz. Yani ziyaretçilerinizin o metni bir link olarak algılamalarını sağlamak sizin ayrıca yapacağınız diğer biçimlendirmelere kalıyor.

E-posta adresini içeren metin alanını seçin ve Properties denetçisindeki URL link alanına mailto:[email protected]?subject=Tech Bookstore yazın. Bu işlemin ardından metin alanının altında o bölgeye bir link verilmiş olduğunu belirtmek için noktalar belirecektir.

İpucu: E-posta!nın sonuna bir soru işareti eklemek ve “subject=Tech Bookstore” yazmak mesajın konu kısmının otomatik olarak doldurulmasını sağlar. Elbette ki son kullanıcı dilerse mesajında bu kısmı değiştirebilir.

İpucu: Tüm kullanıcıların makinelerinde bir e-posta istemcisi bulunmayabileceğini veya varolan e-posta istemcisini kullanmak istemeyebileceklerini (örneğin paylaşılan bir bilgisayar kullanıyor olabilirler) unutmayın. O yüzden biz kullanıcı soru ya da görüşlerini almak için Web sitemizde bir form kullanacağız.

Bir ziyaretçi bu linke tıkladığında varsayılan e-mail istemcisi açılır, istemciye mesajın gideceği adres olarak [email protected], mesajın konusu olarak da Tech Bookstore otomatik olarak yazılır. İşiniz bittiğinde propaganda katmanını kilitleyin, böylece yanlışlıkla bir şeyler eklenmez veya silinmez.

11. bookstore7.fla dosyasında yapmış olduğunuz değişiklikleri kaydedin.

File > Save veya Ctrl+S ile dokümanınızı kaydetmeyi unutmayın

folklorcu08 · 5 Şub 2010

Gömülü Fontların Kullanımı

Statik metinlerin aksine, dinamik metinler ve giriş metinleri varsayılan olarak aygıt fontlarını kullanırlar. Dinamik ve giriş metinlerinizin görünümleri üzerinde daha fazla kontrole sahip olmak istiyorsanız fontlarınızı dokümana gömülü hale getirebilirsiniz. Dinamik metinler ve giriş metinleri, tasarlandıkları makinede kullanılmış olan sistem fontlarının diğer makinelerde de bulunmasını gerektirir. Eğer bir son kullanıcının makinesinde bu sistem fontları yoksa dokümandaki metinler düzgün görünmeyebilir ve kullanıcıda bulunan başka bir fontla durum idare edilir. Fontlarınızı dokümanlara gömmek bu sorunu kökten çözer.

Bir font dinamik veya giriş metin alanına gömüldüğünde Flash tarafından oluşturulan font taslakları SWF dokümanı içerisinde saklanır. Bu sayede doküman görüntülendiği makinedeki fontlara bağlı kalmaz ve her makinede orijinal tasarım fontlarıyla gösterilebilir. Gömülü fontların tek dezavantajı dosya boyutunu artımalarıdır. Bu artışın miktarı kullandığınız karakter ve biçimlendirmelerin sayısına göre değişebilir.

Şimdiki uygulamamızda dinamik bir metin alanı oluşturacak ve içine bir font gömeceğiz.

1. Dinamik bir metin alanı oluşturun.

propaganda katmanının kilidini açın ve 1. kareyi seçin. Text aracını seçin ve Text type menüsünden Dynamic Text seçimini yapın. Stage üzerinde bir yere tıklayın ve metin alanına Fareler ve İnsanlar yazın. (Sadece deneme amaçlı bir çalışma yapıyoruz, bu metni daha sonra sileceğiz.)

2. Character Embedding penceresini açın.

Metin alanını seçin ve Properties denetçisindeki Embed düğmesine basın. Character Embedding (Karakter Gömme) ekranı açılacaktır. Bu ekranda dokümana gömmek istediğiniz karakter ya da karakter gruplarını seçebilirsiniz. Embed düğmesine yanlışlıkla tıkladıysanız Cancel veya Don’t Embed düğmesine basarak Character Embedding iletişim kutusunu kapatabilirsiniz.

3. Gömmek istediğiniz karakterleri Windows altında Control, OS X altında Command tuşu ile birlikte tıklayarak seçin.

Dosya boyutunun haddinden fazla büyümesine engel olmak için tüm karakterlerin değil sadece belli bir karakter grubunun gömülmesini isteyebilirsiniz. Gömmek istediğiniz karakter gruplarına tıklarken Ctrl veya Command tuşlarını basılı tutun, böylece birden fazla grubu aynı anda seçebilirsiniz.

İpucu: Bir karakter grubu belirlemek kullanılacak karakterleri sınırlamak istediğinizde (örneğin sadece sayılar gibi) gayet faydalı olabilir.

Not: Sadece belli uzunlukta bir karakter dizisi gösterecekseniz (örneğin A’dan M’ye kadar olan harfler gibi) bir karakter grubu seçmeyin, bunun yerine karakterleri Include these characters (Bu karakterleri dahil et) alanına yazın.

4. Cancel düğmesine basın ve metin alanını silin.

Character Embedding ekranının altındaki Cancel düğmesine basarak ekrandan çıkın. Ardından Stage üzerindeki dinamik metin alanını silin ve propaganda katmanını yeniden kilitleyin.

folklorcu08 · 5 Şub 2010

Font Özellikleri

Flash’ta metinlerinizin görünümünü dilediğiniz şekle sokmak için kullanabileceğiniz çok sayıda biçimlendirme seçeneği mevcuttur. Şu ana kadar bu seçeneklerin sadece en temel ve yaygın olanlarını kullandık. Şimdiki uygulamamızda yeni font özellikleri ile tanışacak ve bunların Flash’ta nasıl kullanıldıklarını öğreneceğiz. Çalışma dokümanımız yine bookstore7.fla olacak.

1. Harita sayfasına statik metin ekleyin ve Properties denetçisinden metin özelliklerini belirleyin.

Sitemizdeki harita sayfasında bir başlık ve adres bilgisi bulunacak. Haritanın veya genel olarak bir içeriğin bir SWF dosyasına nasıl yükleneceğini altıncı dersimizde göreceğiz. Ancak başlık ve adres bilgisini şimdi oluşturacağız.

Properties denetçisinde Text type menüsünden statik metni seçin. Font Arial, font boyu 12, renk de siyah olsun. Align Center düğmesine basın; böylece metin alanına gireceğimiz karakterler ortaya hizalanacaktır. Font görüntüleme metodu olarak Anti-alias for readability seçimini yapın.

Kerning, karakterler arası mesafeyle ilgili bir ayardır ancak A\V düğmesiyle belirtilen karakter aralığı gibi sabit değildir. Kerning değeri fonta dahil edilir ve iki harfin yan yana nasıl bir aralıkla yazılacağını belirler. Örneğin bazı harfler şekillerine bağlı olarak birbirlerine daha yakın bir şekilde yazılabilir; W karakteri ile A karakteri arasındaki mesafe W ile O arasındaki mesafeden daha dardır. Kerning ayarı, harflerin arasındaki mesafeyi harflerin şekillerine göre düzenler ve yazıların daha düzgün bir şekilde görünmesini sağlar. Properties denetçisindeki Auto kern kutusunun işaretlendiğinden emin olun.

2. Adres bilgisini girin ve Stage’e yerleştirin.

graphics klasörünü seçin, yeni bir katman ekleyin ve bu katmana map adını verin. labels katmanında da ismi map olan 60. kareye tıklayın (map katmanında iken) ve F6 ile bir anahtar kare ekleyin. Text aracını seçin ve Stage üzerinde sürükle-bırak yaparak sabit genişlikli bir metin alanı açın. Alana aşağıdaki şekilde gördüğünüz metni girin, yeni satırlar için Enter tuşunu kullanın.

3. Adres metnini biçimlendirin.

Metin alanını yeniden boyutlandırmak için alanın köşelerindeki kare kontrolleri kullanabilirsiniz. Metni düzenlemek için alana Selection aracıyla iki veya Text aracıyla bir kez tıklayabilirsiniz. Şimdi ilk satırı seçin. Properties denetçisinden Bold düğmesine basın ve Text (fill) renk paletinden koyu gri bir renk seçin. Bu adımı metin alanındaki diğer başlıklar için de tekrarlayın.

Adresi seçilebilir yapmanız da önemlidir. Bazı ziyaretçiler adresi kopyalayıp başka bir yere yapıştırmak veya göndermek isteyebilirler. Bunun için Selection aracı ile metin alanını seçin ve Properties denetçisindeki Selectable (Seçilebilir) düğmesine basın. Böylece ziyaretçiler adresi seçip kopyalayabilirler.

4. Properties denetçisinden Bitmap text seçimini yapın.

Anti-aliasing (yumuşatma) yapılmamış bir öğe sert ve kesin tanımlı hatlara, çıkıntılı gözüken kıvrımlara sahiptir. Yumuşatma uyguladığımız zaman hatlar daha akıcı ve gölgeli bir hale gelir, kenarlardaki keskinlik azalır. Anti-aliasing Web grafikleri için çoğu zaman gayet iyi bir seçenek olsa da özellikle küçük metinlere uygulanması her zaman doğru olmayabilir; yumuşatılmış küçük metinlerin netliği kaybolabilir ve okunması zorlaşabilir. Font rendering method menüsünden Bitmap text seçimini yaptığınızda metne hiç yumuşatma uygulanmaz.

3. adımda oluşturmuş olduğunuz metin alanını seçin. Properties denetçisinde Font rendering menüsünden Bitmap text’i seçin. metnin görünümünün nasıl değiştiğini hemen fark edeceksiniz. Metin alanı için yeniden Anti-alias for readability seçimini yapın.

5. Properties denetçisinden harita başlığının özelliklerini değiştirin.

Font özelliklerini yine değiştirmek için Properties denetçisini büyütün. Bu sefer daha uzun metinler kullanacaksınız.

Properties denetçisinde font türü yine Arial olarak kalsın, rengimiz siyah olacak. Bu kez büyük bir font kullanıyoruz, font boyunu 26 yapın. Bold ve Italic düğmelerini de seçin. Auto kern kutucuğu işaretli veya işaretsiz olabilir, bir sonraki adımda karakter aralığı ile oynayacağımız için burada çok önemli değil.

6. Harita başlığı için bir metin girin ve metnin Stage üzerindeki konumunu ayarlayın.

Stage üzerinde statik bir metin alanı açın ve içine şunu yazın: How to find us.

Metnin tam konumunu daha sonra sayfaya harita eklendiği zaman ayarlayabiliriz, şimdilik Properties denetçisinden x ve y koordinatları olarak 70 ve 470 girin.

7. Karakter aralığı değerini 2 yapın.

Bir metnin karakter aralığını değiştirdiğinizde o metindeki her bir karakter eşit aralıklarla yeniden yazılır. Karakterleri birbirlerinden uzaklaştırmak için pozitif değerler, birbirlerine yaklaştırmak içinse negatif değerler kullanabilirsiniz. Henüz oluşturmuş olduğunuz metin alanını seçin ve Letter spacing (karakter aralığı) alanına 2 girin. Karakter diziliminin nasıl değiştiğini inceleyin ve size en uygun gelen sıkıştırma ya da açma değerini girin.

İpucu: Bu noktada Properties denetçisindeki diğer seçeneklere de göz atmak isteyebilirsiniz; metnin font boyu büyük olduğundan yaptığınız bir değişikliğin etkisini kolayca görmeniz mümkün. Selection aracı ile metin alanına çift tıklayın ve karakterlerin yarısını seçin. Yapacağınız değişiklikleri sadece metnin seçmiş olduğunuz yarısına uygulayın. Bir sonraki adıma geçmeden önce metni yine eski halinde getirmeyi unutmayın.

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

folklorcu08 · 5 Şub 2010

Metin Alanına Timeline Efektleri Eklemek

Timeline efektleri Flash’taki çeşitli öğelere görsel zenginlik katmak için kullanılır. Flash’ı kurduğunuz zaman Macromedia tarafından yazılmış çeşitli Timeline efektleri de sisteminize yüklenir. Ancak Web’de ya da Macromedia Exchange gibi yerlerde bol miktarda başka Timeline efekti de bulabilirsiniz.

Timeline efektleri Insert > Timeline Effects komutu ile uygulanır. Herhangi bir şeye Timeline efekti eklemek istediğinizde önce öğeyi seçin ve ardından Insert > Timeline Effects > Effects yolunu takip ederek vermek istediğiniz efekti belirleyin. Efekt seçimi yaptığınızda bir ön izleme ekranı açılır. Bu ekranda hem efektin ilgili öğeyi nasıl etkileyeceğini görebilir hem de efekte ilişkin çeşitli ayarlar yapabilirsiniz.

1. 1 no’lu karedeki home sayfası için yeni bir katman ve katman klasörü oluşturun.

Timeline’daki oynatım kafasını home etiketli 1. kareye geri getirin. map katmanını seçin, yeni bir katman ekleyin ve bu katmana home adını verin. home katmanı seçili iken yeni bir katman klasörü ekleyin ve klasöre pages ismini verin. home ve bir önceki uygulamada oluşturduğunuz map katmanını bu klasöre taşıyın. pages klasörü sitedeki her sayfa için oluşturacağımız katmanlara ev sahipliği yapacaktır.

home katmanını seçin. Katmandaki en son karenin hemen sağına tıklayın ve fare imlecini 10. kareye kadar geriye sürükleyin. Fare tuşunu bıraktığınızda 70. kareden 10. kareye kadar olan tüm kareler seçilecektir. Seçili alana sağ tıklayın ve Remove Frames (Kareleri Kaldır) komutunu verin. home sayfasının içeriği Timeline’ın sadece ilk 10 karesinde gösterileceği için bu katmandaki diğer
karelere ihtiyacımız olmayacak.

2. Statik bir metin alanı oluşturun ve içine Featured Book yazın.

Properties denetçisini açın. Metin türümüz statik, fontumuz yine Arial. Font rengini #CCCCCC olarak değiştirin. Font boyunu da 14 yapın. Bold ve Italic düğmeleri de önceki örnekte olduğu gibi basılı olsun. Font görüntüleme metodu olarak yine Anti-alias for readability seçimini kullanacağız. Karakter aralığı değerini yeniden 0 yapın. Auto kern kutusu işaretli değilse işaretleyin. home katmanı seçili durumdayken Stage’e tıklayın ve statik metin alanına FEATURED BOOK yazın. Metin alanını aşağıdaki şekilde görüldüğü gibi Stage’in sağ üst tarafına, HOME yazsının altına yerleştirin.

3. Metin alanına bir Timeline efekti ekleyin.

Henüz oluşturmuş olduğunuz metin alanını seçin ve Insert > Timeline Effects > Effects > Drop Shadow komutunu verin.

Drop Shadow ön izleme ekranındaki ayarlarla oynayarak hoşunuza giden bir görünüm bulun. Bu ekranda yeni değerler girdikten sonra Update Preview düğmesine basarak efektin o değerlerle nasıl görüneceğini izleyin. Yaptığınız değişiklikleri etkin kılıp Drop Shadow ekranını kapatmak için OK düğmesine basın. Bu işlem neticesinde kütüphanenizde Drop Shadow 1 adlı bir grafik sembolü oluşturulur. Bir sonraki dersimizde sembolleri detaylı olarak inceleyeceğiz, şimdilik sadece böyle bir sembolün eklendiğini bilmeniz yeterli.

İpucu: Timeline efektini beğenmediyseniz Modify > Timeline Effects > Remove Effect komutuyla efekti kaldırabilirsiniz.

Not: Tasarımcıların çoğu çeşitli filtre ve efektleri ayrı bir resim işleme programında uygulamakta ve sonra da çalışmalarını Flash’a aktarmaktadır. Bu sayede dokümanlarınızdaki metinler Flash’ta elde edemeyeceğiniz kompleks görünümlere sahip olabilir.

4. home katmanını kilitleyin ve çalışmanızı kaydedin.

folklorcu08 · 5 Şub 2010

Yazım Denetimi Yapmak

Flash’taki yazım denetim aracı FLA dosyanızdaki tüm metinlerin yazım denetimini yapmanızı sağlar. Yazım denetimi alışkanlığı kazanmanız yayınlayacağınız FLA dosyasının daha özenli ve temiz görünmesi bakımından büyük önem taşır. Flash’ta FLA dosyalarının nasıl denetlenebileceği üzerinde geniş bir kontrolünüz vardır. Metin alanlarını, katman isimlerini veya ActionScript kodunu denetleyebilirsiniz. Buraya kadar dokümanımıza bol miktarda metin eklediğimiz için şimdi bu metinlerin yazım denetimini yapmanın tam zamanı.

Not: Bu kitabın Türkçe basımının editörü olarak Flash’ta (ve diğer Macromedia yazılımlarında) Türkçe yazım danatimi özelliğinin olmadığını belirtmem gerekiyor.

1. Spelling Setup ekranından ayarlarınızı seçin.

Yazım denetimini ilk kez kullanacaksak öncelikle Text > Spelling Setup komutunu vermeli ve denetim ayarlarını gireceğimiz ekranı açmalıyız. Daha önce yazım denetimini kullanmışsanız da Spelling Setup ekranındaki seçenekleri incelemek faydalı olacaktır. Ekranın ******** options (Doküman seçenekleri) başlıklı bölümünde FLA dosyasındaki hangi metinlerin yazım denetimine tâbi tutulacağını görüyorsunuz. Checking options (Denetim seçenekleri) kısmında ise denetim esnasında bakılacak ya da ihmal edilecek yazım ve değişiklik tipleri yer alır. Spelling Setup ekranındaki seçenekleri aşağıdaki şekilde görüldüğü gibi düzenleyin.

Eğer istiyorsanız başka seçimler de yapabilirsiniz. Fare imlecini seçeneklerin üzerinde kısa bir süre bekletirseniz o seçeneği daha detaylı açıklayan bir ipucu metni görüntülenecektir. Burada yaptığınız seçimleri dilediğiniz zaman değiştirebilirsiniz.

2. Check Spelling iletişim kutusunu kullanarak yazım denetimi yapın.

Text > Check Spelling komutuyla Check Spelling ekranını açın ve yazım denetçisini çalıştırın. Yazım denetçisi gerçekte doğru olan bir kelimeyi tanımıyorsa bu uyarıyı ihmal edebilir (Ignore) veya Add to Personal düğmesine basarak kelimeyi kendi sözlüğünüze ekleyebilirsiniz.

Yazım denetimi sona erdiğinde küçük bir mesaj penceresi ile bu durum size bildirilir. OK düğmesine tıklayarak yazım denetçisinden çıkabilirsiniz.

3. Çalışmanızı bookstore7.fla adıyla kaydedin.

Çalışmanızı sabit diskinizdeki TechBookstore klasörüne kaydedin.

folklorcu08 · 5 Şub 2010

Metin Tabanlı Bileşenlerin Kullanımı

İlerleyen derslerde Tech Bookstore sitesine çeşitli yazılar eklemek için metin bileşenleri kullanacağız. Metin bileşenleri TextArea ve TextInput bileşenlerini içerir. TextArea, aşağı ya da yukarı kaydırılabilen geniş yazı bloklarına ihtiyaç duyduğumuz anlarda kullanılır. TextInput ise kullanıcıların metin alanlarına giriş yapmasını ve bu bilgilerin toplanmasını istediğiniz zaman faydalıdır. Bu iki bileşen dinamik metinlerin ve giriş metinlerinin yerine kullanılabilir. Ancak bu kullanım dosya boyutunun artmasına yol açar. Metnin istediğiniz şekilde görüntülenebilmesi için daha fazla ActionScript koduna ihtiyaç duyabilecek olmanız da bir başka dezavantajdır. TextArea ve TextInput’un en büyük avantajları ise zengin düzenleme seçeneklerine sahip olmaları ve kaydırma çubuklarının metin alanlarına otomatik olarak eklenmesini sağlamalarıdır.

Not: İçeriğin bu bileşenlere yüklenmesini sağlayan kodla 9. ve 10. derslerimizde tanışacağız. Şimdilik bileşenler hakkında çok genel bir bilgiye sahip olmanız yeterli. İlerleyen sayfalarda Web sitesindeki bir geri bildirim formuna TextInput alanları ekleyeceğiz. Kullanıcılar geri bildirim formuna bilgi girecek ve bu bilgiler bir XML dosyasında saklanacak.

folklorcu08 · 5 Şub 2010

Dinamik Metin Alanları

Dinamik metinler ve giriş metinleri, statik metinlerden çok farklıdır. Dinamik metin ve giriş metni alanları daha zorlu metin yapılarıyla başa çıkabilirler. Bu alanlara metinler yükleyebilir, SWF dosyası görüntüleniyorken çeşitli hareket ya da eylemlere bağlı olarak yüklenmiş olan metinlerin değişmesini sağlayabilirsiniz.

Bu alanlar aynı zamanda HTML olarak formatlanmış metinleri de tanıyabilirler. Yani bu alanlara koyacağınız metinlerde HTML etiketleri kullanabilirsiniz; Flash fontların görünümünü metnin içindeki etiketlere göre ayarlayabilir. Örneğin metinde <b> etiketleri kullanırsanız Flash ilgili fontları kalınlaştıracaktır. Yine HTML etiketlerini kullanarak dinamik metin alanlarına URL linkleri, imajlar ve paragraflar da yerleştirebilirsiniz. Bu teknikleri bir TextArea bileşeni kullanacağımız 9. dersimizde daha yakından göreceğiz.

Bu derste şunları öğrendiniz:

• Text aracını tanıdık.
• Statik metinleri ve aygıt fontlarını gördük.
• Fontları bir SWF dosyasına gömmeyi öğrendik.
• Properties denetçisindeki kontrolleri kullanarak metin özelliklerini değiştirmeyi öğrendik.
• Statik bir metin alanına efekt uyguladık.
• Yazım denetiminin nasıl yapılabileceğini gördük.
• Metin tabanlı bileşenler ve dinamik metin alanları hakkında bilgi aldık.

folklorcu08 · 5 Şub 2010

Macromedia Flash 8 (Ders 4)

Sembol Oluşturmak ve Düzenlemek

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.

Bu derste şunları öğreneceksiniz

• 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

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

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

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

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

folklorcu08 · 5 Şub 2010

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.

folklorcu08 · 5 Şub 2010

Macromedia Flash 8 (Ders 5)

5 Animasyon Hazırlama

Bu kısmı sabırsızlıkla bekliyordunuz değil mi? Animasyonlar oluşturmak her Macromedia Flash kullanıcısının yapmak istediği şeydir. Animasyonlar uygulamalarınıza canlılık katar, ziyaretçilerin yaşayacağı Web deneyimini zenginleştirir. Flash aslen bir animasyon programıdır. Flash ile oluşturulan animasyonların en sık kullanıldığı mekân Web olsa da bu animasyonları CD-ROM’larda, bilgisayar destekli eğitim setlerinde, mobil cihazlarda ve hatta dijital yayınlarda da kullanabilirsiniz. Flash’ı bu denli kullanışlı ve yaygın yapan şey animasyonlarının küçük boyutları sayesinde her platforma kolaylıkla taşınabilir olmasıdır.

Flash 8’de animasyonlar hazırlamak çok zor değildir. Ancak yine de elinizin altındaki araçlara alışmanız ve iyi organizasyon becerilerine sahip olmanız gerekir. Flash işin önemli bir kısmını sizin adınıza üstlenecektir. Ayrıca programda süreci hızlandırmanıza yardımcı olacak hazır efektler de vardır. Bu dersimizde özellikle motion tween ve shape tween tekniklerini kullanarak çeşitli animasyonlar oluşturacağız. Ayrıca animasyonu hangi amaçlar için kullanmanız gerektiğini de dersimiz süresince daha iyi anlayacaksınız.

Bu derste şunları öğreneceksiniz

• Farklı animasyon türleri hakkında bilgi sahibi olacaksınız.
• Bir motion tween oluşturacaksınız.
• Ease değerini ayarlayarak motion tween’leri yavaşlatacak ya da hızlandıracaksınız.
• Parlaklık ve alfa değerlerini zamana bağlı olarak değiştireceksiniz.
• Bir shape tween ekleyeceksiniz.
• Basit bir kare kare animasyon oluşturacaksınız.
• Bir hareket kılavuzu kullanarak bir sembolü vektörel bir yol boyunca hareket
ettireceksiniz.

folklorcu08 · 5 Şub 2010

Animasyonlara Giriş

Grafik ya da resim karelerinin art arda hızlı bir şekilde gösterilmesi sonucunda hareketli bir görüntü, yani animasyon oluşur. Flash’ta animasyonu oluşturan öğeler Timeline üzerinde yer alan ve çeşitli içerikler barındıran karelerdir. Bu içerik çizimler, fotoğraflar ve hatta ActionScript ile hazırlanmış grafiklerden oluşabilir.

Macromedia Flash 8’de animasyonlar hazırlamanın farklı yöntemleri vardır. Ayrıca hazırlayabileceğiniz animasyon türleri de çeşitlilik gösterir. Motion tween’ler, shape tween’ler veya kare kare animasyonlar oluşturabilirsiniz. tween ifadesi, İngilizce’de arada, arasında anlamına gelen “between” ifadesinin kısaltılmış halidir. Animasyon tekniklerinin gelişmeye başladığı ilk yıllarda animatörler sadece görüntüde değişikliğin olduğu esas kareleri çizer, bunların arasında yer alacak olan kareleri tamamlama işini de yardımcı animatörler üstlenirdi. Flash’taki tween mantığı da bundan farklı değildir. Siz animasyonun değiştiği alanları tanımlarsınız, Flash da bu alanların arasını doldurur.

Anahtar karelerdeki başlangıç ve bitiş noktalarını (değişikliğin başlayacağı ve sona ereceği noktaları) tanımlamanızın ardından anahtar karelerin arasına bir motion tween uyguladığınızda Flash, Timeline üzerinde başlangıç ve bitiş anahtar kareleri arasında kalan tüm kareleri dolduracaktır. Benzer bir durum shape tween’ler için de geçerlidir. Ancak shape tween’in amacı hareket değil bir nesnenin şeklinin fiziksel değişimidir. Bu derste hem motion (hareket) hem de shape (şekil) tween’ler oluşturacağız.

Kare kare animasyonlarsa daha geleneksel bir animasyon türüdür. Flash’ın anahtar kareler arasında tween’ler oluşturmasını, yani animasyonun önemli bir bölümünü sizin yerinize tamamlamasını tercih etmiyor, animasyonun içerdiği her kareyi bizzat oluşturmak istiyorsanız kare kare animasyon metodunu kullanabilirsiniz. Bu yöntemle, otomatik olarak oluşturulan tween’lere göre çok daha karmaşık efektler üretmeniz mümkündür. Ancak kare kare animasyon yapmak tahmin edebileceğiniz gibi hem daha çok zamanınızı alır, hem de SWF dosyanızın boyutunu artırır.

Not: ActionScript ve klipler kullanarak da animasyonlar hazırlayabilirsiniz. Bu teknikler derslerimizin kapsamı dışında. Ancak ActionScript’i daha geniş bir şekilde öğrenmeye karar verirseniz onunla animasyonlar yapabileceğinizi de bilin.

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

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye

Kıdemli Üye