Bilişim Teknolojileri AlanıGrafik ve Animasyon

AS3 Biçim Animasyonları

Önceki derslerimizde animasyonları zaman çizelgesi üzerinde gerçekleştirmiştik. Bu dersimizde nesneleri ActionScript kodlarla hareket ettireceğiz. AS3 kodlarla oluşturduğumuz bu animasyonları ikiye ayırıyoruz.

  1. Biçim Animasyonları
  2. Hareket Animasyonları

Bu yazımızda biçim animasyonlarını öğreneceğiz. Biçim animasyonları için Transition sınıfını kullanacağız.  Bu sınıfı doğrudan kullanamaz veya bu sınıfa doğrudan erişemezsiniz. Bu sınıf, geçiş temelli sınıfların, TransitionManager sınıfının bir örneği tarafından erişilen bazı ortak davranışlar ve özellikleri paylaşmasına olanak tanır. “Nasıl kullanılır?” sorusunu yanıtlamaya çalışalım. Öncelikle

import fl.transitions.*;
import fl.transitions.easing.*; // bu sınıflar dahil edilir. Daha sonra   

TransitionManager.start(MovieClip_Adi, {
type:Fade, // Animasyon türü seçilir
direction:Transition.IN,  // Animasyon hareket hızı yönünü belirler.
duration:9, // Animasyonun süresini sn cinsinden belirler
easing:Strong.easeOut // Animasyon için ara doldurma efektini ayarlar.
});

Biçim Animasyonları Türleri : 

  1. Panjur Animasyonu (Blinds): Görünen veya kaybolan·dikdörtgenler kullanarak film klibi nesnesini gösterir. Bu efekt için şu parametreler gereklidir:
    numStrips: Blinds efektindeki maskeleme şeritlerinin sayısı. Önerilen aralık 1’den 50’ye kadardır.
    dimension: Maskeleme şeritlerinin dikey mi (0) yoksa yatay mı (1) olacağını gösteren tam sayı.
  2. Silinerek Geçiş Animasyonu (Fade): Film klibi nesnesinin yavaşça belirmesini veya kaybolmasını sağlar. Bu efekt ek parametreler gerektirmez.
  3. Uçma Animasyonu (Fly) : Film klibi nesnesini belirli bir yönden içeri kaydırır. Bu efekt için şu parametreler gereklidir:
    startPoint: Başlangıç konumunu gösteren tam sayıdır; aralığı 1’den 9’a kadardır: Üst Sol:1; Üst Orta:2, Üst Sağ:3; Sol Orta:4; Orta:5; Sağ Orta:6; Alt Sol:7; Alt Orta:8, Alt Sağ:9.
  4. Iris Animasyonu (Iris) : Yakınlaşan veya uzaklaşan kare şeklindeki veya daire şeklindeki animasyon uygulanmış bir maskeyi kullanarak film klibi nesnesini gösterir.
    Bu efekt için şu parametreler gereklidir:
    startPoint: Başlangıç konumunu gösteren tam sayıdır; Aralığı 1’den 9’a kadardır: Üst Sol:1; Üst Orta:2, Üst Sağ:3; Sol Orta:4; Orta:5; Sağ Orta:6; Alt Sol:7; Alt Orta:8, Alt Sağ:9.
    shape: maskenin fl.transitions.Iris.SQUARE (kare) veya fl.transitions.Iris.CIRCLE (daire) şeklidir.
  5. Fotoğraf Animasyonu (Photo) : Film klibi nesnesinin fotoğraf flaşı gibi görünmesini
    veya kaybolmasını sağlar.Bu efekt ek parametreler gerektirmez.
  6. Kare Kare Erime Animasyonu (PixelDissolve) : Kareli bir desende rastgele görünen veya kaybolan dikdörtgenler kullanarak film klibini gösterir. Bu efekt için şu parametreler gereklidir:
    xSections: Yatay eksendeki dikdörtgen maskeleme bölümlerinin sayısını gösteren tam sayı. Önerilen aralık 1’den 50’ye kadardır.
    ySections: Dikey eksendeki dikdörtgen maskeleme bölümlerinin sayısını gösteren tam sayı. Önerilen aralık 1’den 50’ye kadardır.
  7. Döndürme Animasyonu (Rotate) : Film klibi nesnesini döndürür. Bu efekt için şu parametreler gereklidir:
    ccw: Boole değeri: saat yönünde döndürme için false; saat yönünün tersine döndürme için true.
    degrees: Nesnenin kaç derece döndürüleceğini gösteren tam sayı. Önerilen aralık 1’den 9999’a kadardır.
    Örneğin, 1080 derece ayarı, nesneyi tam olarak üç kez döndürür.
  8. Sıkma Animasyonu (Squeeze) : Film klibi nesnesini yatay veya dikey olarak ölçeklendirir.
    Bu efekt için şu parametreler gereklidir:
    dimension: Squeeze efektinin yatay (0) mı yoksa dikey (1) mi olacağını gösteren tam sayı.
  9. Silme Animasyonu (Wipe) : Yatay olarak hareket eden bir şeklin animasyon uygulanmış maskesini kullanarak film klibi nesnesini gösterir veya gizler. Bu efekt için şu parametre gereklidir:
    startPoint: Başlangıç konumunu gösteren tam sayıdır; aralığı 1’den 9’a kadardır: Üst Sol:1; Üst Orta:2, Üst Sağ:3; Sol Orta:4; Orta:5; Sağ Orta:6; Alt Sol:7; Alt Orta:8, Alt Sağ:9.
  10. Yakınlaştırma Animasyonu (Zoom) : Film klibi nesnesini orantılı olarak ölçekleyerek yakınlaştırır veya uzaklaştırır. Bu efekt ek parametreler gerektirmez.

