Hep Birlikte Flash Site Yapalım

[Kerem Özdemir]

Merhaba bir çoğunuzun işine yarıyacağını düşündüğüm resimler ve acıklama satırları ilede daha kolay anlatımı olabilcek basit bir site örneği hazırladım. Bu örnekten sonra herkes kendisi için bile flash bir site rahatlıkla hazırlayabilecek. Verilen adımları takip ve acıklama satırlarını dikkat ile okuyunuz. Sorularınız olursada cekinmeden yazabilirsiniz... İşte örneğimiz:

_________________________________________________________________________

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var bArray:Array = new Array();

var desc:String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";

var id:int;

var nArray:Array = new Array("Home Page","About Page","Works Page","Contact Page");

var boo:Boolean = false;

function init():void
{
for(var i:uint=0; i<4; i++)
{
// LIBRARY deki Btn, bArray olarak indexlenen dizeye eşitleniyor
// bölece dört ayrı MovieClip üretmiş olduk;
bArray = new Btn();

bArray.bName.text = nArray;
bArray.x = -130;
bArray.y = (i * (bArray.height + 3)) + 90;
bArray.alpha = 0;

//olusturduğumuz MovieClipleri sahnemize akledik;
addChild(bArray);

bArray.mouseChildren = false;
bArray.buttonMode = true;

//for ile olusturulan MovieCliplere EventListener ekliyoruz;
bArray.addEventListener(MouseEvent.MOUSE_OVER, setOver);
bArray.addEventListener(MouseEvent.MOUSE_OUT, setOut);
bArray.addEventListener(MouseEvent.MOUSE_DOWN, setDown);
}

//dispatchEvent fash player ilk acıldığında setDown fonksiyonu calıştırılıyor;
bArray[0].dispatchEvent(new MouseEvent(MouseEvent.MOUSE_DOWN));

// sahne dışındaki textContent MovieClip'binin x koordinatı xLoc'la hafızaya alınmıs oldu;
textContent.xLoc = textContent.x;

textContent.alpha = 0;

//zamanlıyıcı baslatılıyor(her 200 milisaniye 4 kere kendini tekrarlıyacak)
var time:Timer = new Timer(200,bArray.length);
time.addEventListener(TimerEvent.TIMER, onTime);
time.start();
}

function onTime(e:TimerEvent):void
{
//currentCount -1 zamanlıyıcının 0'dan baslamasını sağlıyor.
var count:int = e.target.currentCount - 1;

//zamanlayıcı sırasına göre olusturulan MovieCliplerin x ve alpha değerleri Tween ile değişiyor;
var tw:Tween = new Tween(bArray[count],"x",Regular.easeIn,bArray[count].x,5,.8,true);
var tw1:Tween = new Tween(bArray[count],"alpha",Regular.easeIn,0,1,.7,true);
}

function setOver(e:MouseEvent):void
{
// Cursor üzerinde oldugu MovieClip içindeki timeline animasyonu gotoAndPlay(2);
e.currentTarget.gotoAndPlay(2);
}

function setOut(e:MouseEvent):void
{
// Cursor üzerinde oldugu MovieClip içindeki timeline animasyonu gotoAndPlay(11);
e.currentTarget.gotoAndPlay(11);
}

function setDown(e:MouseEvent):void
{
// id değişkeni bArray dizisinin index sırasına eşitleniyor
id = bArray.indexOf(e.currentTarget);
trace(id);

//gene id değişkeni ile nArray dizisine referans olarak veriliyor;
// amaç textContent içindeki pTitle dinamik texttin hangi butonu tıklandığı
// ve hangi sayfanın geldiği bilgisini varmek
textContent.pTitle.text = nArray[id];

// desc değişkeni textContent içindeki describe dinamik text'e eitleniyor;
// siz bunu değiştirmek isteye bilirsiniz yeni dizi olusturarak tıpkı str
// değişkeni gibi coğaltın ve dizi içersine alın new dizi(str1,str2,str3)
//gibi
textContent.describe.text = desc;

updatePage();
}

