Flash CS5 Türkiye Haritası Animasyonu Resimli Anlatım

Flash Mask Layer Örnek Çalışması:

Bu yazımda Flash CS3, CS4 ve CS5 versiyonlarında uygulayabileceğiniz basit bir maskeleme uygulamasını anlatmaya çalışacağım . Tüm işlemleri adım adım resimlendirerek göstermeye çalıştım. Oldukça basit bir animasyon. Frame By Frame animasyon tekniğine dayanıyor. Kodlama gerektiren bir durum yok. Sadece son frameye animasyon dursun diye bir ActionScript kodu koydum. Animasyon ekrana basit bir Türkiye haritası çizmektedir. Şimdi adım adım bu animasyonun nasıl yapıldğını görelim.

Adım 1:

İlk önce internetten basit bir Türkiye haritası bulun.

Adım 2:
Flash programınızı başlatın ve boş bir Flash dokumanı oluşturun AS2 veya AS3 olması fark etmez.

Adım 3:

Haritanızı Üst menüden File > Import > Import to Stage yolunu izleyerek çalışma alanınıza yükleyin ve boyutlarını ayarlayın.

 Adım 4:

 Resmin tamamını seçin ve klavyeden CTRL+B ya da Üst menüde Modify >Break Apart yolunu izleyerek resmin pixellerine ayrılmasını sağlayın.

 Resim şekilde görüldüğü gibi seçili hale gelecektir.

 Adım 5:

 İlk önce resimdeki gibi Laso Tool’a ardında toolbarın alt kısmında olan Magic Wand’a tıklayın ve ardından harita resmindeki gri noktalı alanlara tıklayın ve seçili hale getirin. Ardında del tuşuna tıklayarak tüm gri alanları temizleyin. Geriye bir tek haritanın çizgileri kalsın. Eğer vektörel bir resimle çalışıyorsanız muhtemelen bu işlemi yapmanıza gerek yok. Burada amaç haritanın çizgilerini Falsh çalışma ortamında resimden ayırmak. Dilerseniz Çalışma alanının arka planını başka bir renkle renklendirip beyaz kısımları Eraser Tool ile silebilirsiniz .Dediğim gibi amaç geriye sadece sınır çizgilerinin kalması.

 Adım 6:

 Haritamızın bulunduğu layera maske ismini verin ve cizim isimli yeni bir layer oluşturup maske layerının altına koyun.

Adım 7:

Maske layerının üstüne gelip farenin sağ tuşuyla tıklayın ve açılan menüden Mask seçeneğini seçin. Harita resmi kaybolacaktır. Cizim isimli layerın satırında bulunan kilit resmine tıklayarak haritayı görünür hale getirin.

 Adım 8:

 Maske layerında “Show Layer as Outlines” adlı minik yeşil bir kutucuk var. Sizin çalışmanızda bunun rengi başka olabilir. O kutucuğa tıklayarak içindeki rengin kaybolmasını sağlayın. Böylece haritamızın sınır çizgilerinin içi boşalacak sadece bu çizgilerin kenarlıkları görüntülenecektir.

Adım 9:

Tekrar cizim layerına dönüyoruz ve soldaki araç kutusundan Brush tool’u seçiyoruz. İstediğimiz bir rengi seçebiliriz.Bruaya kadar yaptıklarımız resmi ve animasyona kılavuzluk edecek olan çizgileri belirlemekle ilgiliydi. Bu adımdan sonra animasyonumuz oluşturmaya başlayacağız. Çizim layerındayken klavyeden F6 tuşuna basın ve yeni bir frame oluşturun haritanın istediğiniz bir kısmına zoom yapın. Burası başlangıç noktanız olacak. Brush tool ile harita çizgisinin minik bir kısmını boyayın ve ardından tekrar F6’ya basarak yeni bir layer oluşturun. Bunu her layerda tekrarlayarak tüm harita çizgilerini boyayın. Boyadığınız çizgilerin kesişmemesine dikkat edin.

 Adım 10:

 Tüm boyama işlemi tamamlandığında harita aşağı yakarı şu şekilde olmalıdır. Frame By Frame animasyon biraz uzun sürebilir ama ne kadar çok parça yaparsanız animasyonunuz o kadar güzel ve gerçekçi olur. Artık Üst menüden Control > Test Movie > in Flash Proffessional yolunu takip ederek animasyonunuzu  test edebilirsiniz.

 Adım 11:

Son olarak bir layer ekleyn ismini actionscript olsun. En son Frame üstüne gelip F6 tuşuna basın. Böylelikle bu Frame bölünmüş olur. Klavyeden F9 tuşuna basıp Action-Frames isimli paneli açın ve şu kodu yazın  " stop(); ” bu kod flas animasyonun yazıldığı karede durmasını sağlar.  ActionScript kodu son kareye(frame) yazıldığı için animasyon son karede duracaktır.

Böylelikle animasyon tamamlanmış oluyor. Aşağıda animasyonun tamamlanmış hali gif formatında görülmektedir. muhtemelen flash versiyonu daha hızlı işliyor. burada sadece bittiği zaman neye benzemesi gerektiğini göstermek için koydum.

 Bu çalışmanın örnek FLA dosyasını ayrıca şu linkten indirebilirsiniz. 

Download FLA File