Motion Tween İle Çalışmak

Motion Tween Flash ta en çok kullanılan nesne hareketlendirme biçimidir.
Motion tween de siz iki kare belirlersiniz. Nesnenin ilk karedeki ve son karedeki durumunu flash'a gösterirsiniz. Daha sonra, flash bu iki kare arasındaki kareleri kendi oluşturur ve izlediğinizde, o nesne ilk karedeki konumundan, son karedeki konuma gidiyormuş gibi görünür. Mantığı budur.

Önce soldaki tools menüsünden, daire oluşturma aracını seçelim ve bir daire oluşturalım.



dairemizi oluşturduktan sonra

ona hareket vereceğiz.

daireyi seçiyoruz ve yukarıdaki timeline bölümünde en baştaki kareye sağ tıklayıp, create motion tween seçeneğine tıklıyoruz. Şimdi bu daireye motion tween özelliğini vermiş olduk.



Sıra ikinci kareyi eklemeye geldi. İkinci kareyi de ekledikten sonra, flash aradaki kareleri otomatik olarak oluşturacak.
biraz daha ilerideki bir kareye, sağ tıklayıp insert keyframe diyoruz.



bu işlemi yaptıktan sonra timeline ımız şu şekilde görünmeli:



iki kareyi de ayarladık ama önce bir şey yapmamız gerekiyor. İlk karede dairenin konumu ilk konum, ikinci karede ise son konum olmalı. ancak ikinci karede daireyi kıpırdatmadık değil mi? ikinci kareye (insert keyframe dediğimiz ) tıklıyoruz ve soldaki tools menusunden arrow tool (siyah ok) u seçiyoruz ve daireyi su an bulundugundan farklı bir konuma tasıyoruz. Hatta farklı bir konuma taşıdıktan sonra, yine tools menusunden Free Transform Tool u seçerek, dairenin boyutlarını da değiştiriyoruz.



Evet, motion tween bu.
Şimdi nasıl bir şey olduğuna bakalım,

Shape Tween İle Çalışmak

Shape Tween genelde nesneleri birbirine dönüştürmede kullanılır. Ben, bu derste mavi renkli bir dörtgeni, kırmızı bir daireye çevireceğim. Bunun gibi, kendi vektörel çizimlerinizi de dönüştürebilirsiniz. Dönüşüm sırasında rengin değişmesi de, iki renk arasındaki bütün renklerin gösterimi ile olduğundan, güzel bir geçiş oluyor.

Önce dediğim gibi mavi bir dörtgen çiziyoruz.



Çizdikten sonra, timeline da dönüşümün bitmesini istediğiniz kareye sağ tıklıyor ve insert keyframe yapıyoruz.



Insert keyframe yaptığımız kareye tıklıyoruz. Daha sonra mavi dörtgeni ( burası önemli insert keyframe yaptığımız karenin seçili olması lazım. ) siliyoruz. Hemen sonra, onun yerine kırmızı bir daire çiziyoruz ve çizimi işlemini bitiriyoruz.



Şimdi bu iki nesneye shape tween vereceğiz ve dörtgen, bir daireye dönüşecek.
dörtgeni çizdiğimiz kare ile, daireyi çizdiğimiz karenin arasındaki herhangi bir yere tıklıyoruz ve aşağıda properties menüsünde, tween seçeneğini shape yapıyoruz.



Bu işlem de bittikten sonra timelineımızın şu şekilde görünmesi gerekiyor :



Shape tween de bu kadar.

Basit Bir Banner Yapalım

Joomla! da flash'ı kullanmamizin nedenlerinden biri de bannerlar olsa gerek.

Yeni bir sayfa açıyoruz ve Asağıda properties bölümündeki size: yazısının yanındaki butonu tıklıyoruz. Butonda "550 x 400 pixels" yazmalı. Varsayılan ayar bu. Açılan pencerede bannerımızın boyutlarını ayarlıyoruz.



Bannerımızın boyutlarını ayarladıktan sonra, çalıştığımız sayfa o boyutları alacak.



tamam, ben örnek olarak bir yazı koyacağım ve onu bannerın içinde dolaştıracağım. soldaki tools menüsünden, text tool u seçiyoruz, ve yazıyı yazıyoruz.



yazıya motion tween özelliğini veriyorum ve inser keyframe dedikten sonra, yeni yerine sürüklüyorum, ondan sonra tekrar daha uzak bir noktaya insaert keyframe yapıyorum ve tekrar yerini değiştiriyorum...



evet, benim bannerım bitti. siz de daha ilginç şeyler yapabilirsiniz. line tool ile çeşitli çizimler yapabilirsiniz. shape tween ilecisimleri birbirine dönüştürebilirsiniz.

Tracing Bitmap

