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?

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

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

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

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.

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

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.


[B]3. Properties denetçisinden shape tween ekleyin ve animasyonu test edin.[/B]

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.

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

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

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.

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

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

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.

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

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.

[B]
3. Yeni anahtar karenin içeriğini değiştirin.[/B]

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

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

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 götü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.

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

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

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.

[B]6. File > Save As ile dosyanızı kaydedin.[/B]

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

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.
[B]1. mapStarter.fla dosyasını açın ve onu sabit diskinizdeki TechBookstore klasörüne kaydedin.[/B]

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.

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

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.


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

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

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

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.

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

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.

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

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

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

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.

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

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

[B]8. actions adlı yeni bir katmanda en son kareye bir stop eylemi ekleyin.[/B]

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.

[B]9. Dosyanızı map.fla olarak kaydedin.[/B]

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.


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

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

abiiii sağolasın yaaaaaaaaaaaa çoooooooooook makbule geçtiiiiiiiiiiiiiiiiiiiii sağolasın

Çok yararlı bilgiler paylaşıyorsunuz..teşekkürler...

Eyvallah

eyvallah birader

sanada eyvallah abi

kardeş emeğine bileğine sağlık kardeş sen bunları kitap yapıp direk linki versen senin için daha iyi olur kolay gelsin devamını bekliyorum

Eline sağlık,paylaşımın için teşşekkkürler.