Blend Ders-4 - Blend ile Animasyonlu Buton

blendbutonbaslik

Blend ile ilgili serinin devamı niteliğindeki bu yazıda tasarımımıza uygun animasyonlu buton yapmaya calışacağız. Butonun, mouse işareti üzerine geldiğinde açılırken, üzerinden gittiğinde kapalı duruma gelmesini istiyoruz.

İlk önce ekrana bir Rectangle çizip buna buton özelliği veriyoruz. Rectangle ‘a buton özelliği vermek için; seçili haldeyken,

Tools > Make Into Control... adımlarını takip ediyoruz.

blendbuton1


Artık butonumuz oluşmuş durumda. Bu şekilde butonumuzun içerinde de çeşitli çizim ve resimler ekleyebiliriz. Ben butonumuzun ilk hali için projeye küçük bir resim dosyası dahil etmek istiyorum. Bunun için Projects bölümünden projemize sağ tıklayıp Exist New Item ‘e tıkladıktan sonra ilgili resmimizi seçip diyoruz.

blendbuton2


Projemize dahil ettiğimizi resmimizi butonun üzerine gelecek şekilde sürükleyip bırakıyoruz.

blendbuton3


Butonumuz ilk haldeyken sadece üçgen resminin gözükmesini istiyoruz bunun için Button yazısının Opacity miktarını sıfırlıyoruz. Bu işlemi gerçekleştirmek için Content Prensenter seçili haldeyken;

blendbuton4


Mouse imleci butonun üzerinde geldiğinde açılma animasyonun gerçekleşmesi için bir Trigger eklememiz gerekmektedir.

blendbuton5


İmleç üzerinde olmadığında kapalı kalması içinde;

blendbuton6


Bu şekilde animasyonlu buton stilimizi oluşturmuş olduk. Eğer istersek bu stilimizi birden fazla buton üzerinde de uygulayabiliriz. Bunun için;

blendbuton7


Bu şekilde projemizdeki bütün butonların aynı stilde olmasını sağlayabiliriz. Çalışmamızın son hali aşağıdaki gibidir;

blendbuton8


You might also enjou