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

folklorcu08 · 5 Şub 2010

Motion Tween için Hazırlık

Motion tween, sabit bir zaman aralığında bir nesnenin konumunu değiştirmek için kullanılır. Bunun dışında, ölçeklendirme, alfa (şeffaflık), tonlama ya da döndürme işlemleri de motion tween kullanılarak yapılabilir. İsteğe bağlı bir hareket kılavuzu ile nesneleri bir vektör yolu üzerinde hareketlendirme gibi daha karmaşık animasyonlar da hazırlanabilir; dersimizin ilerleyen bölümlerinde böyle bir uygulama yapacağız. Burada dikkat etmeniz gereken bir şey var: Sadece sembollerle motion tween yapabilirsiniz. Bu nedenle motion tween yapmadan önce nesneyi bir sembole çevirmelisiniz. Animasyon temel olarak aynı resmin biraz farklı yerlerde kopyalarının gösterilmesiyle oluşturulan bir illüzyondur, dolayısıyla sembol kullanılması uygundur. Bu ayrıca SWF dosyasını dışarı aktarırken (export) dosya boyutunun küçük kalmasını da sağlar. Bunun sebebi, Flash’ın zamanı gelen her öğeyi baştan oluşturmak yerine kütüphaneden alıp tekrar kullanıma sokabilmesidir.

Not: Shape tween bunun tersidir: Ham verilere shape tween uygulayabilirsiniz fakat sembol kopyalarına, gruplanmış öğelere veya bitmap resimlere uygulayamazsınız. Bunların önce Modify > Break Apart kullanılarak ham veriye dönüştürülmeleri gerekir. Bu dersimizde ham verilere (vektörel çizimlere) shape tween uygulamayı da öğreneceksiniz.

Bir FLA dosyasına motion tween eklemenin birkaç yolu vardır, bunları aşağıdaki uygulamalarımızda öğreneceksiniz. İlk uygulamamızda, önceki derslerimizde oluşturduğumuz menülere motion tween ekleyeceğiz. İşimiz bittiğinde, menüler kullanıcı bir düğmeye basınca açılıp daha sonra kapanır hale gelecek. Ayrıca SWF dosyası oynatılırken animasyonun sürekli gösterilmesini önlemek için bir hareket durdurma komutu ekleyeceğiz.

1. bookstore8.fla dosyasını açın ve sabit diskinizdeki TechBookstore klasörüne bookstore9.fla adıyla kaydedin.

Dördüncü dersimizde, bu derste hareketlendireceğimiz sembollerin çoğunu hazırladık. Önemli değişiklikler yağacağımız için dosyamızı farklı bir isimle yeniden kaydediyoruz.

2. Stage’de mcProducts örneğini bulun, F8 tuşu ile onu başka bir klibe yerleştirin ve klibi mcProductsMenu olarak isimlendirin.

Klibimizi neden başka bir klibin içine koyduğumuzu merak ediyor olmalısınız. Flash’ta çalışırken bazen animasyonların dokümanın ana Timeline’ı üzerinde yer almasını istemeyiz. Bunun çözümü de animasyonların klip sembollerinin içerisinde oluşturulması ve bu klibin bir örneğinin Stage’e yerleştirilmesidir. Bu durumda mcProductsMenu klibi içinde bir hareket animasyonu yapmış olacaksınız. Motion tween’leri sadece sembollerde kullanabildiğinizi unutmayın, mcProducts’ı mcProductsMenu içine yerleştirmemizin nedeni budur.

İpucu: buttons katmanı menu katmanının üstünde bulunduğu için menu kliplerini seçmek zor olabilir. buttons katmanını kilitleyip gizleyerek menu kliplerini daha kolay seçilebilir bir hale getirebilirsiniz.

3. mcProductsMenu’ye çift tıklayarak onu Stage’de düzenlemeye başlayın. Gerekirse menüyü yakınlaştırın.

mcProductsMenu üzerine çift tıkladıktan sonra Stage’in geri kalanı donuklaşır ve siz de düzenlemekte olduğunuz sembole odaklanabilirsiniz. Burada sembolün ana özellikleri elinizin altındadır ve yaptığınız değişiklikler sembolün doküman içindeki tüm kopyalarını (örneklerini) etkileyecektir. Stage’deki klibimizin tek bir örneği olduğundan, üzerinde düzenleme modunda çalışmamızın herhangi bir sakıncası yoktur. Özellikle bu modda çalışacağız çünkü animasyonumuz Stage’de belirli yerlerde başlayıp bitmek zorunda ve biz bu mod sayesinde çalışırken Stage ve tüm grafikleri birlikte görebiliriz.

4. Layer 1’i seçin ve ona menu tween adını verin. Yeni bir katman ekleyin ve bu katmana actions adını verin. actions katmanında 11 ve 20. karelere anahtar kareler yerleştirin.

menu tween katmanını seçin, Insert New Layer düğmesine tıklayın ve katman ismi olarak actions girin. 11 ve 20. karelerde anahtar kare oluşturmak için kareyi seçin ve F6 tuşuna basın. Her anahtar karede klibin pozisyonunu değiştireceğiz. Klibin konumunu değiştirmek, anahtar karelerin arasına tween eklerken animasyonun oluşturulmasını sağlayacaktır. Tween’leri bir sonraki uygulamamızda ekleyeceğiz.

Klipler hakkında bilmemiz gereken önemli şeylerden biri de, bunların kendi Timeline’larının olduğudur. Klipler küçük çocuklar gibidir: Siz söylemeden bir şey yapmazlar ya da daha kötüsü, aksi söylenmedikçe bir şeyi yapmayı bırakmazlar. Bunun anlamı, bir klip içinde animasyon yaptığınızda, siz ne zaman duracağını belirtmedikçe animasyon sürekli tekrar edecektir.

Animasyonunuzun aşağı açılan menü şeklinde olmasını istiyorsunuz diyelim: Kullanıcı düğmelerden birine (Products) tıkladığında menü aşağı doğru hareketlenerek tamamen açılmalı ve tüm seçenekler ortaya çıktığında durmalıdır. Bir seçenek tıklandığında ya da kullanıcı fareyi uzaklaştırdığında menünün ilk baştaki haline gelmesini de istiyoruz. Bu nedenle klibimize iki farklı noktada animasyonu durdurmasını söylemek zorundayız: 11 ve 20. karelerde.

5. Animasyonu kontrol etmek için Timeline’a durdurma eylemleri (stop action) ekleyin.

Durdurma eylemleri Actions panelinden eklenir. ActionScript’i henüz bilmiyor olsanız da basit bir tıklama işlemiyle ActionScript’ten faydalanabilirsiniz. Ana menüden Window > Actions’ı seçerek Actions panelini açın. Actions paneli Windows’ta Stage’in altında ve OS X’te de yüzen panel olarak açılır. Actions panelinde üç ayrı bölüm bulunur: Script paneli, Script listesi ve Actions bölümü. Script paneli, Script listesi ve Actions bölümünün sağındaki büyük metin alanıdır. Aşağıdaki şekilde Actions panelinin farklı bölümlerini görüyorsunuz.

actions katmanında 11. ve 20. karelere anahtar kare eklerken Script Assist’i kullanacağız. ActionScript deneyiminiz yoksa Script Assist özelliği çok işinize yarayacaktır. Eklemek istediğiniz eylemi seçtiğinizde Script Assist ona uygun menü seçenekleri ve düğmeleri eklemenize yardımcı olur.

actions katmanında 11 no’lu anahtar kareyi seçin ve Actions panelinin başında Actions-Frame yazdığından emin olun. Actions panelinin başlık çubuğundan bir kare mi yoksa bir nesne mi seçtiğinizi anlayabilirsiniz. Script listesinde de aynı şekilde Current Selection bölümünde actions katmanının 11. karesi görülmelidir. Script panelinin altındaki script etiketi de aynı işi görür.

Script panelinin sağ üst köşesindeki Script Assist düğmesine tıklayın. Soldaki Actions araç kutusunda Global Functions kategorisine tıklayın ve Timeline Control’ü seçin. Timeline Control kategorisinde stop action’a çift tıklayıp Timeline’a eklenmesini sağlayın. Script Assist, Actions denetçisinin üstünde stop eyleminde parametre kullanılmadığını gösterecektir. Aynı yöntemle actions katmanındaki 20. kareye de bir stop eylemi ekleyin.

İpucu: Script Assist, Script panelinin sol üstündeki Actions araç çubuğunda seçtiğiniz işlemin açıklamasını gösterir. Onun altında eylemi script’inize nasıl ekleyebileceğiniz açıklanır.

ActionScript eklemeyi bitirdikten sonra, Lock Layer simgesinin altındaki noktaya tıklayarak actions katmanını kilitleyin, böylece actions katmanında Stage’e bir şey eklenmesini önlemiş oluyoruz. ActionScript içeren bir katmanda ham veri, sembol ve örnekleri, bileşenleri ya da diğer öğeleri bulundurmamak çok sağlıklı bir yoldur. Kodları nesnelerle (örneğin ActionScript içeren bir bileşenle bir klibi) aynı katmana yerleştirirseniz, SWF dosyanızda kod çakışmaları yaşanabilir. Ayrıca FLA dosyanızdaki hataları ayıklamak da güçleşebilir.

Not: Kare eylemleri eklerken, eylemler Timeline üzerindeki diğer öğeler gibi anahtar karelere yerleştirilmelidir. Normal bir kareye ActionScript ekleyemezsiniz.

6. Yeni bir katman oluşturun ve labels olarak adlandırın. Sonra 2 ve 12. karelere yeni anahtar kareler ve kare etiketleri ekleyin. İşiniz bitince katmanı kilitleyin.

menu katmanını seçin ve Insert Layer düğmesine tıklayın. Yeni katmana labels ismini verin. 2. ve 12. karelerde yeni anahtar kareler oluşturmak için kareyi seçip F6 tuşuna basın. Şimdi ActionScript’i kullanarak, Products düğmesine tıklandığında ya da animasyon sonrasında fare menüden çekildiğinde oynatımın doğrudan bu karelere taşınmasını sağlayacaksınız. Bu iş için ActionScript’i kullanmanın en kolay yolu anahtar karelere etiket vermektir. Bunun sebebini aşağıdaki paragrafta açıklıyoruz.

Menülerinizin açılıp kapanma animasyonunun süresi hoşunuza gitmeyebilir ve bu yüzden animasyonda yer alan kare sayısını değiştirmek isteyebilirsiniz. Bunu yaptığınızda, animasyonların başlangıç ve bitişleri farklı karelere kayabilir. Eğer ActionScript’e belli numaralı bir kareye gitmesini söylemişseniz, Actions paneline girip script’i yeni numaraları gösterecek şekilde değiştirmeniz gerekir. Ancak, oynatım kafasını etiket verilmiş bir kareye gönderme yoluna giderseniz, başlangıç ve bitiş kareleri hareket ettiğinde etiket de onlarla birlikte hareket eder ve Script’i değiştirmeniz gerekmez.

labels katmanında 2 numaralı kareyi seçin ve Properties denetçisinde <Frame Label> alanına slidedown yazın. Sonra labels katmanından Kare 12’yi seçin ve <Frame Label> kutusuna slideup yazın. İşiniz bitince, daha önce yaptığınız gibi katmanı kilitleyerek üzerine kaza ile yeni içerik eklenmesini önleyin.

7. menu tween katmanının 12 ve 20. karelerine yeni anahtar kareler ekleyin.

Bu kareler, menünün nasıl hareket edeceğini belirler. Kare 12, menü açılış animasyonunun sonu, menü kapanış animasyonunun ise başlangıcıdır.

8. Kare 12’deki mcProducts klibinin konumunu değiştirin.

Kare 12’de Stage’den mcProducts’ı seçin. Klibi Shift tuşuyla birlikte aşağı ok tuşuna basarak aşağı kaydırın ve hemen grBar’ın altına getirin. Aşağıdaki şekli inceleyin.

İpucu: Klavyeden Shift ve aşağı tuşlarına bastığınızda, seçili grafik 10 piksellik birimler halinde aşağı kayar. Tek başına aşağı ok tuşuna bastığınızda ise hareket birimi 1 piksel olur.

9. Ana Stage’e dönün ve diğer iki menü için bu adımları tekrar edin.

Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönün. 2’den 8’e kadar olan adımları mcCompany ve mcContact için tekrar edin. İçinde bulundukları klipleri sırasıyla mcCompanyMenu ve mcContactMenu olarak adlandırın. Tüm menülerimiz artık motion tween için hazır.

10. İşiniz bittiğinde FLA dosyanızda yaptığınız değişiklikleri kaydetmeyi unutmayın.

Böylece tüm kliplerinizi motion tween için ayarlamış bulunuyoruz.

Not: Motion tween uygularken bir sembolün kopyasını sadece o sembolün aynı katmandaki başka bir kopyasına doğru hareketlendirebilirsiniz. Anahtar kareler içerisinde sadece bu sembol kopyalarının olmasına izin verilir çünkü Flash bir anahtar karede aynı anda sadece tek bir şeye tween uygulayabilir. Hareketlendirilecek sembolün bulunduğu kareye başka nesneler koyduğunuzda, Flash hangi nesnenin anime edileceğini bilemez. Aynı anda birden fazla şeyi hareketlendirmek isterseniz her animasyonu kendi katmanına koymanız gerekir.

