Dinamik Çizgi ve Dolgu Oluşturma

Örnekleri daha iyi anlamak için önce genel bilgiler verilecektir. Bu nedenle dikkatle okumanızı öneririz.

Sahneye hiçbir çizim yapmadan sadece actionscript kodlarını kullanarak çizim ile ilgili şu işlemleri yapabilirsiniz:

1- Belirlediğiniz noktalar arasında çizgi oluşturabilirsiniz. Bu çizginin başlama noktasını istediğiniz koordinattan oluşturabilir ve verilerinizi grafiksel bir çizim olarak gösterebilirsiniz.

2- Çizgi stilini ayarlayabilirsiniz.

3- Daire, üçgen, dikdörtgen gibideğişik şekiller oluşturup içini istediğiniz renklerle doldurabilirsiniz.

4- Gradient dolgulu şekiller yaratabilirsiniz.

5- Eğimli çizgiler (parabol vs) oluşturabilirsiniz.

6- Sahnedeki oluşturduğunuz çizgi ve dolguları silebilirsiniz.

Dinamik çizim için kullanılan kodları şu şekilde özetlemek mümkündür:

1-createEmptyMovieClip() : Dinamik olarak çizim için gerekli boş bir film klibi oluşturur.

2- moveTo(xpozisyon,yPozisyon) :Çizimin başlatılacağı ilk noktanın x ve y koordinatlarını verir.Bu değer yazılmazsa çizim daima x=0 ve y=0 değerleri ile başlatılır.

3- lineStyle(kalınlık,renk,alfa) : Çizginin kalınlığı(0-255 arasında), 16 lık değerde rengi(örnek:0xFFCC00) ve alfa değerini(0-100) kısaca çizim stilini ayarlayabilirsiniz.

4- lineTo(sonrakiX, sonrakiY): Bu komutla çizimin başlangıç noktasından itibaren ilerleyeceği ikinci referans koordinatları tesbit edilir.Peşpeşe birden fazla lineTo komutu verebilirsiniz.Bu sayede herbirine uygun x ve y referans noktaları verilerek dikdörtgen vs gibi şekiller oluşturabilirsiniz.

5- curveTo (kontrolX,kontrolY,anchorX, anchorY):kontrol x ve y değerleri ile anchor x ve y değerleri arasında bir eğim oluşturur.Daire çizimi gibi eğimli çizimlerde kullanılan bir komuttur.

6- beginFill(renk,alfa) ve beginFill():Bu komutlar arasında bir çizimin içi istenilen renk ve alfa değerleri ile doldurulabilir.

7- beginGradientFill(fillType, colors, alphas, ratios, matrix): Gradient dolgu oluşturmak için kullanılır. Biraz zahmetli bir komuttur.
fiilType:Dolgu tipini gösterir.linear veya radial stringini yazmalısınız.
colors: Bu gradient renklerde kullanacağınız 2 veya daha fazla rengin onaltılık değeridir.
alphas:Kullanılan renklerin alfa değerleridir.Her renk için ayrı ayrı yazılır.
ratios:Renk dağılımını belirler.0-255 arasında bir değer verilir.
matrix:Bu komut uyguladığınız degradeyi kaydırmak, eğmek, bükmek ve çevirmek için kullanılan değerleri içermektedir.Bu komut içinde kullanılan alt gruplar şunlardır:
matrixType=Bu alana daima "box" yazmanız gereklidir. Flash bu tanumla ne tür bir matrix kullanacağını belirler.
x=Degradenin başladığı x konumudur.
y=Degradenin başladığı y konumudur.
w=Degradenin genişliğidir.
h=Degradenin yüksekliğidir:
r=Degradeyi döndürmek için verilen radyan cinsinden değerdir.Genel görünümü şöyle olur:

matrix = { matrixType:"box", x:100, y:100, w:200, h:200, r:(45/180)*Math.PI };

8- clear(): Bu komut dinamik olarak oluşturulan çizim ve dolguları kaldırır.Dinamik klibimizin adı klip1 ise klip1.clear(): komutunu verdiğimizde bu klipteki tüm çizim ve dolgular kaldırılır.
Uyarı: Bu komut sadece dinamik çizimlerde etkilidir.Kütüphaneden sahneye alınan veya doğrudan sahneye uygulanan çizim ve dolguları kaldırmaz.

ÖRNEKLER:

Basitten komplike örneklere doğru çalışmamızı oluşturacağız.

1-Bir üçgen çizelim:

Ana timeline`da 1.kareye şu komutları atayalım(başka hiçbir işleme gerek yoktur):

_root.createEmptyMovieClip( "ucgen", 1 );
with (_root.ucgen){
lineStyle( 5, 0xff00ff, 100 );
moveTo( 50, 50 );
lineTo( 100,100 );
lineTo( 0,100 );
lineTo( 50, 50 );
}

Filmi test ettiğinizde sahnede eflatun renkli bir üçgen oluşacaktır .

Açıklama: Önce ucgen örnek adlı boş bir film klibi oluşturup 1.levela atıyoruz.with komutu ile bu klibimizi hedefliyoruz ve çizim komutlarına başlıyoruz.LineStyle ile çizimimizin kalınlığını, rengini ve alfa değerini(buradaki değer tam solid değerdir) atıyoruz.Çizimin başlangıç noktası olarak x=50,y=50 koordinatlarını seçiyoruz. Bu değer ana sahnenin sol üst köşesi esas alınarak verilir.Bu noktadan itibaren önce 100 ve 100 noktasına bir çizim yapılarak üçgenin sağ kenarı, 0 ve 100 noktası işaretlenerek buraya uzanan üçgenin alt kenarı sonra buradan 50 ve 50 noktasına (yani ilk çizim noktasına) bir çizim yapılarak üçgenin sol kenarı tamamlanır.

2- Bir dolgu oluşturalım:

Ana timeline`da 1.kareye şu komutları atayalım:

_root.createEmptyMovieClip( "kare", 1 );
with ( _root.kare )
{
beginFill(0xFFCC00,80 );
moveTo(10,10);
lineTo(100,10);
lineTo(100,100);
lineTo(10,100);
lineTo(10,10);
endFill();

}

Komutları biliyorsunuz artık.Sadece beginFill komutu eklenerek hafif bir alfa uygulanmış rengimiz ile doldurduk.

3- Gradient dolgu oluşturalım:

Ana timeline`da 1.kareye şu komutları atayalım:

_root.createEmptyMovieClip( "gradient", 1 );
with ( _root.gradient )
{
colors = [ 0xFF0000, 0x0000FF];
alphas = [ 100, 100];
ratios = [ 0, 255];
rotasyon=(45/180)*Math.PI
matrix = { matrixType:"box", x:10, y:10, w:70, h:70, r:rotasyon };
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(10,10);
lineTo(10,100);
lineTo(100,100);
lineTo(100,10);
lineTo(10,10);
endFill();
}

Açıklama: Önce gradient adı ile boş bir film klibini level1`e yerleştirdik.2 renkli bir gradient düşüdüğümüzden 2 ayrı renk değeri kullandık. Yukarda anlattığımız gibi alfa,renk dağılımı, gradient özelliği için matrix değerlerini atadık.Gradient tipi olarak linear gradienti seçtik ve bir önceki örnekte olduğu gibi kare bir dolgu oluşturduk.

4- Dinamik olarak dönen bir çizgi yumağı oluşturalım:

Yandaki çalışmayı oluşturmak için alttaki kodları 1.kareye yapıştırıp hiçbir çizim yapmadan filmi test etmeniz yeterli olacaktır:

_root.createEmptyMovieClip("cizgi",1);
_root.cizgi._x=100;
_root.cizgi._y=100;
with(_root.cizgi)
{
lineStyle(1,0x006699);
for(i=0; i<360; i+=10) {
acı = i * (Math.PI/180);
moveTo(0,0);
lineTo(100*Math.cos(acı),100*Math.sin(acı));
}
}
_root.cizgi.onEnterFrame = function(){
this._rotation+=1;
};

Açıklama: Yine boş bir klip oluşturuyoruz.Dönme hareketinin sahneye sığması için cizgi klibinin x ve y değerlerini 100 olarak atıyoruz.Yine with komutu ile cizgi filmimizi hedefleyerek önce bir çizgi stili veriyoruz.Sonra 360 derecelik dönme işlemi için for döngüsü oluşturup i değişkeni 360 olacak şekilde şartlarımızı oluşturuyoruz, burada i değişken değeri 10 ar 10 ar arttığı için toplam 360:10= 36 tane çizgi çizilecektir.İlerde kullanmak için bir acı değişkeni oluşturuyoruz.Burada planlanan açı değeri kodlardan da anlaşılacağı üzere radyan üzerinden.Bu açı değeri Math.cos ve sin değerlerine verilerek for döngüsü ile oluşturulan diğer çizimlere atanıp çizimlerin farklı yönlerde oluşmasını sağlar.100 ile çarpma nedeni çizim boyutunu artırmak içindir.
Daha sonra oluşturulan bir enterframe fonksiyonu ile bu cizgi klibi döndürülür.

Bu yöntemleri kullanarak PAİNT programına benzer bir resim tahtası oluşturabilirsiniz.Buna ait bir örneğe ana sayfada bir sonraki linkten veya BURADAN ulaşabilirsiniz