Boyama Tahtası Oluşturma

Tamamen dinamik çizim kodları ile oluşturduğumuz çizim tahtası üzerinde farenin sol tuşuna basılı tutarak çizim yapabilirsiniz. İlk yüklendiğinde çizgi kalınlığı 0 rengi ise kırmızıdır.
Sağ ve sol taraftaki butonları kullanarak çizim özelliklerini değiştirebilirsiniz. Bu çizim özelliklerini birçok eklenti yapmak mümkündür.Fakat anlaşılır olması için sadece renk ve kalınlık özelliği ayarlanmıştır.

Bu çalışmayı incelemeden evvel bir önceki linkte anlatılan "dinamik çizim tekniklerini" mutlaka dikkatle okumalısınız. Bu bölümde çizim kodlarına ait detaylar anlatılmayacaktır.

Şimdi tahtamıza fare ile çizim yapalım:

DOSYAYI İNDİR

AÇIKLAMA:

1- İlk layer`a dikdörtgen aracı ile ortası beyaz bir dikdörtgen çizelim. Bu çizimin tamamını seçip F8`e basalım ve film klibi seçeneğini kullanalım.Bu film klibinin örnek adını(instance name) sayfa olarak yazalım.

2- CTRL+F8`e basalım ve yeni bir film klibi oluşturalım.Bu klip boş bir kontrol klibi olacak ve boyama kodlarını içerecektir.Ana sahneye dönelim ve az evvel oluşturduğumuz kontrol klibini kütüphaneden sahneye alalım.Örnek adı olarak kontrol yazalım.

Şu anda sahnede 2 ayrı klip mevcuttur.Birincisi tahta olarak kullanacağımız sayfa örnek adlı klip, diğeri ise kontrol klibidir.

3- Bir buton oluşturalım ve üzerine sil yazalım. Bu butonu sahnedeki çizimleri temizlemek için kullanacağız. Sahnede uygun bir yere yerleştirelim.

4- Yeni eklediğimiz katmanlarda boya renkleri için istediğiniz kadar buton oluşturup sahnenin sağına, çizim kalınlığı için oluşturacağınız butonları sahnenin soluna alın.

5- Artık ana görüntü hazırdır. İsterseniz tahtayı süslemek için ek katmanlar kullanabilirsiniz. Ortada çizim tahtamız sağda renk paletlerimiz ve sahneyi temizleme tuşumuz solda çizgi kalınlığı için araçlarımız hazırdır. Kodlara geçebiliriz.

6-Kontrol klibimizi seçelim ve şu komutları atayalım:

onClipEvent (load) {
_root.createEmptyMovieClip("cizim",100);
renk=0xFF0000;
cizgi_eni=0;
function cizdir() {
_root.cizim.lineStyle(cizgi_eni,renk,100);
x=_root._xmouse;
y=_root._ymouse;
_root.cizim.lineTo(x,y);
}
}

Kontrol klibimiz yüklendiğinde cizim örnek adlı bir boş film klibi oluşturuyoruz. Ve tüm örneklerin üstünde olmasını garantilemek için level100`e yerleştiriyoruz.Renk ve cizgi_eni adında 2 değişkenimiz oluşuyor ve bunlar sayesinde ilk çizim kalınlığı sıfır renk ise kırmızı olarak ayarlanmaktadır. Daha sonra bu değişkenleri renk ve çizim butonları ile değiştirmek ve böylece farklı çizim stiline sahip olmamız mümkün olacaktır.

Hemen altına çizim fonksiyonumuzu oluşturalım.LineStyle kısmına çizgi kalınlığı için bir değer değilde az önce oluşturduğumuz cizgi_eni , renk kısmına da renk değişkenimizin adı yazalım.Bu sayede daha sonra butonlar aracılığı ile bunlara ait değerleri değiştirecek ve istediğimiz stilde çizim yapabileceğiz.
x ve y değişkenlerine farenin x ve y koordinatlarını atayalım.LineTo komutunda x ve y değerlerine farenin koordinatlarını verelim.

Çizim fonksiyonumuz hazır. Kodlarımız tamamlanınca cizdir fonksiyonunu çağırarak yukarıda özelliklerini belirlediğimiz çizimi oluşturabileceğiz.

7- Üstteki kodların hemen altına şu kodları ekleyelim:

onClipEvent (mouseDown) {
if (_root.sayfa.hitTest(_root._xMouse,_root._yMouse)) {
x=_root._xMouse;
y=_root._yMouse;
_root.cizim.moveTo(x,y);
down=true;
}
}

Farenin sol tuşuna bastığımızda şayet sayfa örnek adlı klibimiz üzerinde isek(bunu hitTest komutu ile denetliyoruz) moveTo komutu ile çizim başlayacağı x ve y değerleri farenin x ve y koordinatlarına atanıyor.down değişkeni true olarak ayarlanıyor.Bu değişkenin ne işe yarayacağını daha sonra anlatacağız.Şu ana kadar hazırladığımız kodlar ile çizim stili ayarlandı ve çizilecek koordinatlar faenin x ve y değerlerine atandı,fare ile çizim sayfasının çakışasının flash tarafından algılanması sağlandı.

8- Alta şu komutları ekleyelim:

onClipEvent (mouseMove) {
updateAfterEvent();
if (down==true && _root.sayfa.hitTest(_root._xMouse,_root._yMouse)) {
cizdir();
}
}

Farenin her hareketi şayet az evvel oluşturduğumuz down komutu true ise (yani farenin sol tuşuna basılmışsa) ve imleç ile sayfa klibi çakışırsa cizdir fonksiyonunu başlatacaktır.Bu fonksiyondaki komutlar devreye girerek çizimi başlatacaktır. updateAfterEvent komutu farenin her hareketi ile sahnenin tazelenmesini ve birbirinden kopuk olmayan akıcı bir çizimi sağlayacaktır.

9- Son olarak şu komutları verelim:

onClipEvent (mouseUp) {
down=false;
}

Farenin sol tuşuna basmayı bıraktığımızda down değişkeni false olacak ve 8 numarada bahsettiğimiz komutlar devre dışı kaldığından cizdir fonksiyonu çalışmayacak ve çizim kesilecektir.bu komutu eklemese idik fare tuşunu bıraksak dahi imleçin dolaştığı yerlerde çizim devam edecekti. Deneme amaçlı bu son komutu kaldırın ve çizime başlayın, fare sol tuşunu bırakmanıza rağmen çzim devam edecektir.

10- Herşey tamam . Şimdi çizim rengi ve kalınlığını değiştirmek için butonlara şu komutları verelim:

on (press) {
_root.kontrol.renk=0xFF0038;
}

Sağdaki kırmızı butona bastığımızda renk değişkeni yukarda atadığımız renk kodunu alacak ve o renkte çizmeye baş layacaktır. Diğer butonlara da aynı kodları istediğiniz renklerle atayınız.

Soldaki butonlardan ilkini seçelim ve şu komutu atayalım:

on (press) {
_root.kontrol.cizgi_eni=1;
}

Butona basıldığında cizgi_eni değişkenimiz verilen değeri olacak ve çizgi kalınlığı değişecektir.Diğer butonlara da aynı komutları verelim.

11- Sil butonumuzu seçelim ve şu komutları verelim:

on (press) {
_root.cizim.clear();
}

Butona bastığımızda dinamik olarak hazırladığımız cizim klibinde oluşturduğumuz tüm elemanlar ortadan kalkacak ve çizim sahnemiz temizlenecektir.