İpucu: Flash 8’le gelen Distribute to Layers özelliği, bir metin bloğunun (Modify > Break Apart ile ayrılmış olmalı) harflerini ayrı ayrı hareketlendirmek istediğinizde ya da FLA oluştururken bir öğeler grubunu Stage’e aktarmak istediğinizde oldukça yararlıdır. Stage’de birden fazla nesne seçtikten sonra Modify > Timeline > Distribute to Layers’ı seçerseniz, Flash seçili her nesneyi yeni bir katmana yerleştirir ve isimlendirir. Fakat genelde isimleri elle kendi isteğinize göre düzenlemeyi tercih edeceksiniz. Burada fazla kullanılmasa bile, bu özellik FLA dosyanızı düzenli bir halde tutmanız ve geliştirme sürecini kısaltmanız için oldukça faydalıdır.

folklorcu08 · 5 Şub 2010

Motion Tween’lerin Eklenmesi

Yukarıda gördüğünüz gibi, motion tween kullanarak Stage’de bir sembol kopyasının konumunu, parlaklığını, alfasını (şeffaflığını) ya da tonlamasını değiştirebilirsiniz. Properties denetçisinde yer alan Color menüsünü kullanarak kopyanın (sembol örneğinin) parlaklık, alfa ya da tonlaması ile oynayabilirsiniz. Motion tween uyguladığınız bir kopya varsa, bu menüden anahtar karenin değerlerini değiştirdiğinizde yeni ayarladığınız özelliklerden başlayan ya da ona doğru giden bir geçiş oluşturulur.

Klibinizin anahtar kareleri hazır ve kopyanın başlangıç ve bitiş pozisyonları belli olduktan sonra, menüleri hareket ettirecek asıl motion tween’leri eklemeye hazırız demektir. Burada ayrıca motion tween kullanarak ve Properties denetçisindeki değerleri değiştirerek menü parlaklığını da anime edeceğiz.

1. bookstore9.fla dosyasında mcProductsMenu öğesini çift tıklayarak açın. menu tween katmanını seçin.

Bir önceki uygulamamızda hazırladığımız klipler ve içerikle çalışacağız.

2. Menüyü aşağı hareket ettirmek için Kare 1 ve 12 arasında bir motion tween oluşturun.

menu tween katmanından 1 ve 12 arasındaki herhangi bir kareye sağ tıklayınca gelen ya da Control tuşuna basıp tıkladığınızda açılan menüden Create Motion Tween’i (Motion Tween Oluştur) seçin. İlk dikkat etmeniz gereken şey, karelerin zemin renginin mora yakın bir renge dönmesi ve ilk kareden son kareye uzanan ok olmalıdır. Bu durum, tween’i katmana doğru şekilde eklediğinizi gösterir. 3. adımdaki şekilde motion tween’lerin bulunduğu bir Timeline görülmektedir.

Not: Yanlış bir ekleme yapmışsanız, katmanınızda kesintisiz uzun bir ok yerine kesikli çizgiler görürsünüz. Bu genelde hareketin olmasını istediğiniz anahtar karelerin içinde birden fazla nesne olması durumunda görülür.

Not: Sembol içermeyen anahtar kareler arasında bir motion tween oluşturmayı denediğinizde, Flash bu anahtar karelerdeki grafikleri Tween1, Tween2, vs. isimlerinde grafik sembollerine dönüştürecektir. Bunu önlemek için Timeline’da oynama yapmadan önce kendiniz grafik nesnelerini sembollere dönüştürmeyi unutmayın.

3. İkinci bir motion tween ekleyerek menüyü yukarı hareketlendirin ve Timeline’da gezinerek animasyonu denetleyin.

2. adımı uygulayarak 12 ve 20. kareler arasına bir motion tween ekleyin. 12 ve 20. kareler arasında herhangi bir kareye sağ tıklayın ve açılan menüden Create Motion Tween’i seçin. İşiniz bittiğinde,menü 1-12 no’lu kareler arasında aşağı, 12-20 no’lu kareler arasında da yukarı hareket edecektir. Oynatım kafasını sürükleyerek animasyonu izleyin.

İpucu: Bir dizi kareye motion tween uyguladıktan sonra, iki anahtar kare arasına kareler ekleyip çıkarmak suretiyle tween süresini değiştirebilirsiniz. Tween içindeki herhangi bir kareyi seçip F5’e tıkladığınızda kare ekleyebilir ve sağ tuş menüsünden Remove Frames komutu ile kareleri silebilirsiniz. Flash sizin için otomatik olarak tween’i değiştirecektir.

4. Properties denetçisinden menü motion tween’ine Ease değeri verin.

Bir motion tween’in başlangıç karesini seçtiğinizde, Properties denetçisinde Ease çubuğunu görebilirsiniz. Bunu kullanarak, motion tween süresince animasyonu yavaşlatıp hızlandırabilirsiniz; bu araç özellikle yerçekimi efektleri için bu çok kullanışlıdır. Standart değeri sıfırdır (ease yok). Çubuğu pozitif bir sayıya (1-100 arasında) getirerek Flash’a animasyona hızlı başlayıp sonra yavaşlamasını söyleyebilirsiniz. Negatif bir sayı seçtiğinizde ise animasyon yavaştan başlayıp sona doğru hızlanacaktır. İki şekilde de animasyon süresi değişmeyecektir.

Kare 1’i seçin ve Properties denetçisini açın. Ease çubuğunu 100’e getirin, böylece menü hızlı bir şekilde açılmaya başlayıp aşağı gelirken yavaşlayacaktır. Sonra 12. kareyi seçin ve çubuğu -100’e getirin. Menü giderek artan bir hızla kapanacaktır.

Not: Bir motion tween yaparken, seçili sembolün yönünü ve dönüş miktarını da ayarlayabilirsiniz. Dönüş için dört seçenek mevcuttur: None (dönüş yok), Auto (otomatik), CW (saat yönünde) ve CCW (saat yönünün tersi). Auto’yu seçecek olursanız, nesne en az hareket gerektiren tarafa doğru döndürülür. Son iki seçenek, nesneyi iki yönden birine belirtilen miktarda döndürür.

5. Menüye bir parlaklık tween’i ekleyin ve Timeline’da gezinerek animasyonu denetleyin.

menu tween katmanında Kare 1’de mcProductsMenu kopyasını seçin. Parlaklık özelliğine ulaşabilmek için kareyi değil kopyayı seçmelisiniz. Properties denetçisinde Color menüsünden Brightness değerini %85’e getirin. Kare 12’deki mcProductsMenu kopyasını seçin ve parlaklığın 0’da olduğundan emin olun. Timeline’daki oynatım kafasını kaydırarak animasyonun aldığı şekli izleyin.

İpucu: Mümkün olduğunca alfa tween yerine parlaklık tween’i kullanmaya çalışın, çünkü özellikle ayrıntılı bitmap resimlerde alfa tween’ler çok daha fazla işlem gücü gerektirir. Alfa ile tween uygularken Flash’ın çok daha fazla hesaplama yapması gerekir.

6. FLA dosyasındaki diğer iki menüye de yukarıdaki adımları uygulayın. Oynatım kafasını hareket ettirerek animasyonun doğru çalışıp çalışmadığını kontrol edin.

FLA dosyasında kalan iki menüye de aynı işlemleri uyguladığımızda, üç menünün de animasyonu hazır olacaktır. Animasyonları eklemeyi bitirdikten sonra oynatım imlecini Timeline’daki karelerin üzerinde sürükleyin ve animasyonunuzu izleyin. Enter tuşuna basarak animasyonu Flash düzenleme ortamında oynatabilirsiniz. Animasyon Stage’de başlayıp sonuna kadar gösterilecektir.

Not: Unutmayın, oynatım kafasını fare ile Timeline üzerinde kaydırarak animasyonu kontrol edebilirsiniz.

7. Ana Stage’e dönün. Kütüphaneyi temizleyin ve FLA dosyanızı kaydedin.

Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönün. mcProductsMenu, mcCompanyMenu ve mcContactMenu öğelerini kütüphanedeki movie clips klasörüne taşıyarak ortalığı temizleyin. Yaptığınız değişiklikleri kaydedin.

folklorcu08 · 5 Şub 2010

Alfa Seviyelerinin Animasyonu

Bir sembol kopyasının alfasını değiştirmek, kopyayı Stage’de gezdirmekten pek farklı değildir. Bir önceki çalışmada yaptığımız parlaklık düzeyi değiştirmeyle de neredeyse aynıdır. Önceki derslerden hatırlayacağınız gibi, alfa bir nesnenin opaklık veya şeffaflık düzeyini gösterir. Bir nesnede alfa 0’sa nesne şeffaftır ve Stage’de görünmez. %100 alfa ise nesnenin tamamen görünür durumda olduğunu belirtir. Motion tween uygulanmış bir sembol örneğinin alfa değerini değiştirerek kaybolma ve belirme etkileri elde edebiliriz.

Not: Alpha ile kaybolma/belirme efektleri fazla kullanılmamalıdır çünkü işlemciye çok yük bindirirler. Hatta işlemciyi sömürdükleri bile söylenebilir.

Aşağıdaki uygulamada motion tween kullanarak logonun arkasındaki ışığı azaltacak ve grafiğin büyüklüğünü değiştireceğiz. Yine bookstore9.fla dosyası ile çalışıyoruz.

1. grGlow’u seçin ve onu mcBookGlow adlı bir film klibi sembolüne dönüştürün. Layer 1’i de glow animation olarak isimlendirin.

Gerekiyorsa düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’de bulunduğunuzdan emin olun.

mcLogo içerisinde grGlow kopyasını bulun. Bunu yapmanın en kolay yolu, kütüphanede ya da Stage’de mcLogo üzerine çift tıklamaktır. İki şekilde de sembol düzenleme moduna girersiniz, buradan grGlow kopyasını seçip F8’e basarak onu mcBookGlow adlı bir klip sembolüne dönüştürün. Eklediğiniz animasyon sürekli tekrar edeceği için, grafik sembolünü klibe dönüştürmek zorundayız. pageTurn ve logo katmanlarının kilitli olduğundan ve grGlow kopyasını seçtiğinizden emin olun. mcBookGlow üzerine çift tıklayarak kopyayı açın ve Layer 1 olan katman adını glow animation olarak değiştirin. Şimdi iç içe üç Timeline’a sahipsiniz. (şekle bakınız).

2. glow animation katmanında 35 ve 70. karelerde anahtar kareler oluşturun.

glow animation katmanında 35. kareyi seçin ve yeni bir anahtar kare ekleyin. 1. karenin içeriği 35. karedeki anahtar kareye kopyalanacaktır.

glow animation katmanında 70. kareye başka bir anahtar kare ekleyin. Şimdi grGlow’un alfa ve büyüklüğünün kareler arasında değişmesini sağlayacağız.

3. Transform aracı ile grGlow’un büyüklüğünü değiştirin.

glow animation katmanında 35 no’lu kareyi seçin. Tools panelinden Transform aracını seçin ve bir köşesinden tutup merkeze çekerek grGlow kopyasını küçültün. Sembolün bozulmasını önlemek ve ölçü oranlarını korumak için fareyle sürükleme sırasında Shift tuşunu basılı tutun. Dördüncü adımdaki şekilde görüldüğü gibi büyük kısmı grLogo’nun arkasında saklı kalacak kadar ufaltın. grLogo, grGlow’un altında görünür durumdadır fakat farklı bir Timeline’da bulunduğu için açık renktedir (yerinde düzenleme modunda iseniz).

İpucu: Bunun dışında, Free Transform aracı seçili iken, Tools paneldeki Options’tan scale (ölçekle) seçeneğini de kullanabilirsiniz. Ölçekleme seçili iken, nesnenin köşesinden tutup oynatırken boyut oranları değişmez.

4. Properties denetçisini ve motion tween kullanarak grGlow’un şeffaflığını değiştirin.

Kare 35’teki grafik büyüklüğünü değiştirdiniz. Şimdi kopyanın alfasını değiştirelim. Yine Selection aracıyla Kare 35’teki kopyayı seçin. Properties denetçisinde Properties sekmesindeki Color listesinden Alpha’yı seçin ve alfa değerini %100’den %80’e indirin.

Ekrandaki görüntü istediğiniz gibi olmadıysa kopyaya verdiğiniz yeni alfa değerini değiştirin.

İpucu: Unutmayın, Stage’deki kopyada yaptığınız değişiklikler kütüphanedeki sembolü etkilemez. Kütüphaneden başka bir grGlow kopyası aldığınızda Stage’de siz değişiklik yapmadan önceki orijinal haliyle görünecektir.

5. Grafiği boyutlandırmak için motion tween ekleyin ve sonra Timeline’daki oynatım kafasını kaydırarak animasyonu izleyin.

Kare 1 ve 35 arasına tıklayın ve Properties denetçisini açın. Tween listesini None’dan Motion’a getirin. Aynı adımları Kare 35 ve 70 arasında tekrarlayın. Klip şu anda parlaklığı daha geniş bir boyutta anime etmekte ve orijinal durumuna gelmeden az önce soluklaştırmaktadır. Bu klibi ayrı olarak (tüm SWF dosyasını izlemeden) test etmek için oynatım kafasını mcBookGlow sembolünün 1. karesine getirip ana menüden Control > Play komutunu verebilirsiniz.

6. mcBookGlow’u kütüphanedeki Movie Clips klasörüne taşıyın. Bir sonraki çalışmadan önce FLA dosyanızı kaydedin.

folklorcu08 · 5 Şub 2010

Klip Düğmesinin Animasyonu

