BÖLÜM 1

GIDA MÜHENDİSLİĞİ AÇISINDAN FLASH ANİMASYONUN ÖNEMİ

Gıda sektörü ülkelerin görünmez devidir. Gıda mühendisliği; tüketici eğilimlerini gözlemleyen ve ardından uzun soluklu projeleri düzenleyen, bu projelere ait fikir yürütmeleri yapan, yorucu üretimlerde birebir yer alan, ürünlerin standart kalitede olması için gerekli tüm kontrolleri yapan ve ürünü en iyi biçimde tanıtan birimdir. Kısacası gıda mühendisliği gıda sektörünün temel yapı taşlarından biridir.

Avrupa Birliği'ne giriş sürecinde olan ülkemizde uyum çalışmaları kapsamında gıda sektöründe önemli düzenlemeler yapılmaktadır. Bu nedenle iyi bir gıda mühendisi yetiştirmek adına üniversitelerde yürütülen eğitimlerde de yeniliklere ihtiyaç vardır. Çeşitli kitaplardan ve yayınlardan yararlanmanın yanı sıra iyi bir takip yöntemi olan internetten yararlanmak öğrencilere daha cazip gelmekte ve eğitimleri daha verimli hale getirmede yararlı olmaktadır. Flash animasyon programı kullanılarak karmaşık olan birçok üretim basamağı daha kolay anlaşılır bir biçimde öğrencilere sunulabilir. Nitekim dünyanın birçok yerinde bu sistem kullanılmaktadır. Bu sistemi takip eden öğrenciler gıda üretiminde önemli yeri olan temel konuları gözle gördükleri için daha iyi anlamakta ve bu bilgileri diğer bilgilerle birleştirerek üretime farklı açılardan bakabilmektedirler.

Gıda mühendisliği sadece proje hazırlayan değil bu projelerde birebir yer alan ve çalışanları üretim hakkında bilgilendiren birimdir. Çalışanlar üretim hakkında hiçbir bilgiye sahip olmasa dahi mühendisin görevi onları eğitmektir. Bu eğitimler sırasında çeşitli dökümanlar üretim alanında bulundurulsa dahi flash animasyon programı sayesinde yapılmaması gereken yanlışlıklar çalışanlara gösterilerek daha akılda kalıcı olması sağlanabilmektedir.

Son yıllarda dünyada gıda sektöründe yürütülen modernizasyon çalışmaları teknolojiye ağırlık verilmesini gerektirmektedir. Yeni teknolojik buluşlar sadece üretim açısından değil ürünlerin tanıtılması açısından da büyük önem taşımaktadır. Bu bağlamda flash animasyon programı önemli bir yer teşkil etmektedir. Lezzetin satılması, hele yeni tatların kabul ettirilmesi zor iştir. Bu nedenle ürün öncelikle göze hitap etmelidir. Ürünlerini tanıtan firmalar, ürünlerinin üç boyutlu modellerini İnternet sayfalarına yerleştirerek bu tür bir program aracılığı ile tüketicilerin karmaşık olan veya olmayan ürünlerle etkileşim kurmasını sağlayarak özelliklerini anlamasına katkıda bulunurlar.

1

BÖLÜM 2

ANİMASYON NEDİR VE NEDEN FLASH ANİMASYON KULLANILıR ?

ANİMASYON NEDİR?

Animasyon, bir çok resim ve grafiğin senaryolar içerisinde hareketlendirilmesidir. Hareketlendirme işlemi bir kaç değişik yol ile gerçekleştirilebilir. En yaygın hareketlendirme yöntemi senaryolar arasında geçişler sağlanarak gerçekleştirilen hareketlendirmedir.

Bu hareketlendirme işlemi, çoğu animasyon programında sahneler peş peşe getirilerek oluşturulur. Örneğin uçan bir kuşa ait her hareket bir sahne içerisinde yer almakta ve animasyon farz edelim toplam on adet sahneden oluşuyorsa bu sahnelerin arda arda getirilmesi ile kanat çırpan bir kuş animasyonu oluşturulur.

Yıllar boyu grafikler (resimler) üzerinde hep bir türlü bir hareketlilik gerçekleştirilmiştir. Bu hareketlendirme mantığını, en çok çizgi film yapımcıları kullanmıştır. Aslında televizyonda izlediğimiz veya video cihazına taktığımız filmlerin genel mantığı da budur. Birbiri ardına eklenmiş milyonlarca resim ve ses montajlardan ibarettir.

Bir başka hareketlendirme mantığı, metin veya grafiklerin ekranın bir yerinden başka bir yerine hareketlendirilmesidir. Bu tür hareketlerde grafik veya metin, şekil değişikliğine uğramadan sadece konum değiştirirler. Bu işlem, özel efektlerle gerçekleştirilebilir.

FLASH NEDİR?

Flash vektörel grafiklerle animasyonlar hazırlayabileceğiniz, bu animasyonların birbirleriyle etkileşmesini sağlayabileceğiniz, veritabanları ile asp, php ve cgi gibi script dillerinin yardımıyla haberleşebileceğiniz bir web sayfası nesne geliştirme programıdır. Flash, Macromedia firmasının 1997 yılında Future Splash Animator satın alarak vektör uygulamalarının WWW üzerinde geliştirilmesi için tasarlanmış bir arayüz programıdır. Yani gerek İnternette gezinenler, gerekse de webmasterların ve grafikçilerin gözdesi olmaktadır.

Macromedia firması; yeni adıyla yani Flashın ilk sürümü olan Flash 2.0 olarak karşımıza çıktı. Daha ilk yılını tamamlamadan, 1997 yılında Macromedia Flash 3.0 geliştirdi. Hiç kimsenin onun bu kadar yaygın olacağını ummadığı programla hazırlanmış pek çok site, ziyaretçilerine cezbeci, özel, çarpıcı, ilginç ve eğlenceli bir şekilde kendilerini sunarak onların daha uzun süre sitede kalmasını sağlıyorlardı. Web sayfalarına hareket kazandıran ve yeni versiyonları ile de javayı destekleyen Flash çalışma tekniği olarak vektör grafiği kullanıyor. Bütün bunların yanında, içinde minik bir programlama dilini de barındıran Flash yazılan scriptleri derleyebiliyor. Flash animasyonlarının, çizgi filmlerinin, efektlerinin temelinde, tüm

2

ihtişamın, curcunanın altında; aslında sadece matamatiksel işlemler yer alıyor. Dört işlemden biraz farklı tabiki.

Macromedia, Flashı piyasaya sürerek tüm hevesli web tasarımcılarını bu karmaşık program komutları ve formülleri öğrenmekten kurtardı. Örneğin Autocad, Corel Draw vb. programlar da, verilen her komut bilgisayar ekranında bir vektör olarak işlenir ve oldukça karmaşıktır.

Nesneler, Web sayfalarına Flash ile yerleştirildikleri zaman, üzerlerine zoom (yakınlaştırma) yapılabilmesini de desteklemektedirler. Bu destek, resmin netliğinin zoom yapıldığında da aynı kaliteyi verebilmektedir.

Flashın başka bir özelliği de, temelde vektör olarak çalışması ve bitmap çalışmaları da desteklemesidir. Yani Flash sayesinde bir bitmap resmi vektöre çevrilebilir. Bu teknik çok gelişmese de kullanıldığında güzel sonuçlar verebilmektedir.

Grafiklerle uğraşan yeni başlayan webmasterlar, pixel tabanlı grafik ve vektörel tabanlı grafik terimlerini mutlaka duymuşlardır. Bu iki grafik tekniği hakkında daha iyi bilgi sahibi olmak için öncelikle pixelin ne olduğundan bahsetmek gerekir ki, grafiğin en küçük birimi pixeldir tanımını yapabiliriz ve bir pixel tek renkten oluşan tek bir noktadır. Örneğin bir grafiğin boyutları 100’e 100 pixel ise bu grafikde 100x100=10000 pixel vardır. Grafikteki görüntü bu herbir pixeldeki renklerin bütünüdür. .BMP, .JPG, .GIF gibi formatlı dosyalar Pixel tabanlı grafikledir.

Bu gibi grafiklerde tüm pixellerin renkleri ve sıraları kodlanır. Gerekli programlar ise bu kodları okunur ve görüntü bu şekilde ekrana gelir. Büyültüp küçültürken görüntü kaliteleri bozulur. Animasyonda kullanılmalarıda çok kötü sonuçlar verir.

Yıllar boyu grafikler (resimler) üzerinde hep bir türlü hareketlilik gerçekleştirilmiştir. Bu hareketlendirme mantığını, en çok çizgi film yapımcıları kullanmıştır. Aslında televizyonda izlediğimiz veya video cihazına taktığımız filmlerin genel mantığı da budur. Birbiri ardına eklenmiş milyonlarca resim ve ses montajlardan ibarettir. Bir başka hareketlendirme mantığı, metin veya grafiklerin ekranın bir yerinden başka bir yerine hareketlendirilmesidir. Bu tür hareketlerde grafik veya metin, şekil değişikliğine uğramadan sadece konum değiştirirler. Bu işlem, özel efektlerle gerçekleştirilebilir.

NEDEN FLASH ANİMASYON?

Flash’ı diğer animasyon programlarından öncelikli kılan üç dev özellik vardır:

3

Piyasada bir çok animasyon programı mevcut, hatta 3D animasyon üzerinde bir hayli iddalı programlar var. Bu tür programlar mevcut iken, Flash animasyonlarına neden bu kadar ilgi büyük? Bu sorunun yanıtını bir iki madde ile izah etmeye çalışalım.

Dosya Boyutu: Normal disk alanında gönül rahatlığı ile çalıştırdığımız film yada diğer animasyon unsurlarını ne yazık ki web ortamında kullanmamız imkansız. Web ortamında herhangi bir video dosyası tarayıcıya yükleninceye kadar hayli bir zaman harcanır, çoğu zamanda bilgisayarın veya tarayıcının kilitlenmesine sebep olur. Aynı tür sorunlar yüksek çözünürlükte resim dosyalarının açılmasında da yaşanmaktadır.

Flash animasyonlarının tercih sebeplerinden en önemlisi web ortamında uygun, küçük dosya boyutlarını işgal etmesidir. Burada akla şöyle bir soru gelebilir; Flash dosya boyutlarını bu denli küçültmeyi nasıl sağlıyor? Flash’ın bu denli küçük dosya boyutları ile büyük işler başarmasının sırrı, programın vektörel bir taban üzerinde çalışmasından kaynaklanmaktadır. Vektörel animasyon kavramını biraz daha genişletelim;

Bilgisayar verileri bellekte veya disk alanında saklarken veriye ait değerleri dosya içerisinde tutar. Örneğin; bir bitmap resmi disk alanında saklandığında bu resme ait her nokta (pixel), noktaların yerleri, noktalara ait renkler, dosyanın boyutunu belirmektedir. Resmin çözünürlüğü arttıkça diskteki alanda o denli artacaktır. Oysaki, vektörel animasyonda verilere ait her noktanın saklanmasına gerek yoktur. Sadece koordinat düzleminde konum ve büyüklük değerlerinin tutulması yeterli olmaktadır. Bu da, Flash animasyonlarının web ortamında hızlı çalışmasını, bulunduğu ortamda az bir alan kaplamasını sağlamıştır.

Fifo (First İn First Out-İlk Giren İlk Çıkar): Flash’ın, dosyaları için kullandığı özelliği, yazıcıya ait bir özelliğe benzetebiliriz. Bilgisayarımızdan yazıcıya gönderdiğimiz metin veya grafik dosyalarını, bilgisayar hafızaya alarak yazıcının belleğine gönderir. Eğer gönderdiğimiz belge büyük ise işlerimizi hızlandırmak için yazıcıya ait olan temel bir özelliği kullanmamız fayda sağlayacaktır. Bu özellik belgenin tümünü hafızaya almadan, parça parça göndermeden ibarettir. Bu şekilde, bellek sınırları aşılmadan işimiz eskisine oranla hızlanmış olacaktır. Yani, yüz sayfalık bir belgenin tümü hafızaya alınmadan, ilk sayfamız kağıt üzerine basılmış olacak, bu arada diğer sayfalarda yüklenmeye devam edecektir.

Flash animation, bu özelliğe benzer bir özelliği kendi dosyaları için gerçekleştirmeye başarmıştır. Bu şekilde animasyonun tümü ara belleğe yüklenmeden animasyonun ilk kısımlarını gösterimi sağlanmıştır. Dolayısıyla web sitesinde yer alan uzun bir animasyonun alttan destekli bir şekilde hızlılığı sağlanmıştır. Flash bu tür bir yükleme işlemini, genellikle film içerisinde kullanılan sesler için uygular.