video versyon :
[COLOR=#5c5c5c] Flash Ders [ 4 ]
Tracing bitmap, çizim konusunda işimizi bir hayli kolaylaştırır. Herhangi bir resim dosyasını, flash 'a import ettiğimiz zaman, onu parçalayamayız, değiştiremeyiz. İşte burada trace bitmap yardımımıza koşuyor.
Tracing Bitmap, resim dosyasını bir vektörel çizime dönüştürür.

Önce resmi flash'a ekleyelim :



Import a tıkladığımızda çıkan pencereden dosyayı bulalım ve ekleyelim



Şimdi resmi seçelim ve modify menüsünden Trace Bitmap ı seçelim.



Açılan pencerede, Color threshold 50 , Mininmum Area ise 5 olsun. Başka bir ayarla oynamayın.



OK'e tıkla

Evet, Tracing Bitmap da bu kadar.
Bunları parça parça anlatıyorum, önümüzdeki derslerde hepsi birden lazım olacak.

Layer'larla çalışmak

Bu, timeline daki layer menüsü.



1. Birden fazla layer varsa, o anda çizim yaptığınızda hangi layer a çizim yapacağınızı gösterir.
2. Burada beyz nokta varken layer görünür eğer bu beyaz noktaya tıklarsanız layer görünmez.
3. Bu beyaz noktaya tıkladığınız zaman layer kilitlenir, üzerine yazamazsınız ve çizimleriniz karışmaz.
4. Layerlar bazen çok fazla olabilir ve düzenlemek için klasörlere ihtiyaç duyarsınız.
5. GuideLayer, Bu layerı bir layer seçiliyken oluşturabilirsiniz. o layera bağlanır ve ve guide layera bir vektör çizilir. Ve normal layerda da hareket edecek nesneye motion tween verilir ve guide layerdaki vektörün başına konulur. Insert keyframe olayını yaptıktan sonra da vektörün sonuna oturtulur ve böylece nesne o vektörü yörünge olarak algılar.
6. Insert Layer, layer ekleme butonudur.

Layer nedir;
Türkçe deki karşılığı katman'dır. Tek bir katmanda bir işten iki tane ve aynı anda yapamazsınız. Aynı anda olması için, ikinci bir katmanı oluşturup, timeline da aynı anda gerçekleşmeleri sağlanabilir.

Layerlar, timeline da bulundukları konuma göre birbirlerinin üzerinde görünürler. Örneğin yeni bir layer oluşturduk adı layer 2. Layer 1 de önceden vardı, layer 2 layer 1 in yukarısında olusacaktır ve her ikisine de aynı yerde bir daire çizin, layer 2 deki layer 1 dekini kapatacaktır.

Buton Yapıyoruz

Önce oluşturacağımız butonun, çizimini yapıyoruz...



butonumuzu seçip, F8 e basıyoruz...



ayarları resimdeki konuma getirip OK diyoruz...

şimdi bütün parçalar gruplandı... hepsi tek parça.
butona çift tıklıyoruz...



timeline da 4 tane büyük kare çıkacak anlamları :



1.(up) normalde butonun nasıl görüneceğini belirler.
2.(over) mouse butonun üzerine geldiğinde butonun görünümünü belirler.
3.(down) mouse a tıklandığı zaman butonun durumunu belirler.
4.(hit) mouse un tıklama alanını belirler.

bunların her birini keyframe yapıyoruz ve her birindeki durumlarını düzenliyoruz...

Butonlara Link Vermek

Bu derste bir önceki derste yapmayı öğrendiğimiz butonlara nasıl link verildiğini öğreneceğiz.. Öncelikle butonumuzu yapalım ve yaptıktan sonra convert to symbol olayını butona uygulamayı unutmayalım...
Bunları sorunsuz bir şekilde yaptıysak, dersimize geçebiliriz...

İlk olarak, animasyon içinde butona link vermek:



Buton seçiliyken Actions - Frame menüsünü açıyoruz... Orada bizi bir kod penceresi karşılayacak.. Eğer kod yazacak bir yer göremiyorsanız, oradan expert modu seçin... Butonun da seçili olduğundan emin olun...



bu kodu yazıyoruz...

on (press) {gotoAndPlay(5);

}

burada on(press) komutu butonun üzerine tıklanmasıyla ilgili...
sonraki gotoAndPlay(5) komutu da gidilecek frame'in numarasını belirtiyor... (5 i örnek olarak yazdım.. siz hangi frame e gitmesini istiyorsanız, onun numarasını yazın... )

kod yazma olayı şimdilik bitti. çalıştığını görmek istiyorsak, 5. frame e bir keyframe ekleyin ve o keyframe de herhangi bir çizim yapın... o çizimden biraz daha ilerideki bir kareye de bir keyframe daha eklerseniz, o çizimi görme süresi uzayacağından, daha rahat bir şekilde gözlemleyebilirsiniz...

Herhangi bir URL 'ye link vermek:

on(press) {
getURL("www.mjturkiye.net","_blank");
}

kullanıyoruz ancak Test Scene veya Movie bunu çalıştırmaz... Yani publish etmeniz gerekiyor çalışması için...

Tools Menüsü

1-Selection Tool: Nesneleri Tutmak ya da sahnede hareket ettirmek için Selection Tool kullanılabilir.

2-SubSelection Tool: Nesnelerin kontrol noktalarını göstermeye ve üzerinde değişiklik yapmaya imkan tanır.

3-Free Transform Tool: Nesnelerin boyutlarını ayarlamamızı sağlar. Seçildiğinde options menüsünde görünen çeşitli seçenekleri vardır.

4-Gradient Transform Tool: Sahnedeki dörtgenlerin renk tonlamasını yapmakta bize imkan sağlar.

5-Line Tool: Sahneye çizgi çizmeyi sağlayan araçtır. Çizdiği çizgileri Ctrl tuşuna basarak, mouse ile eğebiliriz.

6-Lasso Tool: Sahnedeki nesnelerde düzensiz seçim yapmayı sağlar.

7-Pen Tool: Hassaslığı kullanıcı tarafından ayarlanabilen çizgiler oluşturmada kullanılır.

8-Text Tool: Yazı ve yazı alanları oluşturur.

9-Oval Tool: Eliptik şekiller oluşturmaya olanak tanıyan araçtır.

10-Rectangle Tool: Dörtgensel şekiller oluşturmaya yarar. Üzerine basılı tutulup beklendiğinde, açılan sekmeden PolyStar Tool u seçerek, çokgenler oluşturabiliriz.

11-Pencil Tool: Serbest eğriler oluşturmaya yarar.

12-Brush Tool: Seçilen dolgu rengiyle boyama yapar. Seçildiğinde parametreleri options menüsünde çıkar,fırça şekil ve boyutları ayarlanabilir.

13-Ink Bottle Tool: Çizgilerin renk, kalınlık ve stil gibi özelliklerini değiştirmeyi sağlar.

14-Paint Bucket Tool: Kapalı eğrilerin içlerini dolgu rengiyle doldurmayı sağlar....

15-Eyedropper Tool: Sahnenin herhangi bir yerindeki rengi kullanmak üzere dolgu rengi olarak seçmeye yarar.

16-Eraser Tool: Sahnenin herhangi bir yerindeki çizimi silmeye yarar...

Kaynak:Mjturkiye

Beğeniler: 1
Favoriler: 0
İzlenmeler: 2403
favori
like
share
bulut_3584 Tarih: 17.11.2009 12:06
paylaşım adına teşekkürler.....
calory Tarih: 12.11.2009 23:01
şu movieclip e buton verme konusunda aynı kodları uyguluyorum ama buton ve movieclip aynı anda oynuyor bunu nasıl düzeltebilirim???
Firari Sevdam Tarih: 24.09.2009 13:48
bu benim çalışmam !
By_ultrAslan Tarih: 24.09.2009 13:41
[COLOR="PaleGreen"]@ Firari Sevdam,
O kadar emek ve zaman harcayıp paylaşım yapmışsınız. Konunun her halinden emek verildiği anlaşılıyor.
Ama keşke konuyu açmadan önce burda araştırma yapıp sadece swishmax üzerine çalıştığımızı öğrenseydiniz :5:
Bu yüzden konunuzu uygun bir bölüme taşımak zorundayım.
Firari Sevdam Tarih: 24.09.2009 13:29
Macromedia Flash

Eskiden sadece oyunlarda kullanılırdı vektör imajlar. Çünkü vektör imajlar, çok az yer kaplıyor ve hareketleri hesaplamak, koordinatları belirtmek gerçekten kolay oluyordu. Biraz matematik okuyanlar bilir. Vektör, bir yön bir de uzunluk bilgisi içerir. Yani bir düzlemde doğrusal bir çizgi çizdiğimiz zaman, bu çizgi vektörel anlamda dört adet bilgi içerir. Başlangıç noktası, yönü, uzunluğu ve rengi. Oysa Windows bu bilgiyi uzunluğu X birim olan bir çizgiyi her noktasını ayrı ayrı ölçerek saklıyor (bmp). Şimdi bir dikdörtgen çizelim; bu dikdörgenin uzunluğu 50 birim, genişliği 100 birim olsun. Vektörel olarak 4 adet yön bilgimiz, 4 adet başlangıç noktamız, 4 adet uzunluk bilgimiz ve iç rengi ile birlikte çizgilerin renkleride 5 adet bilgimiz var. Toplam 17 adet bilgi eder. Peki Windows bunu nasıl hesaplar; 50 x 100 = 5000 piksel. Her bir pikselin bir adet bilgi içerdiği varsayılırsa dosyamızın boyutu, yaklaşık 5000 byte eder. Ancak bunu vektörel cinsten ifade etmeye kalkarsak, dosyanın boyutu 17 byte olur. Sonuç ortada imajları vektör cinsinden ifade etmek inanılmaz ölçüde az yer kaplıyor. Bunu düşünen macromedia şirketi, web ortamında vektörlerden yararlanmak amacı ile bir program geliştirmişler. Adını da Flash koymuşlar. Yazıları ordan oraya zıplatıp, döndürüyorsunuz. Şekiller çarpışıp başka şekillere dönüyor. Sonra bir bakıyorsunuz yaptığınız animasyon 20Kb tutmuş. Eh artık bu kadar da olmaz. Bunu mutlaka bende yapmalıyım diyorsanız buyrun efendim, ders başlıyor...

Animasyon Prensipleri

Flash bir vektör grafik, animasyon ve etkileşim programı. Basit ve ilkel gözükmesine rağmen bayağı karışık. Çizimlerimizi yaptığımız sahneye "stage" denir. Yani sahne. Sahnenin üzerinde duran birkaç satırlık cetvelimsi bölümün adı "timeline" yani zaman eksenidir. Timelinenın birkaç satırdan oluşmasının sebebi flash animasyonlarımızın birden fazla katmana sahip olabilmesi. Hareket ettirdiğiniz her nesneyi ayrı bir Layere yerleştiriyorsunuz. Bu zaman ekseninin üzerinde bulunan her bir nokta animasyonumuzun bir bir "frame"ini yani animasyonumuzun bir film karesini oluşturur. Her kare sahnedeki objelerin değişim geçirebileceği bir anı simgeliyor.Objelerin sizin belirlediğiniz değişimleri geçirdikleri özel Frame'lerede "keyframe" denir. Yani anahtar kare. Bütün bunların solunda "Toolbox" tabir edilen alet kutunuz var ki bununla da yapmayı düşündüğünüz grafiğe uygun araçlar seçiyorsunuz. Flash movie'leri yani filmleri "Scene"lerden oluşur. Yani bölümlerden oluşur ki bu bölümleri kare kare oluşturmak zorunda değilsiniz. Tweening denilen metodla bir sonraki keyframe'i birkaç frame sonrasına yerleştirdiğinizde aradaki frame'lerde objenin nerede ve nasıl olacağını flash kendi hesaplar. Ancak bunu yapabilmek için objelerin "symbol" haline getirilmeleri gerekiyor.

Flash Çizim Yapma

Arrow (Ok aleti)

Bu aleti daha çok bir nesneyi seçmek için kullanırız. Ok eğer boş bir alanda duruyorsa altında dikdörtgen şekli vardır. Herhangi bir nesnenin üzerine doğru çekerseniz, altında dört yönlü bir şekil belirir. Eğer çizgilere doğru yanaştırırsanız, altında bir eğri belirir ki tutup çektiğiniz zaman başlangıç ve bitiş noktalarını bozmadan çektiğiniz yere kadar uzar. Oku çizgilerin köşesine doğru yanaştırırsanız, bu sefer altında iki çizgiden oluşan bir köşe belirir, tutup çekerseniz sadece köşenin yerini değiştirir. Bir nesnenin üzerindeyken bir kez tıklarsanız, sadece seçtiğiniz alan yada çizgi seçili olacaktır. Eğer iki kez tıklarsanız, şekle bağlı olan tüm nesneler seçili olacaktır. Sadece çizgileri seçmek için herhangi bir çizginin üstünde çift tıklamanız yeterli olacaktır. Şeklin hepsini değilde bir kısmını seçmek isterseniz, SHIFT tuşuna basılı tutarak seçmeye devam edebilirsiniz. Eğer seçeceğiniz alan köşeli bir bölüm ise, fare ile boşlukta bir yere tıklayıp, basılı tutarak seçeceğiniz bölüme gelinceye kadar sürükleyin ve bırakın, böylece belirlediğiniz alan seçili olacaktır.

Lasso (Kement aleti)

Bu aleti, herhangi bir nesnenin bir bölümünü seçmek için kullanırız. Kement aleti ile çizmeye başladığımız şekli tam başlangıç noktasında bitirmek zorunda değilsiniz, program otomatik olarak şekli kendisi kapatıyor. Modifier kısmında bulunan Polygon yani düz çizgiler ile seçen düğmeye basmamış iseniz, seçeceğiniz alan farenizin aldığı yolu aynen izler. Eğer Polygon seçeneğini seçtiyseniz, seçeceğiniz alanın ilk noktasını tıklayarak belirleyin. Daha sonra her tıkladığınız noktaya doğru bir çizgi çizecektir. Kapatmak için çift tıklamanız yeterli olacaktır. Modifier kısmında bir de Magic Wand seçeneği vardır. Eğer sahneye bir resim import (eklemek ) ettiyseniz. Ve bu resmin içindeki herhangi bir rengi seçmek için, bu seçenek kullanılır. Ama bunu kullanmak için resmi seçip Modify > Break Apart ( ya da CTRL+B) yapmanız gerekir.

Line (Çizgi çizme aleti)

Eğer düz bir çizgi çizme ihtiyacı duyarsanız, bu aleti seçin ve çizmeya başlayacağınız yere tıklayıp basılı tutarak başlangıç noktasını belirtin. Fareyi sürükleyerek bitiş noktasına getirin, ve bırakın. Eğer düz bir şekilde çizemiyorsanız, menü çubuğunda ki Snap (yakala) tuşuna basın. Bu sahnenin artalanındaki Grid'leri ( yatay ve dikey olarak kesişen hatlar) yakalar. Grid'leri görmek için View > Grid (yada CTRL+SHIFT+ALT+G) seçeneğini işaretleyin. Grid'leri çıkardınız ama aralıklarını beğenmediyseniz, Modify > Movie (CTRL+M)'ye basın ve karşınıza gelecek ekrandan Grid aralıklarını(Grid Spacing), Grid rengini ve hatta çalıştığınız sahnenin artalan rengini ve büyüklüğünü de belirleyebilirsiniz. Çizeceğiniz çizginin kalınlığını ve rengini de Modifier kısmından değiştirebilirsiniz.

Text (Yazı yazma aracı)

Sahnenin herhangi bir yerine yazı aletini seçtikten sonra tıklayın. Şimdi yanıp sönen bir imleç belirecektir. Yazını yazıp bitirdikten sonra, yazıyı fare ile tarayarak yazı formatını, rengini, font büyüklüğünü, tipini, kalınlığını ve yatıklığını, Modifier kısmından değiştirebilirsiniz. Modifier kısmında en altta bir abl tuşu vardır. Bu da sahneye bir yazı kutusu eklemeye yarar. Bu tuşa bastıktan sonra, sahnenin herhangi bir yerinde fareyi basılı tutarak bir dikdörtgen çizerseniz, bu sizin yazı kutunuz olacaktır. Bunu kullanmayı daha sonra geniş bir şekilde anlatacağız.

Oval (Yuvarlak çizimi)

Daire veya elips şeklinde bir oval çizmek için, alet kutusundan oval aletini seçin. Çizeceğiniz ovalin iç rengini ve çizgi rengini Modifier kısmından ayarlayabilirsiniz. Sahne kısmına geldiğinizde fare imleci artı şekline dönüşür. Herhangi bir yere tıklayın ve fareyi sürükleyip bırakın. Artık ovaliniz hazır. Ovalin dış çizgisinin kalınlığını ve çizgi tipini yine modifier kısmından değiştirebilirsiniz. Eğer dış çizginin olmasını istemiyorsanız, ovali çizdikten sonra fare imlecini dış çizginin üstüne getirerek tıklayın. Dış çizgi seçili olduktan sonra delete tuşuna basın. Çizmek istediğiniz kusursuz bir daire ise SHIFT tuşuna basarak yapabilirsiniz.

Rectangle (Dikdörtgen çizimi)

Dikdörtgen aleti aynı oval aleti gibidir. Çizeceğiniz dörtgenin iç rengini ve kenar renklerini modifierler sayesinde değiştirebilirsiniz. Burada bir modifier daha var bu da dörtgenin kenarını yuvarlatmaya yarar. Modifier'e bastıktan sonra karşınıza gelecek ekrana istediğiniz bir rakamı girin ve bir dörtgen çizin. Girdiğiniz rakam kadar kenarlar yuvarlatılmış olur. Eğer kare çizmek isterseniz, SHIFT tuşuna basılı tutarak çizin. Mükemmel bir kare çizmiş olursunuz.

Pencil (Kalem aleti)

Kalemle çizim yapmak için kalem aletini seçin. Modifier kısmında bildiğiniz modifierlerin dışında bir modifier daha varki bu size en lazım olanı. Straigten seçeneğini seçtiğiniz zaman çizim yaparken çizgileriniz hep düz bir hal alır. Smooth seçeneğini seçerseniz çizim bittikten sonra çizgilerinizin yumuşadığını göreceksiniz. Ink seçeneğini seçerseniz çizgilerinizin formunu fazla bozmadan yumuşatır. Çizgi kalınlığını, tipini ve rengini, ilgili modifierlerden değiştirebilirsiniz. Yukarıdaki animasyonu izleyerek farkı anlayabilirsiniz.

Brush (Fırça aleti)

Çizmek için kalemmi yoksa fırça mı kullanacağımız nesneye göre değişir. Kalem vuruşları çizgi, fırça vuruşları ise çeperler oluşturuyor. Yani kalın bir fırça ucuyla bir şey çizdiğinizde sanki ortaya çıkan nesnenin çevresini kalemle çizmiş ve içini de seçili renkle boyamışız gibi olur. Bu yüzden dolgun nesneleri fırçayla çizmek daha mantıklı olur. Çizim yaptıktan sonra herhangi bir yeri boyama ihtiyacı duyarsanız alet kutusundan fırçayı seçin. Sonra modifier kısmından fırça tipini, kalınlığını ve boya rengini ayarlayın ama en önemlisi çizimin neresini boyamak istediğiniz. Bunun için modifier kısmında bulunan seçeneklerden Normal olanı; çizimin her yerini boyar, Fills seçeneği; çizilen resmin çizgileri hariç her yeri boyar, Behind seçeneği; çizdiğiniz resimdeki tüm renkleri koruyarak boyama yapar, Selection seçeneği; çizimde sadece seçtiğiniz alanı boyar, Inside seçeneği; çizim içindeki renkleri boyar. Tıpkı yukarıdaki animasyon gibi

Ink Bottle (Mürekkep şişesi)

Nesnenizi çizdiniz, hemde bayağı karışık bir nesne oldu. Ama bir baktınız nesnenizin bir yada bir kaç çizgisi istediğiniz gibi değil. Hemen değiştirmek istediğiniz çizgileri seçin, ardından mürekkep şişesi aletini tıklayarak, modifier kısmından çizginizin formunu belirleyin. Ve seçtiğiniz çizgilerden herhangi birine tıklayın. Bingo! İşte istediğiniz oldu. Modifier kısmında bulunan çizgi tipi ve kalınlığı için birer adet custom yani size özel seçenekler de var. Bunlarla çizgi formunuzu istediğiniz gibi belirleyebilirsiniz.

Paint Bucket (Boya kovası)

Nesnelerimizi çizdik. Hatta çizgilerini değiştirmesini bile öğrendik. Şimdi de nesnelerin içini boyamayı öğreneceğiz. Bunun için kova aletini seçip, modifier kısmından rengini ve boyayacağımız nesnenin kapalılık durumuna göre gap size'ını seçmemiz lazım. Peki nedir bu Gap size; nesnenin dış çizgilerinin tamamı ile birbirine temas etme durumu. Yani çizdiğimiz nesnenin dış çizgileri tam anlamı ile birbirine temas ediyorsa Don't Close Gaps seçeneği ile boyanabilir. Etmiyorsa Close Large Gaps seçeneği ile boyanabilir. Bu demek değildir ki bir dörtgenin sadece üç çizgisini çizeyimde içini Close Large Gaps ile boyayayım. Ancak sizin görebileceğiniz kadar açıklıklarda boyayabilir. Modifier kısmında en altta iki adet daha düğme var bunları Gradient hakkında bilgi verirken açıklayacağız.

Dropper (Damlalık aleti)

Damlalığınız sahnenin varolan bir kısmından renk ve stil bilgilerini çeker. Örneğin bir nesnenin herhangi bir rengini yine kullanmak istediğinizde damlalığınızı o renge götürüp tıklamanız yeterli olacaktır. İmleç otomatikman boya kovası olacak ve seçtiğiniz rengi boyayacaktır. Eğer damlalığınızı nesnenin kenarına yakın bir yerine getirirseniz altında bir kalem belirir ve nesnenin rengini değilde kenar stilini kopyalacağınızı bildirir.

Eraser (Silgi aleti)

Şimdi de yaptığımız yanlışları düzeltmeyi yani silme işlemlerini öğrenelim. Alet kutusundan silgi aracını seçtiğiniz zaman modifier kısmında silgi kalınlığı ve silgi seçenekleri belirir. Erase Normal, üzerinde gezindiğiniz herşeyi siler. Fills seçeneği, çizgilerin içinde kalan renkleri siler. Lines seçeneği, sadece çizgileri siler. Selected fills seçeneği, seçmiş olduğunuz bölgeleri siler. Inside seçeneği ise, silme işlemine başladığınız yerdeki renkleri siler yani sileceğiniz bölgenin içinde başlamanız lazımdır.

Hand (El ile oynatma)

Sakın yanlış anlamayın! animasyonu oynatmayacağız. Sahneyi büyüttüğünüz zaman, görünmeyen kısımlarına ulaşmak için bu aleti seçin ve basılı tutarak gezdirin. Eğer yan tarafta ve alttaki kaydırma çubuklarıyla uğraşamam diyorsanız bu alet size göre.

Magnifier (Büyüteç aleti)

Sahneyi büyütmek veya küçültmek için kullanırız. Herhangi bir anda büyüteç aletine iki kez tıklarsanız sahne normal yani 1/1 ölçeğine geri döner. Büyütme işini en fazla 5 kez, küçültme işini ise en fazla 4 kez yapabiliriz. Sahneyi ne kadar büyütürseniz büyütün çizgileriniz hala mükemmel görünecektir. Neden? Vektör programı olduğu için

Flash Semboller

Çizim için gerekli olan dersleri öğrendiğimize göre artık sembol oluşturmaya başlayabiliriz. Yeni bir sembol oluşturmak için Insert > New Symbol yada CTRL+F8'e basarak symbol properties penceresini açalım. Çizeceğimiz tüm semboller kendi kütüphanemizde toplanacaktır. Kütüphanemizi açmak için Window > Library (CTRL+L) yapalım. Aslında direkt olarak kütüphanenin üstündeki Options kısmından da Symbol properties'i açabiliriz . Burada Name kısmına oluşturacağımız sembolün ismini yazalım ki sembollerimizin sayısı arttıkça karışmasın. Behavior kısmında üç adet seçeneğimiz var. Bunlardan birincisi Graphic, yani sadece bir frame'den oluşan bir sembol; ikincisi Button, yani düğme ki bu da dört frame'den oluşur; üçüncüsü ise Movie Clip, yani bir kaç frame'den oluşan bir animasyondur . Şimdilik birincisini ele alacağız. Graphic seçeneğini işaretleyip OK dediğimiz zaman, program bize boş bir çalışma alanı daha açacaktır.

Graphic Symbol

Çizim derslerinden öğrendiğimiz tekniklerle bir sembol oluşturalım. Sembolümüzü çizdikten sonra artık sahneye geçelim. Bunun için menü çubuğu ile timeline yani zaman ekseni arasında kalan Scene 1 yazılı yere tıklamanız yeterlidir. Yaptığınız sembol sahnede olmayacak çünkü sembol artık kütüphanenin malı oldu. Ancak istediğiniz zaman bu sembolu tutup çekerek sahneye atabilirsiniz. Eğer yanlışlıkla sahnede çizerseniz nesnenizi, onu sembole çevirmek için tümünü seçip F8 (Insert > Convert to Symbol)'e basın. Şimdi buraya kadar sadece bir frame'den oluşan bir sembol yaptık. Peki neden buna ihtiyaç duyduk? Çünkü yaptığımız sembolleri birden fazla yerde kullanmak istediğimizde animasyonumuzun boyutu artmayacaktır. En önemlisi sembollerin animasyon içinde yerini değiştirmek veya rengini değiştirmek isteyebiliriz. Bunu, Flash programının kendisi aniamasyon hazırlayarak yapabilir. Bunun için Tweening olayını öğrenelim hemen.

Motion Tweening

Yaptığımız sembollün, animasyon sırasında yerini değiştirmek veya rengini değiştirmek yada yoktan var etmek isteyebiliriz. Şimdi boş bir sahneye yaptığımız bir sembolü koyalım. Ve istiyoruz ki, sembol sahnede ilk frame'de görünmesin, 10 frame sonra bu sembolün yeri yavaş yavaş değişsin ve tam anlamıyla görünsün. İlk önce sembolün üzerinde sağ tıklayıp Propetiesi açalım. Açılan pencerede Color effect sekmesini tıklayalım. Burada aşağı düşen menüde sırası ile Brightness yani parlaklık, Tint yani renk değişimi, Alpha yani görünürlük ve Special yani renk ve görünürlüğü bir arada yapabilen seçenekler var. Biz bunlardan şimdi Alpha yani görünürlüğü kullanacağız. Alpha seçeneğini tıklayıp, kaydırma çubuğunu sıfır değerine getirelim ve OK deyip çıkalım. Şimdi sembolümüz sahnede görünmeyecektir. Timeline yani zaman ekseni üzerinde 10. frame üzerinde sağ tıklayıp Insert Keyframe diyelim. Sahnedeki sembolümüz seçili olacak ve hala görünmeyecektir. Şimdi de sembolün yerini değiştirip alpha'sını 100 yapalım. Sembolümüzü artık görebiliyoruz. Zaman ekseninde 1. ile 10. keyframe'ler arasında herhangi bir frame'e sağ tıklayıp properties'e girelim. Açılan pencerede Tweening sekmesini seçelim. Ordanda Motion seçeneğini seçelim.

Tween Animasyonları

ENTER'a basarak animasyonu seyredebilirsiniz. Eğer bu hareket etme sırasında sembolünüz bir yada bir kaç kez dönsün siterseniz, ok işaretinin olduğu frame'lerden herhangi birine sağ tıklayarak yukarıda açtığımız tweening penceresindeki Rotate seçeneğini clockwise (saat yönünde) veya counterclockwise (saatin tersi yönünde) olarak işaretleyip hemen yanındaki kutucuğa da kaç kez dönmesi gerektiğini belirtelim. Animasyon hareketleri yavaştan hızlıya doğru olsun derseniz, Easing kaydırma çubuğunu In'e yakın tutun. Tersi için Out'a yakın tutun. Eğer sembolünüzün boyutunu değiştirdiyseniz ve her frame'de değişikliği görmek isterseniz Tween scaling kutusunu işaretleyin. Animasyonu beğendiniz ama sembolün takip ettiği yolu siz belirlemek istiyorsunuz. Öyleyse şimdi sırada Guide dersi var.

Add Motion Guide

Yani rehber katmanı. Yukarıda yaptığımız animasyon duruyordur umarım. Şimdi buna kavisli bir yol çizerek bu yolu takip etmesini söyleyeceğiz. Layerlerin altında bulunan işretlerden soldan ikincisine tıklayarak yada Layer 1 yazısının üstünde sağ tıklayıp Add Motion Guide diyerek Guide Layerimizi açalım. Şimdi bu Guide Layer seçili iken yapacağımız çizimler animasyonda görünmeyecektir. Ve yanında hangi layerin adı yazıyorsa ona sadece yol gösterecektir. Alet kutusundan kalemi alıp kavisli bir yol çizelim. Daha sonra bu yolun tamamını seçip Modifier yada menüdeki Smooth düğmesine basarak yolu yumuşatalım. Daha yumuşamasını istiyorsanız Smooth düğmesine basmaya devam edin. Şimdi de Snap düğmesine basıp Layer 1'deki 1. frame tıklayalım. Sembolü alıp (merkezinden yakalamanız lazım) yolun başlangıcına yapıştıralım (yapışması için Snap seçili olması lazım). Son frame'e gidip sembolü yolun sonuna yapıştıralım. Ve CTRL+ENTER yapalım ki rehber yol görünmeden animasyonu izleyelim.

Shape Tweening

Bu metodla da sembol olmayan şekil yada şekil gruplarını başka şekil yada şekil gruplarına dönüştürürüz. Eğer bu şekillerin içinde yazı karakterleri var ise bu karakterleri Modify > Break Apart (CTRL+B) veya bir grup sembolü dönüştürmek istiyorsak Modify > Ungroup (CTRL+SHIFT+G) yapmamız gerekir. Aynı şekilde Motion Tweening yapmak içinde hepsini bir adet sembole dönüştürmemiz gerekir. Demek ki Motion Tween sadece bir sembolle yapılabilir. Shape Tween teknolojisini kullanmak için nesnelerin kesinlikle sembol olmamaları lazımdır. Aynı zamanda birden fazla şekil üzerinde oynayabiliriz. Şimdi sahnede bir kare çizin ve 10. frame'e bir keyframe yerleştirelim. Sahnede seçili olan kareyi silip bir daire çizelim. Ve yine arada kalan frame'lerden herhangi birine sağ tıklayarak properties'i açın. Tween sekmesindeki seçeneklerden bu sefer Shape seçeneğine basın. Hemen karşımıza gelen ekrandakileri açıklayalım. Blend Type, yani karıştırma tipi; Distributive yani dağıtarak, Angular yani açısal. Distributive ara şekilleri daha yumuşak fakat daha daha düzensiz hesaplar. Angular ise çizgi açılarını ve köşeleri daha sabit tutarak hesaplar. Köşeli nesneleri "angular" blend ile yapmanız tavsiye edilir. Easing'i zaten biliyorsunuz. Seçiminizi yaptıktan sonra basın CTRL+ENTER'a basın ve seyredin animasyonunuzu. Eğer şekilleriniz çok karmaşıksa animasyon çok bozuk çıkacaktır. Bunun önüne geçmek için 1. frame gelin ve Modify > Transform > Add Shape Hints yapın. Bu size animasyonunuzun bir köşesine yerleştirmeniz için, içinde bir harf olan ve daireden oluşan bir ipucu verecektir. CTRL+H'ye basarak ipuçlarını çoğaltın ve herbirini bir köşeye yerleştirin. Ardından son frame'e gidin ve hangi köşenin nerde olmasını istiyorsanız o harfi oraya koyun. Sırası ile tüm harfleri yerleştirin. Eğer bunu yaparken zorlanıyorsanız zaman ekseninin altındaki Onion Skin düğmelerine basarak tüm frame'leri üstüste görebilirsiniz.

Flash Katmanlar

Layer

Flash'ın kafa karıştıran sebeplerinden biride objelerin üst üste gelebilmesi, üstelik bütün bunların birde aynı zamana bağlı olarak frame'lerle değişmesi. Flash'ın genel kuralı, hareket ettirmeyi planladığınız her nesneyi ayrı bir layere yerleştirmek. Böylece tweening işlemleri daha doğru yapılabilir. Ayrıca ayrı katmanlara koyduğunuz objeler birbirine karışmıyor (aynı katmanda iki objeyi üst üste koyduğunuz zaman birleşiyorlar). Yeni bir layer yaratmak için, varolan layerin menüsünü açıp ( layer isminin yanındaki minik ikona tıklayarak) ınsert layer'ı seçin. Yada Insert > Layer komutunu kullanın.Layer'lerın altında bulunan en soldaki düğme de yeni bir layer ekler. Yeni layerin üstüne çift tıklayıp ismini değiştirin. Flash Photoshop gibi değildir. Her layerin ne içerdiğini göstermiyor ve keşfetmek için layerleri gizleyip yeniden gösterme işlemini yapmaya kalkışırsanız bir klikle kurtulamıyorsunuz. Bu yüzden kullandığınız her layere içerdiği nesne hakkında bir isim vermeniz size daha kolaylık sağlayacaktır.Bir Layerin özelliklerini görmek veya değiştirmek için, üzerinde sağ tıklayıp properties'ine girmek lazımdır. Burada Name kısmına layerin ismi yazılır. Show seçeneği layeri sahnede gizler. Bu işi layer'ların olduğu bölümün üstündeki göz ikonu da yapar. Lock seçeneği sahnedeki nesneyi kilitleyerek müdahele etmenize engel olur. Type yani layer'in tipi bu seçeneklerle belli olur. Animasyonu yaparken dikkat edeceğiniz bir konuda hangi layer'in üstte hangisinin altta olacağıdır. Çünkü nesnelerimiz buna göre birbirinin üstüne gelecektir. Herhangi bir layer'i alta almak veya üste taşımak için tutup çekmeniz yeterlidir. Bir layer'in üstüne iki kez tıklarsanız ismini değiştirebilirsiniz.

Guide Layer

Motion Tween dersini anlatırken dedik ki hareket eden nesnelerimize istediğimiz yoldan gitmesini sağlayabiliriz. Bunu da hangi layer'a yol göstermek istiyorsak o layer aktifken Add Guide Layer düğmesine basarak yapabileceğimizi anlattık. Ve bu layer aslında sadece bir yol çiziyor, animasyonda görünmüyordu. Eğer nesnelerimiz karmakarışık ortamlarda yer değiştiriyor ise bunlara bir rehber lazım ise işte o rehber Guide layer'dır. Yani aslında hiç bir işlevi olmayan sadece Grid'ler gibi fonda duran bir layer'dır. Ancak ileri derslerde göreceğimiz Actions menüsünden bir aksiyon verebiliriz.

Mask Layer

Karanlık bir oda düşünün. Bu odadaki bir tabloya bir fener tuttunuz ve sadece fenerin aydınlattığı yeri görebiliyorsunuz. Bu tür bir animasyon için üç tane layer olacak. Biri, karanlık odayı tasvir eden bir layer. Diğeri, el feneriniz. Sonuncusu ise fenerin aydınlattığı yeri gösteren bir layer. Şimdi ilk önce iki layer oluşturalım. Üsttekine sağ tıklayıp Mask seçeneğini işaretliyelim. Üstteki layer'ın ikonu aşağı doğru bir ok iken alttakinin ikonu sağ tarafı gösteren bir ok oldu. Sonra yine bir layer yapalım ve onu da en alta sürükleyerek atalım. Şimdi en alttaki layerimiz karanlık oda. Ortadaki fenerin aydınlattığı yerler. En üstteki ise fenerimiz oldu. En üstteki layer'i aktif yapıp 1. frame'e bir daire çizelim. Bu daireyi isteğimize göre Shape tween'lerle hareket ettirelim. Daha sonra alttaki layer'a herhangi bir fotoğraf koyalım. En alttaki layer'a tüm sahneyi kaplayacak, siyah bir dörtgen çizelim. Şimdi alttaki iki layer bir frame'den oluştu. Bunları, üstteki layer'in son frame'ine kadar uzatalım. Bunu, CTRL tuşuna basarak, fare ile tuttuğunuz frame'i istediğiniz kadar uzatabilirsiniz. ( yada Insert Keyframe). CTRL+ENTER yapıp izleyelim.

Flash Sesler-Ses Efekti Ekleme

Sound

Animasyon sessiz olmaz. Yaptığımız animasyonlara daha çok etki katmak istiyorsak mutlaka ses eklemeliyiz. Şimdi hemen menü çubuğundaki File > Import seçeneğini işaretleyip karşımıza gelen ekrandan C > Windows > Media'dan bir kaç ses ekleyelim. Bu windows'un altında bulunan hazır seslerdir. Eğer WAVE veya AIFF uzantılı sesleriniz varsa onlarıda ekleyebilirsiniz. Eğer bu türde hiç dosya bulamadıysanız flash'ın ses kütüphanesindeki seslerle yetinmek zorundasınız. Import ettiğiniz ses dosyaları kendi kütüphanenizde yer alacaktır. Import ettikten sonra, basın CTRL+L'ye, ses dosyanız orada duruyordur. Elinizde yaptığınız bir animasyon var ise onun üzerinde çalışmaya başlayın. Yoksa basit bir animasyon yapın. Ses dosyaları sadece keyframe'lere yerleştirilebilir. Mesela Bir tween yaptınız ve sesi bu tween'in ortasında kullanmak istiyorsunuz. Normal şartlarda onu ortaya koyamazsınız. Ancak sesin başlayacağı yere bir keyframe koyarsanız, tweening bozulmadan sesi ortadan başlatabilirsiniz. Koyacağınız ses dosyasının boyutu ile animasyondaki yeri çok önemlidir. Çünkü eklediğiniz ses dosyası iki keyframe arasına sıkışır. Ve eğer iki keyframe arası bir kaç frame'den oluşuyorsa oraya uzun bir ses dosyası eklemeye kalkarsanız, animasyon bittikten sonrada ses devam eder. Bu yüzden iki keyframe arasını mutlaka dolduracak şekilde seslerimiz koyalım. Bilgisayarınızdaki RAM yeteri düzeyde ise 16 bit sesler kullanabiliriz. Aksi taktirde mutlaka 8 bit sesler kullanın. Bir sesin 8 bit'mi yoksa 16 bit'mi veya kaç saniye olduğunu Windows'un ses kaydedicisinden veya Flash'ın frame properties'inin Sound sekmesinden bulabiliriz. Şimdi Import ettiğiniz herhangi bir sesi kütüphanenizden tutup, sürükleyerek animasyonun üstüne bırakın. Bunu yapabilmeniz için zaman ekseninde herhangi bir keyframe'in üzerinde olmanız gerekir. Ve o keyframe'in üzerine sağ tıklayıp propertiesi, oradan da sound sekmesini tıklayalım.

Ekranda Sound yazısının karşısında yazan isim bizim animasyona eklediğimiz dosyanın ismidir. Hemen sağındaki ok'a basarak kütüphanemizde yeralan diğer sesleride görebiliriz. Effect yazısının üstünde kalan bilgiler ses dosyamıza ait bilgilerdir. Pencerede, üstüste iki adet ses dosyamızı gösteren pencere mevcut. Üstteki sol denge, alttaki ise sağ dengeyi kontrol eder. Bunları biraz sonra anlatacağız. Onların altında içi dolu bir kare ile bir üçgen var. Üçgen ses dosyamızın çalışmasını sağlar. Kare ise durdurur. Onların yanında ise büyüteç aletleri, saat ve frame'leri tabir eden simgeler var. Büyüteç yardımı ile dosyamızın görünüşünü büyütüp - küçültebiliriz. Saat simgesine bastığınızda sol ve sağ dengelerin arasında kalan eksenin birimi zaman birimi olur. Hemen sağındaki simge ise eksenin birimini frame cinsine çevirir. Yani hangi frame'de başlayıp hangi frame'de biteceğini görebiliriz. Şimdi Sol ve Sağ dengeler üzerinde duralım. Pencereyi ilk kez açıyorsanız, dengeler üzerinde kuşatma noktası tabir ettiğimiz noktalar yoktur. Ancak kuşatma çizgileri ikisinde de üst tarafta mevcuttur. Kuşatma çizgilerinin herhangi birine tıklarsanız, hem altta hemde üstte, kuşatma noktaları çıkacaktır. Bu noktaları 7 adete kadar çıkarabilirsiniz. Kuşatma noktalarını silmek için tutup dışarı doğru sürükleyin. Dedik ki kuşatma çizgisi başlangıçta üstte yer alır. Bu hem sol hemde sağ dengenin ses düzeyinin normal olduğunu belirtir. Eğer çizgiyi aşağılara doğru çekerseniz, ses düzeyi azalır. Noktalar yardımı ile sesi bir sağa bir sola götürebilirsiniz. Yukarıdaki şekilde; ses soldan azalarak, sağdan ise çoğalarak çıkacaktır. Ortada yeralan eksenin iki ucunda kaydırma çubukları var, bunlarla sesin başlangıcını ve sonunu değiştirebilirsiniz. Yan tarafta bulunan Effect seçeneği aslında bizim de, çok rahatça yapabileceğimiz hazır efektler verir. Sync. ise dört adet seçenek sunar bize. Bunlardan birincisi (event) sesi olduğu gibi çalmasını sağlar, yani sesi hiç kesmeden (animasyon bitse bile) çalar. İkincisi (start), sesin başlangıç noktasını söyler. Bu ancak bir keyframe'de olabilir. Sesin sonunu ise üçüncüsü yani stop seçeneği söyler. Bunun içinde keyframe gereklidir. Dördüncüsü (stream) ise sesin iki keyframe arasında kalan bölümünü çalar. Onların altında kalan Loop seçeneği bize sesi animasyonda kaç kez çalacağımızı belirtir. Bu rakam ister iki olsun ister ikibin olsun dosyamızın boyutu değişmez. Eğer animasyonumuza, sürekli olarak çalacak bir ses dosyası koyacaksak, sesin mutlaka "Loop" özelliği olması lazım. Yani bir döngü içinde çalınırken başlangıç ve bitişlerde aksamaması lazımdır.

Şimdi hemen kolları sıvayıp ses açık ve ses kapalı seçeneği olan bir animasyon yapalım. Elimizde hazır bir animasyon var ise hemen işe başlayalım. Yoksa basit bir animasyon yapın. Şimdi ister yazı ile sesi kapat yazalım , isterse bunu ifade edecek bir şekil çizelim. Sesi kapat yazısını seçip F8'e basarak movie clip yapalım. Birde ses açık komutu olacağına göre F6 ile bir keyframe daha ekleyelim. Sonrada ikinci keyframe'de bulunan yazımızı çift tıklayıp "kapat" kısmını "aç" olarak değiştirelim. Sonrada bunları ayrı ayrı button'a çevirelim (yine F8'e basarak). Şimdi de her iki keyframe'e bir ses dosyası ekleyelim. 1. keyframe'de çift tıklayıp properties'i açalım ve Actions kısmına Stop değerini verelim. Sound sekmesini tıklayıp Sync. kısmına Start, Loop kısmınada 2000 yazalım (dedik ya bu dosyanın boyutunu değiştirmez, altı üstü 2000 kez çalıp kapanacak). 2. keyframe'e de Actions'tan Stop, Sound sekmesindeki Sync. kısmına da Stop yazıp kapatalım. Şimdi sıra iki yazının birbirlerine verilecek link'e geldi. "Sesi kapat" yazısının üstüne sağ tıklayıp properties'ten Actions sekmesini açın ve artı işaretine basarak GoTo deyin. Frame number kısmınada 2 yazın ki tıklandığında 2. frame'e gitsin. Sesi aç kısmına da aynı şekilde yapıp bu sefer frame number'a 1 yazın. Artık ses kontrol ziyaretçinin elinde. Mesela aşağıdaki fan sesinden rahatsız olduğunuz gibi kapatabilirsiniz.
Eğer ***'lerinizden beğendiğiniz bir müziği koymak isterseniz, o zaman bir kaç işlemden geçirmeniz lazım. İlk önce Winamp programınızı açın. CTRL+P'ye basarak "Preferences"ı açın. Sol taraftaki seçeneklerden "Output" seçeneğini tıklayın. Sağ tarafta şimdi birkaç tane seçenek görünecektir. Bunlardan "Nulsoft Disk Writer Plug-in" seçeneğini çift tıklayın. Karşınıza "Directory" isimli bir pencere açılacaktır. Bu *** dosyalarımızı WAVE olarak nereye koyacağımızı belirtecektir. Herhangi bir klasör seçtikten sonra, artık istediğimiz parçayı belirttiğimiz yere kaydedebiliriz. Şarkımızı seçtikten sonra play düğmesine basıp kaydedebiliriz. Ama bu işlemi çok hızlı bir şekilde yapacağından, kaydetmek istediğimiz bölümü önceden belirleyip kaydırma çubuğunu oraya getirip hemen stop'a basmalıyız ( daha sonra üzerinde düzeltme yapabileceğiniz programlarda var). Kaydetme işlemi bittiyse, Flash'ı açıp sesi kullanalım. Sesi import ettikten sonra CTRL+L'ye basıp kütüphanemizi açalım. Ses doyamızın üstüne çift tıklayıp açılan pencerede "Export Settings" kısmını *** yapıp kapatın. Hepsi bu.