Dördüncü dersimizde iki klip düğmesi hazırlamıştık: Birisi içindekiler tablosu (table of contents), diğeri de örnek bir bölüm (sample chapter) içindi. Şimdiki uygulamada, klip düğmesine bir “mouse-over” efekti ekleyeceğiz. Bu efekti klibin içindeki bir parlaklık tween’i oluşturacak. Ziyaretçi faresini düğme üzerine getirdiğinde düğme hareketlenecek, fare uzaklaşınca da orijinal parlaklığına
dönmesi için ikinci bir animasyon gerçekleşecek. Klip düğmeleri özel kare etiketleri kullanırlar, böylece Flash her etiketli kareye bir düğme hâli olarak davranması gerektiğini bilir (aksi takdirde normal kare gibi davranır). Bizim kullanacağımız özel etiketler _over ve _down olacak (_over normal bir düğme sembolünün fare ile üzerine gelinmiş, _down da fare ile basılmış hâli). Bu etiketleri dördüncü dersimizde hazırlamıştık.

Bu uygulamamızda yine bookstore9.fla dosyasıyla çalışıyoruz.

1. Kütüphaneden mcSampleChapter klibini bulun ve üzerine çift tıklayın.

Sembole çift tıkladığınızda klip sembol düzenleme modunda açılacaktır. fill katmanının kilidini kaldırın ve animasyona devam etmeden önce diğer katmanların kilitli olduğundan emin olun, böylece text ve stroke katmanlarını yanlışlıkla seçmeniz engellenmiş olur.

2. fill katmanını seçin ve 5, 14 ve 25. karelere (son kare) birer anahtar kare yerleştirin.

Timeline’daki 5. kare _over isimli bir karedir. Kullanıcı klip düğmesinin üzerine fareyle geldiğinde bu kare animasyona başlayacaktır.

Kare 5’i seçip F6’ya basarak bir anahtar kare ekleyin. Aynı katmandaki 14 ve 2 . kareler için bu işlemi tekrarlayın. Biri _over, diğeri de _down hâli için olmak üzere iki animasyon hazırlanacaktır. _over hâli animasyonunun, _down animasyonunun tam tersi olmasını istediğimiz için, _over animasyonunun başlangıcı ve _down animasyonunun bitişi aynı kare olmalıdır.

3. grFill’e bir parlaklık tween’i ekleyin. 15 no’lu kareye bir anahtar kare ekleyin.

fill katmanında 5. kareyi seçin ve Properties denetçisini açın. Tween menüsünden Motion’ı seçerek bir motion tween ekleyin. Kare 14’te grFill’i seçin, Properties denetçisinde Color menüsünden Brightness’ı seçin ve değerini %85’e ayarlayın.

İşiniz bitince kare 15’e F6’ya basarak bir anahtar kare ekleyin. Properties denetçisinden Tween olarak Motion seçimini yapın. Oynatım kafasını gezdirerek oluşturduğunuz motion tween’leri izleyin.

İpucu: Bu aşamada düğmeyi test ederseniz parlaklık tween’lerini göremezsiniz çünkü Flash’taki klip düğmeleri her özel kare etiketine gidip duracak şekilde tasarlanmıştır. Her bir animasyonu oynatıp animasyonun sonuna kadar gitmesi için biraz ActionScript kodu eklemeniz gerekecek. Bunu da başka bir derste yapacağız.

4. mcToc kopyası için yukarıdaki adımları tekrarlayın

mcToc klibi aynı zamanda kütüphanede de bulunmalıdır. Kütüphanedeki sembole çift tıklayarak sembol düzenleme modunda açılmasını sağlayın. Aynı adımları mcSampleChapter için de yaparak düğmelerin aynı şekilde hareketlenmesini sağlayın.

5. Klibin Timeline’ında fill katmanını kilitleyin, değişiklikleri kaydedin ve ana Stage’e dönün.

folklorcu08 · 5 Şub 2010

Shape Tween Oluşturma

Shape tween, düzenlenebilir bir vektör grafiğin şeklini zaman içinde değiştirmenizi sağlar. Çizgilerin uzunluğunu değiştirebilir, çizgileri bükebilir ya da bir vektör çizimini değiştirerek çok ilginç efektler elde edebilirsiniz (renk değiştirme dahil). Flash tüm hesaplamaları üstlenerek sizi her kareyi tekrar çizme zahmetinden kurtarır: Tek yapmanız gereken başlangıcı, şeklin değişeceği noktaları ve bitişi belirlemektir (tıpkı motion tween gibi). Bir katmanda bir ya da birkaç şekil bulunabilir fakat aynı anahtar kare üzerinde çok sayıda şekil bulunursa birbirlerini çok farklı şekilde etkileyebilirler. Dikkat: Shape tween ne kadar karmaşıksa, kullanıcının bilgisayarında o kadar işlemci gücü harcanacaktır. Ziyaretçilerinizi zor duruma sokmak istemezsiniz değil mi?

Not: Shape tween’ler sadece ham vektör grafiklere uygulanabilir (seçildiklerinde bir çarpı işareti görülür). Bir bitmap resmin şeklini başka bir bitmap resme dönüştürmek için farklı yazılımlar gerekir.
Tween’in uygulanması üzerinde kontrolünüz çok az olduğu için shape tween yaparken beklenmedik durumlarla karşılaşmak anormal sayılmaz. Bir şeklin tween başından sonuna kadar gideceği yol tüm ekranı dolaşabilir. Şekil değişimini kontrol etmenize yardımcı olmak için Flash 8’de şekil izleri bulunmaktadır. Bu sayede anahtar kareler arasında bir noktanın geleceği pozisyonları belirleyebilirsiniz (başlangıç şeklindeki bir nokta sırasıyla belirlediğiniz izi takip ederek son şekildeki yerini alır). Her şekil izinin bir harfi vardır. Dolayısıyla, bir tween başında şekil izinde “a” harfi varsa, tween sonunda o nokta oradaki “a” harfine gelecektir.

Örneğin, köpek şeklini alması gereken bir kedi şeklimiz olsun. Kedinin kulağını temsil eden ve kulak ucunda “a” harfi olan üçgen biçimli şekil izini ve karşılık gelen izi de köpeğin kulağına eklediğinizde, kedinin kulağı direkt olarak köpeğin kulağına gidecek ve gereksiz yere uzun bir yol izlemeyecektir. Ancak, şekil izlerinin sayısı arttıkça durum kötüleşir ve bu nedenle fazla kullanmanızı tavsiye etmiyoruz. Şekil izlerini eklemek için shape tween açıkken Modify > Shape > Add Shape Hint komutunu verebilirsiniz.

İpucu: Şekil izlerinin doğru çalışması için en az dört tane kullanın ve karışık olarak dağıtmak yerine saat yönünde a, b, c, d sırasıyla yerleştirin.

Shape tween yaparken şekil izleri dışında iki karıştırma seçeneği mevcuttur: Distributive (dağınık) ve Angular (köşeli). İlki biraz düzensiz görünen daha yumuşak bir geçiş sağlarken, ikincisini sadece düz çizgi ve köşeli şekillerde kullanabilirsiniz.

Şimdiki uygulamamızda Web sitemizin sol üst köşesindeki kitap logosuna sayfa çevirme efekti ekleyeceğiz. Hâlâ bookstore9.fla dosyası ile beraberiz.

1. Stage’de mcLogo klibi içindeki mcPageTurn’ü bulun. mcPageTurn’e çift tıklayarak klibi sembol düzenleme modunda açın ve en az %800 yakınlaştırın.

Dördüncü dersimizde hazırladığımız tek çizgiden oluşan klip sayfa çevirme animasyonu içindi. Sayfa çevirme animasyonu iki bölümden oluşur. İlk bölüm için bu uygulamamızda bir shape tween hazırlayacağız.

2. Layer 1’in adını animation olarak değiştirin. 10. kareye bir anahtar kare ekleyin ve yeni anahtar karenin içeriğini düzenlemeye başlayın.

Katman adını değiştirip anahtar kare ekledikten sonra, 10. kareyi düzenlemeye başlayabilirsiniz. 10. karede basit bir çizgi bulunmaktadır. Selection aracını seçin ve zemine tıklayarak çizginin seçili olmadığından emin olun. Fareyle çizginin üzerinde geldiğinizde sağ altta aşağıdaki gibi kavisli bir çizgi görmelisiniz:

Çizgiyi sürükleyerek bükülmesini sağlayın. Aşağıdaki şekli elde edene kadar devam edin:

Çizginin üst ucuna gelin, imleç okun yanında bir köşe şeklini alacaktır. Çizginin ucunu tutup çekerek aşağıdaki şekli elde edin.

3. Properties denetçisinden shape tween ekleyin ve animasyonu test edin.

1. kareyi seçin ve Properties denetçisini açın. Tween listesinden shape’i seçin. animation katmanını kapsayan yeşil ok o karelere shape tween eklendiğini gösterecektir.

Oynatım kafasını kaydırarak logoya eklenen animasyonu izleyin. Çizginin alt ucu kitabın sırtıdır ve sabit kalmalıdır. Çevirme animasyonu bir sonraki uygulamamızda tamamlanacaktır.

4. Shape tween hazır olduğunda ana menüden File > Save ile dokümanınızda yapmış olduğunuz değişiklikleri kaydedin.

Sıradaki uygulamamızda shape tween arkasına kare kare animasyon ekleyerek çevrilen sayfa animasyonunu tamamlayacağız.

folklorcu08 · 5 Şub 2010

Kare Kare Animasyon Hazırlama

Küçükken okulda canınız sıkılınca defterinizin kenarına sayfaları çevirdikçe değişen şekiller çizmişsinizdir. Defterin yapraklarını hızla (ve sessizce) çevirince çizgi film gibi görünen bu şekil matematikten zayıf almanıza neden olmuşsa da (çünkü dersi dinlemiyordunuz), ilk kare-kare animasyonunuz olması açısından önemlidir.

Tahmin edebileceğiniz gibi, bu türde animasyonları hazırlamak hem çok zamanınızı alacak hem de dosya büyüklüğü nispeten daha büyük olacaktır. Fakat bu yöntem Flash 8 araçlarınız içinde oldukça önemli bir yere sahip olmalıdır çünkü bu sayede tween’lere göre daha karmaşık efekt ve animasyonlar hazırlanabilir. Tween eğlencelidir fakat her şeyi onunla yapamazsınız.

Kare-kare animasyonlar, her karede resmin farklı olması gereken karmaşık animasyon dizileri için çok uygundur (yüz ifadeleri ya da yürüyüş gibi). Zayıf yönü ise, genelde her karede resim değiştiği için Flash’ın bunların her birini dışarı SWF dosyasına kaydetmesi ve bunun da dosya boyutunu artırmasıdır.

İpucu: Animasyonları elle çiziyorsanız, kalemli bir tablet (Wacom gibi) kullanmak işinize yarayabilir. Tabletiniz destekliyorsa Flash kalem basıncı ve eğim gibi özellikleri kullanabilir.

Şimdiki uygulamamızda önceki uygulamada başladığımız sayfa çevirme animasyonunu tamamlayacağız.

1. bookstore9.fla dosyasında mcPageTurn klibini açın (önceki uygulamada oluşturduğunuz shape tween).

1 ve 10. kareler arasında bir shape tween bulunuyor, animasyonumuzun ilk yarısı budur. İkinci bölüme gereken detay seviyesini yakalamak için kare-kare animasyon yapacağız. Animasyonu başka bir shape tween kullanarak da tamamlayabilirsiniz fakat yapacağımız şekilde harekete daha hâkim olabileceksiniz. Tabii öğrenmenize de katkısı olacak.

2. Shape tween bitimine yeni bir anahtar kare ekleyin ve onion skinning’i açın.

Onion Skin Outlines düğmesine basarak onion skinning’i açın. Bu size son derece yardımı olacak bir araçtır. Bu araç sayesinde sadece çalıştığınız kareyi değil, bir önceki ve bir sonraki kareleri de görebilirsiniz. Böylece çizimlerinizi tam yerine oturtabilir ve yumuşak bir animasyon elde edebilirsiniz. Üzerinde çalıştığınız kare tam renkliyken (onion skinning yokmuş gibi), komşu kareler hafif soluk ya da ana hatlarıyla görünecektir.

Shape tween’i izleyen boş kareye (kare 11) tıklayın ve F6’ya basarak yeni bir anahtar kare ekleyin. Önceki karenin içeriği yeni anahtar kareye kopyalanacaktır, şimdi bunu modifiye edeceksiniz. Onion skin işaretlerini sürükleyerek daha fazla kare görebilirsiniz.

3. Yeni anahtar karenin içeriğini değiştirin.

Önceki uygulamamızda, bir çizgiyi bükerek sayfa dönüyormuş gibi bir görüntü elde ettik. Bu çalışmada da her karede sayfayı daha ileri taşıyacak ve uzunluğunu biraz değiştireceğiz. Bu esnada kitabın sırtı sabit kalacak.

Sayfa çevirme animasyonu için her anahtar karede grafik biraz değişmelidir. 2. adımda oluşturduğunuz anahtar kareyi seçin ve Stage’de çizgiyi seçimden çıkarın. Fareyi çizginin üst kısmına getirin ve imleç değiştiğinde çizginin ucunu kaydırarak çizginin bükülmesini sağlayın. Şimdi karemiz bir soldakinden farklı oldu.

4. Yeni anahtar kareler ekleyin ve sayfa kitabın kapağına ulaşana dek grafiği değiştirin.

