1. DÜĞMELER

�Rollover� fare imleci üzerine getirildiğinde veya tıklandığında görünümü değişen bir resimdir. Düğmelerin dört genel durumu vardır. Her durum kullanıcının düğme ile olan etkileşimini yansıtır.

Bu etkileşimler:

1. Kullanıcının fare imlecini resmin üzerine getirmesi
2. Kullanıcının fare göstergecini resimden uzağa hareket ettirmesi
3. Kullanıcının resme fare göstergeci üzerinde iken farenin sol tuşu ile tıklatılması
4. Kullanıcının fare ile tıklanan bir düğme üzerinde hareket ettirmesi

Önce, resmin farklı görünümleri oluşturulur. Daha sonra Fireworks programında rollover efektinin tarayıcıda çalışmasını sağlayan HTML ve JavaScript kodları oluşturulur. Fireworks, kareleri kullanarak rollover�in farklı durumlarına ait ayrı resimleri saklar.

1. Up (yukarı) birinci karede
2. Over (üzerinde) ikinci karede
3. Down (aşağı) üçüncü karede
4. OverWhileDown (aşağıdayken üzerinde) dördüncü karede bulunur.

1.1. Düğme Düzenleyicisi (Buton Editor)

Düğme düzenleyicisi (Button Editor) bir düğmenin tüm durumlarının oluşturulmasını ve her şeyin çalışması için linkler (internet adresleri) ve HTML eklenmesini sağlar. İstenirse düğmeler elle de oluşturulabilir. Düğme düzenleyici (Button Editor) kullanıldığında, düğme kütüphaneye eklenir. Kütüphaneye eklenen yeni düğme tuval üzerine sürüklenerek kullanılabilir.

Düğmeler için basit rollover�lar oluşturulur. Basit bir rollover, kullanıcı imleci düğmenin üzerine getirdiğinde yeni bir resme geçer ve ardından kullanıcı imleci resmin dışına kaydırdığında eski durumuna geri döner. Basit rollover sadece iki grafiğe ihtiyaç duyar, bu nedenle yüklenmesi hızlıdır.

Fireworks Buton Oluşturma

Çalışmanıza düğme yerleştirmek için Edit/Insert/New Button (Ctrl + Shift + F8) menüsü kullanılır. Ekrana düğme düzenleyici (Button Editor) penceresi gelir. Düğme üzerinde yazı gölgeleme, fare hareketine göre belirlenir.

Düğme düzenleyicideki (Button Editör) sekmeler:

Up sekmesi: Düğmenin normal görünümüdür. Ekranda yerleşiminde görüleceği şekildir.

Over sekmesi: Düğmenin üzerine fare göstergeci getirildiğinde alacağı şekildir (farenin sol tuşu tıklanmadan alacağı şekil).

Down sekmesi: fare göstergeci düğme üzerine getirildiğinde farenin sol tuşuna bir defa tıklandığında alacağı şekildir.

Over while down: Farenin sol tuşu ile düğmeye tıklandıktan sonra, fare göstergeci düğme üzerine getirildiğinde düğmenin alacağı şekildir.

Copy Over Graphic butonu: Bir görünümde oluşturulan düğme görünümünü, olduğu gibi aktarmayı sağlar. Örneğin Up sekmesinde düğmeyi oluşturdunuz, Over sekmesinde düğme görünümü oluşturmaya geçtiniz ve Up sekmesinde oluşturduğuz düğmenin Over sekmesine olduğu gibi geçmesini istiyorsak Copy Over Graphic butonu kullanılır.

Import a Button butonu: Fireworks programı tarafından hazır oluşturulmuş olan düğmelerin kullanılmasını sağlar.

Düğme düzenleyiciye (Button Editor) geçmek için Edit/Insert/New Button (Ctrl + Shift + F8) menüsü kullanıldığında düğme düzenleyici penceresi gelir. Up sekmesinde düğmenin görünümünü oluştururuz, şekilleri kullanabiliriz, şekil üzerine Text simgesini kullanarak yazı yazabiliriz, şeklimize filtreler, gölgelemeler ve stiller ekleyebiliriz.