4

Motio (Hareket) ve Shape (Şekil): Animasyon tekniklerini anlatırken her karede tekrarlanan resimlerden söz etmiştik. Bu yol ile, bir animasyonu hazırlamak oldukça zor ve yorucudur. Her kare için birbirine benzer farklı şekiller çizmek gerçekten beceri isteyen bir uğraştır. Oysa ki Flash animation, bir nesnenin hareketliliği için ilk ve son karelerin durumunu değerlendirir. Arada kalan diğer kareleri eş zamanlı olarak kendisi doldurur. Bu şekilde animasyonu oluşturmak tasarımcı için daha da basite indirgenmiş olacaktır.

Grafikler arasında geçiş işlemleri için de, Flash animasyonu oldukça başarılıdır. Birbirine dönüştürülecek şekillerin sadece belirtilmesi yeterlidir. Geçiş sırasında olacak değişimi, Flash otomatik olarak kendi gerçekleştirecektir. Bu şekilde arada kalan geçiş şekillerini kendisi belirleyecektir.

BÖLÜM 3

MACROMEDIA FLASH 8’IN TEMELLERİ

FLASH 8’E GİRİŞ

5

Şekil 1. Flash’ın Genel Görünümü

Macromedia Flash, Web sitelerinden PC tabanlı eğitim modüllerine kadar her şeyi üretmeye imkân veren bir tasarım ve geliştirme uygulamasıdır. Flash’ın zengin çizim araçları ve nesne yönelimli script yazım dili hayal gücüyle birleştiğinde ortaya çıkacak olan şey harikulâde arabirimlerdir. Flash ayrıca Flash Lite Player sayesinde mobil cihazlarda çalışacak uygulamaların geliştirilmesinde de kullanılabilir.

Flash esas itibarı ile iki farklı yazılım modülünden oluşur. Düzenleme ortamı adını verilen ilk kısım kendi uygulamalarınızı geliştirmek için kullanılan bölümdür. Programın ikinci kısmını teşkil eden Flash Player ise SWF dosyaları halinde dağıtılan uygulamaları yorumlar, gösterir ve çalıştırır. SWF (Small Web File – küçük Web dosyası) formatı daha çok Web tabanlı uygulamalarda kullanılsa da yetenekleri sadece bununla sınırlı değildir. Bir Flash uygulaması (SWF dosyası) kullanıcıya ister Web üzerinden isterse başka bir şekilde ulaşmış olsun, kullanıcının bunu görebilmesi için Flash Player’a ihtiyacı vardır.

Flash’ı bu denli dikkat çekici yapan nedir?

Birinci sebep Flash gayet esnek ve genişletilebilir bir tasarım aracı; Flash’ı tamamen istediğiniz şeyleri yapacak şekilde geliştirebilir veya ihtiyacınız olan eklenti (extension) bir başkası tarafından yazılmışsa bunu Macromedia Web sitesinden bulup indirebilir ve yükleyebilirsiniz.

İkinci sebep ise Flash Player’ın yaygınlığı; dünya genelinde Web erişimi olan bilgisayarların % 97’sinde yüklü durumda bulunan Flash Player küçük, hızlı, yüklenmesi ve güncellenmesi kolay, tamamen ücretsiz bir yazılımdır. Bunların haricinde, Flash’ın Fireworks ve Dreamweaver gibi diğer Macromedia yazılımlarının yanı sıra çeşitli üçüncü parti uygulamaları ile de entegre olması onun iş akışını kolaylaştıran bir başka dikkat çekici özelliğidir.

Son olarak, nesne yönelimli bir dil olan ActionScript de Flash’ın en çarpıcı yanlarından biridir. JavaScript ve Rhino ile aynı standardı paylaşan ActionScript adından da tahmin edilebileceği gibi uygulamaları harekete geçiren motordur.

FLASH 8 ÇALIŞMA ALANI

Flash 8 ilk kez açıldığında görülecek şey Start (Başlangıç) sayfasıdır. Kendisi de bir SWF dosyası olan Start sayfasında Open a Recent Item (Son Kullanılan Öğelerden Birini Aç), Create New (Yeni Oluştur) ve Create from Template (Şablon Kullanarak Oluştur) seçenekleri bulunur. Sayfanın alt kısmında ise tanışma / eğitim modüllerine linkler yer alır ve varsa Flash güncellemeleri görüntülenir.

6

Şekil 2

Şekil 3

Geliştirme ortamı olarak da adlandırılan Flash çalışma alanı, ortada bir Stage ve bunu çevreleyen bir dizi panelden meydana gelir. Her Flash dosyası bir zaman çizgisine (Timeline) bağlı olarak oynatılır. Zaman çizgisi, çalışmalarda yer alan tüm görsel öğe ve ActionScript’lerin katmanlar halinde organize edildiği yerdir. Birden fazla kare (frame) içeren bir dosya Flash Player’da oynatılırken bir oynatım kafası (playhead) bu zaman çizgisi boyunca ilerler. Kareler, bir sinema filminde olduğu gibi, zamanda belli noktalardaki pozisyonları temsil ederler ve bir araya gelerek hareketin doğmasını sağlarlar.

7

Geliştirme ortamını farklı işlevselliklere sahip çeşitli ana gruplar halinde incelemek mümkündür. Ayrıca her grup kendi içinde kitabımızın ilerleyen bölümlerinde öğreneceğiniz çok sayıda denetim aracı içerir.

Menüler: Flash’ta menüler diğer yazılımlardaki menülere çok benzer. Flash menülerinde de Save (Kaydet), Copy (Kopyala), Paste (Yapıştır) ve Help (Yardım) gibi komutlar bulunur. Bunların dışında menülerde Flash’a özgü komutlar da yer alır.

Timeline (Zaman çizgisi): SWF dosyaları, animasyon tabanlı bir programdan bekleneceği gibi, bir zaman çizgisi üzerindeki karelerden oluşur. Kareler ve anahtar kareler zaman çizgisi üzerinde sıralanırlar. Dosya (animasyon) içeriğinin farklı öğelerini taşıyan veya geçiş efektlerini içeren katmanlar da zaman çizgisi üzerinde yer alırlar. Oynatım kafası zaman çizgisi üzerinde ilerlemeye başladığında animasyon ortaya çıkar.

8

Şekil 4. Timeline’ın Genel Görünümü

Paneller: Paneller vasıtası ile Flash’ta üretilen bir uygulamanın neredeyse her şeyini kontrol edebilirsiniz. Uygulamayı ActionScript özellikleri ya da renkler eklemek, nesneleri dizmek ya da öğeleri depolamak için gerekli tüm araçlar panellerde mevcuttur. Flash’taki tüm panellere Window (Pencere) menüsünden ulaşılabilir.

Stage (Sahne): Stage, Flash uygulamaları için büyük önem taşır çünkü gösterilmesi planlanan tüm görsel nesneler burada yer alır. Stage düğmeler, metinler, form elemanları ve animasyonlar dahil her şeye ev sahipliği yapar.

Doküman sekmeleri ve düzenleme çubuğu: Flash’ta her açık doküman için bir doküman sekmesi üretilir, bu sayede tasarımcı ya da geliştirici açık dosyalar arasında hızla geçiş yapabilir. Doküman sekmelerinin hemen altında yer alan düzenleme çubuğunun işleviyse nelerin düzenlemekte olduğunu göstermektir (örneğin sahneler, ekranlar, semboller, gruplanmış öğeler gibi). Düzenleme çubuğu ayrıca üzerindeki bir açılır liste ile Stage’in ekrandaki büyüklüğünü kontrol edebilecek yakınlaştırma seçeneklerine ulaşmayı sağlar.

Properties denetçisi: O anda seçili olan nesneye (Stage, metin, düğme, vs.) dair bilgiler Properties denetçisinde görülebilir. Bu sayfada nesneye ilişkin bilgiler sadece gözükmekle kalmaz, bilgilerin çoğu (örneğin Stage’deki x ve y koordinatları, genişlik ve yükseklik, dokümanınızdaki sembol ya da bileşen kullanımlarına verilen isimler gibi) isteğe göre değiştirilebilir.İLK FLASH 8 DOKÜMANI

Flash ile çeşitli türlerde dokümanlar oluşturulabilir. Örneğin animasyon ya da video olarak izlenilen SWF dosyaları bu türlerden biridir. Sadece ActionScript kodu içeren dokümanlar da oluşturabilirsiniz; bu dokümanlar içerdikleri ActionScript kodunun birçok farklı yerde kullanılmasına imkân verir.

Bu çalışmada yeni bir FLA dokümanı oluşturulacak. Bu doküman bizim ana dokümanımız olacak ve kendisiyle kullanacağımız her içeriğe (örneğin metinler, grafikler, video ve diğer SWF dosyaları gibi) ev sahipliği yapacak.

1. Flash başlatılmalı

Windows altında Start (Başlat) > All Programs (Programlar) > Macromedia > Macromedia Flash 8 yolunu izlenerek Flash açılır. Macintosh kullanılıyorsa Macromedia

9

Flash 8’i Applications klasörü altında görebilir ve simgesine çift tıklayarak program çalıştırılabilir.

Flash varsayılan olarak Start (Başlangıç) sayfası ile açılır. Bu sayfadaki seçenekleri kullanarak yeni bir Flash dokümanı oluşturulabilir veya doküman oluşturmak için hazır şablonları kullanılabilir. En son kullanılan dokümanlara yine Start sayfasından ulaşılabilir.

2. Create New (Yeni Oluştur) başlığının hemen altındaki Flash Document linkine tıklanarak yeni bir Flash dokümanı oluşturulmalı

Yeni bir Flash dokümanı oluşturulduğunda doküman varsayılan ayarlarla açılır. Bu ayarlar değiştirilebilir ve onların bundan böyle varsayılan ayarlar olarak kabul edilmesi sağlanabilir; böylece yeni oluşturulan her doküman istenilen ayarlarla açılır.

3. Yeni doküman açıkken arka zemine (Stage’e) tıklanmalı. Document Properties (Doküman Özellikleri) iletişim kutusunu kullanılarak Stage’in boyutları 780 x 520 piksel yapılmalı

Şekil 5Properties (Özellikler) denetçisi şimdi gerçek bir anlam kazanacak. Doküman açılıp

Stage’e tıkladıktan sonra Properties denetçisine bakıldığında ve Size (Boyut) düğmesine basıldığı anda Document Properties (Doküman Özellikleri) iletişim kutusu ekrana gelecek.

Title (Başlık) ve Description (Açıklama) alanları meta bilgilerdir (metaveri) ve bu yönleriyle HTML’deki meta etiketlere (metatag) benzerler. Amaçları, Web sitesinde (Flash SWF dosyalarının ve diğer öğelerin) arama motorları tarafından bulunma ihtimalini artıran bilgilerin tutulmasına imkân sağlamaktır.

4. Properties denetçisinde, dokümanın frame rate (kare gösterim hızı) değeri 21 fps olarak değiştirilmeli

Frame rate (kare gösterim hızı) değeri videonun nasıl görüneceğini etkiler. Frame rate ne kadar yüksek olursa animasyonun akışı o kadar pürüzsüz ve yumuşak olur. Ancak yüksek frame rate değerleri son kullanıcı tarafında daha fazla işlemci gücü gerektirir.

10

Şekil 6

5. File > Save As (Dosya > Farklı Kaydet) komutu seçilmeli ve dosya bookstore1.fla adıyla kaydedilmeli

Dosyayı kaydetmeden önce masaüstünde TechBookstore adlı bir klasör oluşturulur. Tüm dosyalar bu klasöre kaydedilecektir. Dosya bookstore1.fla adıyla buraya kaydedilir. Bundan sonra dosyada yapılan her önemli değişiklik ardından dosya ismindeki sayıyı da değiştirilir (2, 3, … gibi).

6. File > Close (Dosya > Kapat) komutu seçilmeli ve henüz kaydedilmiş olan doküman kapatılmalı

Ancak çalışma sıradaki uygulamalarla sürdürülmek isteniyorsa doküman kapatılmak zorunda değildir.

PANELLER

Birkaç sayfa önce panellerden kısaca söz edilmişti. Son yapılan uygulamada Stage’in boyutunu ve dokümanın frame rate değerini değiştirmek için kullanılan Properties denetçisi de aslında bir paneldir. Geliştirme ortamındaki panellerin özelliklerini ve bölümlerini öğrenmek Flash’ı etkin bir şekilde kullanabilmek açısından önem taşır. Şimdiki uygulamada ihtiyaç duyulan panelleri açmak, taşımak ve kullanmak anlatılacak.

