Flash’la Kayan Resim Çalışması

Bu uygulamayı web sayfaları tasarlayan bir arkadışımın isteği üzerine hazırlamıştım.
Uygulamayı örneği
Fareyi sağ tıklayıp farklı animasyonları test edebilirsiniz…

Bu uygulamada Flash dosyası XML’den aldığı bilgilere göre resimleri göstermekte ve tıklandığı zaman belirtilen link açılmaktadır.  Ayrıca animasyon tipini kullanıcı dışarıdan değiştirebilir. Animasyon tipini flash üzerine sağ tıklayıp açılan menüden yapabilirsiniz. Her resimin kendine ait bir açıklaması ve bir linki mevcuttur. Resim sayısı değiştirilebilir, minumum 5 olmakla birlikte maksimum sayısı sizin host’unuzun kapasitesine kalmış 🙂 Ancak animasyonun çalışması sırasında görüntü bozukluğu olmaması için tüm resimler yüklenmeden animasyonu başlatmıyorum. Malum Türkiye şartları internet her zaman hızlı değil.

Ayarları kaydetdiğimiz XML dosyası

<?xml version=”1.0″ encoding=”UTF-8″?>
<galeri>
<ayarlar>
<veri    animasyon=”3″ zaman=”1″></veri>
</ayarlar>
<resimler>
<veri resim=”resim (1).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması1″></veri>
<veri resim=”resim (2).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması2″></veri>
<veri resim=”resim (3).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması3″></veri>
<veri resim=”resim (4).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması4″></veri>
<veri resim=”resim (5).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması5″></veri>
<veri resim=”resim (6).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması6″></veri>
<veri resim=”resim (7).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması7″></veri>
<veri resim=”resim (8).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması8″></veri>
<veri resim=”resim (9).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması9″></veri>
<veri resim=”resim (10).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması10″></veri>
<veri resim=”resim (11).JPG” link=”http://www.dahiweb.com” aciklama=”resim açıklaması11″></veri>

</resimler>
</galeri>

Flash CS4 uygulamasının kaynak kodları:

import fl.transitions.Tween;
import fl.transitions.easing.*;
import flash.display.*;
import fl.containers.UILoader;
import flash.net.navigateToURL;
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.utils.Timer;
import fl.containers.UILoader;
import flash.ui.ContextMenu;

var bizim_menu:ContextMenu = new ContextMenu();
var bir:ContextMenuItem=new ContextMenuItem(“Animasyon Şeklini Değiştir.”);

var isim:Array=new Array();
var resim:Array=new Array();
var link:Array=new Array();
var aktif_link:Array=new Array();
var aciklama:Array=new Array();
var aktif_aciklama:Array=new Array();
var konum1:Array=new Array(1,170,339,508,677,846);
var konum2:Array=new Array(-168,1,170,339,508,677);

var xml:XML;
var xml_listesi:XMLList;
var xml_listesi2:XMLList;
var xml_yukleyici:URLLoader=new URLLoader();
var colorT:ColorTransform=new ColorTransform  ;
var hareket:Tween;
var j:int=0;
var sayac:int;
var tur_zamani:Number;
var gecikme_turu:int;
var tween_bicimi:int;
var tween_suresi:Number;
var zaman:Number;
var aktif:int=0;
var k:int=0;
var l:int=0;
var p:int=5;