Up sekmesinde düğmenin görünümü tamamladıktan sonra Over sekmesine geçilir. Burada düğmenin üzerine fare göstergeci getirildiğinde alacağı şekli çizilir. Eğer Up sekmesindeki şekli kullanmak istiyorsak Copy Over Graphic butonu kullanılır, düğme olduğu gibi Over sekmesinde görünür, fare göstergeci düğme üzerinde farklı görünsün istiyorsak düğme üzerinde değişiklik yaparız, örneğin gölgelemeleri, filtreleri, stilleri veya şekli değiştiririz.

Aynı şekilde düğmenin Down (düğmenin fare ile tıklandığında alacağı görünüm) ve Over While Down sekmesi (düğme fare ile tıklandıktan sonra fare göstergeci düğme üzerine getirildiğinde alacağı görünüm) düğme görünümü tasarlanır. Düğme tasarımı tamamlandıktan sonra Done butonuna tıklayarak çalışma sayfanıza yerleştiririz. Düğme tasarımından vazgeçmek istersek Cancel butonuna tıklarız.

Hazır düğmeleri kullanmak istersek Import a Button düğmesini kullanırız.

Düğme çalışma alanı içerisine yerleştirildikten sonra Original (Normal) görünümde düğme üzerinde değişiklik yapılabilir. Örneğin boyut, taşıma, kırpma, hizalama, filtre, matlık gibi değişiklikler yapılabilir.

Preview (ön izleme) görünümüne geçersek düğmenin nasıl göründüğüne bakabiliriz.Preview (Ön izleme) görünümünde düğme üzerinde değişiklik yapılamaz. Değişiklik yapmak için Original (normal) görünüme geçmeniz gerekir.

Düğmelerin Dilim Kılavuzlarını Gizle

Düğmelerin Dilim Kılavuzlarını Göster

Düğmelerin dilim kılavuzlarını ekranda göstermek veya gizlemek için View/Slide Guides (Ctrl + Alt + Shift + Ş) menüsü kullanılır veya araç kutusundaki (Tools) dilim Kılavuzlarını gizle � göster simgeleri kullanılır.

Dilim kılavuzları düğmelerin çalışma alanı içerisinde daha kolay hizalanmasını sağlar. Birden fazla düğme olduğunda düğmeler birbirilerine göre daha kolay hizalanırlar.

1.2. Yeni Bir Düğme Ekleme

Düğme düzenleyici (Button Editor); oluşturulan düğmeleri sembol olarak kütüphaneye ekler. Semboller, birden çok nesneye ait kopyaları kontrol etmek istendiğin de kullanılan nesne veya nesneler gruplarıdır.

	Düğme düzenleyicide (Button Editor) oluşturulan düğmeler, kütüphaneye (Library) yerleşir. Düğmeleri kütüphanede görüntülemek için Window/Library (F11) menüsü kullanılır. Kütüphane (Library) Assets Paletine kenetlenmiştir. Assets yüzer paleti kullanılarak da kütüphaneye (Library) erişilebilir.
Yeni Bir Düğme Oluşturma

Kütüphanedeki (library) düğme adına farenin sol tuşu ile çift tıklandığında Symbol Properties penceresi açılır. Name kısmından istenirse düğmeye yeni bir isim verilir.

Kütüphanedeki düğmeyi belge içerisine yerleştirmek için farenin sol tuşu ile tutup çalışma alanı içerisine sürüklemek yeterlidir.

Hizalama Paneli

Çalışma alanındaki düğme ve nesneleri hizalamak için hizalanacak nesneler seçilir. Modify/Align menüsündeki seçenekler veya Window/Align menüsündeki palet kullanılarak nesneler çalışma alanı içerisinde sıralanır.

Çalışma alanında düğmeler,kopyalama yollarından herhangi biri kullanılarak çoğaltılabilir. Örneğin araç kutusunda işaretçi (Pointer) seçili iken düğme farenin sol tuşu ile bir defa tıklanarak seçilir, Alt tuşu basılı tutulur, tuş bırakılmaz, farenin sol tuşu ile düğme sürüklenerek kopyalanır. İşlem tamamlandıktan sonra Alt tuşu bırakılır. Diğer kopyalama yolları da kullanılabilir. Edit menüsündeki kopyalama seçenekleri, kısa yol tuşları, kısa yol simgeleri kullanılarak da düğmeler kopyalanabilir.