1. File > Open (Dosya > Aç) komutu verilmeli ve sabit diske kaydedilmiş olan bookstore1.fla dokümanı açılmalı

Eğer bir önceki uygulama sonrası bookstore1.fla dosyasını kapatılmadıysa bu adım pas geçilebilir.

11

2. File > Save As (Dosya > Farklı Kaydet) komutu verilmeli ve bookstore1.fla dosyası bookstore2.fla olarak kaydedilmeli

Önemli değişiklikler yapılacağı için dosyanın farklı bir isimle kaydedilmesinde fayda vardır. Böylece ihtiyaç duyulduğunda çalışmaların önceki sürümlerine kolayca ulaşılabilir.

3. Window (Pencere) menüsü kullanılarak History (Geçmiş) paneli açılmalı

Flash 8’i açıldığında varsayılan olarak gelen paneller arasında çok faydalı bir panel olan ve yapılmış olan düzenlemelerin kaydını tutan History (Geçmiş) paneli bulunmaz. History panelinin tutacağı kayıtların sayısı tercihinize bağlıdır.

History panelini açmak için Window > Other Panels > History (Pencere > Diğer Paneller > Geçmiş) komutunu verilmelidir. Window menüsünün altında yer alan ve bir kısmı Other Panels grubunda toplanmış olan panellerin her biri gayet faydalı özellikler taşır.

Şekil 7

Window menüsünden bir panel seçildiği zaman bu panel çalışma alanında rastgele bir yerde açılacak, açık olan diğer panellerin yanında sabit olmayacaktır. Yeni açılan paneli diğer panellerin yanına sabitlemek için panelin en sol üst köşesindeki (panel başlık çubuğunun hemen solundaki) noktaların üstüne tıklayın ve paneli istediğiniz yere sürükleyip bırakın. Sürükleme esnasında panelin sabitlenebileceği alanlar siyah bir çizgi ya da çerçeve ile gösterilecektir.

Bir panelin başlık çubuğunda yer alan minik oka ya da başlığın kendisine tıklayarak panel aşağıya doğru açabilir ve yeniden tıklayarak eski durumuna getirebilir. Ayrıca tüm panellerde başlık çubuğunun en sağındaki düğmeye tıklanarak açılan bir Options (Seçenekler) menüsü vardır, bu menünün içeriği her panel için farklıdır. (Başlık çubuğunun en sağındaki düğmeyi görmeniz için panelin aşağıya doğru açılmış olması gerekir.)

4. Panel diğer panellerin yanına taşınmalı ve sabitlenmeli

12

Bu adım yukarıda tarif edilen şekilde uygulanır. Sabitlenen panellerin sıraları da aynı şekilde değiştirilebilir.

5. History paneli sadece başlık çubuğu görünür olacak şekilde kısaltılmalı

Başlık çubuğundaki boş bir noktaya, minik oka ya da başlığın kendisine tıklanarak paneller aşağıya doğru açılabilir veya sadece başlık çubuğu görünür olacak şekilde kısaltılabilir / kapatılabilir.

6. Window > Components komutu verilerek Components (Bileşenler) paneli açılmalı ve ilgili yere sabitlenmeli

Şekil 8

Şekil 8Window menüsüne baktığınızda paneller çoğu zaman klavye kısayolları ile de

açılabilir. Örneğin Components panelini açmak için Windows altında Ctrl+F7, Mac OS X altında da Cmd+F7 kısayolları kullanılabilir.

7. Components (Bileşenler) panelinin Options (Seçenekler) menüsü açılmalı

Her panelin kendisine ait bir Options (Seçenekler) menüsü vardır. Bu menüler her panel için farklı içeriklere sahip olsa da Help (Yardım), Maximize Panel (Panelin Boyunu Maksimuma Çıkar) ve Close Panel (Paneli Kapat) komutları tümünde ortaktır.

8. Components panelindeki User Interface (Kullanıcı Arabirimi) kategorisi açılmalı ve Stage’e bir Button (Düğme) bileşeni taşınmalı

Bileşenler kullanıma hazır Flash öğeleridir ve her birinin farklı bir görevi vardır.

13

9. Window menüsünden Align (Hizala) paneli açılmalı ve sabitlenmeli. Ana Flash ekranının en solunda, Tools altında yer alan siyah ok (Selection Tool – Seçim Aracı) ile Stage içinde bulunan düğme seçilmeli. Ardından Align paneli kullanılarak düğme Stage içinde ortalanmalı

Align (Hizala) panelindeki düğmeler kullanılarak Stage’de yer alan öğeler kendi aralarında veya Stage’e göre hizalanabilir. Öğeler Stage’e göre hizalanmak isteniyorsa önce Align panelindeki “To stage” düğmesi aktif (parlak) yapılır. Öğeleri hizalamak için panelin en üst sırasında yer alan düğmeler kullanılır.

Şekil 9

Stage içinde duran düğme seçili ve paneldeki To stage (Stage’e göre hizala) düğmesi de aktifken Align horizontal center (Yatay olarak ortala) ve Align vertical center (Dikey olarak ortala) düğmelerine basılırsa düğme Stage’in merkezine yerleştirilmiş olur.

10. İhtiyaç oldukça diğer paneller de Window menüsünden açılmalı

Paneller ekranın istenilen bölgesinde sabitlenebilir. Sayfa yerleşimini istenilen şekilde ayarladıktan sonra kaydedilebilir ve böylece her seferinde aynı sayfa yerleşimi kullanılabilir.

11. Window > Workspace Layout (Çalışma Alanı Yerleşimi) > Save Current (Mevcut Durumu Kaydet) komutuyla panel yerleşimi kaydedilmeli

Bu komutun ardından Save Workspace Layout (Çalışma Alanı Yerleşimini Kaydet) kutusu açılır. Name (İsim) alanına TechBookstore yazılır ve OK düğmesine tıklanır. Böylece çalışma alanının mevcut yerleşimi en son açılan paneller de korunacak şekilde kaydedilmiş olur. Örneğin başka bir anda varsayılan yerleşim düzeniyle çalışılıyorken Window > Workspace Layout > TechBookstore seçimini yaparak TechBookstore yerleşim düzenine kolayca geçiş yapılabilir. Bu yerleşim düzeninde yapılacak diğer değişikliklerin de kalıcı olması için yerleşim düzenini yine aynı isimle kaydetmek yeterlidir.

14

TİMELİNE (ZAMAN ÇİZGİSİ) VE KARELER

SWF dosyalarındaki her şey bir Timeline (zaman çizgisi) üzerine yerleştirilir. Dosya içeriğinin (karelerin) Timeline üzerinde nasıl sıralanmış oldukları dosyanın (animasyonun) nasıl görüntüleneceğini belirler. Timeline sadece tek bir kare de içerebilir. Oynatım kafası (playhead) Timeline boyunca ilerletilerek animasyonun izlenmesi sağlanır. Kare gösterim hızı (frame rate) örneğin 12 fps ise saniyede 12 kare görüntülenir; yani her kare ekranda 1/12 saniye kalır ve oynatım kafası diğer kareye geçer.

Timeline üzerinde içeriğin çizgisel olmayan bir şekilde de dağıtılabilmesi için katmanlar (layer) kullanılır. Katmanlar birbirleri üzerine bindirilebilir ve her biri aynı Timeline’daki diğer katmanlardan daha farklı sayıda kare içerebilir.

Anahtar kareler (keyframe) Timeline üzerinde bir değişikliğin olduğu yerlerdir. Örneğin yeni bir içeriğin eklenmesi ya da animasyonun değişmesi gibi olaylar anahtar karelerde gerçekleşir. Anahtar kareler ayrıca ActionScript ve ses de içerebilirler. Anahtar karelerin arasında yer alan karelerde değişiklik tanımlanmaz; bir değişiklik tanımlanırsa da o kare artık bir anahtar kareye dönüşmüş olur.

Flash dokümanlarında genellikle birden fazla Timeline bulunur. Flash dokümanındaki minik bir film pek çok karenin yanı sıra çok sayıda Timeline da içeriyor olabilir.

Şimdiki uygulamada Timeline’ı kullanmak, kareleri seçmek, taşımak ve silmek konuları anlatılacaktır. Çalışma yine bookstore2.fla dosyası üzerinde yapılacaktır.

1. Timeline açık değilse Window > Timeline komutu ile açılmalı

Flash başlatıldığında varsayılan olarak açılan Timeline paneli dokümanın en üstünde, düzenleme çubuğunun hemen altında yer alır. Panel gözükmüyorsa dokümanın sol üst köşesindeki Timeline düğmesine tıklanarak ya da Window > Timeline komutunu verilerek açılabilir.

15

Şekil 10

Timeline aslında iki panelden oluşur:

Farklı içeriklerin aynı anda kullanılabilecek şekilde düzenlenmesine imkân veren Layers (Katmanlar) paneli

Kareler ile katmanlardan meydana gelen Timeline’ın kendisi.

Bir Flash dokümanı oluşturulduğu zaman Layers panelinde Layer 1 adında bir katman oluşturulur ve Timeline’a bu katman için bir anahtar kare eklenir.

Kırmızı oynatım kafası başlangıçta 1 numaralı konumdadır. Timeline’ın üst kısmında yer alan sayılar karelerin numaralarını temsil eder. Kareler numaraları veya etiketleri (label) ile ayırt edilirler.

2. Katman isimlerini görmek için Timeline’ın genişliği biraz azaltılmalı

Bunun için katmanların yer aldığı paneli karelerin bulunduğu panelden ayıran sınır çizgisinin biraz sağa çekilmesi gerekiyor. Fare bu sınır çizgisinin üzerine getirildiğinde fare imleci çift yönlü ok şeklini alır, bu noktada tıklanıp sınır çizgisi sağa ya da sola taşınabilir.

3. Timeline’ın kare görüntüleme menüsü kullanılarak karelerin Timeline üzerinde nasıl görünecekleri ayarlanabilir

Timeline’ın sağ üst köşesinde (numaraların bulunduğu çubuğun sağ ucunda) yer alan düğmeye basılarak kare görüntüleme menüsü açılabilir. Buradaki seçenekler karelerin

16

Timeline’da nasıl görüntüleneceğini belirler.

Şekil 11

Tiny (Çok dar), Small (Dar), Normal, Medium (Orta) ve Large (Geniş) seçenekleri karelerin genişliğini belirlemek için kullanılır. Short (Kısa) komutu karelerin boyunu kısaltır. Tinted Frames (Renklendirilmiş Kareler) komutu da bazı karelerdeki gri arka zeminlerin daha renkli bir görünüme kavuşmasını sağlar.

İstenildiği taktirde karelerde bulunan içeriğin ön izlemesini de yapılabilir. Preview (Önizleme) komutu Timeline’daki her karenin içeriğinin görülmesini sağlar. Preview in Context komutu ise tüm dolu ve boş karelerin küçük resimler (thumbnail) halinde izlenebilmesini sağlar; bu özellik animasyon hazırlarken çok işe yarayabilir çünkü animasyonun zamana bağlı olarak nasıl ilerlediğinin görülmesine imkân verir.

Şimdiki çalışmada kareler Normal boyutta görüntülenecek ve Tinted Frames komutunu seçili olarak bırakılacak.

4. Insert (Ekle) > Timeline > Keyframe komutuyla Layer 1 üzerinde yeni bir anahtar kare oluşturulmalı

Yeni bir Flash dokümanı açıldığında Layer 1 katmanında 1 numarada boş bir anahtar kare bulunur. Bir önceki uygulamada Stage’e bir Button (Düğme) bileşeni taşındığında bu boş anahtar kare (içi boş daire) dolu bir anahtar kare (içi dolu daire) olmuştu.

Insert menüsünü kullanarak Timeline’a eklenilen anahtar kare Layer 1’in 2 numaralı konumuna yerleştirilir. Önceki anahtar karede bulunan grafiğin bu yeni anahtar kareye de kopyalanmış olduğuna dikkat edin. Bu anahtar kareler her ne kadar aynı katman üzerinde bulunsalar da birbirlerinden ayrı öğelerdir. 2 no’lu anahtar karede değişiklik yaparsanız 1 no’lu anahtar kare bundan etkilenmez. Timeline’a boş bir anahtar kare eklemeniz halindeyse önceki anahtar karenin grafikleri buna kopyalanmaz.

17

Bir kare eklemek için Layer 1 üzerinde 3 no’lu konumu seçilmeli ve klavyeden F5 tuşuna basılmalıdır. Bu işlemle içeriğin zamana yayılması sağlanabilir. İçerik değişmez ancak görüntülenme süresi artar.