Kare 11’deki değişiklikleri tamamladığınızda kare 12’yi seçin ve F6 ile yeni bir anahtar kare ekleyin. 11. karenin içeriği 12’ye kopyalanacaktır. Kare 11’de yaptığınız gibi çizginin üst kısmını daha sağa ***ürün. Gerekirse sayfayı bükün, bunun için kıvrık çizgi imleci görünecek şekilde çizgiyi ortasından tutun ve sayfayı bükün. Fakat değişikliklerin çoğu çizginin (sayfanın) üst kısmını oynatarak yapılabilir. Sayfanın alt kısmının oynamadığından emin olun. Çizginin sadece üst ve orta kısımlarıyla oynayın.

Onion skin özelliği ile komşu kareleri görebildiğiniz için, düzenleme sırasında animasyonun nasıl gittiği konusunda iyi biri fikir sahibi olabilirsiniz. Oynatım kafasını Timeline’da gezdirerek de animasyonunuzu kontrol edebilirsiniz.

İpucu: Çizginin alt ucuna dokunmayın. Bunu yaparsanız, sayfa kitabın içinde hareket ediyor gibi görünecek ve kitaptan bağımsız hale gelecektir!

Animasyon tamamlanana dek gerektiği kadar anahtar kare ekleyin. Sona yaklaşırken sayfanın ucunu biraz dışarı kaydırarak uzun görünmesini sağlamanız gerekebilir.

Sayfa kitabın ön kapağına vardığında animasyon bitmiştir. Bunun için 9-10 kare gerekebilir.

İpucu: Sayfaya fade out ekleyerek animasyonun daha güzel görünmesini
sağlayabilirsiniz. Bunun için bu çalışmada oluşturduğunuz her anahtar karede çizginin şeffaflığını (alfa) değiştirmelisiniz. Color Mixer panelindeki Alpha çubuğunu kullanarak bunu yapabilirsiniz. İlk kareyi seçin ve Alpha çubuğunu %90’a getirin. Son sayfada %10 civarı olacak şekilde her kareyi ayarlayın.

5. Sayfa çevrimleri arasına duraklama eklemek için animasyonun sonuna birkaç kare ekleyin.

Kare 85’i seçin ve F5’e basarak bir kare ekleyin, böylece animasyon duraklayacaktır. Unutmayın, bu bir klip olduğu için Stage’de sürekli tekrar edecektir (ActionScript’le aksi belirtilmezse). Yani sayfa sürekli çevrilecek ve arada kısa bir duraklama olacaktır.

6. File > Save As ile dosyanızı kaydedin.

Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönün. Dosyanızı kaydedin ve kapatın. Bir sonraki derse kadar bu dosyayla işimiz kalmadı.

folklorcu08 · 5 Şub 2010

Bir Yol Boyunca Animasyon Oluşturmak

Daha önce bir motion tween uyguladığınızda sembolünüz bir noktadan diğerine düz bir çizgi üzerinde gidiyordu. Bu çoğu iş için yeterlidir fakat bazen de animasyonun dalgalı çizgi gibi daha karmaşık bir yol izlemesini isteyebilirsiniz (sarhoş bir arı animasyonu yaptığınızı düşünün). Bunu motion guide katmanında bir motion guide (hareket kılavuzu) kullanarak çok çabuk ve kolay bir şekilde halledebilirsiniz. Bu özel katmanda Pencil, Pen ya da Line araçlarıyla çizgiyi çizebilir ve motion guide altındaki katmandan bir sembolü bu çizginin iki ucundan birine iliştirebilirsiniz. Bu yolun motion guide katmanında olması gerekir, burada yaptığınız çizimler Flash dosyası tamamlandığında görünmeyecektir. Hareket kılavuzları ile nesneleri çember, kare, düz çizgi, eğri ve çizebildiğiniz her türlü yol üzerinde hareketlendirebilirsiniz (şekliniz bir kenar çizgisi yani bir stroke olduğu sürece). Bu son uygulamamızda, 2. derste hazırladığınız map.fla dosyasında birtakım değişiklikler yapacağız. Hareket kılavuzu kullanarak küçük bir sembolü harita üzerinde gezdireceğiz.
1. mapStarter.fla dosyasını açın ve onu sabit diskinizdeki TechBookstore klasörüne kaydedin.

Bu dosyanın ikinci dersimizde çalıştığımız dosyaya benzediğini göreceksiniz. Tek fark bu yeni dosyanın kütüphanedeki iki grafiği kullanıyor olması. Tüm katmanlar ve konumlamalar aynı. Uygulamanın sonunda dosyayı map.fla adıyla kaydedeceğiz. Böyle bu dosya ikinci derste oluşturduğumuz dosyanın yerini alacak.

2. map katmanını seçin ve car adlı yeni bir katman ekleyin. Kütüphaneyi açın ve grafik klasöründe grCar ve grTree’yi bulun. grCar’ı car katmanına, grTree’yi de map katmanına sürükleyin.

Kütüphanedeki grCar sembolünü animasyonumuz için kullanacağız. grTree sembolü Stage’de statik bir grafik olacak. İşe başlamadan önce map katmanının kilidini açın.

grCar’ı Stage’in solundaki Brannan Street’e yerleştirin. Ağacı haritanın sağındaki Macromedia Park’ın sağ alt köşesine koyun. Aşağıdaki şekilden faydalanabilirsiniz.

3. Yeni bir motion guide katmanı oluşturun ve Stage’de bir yol çizin.

map katmanının kilitli olduğundan emin olun. car katmanını seçin ve Insert New Layer düğmesinin yanındaki Add Motion Guide düğmesine tıklayın. car katmanı otomatik olarak içeri alınır ve hareket kılavuzu uygulanır. Bu aynı 2. derste gördüğümüz maske katmanı gibidir. Yeni katmana otomatik olarak Guide: car adı verilir ve car katmanının üzerinde yer alır.

Pencil aracını seçin ve Merge Drawing modelini kullandığınızdan emin olun. Hareket kılavuzu çizmek için Object Drawing modelini kullanamazsınız çünkü teknik olarak grafik gruplanmış olur ve çizdiğiniz yol sembolünüz tarafından kullanılamaz. Tools panelinin Options bölümünden Smooth seçeneğini de seçin.

Smooth seçeneği ile fazla kırıklı olmayan çizgiler çizebilirsiniz ama isterseniz yolunuza birkaç “tümsek” eklemenize de izin verir. Artık arabamız cetvel gibi bir çizgide gitmek zorunda değil! Eğer yolunuzun çok akıcı olduğunu düşünüyorsanız, Smooth yerine Ink seçeneğini seçin ve yolu baştan çizin. Böylece bir ölçüye kadar yumuşatma olsa da kenar çizgileriniz hiç değiştirilmez.
İpucu: Çizimden önce diğer katmanları kilitleyerek kazara onlara çizim yapılmasını önleyin.

Yeni Guide: car katmanı üzerine Pencil aracı ile bir yol çizin. Yol Stage’in solundaki Brannan Street’ten sağdaki ağacın yanına gidecek. Arabanın ağaca “çarpmasını” istediğimizden yolu ağacın gövdesinde bitirin. Yolunuz caddeyi takip etmeli ve “We Are Here” yıldızından dönerek yolun sonundaki ağaca yönelmeli. Yola birkaç kıvrım ve tümsek ekleyin. Yol ağaca ulaştığında çizgiyi aşağıdaki şekildeki gibi yukarı bükün.

Çizim bitince motion guide katmanını (Guide: car) kilitleyin.

4. car katmanında kare 70’e bir anahtar kare ekleyin. motion guide, map star ve map katmanlarında da kare 70’e kareler ekleyin. grCar’ı yolun her iki ucuna kenetleyin.

car katmanını seçin ve 70’teki boş kareyi seçip F6 tuşuna basarak yeni bir anahtar kare ekleyin. Sonra map katmanında 70. kareyi seçin ve F5’e basarak bir kare ekleyin. Aynı adımı motion guide ve map star katmanları için tekrarlayın.

Tools panelinden Selection aracını seçin ve Snap to Objects’in açık olduğundan emin olun. car katmanında 1. karede grCar’ı tutarak Stage’in soluna, yolun bitimine sürükleyin. Nesneyi merkezinden tutarak taşımanız daha kolay olabilir.

car katmanında kare 70’e tıklayın ve grCar’ı ortasındaki kayıt noktasından tutarak yolun sonuna iliştirin.

5. car katmanında 1. kareyi seçin ve Properties denetçisinden bir motion tween ekleyin.

car katmanında kare 1’i seçin ve Properties denetçisini açın. Properties denetçisindeki Tween listesinden Motion’ı seçin. Katmandaki kareler seçildiğinde, Snap kutusu seçili ve Orient to path seçilmemiş olsun. car katmanı mor renk alacak ve motion tween’i gösteren ok animasyon karelerini
belirtecektir.

Not: Properties denetçisinde hareket kılavuzları ve tween’leri ilgilendiren üç seçenek bulunmaktadır: Orient to path, Sync ve Snap. Orient to path ile nesnenin yolun istikametine göre yön değiştirmesi sağlanır. Nesne yoldaki kıvrıma göre döner. Sync ile kopyanın animasyonu ana Timeline’a senkronize edilir. Snap ile de nesneyi kayıt noktasından tutup hareket kılavuzu yoluna ekleyebilirsiniz.

İpucu: Araba kılavuza doğru şekilde kenetlenmezse, başlangıç noktasından hareketlenip düz bir çizgi izleyerek bitiş noktasına gidecektir. Bu durumda arabanın kılavuza hem başlangıç hem de bitiş anahtar karelerinde doğru şekilde iliştirildiğinden emin olun.

6. Animasyonun sonuna Ease değeri ekleyerek arabanın tween sırasında hızlanmasını sağlayın.

Animasyonun ilk karesini seçin ve Properties denetçisini açın. Ease kutusuna -100 değerini girin, böylece Flash Player’da animasyon oynatılırken iki anahtar kare arasında arabanın hızlanmasını sağlarsınız. Control > Test Movie’yi seçerek animasyonu izleyin. Animasyon bu aşamada sürekli tekrar edecektir.

7. Timeline üzerinde gezinerek animasyonu izleyin ve sonra motion tween üzerinde bir değişiklik yapın.

Oynatım kafasını tıklayıp hareket ettirerek çizmiş olduğunuz yol boyunca motion tween’i görebilirsiniz. Eğer araba yolu izlemiyorsa arabanın, motion guide katmanında oluşturduğunuz çizginin her iki ucuna da iliştirildiğinden emin olun.

Hareket yolunun arabanın çarpacağı ağacın yanında istediğiniz gibi olmadığını ve arabanın ağaca çarpmadığını göreceksiniz. İstediğimiz sonucu almak için arabayı döndürmemiz gerekiyor. car katmanında iken, Timeline üzerinde 65 no’lu kare civarında arabanın dönmeye başlayabileceği uygun bir nokta bulun ve F6 ile yeni bir anahtar kare ekleyin. burası animasyonun yeni bölümünün başlayacağı yer olacak.

Animasyonun sonunda 70 no’lu kareyi seçin ve ardından Tools panelinden Free Transform aracını seçin. grCar etrafında tutacaklar belirir. Fareyi grCar’ın sağ üst köşesine getirin ve döndürme imlecinin belirmesini sağlayın.

Arabayı döndürmek için grCar’ın köşesine tıklayın ve araba ağaca doğru yönelene dek sürükleyin. İşiniz bittiğinde Timeline üzerinde oynatım kafasını hareket ettirerek animasyonun son halini izleyin

8. actions adlı yeni bir katmanda en son kareye bir stop eylemi ekleyin.

Animasyonu bir SWF dosyası olarak izlerseniz sürekli tekrar ettiğini göreceksiniz. Bunu engellemek ve animasyonu durdurmak için son kareye bir stop eylemi eklemeniz gerekir.

map star katmanını seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana çift tıklayın ve actions adını verin. 70 no’lu kareye (veya animasyonunuzdaki son kareye) tıklayın ve F6 ile yeni bir anahtar kare ekleyin. Yeni anahtar kareyi seçin ve Actions panelini açın. Script Assist hâlâ açıksa Script Assist düğmesine basarak onu kapatın. Script paneline aşağıdaki ActionScript kodunu yazın:

stop();

İşiniz bittiğinde Ctrl+Enter (veya Mac’lerde Command+Enter) ile animasyonunuzu test ortamında izleyin.

9. Dosyanızı map.fla olarak kaydedin.

Dosyanızı map.fla adıyla kaydettiğinizde bu kayıt ikinci derste oluşturduğumuz dosyanın yerini alacaktır. Dosyanızı kaydedin ve kapatın.

Bu derste şunları öğrendiniz:

• Kare kare animasyonlar, motion tween’ler ve shape tween’ler arasındaki farkları öğrendik.
• Bir klibe motion tween ekledik.
• Alfa değerini zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween uyguladık.
• Parlaklığı zamana bağlı olarak değiştirmek için bir sembol kopyası efektine motion tween uyguladık.
• Sayfa çevirme animasyonu için bir shape tween uyguladık.
• Bir kare kare animasyon oluşturma çalışması yaptık.
• Merge Drawing Model ile çizilmiş vektörel bir yol boyunca bir sembolü hareket ettirdik.
• Bir animasyonun sürekli tekrarlanmasını önlemek için bir stop() eylemi kullandık.

folklorcu08 · 5 Şub 2010

Macromedia Flash 8 (Ders 6)

6 Temel Etkileşim Eklemek