Flash Düğmeler

Düğme Yapımı

Button semboller yani düğme sembolleri flash animasyonlarımızda interaktivite katmak için kullanılıyorlar. Yarattığınız düğmeler sizi başka animasyonlara götürmek, bir web sitesine gitmek, bir ses çıkarmak yada animasyonda birşeylerin gidişatını değiştirmek için kullanılıyor. Bir düğme yaratmak dört frame'lik bir animasyon yaratmak kadar basit. Sıfırdan başlıyalım. CTRL+L basıp Library Inspector'u çağırın. Optios'dan new symbol seçin yada library penceresinin sol alt köşesindeki artı ikonuna basın. Sembolunüze bir isim verin ve "Behaviour" (davranış biçimi) olarak "button" seçin OK'ye basın. Karşınıza ortasında bir artı olan boş bir stage çıkacak. Timeline'da düğmenin durumlarını temsil eden sadece dört frame olduğuna dikkat edin (Şekil 1). Şimdi buttonu çizebilirsiniz. Kolaylık olsun diye "view > grid" ile sahneyi karelere bölelim, "view > snap" ile çizdiklerinizin bu karelere yapışmasını sağlayabilirsiniz. Dikdörtgen çizme aletini seçin. Biraz daha şık olması bakımından " round rectangle radius" modifieri seçin. 15 ila 20 arasında bir değer girin. Daha sonra istediğiniz renkte bir dikdörtgen çizin. Text aletini seçin ve dikdörgenin ortasına kalın yazı ile uygun bir boyutta " bana tıklayın" yazın. Şu haliyle düğmemizin birinci durumunu (up / yukarı) yapmış oldunuz. Düğmelerin up/yukarıda dışında üç durumu daha vardır. Bunlar sırası ile "over/üzerinde", "down/aşağıda" ve "hit/vuruş". Overframe'ine bir obje koyuyarsanız, düğme çalışıyorken fare imleci üzerine geldiğinde, belirlediğiniz görüntü gelir. Başka bir deyişle normal bir web sitesinde mouseover scriptinin yaptığı şey yapılıyor. Tabi bunun için overframe'ine öncelikle bir keyframe yerleştirmeniz gerekiyor. Overframe'in üzerinde iken sağ tıklayın ve "ınsert keyframe" seçin. Şimdi aslında önümüzde sonsuz seçenek var. Ama tavsiyemiz karşınızdaki dikdörtgenin sadece rengini değiştirmeniz. Şimdi sıra "down/aşağıda" durumuna. Bu da düğmeye basıldığı andaki görüntüyü verir. Düğmeye basılmış hissi verebilmek için yine sonsuz seçeneğimiz var. Biz yine dikdörtgenin rengini değiştireceğiz. Bunu yaparken, az önce olduğu gibi "down" frame'ine bir keyframe yerleştirmek durumundasınız. "Hit/vuruş" frame'i düğme olarak tasarladığınız nesnenin hangi bölümünün, düğme özelliklerinden faydalanacağı alanı belirtir. Yani çizdiğiniz bir dötgenin sol yarısı düğme olarak kullanmak isterseniz, sadece bu alanı kapsayacak kadar bir dörgen çizmeniz gerekir. Eğer bu frame'e birşey çizmezseniz, ilk frame'de olan resmin tümü düğme olarak kullanılır. Bu alana yapacağınız çizimlerin hiçbirisi normal animasyonda görünmez. Başka bir deyişle "hit" frame'inde, düğmeye kendi kapsadığı alan dışında bir etki alanı, bir sıcak bölge tanımlayabiliyorsunuz. Şimdi artık düğmemizi kütüphanemizden çıkarıp sahneye atabiliriz. CTRL+ ENTER'a basarak düğmeyi test edebilirsiniz.

