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.

 2,3,4,5.satırlarda, surukle fonsiyonu oluştruyoruz.

  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