Şu ana kadar Tech Bookstore projesi için metinler eklediniz, semboller kullandınız, animasyonlar hazırladınız ve kendi grafiklerinizi oluşturdunuz. Bütün bunları Timeline’larda görüntülediniz. Günümüzde bu öğeler milyonlarca Web kullanıcısı tarafından çok fazla takdir görmeyebilir. Peki neden? Çünkü insanlar Web uygulamanızın bir şeyler yapmasını ister. Çeşitli grafikler, animasyonlar ve metinler görüntülemek gerçekten çok güzel; ama son kullanıcı bunlarla bir şekilde etkileşime giremiyorsa, bu öğeler insanların site içinde gezmesi hatta tekrar geri gelmesi için gerçekten yeterli olmayacaktır. Artık sadece can sıkıcı “bilgi görüntüleme” görevini posterlere ve müze küratörlerine bırakalım ve çalışmamıza biraz etkileşim özellikleri ekleyelim.

Bu derste ciddi bir sıçrama yapacak ve bazı öğelerin kullanıcılarınızla etkileşime girmesini sağlayacaksınız. Kendi ActionScript kodlarınızı yazacağınızı düşünerek paniğe kapılmadan önce derin bir nefes alın, sevdiğiniz mekânlardan birine gidin ve beyninizin sol tarafına çok fazla yüklenmeyeceğinizi düşünerek biraz sakinleşin. Bu bölümde ActionScript kodları eklemek için Flash’la birlikte gelen davranışları (behaviors) kullanacak, davranışların gücünün yetmediği yerlerde de Script Assist’i kullanacaksınız. Script Assist, ekleyeceğiniz ActionScript kodlarının, bu çok güçlü ve aslında hiç de korkunç olmayan script diliyle ilgili her şeyi öğrenmenize gerek kalmadan düzgün bir yapıda olmasını sağlayacaktır. Şimdi kendinizi daha iyi hissediyor musunuz? Güzel, o zaman başlayalım.

Bu derste şunları öğreneceksiniz:

• Behaviors panelini kullanarak çeşitli davranışlar ekleyeceğiz.
• Belgenize ekledikten sonra davranışlar üzerinde değişiklikler yapacağız.
• Sunucudan bir JPEG resmi yükleyeceğiz.
• Actions paneli hakkında bilgi edineceğiz.
• Bir nesneye ActionScript kodu eklemek için Script Assist’i kullanacağız.
• Script Assist’i kullanarak Timeline’a bir eylem (action) ekleyeceğiz.
• ActionScript kullanarak bir movie clip Timeline’ını kontrol edeceğiz.
• Script gezginini kullanacağız.

folklorcu08 · 5 Şub 2010

Flash Belgelerini Etkileşimli Hale Getirmek

Etkileşim çok geniş kapsamlı bir kavramdır. En temel seviyede düşündüğümüzde bir şeyleri etkileşimli hale getirmek, insanların sizin oluşturduğunuz uygulamada gerçekleşen olaylara, bir düğmeye tıklayarak, bir şeyler yazarak ya da herhangi bir şekilde cevap verebilmesini sağlamaktır. Kullanıcılar uygulamanızda birtakım işlem yapar (bir öğeyi başka bir öğenin üzerine sürüklemek ya da klavyedeki bir tuşa basmak gibi) ve uygulamanız onların bu yaptığına cevap verir. Tabii ki etkileşimle ilgili çok daha karmaşık kavramlar da mevcuttur, ama çoğu durumda uygulamanıza kullanıcıların uygulama içinde yaptıkları işlemlere cevap verme yönünde talimat vermeniz fazlasıyla yeterlidir.

Macromedia Flash’ta etkileşim özellikleri oluşturmak için en çok kullanılan öğeler düğmeler, movie clip’ler ve metin alanlarıdır. Flash’taki düğmeler, kullanıcı tarafından tetiklenen fare ve klavye olaylarına cevap verirler. Movie clip’ler, kullanıcı tarafından başlatılan etkileşim olaylarına ya da sunucu tipindeki etkileşim olaylarına (veri yükleme gibi) cevap verebilirler. Metin alanları kullanıcılardan bilgi almak, kullanıcılara belirli bilgileri göstermek veya bunların her ikisi için de kullanılabilir. Amaç ne olursa olsun, sizin oluşturacağınız hemen her Flash 8 uygulaması bu öğelerin üçünü de kullanacaktır.

Etkileşim özellikleri eklemek için ActionScript kodu yazmanız gerekmez. İster inanın, ister inanmayın, ama gerçekten de müthiş bir programcı olmanız gerekmiyor. Bilginiz ne kadar fazlaysa, gelişmiş uygulamalar yaratmak için o kadar donanımlı olacağınız aşikâr; bununla birlikte Flash 8’in, etkileşim özellikleri eklerken işinizi çok kolaylaştıran (ama öncesinde ciddi bir planlama safhası gerekir) bazı yerleşik araçlara sahip olduğunu da aklınızdan çıkarmayın. Bu yerleşik özellikler, belirli öğelere hemen ekleyebileceğiniz hazır ActionScript kodları olan davranışlar ve Script Assist şeklinde karşınıza çıkmaktadır. Script Assist, ActionScript panelinde bulunan ve ActionScript konusunda her şeyi öğrenmeye gerek kalmadan daha karmaşık eylemler eklerken kullanılan bir özelliğidir.

folklorcu08 · 5 Şub 2010

Davranışlar

Davranışlar (behaviors), bir panelin içinde organize edilen ve ActionScript’in en çok kullanılan bazı uygulamalarından oluşan bir koleksiyondur. Panelin adı Behaviors panelidir. Garip, ama gerçek. Çok doğru bir şekilde adlandırılan bu panelde; Web sayfalarını açan, movie clip Timeline’larını kontrol eden, JPEG resimlerini ya da SWF dosyalarını movie clip örneklerine yükleyen ve sesleri kontrol eden çeşitli davranışlar yer alır. Bu davranışlar doğrudan panel kullanılarak eklenir ve panel, davranışın tetiklenmesini sağlayan olayı değiştirmenize imkân sağlar. ActionScript konusunda uzmanlaştıktan sonra kendi davranışlarınızı oluşturabilir ve bu panele ekleyebilirsiniz. Ama bu aşamaya gelene kadar üçüncü parti şirketlerin ve Flash kullanıcılarının oluşturduğu davranışları indirip yükleyebilirsiniz. Bahsettiğimiz bu üçüncü parti davranışlarla ilgili en iyi kaynaklardan biri Adobe Macromedia Exchange’dir.

İki yere davranış ekleyebilirsiniz: bir Timeline’daki a ’daki anahtar karelere ya da doğrudan movie clip, düğme ya da bileşen örneklerine (bundan sonra hepsine müşterek olarak nesne diyeceğiz). Kendisine davranış eklemek üzere bir nesne (bir nesne ya da Timeline’da bir anahtar kare) seçtiğinizde, Behaviors paneli, seçilen nesneyi gösterecektir. Böylece ilgili davranışı yanlışlıkla başka bir nesneye eklemeniz engellenmiş olur. Ekleyebileceğiniz davranışlar, seçilen öğeye bağlı olarak farklılık gösterir.

İpucu: B ehaviors panelindeki davranışların birçoğu, geliştirici ya da tasarımcının onları doğrudan nesne örneklerine ekleyeceği düşünülerek oluşturulmuştur. Başlangıç için bu yaklaşım doğru görünse de, bütün ActionScript kodlarını Timeline’daki bir anahtar kareye eklemek genelde daha iyi bir yaklaşım olarak kabul edilir; çünkü bu yöntemde, hata yapmanız durumunda sorunlu öğeleri bulmak ve sorunu gidermek daha kolaydır. Bu yaklaşımla ilgili ayrıntılı bilgiyi 9. Ders’te inceleyeceğiz.

Şimdi göreceğimiz birkaç uygulamada uygulamanıza temel etkileşim özellikleri eklemek için davranışların nasıl kullanıldığı anlatılmaktadır. Önce, sabit diskinizden Flash uygulamanıza anında bir JPEG resmi yükleyen bir davranış, sonra da movie clip Timeline’larını kontrol eden bazı davranışlar ekleyeceksiniz.

folklorcu08 · 5 Şub 2010

Davranışları Kullanarak Bir JPEG Resmi Yüklemek

Bir resmin dinamik olarak yüklenmesi, Flash’ta anlamanız gereken en önemli özelliklerden biridir; çünkü ürün kataloglarını, fotoğraf galerilerini, vb. öğeleri görüntülemek için resimlerden sıkça faydalanılır. Resim boyutları genelde büyük olduğundan, fotoğraf galerilerinizi ya da ürün kataloglarınızı görüntülemek için ihtiyaç duyduğunuz resimler Flash uygulamanızın büyümesine sebep olacaktır. Buna bir de resimlerin sıralanmasında çoğunlukla kullanıcıyla girilen birtakım etkileşimlerden faydalanıldığını düşünecek olursak (bazı resimler görüntülenirken diğerlerinin görüntülenmemesi gibi), sonuçta uygulamanızın boyutu ciddi şekilde büyüyebilir. Resimleri harici olarak saklamak ve sadece gerektiğinde yüklemek bu sorunu çözecektir. Ayrıca bu yaklaşım, Flash dosyanızın, kolayca güncellenebilen ve değişen ihtiyaçlara göre yeniden şekillendirilebilen bir yapıda olmasını sağlar, çünkü görsel içeriğinizin büyük bir kısmı harici olarak depolanmaktadır. Flash 8’in hem Basic, hem de Professional sürümü JPEG, PNG ve GIF formatındaki resimleri çalışma zamanında (yani SWF tarayıcıya yüklendiğinde ve çalıştığında) dinamik olarak yükleyebilir.

İpucu: Flash 8 Basic, standart JPEG’lerin dışında, ilerlemeli (progressive) JPEG’leri de yükleme becerisine sahiptir. İlerlemeli JPEG’ler, yüklenirken görüntülenmeye başlar. Bu, son kullanıcıya uygulamada neyle karşılaşacağı konusunda ipucu verir.

ActionScript kullanarak bir JPEG, GIF ya da PNG resmi yüklerken, görüntülenmesi için resmi bir şeyin içine yerleştirmeniz gerekir. Resmi ana belgenin Timeline’ına yükleyemezsiniz, çünkü Timeline yeni yüklenen resim yüzünden diğer tüm içeriği atmaya çalışır. Bu işlemi yapsanız bile resim Flash belgesinin sol üst köşesinde görüntülenir, ancak konumu değiştirilemez; çünkü resimler ActionScript nesneleri değildir ve bu yüzden kontrol edilemez. Bu kural dinlemeyen resimleri kontrol edebilmeniz için onları ayrı ayrı movie clip örneklerine yüklemeniz gerekir. Bu arada, bahsettiğimiz bu örnekleri adlandırmanız gerektiğini de unutmayın. Movie clip’ler, düğmeler, bileşenler ve görünmeyen ActionScript nesneleri (bu nesneleri Ders 9’da kullanacaksınız) örnek isimleri alabilirler. Bu isimler, yukarıda bahsettiğimiz nesnelerin kontrol edilmesinde büyük önem taşırlar.

İpucu: JPEG, GIF ya da PNG resimlerini Loader bileşenlerine de yükleyebilirsiniz. Ders 9’da bazı PNG resimlerini Loader bileşen örneklerine yükleyeceksiniz.

Bu uygulamada göreceğiniz gibi, Flash belgenize yerleştirdiğiniz movie clip ve düğme sembollerinin hedef olarak kullanılması için örnek isimlerine ihtiyaç vardır. Herhangi bir amaçla bir ActionScript kodu eklediğinizde Flash’ın hangi nesneyi yöneteceğini anlaması için, movie clip örneklerine isim vermeniz gerekir. Örneklere isim vermek için Properties denetçisindeki <Instance Name> alanını kullanabilir ya da davranışları eklerken bir örnek ismi verebilirsiniz. Bununla birlikte, örneklere Properties denetçisinde isim vermenin daha iyi bir yaklaşım olduğunu hatırlatalım. Çünkü davranış eklerken bir öğeye örnek ismi vermek, ancak başlangıçta adlandırmayı unutmanız durumunda kullanabileceğiniz bir yaklaşımdır. Aşağıdaki uygulamada, bir movie clip’e bir resim dosyası yükleyebilmek için bu movie clip’e bir örnek ismi vereceksiniz.

1.bookstore9.fla dosyasını açın ve bookstore10.fla adıyla dosyanın yeni bir sürümünü kaydedin.

Dosyanın yeni sürümünü sabit diskinizdeki TechBookstore klasörüne kaydedin.

2.Macromedia Press logosunu TechBookstore klasörünüze kopyalayın.

mmpresslogo.jpg dosyasını, burada gereken bir davranışı yüklemek için kullanacaksınız. Resmi TechBookstore klasörünüzün kök dizinine yerleştirmeniz bu uygulamada işinizi kolaylaştıracaktır. Ama gerçek uygulamalarda, dizin yapınız geliştirme işlemlerini yaptığınız bilgisayardan Web sunucunuza doğru
olacak şekilde yapılandırıldıysa bu dosyayı istediğiniz klasöre yerleştirebilirsiniz.

3. Pages katman klasöründeki home katmanını seçin ve Stage’de yeni bir dikdörtgen oluşturun. Dikdörtgeni bir movie clip’e dönüştürün ve ona bir örnek ismi verin.