function updatePage():void
{
// boo false eşit oldugundan true eşitledik koşullu ifadenin dewamı için
// ve sonra tekrar false olarak eşitlendi.
if(boo == false)
{
boo = true;

// textContent x koordinatı 145 cağırılıyor.
var tw0:Tween = new Tween(textContent,"x",Back.easeIn,textContent.x,145,.8,true);
var tw1:Tween = new Tween(textContent,"alpha",Regular.easeIn,0,1,.7,true);
}
else if(boo == true)
{
boo = false;

// textContent tekrar bir önceki x koordinatına dönüyor(textContent.xLoc)
// ve Tween bittiğinde updateTween olayı tetiklendi
var tw2:Tween = new Tween(textContent,"x",Back.easeIn,textContent.x,textContent.xLoc,.8,true);
var tw3:Tween = new Tween(textContent,"alpha",Regular.easeIn,1,0,.7,true);
tw2.addEventListener(TweenEvent.MOTION_FINISH, updateTween);
}
}

function updateTween(e:TweenEvent):void
{
// x bir önceki x'ten(textContent.xLoc) küçükse --> x = 145
if(textContent.x < textContent.xLoc)
{
boo = true;
var tw0:Tween = new Tween(textContent,"x",Back.easeIn,textContent.x,145,.8,true);
var tw1:Tween = new Tween(textContent,"alpha",Regular.easeIn,0,1,.7,true);
}

// x bir önceki x'ten(textContent.xLoc) buyukse --> x = xLoc
if(textContent.x > textContent.xLoc)
{
boo = false;
var tw2:Tween = new Tween(textContent,"x",Back.easeIn,textContent.x,textContent.xLoc,.8,true);
var tw3:Tween = new Tween(textContent,"alpha",Regular.easeIn,1,0,.7,true);
}
}

init();

______________________________________________________________________


http://rapidshare.com/files/271097072/dersler.rar.html

gerekli dosya ve resimli anlatım bu linkten indire bilirsiniz.

 

[Emre Zengin]

inceliycektim ama fla dosyası açılmıyor bakarmısın

 

[Abdullah YİĞİT]

Açılıyor sorun yok elinize sağlık kerem bey

 

[Kerem Özdemir]

Şöyle bir sorun oabilir CS3 kullanıyorsan sana sorun cıkarır ben CS4 de hazırladım ama CS3 kullanan arkadaşlar için baska bir link daha vereyim:
http://rapidshare.com/files/271646434/dersler_CS3.rar.html

 

[Dilek Doğrusöz]

kerem bey paylaşım için teşekkürler şuan inceliyorum ama bir sorum olacak butonları önizlemede animasyonda görüyorum ama fla sında göremiyorum butonların nasıl yapıldığını görmek istemiştim ayrıca yazıları da fla da göremiyorum
bu arada cs3 yüklü onu inceledim ben

 

[Kerem Özdemir]

fla içersinde buttonlar gözükmüyor doğrudur. cünkü kütüphanedki Btn MovieClip bi içerdeki yazdığımız kodların yardımı ile export ladıktan sonra olusuyor test movie (ctrl+Enter) ile swf de gözüküyor.

kütüphanedeki Btn MovieClip cift tıklayın ve dosya içersindeki resimleri dikkat ile inceleyin tekrar anlayamadığınız bir durum olursa lütfen yazın

 

[Emre Zengin]

@Kerem Özdemir

evet cs3 kullanıyorum bu linkteki açılıyor teşekürler, kodları açıklayarak yazmanız uğraşmak isteyenler için yardım açısından çok yararlı , ama tabiki kodlar a.script bilmeyenler için zor bi yöntem, aynı efekler framelerle yapılabilir ama amaç swfnin boyutunu küçültmek değil mi

 

[Kerem Özdemir]

Aslında amaç swf boyutunu küçültmek değil dinamik yapı sağlamak. çünkü her timline animasyonunu tekrar değiştirmek uzunca ve sınırlı bir yöntem olacaktır. Ama actionscript kullanımı bize daha özgür animasyonlar ve kolay müdahale edilebilir imkan tanımaktadır, tabi bu imkanlar içerisinde boyut optimasyonuda dahil aslında daha da ileriye gidersek hem kodlarımızı Nesne Yönelimli Programlaya yani OOP ' a hemde flash kullanıcıları için geliştirilmiş harici API leri kullanmaya götürmek daha da sağlıklı olacaktır. TweenLite ve Tweener gibi API'leri kullanmak Flash Tween Class'ını kullanmaktan hem daha kolaydır hemde daha esnek bir kullanımı vardır. Hatta bir sonraki dersi bunlar arasındaki farkı ve uygulamaları göstermek olsun....

 

[Emre Zengin]

teşekürler bekliyorum konularını