5. Fare ve Shift tuşu birlikte kullanılarak kareler seçilmeli, taşınmalı ve silinmeli

Yukarıdaki adımda üzerine tıklayarak bir karenin seçilebileceği anlatıldı. Çok sayıda kare aynı anda seçilmek isteniyorsa ilk kareye tıklanmalı, klavyede Shift tuşunu basılı tutulmalı ve son kareye tıklanmalıdır. Böylece tıklamış kareler ve bu ikisinin arasında kalan tüm kareler seçilmiş olacaktır. Çok sayıda kareyi bütün bir sıra halinde değil de ayrı ayrı seçmek istiyorsanız karelere tıklarken klavyeden Ctrl ya da Command tuşunu basılı tutulmalıdır. Timeline’a eklenmiş olan tüm kareler seçilmek istiniyorsa bir kare üzerine sağ tıklanmalı ve Select All Frames (Tüm Kareleri Seç) komutunu verilmelidir.

Layer 1 de 2 ve 3 nolu kareleri seçilip, bunlar fareyle 4 ve 5 nolu karelere sürüklenip bırakıldığı takdirde, bu iki kare yeni bir konuma (farklı bir zaman dilimine) taşınmış olur. Bu işlemin ardından 1 no’lu kare 3 no’lu kareye kadar genişleyecektir. Kareleri taşımak yerine kopyalamak istiyorsanız sürükleme esnasında Alt ya da Option tuşlarını basılı tutulmalıdır.

6. Button öğesi ve kareler silinmeli

Şimdilik bir düğmeye ihtiyaç yok, o yüzden Stage’deki Button bileşenini seçip klavyeden Backspace ya da Delete ile silinebilir. Stage’de bulunan öğeleri silmek için öğeye sağ tıklayıp Cut (Kes) komutunu da verilebilir.

Kareleri silmek için Delete ya da Backspace tuşları kullanılmamalıdır. Bu tuşlarla bir kare veya anahtar karenin içeriğini silebilir ancak kendisini silemeyiz. Kareleri silmek için Timeline’da 1 no’lu kare hariç tüm boş kareler seçilmeli ve sağ tıklandığında açılan menüden Remove Frames komutunu verilmelidir. Alternatif olarak ana menüden Edit > Timeline > Remove Frames veya klavyeden Shift+F5 tuşları kullanılabilir.

7. Doküman üzerinde yapılan değişiklikler kaydedilmeli

KATMANLAR

Artık Timeline’ı daha yakından tanıdığımıza göre katmanları detaylı bir şekilde incelemeye başlanabilir. Katmanların Timeline üzerinde dizildiklerinden ve birbirleri üstüne konulabileceklerinden bahsedilmişti. Timeline üzerindeki Insert Layer (Katman Ekle) düğmesini kullanarak veya ana menüden Insert > Timeline > Layer komutunu verilerek çalışmaya yeni katmanlar eklenebilir.

18

Katmanlar dokümanlarda kullanılacak farklı türlerdeki bileşenlerin etkin bir şekilde organize edilmesini sağlarlar. Derinlik hissi ve perspektif vermekten seslerin ve ActionScript kodlarının karelerde tutulabilmesine kadar pek çok işe yardımcı olurlar. Katmanlara isim verirken bu ismin mümkün olduğu ölçüde katman içeriğini tanımlayan bir şey olmasına dikkat edilmesinde fayda vardır. Örneğin sabit metin içeren bir katmana katman_1 gibi hiç açıklayıcı olmayan bir isim vermek yerine sabit_metin gibi daha anlamlı bir isim vermelidir.

Şekil 12

Flash’ın ilginç yanlarından biri de farklı türlerde katmanlara sahip olmasıdır. Tek görevi içeriği göstermek olan normal katmanlar, diğer işlevlerinin yanı sıra izleme amacıyla kullanılan kılavuz katmanlar, bir animasyonun verilen bir yolu izlemesini sağlayan hareket kılavuzu katmanları ve geçişler gibi etkileyici fonksiyonları olan maske katmanlar Flash’ın sunduğu katman türleri arasındadır. Kılavuz katmanlar SWF dosyası ile yayınlanmaz ve hareket kılavuzları da yayınlanan dosyada görünmez durumda bulunur. Tüm bu katmanları organize etmek ve Layers panelindeki alanın karışık bir şekilde dolmasını önlemek içinse katman klasörlerini kullanılabilir.

Şimdi yapılacak uygulamada katman ekleme ve isimlendirme, katmanların özelliklerini değiştirme işlemleri yapılacak. Katmanları organize etmek için katman klasörlerinin nasıl kullanılabileceği de açıklanacaktır. Bu çalışmada da bookstore2.fla dosyası kullanılmaya devam edilecek.

19

1. Timeline açık değilse ana menüden Window > Timeline komutuyla ya da doküman penceresinde sol üstte bulunan Timeline düğmesiyle açılmalı

2. Layer 1 adlı katmanın ismi background olarak değiştirilmeli

Katman ismine çift tıkladığında ismin olduğu alan düzenlenebilecek bir metin alanına dönüşür. Buraya background yazılmalı ve Enter tuşuna basılmalıdır.

3. Insert Layer (Katman Ekle) düğmesi ile yeni bir katman eklenmeli ve katman labels (etiketler) olarak isimlendirilmeli

Yeni bir katman eklendiğinde Flash bu katmana otomatik olarak Layer 2 gibi bir isim verir. İsimde görülen sayı sadece o ana kadar kaç katman açıldığını gösterir, bunun dışında bir anlamı yoktur. Yeni bir katman eklediğinde ismini o anda değiştirmek ve katmana açıklayıcı bir isim vermek sonrası için çok faydalı olacaktır.

Katmanın üstüne çift tıklanmalı ve ismini labels olarak değiştirilmelidir. Şu anda bu katman aktif (seçili) durumdadır. Stage üzerinde oluşturulan ya da buraya taşınan her şey aktif katmana ait bir öğe olur. Layers panelinde bir katmanı seçildiği zaman katmanın Stage üzerinde yer alan tüm içeriği de seçilmiş olur.

Şekil 13

Aktif katmanda, katman isminin hemen sağında küçük bir kurşun kalem simgesi yer alır. Background katmanına tıklandığı zaman, kurşun kalem görülecektir. Stage’e bırakılan ya da orada oluşturulan her şey aktif katmana yerleştirilmiş olur. Yapılan değişikliklerin etkin olduğu katman aktif katmandır.

4. Yeni labels katmanına bir kare etiketi eklenmneli

Bir kareyi belirtmek için numara yerine etiket kullanmak işi oldukça kolaylaştırır.

20

Sadece anahtar karelerin bir etiketi olabilir, yani bir kare etiketi eklemek isteniyorsa öncelikle bir anahtar kare olmalıdır. Etiket verilecek anahtar kare Timeline’da seçilmelidir. Properties denetçisinin sol üst köşesinde içinde silik bir şekilde <Frame Label> yazan bir metin alanı vardır. Bu alana home yazılmalı ve Enter’a basılmalıdır.

Şekil 14

5. Lock Layer düğmesi ile labels katmanı kilitlenmeli

Layers panelindeki kilit simgesinin alt hizasında bulunan küçük siyah noktalara tıklanarak ilgili katman kilitlenebilir. Katmanı kilitlendiğinde siyah noktanın yerini kapalı bir kilit simgesi alır ve Stage’den bir şey taşıyarak ya da başka bir şekilde katman üzerinde herhangi bir değişiklik yapılamaz. Artık kilit simgesine dönüşmüş olan noktaya bir kez daha tıklanarak kilit açılabilir.

Katmanları kilitlemek katman içeriklerini kazara başka bir katmanın Stage’ine koyulmasını ve bu yüzden animasyonun bozulmasını önler, bu bakımdan çok faydalıdır. Ayrıca Layers panelindeki göz simgesinin alt hizasında bulunan küçük siyah noktalara tıklayarak katmanların gizlenmesi de sağlanabilir. Bir katman gizlendiği zaman düzenlenemez ve siyah noktanın yerini kırmızı bir X sembolü alır.

6. Insert Layer Folder (Katman Klasörü Ekle) düğmesine tıklanarak bir katman klasörü oluşturulmalı

Klasörler ilgili katmanları bir arada tutarak daha düzenli bir içerik yapısı kurulmasını sağlarlar. Background katmanını seçin ve Insert Layer Folder (Katman Klasörü Ekle) düğmesine basın (Layers panelinin altında, soldan üçüncü düğme). Background katmanının

21

üstünde Folder 1 isimli bir katman klasörü açılacaktır. Klasörün ismine çift tıklanıp, klasöre graphics ismi verilir.

Klasörün içinde başlangıçta bir şey yoktur. Şimdi background katmanı klasörün içine taşınmalıdır; katmanın ismi hafif sağa doğru kayarak katmanın artık bir klasörün içinde olduğunu belli eder. Artık klasörün hemen solunda yer alan minik okla klasör açılabilir ya da kapatılabilir.

Şekil 15

7. Önce yeni bir katman, sonra da Rectangle (Dikdörtgen) aracı ile Stage üzerinde yeni bir şekil oluşturulmalı

Background katmanını seçilmeli ve Insert Layer düğmesine basarak onun üzerinde yeni bir katman oluşturulmalıdır. Bu katmana temp ismi verilir.

Flash ana ekranında sol tarafta Tools (Araçlar) paneli çıkacaktır. Açık değilse Window > Tools komutu ile bu panel açılabilir. Şimdi Tools panelinden Rectangle (Dikdörtgen) aracı seçilmeli ve yeni katmana istenilen boyut ve şekilde bir dikdörtgen çizilmelidir. Bunun için Rectangle aracı seçilmiş durumda iken Stage’in üzerine tıklanmalı ve fare imleci çapraz bir yönde sürüklenmelidir.

Sürükleme esnasında, oluşacak olan dikdörtgenin sınırları görülebilir. İstenilen şekil elde edilince dikdörtgenin tamamlanması için farenin düğmesi bırakılır.

22

Şekil 16

8. background katmanında bir elips oluşturulmalı

Background katmanını ve Oval aracını seçip, Stage üzerine tıklanmalı ve fare imleci sürüklenip bırakılmalıdır. Dikdörtgenin elipsin üstünde kaldığı dikkatinizi çekti mi? Bunun sebebi elipsin daha alttaki bir katmanda bulunması.

Rectangle Tool (Elips Aracı) Oval Tool

23

Şekil 17

9. Background ve temp katmanlarının yeri değiştirilmeli

Katmanların sırasını değiştirmek için yapılması gereken tek şey Layers panelinde katmanlara tıklamak ve onları aşağı veya yukarı yönde sürüklemektir. Temp katmanına tıklanmalı ve background katmanının altına doğru sürüklenmelidir. Gri noktalı kalın çizgi background katmanının altına geldiğinde farenin düğmesi bırakılabilir.

Bu değişikliğin ardından dikdörtgen ve elipsin Stage üzerindeki sıralarının da değiştiğine dikkat edilmelidir. Katmanların içeriği birden fazla boyuta dağıtmak için nasıl kullanılabileceğini ve katman sıralamasının etkilerini burada görülmektedir. Mevcut projede grafiklerle iş olmadığı için grafikler artık silinebilir.

Background katmanındaki grafikleri silmek için bu katmanın 1 no’lu karesini seçilmeli, böylece background katmanındaki tüm içerik seçilmiş olur. Ardından Backspace ya da Delete tuşuna basılmalıdır.

10. Temp katmanı silinmeli

Bir katmanı silmek için Layers panelinden katmanı seçilmeli ve panelin sağ alt köşesindeki çöp kutusu simgesine tıklanmalıdır.

24

Temp katmanını seçip çöp kutusu düğmesine bastığınızda hem katmanın kendisi hem de katmandaki tüm içerik silinecektir.

11. Çalışma kaydedilmeli

TERCİHLERİN BELİRLENMESİ

Tercihlerin Flash’ta önemli bir yeri vardır. Basit düzenleme işlemlerinden vektörel grafiklere ve ActionScript ayarlarına kadar pek çok şeyi tercihler ile kontrol edilebilir. Flash 8 tercihleri biraz sonra daha detaylı anlatılacak Preferences iletişim kutusundan yapılabilir.

1. Windows altında Edit > Preferences, OS X altında Flash 8 > Preferences komutuyla Preferences iletişim kutusu açılmalı

Şekil 18

Preferences (Tercihler) iletişim kutusu iki bölüme ayrılmıştır. Sol tarafta temel tercih kategorileri bulunur. Sağ tarafta ise solda seçilmiş olan kategoriye ait ayarlar yer alır.

