Photoshop Magazin
 


Statik Tasarımları Etkileşimli Hale Getirmek Artık Çok Kolay!

01 May 2010 | Sayı: May 2010
 
1 2 3 4 5
 


Flash Catalyst
Adobe’nin yepyeni programı olan Flash Ca- talyst harika özellikleri ile tasarımcıları cez- bediyor. Illustrator ortamında hazırlanan bir scroll alanının direk olarak Flash Catalyst ile açılarak interaktif hale getirilmesi son dere- ce kolay. Sadece scroll değil bir çok bileşeni artık özgürce Illustrator, Photoshop yada Fi- reworks ile tasarlayıp hiç kod yazmadan in- teraktif hale getirebilirsiniz. Grafik tasarımcılar uzun zamandan bu yana Flash programına uyum sağlayamadıkla- rı için interaktif uygulamalardan uzak dur- dular. Flash Catalyst tam da onlar için yapıl- dı. Artık Flash’tan korkmaya gerek yok. Hangi programda kendinizi daha rahat hissedi- yorsanız o program ile tasarımınızı yapın ve hazırladığınız tasarımı Flash Catalyst ile açıp hiç bir kod yazmadan sadece tıklamalarla in- teraktif hale getirin.


Flash Catalyst ve Flash Builder Entegrasyonu
Gerçek bir Flash projenin iş sürecinde oluşturulan interaktif tasarım sonrasında yazılımcılar tarafından gerekli kodlar eklenerek projenin bitmiş hali ortaya çıkartılır.
Bu süreçte yeni gelen Flash Catalyst ile oluşturulan interaktif tasarımlar yeni versiyonda Creative Suite ailesine dahil edilen Flash Builder (yani Flex) ile direk açılarak kodlanabilir durumdadır. Bu da projenin esnekliğini ve hızını çok büyük ölçüde etkilemektedir. 


Bileşen (Component) Oluşturmak
Flash Catalyst ile artık standart bileşenleri kullanmak zorunda değilsiniz!  Illustrator ile hazırladığımız tasarımı Flash Catalyst ile açtıktan sonra hazırladığımız scroll alanını çalışır hale getirmek sadece ve sadece tıklamalarla mümkün.

Hazırladığımız tasarımı Flash Catalyst ile açtıktan sonra ilk yapacağımız işlem sağ tarafta bulunan scroll tasarımını seçili hale getirmek. Burada scroll arkaplanını ve üstünde yer alan thumbnaili seçili hale getirin. Eğer sizin tasarımınızda üst ve alt oklar yer alıyorsa onlarıda seçmeniz gerekiyor. 


Tasarımda yer alan nesnelerden herhangi birini seçtikten sonra Flash Catalyst bize seçtiğimiz nesneyi ne olarak tanımlamak istediğimizi soran bir pencere çıkarmaktadır. 


Seçimi tamamladıktan sonra çıkan pencerede Convert Artwork to Component bölümünden seçtiğimiz nesneleri hangi bileşen olarak tanımlamak istediğimizi seçiyoruz. 


Flash Catalyst bize geniş bir bileşen listesi sunmaktadır. Burada oluşturmak istediğimiz bileşene uygun seçimi yaparak bir sonraki aşamaya geçebiliriz. bizim oluşturmak istediğimiz dikey bir scroll olduğu için Vertical Scrollbar seçimi yapıyoruz. 


Seçimi yaptıktan sonra dikey scroll olarak tanımlanan çizimimizi seçtikten sonra Edit Parts butonuna tıklayarak oluşturduğumuz bileşenin parçalarının görevlerini belirleyeceğiz.

Edit Parts butonuna tıkladıktan sonra Flash Catalyst bileşenin içerisine girerek buradan hangi parçanın ne görev yapacağını bize soracaktır.  Bileşen üzerindeki ilk parça olan ve yazının mevcut konumunu belirleyen thumbnaili seçerek Convert to Vertical Scrollbar Part bölümünden Thumb seçimi yapın.


Daha sonra arkaplanı temsil eden dikdörtgeni seçerek yine aynı bölümden Track seçimi yaparak görevlendirme işlemini sonlandırıyoruz.

 

Bu işlemlerden sonra son olarak scroll alanının tamamı için bir tanımlama yapıp scroll yapıldığı anda hangi metin alanının hareket ettirilmesi gerektiğini belirtmemiz gerekiyor.  Bunun için ilk olarak bileşenin içerisinden çıkarak tekrar çalışma alanına geri dönüyoruz.


Çalışma alanında önceki aşamalarda oluşturduğumuz scroll ile birlikte bu sefer metin alanını da seçili hale getiriyoruz ve Convert Artwork to Component bölümünden Scroll Panel seçerek seçtiğimiz nesneleri scroll alanı olarak tanılıyoruz.


Scroll Panel’i oluşturduktan sonra içeriğine giderek görevlendirmeleri yapmak üzere Edit Parts butonuna tıklayın.

Bileşenin içerisine girdikten sonra metin alanını seçili hale getirerek Convert to Scroll Panel Part bölümünden Scrolling Content seçimi yaparak işlemi tamamlayın.

Artık Illustrator ile hazırladığımız scroll alanı Flash Catalyst sayesinde tamamen dinamik bir şekilde çalışır hale geldi. 


Tüm bu aşamalarda hiç bir kod yazmadığımızı ve sadece tıklamalarla işlemi sonuçlandırdığımızı unutmayın! Flash Catalyst gerçekten de harika bir program...  Projeyi sonlandırdıktan sonra önizleme yapmak için CTRL + Enter kısayolunu yada File menüsünden Run Project komutunu kullanabilirsiniz.  Bizim bu yazıda yaptığımız sadece bileşenlerden bir tanesini oluşturmaktı. Siz dilerseniz farklı tasarımlarla farklı bileşenleri de aynı kolaylıkta hazırlayabilirsiniz...

Projeleri Yayınlamak
Flash Catalyst ile oluşturduğunuz projeleri 2 farklı şekilde yayınlayabilirsiniz. Bunlardan birisini online erişim için SWF, diğeri ise masaüstü uygulamalar için AIR...
Projeyi tamaladıktan sonra File menüsü altından Publish to SWF/AIR... seçimi yaparak projeyi yayınlayabilirsiniz.

 

Diğer Özellikler
Flash Catalyst ile tek yapabileceğiniz bu sayıda anlattığımız gibi bileşenler hazırlamak değildir. Flash Catalyst ile aynı zamanda sayfalar (slidelar) arasında geçişler oluşturabilir. Bu geçişleri dinamik hale getirebilir ve hatta data bağlantıları oluşturarak çok daha zengin bir içerik ortaya çıkarabilirsiniz. Üstelik tüm bunlar için tek satır kod yazmanıza gerek yok!  Diğer özelliklerden de bahsetmek için önümüzdeki sayılarda görüşmek üzere...

 

May 2010

 


Flash Catalyst