Düğme ile Etkileşim

Düğmeleri yaptıktan sonra şimdi onlara anlam katalım. Planımız önce bir menü hazırlamak. Bu menüde iki seçenek yani iki düğme olacak. Birinci düğmeye basıldığında birinci animasyon, ikinciye basıldığında ikinci animasyon gösterilecek. Sonra animasyonun altında bir geri tuşu çıkacak ve ona basılıncaya kadar beklenecek. Basılınca menüye geri dönülecek. Bunu yapabilirseniz artık bir web sitesi yapmak için gerekli çok şeyi öğrenmiş olacaksınız. Daha önce motion tweening ve shape tweening'li animasyonlar hazırlamıştık. Motion tween için yarattığınız objeleri sembollere çevirmek (Inspect > Convert to symbol), shape tweening içinse tam tersi, sembol yada grup'larsa "break apart" (grubu seçip " modify > break apart yada "modify > ungroup", belkşde birkaç kez) yapmak gerektiğini bir daha hatırlatalım. Şimdi temiz bir döküman açalım. Bir de scene ınspector'u açıp ("wındows>ınspector>scene ınspector") add düğmesine basarak iki yeni scene ekleyelim. Birinci animasyonun tüm timeline'ını bütün layer'larla birlikte seçip sağ tıklayıp "copy frames" yapalım. Sonra açtığımız yeni dökümanda scene 2'ye geçip, timeline'de birinci frame üzerinde sağ tıklayıp "paste frames" yapalım. Scene 3'e de ikinci animasyonun frameslerini kopyalayalım. Sonra library ınspectordan yeni iki sembol isteyip iki düğme hazırlayalım. Bu düğmeleride scene 1'e yerleştirelim. Düğme yapmaya üşenirseniz, "libraries > buttons" dan hazır düğmeler bulup kullanabilirsiniz. Başka bir dökümanda yaptığınız düğmeleri kullanmak isterseniz, "file > open as library" komutunu o flash dosyasının bütün kaynaklarını bir library penceresinde açıyor. Buradan tutup kullanabiliyorsunuz.

Sıra geldi beklenen interaktiviteyi yaratmaya. Birinci scene yani iki düğmenin durduğu scene gösterildikten sonra beklenmesini istiyoruz. Bu scene'in son keyframe'inin ki sadece düğme koyduğumuz için biradet keyframe var zaten, properties penceresinde actions kulakçığına tıklayın. Dikkat edilmesi gereken şeylerden biride hem stage'deki objelerin, hemde frame'lerin action özellikleri olabiliyor. Şimdi karşınızdaki penceredeki artı düğmesine basın ve "stop" u seçin. Böylece yeni bir emir gelene kadar scene 1'de bekliyoruz. Bu emri uygulamasaydık scene1,2 ve 3 sırayla gösterilecekti. Düğmelerin bağlantılarınıda yapalım. Birinci düğmeyi seçin ve properties'ine gelin. Actions'da artıya basarak bu sefer GoTo seçin. Yan tarafta çıkan pull down menüde scene 2'yi seçin. GoTo and play seçeneğinin işaretli olmasına dikkat edin. Aynı işlemi ikinci düğme ve scene 3 için yapın. Şimdi scene ınspectordan scene 2'ye geçelim ve bu animasyonun sonuna bir geri dönüş düğmesi ekleyelim. Düğmeyi tercihan yani bir layer'a koyalım. Yeni layer yarattıktan sonra animasyonun son keyframe'inin hizasında düğme layer'ında da bir keyframe yaratalım. Koyduğumuz düğmeyede GoTo scene 1 emrini verelim. Animasyonun bittikten sonra beklemesi için son frame'e bir stop eklemeyi unutmayın. Ve aynı işlemi scene 3'deki animasyon için de yapalım. Ve CTRL + ENTER yapıp izleyelim.

Animasyonlu Düğmeler

Üç cins sembol olduğundan daha önce bahsetmiştik. Birincisi durağan bir grafik, ikincisi bir düğme, üçüncüsü ise animasyondu. Sembollerin başka semboller içerebileceğini de anlatmıştık. Şimdi bu bilgileri kullanma ve bu sayede biraz daha havalı bir düğme yapmanın zamanı geldi. Havalı düğmeden kasıt, üzerine gelince veya basınca yada hiç birşey yapmadığınız zaman bile bir animasyon gösteren düğmeler. Yukarıdaki bilgilerden tahmin edebileceğiniz gibi, böyle şeyleri düğmenin gerekli frame'ine başka bir sembol ancak bu sefer bir "movie clip" yerleştirerek yapıyoruz. Bu "movie clip" sembollerini de her zamanki gibi stage'de yaratıp yani sembol ekleme sahnesine kopyalayabilir yada sıfırdan sembol editöründe yapabiliriz. Az önce yaptığımız düğmeyi daha da şıklaştıralım. Şimdilik basit bir animasyon ekleyelim. Düğme basılı iken etrafıda bir top dönsün. Düğmenin üstteki yuvarlatılmış dikdötgenin kenarını seçelim. CTRL + C ile kopyalayalım. Yeni bir sembol açalım. İsim verdikten sonra behaviour olarak "movie clip" vermeyi unutmayalım. Bu yeni sembolün ilk layerine bir adet top yerleştirelim. Ve bu topuda bir sembol haline getirelim. Şu anda bir sembolün içine başka bir sembol yerleştirmiş bulunuyorsunuz. Şimdi yaklaşık 20 frame sonrasına bir keyframe koyalım. Sonra layer ismine sağ tıklayıp "Add Motion Guide" seçelim. Yeni bir layer oluşmuş olmalı. Bu layer seçili iken CTRL + SHIFT + V basarak "Paste in Place" yapalım. Bu komut, kopyaladığınız nesneyi ekranın neresinden aldıysanız oraya yapıştırıyor. Normal CTRL + V yaparsanız ekranın tam ortasına koyuyor ve sizi uzun uzun onion skinlerle herşeyi yeniden üstüste getirmek zorunda bırakıyor. Düğmenin kenarları şu anda top için motion guide olarak layerine yerleşmiş durumda olmalı. Motion guide'ın bir çizgi haline dönüşmesi için sol üst köşesinden bir parçayı silgiyle silelim. Şimdi birinci frame'e gidelim, topu tutup dikdörtgen çizginin başlangıcına yerleştirelim. ("view > snap" açık olmalı) sonrada son frame'e gidip sonuna yerleştirelim. Enter'e basıp topun dönüp dönmediğini kontrol edin.

Sıra geldi dönen topumuzu düğmeye eklemeye. Timeline'ın sağ üst köşesindeki düğmeye basarak biraz evvel yaptığınız düğmeyi seçin. Yeni bir layer yaratın ve down frame'e gelin. Library'den dönen topu alıp stage'e taşıyın. Onion skinning ile tam dikdörgenin üzerine oturtun. Düğmenizi çalışırken görmek için bu sefer "Control > Enable Buttons"un açık olması yetmiyor. Mutlaka CTRL + ENTER basıp animasyonu test etmelisiniz.

Web Ortamına Aktarma

Artık basitte olsa animasyon yapmayı öğrendik. Artık yaptığımız animasyonları web ortamına aktaralım. Yaptığınız animasyon herşeyiyle bittiğinden eminseniz, onu "swf" uzantılı olarak export etmek lazım. Ancak bu şekilde herhangi bir browser'a okutabiliriz. Acak yaptığınız animasyonun birde "fla" uzantılı olan bir kopyasını kaydetmeyi unutmayın. Flash'ta menü çubuğundaki File > Export Movie'ye bastığınız zaman size nereye ve hangi isimde kaydedeceğinizi soran bir pencere çıkacaktır. Bunları belirttikten sonra "swf" uzantılı flash animasyonunuz hazır demektir. Eğer bir HTML editörü kullanıyorsanız işiniz çok basit. Mesela FrontPage için yaptığımız animasyon bir plug-in'dir, yani eklentidir. Menü çubuğundan Insert > Advanced > Plug-in'e basın. Karşınıza çıkacak pencereden, Browse yani gözat'ı tıklayın animasyonun yerini söyledikten sonra boyutlarını belirtin. Burada dikkat edeciğiniz bir şey var. Animasyonun boyutu ne kadar büyürse büyüsün dosyanızın boyutu değişmez, ancak ekran kartından doğabilecek sorunları da çözmez. Yani kullanıcının ekran kartının RAM kapasitesi düşükse animasyonu oynatmakta zorluk çekecektir. Bu yüzden animasyonu ergonomik kullanmak gerekir. Plug-in properties penceresindeki diğer seçenekler kenarlıklarla ve nereye yanaşık olacağı ile ilgilidir. OK düğmesine bastığınızda, sayfanızda elektrik fişine benzer bir şekil kalacaktır. Alttaki sekmelerden Preview sekmesine tıkladığınızda animasyonu izleyebilirsiniz.

Buraya kadar kolay ancak bazıları HTML sever. Sevmeyenlerinde okumasında fayda var. Yaptığınız animasyonun HTML kodlarını öğrenmek için Flash programında File > Publish Preview > HTML'ye basarak bulabilirsiniz. Karşınıza sürekli kullandığınız browser açılacak. Buradan View > Source (Görünüm > Kaynak) ile tüm kodları kullanabilirsiniz. Mesela aşağıdaki gibi bir kod çıkacaktır

Kod:
HTML>

ses















Şimdilerde bazı arkadaşlar diyorki "- ben bazı sitelerde dolaşırken, animasyonun üzerine sağ tıklıyorum sadece bu ibare çıkıyor:
Nasıl oluyor bu?". Publish settings'e basın ve karşınıza gelen pencereden HTML sekmesini tıklayın. Burada "Display menu" seçeneği işaretlidir. Bunu kaldırın ve tekrar "Publish Preview in HTML" yapın. Yukarıdaki kodlarda da göreceğiniz gibi olacaktır. Bu da animasyonun üstüne sağ tıkladığınızda menüyü göstermeyecektir. Hazır Publish Settings'i anlatıyorken biraz bundan bahsedelim. Template kısmından hangi formatta publish edeceğinizi belirtiyorsunuz. Biz burada "Default" yani "Flash only" seçeneğini kullanacağız. Ancak Javascipt destekli olarak, Java applet destekli olarak hatta Quicktime destekli olarak ta publish edebiliriz. Dimensions kısmında, ister piksel cinsinden ister yüzde (Percent) cinsinden isterseniz yaptığınız çalışmanın boyutunu koruyarak (Match Movie) publish edebilirsiniz. Playback kısmında dört seçeneğimiz var bunlardan ikincisini az önce menünün saklanmasında anlattık. Diğerleri, açılışta ilk frame'in gösterilip gösterilmeyeceğini belirten (Paused at start), bir döngü içinde mi oynatılacağını belirten (Loop) ve son olarak kullandığını fontların windows'un kendi fontlarına mı adapte edileceğini belirtir. Tüm bunlar ziyaretçide çalışacaktır. Diğerleri animasyonun kalitesini (Quality), animasyonun arkasına koyduğunuz DHTML'in görünüp (Opaque), görünmeyeceğini (Transparent) (Window mode - yalnızca Windows işletim sisteminde geçerlidir), ölçülerini (Scale) ve HTML ile Flash'ta nereye yanaşık (Alignment) olduğunu belirtir.

Yukarıdaki kodlara dikkat ederseniz ve tag'ları görürsünüz. tag'ı Internet Explorer, tag'ı ise Netscape tarafından tanınıyor. tag'ı tag'ını kapsamış olması lazım. Bu kullanıcının browser'ının gerekli Flash player plug-in'ini yüklenmiş kabul eder. Aksi takdirde kırık bir link resmi çıkar. Eğer yukarıdaki gibi bir tag'ına "classid" eklerseniz gerekli plug-ini bulamayınca kullanıcıya plug-in'i indirmesini söylüyor. Bu kod tag'ında "PLUGINSPAGE" ile yapılır. Yukarıda anlatmadığımız bir tek bgcolor kaldı. O da arka fon rengini belirtir.

Aman dikkat!!: Bütün bu kodları kullanmadıysanız ve bir HTML editörü ile animasyonu sayfanıza eklediyseniz. HTML kodları aşağıdaki gibi kalacaktır.



Böyle bir kodun altına mutlaka aşağıdaki gibi bir uyarı yazısı ve Plug-in'i yükleyebileceği bir link verin. Hepsi bu kadar.
Resme vereceğiniz link:[url]http://get.adobe.com/flashplayer/[/url]

Flash Link Verme

Actions - Link Verme

Buraya kadar basit bir animasyon oluşturmak için gerekli olabilecek hemen hemen herşeyi öğrendik. Ancak programın yapabilecekleri bunlarla sınırlı değil. Başlı başına bir programla dili ile hazırlanabilen aksiyonlar sayesinde, sınırlarınızı zorlaycak animasyonlar oluşturabilirsiniz. Programın bu özelliğinden faydalanmak için, Actions menülerini kullanacağız. Aksiyonlar ya mouse ile etkileşince veya klavyeden bir tuşa basınca ya da animasyonun normal seyri sırasında, herhangi bir frame'e ulaşınca devreye girer. Bu yüzden hangi aksiyonu nereye vereceğimizi bilmemiz gerekir. Actions konularında biraz ilerleyince bunu daha iyi öğreneceğiz. Önceki derslerden Actions'ın komutlarının nasıl verilmesi gerektiğini biliyorsunuzdur. Actions sekmesine tıkladığınız zaman iki bölümden oluşan bir pencere çıkacaktır karşınıza. Sol tarafta, artı (+) işaretinizde basıp eklediğiniz komutların sırası ile listesi verilir. Sağ tarafta ise bu komutların modifier'leri ve ona ait çeşitli seçeneklerin bulunduğu bir penceredir.

Link verme

Animasyonumuzda bazı düğmelere link vermek isteyebiliriz. Bunun için link vermek istediğimiz düğmenin üzerinde sağ tıklayıp ( Instance Properties: yukarıda bahsetmiştik, neye actions verilmesi gerekiyorsa onun üzerinde sağ tıklamamız gerekir. Bu actions'ı button'a veriyoruz, frame'e değil.) properties'ten Actions sekmesine gelin. Artı'ya basıp "Get URL" seçeneğini işaretleyin. Yan taraftaki URL penceresine "http://" ibaresini de yazarak link vermek istediğiniz adresi yazın. Sol taraftaki listede "On" seçeneğinin üstüne gelin. Şimdi sağ tarafta "Event" başlığı altında bir kaç seçenek çıktı. Bunlardan

"Press"; düğmenin üzerinde tıkladığınız zaman,
"Release"; düğmenin üzerinde tıklayıp bıraktığınız zaman,
"Release Outside"; düğmenin üzerinde tıklayıp, dışarda bıraktığınız zaman,
"Roll Over"; düğmenin üzerine geldiğiniz zaman,
"Roll Out"; düğmenin üzerine gelip, dışarı çıktığınız zaman,
"Drag Over"; düğmenin üzerinde tıklayıp, dışarı çıkıp tekrar düğmenin üzerine geldiğiniz zaman (tıklamayı bırakmadan),
"Drag Out"; düğmenin üzerine tıklayıp, dışarı çıktığınız zaman,
"Key Press"; klavyede belirteceğiniz bir tuşa bastığı zaman,

verdiğiniz URL'ye gider. Aslında yukarıdaki listeyi iyice öğrenmekte fayda var çünkü bu işlemi sadece link vermede kullanmayacağız. URL penceresinin hemen altında "window" kısmında URL'nizin hangi browser penceresinde açılacağını bildiriyorsunuz. "_self" aynı pencereye, "_blank" yeni boş bir pencereye açıyor. Eğer frame kullanıyorsanız (animasyon frame'i değil HTML frame'i) frame adını elinizle girmeniz gerekir. Variables kısmı şimdilik bize yaramıyor.

Flash Preloading

Actions - If frame is loaded

Animasyon başlamadan önce lütfen bekleyin diye bir yazı çıkması ve esas animasyon başlayıncaya kadar ziyaretçiyi meşgul etmesi. Bu özellikle uzun animasyonlarımızda çok faydalı olacaktır. Animasyonun tümünü yükleninceye kadar başka bir küçük animasyonla ziyaretçiyi meşgul etmek ve daha sonra esas animasyonumuzu akıcı bir şekilde ziyaretçiye izletmek için Actions komutlarından "If frame is loaded"ı kullanacağız. Yani eğer bu belirttiğim frameler yüklenmişse oynat demektir.

İlk önce sahneye iki adet scene ekleyelim. Bunlardan birincisi yüklenirken vereceğimiz mesaj, ikincisi esas animasyonumuz olacak. Scene 2'ye geçerek elimizde bulunan mevcut bir animasyonu koyalım. Scene 1'e de isterseniz yazı yazarak isterseniz küçük bir animasyon koyarak ziyaretçiyi meşgul edelim. Biz yukarıdaki animasyonda "sayfa yüklenirken lütfen bekleyin" yazdık ve bunu F8 tuşuna basarak Movie Clip yaptık. Daha sonra arkasına bir daire çizip, bunu F8 ile sembol yaptıktan sonra 10. ve 20. framelere keyframe yerleştirdik. 1. ve 20. frame'lerdeki dairenin alpha'sını (dairenin üzerinde sağ tıklayıp properties'ine bakın) sıfır yaptık. aradaki frame'lere ise motion tween verdik. Son frame'e ise actions'tan "goto and play (current scene-frame 1)" komutunu verdik. Aslında böyle bir animasyona gerekte yoktu. Düz yazı bile bizim işimizi görürdü. Ancak ziyaretçiyi meşgul edeceksek bu küçük animasyonlar şarttır. Yaptığımız animasyon Scene 1'de olması lazım. şimdi tek layere ikinci bir keyframe daha koyarak Actions'tan komutlarımızı verelim. İlk keyframe'e gelip sağ tıklayın. Sonra Actions kulakçığına tıklayıp artı işaretine basın. Komut menüsünden "If frame is loaded" komutunu seçin. Yan tarafta kalan alt menülerden Scene'i ; scene 2 olarak seçin. Frame number kısmına da scene 2'de bulunan esas animasyonunuzun en son frame numarasını verin. Sonra yine artıya basarak "GoTo" komutunu seçin. Scene kısmına, Scene 2; frame number kısmınada "1" yazın ve alttaki "goto and play" kutusunu işaretleyin. Şimdi ikinci frame gidip Actions'tan "GoTo" komutunu seçin. Scene kısmına "current scene" yada "scene 1", frame number kısmına da "1" yazın. Hepsi bu. Şimdi yaptığımız işlemlerin Türkçe'sini öğrenelim. İlk frame'deki komutlarla; eğer Scene 2'deki "X" nolu frame yüklenmişse, Scene 2'deki "1" nolu frame git ve oynat. Yok yüklenmemişse devam et. Devamı otomatik olarak 2. frame'e gitmek olacaktır. İkinci frame'de ise ; anlaşılan sen daha yüklememişsin geri dön ve yüklemeye devam et diyoruz. Şimdi burada önemli bir konu var. Eğer mesaj kısmına farklı şeyler yazdırmak istiyorsak, yani "görüntü yükleniyor"-"görüntü yüklendi"-"ses yükleniyor"-ses yüklendi" gibi birkaç tane mesaj uyarısı verceksek, birinci Scene'deki frame sayısını arttırıp "If frame loaded" komutlarını bölmek lazımdır. Yani her mesaj uyarısına karşılık gelen iki adet frame koymamız gerekecek. Ve her ilk frame'de esas animasyonun belli bir kısmını yüklenmişse devam edecek, ikinci frame'inde ise döngüye devam edecek şekilde olmalıdır. Yani 100 frame'den oluşan esas animasyona iki adet mesaj vereceksek Scene 1'de dört frame olması lazımdır. 1. frame'e esas animasyonun 50 frame yüklenmişse 2. frame git , 2. frame'de ise geri kalan 50 frame yüklenmişse oynat dememiz lazımdır. Bu frame;'lerin altına ilave layer açarak istediğimiz mesajları yazdırabiliriz.

Hedef Belirtme

Animasyonu yaptınız ama eksik olan bir şeyler var. Düğmelerinizdeki etkileşimler hep aynı yerde değilmi. Kullanıcı bir düğmeye tepki verdiğinde, başka bir yerde bir şeyler olsun istiyorsak bunu "tell target" ile, yani hedef söyleyerek yapabiliriz. Şimdi boş bir çalışma sayfası açıp işe başlayalım. Sayfanın alt kısmına yuvarlak çizip içine ana sayfa yazalım. Sonra hepsini seçip F8 tuşuna basalım. Adına ana sayfa diyerek "button" seçeneğini işaretleyip tamam diyelim. Sonra sahnenin görünmeyen yerine geniş bir dikdörtgen çizelim. Bunu da seçip F8 tuşu ile animasyon adı altında "Movie clip" yapalım. Şimdi animasyon adlı movie clip'imizi kütüphanemizden çağırarak açalım. 5. frame'e gidip keyframe koyalım. Seçili olan dikdörtgeni silip aynı genişlikte daha uzun bir dörtgen çizelim ve içine "tıklarsanız ana sayfaya gidersiniz" yazalım. Sonrada "shape tween" ile animasyonu bitirelim. Sonra da ilk ve son frame'lere Actions'tan stop değerini verelim (Bu sefer frame'e Actions verildi!). Tekrar scene1'e dönüp, yaptığımız animasyonun üzerinde sağ tıklayıp properties'inden "Definition" sekmesini seçelim. Orada "Instance Name" kısmına ana sayfa yazalım. Bu, yaptığımız movie clip'in gerçek ismidir.

Şimdi "Insert > Scene" ile bir scene daha ekleyelim. Burayada "Şimdi ana sayfaya girmiş oldunuz" yazalım ve hemen altına "geri dönmek için buraya tıklayın" yazalım. Son yazdığımız yazıyı seçip F8 ile düğme yapalım. Yaptığımız bu düğmenin Actions kısmına "On Mouse Event" yazdıralım. Sonrada "GoTo" komutunu koyalım. "GoTo" komutuna, sağ taraftan "Scene1" diyelim. "On" komutuna da Press diyelim ve kapatalım. Liste aşağıdaki gibi olmalı. Burada yaptığımız iş -"geri dönmek için burayı tıklayın" yazısına tıklandığı zaman scene 1'e git ve dur, demektir. Dur diyoruz çünkü Scene 1'de oynatılacak bir şey yok. Eğer olsaydı, alt kısımda "goto and play" seçeneğini işaretlememiz gerekirdi.

Tekrar Scene 1'e dönelim ve orda olan ana sayfa düğmesinin Actions'ına geçelim. İlk önce mouse üzerine geldiği zaman yukardaki movie clip'i oynatsın diyeceğiz. Yani hedef söyleceğiz. Artıya basarak "tell target" seçin. Yan tarafta ana sayfa isimli movie clip görünecektir. Eğer görünmüyorsa movie clip'in "Instance Name" kısımına bir şey yazmamışsınızdır. Ana sayfa yazılı clip'in üzerine çit tıklayın. Aşağıda "Target" penceresine "/ana sayfa" yazacaktır. Artık hedef belli oldu. Şimdi yine artıya basarak "Play" komutu verelimki movie clip oynasın. Yoksa ilk frame'e verdiğimiz stop değerinden dolayı 1. frame'de kalır. Eğer hedef movie clip'imiz karışık bir animasyon ise, o zaman "GoTo" diyerek isdeğimiz frame'den oynatmaya başlayabilirdik. Ama bize sadece "Play" demek yetiyor. "On" komutuna da "Roll Over" diyelim ki mouse düğmenin üzerine geldiğinde animasyon oynamaya başlasın. Şimdi en aşağıda kalan "End On" komutunun üzerine gelip tekrar artıya basalım. Yine "tell target" diyelim. Bunu da mouse düğmenin üzerinden çekildiği zaman animasyonun durması için yapalım. Aynı şekilde hedefi "ana sayfa" seçelim ama bu sefer "GoTo" diyerek durmasını sağlayalım. Aşağıdaki Control seçeneği "goto and play" işaretli değilse, komut "Go To and Stop (1)" şeklinde olacaktır. Son verdiğimiz hedefin "On" komutuna da "Roll Out" diyelim ki mouse üzerinden çekildiği zaman movie clip oynamasın. Burada dikkat edilmesi gereken bir nokta var. Eğer mouse düğmenin üzerinden çekildikten sonra da movie clip'in başka bir yeri oynayacaksa frame numarasını vermek yeterlidir. Yalnız movie clip üzerinde hangi frame'lere stop değerlerini verdiğinizi unutmayın. Son olarak tıkladığımız zaman Scene 2'ye geçsin istiyoruz. En alttaki "End On" komutunun üzerine gelin ve artıya basın (dikkat ederseniz komutları sırası ile vermek için, yazacağımız komut nereye koyulacaksa onun hemen üstüne tıklamanız gerekli). Bu sefer "On Mouse Event" komuunu seçin, ardından "GoTo" komutunu seçin ve sağ taraftan Scene 2'yi işaretleyin. Scene 2'de oynatılacak hiç birşey olmadığından "stop" değerinde kalıp kalmaması önemli değildir. "On" komutunu da "Press" yaparak tıklandığı zaman Scene 2'ye geçmesini sağlayalım ve son olarak Scene 1'deki frame'e "Stop" değerini verelim. Bu da Scene 1 oynadıktan sonra hemen Scene 2'ye geçmesini önler. Artık aşağıdaki komut listesinde görüldüğü gibi listemizi bitirelim. CTRL+ENTER'e basarak izleyin

Flash Değişken Tanımlama

Bu dersimizde flash'ta değişken tanımlayarak ve bu değişkenleri kullanarak, animasyonumuza interaktiflik katmayı öğreneceğiz. Bunun için en güzel animasyon hesap yapabilen bir animasyon olabilir. Boş bir çalışma sayfasında CTRL+L'ya basıp kütüphanemizi açalım. Options düğmesini kullanarak "new symbol" ile yeni sembol yaratalım. Ancak "behavior" yani davranış biçimi olarak button seçelim. Button'un isminede "rakam1" diyelim. Karşımıza gelen ekrana küçük bir kare çizelim ve içine "1" rakamını yazalım. Sonra tümünü kopyalayarak yeni bir button daha oluşturup, buraya yapıştıralım. Ve her yeni button'a bir rakam verelim. Şimdi elimizde üzerinde "0"dan "9"a kadar olan 10 adet düğme oluştu. Aynı yöntemle "+" , "-" , "/" , "*" , "=" , "." işlemlerini ifade edecek düğmeleri de yapalım.Ve devam edelim, bu sefer üzerinde "CE" , "C" , "MRC" , "M+" yazan düğmelerinide yaparak tüm düğmelerimizi oluşturalım. Biz buraya kadar ne yaptık? Toplam 20 adet düğme yaptık. Bunların 10 tanesi rakamları ifade ediyor. Bir tanesi noktalamayı ifade ediyor. Beş tanesi toplama, çıkarma, çarpma, bölme ve eşittiri ifade ediyor. Birisi hafızaya almayı ifade ediyor. Birisi hafızayı göstermeyi, diğerleride ekranı silme ile tüm işlemleri silmeyi ifade ediyor. Yani basit bir hesap makinasında olması gereken herşey var. Bunu yapmayı öğrendikten sonra fonksyonları arttırmak sizin elinizde.

Artık Scene1 yazılı ekranımıza dönebiliriz. Yaptığımız tüm düğmeleri ekrana sürükleyerek düzgün bir şekilde dizelim. Sonra sahnenin üstüne bir "text field" koyalım. Bunu alet kutusundaki "A" text dümesine basıp, modifier kısmındaki abl yazılı düğmeye basarak yapabilirsiniz. Şimdi sahnemizde hesap makinamızın tüm tuşları ve ekranı oluşmuş oldu. Hazır hesap makinamızın ekranını yapmışken üzerinde sağ tıklayıp, properties'ine girelim. Açılan pencerede en üstte yazan variable kısmına "ekran" yazalım. Buraya "ekran" yazmamızın nedeni, ileride yazacağımız program akışına göre ekran değişkenine istediğimiz değeri atayabileceğiz. Ve bu değişkene atadığımız değerleri "text field" kısmında görebileceğiz.

Artık hesap makinamız görünüş itibarı ile hazır sayılır. Şimdi ilk değişkenlerimizi tanımlayalım. Layer 1'de duran tek keyframe'in üstüne sağ tıklayıp, properties'inden Actions'a geçelim. Komut listesinden "Set Variables"e basalım. Yan tarafta iki adet "text field" yani yazı yazabileceğimiz alan çıktı. Birisi "variable"; yani değişkenimiz, diğeri "value"; yani değişkene atayacağımız değer. Birinci değişkenimize "hafiza" diyelim ve değer olarak "0" atayalım.

Dikkat: Değişken isimlerimizde asla tükçe karakter bulunmamalı. Zaten yazmak istediğiniz zaman bir uyarı mesajı alacaksınız. İkinci konu, değişkenimiz ve değerinin özelliği nasıl olmalıdır. Yani değişkenimizin alfanümerik karakter özelliğe sahip olmasını istiyorsak bunu çift tırnak içinde tanımlamalıyız. Aynı şey değeri içinde geçerlidir. Eğer rakamsal özelliğinden yararlanacaksak, bu sefer tırnak işaretlerini kaldırmalısınız. Bunu en sağda bulunan "abc - string literal" yada "= - expression" düğmesine basarak yapabilirsiniz. "abc" string literal, değişkenlerimizi alfanümerik olarak yorumlar ve çift tırnak içine alır. "=" expression ise değişkenlerimizi rakam gibi yorumlar ve tırnak içine almaz. Bunu bir örnekle anlatalım. Diyelimki rakam1 ve rakam2 isimli iki değişkenimiz var, değerleride 100 ve 200 olsun. Bunları çift tırnak içine alırsak, yani string literal yaparsak, bu iki değeri "+" ile toplamaya kalktığımızda yeni değerimiz "rakam1rakam2" olacaktır. Ama çift tırnak içine almazsak, yeni değerimiz 300 olur.

"rakam1"="100" , "rakam2"="200"
"sonuc"="rakam1"+"rakam2"
"sonuc"="rakam1rakam2"
rakam1=100 , rakam2=200
sonuc=300

İkinci değişken olarakta "ekran" diyelim ve değer olarak yine "0" atayalım. Değişkenlerimizi tanıttıktan sonra "Stop" komutunu vererek buradaki işimizi bitirelim. "hafiza" değişkenimiz aslında "M+" tuşuna basıldığı zaman atayacağımız değer. "ekran" ise hesap makinamızın ekranındaki değerdir ve şimdilik ikiside sıfırdır. İşlemlerimiz bittiyse aşağıdaki gibi bir komut satırı çıkacaktır.

Set Variable: "hafiza" = "0"
Set Variable: "ekran" = "0"
Stop

Layer1'deki zaman eksenine bir frame daha yerleştirelim. Ve bu frame'in üzerinde sağ tıklayıp properties'ini açalım. Actions'a geçmeden önce "Label" kulakçığını tıklayalım ve "name" kısmına "RakamEkle" yazalım. Bu şekilde ikinci frame'in sadece hesap makinamızın ekranına rakam eklemek olduğunu söylüyoruz. Bu "RakamEkle" ismini daha sonra çağırarak kullanacağız. Artık "Actions"a geçebiliriz. Şimdi komutlarımızı yazmadan önce düşünelim. Her bir rakam için yaptığımız buttonlardan gelecek değere bir değişken vermek lazım. Bu değişkene "rakam" diyebiliriz. Basitçe "ekran" değişkenine "rakam" değişkenini atarsak ekranımızda rakamı görürüz. Yani "Set Variable: "ekran" = rakam". Ama bu şekilde asla iki ve daha üstü basamaklı sayıları yazdıramayız. Her yeni rakama bastığımızda önceki rakam silinecektir. Bir de arka arkaya nokta basılmasını engelleyemeyiz. O zaman şöyle bir şey yazalım:

If (ekran eq "0" and not(rakam eq "."))
Set Variable: "ekran" = rakam
Else
Set Variable: "ekran" = ekran & rakam
End If

İlk önce artıya basarak If komutunu çağırın. Yan tarafta "Condition" isimli bir yazı alanı çıkacak. Buraya değilde onun yanındaki "=" işaretine basarak karşımıza gelecek pencereye yazalım. Parantez işaterini kendisi yazdığından bizim yazmamıza gerek yok. "ekran" yazdıktan sonra "operator" kısmında bulunan eq ifadesine çift tıklayın. Tırnak içinde sıfır yazın. Sonra yine "operator"dan "and" ve "not" ifadelerine çift tıklayın. Sonrada parantez içinde rakam yazıp "operator"dan "eq", ve tırnak içinde nokta yazıp bitirin. "Else" ifadesi için "Condition" penceresinin altındaki "Add Else/Else If Clause" düğmesine basın ve nerede kullanmak isterseniz "Actions" penceresinin üstündeki ok işaretleri ile kaydırın.

Şimdi gelelim ne yaptığımız