25

Preferences iletişim kutusu açıldığında sol tarafta varsayılan olarak General (Genel) kategorisi seçilidir. Dosya yazımına ilişkin birkaç temel kontrol içeren General kategorisinde iki farklı Undo (Geriye Al) seçeneği vardır. Soldaki ikinci kategori olan ActionScript kategorisi ActionScript penceresindeki yazı tipi ve yazı tipi boyutuna ilişkin ayarlar yapılmasını sağlar. Girinti ayarlarına ve sentaks renklendirme seçeneklerine de bu sayfadan ulaşılabilir. Üçüncü temel kategori olan Auto Format (Otomatik Biçimlendirme) kategorisi de ActionScript kullanımına yöneliktir. Auto Format sayfasında girilen tercihlere göre, ActionScript penceresi yazılmakta olan kodun görünümünü otomatik olarak değiştirebilir; burada amaç kodun daha rahat okunabilmesini sağlamaktır. Vektörel nesne çizimine ilişkin araç tercihleri Drawing (Çizim) kategorisinde, yazı tipi eşleme ve metin akışına ilişkin ayarlar da Text (Metin) kategorisinde bulunur. Warnings (Uyarılar) kategorisini kullanarak da hangi işlem ya da beklenmedik durumlarda Flash’ın hata mesajlarıyla uyarması istediği belirlenebilir.

Preferences iletişim kutusunda yer alan kategoriler incelenerek yapılacak tüm ayarlar görülebilir.

2. Preferences > General sayfasına girilmeli ve Document-level Undo (Doküman Düzeyinde Geri Al) değeri 150 olarak değiştirilmeli

Flash Basic 8 ve Flash Professional 8’de iki farklı geriye alma tekniği vardır: Document-level Undo, seçimler dahil doküman üzerinde yapılan her değişikliği tek bir geçmiş işlemler listesinde tutar. Object-level Undo (Nesne Düzeyine Geri Al) ise düzenlenen her nesne için ayrı bir geçmiş işlemler listesine sahiptir. Object-level Undo tekniğinin avantajı Stage üzerinde yer alan diğer nesnelere hiç müdahale etmek zorunda kalmadan tek bir nesne üzerinde yapılmış olan değişikliklerin geri alınabilmesine imkân tanımasıdır.

Şekil 19

General sayfasında bu iki Undo metodu arasında geçiş yapıldığı zaman ekrana bir uyarı penceresi gelir ve bu geçişin o ana kadar tutulan geçmiş işlemler listesinin silinmesine yol açacağı, ancak dosyayı etkilemeyeceğini hatırlatır.

3. Show Start Page (Başlangıç Sayfasını Göster) şeklindeki On launch (Açılış) seçeneğini istiyorsanız Last documents open olarak değiştirin

26

Bu tercih yapılırsa Flash’ı başladığında şu ana kadar sürekli görülen Start (Başlangıç) sayfası gelmez ve doğrudan en son çalışılan doküman(lar) açılır. Bilgisayar başkalarıyla paylaşılıyorsa bu durum tavsiye edilmez ancak sadece siz kullanıyorsanız uygulamaya daha hızlı girmeniz bakımından bu tercih faydalı olabilir.

Şimdilik diğer tercihler değiştirilmemeli ve OK düğmesine tıklanarak Preferences iletişim kutusu kapatılmalıdır.

4. Windows altında Edit > Customize Tools Panel veya OS X altında Flash 8 > Customize Tools Panel’i seçilmeli

Flash’a bir eklenti yüklendiği zaman soldaki araçlar paneline yeni bileşenler eklenebilir. Ayrıca Flash’ın bu paneldeki varsayılan araç dizilimini değiştirmek de istenebilir. Böyle anlarda ihtiyaç duyulan şey Customize Tools Panel (Araçlar Panelini Özelleştir) iletişim kutusudur.

Şekil 20

Flash ile gelen araçların tümü varsayılan olarak Tools panelinde yer alır. Başlangıçta varsayılan ayarlara dokunmamak en iyisi, ancak zaman içinde projenin ihtiyaçlarına göre buraya yeni araçlar eklenebilir veya bu panelden bazı araçlar çıkarılabilir.

27

BİR FLA DOSYASININ TEST EDİLMESİ

Bir Flash dosyasını Web üzerinden paylaşmanın en iyi yolu dosyayı Flash Player’ın görüntüleyebileceği bir formatta yayınlamaktır. Dosyayı Web’e göndermeden (upload) önce test etmeli ve istenildiği gibi göründüğünden emin olunmalıdır. Dosya yine bookstore2.fla dir.

1. Ana menüden File > Save As komutu verilmeli ve bookstore2.fla dosyası bookstore3.fla olarak kaydedilmeli

bookstore3.fla dosyası da daha önce masaüstünde oluşturulan TechBookstore klasörüne kaydedilmelidir..

2. Background katmanı seçilmeli ve Components panelinden Stage’e bir düğme (Button) taşınmalı

Bu sadece test edilecek dokümanda bir şeyler bulunsun diye yapılmaktadır.

3. FLA dosyasını test etmek için ana menüden Control > Test Movie komutu verilir

Bu komutla birlikte test ekranı açılır ve doküman bir SWF dosyasına dönüştürülerek uygulamaya entegre edilmiş olan Flash Player ile görüntülenir.

Dosya Web’den Flash Player ile görüntülendiğinde test ekranındaki gibi görünecektir.

Şekil 21

28

4. X düğmesine basarak test ekranı kapatılmalı

Ekranı kapatmak için test penceresinden File > Close komutu da verilebilir. Böylece test ekranı kapanır ve tekrar geliştirme ortamına dönülür. Bu arada TechBookstore klasörüne bakıldığında dokümanın SWF sürümünün de oraya kaydedilmiş olduğu görülecektir.

5. Çalışmayı bir Web tarayıcısında görmek için File > Publish Preview (Yayın Ön İzleme) > Default (Varsayılan) komutu verilir

Publish Preview ile çalışmayı içeren bir HTML dosyası oluşturabilir ve dosyanın bir Web tarayıcısında nasıl göründüğü izlenebilir. HTML dosyası da tıpkı yukarıdaki SWF dosyası gibi sabit diske (TechBookstore klasörüne) kaydedilir.

Şekil 22

29

Flash’ın üretmiş olduğu kaynak kodu görmek için Web tarayıcısının menüsünden View (Görünüm) > Page Source (Kaynak) komutunu verilmelidir. SWF dosyasının HTML’de hem OBJECT hem de EMBED etiketleri ile belirtilmiş ve Flash’ın koda ilişkin tüm parametreleri doldurmuş olduğuna dikkat edilmelidir.

Şekil 23

6. Flash’a geri dönülür ve background katmanındaki düğme silinir

Stage’deki Button öğesini seçilmeli ve klavyeden Backspace ya da Delete tuşuna basılmalıdır.

7. Dosyada yapılan değişiklikleri kabul ederek dosya kaydedilir

YARDIM ALMAK

Flash oldukça gelişmiş bir yardım sistemine sahiptir. Ana menüden Help (Yardım) > Flash Help veya klavyeden F1 komutuyla açılabilecek yardım panelinde bir arama motoru, temel yardım kategorilerini gösteren aşağı açılır bir konu listesi, tüm kategori başlık ve alt başlıklarının yer aldığı bir bölüm ve seçilen konuya ilişkin içeriği gösteren bir sayfa bulunur. Ayrıca yardım panelinin sağ üst köşesinde yer alan Update (Güncelle) düğmesine basarak varsa yeni yardım içerikleri de Web’den indirilebilir. Flash’ın yardım dokümantasyonu uygulamayla ilgili akla gelebilecek çok sayıda sorunun cevabının bulunabileceği bir yerdir.

30

Yardım panelinde aşağı açılır menüden seçilebilecek temel yardım konuları şunlardır:

1. Yardım panelini açmak için ana menüden Help > Flash Help komutu verilir veya klavyeden F1’e basılır

Yardım paneli ve içeriği incelenerek ihtiyaç olduğunda neyin nasıl aranabileceği hakkında fikir edinmeye çalışılmalıdır.

Şekil 24

2. Yardım güncellemeleri olup olmadığını görmek için Update (Güncelle) düğmesine basılır

Bu seçeneğin kullanılabilmesi için İnternet bağlantısının olması gerekir. Flash,

• Features (Özellikler) • Extending (Genişleme İmkânları) • Tutorials & Samples • Language Reference (Rehberler & Örnekler) (ActionScript and Components) • ActionScript 2.0 • Flash Lite • Components (Bileşenler) • 3rd Party (Üçüncü Partiler)

31

Macromedia sunucularına bağlanacak, yeni dokümantasyon varsa size bunu indirip kurma seçeneğini sunacaktır.

3. Arama alanına bir terim girilir (meselâ, brush) ve sonuçları görmek için Search (Ara) düğmesine basılır

Flash mevcut dokümantasyonu tarar ve sonuçları İçindekiler (Table of Contents) alanında gösterir. İstenilen sonuç ya da sonuçlara tıklanarak ilgili dokümantasyon görülebilir.

4. Help menüsünden Flash Support Center (Flash Destek Merkezi) seçilir

Bu komut Macromedia’nın Flash destek sayfasına götürür. Burada Flash’a ilişkin çeşitli makaleler, ipuçları ve cevaplar mevcuttur. Aranılan bilgi Flash’ın yardım dokümantasyonunda bulunamıyorsa Web’deki kaynaklara, özellikle Macromedia’nın sitesine de bakılmalıdır.

32

BÖLÜM 4

ANİMASYON HAZIRLAMA

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

Şekil 25

33

ANİMASYONLARA GİRİŞ

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

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

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

Kare kare animasyonlarsa daha geleneksel bir animasyon türüdür. Flash’ın anahtar kareler arasında tween’ler oluşturması, yani animasyonun önemli bir bölümünü sizin yerinize tamamlaması tercih edilmiyorsa, animasyonun içerdiği her kareyi bizzat oluşturulmak isteniyorsa kare kare animasyon metodu kullanılabilir. Bu yöntemle, otomatik olarak oluşturulan tween’lere göre çok daha karmaşık efektler üretmek mümkündür. Ancak kare kare animasyon yapmak tahmin edilen gibi hem daha çok zaman alır, hem de SWF dosyasının boyutunu artırır.

MOTION TWEEN İÇİN HAZIRLIK

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. Burada dikkat edilmesi gereken bir şey var: Sadece sembollerle motion tween yapılabilir. Bu nedenle motion tween yapmadan önce nesne bir sembole çevrilmelidir. 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.

Bir FLA dosyasına motion tween eklemenin birkaç yolu vardır, bunları aşağıdaki uygulamalarda açıklanacaktır. İlk uygulamada, daha önce oluşturulan menülere motion tween eklenecektir. İşi bittiğinde, menüler kullanıcı bir düğmeye basınca açılıp daha sonra kapanır hale gelecektir. Ayrıca SWF dosyası oynatılırken animasyonun sürekli gösterilmesini önlemek için bir hareket durdurma komutu eklenecektir.

34

1. TechBookstore klasörü içinden ya da CD-ROM’daki lesson05/start dizininden bookstore8.fla dosyası açılır ve sabit diskteki TechBookstore klasörüne bookstore9.fla adıyla kaydedilir

Daha önce oluşturulan semboller üzerinde farklı değişiklikler yapılacağı için farklı bir dosya ismiyle yeniden kaydedilir.

2. Stage’de mcProducts örneği bulunur, F8 tuşu ile başka bir klibe yerleştirilir ve klip mcProductsMenu olarak isimlendirilir

Flash’ta çalışırken bazen animasyonların dokümanın ana Timeline’ı üzerinde yer alması istenmez. 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 yapılmış olacak. Motion tween’ler sadece sembollerde kullanılabilir, mcProducts’ın mcProductsMenu içine yerleştirilmesinin nedeni budur.

3. mcProductsMenu’ye çift tıklanarak Stage’de düzenlenmeye başlanır, Gerekirse menü yakınlaştırılır

Mcproductsmenu üzerine çift tıkladıktan sonra Stage’in geri kalanı donuklaşır ve düzenlemekte olan sembole odaklanabilir. Burada sembolün ana özellikleri elinizin altındadır ve yapılan değişiklikler sembolün doküman içindeki tüm kopyalarını (örneklerini) etkileyecektir. Stage’deki klibin tek bir örneği olduğundan, üzerinde düzenleme modunda çalışmanın herhangi bir sakıncası yoktur. Özellikle bu modda çalışılması önerilmektedir çünkü animasyon Stage’de belirli yerlerde başlayıp bitmek zorunda ve bu mod sayesinde çalışırken Stage ve tüm grafikler birlikte görülebilmektedir.