Timeline’daki pages katman klasöründe yer alan home katmanını seçin. Oynatım kafasının 1 numaralı karede olduğundan emin olun. Tools panelinden Rectangle aracını seçin ve dış hat rengini No Color ve dolgu rengini de siyah (#000000) olarak ayarlayın. Stage’de bir dikdörtgen çizin ve Properties denetçisini kullanarak bunun boyutlarını, genişliği 128 piksel, yüksekliği de 96 piksel olacak şekilde ayarlayın.

ve Properties denetçisini kullanarak bunun boyutlarını, genişliği 128 piksel, yüksekliği de 96 piksel olacak şekilde ayarlayın. Oluşturduğunuz dikdörtgene çift tıklayın ve F8 tuşuna basarak bunu bir sembole dönüştürün. Sembolü mcMMPressLogo olarak adlandırın ve ardından Movie clip radyo düğmesine tıklayın. Sembolün kayıt noktasını (registration point) sol üst köşe olarak ayarlayın (ızgarada sol üst siyah kareye tıklayın) ve OK düğmesine tıklayın. Properties denetçisini kullanarak yeni movie clip’e mmPressLogo örnek ismini verin. Movie clip’i aşağıdaki resimde gösterildiği şekilde Stage’in sağ alt köşesine yakın bir konuma taşıyın.

İpucu: Movie clip’in örnek ismi ile kütüphane ismi aynı şey değildir. Örnek ismi, ActionScript’in Stage’deki ’deki bir nesneye göndermede bulunabilmek için ihtiyaç duyduğu bir öğedir. Kütüphane ismini ise, belgenizin bileşenlerini organize etmek için kullanırsınız.

Bu movie clip’i, SWF dosyası çalışırken dinamik olarak yükleyeceğiniz resim için bir içerik nesnesi (container) olarak kullanacaksınız. Siyah resim, mmpresslogo.jpg resmi ile değiştirilecektir, dolayısıyla burada asıl içerik için bir yer tutucu görevi üstlenecektir. Böylece onun nereye yerleştirileceğini bilirsiniz.

4. Timeline’a actions isminde yeni bir katman ekleyin ve her sayfa için anahtar kareler ekleyin.

labels katmanını seçin ve Insert New Layer düğmesine tıklayın. Yeni katmana actions ismini verin. Bu katman, Timeline’daki katman yığınında en üst sırada yer alacaktır. Katmanı oluşturduktan ve buna bir isim verdikten sonra, her bir etiketin üzerindeki kareyi seçin ve sonra da aşağıdaki resimde de gördüğünüz gibi F6 tuşuna basarak yeni bir anahtar kare ekleyin. Sayfaların her birine ait eylemler buraya yerleştirilecektir. Şu an için sadece home sayfasındaki eylemlerle ilgileniyoruz.

5. mmpresslogo.jpg resmini SWF dosyasına yüklemek için, Add (+) menüsünü kullanarak bir davranış ekleyin.

Davranışları iki yere ekleyebilirsiniz: Bir anahtar kareye ya da örneğin kendisine.
Ekleyebileceğiniz davranışlar seçtiğiniz öğeye bağlıdır. Örneğin bazı davranışlar karelere eklenemez, dolayısıyla bunları kullanamazsınız. Diğer davranışlar sadece düğmelerle ilişkilendirilebilir. Add Behavior (+) menüsü düğmesine basıp açılır menüleri ve kayar menüleri kullanarak neleri ekleyebileceğinizi görebilirsiniz.

Davranışlar kategorilere göre düzenlenmiştir. Add Behavior düğmesine bastığınızda bu kategorilerin görüntülendiği seçeneklerden oluşan bir menüyle karşılaşırsınız. Harici bir resim yüklemek, movie clip’lerin farklı bir özelliğidir; dolayısıyla, kullanmak istediğiniz davranış Movieclip kategorisinde yer alır.

actions katmanındaki 1 numaralı kareyi seçin ve Behaviors panelini açın. Bu panel açık değilse, Window (Pencere) > Behaviors (Davranışlar) komutunu seçin. Kare 1 seçili durumdayken, Behaviors panelindeki Add Behavior düğmesine tıklayın ve Add Behavior menüsünden Movieclip > Load Graphic’i seçin.

Load Graphic iletişim kutusunda, üstteki metin alanına assets/mmpresslogo.jpg yazın ve kullanılabilir durumdaki örnekleri listeleyen iki metin alanının altında bulunan ağaç yapısından mcMMPressLogo movie clip’ini seçin. Relative radyo düğmesine tıklayın. Bu düğme, SWF dosyasının dışındaki resmin hedeflenmesi için kullanılan adres türünü belirtir. Sonuçta hangi resmin yükleneceğini ve yüklediğinizde bu resmin nereye gideceğini belirtiyorsunuz. Bunun dışında şu anda ince ayrıntılar konusunda endişelenmenize gerek yok. Örneklerin mutlak (absolute) ve göreceli (relative) olarak adreslenmesi konusunu Ders 9’da göreceğiz. OK düğmesine tekrar
tıklayarak ana Stage’e geri dönün.

6. Belgede yaptığınız değişiklikleri kaydedin.

Bu aşamada bu işlevselliği etkin bir biçimde test edemezsiniz, çünkü Timeline’ın ilk karenin ötesine gitmesini engelleyen ActionScript kodunu eklemediniz. FLA dosyasını bu dersin ilerleyen bölümlerinde test edecek ve Behaviors panelinin sizin yerinize eklediği ActionScript kodunu inceleme fırsatını bulacaksınız.
Devam etmeden önce File > Save komutunu seçerek değişiklikleri kaydedin.

folklorcu08 · 5 Şub 2010

Bir Web Sayfasını Açmak için Davranışları Kullanmak

Önceki uygulamada bir davranış kullanarak harici bir JPEG resmini yüklemeyi öğrendiniz, ancak bu işlemin başarıyla sonuçlanıp sonuçlanmadığını henüz kontrol etmediniz. Bu uygulamada, bir Web sayfasını yeni bir tarayıcı penceresinde açmak için Flash’taki davranışlardan birini nasıl kullanacağınızı göreceksiniz. Burada davranışı Timeline’daki bir kare yerine doğrudan bir movie clip örneğine ekleyeceksiniz. Buna bazen nesne eylemi de denir.

Bu uygulamada da bookstore10.fla dosyasını kullanacaksınız.

1. Ana Stage’de olduğunuzdan emin olun, sonra da home katmanındaki 1 numaralı kareyi seçin

Selection aracını kullanarak, bir önceki uygulamada oluşturduğunuz mcMMPressLogo örneğine tıklayın. actions katmanındaki 1 numaralı karede, bu örneğe göndermede bulunan bir eylem yer alır. Fakat siz bir movie clip’in kendisine bir eylem yerleştireceksiniz ve kullanıcı buna tıkladığında bir Web sayfasının çalıştırılmasını sağlayacaksınız.

2. Behaviors panelini kullanarak, doğrudan mcMMPressLogo movie clip’ine bir davranış ekleyin.

mcMMPressLogo seçili durumdayken, Behaviors panelindeki Add Behavior düğmesine tıklayın ve menüden Web > Go to Web Page (Web Sayfasına Git) komutunu seçin. Go to URL (URL’e Git) iletişim kutusu açılacak ve burada hedef seçenekleri görüntülenecektir: _self, _parent, _blank ya da _top. Bu seçeneklerin her biri HTML’deki karşılığının aynısıdır. Buradaki değeri _blank olarak değiştirin.

3. Go to URL iletişim kutusunda davranış için hedef URL’i ayarlayın

Hedef URL’i yeniden yönlendirilecek şekilde ayarlamak için, URL metin alanındaki varsayılan değerin yerine istediğiniz hedefi yazmanız yeterlidir. Bu uygulama için hedef URL’i http://www.peachpit.com olarak ayarlayın. URL’i yazdıktan sonra OK düğmesine tıklayarak Stage’e geri dönün.

Not: Başka bir alan adında yer alan bir Web sayfasına gitmeye çalışıyorsanız, Go to URL iletişim kutusunda URL’in başına http:// eklemeyi unutmayın. Yeni tarayıcılar hepimizi tembelleştirdi, çünkü artık bir Web sayfasına gitmek için adres penceresine http:// yazmamız gerekmiyor. Eğer başka bir sayfaya giden bir bağlantı tanımlayacaksanız, kullanılacak protokolü kesinlikle belirtmeniz gerekir. Burada Hypertext Transfer protokolünü kullanacaksınız.

4. Behaviors panelini kullanarak davranışın tetikleyici olayını değiştirin.

Stage’deki mcMMPressLogo örneğine tıklayın. Behaviors panelini açıp bazı ayarları değiştirerek davranışın ne zaman çalışacağını belirleyebilirsiniz. Behaviors panelini açın ve Add Behavior ile Delete Behavior düğmelerinin altındaki Event ve Action listelerine bakın.

Go to Web Page eyleminin solundaki alanda On Release yazısına tıklarsanız, açılır listede bu davranışı tetikleyen olayların listesini görebilirsiniz. Varsayılan olarak burada On Release olayı (kullanıcının imleç mcMMPressLogo movie clip’inin üzerindeyken farenin tuşuna basıp bırakacağı anlamına gelir) seçili durumdadır. Açılır listeden yeni bir değer seçebilir ve kullanıcı imleci örneğin üzerine getirdiğinde ya da imleç örnekten tamamen uzaklaştırıldığında bunun tetiklenmesini sağlayabilirsiniz. Olayın belirli bir tuşa basıldığında tetiklenmesini sağlamanız da mümkündür.

Olayı bir Key Press olayıyla değiştirin. Flash, Peachpit Web sitesini açmak için, bir fare tıklamasının yerine kullanılmak üzere sizden klavyedeki bir tuşa basmanızı isteyecektir. Olayı tekrar On Release olarak değiştirin, çünkü bu, çoğu kişinin alışık olduğu etkileşim türüdür.

5. Behaviors panelini kullanarak davranışın özelliklerini değiştirin. Sonra da OK
düğmesine tıklayarak bu değişiklikleri uygulayın.

Davranışı bir kareye ya da nesneye uyguladığınızda kimi zaman davranışın bazı özelliklerini değiştirmeniz ya da elle girdiğiniz parametrelerdeki yazım hatalarını düzeltmeniz gerekebilir. Neyse ki düzeltmek ya da değişiklik yapmak üzere Behaviors panelini kullanarak istediğiniz zaman davranışa geri dönebilirsiniz.

Davranışta değişiklik yapmak ve kullanıcıyı farklı bir URL’e yönlendirmek istiyorsanız Behaviors panelindeki Actions sütununda ilgili davranışa çift tıklayarak üzerinde değişiklik yapabilirsiniz. Siz bu işlemi yaptığınızda URL’i ayarlamak için kullandığınız iletişim kutusu açılacaktır. İstediğiniz değişiklikleri yapın ve OK düğmesine tıklayın.

İpucu: Davranışın eklediği ActionScript kodunu doğrudan Actions panelinde de düzenleyebilirsiniz. Şu ana kadar Actions panelini fazla kullanmadınız, ama henüz temel ActionScript konularını öğrenmediğiniz için bunu yapmanızı pek tavsiye etmem. Ancak konuyla ilgili biraz daha bilgi sahibi olduktan sonra bir davranışın çalışma şeklini değiştirmek için bunun bazı durumlarda kullanılabilecek en akıllıca alternatif olduğunu belirtmeliyim.

folklorcu08 · 5 Şub 2010

Bileşen Kullanarak Harici Bir SWF Dosyası Yüklemek

Önceki uygulamada Flash 8 Basic’in çalışma zamanında SWF dosyalarına JPEG (ya da tercihe göre GIF veya PNG) dosyalarını anında (ya da dinamik olarak) yükleme özelliğine sahip olduğunu gördünüz. Flash, JPEG resimleri yüklemeye ek olarak movie clip’lere başka SWF dosyalarını da anında yükleyebilir. Normal kullanım şeklinde bir Flash uygulaması, kullanıcı talep ettiğinde yüklenen birçok SWF dosyasına bölünür ve her SWF dosyası özel bir içerik kategorisine sahiptir. Resimlerin hariç olarak tutulması gibi, Flash uygulamasını gerektiğinde yüklenen küçük modüllere bölmek, uygulama dosyanızın boyutunu kontrol edebilmenizi sağlar ve içeriğin güncelleştirilmesini kolaylaştırır. Daha küçük içerik modülleri kullandığınızda, bütün uygulama yerine sadece değişen SWF dosyasını güncellersiniz. JPEG resimleri gibi, içerik amaçlı kullanılan bu daha küçük SWF dosyaları movie clip’lere yüklenebilir. Bununla birlikte, Flash 8’de bu süreci kolaylaştıran (çünkü bileşeni belgenize, gidip harici SWF dosyasını ya da JPEG resmini almasını söyleyen bir davranış ya da ActionScript kodu eklemeksizin dâhil edebilirsiniz) özel bir yerleşik bileşen bulunur. Bu bileşen Loader bileşeni olarak bilinir.

Loader bileşeni, SWF dosyalarını ya da JPEG, PNG veya GIF resimlerini bir SWF dosyasına herhangi bir ActionScript kodu yazmanıza ya da herhangi bir davranış eklemenize gerek kalmadan kolayca gömmenizi sağlar. Yapmanız gereken tek şey, Loader bileşeninin bir örneğini Stage’in üzerine sürüklemek ve bileşen Stage’in üzerine geldikten sonra Properties denetçisindeki contentPath isimli özel bir parametrede değişiklik yapmaktır. Bu parametre, bileşene, yüklenecek harici verinin nereden alınacağını söyler. Bileşen SWF dosyasında tümüyle oluşturulduktan sonra kendisine bir şey söylenmeden gidip harici içeriği alacak ve sonra da onu görüntüleyecektir. Tabii ki bu sürecin gerçekleştiği zamanla ilgili olarak ince ayar yapmanız gereken durumlarda harici içeriği alma işlemini ActionScript kullanarak kontrol edebilirsiniz.

Not: Loader bileşeni, harici SWF dosyalarını ya da JPEG resimlerini yükleme işlemini kolaylaştırır. Bununla birlikte bir dezavantajı vardır: Dosya boyutunu 25 KB kadar büyütür. Bu bileşeni, uygulamanızın boyutunu daha fazla büyütmeden tekrar tekrar istediğiniz kadar kullanabilirsiniz.

Bu uygulamada, Ders 2’de oluşturduğunuz SWF dosyasını Loader bileşenine nasıl yükleyeceğinizi öğreneceksiniz. Yani Ders 2’de oluşturduğunuz map.swf dosyasını SWF dosyasına yüklemek için Loader bileşenini kullanacaksınız.

1. map katmanının 60 numaralı karesini seçin ve Stage’e bir Loader bileşeni ekleyin.

Ana Timeline’da map katmanının (map etiketine sahip katman) 60 numaralı karesini seçin. Bu kare bir anahtar karedir ve daha önceki uygulamalarda oluşturduğunuz ve Stage’e yerleştirilmiş bulunan iki metin alanı (adres ve harita başlığı için) içermektedir.

Components panelini açın, User Interface kategorisini genişletin ve Loader bileşenini bulun. Bileşenin bir örneğini Stage’in üzerine sürükleyin.

2. Loader bileşenini seçin, sonra da Properties denetçisinde bulunan bileşen
parametrelerine bakın.

Stage’de Loader bileşeninin örneğini seçin ve Properties denetçisini açın. Properties denetçisinde Parameters (Parametreler) sekmesine geçin. Tün bileşenler, değiştirilebilir parametrelere sahiptir (bu konunun jargonuna alışık olmayanlar için bunları, üzerinde değişiklik yapılabilen öğeler olarak tanımlayabiliriz). Loader bileşeninin böyle üç parametresi vardır:

• autoLoad: Bu parametre, içeriğin otomatik olarak mı yükleneceğini, yoksa yüklenmesi için içeriğin ActionScript koduyla açık olarak tetiklenmesinin mi gerektiğini belirler. true değeri içeriğin otomatik olarak yükleneceğini; false değeri de yüklenebilmesi için onu tetiklemeniz gerektiğini belirtir.

• contentPath: Bu metin alanına girilen metin, bileşene yüklemek istediğiniz SWF dosyasının ya da JPEG, GIF veya PNG resminin yolunu ayarlar.

• scaleContent: Bu parametre, içeriğin bileşenin büyüklüğüne uyacak şekilde ölçekleneceğini (true) ya da bileşenin içeriğin büyüklüğüne göre ölçekleneceğini (false) belirtir.

İpucu: B ileşenleri kontrol etmek ve bunlarda değişiklik yapmak için Component Inspector (Bileşen Denetçisi) panelini de kullanabilirsiniz. Window > Development Panels > Component Inspector panel komutunu seçerek Component Inspector panelini açın. Değiştirebileceğiniz şeyler, kullandığınız bileşene bağlıdır; bununla birlikte, değiştirilebilir tüm seçenekler Parameters sekmesinde listelenmiştir. Bindings ve Schema sekmeleri bu derslerde ele
alınmamıştır.

3. Properties denetçisinde, Loader bileşeninin örneğiyle ilgili parametreleri ayarlayın.

Bu bileşene map.swf dosyasını hemen yükleyeceğiniz için, autoLoad parametresini true olarak ayarlayın ve sonra da contentPath metin alanına map.swf yazın.

Not: map.swf dosyasını bookstore10.fla dosyasının bulunduğu klasöre değil de başka bir klasöre kaydettiyseniz, dosya yolunu değiştirmeniz, göreceli bir URL kullanmanız gerekir. Yani dosyaları daha düzenli tutmak amacıyla belirli dosyaları başka dosyaların içinde saklayabilirsiniz.

Stage’de bileşenin büyüklüğünün harici SWF dosyasının büyüklüğüne uyacak şekilde değiştirilmesini sağlamak için, scaleContent parametresini false olarak ayarlayın.

4. Bileşenimap.fla dosyasıyla aynı büyüklükte olacak şekilde ayarlayın, sonra da bunun Stage’deki konumunu ayarlayın.

Bileşen seçili durumdayken Properties denetçisini açın. W (genişlik) değerini 500, H (yükseklik) değerini de 355 olarak ayarlayın.

Aşağıdaki resimde de gördüğünüz gibi, haritanın How to find us metin alanının altına, kitap mağazasının sloganının ve sayfa başlığının da sağ kenarına gelecek şekilde hizalanması gerekir.

Bileşeni Stage’de hizalamanıza yardımcı olacak kılavuzlar muhtemelen hala görünür durumdadır. Açılır menülerin haritanın üzerine gelmemesi için bunların altında yeterince boşluk bırakmayı unutmayın. Haritanın, dikey cetvelin 140 koordinatında bulunan yatay kılavuza hizalı ya da (tercihen) bunun altında olduğundan emin olun.

Not: Kendi oluşturduğunuz yerleşim düzeninde “How to find us” metin alanını başka bir konuma taşımanız gerekebilir.

5. Dosyada yaptığınız değişiklikleri kaydedin.

Bir sonraki kısımda FLA dosyasına başka ActionScript kodları eklemeye başlayacaksınız. Ayrıca bundan sonraki derslerde Loader bileşenlerinin başka örneklerini de kullanacaksınız. Şu anda TechBookstore Web sitesinin harita kısmına yüklenen içeriği göremezsiniz. Fakat siz Ders 9’da dosyayı test ederken içerik görünecektir. Eğer görünmezse contentPath parametrenizi kontrol etmeniz ve doğru ayarlandığından emin olmanız gerekir.

folklorcu08 · 5 Şub 2010

Script Assist’i Tanıyalım

ActionScript’in daha karmaşık özelliklerine geçmek üzere davranışların güvenli dünyasını terk etmek üzeresiniz. Ama paniğe kapılmayın, çünkü sizi doğrudan bu dilin derin sularına bırakmayacağız. Şimdiki birkaç uygulamada Script Assist’le yine karşılaşacaksınız ve Script Assist ActionScript dünyasında sizin kılavuzunuz ve yol arkadaşınız olacak; en azından ActionScript’e, ’e, onunla tek başınıza çalışacak kadar hâkim olana kadar. Script Assist’i, ActionScript script dilini öğrenirken kullanılan yardımcı tekerlekler gibi düşünebilirsiniz.

Ders 9’da ActionScript’in genel yapısını ve kullanımını öğrenecek, ayrıca Script Assist’i kullanmadan kendi script’lerinizi yazacaksınız. Bu bölümde, ilerlemeden önce bu dille ilgili birkaç noktayı kavramanız gerekiyor. Böylece herhangi bir anda Actions paneline göz attığınızda neler olup bittiğini daha iyi anlayabileceksiniz.

Bazı öğelerin neden bir örnek ismine sahip olmaları gerektiğini öğrenmiştiniz. Örnek isimleri (instence names), sembollere ya da ActionScript nesnelerine ne yapmaları gerektiğini söylerken kullandığınız birer yardımcı araçtır. Örnek isimleri, normal hayatta insan isimleriyle aynı amaca hizmet eder. Bununla birlikte, ActionScript uygulamalarında isimleri bizim seçmemiz gerekir, çünkü iki örnek aynı isme sahip olamaz. Bir oda dolusu çocukla birlikteyken çocuklardan birinden aspirin getirmesini istediğinizi düşünelim. Böyle bir durumda “Çocuk, bana bir aspirin getir!” demezsiniz, çünkü çocuklar içlerinden hangisini kast ettiğinizi bilemez. Onlara isimleriyle hitap etmeniz gerekir. “Suat, bana bir aspirin kap gel!”. Odada Suat adında başka bir çocuk olmadığı sürece Suat, (eğer keyfi yerindeyse) bir oda dolusu ******n arasında kafanız şişmiş durumdayken acilen içmeniz gereken aspirini kapıp getirecektir. Uzun lafın kısası, ne yapmaları gerektiğini söylemek için sembolleri ve ActionScript nesnelerini (Sound yani ses nesneleri gibi) adlandırırız.

Adlandırılmış olsun ya da olmasın tüm semboller hayatlarını Timeline’ın üzerinde bir yerde sürdürür. Onlara ne yapmaları gerektiğini söylemek için bir yol kullanmanız, yani ActionScript’e ilgili öğenin nerede olduğunu söylemeniz gerekir. Yollarla çalışırken özel bir yazım şekli olan “Noktalı Yazım”ı kullanırsınız. Diğer bir deyişle, bir öğeyi hedeflerken “/” karakterlerinin yerine “.” karakterlerini kullanırsınız. Örneğin, diyelim ki oturma odasında oturuyorsunuz ve eşinizden (eşinizin o anda bulunduğu) üst kattaki yatak odasında yer alan masanın üstündeki gözlüğünüzü isteyeceksiniz. Gözlüğünüzü istemek için eşinize seslendiğinizde bu durum noktalı yazımla şu şekilde gösterilebilir:

this.ustkat.yatakodasi.masa.es.gozluguAl();

Burada this, başlangıç noktanızı yani oturma odasını gösterir, ustkat, yatakodasi ve masa da yerleri gösterir. es, belirli işlemleri gerçekleştirebilen bir nesnedir (eğer üşengeç biri değilse) ve gozluguAl() ondan gerçekleştirmesini istediğiniz eylemdir. gozluguAl() aynı zamanda metot olarak da adlandırılır. Metotlar, nesnelerin gerçekleştirdiği işlemlerdir. Bu konuyla ilgili ayrıntıları Ders 9’da göreceğiz. Eğer eşiniz yoksa gözlüğünüzü kendiniz almanız gerekecektir. Bu da noktalı yazımla şöyle gösterilebilir:

this.gozluguAl(ustkat.yatakodasi.masa.gozluk);

Bu ikinci örnekte ustkat.yatakodasi.masa.gozluk , gözlüğünüzün bulunduğu yeri gösterir. this anahtar sözcüğü ise burada sizi göstermektedir.

Anahtar sözcükler kler (keywords), Flash tarafından ayrılmış ve ActionScript’te özel bir anlama sahip özel sözcüklerdir. Actions panelinde, bir uygulamanın nasıl çalışacağını kontrol etmek için kendi ActionScript kodlarınızı eklerken belirli sözcüklerinin renk değiştirdiğini göreceksiniz. Sözcüklerin yeni rengi, anahtar sözcüğün ne için kullanıldığına bağlıdır. Bununla birlikte, herhangi bir anda herhangi bir şey renk değiştirdiğinde, bunun sebebi, Flash’ın
bu öğeyi özel görevler için ayırmış olmasıdır. Bu yüzden sembollere ya da ActionScript nesnelerine Flash tarafından ayrılan isimleri (getTimer gibi) vermemeye dikkat etmeniz gerekir. Şimdilik endişelenmenize gerek yok. Bu derste ekleyeceğiniz ActionScript kodları Script Assist kullanılarak eklenecek ve düğmelerle movie clip Timeline’larını kontrol etmek için kullanılacaktır.

ActionScript, Ders 9’da göreceğimiz daha pek çok özelliğe sahiptir. Script Assist ile eklediğiniz ActionScript kodları önceki iki uygulamada eklediğiniz özellikleri test etmenizi sağlayacak ve ayrıca kitabın geri kalanında kullanılan etkileşim özellikleri için bir temel oluşturacaktır.

folklorcu08 · 5 Şub 2010

Timeline’ı Kontrol Etmek İçin Eylemleri Kullanmak

ActionScript, Flash’taki birçok özelliği kontrol etmek için kullanılabilir. ActionScript, ana Flash belgesinin Timeline’ını ya da movie clip sembollerinin Timeline’ının kontrol ederken sıkça kullanılır. Bu uygulamada ana belgenin Timeline’ını kontrol etmek için Actions araç kutusuyla bir eylem ekleyeceksiniz. Bu uygulamada da bookstore10.fla dosyasıyla çalışacaksınız.

1. actions katmanını seçin, sonra da Actions panelini açın.

Yerleşim düzeninde Actions paneli açık değilse, Window > Actions panel komutunu seçerek bu paneli açın. Actions panelini Windows’ta F9, Mac OS X’te Option+F9 klavye kısayollarını kullanarak da açabilirsiniz. Actions panelini genişletin. Bu dersteki ilk uygulamada, Tech Bookstore sitesindeki her bir sayfa için anahtar kareler oluşturmuştunuz. Bu uygulamada da her sayfaya bir stop(); eylemi ekleyeceksiniz.

2. Kare 1’den başlayarak actions katmanındaki anahtar karelerin her birini seçin ve Actions panelini kullanarak stop(); eylemini her bir anahtar kareye ekleyin.

Eğer Actions panelinde Script Assist hala açık durumdaysa Script Assist düğmesine basarak kapatın. stop(); eyleminin çalışması için özel parametrelere ihtiyaç duyulmadığından, bu eylemi Actions araç kutusunu kullanarak ekleyeceksiniz.

Actions panelindeki bütün ActionScript kodlarının en üstünde boş bir satır oluşturun. İmlecinizi boş satıra yerleştirin ve Actions araç kutusunda Global Functions > Timeline Control kategorisini genişletin. Timeline’ınıza stop(); eylemini eklemek için stop’a çift tıklayın. actions katmanında bir sonraki anahtar kareyi seçin ve buna da aynı eylemi ekleyin. stop(); eylemi, bu anahtar karelerden her birine ulaştığında oynatım kafasının durmasına sebep olacaktır. Bu, Tech Bookstore projesinin gezinti özelliklerinden biridir ve bunu Ders 9 ve Ders 10’da gerçekleştireceğiz.

3. FLA dosyasını test edin, sonra da dosyada yapmış olduğunuz değişiklikleri kaydedin.

Ctrl+Enter (ya da Mac’te Command+Enter) tuşlarına basarak belgeyi test ortamında test edin. Kitap mağazasını daha önce test etmiş olsaydınız, SWF dosyası bütün sayfaları oynatacaktı. Bunu şimdi test ettiğinizde, belgenin 1 numaralı karede (home sayfası) durduğunu göreceksiniz. Menü düğmelerini çalışır hale getirdiğiniz ve sitenin sayfalarında dolaşabildiğiniz zaman, gittiğiniz her yeni sayfa, oynatım kafası kareye ulaştığında duracaktır. Ayrıca test ortamındayken SWF dosyasına yüklenen JPEG resmine de dikkat edin. Artık JPEG resmi, daha önceki uygulamada oluşturduğunuz movie clip yer tutucusuna dinamik olarak yüklenecektir.

Not: Henüz sayfaların her birini dolaşamıyorsunuz. Ders 9’da düğmelerin ve menü sisteminin çalışmasını sağlayan ActionScript kodunu ekledikten sonra bunu yapabileceksiniz.

FLA dosyasında yaptığınız değişiklikleri File > Save komutunu seçerek kaydedin.

folklorcu08 · 5 Şub 2010

Bir Giriş Sayfası Düğmesi Oluşturmak

Bu uygulamada, SWF dosyasının Tech Bookstore’un home karesine geri dönmesini sağlayacak olan bir düğme oluşturacaksınız. Ders 4’te oluşturduğunuz görünmez düğmeyi çoğaltacak ve büyük bir logonun üzerine yerleştirerek bir hot spot (aktif nokta) gibi çalışmasını sağlayacaksınız. Görünmez düğmeyi çoğaltmanız gerekiyor, çünkü düğmede, Merge Drawing modunda yamayacağınız büyük bir delik bulunuyor. Orijinal görünmez düğmeyi değiştirmek istemiyoruz, çünkü değiştirdiğimiz takdirde düzgün çalışmayacaktır. Dolayısıyla yapılacak işleri minimuma indirmek için sembolü çoğaltmanız ve yeni kopyayı düzenlemeniz gerekiyor.

1. buttons katmanının üzerine yeni bir katman ekleyin ve bu katmanı home button olarak adlandırın.

buttons katmanını seçin ve bunun üzerine home button isimli yeni bir katman ekleyin. Bu yeni düğmeyi ayrı bir katmana yerleştireceksiniz, çünkü böylece buttons katmanındaki diğer düğmeleri gizlemenize gerek kalmadan bunu kilitleyebilecek ve gizleyebileceksiniz. Bu gerçekten de sadece organizasyon amacıyla yapılan bir işlem ve başka bir anlamı yok.

2. Kütüphanede btnInvisible düğme sembolünü sağ tıklayın (ya da Ctrl tuşunu basılı tutarak tıklayın) ve bağlam menüsünden Duplicate (Çoğalt) komutunu seçin. Yeni düğmeyi btnHotspot olarak adlandırın.

Bir sembolü çoğaltmanın geliştirme sürecini hızlandırmada harika bir yöntem olduğunu Ders 4’ten hatırlayacaksınız. Buradaki örnekte görünmez bir düğme için ihtiyaç duyduğunuz her şey mevcut. Tek yapmanız gereken, düğmedeki delikten kurtulmak. Sembolü çoğaltırken ve yeniden adlandırırken, sembol düzenleme moduna geçmek için sembole çift tıklayın.

3. Sembol düzenleme modunda, düğmedeki deliğin üzerinde bulunan mevcut dolguyla aynı renkte bir dikdörtgen çizin. Merge Drawing modunda olduğunuzdan emin olun.

Sembol düzenleme modunda düğmenizin Hit karesini seçin. Rectangle aracını seçin ve dış hat rengini No Color olarak ayarlayın. Dolgu rengi (Fill Color) kontrolüne tıklayın ve damlalığı şu anda Hit karesinde bulunan dikdörtgenin üzerine getirin. Tıklayarak rengi ayarlayın. Merge Drawing modunda olduğunuzdan emin olun ve grafikteki deliği yamamaya yetecek büyüklükte küçük bir dikdörtgen çizin. Dolgu renkleri birbiriyle eşleştiği için Merge Drawing modu grafiğin tamamını büyük bir dikdörtgene çevirecektir. Ana belgenin Timeline’ına dönmek için Scene 1’e tıklayın.

4. btnHotspot’un bir örneğini home button katmanının üzerine sürükleyin ve bir örnek ismi atayın.

Kütüphaneden btnHotspot’un bir örneğini sürükleyin ve mcLogo’nun üzerine bırakın. Free Transform aracını kullanarak düğmeyi, hem sol üst köşedeki logoya sığacak, hem de “Tech Bookstore” metnini içine alacak şekilde yeniden boyutlandırın.

Tools panelinde Selection aracı vurgulanmış durumdayken, yeni oluşturduğunuz görünmez düğmeye tıklayın ve Properties denetçisini, içinde <Instance Name> yazan metin alanına bir örnek ismi yazabilecek kadar genişletin.

<Instance Name> metin alanının içine tıklayın ve btnHome yazın. Artık ActionScript’i düğmenin Stage’deki bu örneğine göndermede bulunmak için kullanabilir ve düğmeye tıklandığında (bu aynı zamanda olay olarak da adlandırılır) SWF dosyasını belirli bir şekilde yönetmek için kullanılan kodu çalıştırabilirsiniz. Burada, düğmeye tıklandığında kitap mağazasının giriş (home) sayfasına döneceksiniz.

5. Script Assist’i kullanarak, oynatım kafasını home etiketli kareye döndürecek olan ActionScript kodunu ekleyin.

Burada ActionScript kodunu Script Assist’i kullanarak doğrudan düğmeye ekleyeceksiniz. btnHome’u seçin ve F9 tuşunu ya da Option+F9 tuşlarını (Mac) kullanarak Actions panelini açın. Script Assist düğmesine basarak Script Assist moduna geçin. Actions araç kutusunda Global Functions > Timeline Control komutunu seçin ve goto’yu çift tıklayın. Bu işlemi yaptığınızda varsayılan olarak düğmenize bir gotoAndPlay eylemi eklenecektir.

Go To And Stop radyo düğmesini seçerek eylemi değiştirin. Type alanındaki seçeneği Frame Label olarak değiştirin ve Frame açılır listesinden “home”u seçin. Script Assist tüm kare etiketlerinizi otomatik olarak “görür”, bu da eylemi ayarlama işlemini kolaylaştırır. İşiniz bittikten sonra Actions panelinizin görüntüsü aşağıdaki şekildeki gibi olacaktır.

İpucu: Mümkün olan yerlerde kare numaralarının yerine kare etiketlerini kullanmak isteyeceksiniz. FLA dosyalarınız büyüdüğünde ve karmaşık bir hale gelmeye başladığında hangi kare numarasında hangi içeriğin olduğunu hatırlamak daha da zorlaşacaktır. Ayrıca, içeriği taşımanız durumunda kare etiketini yeni konuma taşımak yerine ActionScript kodunuzu değiştirmeniz gerekecektir. Kare etiketlerini kullanmak işinizi kolaylaştırır ve karelere basit bir numara vermek yerine mantıklı isimler vermenizi sağlar.

6. home button katmanını kilitleyin ve gizleyin, sonra da kütüphaneyi temizleyin.

Timeline’da katman isminin yanında bulunan kilit simgesine ve göz simgesine tıklayarak katmanı kilitleyin ve gizleyin. Bu işlem aynı zamanda yanlışlıkla bu katmana başka örnekler eklemenizi ya da görünmez düğmeyi taşımanızı önleyecektir. Ayrıca, Tech Bookstore projesi üzerinde çalışırken görünmez düğmenin mavi rengini gizlemenizi de sağlayacaktır.

Kütüphaneyi mümkün olduğu kadar temiz tutmanız iyi olur. Kütüphanedeki btnHotspot sembolünü buttons klasörüne sürükleyin, mcMMPressLogo sembolünü movie clips klasörüne taşıyın, Loader bileşenini de components klasörüne taşıyın.

7. FLA dosyasında yaptığınız değişiklikleri kaydedin.

Her zaman olduğu gibi, bir sonraki uygulamaya geçmeden önce File > Save komutunu kullanarak yaptığınız değişiklikleri kaydedin.

folklorcu08 · 5 Şub 2010

El Şeklindeki İmleci Yok Etmek

Bir SWF dosyasında imleci bir düğmenin ya da hotspot’un üzerine getirdiğinizde, el şeklinde bir imleç belirir. Genellikle bu imlecin görünmesini istersiniz, çünkü bu imleç SWF dosyasının hangi kısmının etkileşimli ve tıklanabilir durumda olduğunu gösterir. Bununla birlikte, bir açılır listenin görünüp görünmeyeceğini kontrol eden görünmez düğmeler kullandığınızda, bunların üzerinde el şeklinde bir imlecin görünmesini genellikle istemezsiniz, çünkü el şeklindeki imleç, kullanıcılara, tıkladıklarında bir şeyler olacağını belirten bir geri bildirim mekanizmasıdır. Böyle bir durumda kullanıcılar parmakları morarıncaya kadar tıklasalar bile hiçbir şey olmayacaktır. Bu yüzden şimdiki uygulamada, menülerin etrafındaki görünmez düğmede, el şeklindeki imleci yok edeceksiniz. Böylece kullanıcılar orada bir düğme olduğunu anlayamayacak. Bu uygulamada da yine bookstore10.fla dosyasını kullanacaksınız.

1. El şeklindeki imlecin nasıl çalıştığını görmek için FLA dosyasını test edin.

Ctrl+Enter (ya da Mac’te Command+Enter) tuşlarına basarak FLA dosyasını test edin. İmleci bu sitenin üst kısmındaki alanın üzerine getirdiğinizde el şeklinde bir imleç belirir. Bu imleç dikkati dağıtabilir ve düğmenin Web sitesinin ziyaretçileri için aslında görünmez olmadığı anlamına gelir. Ziyaretçilerin bu düğmeyi bilmemesi gerektiği için, düğmeyi ziyaretçiler fare imlecini bu alanın üzerine getirdiğinde el şeklindeki imleç görünmeyecek şekilde değiştirmeniz gerekir.

2. btnInvisible sembol örneğini seçin. Görünmeyen düğmeye bir örnek ismi verin.

Önce görünmez katman düğmesini seçin ve kilidini açın. Eğer gizlenmiş durumdaysa düğmeyi görünür hale getirin. home düğmesine ait katmanla düğme katmanlarınızın gizlenmiş durumda olduklarından emin olun.

Selection aracını kullanarak Stage’de ’de bulunan ve açılır gezinti menülerinin görüntülenmesini sağlayan görünmez düğme örneğini seçin. Düğmeye btnReturnMenus örnek ismini verin.

3. btnReturnMenus üzerine gelindiğinde fare imlecini gizleyecek ActionScript kodunu ekleyin

actions katmanındaki 1 numaralı kareyi seçin. ActionScript kodunu bu kareye ekleyeceksiniz. Eğer açık değilse Actions panelini açın ve Script Assist’i geçici olarak kapatın. Belirli bir kareye bir davranış ekledikten sonra Script Assist’i kullanmak eğlenceli olabilir. Burada Script Assist’i kapatıyorsunuz, çünkü böylece imleci Actions penceresinin üst kısmına yerleştirebilecek ve Script Assist hangi kodu eklerse eklesin, bunu daha önceden mevcut olan bir şeyin ortasına falan değil de doğru yere yerleştireceğinden emin olabileceksiniz.

İmleci, Actions panelinin üst kısmındaki kendi satırında yanıp sönecek şekilde yerleştirin. Enter tuşuna basarak bir boşluk bırakmak ve imleci tekrar en üstteki konumuna yerleştirmek isteyebilirsiniz. Script Assist düğmesine basarak Script Assist’i tekrar açın.

Sağ tarafta bulunan Actions araç çubuğunda ActionScript 2.0 Classes > Movie > Button > Properties’i seçin ve useHandCursor seçeneğini çift tıklayın. Script Assist expression alanındaki not_set_yet ifadesini btnReturnMenus ile değiştirin. El şeklindeki imleci gizlemek için useHandCursor metninin sonuna = false yazın.

İşiniz bittikten sonra Actions pencerenizin görüntüsü aşağıdaki şekilde gösterildiği gibi olacaktır.

4. El şeklindeki imlecin menülerin etrafında görünmediğinden emin olmak için FLA dosyasını test edin.

FLA dosyasını test etmek için Ctrl+Enter (ya da Mac’te Command+Enter) tuşlarına basın. Bir önceki adımda eklediğiniz ActionScript kodu nedeniyle, imleci Stage’de görünmez düğmenin bulunduğu konuma getirdiğinizde el şeklindeki imleç belirmeyecektir.

5. Yaptığınız değişiklikleri kaydedin.

Dosyanızı kaydettikten sonra bir sonraki uygulamaya geçin.

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

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

folklorcu08

Kıdemli Üye

Sosyal medya sayfalarımız