Selamun Aleyküm, merhaba, bu dersimde flash action script 3.0 ile yapboz yapımını anlatacağım.

Ä°lk olarak resim düzenleme programlarında herhangi bir resmi istediÄŸiniz parçaya bölünüz. Ben aÅŸağıdaki resmi 2 parçaya böldüm. Anlatımı basit olsun diye 2 parça resimle yapacağım.

Fireworks programını kullanarak kestiÄŸim resimleri tek tek kopyala yapıştır ile flash programının sahne içine yapıştırdım.  Bu resimlerin örnek adına 1.parçaya r1, 2.parçanın örnek adına r2 yazdım. Bu isimlerle bu resimleri kullanacağız.

Sahneye yeni bir katman ekleyelim ve bu katmanı Katman 1'in altına taşıyalım. 2.katmana 1.katmandaki r1 ve r2 yi kopyalayalım. Bu kopyaladığımız resimlerin örnek adını da g1 ve g2 yapalım. Görüntü olarak kullanacağız. Yani yapbozun altında kılavuz resmi olarak kullanacağız. Katman 2'deki g1 örnek adlı birinci resmi seçelim ve özellikler penceresinden Renk Efekti bölümünden stil açılır menüsünden parlaklığı seçelim ve parlaklığı arttıralım resmimiz soluk görünecek, bu iÅŸlemi g2 içinde yapalım. g1 ve g2 yi sahnede istediÄŸimiz yere yerleÅŸtirelim.    Kaynak: www.mustafakarsli.com

Katman 1'de iken bir adet Metin Aracı ile dinamik metin oluÅŸturalım ve örnek adını mesaj yapalım. Mesaj yazdırmak için kullanacağız.

Zaman çizelgesinde 1. kareye tıklayarak Eylemler penceresini açalım aÅŸağıdaki kodları yazalım.

1    import flash.events.MouseEvent;

2    function surukle(Event:MouseEvent):void
3    {
4      r1.startDrag();
5    }

6    function birak(Event:MouseEvent):void
7    {
8      r1.stopDrag();

9      if(r1.x>=g1.x && r1.x<=(g1.x+10) && r1.y>=g1.y && r1.y<=(g1.y+10))
10     {
11       mesaj.text="1.resim doÄŸru yerde";
12       r1.x=g1.x;
13       r1.y=g1.y;
14     }
15     else
16     {
17       mesaj.text="1.resim yanlış yerde";
18     }
19   }

20   r1.addEventListener(MouseEvent.MOUSE_DOWN,surukle);
21   r1.addEventListener(MouseEvent.MOUSE_UP,birak);

//yukarıdaki iÅŸlemleri 2.parçaya da uyguluyoruz... Sadece 1'leri 2 yapıyoruz ve foksiyon isimlerine de 2 ekliyoruz.   Kaynak: www.mustafakarsli.com

22   function surukle2(Event:MouseEvent):void
23   {
24     r2.startDrag();
25   }

26   function birak2(Event:MouseEvent):void
27   {
28     r2.stopDrag();

29     if(r2.x>=g2.x && r2.x<=(g2.x+10) && r2.y>=g2.y && r2.y<=(g2.y+10))
30     {
31       mesaj.text="2.resim doÄŸru yerde";
32       r2.x=g2.x;
33       r2.y=g2.y;
34     }
35     else
36     {
37       mesaj.text="2.resim yanlış yerde";
38     }
39   }

40   r2.addEventListener(MouseEvent.MOUSE_DOWN,surukle2);
41   r2.addEventListener(MouseEvent.MOUSE_UP,birak2);

Yukarıdaki kodu açıklayacak olursak;     Kaynak: www.mustafakarsli.com

1.satırda, Fare olaylarını kütüphaneden içeri aktarıyoruz.

  4.satırda, r1' in sürüklenmesini baÅŸlatıyoruz.

  6...19.satırlarda, birak fonksiyonunu oluÅŸturuyoruz.

  8.satırda, r1'in sürüklenmesini bitiriyoruz.

  9...14.satırlarda, if yapısı ile r1'in x ve y koordinatlarını karşılaÅŸtırıyoruz. g1'in x ve y koordinatını baz alarak 10x10 luk bir alanda karşılaÅŸtırma yapıyoruz. Yani r1'in x koordinatı g1'in x koordinatına eÅŸit veya 10 piksel uzaklıktaysa yani koordinata yakınsa ve y koordinatı da g1'in y koordinatına eÅŸit veya 10 piksel uzaklıktaysa diye karşılaÅŸtırma yapıyoruz.

11.satırda, yukarıdaki if ÅŸartı saÄŸlanıyorsa yani r1, g1'in koordinatına yakınsa mesaj nesnesinde 1.resim doÄŸru yerde  yazdırılıyor.

12.satırda, r1'in x koordinatı, g1'in x koordinatına eşitleniyor.

13.satırda, r1'in y koordinatı, g1'in y koordinatına eÅŸitleniyor, böylece r1, g1'in üzerine oturtuluyor.

15...18.satırlarda, yukarıdaki if yapısı sağlanmıyorsa else yapısı devreye giriyor.

17.satırda, if deÄŸilse yani r1, g1'e yakın yerde deÄŸilse  1.resim yanlış yerde mesajı veriliyor.

20.satırda, r1'e fare olayı ekleniyor. Farenin tuÅŸuna basılınca surukle fonksiyonu çalıştırılıyor.

21.satırda, r1'e fare olayı ekleniyor. Farenin basılan tuÅŸu bırakılınca birak fonksiyonu çalıştırılıyor. 

Buraya kadar sadece parça 1 (r1) içindi aynı adımlar (22...41.satırlar) parça 2 (r2) için de yapılıyor.

Tüm bu kodları yazdıktan sonra Ctrl+Enter ile uygulamayı çalıştırabilirsiniz. AÅŸağıdan da uygulamayı deneyebilirsiniz.

DERSÄ°N KAYDI :

Dersin görsel destekleme videosunu aÅŸağıdan izleyebilirsiniz..

Bu mantıkla herhangi bir resim alınıp parça sayısı arttırılarak yapbozlar yapılabilir... Yeni derslerde görüÅŸmek üzere saÄŸlıcakla kalınız...

Mustafa KARSLI    Kaynak: www.mustafakarsli.com