Kodlar:

import fl.transitions.*;
import fl.transitions.easing.*;
import flash.events.MouseEvent;

/* Panjur Animasyonu (Blinds): Görünen veya kaybolan·dikdörtgenler kullanarak 
film klibi nesnesini gösterir. 
Bu efekt için şu parametreler gereklidir:
numStrips: Blinds efektindeki maskeleme şeritlerinin sayısı. 
Önerilen aralık 1'den 50'ye kadardır.
dimension: Maskeleme şeritlerinin dikey mi (0) yoksa yatay mı (1) olacağını gösteren tam sayı.*/

blinds_mc.addEventListener(MouseEvent.CLICK, anim_blinds);

function anim_blinds(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Blinds, // Animasyonun tipini tanımlar
 direction: Transition.OUT, // Animasyonun yönünü tanımlar
 duration: 2, // Animasyon için geçecek süre sn cinsinden belirlenir.
 easing: None.easeInOut, // Animasyon türü belirlenir
 numStrips: 10, // Panjur sayısı belirlenir.
 dimension: 0 // 0 Yatay, 1 Dikey panjur değerini verir. 
 });
}

/***********************************/

// Silinerek Geçiş Animasyonu (Fade): Film klibi nesnesinin yavaşça belirmesini veya kaybolmasını sağlar.

fade_mc.addEventListener(MouseEvent.CLICK, anim_fade);

function anim_fade(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Fade, // Animasyonun tipini tanımlar
 direction: Transition.IN, // Animasyonun yönünü tanımlar
 duration: 3, // Animasyon için geçecek süre sn cinsinden belirlenir.
 easing: None.easeInOut // Animasyon türü belirlenir 
 });
}

/***********************************/

/* Uçma Animasyonu (Fly) : Film klibi nesnesini belirli bir yönden içeri kaydırır. 
Bu efekt için şu parametreler gereklidir:
startPoint: Başlangıç konumunu gösteren tam sayıdır; 
aralığı 1'den 9'a kadardır: Üst Sol:1; Üst Orta:2, Üst Sağ:3; Sol Orta:4; 
Orta:5; Sağ Orta:6; Alt Sol:7; Alt Orta:8, Alt Sağ:9.
*/

fly_mc.addEventListener(MouseEvent.CLICK, anim_fly);

function anim_fly(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Fly, // Animasyonun tipini tanımlar
 direction: Transition.OUT, // Animasyonun yönünü tanımlar
 duration: 2, // Animasyon için geçecek süre sn cinsinden belirlenir.
 easing: None.easeInOut, // Animasyon türü belirlenir
 startPoint: 3
 });
}

/***********************************/

/* Iris Animasyonu (Iris) : Yakınlaşan veya uzaklaşan kare şeklindeki veya daire şeklindeki
animasyon uygulanmış bir maskeyi kullanarak film klibi nesnesini gösterir. 
Bu efekt için şu parametreler gereklidir:
startPoint: Başlangıç konumunu gösteren tam sayıdır; 
Aralığı 1'den 9'a kadardır: Üst Sol:1; Üst Orta:2, Üst Sağ:3; Sol Orta:4; 
Orta:5; Sağ Orta:6; Alt Sol:7; Alt Orta:8, Alt Sağ:9.
shape: maskenin fl.transitions.Iris.SQUARE (kare) veya 
fl.transitions.Iris.CIRCLE (daire) şeklidir.
*/