xml_yukleyici.addEventListener(Event.COMPLETE,yukle);
xml_yukleyici.load(new URLRequest(“galeri.xml”));
function yukle(event:Event):void
{
xml=XML(event.target.data);
xml_listesi2=xml.ayarlar.children();
zaman=int(xml_listesi2[0].attribute(“zaman”));
tween_bicimi=int(xml_listesi2[0].attribute(“animasyon”));

if (tween_bicimi==0){tween_suresi=1.5;}
else if (tween_bicimi==1){tween_suresi=3;}
else if (tween_bicimi==2){tween_suresi=2;}
else if (tween_bicimi==3){tween_suresi=1;}
else if (tween_bicimi==4){tween_suresi=2;}
else
{
tween_bicimi=3;
tween_suresi=1;
}

if (zaman==0){tur_zamani=800;gecikme_turu=7;}
else if (zaman==1){tur_zamani=400;gecikme_turu=13;}
else if (zaman==2){tur_zamani=200;gecikme_turu=25;}
else if (zaman==3){tur_zamani=100;gecikme_turu=50;}
else if (zaman==4){tur_zamani=50;gecikme_turu=100;}
else{tur_zamani=200;gecikme_turu=25;}

time=new Timer(tur_zamani);
time.addEventListener(TimerEvent.TIMER, tur_zamanlari);

xml_listesi=xml.resimler.children();
for (sayac=0; sayac<xml_listesi.length(); sayac++)
{
isim.push(xml_listesi[sayac].attribute(“isim”));
link.push(xml_listesi[sayac].attribute(“link”));
resim.push(xml_listesi[sayac].attribute(“resim”));
aciklama.push(xml_listesi[sayac].attribute(“aciklama”));
}

hareket1_mc.yukleyici.source=resim[0];aktif_link[0]=link[0];aktif_aciklama[0]=aciklama[0];
hareket2_mc.yukleyici.source=resim[1];aktif_link[1]=link[1];aktif_aciklama[1]=aciklama[1];
hareket3_mc.yukleyici.source=resim[2];aktif_link[2]=link[2];aktif_aciklama[2]=aciklama[2];
hareket4_mc.yukleyici.source=resim[3];aktif_link[3]=link[3];aktif_aciklama[3]=aciklama[3];
hareket5_mc.yukleyici.source=resim[4];aktif_link[4]=link[4];aktif_aciklama[4]=aciklama[4];
hareket6_mc.yukleyici.source=resim[5];aktif_link[5]=link[5];aktif_aciklama[5]=aciklama[5];

var f:int=0;
var aLoader:UILoader = new UILoader();
aLoader.source=resim[f];
aLoader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event)
{
//trace(resim[f]+”  yüklendi”);
f=f+1;
if (f<sayac){aLoader.source=resim[f];}
else if (f==sayac)
{
aktif=1;
time.start();
f=0;
}
}
}

var time:Timer;

function tur_zamanlari(event:Event):void
{
if (aktif==1)
{
j=j%gecikme_turu;
if (j<6)
{
tum_hareket(sayac,j);
}
else if (j==(gecikme_turu-1))
{
k=k+1;
k=k%6;
}
j=j+1;

time2.stop();
yazi_txt.visible=false;
}
}

function tum_hareket(a:int,b:int):void
{
l=(b+k)%6+1;
switch (b)
{
case 0 :hareketler(b,l,tween_bicimi);break;
case 1 :hareketler(b,l,tween_bicimi);break;
case 2 :hareketler(b,l,tween_bicimi);break;
case 3 :hareketler(b,l,tween_bicimi);break;
case 4 :hareketler(b,l,tween_bicimi);break;
case 5 :hareketler(b,l,tween_bicimi);break;
}
if (b==2)
{
p=p%sayac;
switch (l)
{
case 4 :
hareket1_mc.yukleyici.source=resim[p];
aktif_link[0]=link[p];
aktif_aciklama[0]=aciklama[p];
break;
case 5 :
hareket2_mc.yukleyici.source=resim[p];
aktif_link[1]=link[p];
aktif_aciklama[1]=aciklama[p];
break;
case 6 :
hareket3_mc.yukleyici.source=resim[p];
aktif_link[2]=link[p];
aktif_aciklama[2]=aciklama[p];
break;
case 1 :
hareket4_mc.yukleyici.source=resim[p];
aktif_link[3]=link[p];
aktif_aciklama[3]=aciklama[p];
break;
case 2 :
hareket5_mc.yukleyici.source=resim[p];
aktif_link[4]=link[p];
aktif_aciklama[4]=aciklama[p];
break;
case 3 :
hareket6_mc.yukleyici.source=resim[p];
aktif_link[5]=link[p];
aktif_aciklama[5]=aciklama[p];
break;
}
p++;
}
}

function hareketler(tur:int,eleman:int,bicim:int):void
{
if (bicim==0)
{
hareket=new Tween(getChildByName(“hareket”+eleman+”_mc”),”x”,Bounce.easeOut,konum1[tur],konum2[tur],tween_suresi,true);
}
else if (bicim==1)
{
hareket=new Tween(getChildByName(“hareket”+eleman+”_mc”),”x”,Elastic.easeOut,konum1[tur],konum2[tur],tween_suresi,true);
}
else if (bicim==2)
{
hareket=new Tween(getChildByName(“hareket”+eleman+”_mc”),”x”,Back.easeOut,konum1[tur],konum2[tur],tween_suresi,true);
}
else if (bicim==3)
{
hareket=new Tween(getChildByName(“hareket”+eleman+”_mc”),”x”,Regular.easeOut,konum1[tur],konum2[tur],tween_suresi,true);
}
else if (bicim==4)
{
hareket=new Tween(getChildByName(“hareket”+eleman+”_mc”),”x”,None.easeOut,konum1[tur],konum2[tur],tween_suresi,true);
}
}

hareket1_mc.buttonMode=true;
hareket2_mc.buttonMode=true;
hareket3_mc.buttonMode=true;
hareket4_mc.buttonMode=true;
hareket5_mc.buttonMode=true;
hareket6_mc.buttonMode=true;