4. Layer 1 seçilir ve ona menu tween adı verilir. Yeni bir katman eklenir ve bu katmana actions adını verilir. actions katmanında 11 ve 20. karelere anahtar kareler yerleştirilir

Menu tween katmanını seçilip, Insert New Layer düğmesine tıklanmalı ve katman ismi olarak actions girilmelidir. 11 ve 20. karelerde anahtar kare oluşturmak için kare seçilmeli ve F6 tuşuna basılmalıdır. Her anahtar karede klibin pozisyonunu değiştirilmelidir. Klibin konumunu değiştirmek, anahtar karelerin arasına tween eklerken animasyonun oluşturulmasını sağlayacaktır. Tween’ler bir sonraki uygulamada eklenecektir.

Klipler hakkında bilinmesi gereken önemli şeylerden biri de, bunların kendi Timeline’larının olduğudur. Klipler küçük çocuklar gibidir: 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 yapıldığında, ne zaman duracağını belirtmedikçe animasyon sürekli tekrar edecektir.

Animasyonun aşağı açılan menü şeklinde olması isteniyorsa: 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

35

uzaklaştırdığında menünün ilk baştaki haline gelmesini de istiyoruz. Bu nedenle klibe iki farklı noktada animasyonu durdurması söylenmek zorundadır: 11 ve 20. karelerde.

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

Durdurma eylemleri Actions panelinden eklenir. ActionScript’i henüz bilmiyor olsanız da basit bir tıklama işlemiyle ActionScript’ten faydalanılabilir.

Şekil 26

Ana menüden Window > Actions’ı seçerek Actions paneli açılmalıdır. 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ümleri görülmektedir.

36

Actions katmanında 11. ve 20. karelere anahtar kare eklerken Script Assist kullanılacaktır. ActionScript deneyiminiz yoksa Script Assist özelliği çok işe yarayacaktır. Eklemek istenilen eylem seçildiğinde Script Assist ona uygun menü seçenekleri ve düğmelerin eklenmesine yardımcı olur.

Actions katmanında 11 no’lu anahtar kareyi seçilip ve Actions panelinin başında

Actions-Frame yazdığından emin olunmalıdır. Actions panelinin başlık çubuğundan bir kare mi yoksa bir nesne mi seçildiği anlaşılabilir. 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.

Şekil 27

Script panelinin sağ üst köşesindeki Script Assist düğmesine tıklanıp, soldaki Actions araç kutusunda Global Functions kategorisine tıklanmalı ve Timeline Control seçilmelidir. Timeline Control kategorisinde stop action’a çift tıklayıp Timeline’a eklenmesini sağlanmalıdır. 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 eklenmelidir.

37

Şekil 28

ActionScript eklemeyi bitirdikten sonra, Lock Layer simgesinin altındaki noktaya tıklayarak actions katmanı kilitlenmelidir, böylece actions katmanında Stage’e bir şey eklenmesi önlenmiş olur. 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ştirilirse, SWF dosyanızda kod çakışmaları yaşanabilir. Ayrıca FLA dosyanızdaki hataları ayıklamak da güçleşebilir.

6. Yeni bir katman oluşturulur ve labels olarak adlandırılır. Sonra 2 ve 12. karelere yeni anahtar kareler ve kare etiketleri eklenir. İş bitince katman kilitlenir

Menu katmanını seçilip ve Insert Layer düğmesine tıklanmalıdır. Yeni katmana labels ismi verilmelidir. 2. ve 12. karelerde yeni anahtar kareler oluşturmak için kare seçilip F6 tuşuna basılmalıdır. Ş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ı sağlanacaktır. Bu iş için ActionScript’i kullanmanın en kolay yolu anahtar karelere etiket vermektir. Bunun sebebi aşağıdaki paragrafta açıklanmaktadır.

Menülerin açılıp kapanma animasyonunun süresi istenilen gibi olmayabilir ve bu yüzden animasyonda yer alan kare sayısı değiştirilmek istenebilir. Bunu yapıldığında, animasyonların başlangıç ve bitişleri farklı karelere kayabilir. Eğer ActionScript’e belli numaralı bir kareye gitmesi söylenmişse, Actions paneline girip script’i yeni numaraları gösterecek şekilde değiştirilmesi gerekir. Ancak, oynatım kafasını etiket verilmiş bir kareye gönderme yoluna gidilirse, başlangıç ve bitiş kareleri hareket ettiğinde etiket de onlarla

38

birlikte hareket eder ve Script’i değiştirmeye gerek kalmaz. Labels katmanında 2 numaralı kareyi seçildikten sonra Properties denetçisinde <Frame

Label> alanına slidedown yazılmalıdır. Daha sonra labels katmanından Kare 12 seçilip, <Frame Label> kutusuna slideup yazılmalıdır. İşi bitince, daha önce yapılan gibi katmanı kilitleyerek üzerine kaza ile yeni içerik eklenmesi önlenmelidir.

Şekil 29

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

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 konumu değiştirilir

Kare 12’de Stage’den mcProducts seçilmelidir. Klip Shift tuşuyla birlikte aşağı ok tuşuna basılarak aşağı kaydırılıp, grBar’ın altına getirilmelidir. Aşağıdaki şekli inceleyin.

Şekil 30

39

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

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

10. İş bittiğinde FLA dosyasında yapılan değişiklikler kaydedilmelidir

Böylece tüm klipler motion tween için ayarlanmış olur.

MOTİON TWEEN’LERİN EKLENMESİ

Yukarıda görüldüğü gibi, motion tween kullanarak Stage’de bir sembol kopyasının konumu, parlaklığı, alfası (şeffaflığını) ya da tonlaması değiştirilebilir. Properties denetçisinde yer alan Color menüsünü kullanarak kopyanın (sembol örneğinin) parlaklık, alfa ya da tonlaması ile oynanabilir. Motion tween uygulanan bir kopya varsa, bu menüden anahtar karenin değerleri değiştirildiğinde yeni ayarlanan özelliklerden başlayan ya da ona doğru giden bir geçiş oluşturulur.

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

1. bookstore9.fla dosyasında mcProductsMenu öğesi çift tıklanarak açılır. menu tween katmanı seçilir

Bir önceki uygulamada hazırlanan klipler ve içerikle çalışılacaktır.

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

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çilmelidir. İlk dikkat edilmesi 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’in katmana doğru şekilde eklendiğini göstermektedir. 3. adımdaki şekilde motion tween’lerin bulunduğu bir Timeline görülmektedir.

3. İkinci bir motion tween eklenerek menü yukarı hareketlendirilir ve Timeline’da gezinerek animasyon denetlenir

40

2. adımı uygulayarak 12 ve 20. kareler arasına bir motion tween eklenmelidir. 12 ve 20. kareler arasında herhangi bir kareye sağ tıklanıp, açılan menüden Create Motion Tween’i seçilmelidir. İş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 animasyon izlenebilir.

Şekil 31

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

Bir motion tween’in başlangıç karesi seçildiğinde, Properties denetçisinde Ease çubuğu görülebilir. Bu kullanılarak, motion tween süresince animasyon yavaşlatıp hızlandırılabilir; 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öylenebilir. Negatif bir sayı seçildiğinde 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çilip, Properties denetçisi açılmalıdır. Ease çubuğu 100’e getirildikten sonra menü hızlı bir şekilde açılmaya başlayıp aşağı gelirken yavaşlayacaktır. Daha sonra 12. kare seçilmeli ve çubuk -100’e getirilmelidir. Menü giderek artan bir hızla kapanacaktır.

41

Şekil 32

5. Menüye bir parlaklık tween’i eklenir ve Timeline’da gezinerek animasyon denetlenir

Menu tween katmanında Kare 1’de mcProductsMenu kopyası seçilmelidir. Parlaklık özelliğine ulaşabilmek için kare değil kopya seçilmelidir. Properties denetçisinde Color menüsünden Brightness değerini %85’e getirilmelidir. Kare 12’deki mcProductsMenu kopyası seçilip, parlaklık 0’da olduğundan emin olunmalıdır. Timeline’daki oynatım kafası kaydırılarak animasyonun aldığı şekil izlenebilir.

Şekil 33

6. FLA dosyasındaki diğer iki menüye de yukarıdaki adımlar uygulanmalıdır. Oynatım kafası hareket ettirilerek animasyonun doğru çalışıp çalışmadığı kontrol edilir

FLA dosyasında kalan iki menüye de aynı işlemleri uygulandığında, üç menünün de animasyonu hazır olacaktır. Animasyonların eklenmesi bittikten sonra oynatım imleci Timeline’daki kareler üzerinde sürüklenip ve animasyon izlenebilir. Enter tuşuna basılarak animasyon Flash düzenleme ortamında oynatılabilir. Animasyon Stage’de başlayıp sonuna kadar gösterilecektir.

7. Ana Stage’e dönülür. Kütüphane temizlenir ve FLA dosyası kaydedilir

Düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’e dönülmelidir. mcProductsMenu, mcCompanyMenu ve mcContactMenu öğelerini kütüphanedeki movie clips klasörüne taşıyarak ortalık temizlenmelidir. Yapılan değişiklikler kaydedilmelidir.

ALFA SEVİYELERİNİN ANİMASYONU

Bir sembol kopyasının alfasını değiştirmek, kopyayı Stage’de gezdirmekten pek farklı değildir. Bir önceki çalışmada yapılan parlaklık düzeyi değiştirmeyle de neredeyse aynıdır. Daha önce de anlatıldığı 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

42

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

1. grGlow seçilir ve mcBookGlow adlı bir film klip sembolüne dönüştürülür. Layer 1’i de glow animation olarak isimlendirilir

Gerekiyorsa düzenleme çubuğunda Scene 1’e tıklayarak ana Stage’de bulunulduğundan emin olunmalıdır.

mcLogo içerisinde grGlow kopyası bulunmalıdır. 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 girilir, buradan grGlow kopyasını seçilip F8’e basılarak o mcbookglow adlı bir klip sembolüne dönüştürülmelidir. Eklenen animasyon sürekli tekrar edeceği için, grafik sembolü klibe dönüştürülmek zorundadır. pageTurn ve logo katmanlarının kilitli olduğundan ve grGlow kopyasının seçildiğinden emin olunmalıdır. mcBookGlow üzerine çift tıklanarak kopya açılıp, Layer 1 olan katman adı glow animation olarak değiştirilmelidir. Şimdi aşağıdaki şekilde görüldüğü gibi iç içe üç Timeline’a bulunmaktadır.

Şekil 34

43

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

glow animation katmanında 35. kare seçilip, yeni bir anahtar kare eklenmelidir. 1. karenin içeriği 35. karedeki anahtar kareye kopyalanacaktır.

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

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

glow animation katmanında 35 no’lu kare seçilmelidir. Tools panelinden Transform aracı seçilip, bir köşesinden tutup merkeze çekerek grGlow kopyası küçültülmelidir. Sembolün bozulmasını önlemek ve ölçü oranlarını korumak için fareyle sürükleme sırasında Shift tuşunu basılı tutulmalıdır. Dördüncü adımdaki şekilde görüldüğü gibi büyük kısım grLogo’nun arkasında saklı kalacak kadar ufaltılmalıdır. 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 ise).

4. Properties denetçisi ve motion tween kullanılarak grGlow’un şeffaflığı değiştirilir

Kare 35’teki grafik büyüklüğünü değiştirdiniz. Şimdi kopyanın alfası değiştirilmelidir. Yine Selection aracıyla Kare 35’teki kopyayı seçilmelidir. Properties denetçisinde Properties sekmesindeki Color listesinden Alpha’yı seçilip, alfa değeri %100’den %80’e indirilmelidir.

44

Şekil 35

5. Grafiği boyutlandırmak için motion tween eklenir ve sonra Timeline’daki oynatım kafası kaydırılarak animasyonu izlenebilir

Kare 1 ve 35 arasına tıklanıp ve Properties denetçisi açılmalıdır. Tween listesi None’dan Motion’a getirilmelidir. Aynı adımlar Kare 35 ve 70 arasında tekrarlanmalıdır. 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 komutu verilebilir.

6. mcBookGlow kütüphanedeki Movie Clips klasörüne taşınır. Bir sonraki çalışmadan önce FLA dosyası kaydedilmelidir

KLİP DÜĞMESİNİN ANİMASYONU

