Bilişim Teknolojileri Alanı Grafik ve Animasyon

AS3 Biçim Animasyonları

21 Şubat 20177 Haziran 2018 Serhat Demir

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

Biçim Animasyonları
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.
});

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 :

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ı.
Silinerek Geçiş Animasyonu (Fade): Film klibi nesnesinin yavaşça belirmesini veya kaybolmasını sağlar. Bu efekt ek parametreler gerektirmez.
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.
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.
Fotoğraf Animasyonu (Photo) : Film klibi nesnesinin fotoğraf flaşı gibi görünmesini
veya kaybolmasını sağlar.Bu efekt ek parametreler gerektirmez.
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.
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.
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ı.
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.
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
 });
}
/***********************************/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

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

});

}

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

Bilişim Matik

AS3 Biçim Animasyonları

Biçim Animasyonları Türleri :

Kodlar:

Çıktı :

Serhat Demir

Bir yanıt yazın Yanıtı iptal et

Biçim Animasyonları Türleri :

Kodlar:

Çıktı :

Önerilen Diğer Yazılar:

Serhat Demir

Bunları da sevebilirsiniz

Flash CS6′ da Dinamik Metin işlemleri

Web Tasarım Dersleri – Web Sitesi Oluşturma

Plunker Çevrimiçi Editör Kullanımı

Bir yanıt yazın Yanıtı iptal et