hareket1_mc.addEventListener(MouseEvent.MOUSE_OVER,uzerinde1);
hareket1_mc.addEventListener(MouseEvent.MOUSE_OUT,uzerinde_degil1);
hareket1_mc.addEventListener(MouseEvent.CLICK,uzerinde_tıklandı1);

hareket2_mc.addEventListener(MouseEvent.MOUSE_OVER,uzerinde2);
hareket2_mc.addEventListener(MouseEvent.MOUSE_OUT,uzerinde_degil2);
hareket2_mc.addEventListener(MouseEvent.CLICK,uzerinde_tıklandı2);

hareket3_mc.addEventListener(MouseEvent.MOUSE_OVER,uzerinde3);
hareket3_mc.addEventListener(MouseEvent.MOUSE_OUT,uzerinde_degil3);
hareket3_mc.addEventListener(MouseEvent.CLICK,uzerinde_tıklandı3);

hareket4_mc.addEventListener(MouseEvent.MOUSE_OVER,uzerinde4);
hareket4_mc.addEventListener(MouseEvent.MOUSE_OUT,uzerinde_degil4);
hareket4_mc.addEventListener(MouseEvent.CLICK,uzerinde_tıklandı4);

hareket5_mc.addEventListener(MouseEvent.MOUSE_OVER,uzerinde5);
hareket5_mc.addEventListener(MouseEvent.MOUSE_OUT,uzerinde_degil5);
hareket5_mc.addEventListener(MouseEvent.CLICK,uzerinde_tıklandı5);

hareket6_mc.addEventListener(MouseEvent.MOUSE_OVER,uzerinde6);
hareket6_mc.addEventListener(MouseEvent.MOUSE_OUT,uzerinde_degil6);
hareket6_mc.addEventListener(MouseEvent.CLICK,uzerinde_tıklandı6);

function uzerinde1(event:Event):void
{
time.stop();
time2.start();
time2_sayi=1;
}
function uzerinde_degil1(event:Event):void
{
time.start();
time2.stop();
yazi_txt.visible=false;
time2_sayi=0;
}
function uzerinde_tıklandı1(event:Event):void
{
var request:URLRequest = new URLRequest();
request.url=aktif_link[0];
navigateToURL(request,”_blank”);
}

function uzerinde2(event:Event):void
{
time.stop();
time2.start();
time2_sayi=2;
}
function uzerinde_degil2(event:Event):void
{
time.start();
time2.stop();
yazi_txt.visible=false;
time2_sayi=0;
}
function uzerinde_tıklandı2(event:Event):void
{
var request:URLRequest = new URLRequest();
request.url=aktif_link[1];
navigateToURL(request,”_blank”);
}

function uzerinde3(event:Event):void
{
time.stop();
time2.start();
time2_sayi=3;
}
function uzerinde_degil3(event:Event):void
{
time.start();
time2.stop();
yazi_txt.visible=false;
time2_sayi=0;
}
function uzerinde_tıklandı3(event:Event):void
{
var request:URLRequest = new URLRequest();
request.url=aktif_link[2];
navigateToURL(request,”_blank”);
}

function uzerinde4(event:Event):void
{
time.stop();
time2.start();
time2_sayi=4;
}
function uzerinde_degil4(event:Event):void
{
time.start();
time2.stop();
yazi_txt.visible=false;
time2_sayi=0;
}
function uzerinde_tıklandı4(event:Event):void
{
var request:URLRequest = new URLRequest();
request.url=aktif_link[3];
navigateToURL(request,”_blank”);
}

function uzerinde5(event:Event):void
{
time.stop();
time2.start();
time2_sayi=5;
}
function uzerinde_degil5(event:Event):void
{
time.start();
time2.stop();
yazi_txt.visible=false;
time2_sayi=0;
}
function uzerinde_tıklandı5(event:Event):void
{
var request:URLRequest = new URLRequest();
request.url=aktif_link[4];
navigateToURL(request,”_blank”);
}

function uzerinde6(event:Event):void
{
time.stop();
time2.start();
time2_sayi=6;
}
function uzerinde_degil6(event:Event):void
{
time.start();
time2.stop();
yazi_txt.visible=false;
time2_sayi=0;
}
function uzerinde_tıklandı6(event:Event):void
{
var request:URLRequest = new URLRequest();
request.url=aktif_link[5];
navigateToURL(request,”_blank”);
}