iris_mc.addEventListener(MouseEvent.CLICK, anim_iris);

function anim_iris(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Iris,
 direction: Transition.IN,
 duration: 2,
 easing: Strong.easeInOut,
 startPoint: 5,
 shape: Iris.CIRCLE
 });
}

/***********************************/

/* Fotoğraf Animasyonu (Photo) : Film klibi nesnesinin fotoğraf flaşı gibi görünmesini
veya kaybolmasını sağlar.
*/

photo_mc.addEventListener(MouseEvent.CLICK, anim_photo);

function anim_photo(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Photo,
 direction: Transition.IN,
 duration: 1,
 easing: None.easeNone
 });
}
/***********************************/

/* Kare Kare Erime Animasyonu (PixelDissolve) : Kareli bir desende rastgele görünen veya kaybolan dikdörtgenler kullanarak film klibini gösterir. 
Bu efekt için şu parametreler gereklidir:
xSections: Yatay eksendeki dikdörtgen maskeleme bölümlerinin sayısını gösteren tam sayı. Önerilen aralık 1'den 50'ye kadardır.
ySections: Dikey eksendeki dikdörtgen maskeleme bölümlerinin sayısını gösteren tam sayı. Önerilen aralık 1'den 50'ye kadardır.
*/

pixel_mc.addEventListener(MouseEvent.CLICK, anim_pixel);

function anim_pixel(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: PixelDissolve,
 direction: Transition.OUT,
 duration: 2,
 easing: Regular.easeIn,
 xSections: 20,
 ySections: 20
 });
}
/***********************************/

/* Döndürme Animasyonu (Rotate) : Film klibi nesnesini döndürür. 
Bu efekt için şu parametreler gereklidir:
ccw: Boole değeri: saat yönünde döndürme için false; 
saat yönünün tersine döndürme için true.
degrees: Nesnenin kaç derece döndürüleceğini gösteren tam sayı. 
Önerilen aralık 1'den 9999'a kadardır. 
Örneğin, 1080 derece ayarı, nesneyi tam olarak üç kez döndürür.*/

rotate_mc.addEventListener(MouseEvent.CLICK, anim_rotate);

function anim_rotate(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Rotate,
 direction: Transition.IN,
 duration: 3,
 easing: Strong.easeInOut,
 ccw: false,
 degrees: 720
 });
}
/***********************************/

/* Sıkma Animasyonu (Squeeze) : Film klibi nesnesini yatay veya dikey olarak ölçeklendirir.
Bu efekt için şu parametreler gereklidir:
dimension: Squeeze efektinin yatay (0) mı yoksa dikey (1) mi olacağını gösteren tam sayı.*/

squeeze_mc.addEventListener(MouseEvent.CLICK, anim_squeeze);

function anim_squeeze(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Squeeze,
 direction: Transition.IN,
 duration: 2,
 easing: Elastic.easeOut,
 dimension: 1
 });
}
/***********************************/

/* Silme Animasyonu (Wipe) : Yatay olarak hareket eden bir şeklin animasyon uygulanmış maskesini kullanarak film klibi nesnesini gösterir veya gizler.
Bu efekt için şu parametre gereklidir:
startPoint: Başlangıç konumunu gösteren tam sayıdır; aralığı 1'den 9'a kadardır: 
Üst Sol:1; Üst Orta:2, Üst Sağ:3; Sol Orta:4; Orta:5; Sağ Orta:6;
Alt Sol:7; Alt Orta:8, Alt Sağ:9.*/

wipe_mc.addEventListener(MouseEvent.CLICK, anim_wipe);

function anim_wipe(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Wipe,
 direction: Transition.IN,
 duration: 2,
 easing: None.easeNone,
 startPoint: 1
 });
}
/***********************************/

/* Yakınlaştırma Animasyonu (Zoom) : Film klibi nesnesini orantılı olarak ölçekleyerek yakınlaştırır 
veya uzaklaştırır. Bu efekt ek parametreler gerektirmez:*/

zoom_mc.addEventListener(MouseEvent.CLICK, anim_zoom);

function anim_zoom(event: MouseEvent) {

 TransitionManager.start(cpu_mc, {
 type: Zoom,
 direction: Transition.IN,
 duration: 2,
 easing: Elastic.easeOut
 });
}
/***********************************/

Çıktı :

Serhat Demir

Bilişim Teknolojileri Öğretmeni

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Bu site, istenmeyenleri azaltmak için Akismet kullanıyor. Yorum verilerinizin nasıl işlendiği hakkında daha fazla bilgi edinin.