Düğmeler kopyalandıktan sonra özellikler (Properties) penceresinde düğme üzerindeki metin değiştirilebilir, filtreler eklenebilir, matlığı değiştirilebilir.

1.3. Düğmeleri Değiştirme

Çalışma alanına düğme eklendikten sonra da düzenleme yapılabilir. Çalışma alanında düğmenin kopyaları oluşturulduğunda, bir düğme üzerinde yapılan düzenlemeler diğer düğmeleri de etkiler.

Çalışma alanı içerisindeki düğmeyi düzenlemek için Orijinal (normal) görünümde iken fare göstergeci düğme üzerine getirilir, farenin sol tuşuna çift tıklanır ve Edit Button (düğme düzenleyici) penceresi açılır.

Düğme düzenleyici (Button Edit) Penceresinde düğme üzerinde istenen sekmede değişiklikler yapılır. Düğmenin şekli, efekti, metin büyüklüğü, gölgeleme, matlık gibi değişiklikler yapılır. İşlem tamamlandığında Done butonuna basılarak işlem onaylanmış olunur.

1.4. Düğmelere Ad Verme ve Bağlantı Ekleme

Fireworks programında düğmeler oluşturulduktan sonra düğmelere bağlantılar eklenebilir. Düğmeye bir isim verilebilir. Düğmeye verilen isim, düğmenin başka programlara yerleştirildiğinde ya da internette yayınlandığında kullanılan isimidir.

Butonlara Ad Verme ve Bağlantı Ekleme

Düğmeye isim vermek için çalışma sayfası Original (normal) görünümde iken fare ile düğme seçildikten sonra özellikler (Properties) penceresinden Button alanı kullanılarak düğmeye isim verilir. Buraya yazılan isim düğme ihraç edildiğinde görülecek isimdir.

Düğmeye bağlantı eklemek için özellikler penceresindeki Link alanına düğmeye tıklandığında gidilmek istenen bağlantı yazılır. Farenin sol tuşu ile tıklandığında eklenen bağlantıya gidilmiş olunur.

Düğmeye eklenen bağlantı için açıklama eklenmek istendiğinde Alt bölümü kullanılır. Düğme üzerine fare göstergeci getirildiğinde bu açıklama görülür.

1.5. Düğmeleri Alma

Düğme düzenleyici (Button Editor) ile oluşturulmuş düğmeler ya da daha önceden oluşturulmuş düğmeleri çalışma alanı içerisine yerleştirebiliriz.

Çalışma alanı içerisine düğme yerleştirmek için File/Import (Ctrl + R) menüsü kullanılır.

Gelen pencerede düğmenin bulunduğu konum seçilir, dosya seçildikten sonra penceredeki aç butonu tıklanır. Çalışma alanı içerisinde farenin sol tuşu basılı tutulup sürüklenir istenilen boyuta geldiğinde farenin sol tuşu bırakılır. Bir diğer yol da çalışma alanı içerisinde iken farenin sol tuşuna çift tıklanarak çalışma alanı içerisine düğme yerleştirilir.

1.6. Grafikleri Düğmeye Dönüştürme

Çalışmamızı oluşturduğumuzda çalışmamız içerisinde düğmeler olmayabilir.Fireworks programı grafikleri düğmeye dönüştürme imkânı verir.

Çalışma alanı içerisine şekil, şekil üzerine metin eklenir, şekle efekt, gölgeleme verilebilir. Düğmeye dönüştürülecek bütün nesneler seçilir, (örneğin şekil ve üzerindeki metin gibi) nesneler seçildikten sonra Modify/Symbol/Convert to Symbol (F8) menüsü seçilir.

Menü seçildiğinde ekrana yandaki Symbol Properties penceresi gelir.Pencerede Name bölümüne istenirse düğmeye bir isim verilir. Grafiğin düğmeye dönüşmesi için Type seçeneklerinden Button seçilir, OK butonuna basılarak grafik düğmeye dönüştürülür.

Düğmeye dönüştürülen grafik artık bir grafik değil bir düğmedir. Button Edit (düğme düzenleyici) kullanılarak düğme istenildiği gibi tasarlanır.