Scale 9 Grid

Flash içerisinde tasarım ya da programlama sürecinde sahnede kullandığınız ya da kullanacağınız objelerin boyutlandırma sorunu mutlaka sizinde başınıza gelmiştir. Obje orijinal boyutunu geçtikçe bozulmaya devam eder. Bu özelliğin fazla kullanılmadığının farkındayım aslında. Ama bu özelliği AIR için sistem penceresi yapmada kullanılabileceği için tahminime göre yakında ihtiyaç duyacaksınız. Tabii bir ayrım yapılmaksızın direk olarak flash içerisinde de kullanabilirisiniz.

scale9Grid
scale9Grid seçilen bir objeyi 9 ayrı parçaya bölündüğünü farz ederek sadece ortadaki parçanın büyümesini olanak verir. Yani geriye kalan kısımlar objenin boyu büyüse bile değişmeyecektir. Bu özelliği sadece MovieClip ler destekliyor. Yani bu işlemi yapmanız için kullanmanız gereken obje kesinlikle MovieClip olmalıdır. İlk olarak size bu özelliği kullandığınızda alacağınız sonucu göstermek istiyorum;

Örnekte ilk olarak 150×100 boyutlarında kenarları yuvarlanmış olan bir dikdörtgen yaptım. Daha sonra aynı objenin kopyasına scale9grid uygulayarak bu objenin boyutunu 350×100 olarak ayarladım. İkinci kopyaya ise herhangi müdahalede bulunmadan objenin boyutunu 350×100 olarak ayarladım. Aşağıdaki resimde açıkça görülüğü gibi scale9grid özelliği uygulanmış örnekte herhangi bir bozulma yok, uygulanmamış olanda ise bozulma derecesi baya yüksek.
Peki bu özelliği nasıl kullanabiliriz?
Bu özelliği kullanmanın iki yolu var, birincisi objeye birebir olarak sahnede bu özelliği vermek ikincisi ise bu işlemi Actionscript kodları ile yapmak. İlk olarak bu işlemi sahnede yapalım.

İlk olarak sahnede 150×100 boyutlarında kenarı yuvarlatılmış olan bir dikdörtgen çizin.
Daha sonra bu objeyi seçerek F8 tuşuna basın. Eğer önünüze çıkan pencere aşağıdaki gibi değilse “Cancel” butonunun altındaki “Advanced” butonuna tıklayın.

 Daha sonra “Enable guides for 9-slice scaling” seçeneğini işaretleyip “Ok” tuşuna basın. Unutmayın bu özellik sadece MovieClip ler için geçerlidir. Şimdi oluşturduğunuz MovieClip e çift tıklayıp MovieClip in içerisine girin. Alacağınız görüntü aşağıdaki görüntüye benzer bir görüntü olacaktır.

Gördüğünüz gibi çizdiğiniz dikdörtgenin üzerinde kesik çizgili hat bulunmakta.Bu hatları ihtiyacınıza göre düzenleyebilirisniz. Aşağıdaki resimde ise kırmızı ile işaretlenmiş alanlar yani orta kısım objenin boyu değiştiğinde değişecek olan bölümdür, geri ye kalan kısımlarda obje boyu değişse bile herhangi bir değişme olmayacaktır.

Şimdi ise bunu Actionscript 3.0 içerisinde nasıl yapabiliriz ona bakalım.
scale9Grig i kod ile kullanmamızın mantığı objenin üzerinde bir dikdörtgen yaratarak o karenin kapsadığı alanın büyümesi. Bunu ise şu şekilde yapıyoruz;

İlk olarak sahnede 150×100 boyutlarında kenarları yuvarlanmış olan bir dikdörtgen yapın.
Daha sonra bunu MovieClip objesine dönüştürün ve referans noktasını sol köşe olarak belirleyin yani x=0, y=0 olsun.(Aşağıdaki resimde referans noktasının görüntüsü yer almakta)

Movie clibe instance Name  olarak “bg_mc” olarak ayarlayın. bg_mc movie clibine çift tıklayarak içine girin.
Sonra kod içerisinde oluşturacağımız dikdörtgenin parametreleri öğreniyoruz. Bu parametreler dikdörtgenin x, y, width ve height parametreleri. Aşağıdaki resimde bu parametreleri nasıl öğrendiğimiz yer almakta.

Genişliği 119, yüksekliği 68 olan bir dikdörtgeni x=16 y = 16 koordinatlarına yerleştiriyoruz. Tabii yerleştirmeden kastım görsel olarak değil sadece yerleştirildiğini farz edin. Kod ile oluşturulmuş olan dikdörtgen MovieClip in hangi noktaları referans alıp büyüyeceğini belirliyor. Diğer bir deyişle aşağıdaki resme bakarsanız eğer kırmızı alanlar büyüyebilecek diğer alanlar ise sabit kalacaktır. Kırmızıçizgiler tam olarak kod içerisinde yapılan kareyi temsil ediyorlar.

Şimdi ise kodumuzu oluşturalım.

Evet, hepsi bu kadar.
Kolay Gelsin
Engin!

Bu makale ile ilgili olabilecek yazılar