Bu uygulamada, klip düğmesine bir “mouse-over” efekti eklenecektir. 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). Bu uygulamada kullanılacak özel etiketler _over ve _down olacaktır (_over normal bir düğme sembolünün fare ile üzerine gelinmiş, _down da fare ile basılmış hâli). Bu daha önceden hazırlanmalıdır.

Bu uygulamada yine bookstore9.fla dosyasıyla çalışma yapılacaktır.

1. Kütüphaneden mcSampleChapter klibi bulunur ve üzerine çift tıklanır

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

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

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 eklenip, aynı katmandaki 14 ve 25. kareler için bu işlemi tekrarlanmalıdır. Biri _over,

45

diğeri de _down hâli için olmak üzere iki animasyon hazırlanacaktır. _over hâli animasyonunun, _down animasyonunun tam tersi olması istendiği için, _over animasyonunun başlangıcı ve _down animasyonunun bitişi aynı kare olmalıdır.

Şekil 36

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

46

Şekil 37fill katmanında 5. kareyi seçilip, Properties denetçisi açılır. Tween menüsünden

Motion’ı seçerek bir motion tween eklenmelidir. Kare 14’te grFill’i seçildikten sonra, Properties denetçisinde Color menüsünden Brightness’ı seçilip, değeri %85’e ayarlanır.

İşiniz bitince kare 15’e F6’ya basarak bir anahtar kare eklenir. Properties denetçisinden Tween olarak Motion seçimini yapılmalıdır. Oynatım kafası gezdirilerek oluşturulan motion tween’ler izlenir.

4. mcToc kopyası için yukarıdaki adımlar tekrarlanır

mcToc klibi aynı zamanda kütüphanede de bulunmalıdır. Kütüphanedeki sembole çift tıklanarak sembol düzenleme modunda açılmasını sağlanır. Aynı adımlar mcSampleChapter için de yapılarak düğmelerin aynı şekilde hareketlenmesi sağlanmalıdır.

5. Klibin Timeline’ında fill katmanı kilitlenir, değişiklikler kaydedilir ve ana Stage’e dönülür

SHAPE TWEEN OLUŞTURMA

Shape tween, düzenlenebilir bir vektör grafiğin şeklini zaman içinde değiştirmenizi sağlar. Çizgilerin uzunluğu değiştirebilir, çizgiler bükebilir ya da bir vektör çizimi değiştirilerek çok ilginç efektler elde edilebilir (renk değiştirme dahil). Flash tüm hesaplamaları üstlenerek sizi her kareyi tekrar çizme zahmetinden kurtarır: Tek yapılması 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?