var time2_sayi:int=0;
var time2:Timer=new Timer(500,0);
time2.addEventListener(TimerEvent.TIMER, bekle);
function bekle(event:Event):void
{
var q:int=time2_sayi;
//trace(q+”  “+l);
if (stage.mouseX>675)
{
yazi_txt.visible=true;
yazi_txt.text=aktif_aciklama[time2_sayi-1];
yazi_txt.x=stage.mouseX-140;
yazi_txt.y=stage.mouseY+10;
}
else if (time2_sayi!=0)
{
yazi_txt.visible=true;
yazi_txt.text=aktif_aciklama[time2_sayi-1];
yazi_txt.x=stage.mouseX+10;
yazi_txt.y=stage.mouseY+10;
}
time2.stop();
}

bir.addEventListener( ContextMenuEvent.MENU_ITEM_SELECT, fonksiyon1);
bizim_menu.hideBuiltInItems();
bizim_menu.customItems.push(bir);
this.contextMenu=bizim_menu;
function fonksiyon1(e:Event)
{
tween_bicimi=tween_bicimi+1;
tween_bicimi=tween_bicimi%5;
}

Flash Uygulamasının kaynak kodlarını indirmek için tıklayınız.

Emre TAKIL “Bilişim Teknolojileri Öğretmeni”

Yazar: emretakil

Emre TAKIL sitemizde 2 yazı eklemiş...

Share
  • Hocam emeğinize sağlık güzel bir paylaşım olmuş teşekkür ederim.

  • hocam bunu nasıl yaptığınızı video halinde gösteremezmisinz en azından öğrenmiş oluruz nasıl yapıldığını şimdideen tşkrler

    • Gün 28 saate çıkınca video çekip yayınlayabilmem mümkün olabilir..
      ama şimdilik imkansıza yakın…
      anlayışınız için teşekkürler…

  • Merhabalar,
    Bu uygulamayı siteye ekleme konusunda sıkıntı yaşıyorum daha detaylı anlatım kullanabilirmiyiz

  • gökhan

    ben bu konuda yeniyim de
    bu kodları nere ye yapıştırcaz biraz daha açıklayıcı anlatım yaparmısınız teşekkurler

  • çalışmalarınızın devamı dileği ile

  • shu

    paylaşım için çok teşekkürler ellerinize emeğinize sağlık 🙂

  • Baris

    Hocam Saygılar …
    Action Script 2.0 İle Kodlanmış Sitemiz Var Bu Galeriyi Kullanmak İstiyoruz Fakat SWF Çağıramıyoruz Action Script 3.0 İle Kodlanmış Olduğundan Bu İşlem İşe Yaramıyor Aynısının Action Script 2.0 Olanı Varmı Yada Dönüştürme Gibi Bir İmkan Varmı
    Teşekkürler.

  • burcu

    Paylaşım için teşekkürler çok işime yaradı.Emeğine sağlık.

  • evet aşşağıya doğru nasıl yapılır?

  • Fatih Aydın

    @Burcu

    bu animasyondaki resimler yerine kendi resimlerinizi koymak istiyorsunuz değilmi ?

  • Burcu

    ya bende bısey sorucam ben bu ıste cok yenıyım ve cok benengdım bunu galerıdekı resımler yerıne baska resım koymayı nasıl yapabılırız

  • yavuz

    flash ın sola değilde aşşagı yada yukarı akmasını istiyorsak nasıl bir değişiklik yapmalıyız

  • Emeğinize sağlık teşekkür ederim.Çok güzel bir çalışma olmuş

  • savas

    Güzel bir paylaşım.Bu konuda benim bir prolemim var.Proplem su:bir swf dosyam var.Bu dosya mhroc.txt ile link isimlerini swf de gösteriyordu ve bu linklere tıklanınca sayfa açılıyordu.Ben bu txt dosyasının link içeriğini kaybettim.bu txt dosyasına nasıl bir kod yazmalıyım.Cevaplarsanız sevinirim.

  • Emre TAKIL

    Bildiğim kadarıyla, Flash swf’si kendi başına server içinde xml dosyası oluşturamıyor. Bizim yapmamız gereken Linux server kullanıyorsak php ile yada Windows server kullanıyorsak .net ile utf-8 formatında xml dosyası oluşturmaktır. Bunlarla uğraşmak istemiyorsak notepad aracılığıyla xml yazıp flash swf’si ile aynı konuma atarız. Flash’ada hangi xml’i okuyacağını söylersek çalışacaktır.
    Dikkat edilmesi gereken Türkçe karakterlerin okunması için xml dosyasının UTF-8 formatında olması gerektiğidir.

  • Hocam güzel birşey paylaşmışsınız. Fakat sormak istediğim birşey var.

    xml dosyasına resim klasörünü okutmamız mümkünmüdür ?

    yani resimleri xml dosyasıne elle değil kendi yazsa ?

  • Emre hocamın sayesinde Action script 3 konusunda eksiklerimizi gidereceğiz…
    iyi ki varsın Emre hocam…
    bol bol yazılarını bekliyoruz…