Tween’in uygulanması üzerinde kontrol ç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 etmeye yardımcı olmak için Flash 8’de şekil izleri bulunmaktadır. Bu sayede anahtar kareler arasında bir noktanın geleceği pozisyonlar belirlenebilir (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 şekli olsun. Kedinin kulağını temsil eden ve kulak ucunda “a” harfi olan üçgen biçimli şekil izini ve karşılık gelen iz de köpeğin kulağına eklendiğinde, 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

47

nedenle fazla kullanılması tavsiye edilmez. Şekil izlerini eklemek için shape tween açıkken Modify > Shape > Add Shape Hint komutu verilebilir.

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, ikincisi sadece düz çizgi ve köşeli şekillerde kullanılabilir.

Bu uygulamada Web sitesinin sol üst köşesindeki kitap logosuna sayfa çevirme efekti ekleyeceğiz. bookstore9.fla dosyasında çalışmaya devam edilecektir.

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

Sayfa çevirme animasyonu iki bölümden oluşur. İlk bölüm için bu uygulamada bir shape tween hazırlanacaktır.

2. Layer 1’in adı animation olarak değiştirilir. 10. kareye bir anahtar kare eklenir ve yeni anahtar karenin içeriği düzenlenmeye başlanır

Katman adını değiştirip anahtar kare ekledikten sonra, 10. kareyi düzenlemeye başlanabilir.

10. karede basit bir çizgi bulunmaktadır. Selection aracını seçilip, zemine tıklanarak çizginin seçili olmadığından emin olunmalıdır. Fareyle çizginin üzerinde gelindiğinde şekil 39 daki gibi kavisli bir çizgi görülmelidir:

Şekil 38

48

Çizgiyi sürükleyerek bükülmesini sağlanmalıdır. Şekil 40 taki eğri elde edene kadar devam edilmelidir:

Şekil 39

Çizginin üst ucuna gelindiği zaman, imleç okun yanında bir köşe şeklini alacaktır. Çizginin ucu tutup çekilerek şekil 41 deki durum elde edilir.

49

Şekil 403. Properties denetçisinden shape tween eklenir ve animasyon test edilir

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

Şekil 41

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

4. Shape tween hazır olduğunda ana menüden File > Save ile dokümanda yapılan değişiklikler kaydedilir

Sıradaki uygulamamızda shape tween arkasına kare kare animasyon ekleyerek çevrilen sayfa animasyonunu tamamlamaktır.

KARE KARE ANİMASYON HAZIRLAMA

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.

Bu türde animasyonları hazırlamak hem çok zaman alır, hem de dosya büyüklüğü

50

nispeten daha büyük olur. Fakat bu yöntem Flash 8 araçları 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 şey onunla yapılmaz.

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.

1. bookstore9.fla dosyasında mcPageTurn klibi açılır (önceki uygulamada oluşturulan shape tween)

1 ve 10. kareler arasında bir shape tween bulunuyor, animasyonun ilk yarısı budur. İkinci bölüme gereken detay seviyesini yakalamak için kare-kare animasyon yapılacaktır. Animasyon başka bir shape tween kullanarak da tamamlanabilir fakat bu şekilde yapılmasıyla harekete daha hâkim olunacaktır.

2. Shape tween bitimine yeni bir anahtar kare eklenir ve onion skinning açılır

Onion Skin Outlines düğmesine basarak onion skinning açılmalıdır. Bu son derece yardımı olacak bir araçtır. Bu araç sayesinde sadece çalışılan kare değil, bir önceki ve bir sonraki kareler de görülebilir. Böylece çizimleri tam yerine oturtulabilir ve yumuşak bir animasyon elde edilebilir. Üzerinde çalışılan kare tam renkliyken (onion skinning yokmuş gibi), komşu kareler hafif soluk ya da ana hatlarıyla görünecektir.

Şekil 42

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

51

Şekil 433. Yeni anahtar karenin içeriği değiştirilir

Önceki uygulamada, bir çizgiyi bükerek sayfa dönüyormuş gibi bir görüntü elde edildi. Bu çalışmada da her karede sayfayı daha ileri taşınacak ve uzunluğunu biraz değişecektir. 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şturulan anahtar kare seçilmeli ve Stage’de çizgi seçimden çıkarılmalıdır. Fare çizginin üst kısmına getirilip, imleç değiştiğinde çizginin ucunu kaydırarak çizginin bükülmesini sağlanmalıdır. Şimdi kare bir soldakinden farklı oldu.

4. Yeni anahtar kareler eklenmeli ve sayfa kitabın kapağına ulaşana dek grafik değiştirilmelidir

Kare 11’deki değişiklikler tamamlandığında kare 12 seçilmeli ve F6 ile yeni bir anahtar kare eklenmelidir.

11. karenin içeriği 12’ye kopyalanacaktır. Kare 11’de yapıldığı gibi çizginin üst kısmını daha sağa götürülmelidir. Gerekirse sayfa bükülmelidir, bunun için kıvrık çizgi imleci görünecek şekilde çizgi ortasından tutulup ve sayfa bükülmelidir. 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 olunmalıdır. Çizginin sadece üst ve orta kısımlarıyla oynanmalıdır.

Onion skin özelliği ile komşu kareler görülebildiği için, düzenleme sırasında animasyonun nasıl gittiği konusunda iyi biri fikir sahibi olunabilir. Oynatım kafasını Timeline’da gezdirerek de animasyon kontrol edilebilir.

52

Şekil 44

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

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

Kare 85’i seçin ve F5’e basarak bir kare ekleyin, böylece animasyon duraklayacaktır. 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.

Şekil 45

53

6. File > Save As ile dosya kaydedilir

Düzenleme çubuğunda Scene 1’e tıklanarak ana Stage’e dönülmelidir. Dosya kaydedilip, kapatılmalıdır.

BİR YOL BOYUNCA ANİMASYON OLUŞTURMAK

Daha önce bir motion tween uygulandığında sembol 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 istenebilir (sarhoş bir arı animasyonu yaptığınızı düşünün). Bu motion guide katmanında bir motion guide (hareket kılavuzu) kullanarak çok çabuk ve kolay bir şekilde halledilebilir. Bu özel katmanda Pencil, Pen ya da Line araçlarıyla çizgi çizilebilir ve motion guide altındaki katmandan bir sembol bu çizginin iki ucundan birine iliştirilebilir. Bu yolun motion guide katmanında olması gerekir, burada yapılan çizimler Flash dosyası tamamlandığında görünmeyecektir. Hareket kılavuzları ile nesneler çember, kare, düz çizgi, eğri ve çizilebilen her türlü yol üzerinde hareketlendirilebilir (şekliniz bir kenar çizgisi yani bir stroke olduğu sürece). Hareket kılavuzu kullanarak küçük bir sembol harita üzerinde gezdirilecektir.

1. CD-ROM’da lesson05/start dizinindeki mapStarter.fla dosyası açılır ve sabit diskteki TechBookstore klasörüne kaydedilir

Bu dosya daha önce çalışılan ??? dosyasına benzemektedir. 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 kaydedilecektir.

2. map katmanı seçilir ve car adlı yeni bir katman eklenir. Kütüphane açılır ve grafik klasöründe grCar ve grTree bulunur. grCar car katmanına, grTree de map katmanına sürüklenir

Kütüphanedeki grCar sembolü animasyon için kullanılacaktır. grTree sembolü Stage’de statik bir grafik olacaktır. İşe başlamadan önce map katmanının kilidi açılmalıdır.

grCar Stage’in solundaki Brannan Street’e yerleştirilir. Ağaç haritanın sağındaki Macromedia Park’ın sağ alt köşesine koyulmalıdır. Şekil 47 den faydalanılabilir.

54

Şekil 46

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

map katmanının kilitli olduğundan emin olunmalıdır. car katmanını seçilip, Insert New Layer düğmesinin yanındaki Add Motion Guide düğmesine tıklanır. car katmanı otomatik olarak içeri alınır ve hareket kılavuzu uygulanır. Yeni katmana otomatik olarak Guide: car adı verilir ve car katmanının üzerinde yer alır.

Şekil 47

Pencil aracını seçilip, Merge Drawing modelini kullanıldığından emin olunmalıdır. Hareket kılavuzu çizmek için Object Drawing modeli kullanılmaz çünkü teknik olarak grafik gruplanmış olur ve çizilen yol sembol tarafından kullanılamaz. Tools panelinin Options bölümünden Smooth seçeneğini de seçilmelidir.

55

Smooth seçeneği ile fazla kırıklı olmayan çizgiler çizilebilir ama istenilirse yola birkaç “tümsek” eklemenize de izin verir. Artık arabada cetvel gibi bir çizgide gitmek zorunda değil. Eğer yolun çok akıcı olduğunu düşünüyorsanız, Smooth yerine Ink seçeneğini seçilip, yol baştan çizilmelidir. Böylece bir ölçüye kadar yumuşatma olsa da kenar çizgileri hiç değiştirilmez.

Yeni Guide: car katmanı üzerine Pencil aracı ile bir yol çizilir. Yol Stage’in solundaki Brannan Street’ten sağdaki ağacın yanına gidecek. Arabanın ağaca “çarpmasını” istenildiği için yol ağacın gövdesinde bitmelidir. Yol caddeyi takip etmeli ve “We Are Here” yıldızından dönerek yolun sonundaki ağaca yönelmelidir. Yola birkaç kıvrım ve tümsek eklenmelidir. Yol ağaca ulaştığında çizgi şekil 49 daki gibi yukarı doğru bükülmelidir.

Şekil 48

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

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

56

Şekil 49

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

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

car katmanında kare 70’e tıklanmalı ve grCar’ı ortasındaki kayıt noktasından tutularak yolun sonuna iliştirilmelidir.

5. car katmanında 1. kare seçilir ve Properties denetçisinden bir motion tween eklenir

car katmanında kare 1’i seçilip, Properties denetçisi açılır. Properties denetçisindeki Tween listesinden Motion’ı seçilir. Katmandaki kareler seçildiğinde, Snap kutusu seçili ve Orient to path seçilmemiş olsun ki; car katmanı mor renk alıp, motion tween’i gösteren ok animasyon karelerini belirtecektir.

6. Animasyonun sonuna Ease değeri eklenerek arabanın tween sırasında hızlanması sağlanır

Animasyonun ilk karesini seçilmeli ve Properties denetçisi açılmalıdır. Ease kutusuna -100 değeri girilmelidir ki, böylece Flash Player’da animasyon oynatılırken iki anahtar kare arasında arabanın hızlanması sağlanır. Control > Test Movie’yi seçerek animasyonu izlenebilir. Animasyon bu aşamada sürekli tekrar edecektir.

7. Timeline üzerinde gezinerek animasyon izlenebilir ve sonra motion tween üzerinde değişiklik yapılır

57

Oynatım kafasını tıklanıp hareket ettirerek çizilmiş olan yol boyunca motion tween görülebilir. Eğer araba yolu izlemiyorsa arabanın, motion guide katmanında oluşturulan çizginin her iki ucuna da iliştirildiğinden emin olunmalıdır.

Hareket yolunun arabanın çarpacağı ağacın yanında istenilen gibi olmadığı ve arabanın ağaca çarpmadığı görülecektir. İstenilen sonucu almak için arabanın döndürülmesi gerekmektedir. car katmanında iken, Timeline üzerinde 65 no’lu kare civarında arabanın dönmeye başlayabileceği uygun bir nokta bulunup, F6 ile yeni bir anahtar kare eklenmelidir. Burası animasyonun yeni bölümünün başlayacağı yer olacaktır.

Animasyonun sonunda 70 no’lu kare seçilmeli ve ardından Tools panelinden Free Transform aracı seçilmelidir. grCar etrafında tutacaklar belirir. Fare grCar’ın sağ üst köşesine getirilerek, döndürme imlecinin belirmesi sağlanır.

Şekil 50

58

Arabayı döndürmek için grCar’ın köşesine tıklanıp, araba ağaca doğru yönelene dek sürüklenmelidir. İş bittiğinde Timeline üzerinde oynatım kafasını hareket ettirilerek animasyonun son hali izlenebilir.

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

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

map star katmanı seçilip, Insert New Layer düğmesine tıklanır. Yeni katmana çift tıklanır ve actions adını verilir. 70 no’lu kareye (veya animasyondaki son kareye) tıklanıp, F6 ile yeni bir anahtar kare eklenmelidir. Yeni anahtar kareyi seçilmeli ve Actions paneli açılmalıdır. Script Assist hâlâ açıksa Script Assist düğmesine basarak o kapatılmalıdır. Script paneline aşağıdaki ActionScript kodunu yazılmalıdır:

stop();

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

9. Dosya map.fla olarak kaydedilmelidir

Dosya map.fla adıyla kaydedildiği zaman bu kayıt daha önce oluşturulan dosyanın yerini alacaktır. Dosya kaydedilip, kapatılmalıdır.

59

BÖLÜM 5

ANİMASYON ÖRNEKLEME

ÖRNEK ANİMASYON ÇALIŞMASI

Bu çalışmada kromatografi ile ilgili bir örnek animasyon aşamaları ile gösterilmiştir. Bu aşamalar sırasıyla resimlerle gösterilmiş olup bu animasyon butonlarla ilerleyen bir animasyondur. Toplam 6 aşamada gerçekleştirilmiştir. Şimdi bu aşamalar aşağıda resimlerle örneklenecektir.

1. Aşama

Bu aşamada ilk olarak animasyon için bir ön sayfa hazırlanmıştır. Burada animasyon konusu belirtilmiştir.

60

Şekil 51

2. Aşama

Bu aşamada konu bir deneyle anlatılmaya başlanmıştır.Deney hem görsel hem de anlatımlarla desteklenmiştir.

61

Şekil 52

Şekil 533. Aşama

Bu aşamada resimlerle gösterilen yeşil karışım animasyonda hareket halindedir.

Şekil 54

62

Aşağıda hareketin bitmesi sonucu yeşil karışımın hali gösterilmektedir.

Şekil 55

4. Aşama

Bu aşamada resimde gösterilen elin hareketiyle yeşil karışımın üzerine yeni bir çözgen boşaltılmaktadır.

63

Şekil 56

5. Aşama

Bu aşamada kırmızı halka içine alınarak belirtilmiş olan vana açılır ve yeşil karışım bilşenlerine ayrılmaya başlar.

64

Şekil 57

Bu ayrılma aşağıdaki resimde gösterildiği gibi bileşenlerin farklı hızlarda hareketleriyle izlenebilmektedir.

65

Şekil 58

6. Aşama

Bu aşamada sarı bileşenin daha hızlı hareketi ile behere daha önce dolduğu gözlenebilmektedir.Sarı bileşen behere dolduğunda kırmızı ile gösterilen vana kapatılmıştır.Aşağıdaki son resim animasyonun sonunu göstermektedir.

66

Şekil 59

67

Şekil 60

68

EK

MACROMEDIA FLASH PROGRAMINA AİT TANIMLAR

69

70

71

MACROMEDIA FLASH PROGRAMINA AİT TANIMLAR

New Window: Yeni pencere açmamıza yarar.

Arrange All: Bütün pencereleri tek pencerede gösterir.

Cascade: Pencereleri küçülterek ard arda sıralar.

Toolbar: Araç Kutusunun ayarlanmasını sağlar.

Inspector: Scene lerin müfettişliğini denetlemesini yapar onlar hakkında bilgi verir.

Controller: Kontrol tablosunun çıkmasına yarar.

Colors: Renk ayarlaması yapmaya yarar.

Output: Çıkışta verilerin alınmasına yarar.

Library: Kendi çalıştığımız penceredeki kullandığımız buton, movie vs. burada saklar.

Play: Sahnemizin oynatılmasını sağlar.

Rewind: Sahnenin ilk frame inin dönmesini sağlar.

Step Forward: Adım adım ileriye götürür.

Step backward: Adım adım geriye götürür.

Test Movie: Fliminizi tüm sahneleriyle beraber test etmenizi sağlar.

Test Scene: Seçili sahneyi test etmenizi sağlar.

Loop Playback: İşletilen harekelerin hiç durmadan devam etmesini sağlar.

Play all Scenes: Bütün sahnelerin oynatılmasını sağlar.

Enable Frame Actions: Actionları aktifleştirir.

Enable buttons: Düğmeleri etkinleştirir.

Mute Sounds: Ses dosyalarını kapatır.

Frame: Frame ayarlarını yapmaya yarar.

Layer: Layer ayarlarını yapmaya yarar.

Scene: Sahne ayarlarını yapmaya yarar.

72

Movie: Çalışma sayfasının ayarları buradan yapılır.

Font: Kullanılacak fontun seçimine yarar.

Paragraph: Yazının hangi çerçeve de olacağını ve paragraf aralığını belirler.

Style: Yazının hangi formatta yazılacağını belirlememize yarar.

Kerning: İstenilen belgeyi veya Sahneyi siler.

Transform: İstenilen belgeyi veya şekli döndürmemize, yönünü değiştirmemize yarar.

Arrange: İstenilen yazının veya şeklin önde veya arkada olmasına karar verilen yerdir.

Curves: Çizilen çizgilerin yumuşak mı yoksa kesin çizgili mi olacağının ayarlarını yapar.

Frames: Frameler de yer alan bilgileri ters çevirmeye yarar.

Aling: Birden fazla şeklin nizamını, düzenlemesini yapar.

Group: Farklı şekilleri tek parçaymış gibi göstermek için kullanılır. Onları bir araya toplar.

Ungroup: Aynı şekilmiş gibi görünen parçaları ayırmaya yarar.

Convert To symbol: İşaretli olan sembolden aynı özelliklere sahip başka bir sembol oluşturur.

New Symbol: Yeni buton, movie veya grafik yaratmak için kullanılır.

Layer: Yeni layer açmak için

Motion Guide: Motion Guide oluşturur.

Frame: Frame Oluşturur

Delete Frame: Seçili frame i silmeye yarar.

Keyframe: Yeni keyframe oluşturur.

Blank Keyframe: Özel bir keyframe açar.

Clear Keyframe: Seçili keyframe leri temizlemeye yarar.

Creat Motion Tween: Sahne üzerindeki objelere hareket vermek için kullanılır.

Scene: Yeni sahne oluşturur.

Remove Scene: Seçili sahneyi siler.

73

Goto: İstenilen satıra gitmemize yarar.

Outlines: Çizilen karakterlerin dış çizgilerini verir.

Fast: Outlines dan çıkmaya yarar.

Anatialias: Görünümde analitikliğini sağlar.

Timeline: Timeline ın görünüp saklanmasını sağlar.

Workarea: Çalışma alanının görünüp saklanmasını sağlar.

Rules: Cetvelini görünüp saklanmasını sağlar.

Grid: Sahnede yardımcı çizgilerin konulmasını sağlar.

Snap: Çizim yaparken bir çizgi ile diğer çizgiyi kolaylıkla birleştirmeye yarar.

Undo: Yanlışlıkla yapılan işlemi geri almamıza yarar.

Redo: Yapılan işlemi bir ileri alma işlemine yarar.

Cut: İşaretlenmiş kısmı kesmeye yarar.

Copy: İşaretlenen kısmı kopyalamaya yarar.

Paste: Daha önceden copy veya cut işlemleri ile yapılmış işlemi yapıştırmaya yarar.

Paste in Place: Panonun içeriğini flash dosyanıza yapıştırır ve orijinal dosyaya bir bağlantı oluşturur.

Paste Special: İletişim kutusunda göreceğiniz seçenekler, panonun içeriğine göre farklılık gösterir.

Clear: Yapıştırılan belgeyi silmeye yarar.

Duplicate: İşaretlenmiş kısmın bir kopyasını yaratır.

Select All: Sayfadaki tüm nesneleri seçebilmemizi sağlar.

Deselect All: Seçili nesnelerin seçimlerini kaldırır.

Copy Frames: Timeline'da seçili olan frame'leri kopyalamanızı sağlar.

Paste Frames: Kopyalanmış frameleri, seçili olan frame'e yapıştırır.

New: Yeni bir proje açmaya yarar.

Open: Önceden yapılmış projeleri açmaya yarar.

74

Open as Library: Önceden tasarlanmış projelerde kullanılan kütüphaneleri yeni projelerde de kullanmaya yarar.

Close: O anki projeyi kapatır.

Save: Projeyi saklamaya yarar.

Import: Projelerimize her hangi bir formatta yapılmış bir resim dosyası, daha önceden tasarlanmış bir projeyi, mov dosyalarını vb .

Export Movie: Film olarak çıktı almak için kullanılır.

Export İmage: Resim olarak çıktı almak için kullanılır.

Publish Settings: Burada Flash projemizin ekran görüntüsü için ayar yapmamızı sağlar.

Publish Preview : Yapılan ayarları test etmemizi sağlar.

Publish: Flash projemizi çalıştırır ve swf dosyası haline getirir.

Page Setup: Sayfa ayarları yapmamıza yarar.

Print Priview: Yazıcıdan çıkaracağımız belgenin ön izlenimini verir.

Print: Yazıcıya gönderme işlemine yarar.

Asistans: Çizgilerinizi düzenleştirmede,monitörünüzün çözünürlüğünü ayarlamada size yardımcı olur.

75

KAYNAKLAR

Brown, K. and Petersen, D., 1998, Ready-to-Run Java 3D with plug-and-play code, John Wiley and Sons, Inc., 400-501 p.

James English, 2006, Macromedia Flash Kaynağından Eğitim, İstanbul, 1-145 s.

Phillip Kerman, 2005, Sams Teach Yourself Macromedia Flash 8 in 24 Hours, UK, 230-245 p.

Gurdy Leete, Ellen Finkelstein, 2002, Macromedia Flash MX for Dummies, Newyork, 600-638 p.

Andy Anderson, Steve Johnson, 2005, Macromedia Flash 8 On Demand, UK, 32-48 p.

Robert Reinhardt, Snow Dowd, 2006, Macromedia Flash 8 Bible, Lyon, 98-130 p.

Uğur, A., 1996, Üç Boyutlu Çizim ve Animasyon, Yüksek Lisans Tezi, İzmir, 106 s.

“Web3D Consortium”, Web3D Consortium, 2000, http://www.web3d.org

http://en.wikipedia.org

http://www.coreweb3d.com

http://www.javasoft.com

http://www.adobeegitim.com

http://www.wooster.com

http://www.studyhplc.com

http://micromountain.com

http://shsu.edu

http://purchon.com

http://cem.msu.edu

http://infochembio.ethz.ch

http://spectroscopynow.com

76

http://chemtube3d.com

77