Fireworks'te Dönen Bir Grafik Hazırlıyoruz

Bu dersimizde Fireworks programını kullanarak bir dönen bir grafik animasyonu yapmak istedik.

Başlamaya hazırsanız başlayalım. Fireworks'ü açın ve aşağıdaki adımları izleyin.

* 200x200 px ebatında yeni bir döküman açın. Canvas color'u beyaza ayarlayın.
* Vektörel şekil (Rectangle) aracını seçerek sahneye bir dikdörtgen çizin.
* Dolgu için, pattern kullanın. Jeans pattern'i seçin.


Şekil 1. Jeans pattern'i seçmek.

* Property panelinden Live Effects kontrollerini kullanarak Inner Bevel Efekti verin. Bevel ayarlarını olduğu gibi bırakın. Daha sonra onları tecrübe ederek geliştirebilirsiniz..


Şekil 2. Bevel efektini uygulamak.

* Çizdiğiniz dörtgeni F8 tuşuna basarak bir sembole çevireceksiniz. Sembol tipi olarak Graphic'i (animation'ı seçmeyin) işaretleyin. Bir sembol adı verin. Böyle bi çalışma için ne ismi verdiğiniz önemli değil, ama birkaç sembolle çalıştığınız zaman karışıklık olmaması babından isimlendirme iyi bir seçimdir. Şimdi sembolün bir kopyasını oluşturacaksınız.

* CTRL+Shift+D'ye basarak şekli klonlayın. Şimdi sahne üzerinde iki şekil oldu, ikinci şekil öncekinin sağ üstündedir. Layer'lara baktığınız zaman da aynısından iki şekil olduğunu görebileceksiniz.


Şekil 3. Layers panelinde iki şeklin oluşması

* Üstteki şekil seçili iken Modify > Transform > Numeric Transform'u seçin...
* Açılır menüden Resize seçin ve Constrain Proportions özelliğinin başındaki onay işaretini kaldırın, bu çok mühimdir.


Şekil 4. Numeric Transform diyalog kutusunda ayarların yapılması.

* Yüksekliği 5 yapın. Diğerini olduğu gibi bırakın ve OK deyin.
* İşlemleri yaptığınız şekil orjinal şeklin bir parçası gibi görünüyor artık.
* Her iki şekli de seçmek için aşağıdaki metotlardan birini uygulayın.
- Shift'e basılı tutupher iki şekli de tıklayarak seçin.
- Tıklayın ve basılı tutarak kursoru her iki şeklin üzerine taşıyın.
- Layer panelinde Shift'e basılı tutarak seçmek istediğiniz iki şekli de tıklayın.

* Şimdi Modify > Symbol > Tween Instances menüsüne gidin ve Distribute to Frames (Frame'lere dağıt) ayarını seçin. Frame numarasını 6'ya ayarlayın. OK deyin. Bu çalışmanıza 6 yeni frame ekleyecektir. Artı, sizin başlama şekliniz ve bitirme şekliniz, toplam 8 frame olacaktır. Frame paneline bir göz atın. Bu dönüşün ilk yarısıdır. Sonucu görmek için Play butonuna basın (buton, sahnede çalışma dosyanızın altındadır) Güzel, değil mi? Gerçekte sadece bastırıp ezme işlemi yaptık, yani şekli yamyassı bir hale soktuk. Fakat göz ve beyin bunu farklı algılayacaktır.


Şekil 5. Frame'lere dağıtma işlemi.

Dönüşün Tamamlanması

* Şimdi dönüşü tamamlamanız gerekiyor. Frames panelinde Frames 2'den 7'ye kadarını seçin. Bunu yapmak için önce Frame 2'ye tıklayıp onu seçin, sonra Shift'e basılı tutarken Frame 7'ye tıklayın. Böylece tamamı da seçilecektir.


Şekil 6. İkinci frame'den yedinciye kadar olanını seçmek.

Frame Panel Ayarlarına tıklayın, ordan Duplicate Frames'i seçin. Bu seçenek seçili 6 frame'in aynısını animasyonunuzun sonuna ekler. Şu an animasyonunuzu çalıştırdığınızda pek bir şey gözükmeyecektir. Yeni frameler yarısına kadar çalışır, tekrar başa döner.


Şekil 7. İkinci frame'den yedincisine kadar olan kısmını çoğaltmak.

* Şimdi kopyaladığınız frame'leri tersine çevirmeniz gerekiyor. Commands > Documents > Reverse Frames yolunu seçin. Bu komut birbirini izleyen frame'leri seçip tam tersine çevirmenize imkân verecektir.


Şekil 8. Frame'leri tersine çevirme işlemi.

* Start Frame kısmındaki açılır menüden Frame 9'u seçin ve End Frame kısmından da 14'ü seçin. OK'i tıklayın.
* Animasyonunuzu şimdi oynatın. Şeklin tamamen döndüğünü görebileceksiniz artık.

Son Birkaç Adım:

* Gerektiği kadar alan için Trim özelliğini kullanın. Bunun için: Modify > Canvas > Trim Canvas yolunu seçin.
* Optimize panelinde dosya formatı olarak Animated GIF seçin.
* Resmi 2-Up ya da 4-Up'ta önizleme yapın.
* Kaliteyi koruyarak mümkün mertebe az renk modunu kullanın, bu dosyanın boyutunu düşürecektir.
* Animated GIF olarak Export edin.


Eğer hazırladığımız örnek PNG dosyası ile çalışıyorsanız, sonuç aşağıdaki gibidir, 16-color GIF resim olarak optimize edilmiştir.



Şekil 9. Dönen grafik yaptınız, vatana millete hayırlı olsun. :)

Jim Babbage'ın dersinden çevirdim.

  • Etiketler;
Siraceddin El
1999 yılından bu yana web tasarımcı olarak yurt içinde ve yurt dışında sayısız projede yer aldı. 2002 yılında Sanalkurs.net'i kuran ekiptendir. Etkinlik.com.tr'nin de kurucularındandır. Girişimci, tasarımcı ve eğitmen olarak çalışmalarını sürdürmektedir.
Yorum Yaz

Yorum yazabilmek için üye girişi yapmanız gerekiyor!

elinize sağlık allah razı olsun bilgi baylaştığınız için zaten bilgi paylaşıldıkça kutsallaşır
:D :gul: güzel olmuş.... :gul: :D
bu dönen şekil yerine yazı yapabilir miyiz peki ben yapmaya çalıştım ama frameler duplicate olmadı f8 bastıktan sonra animation olarak işaretledim ondan olabilir mi acaba
:agla::uzul: ben beceremedim propertiesde Property panelinden Live Effects kontrollerini kullanarak Inner Bevel Efekti verin. Bevel ayarlarını olduğu gibi bırakın. Daha sonra onları tecrübe ederek geliştirebilirsiniz.. burda takıldım ilk defa acıyomda...
HOCAM YAPTIM ÇOK GÜZEL OLDU TAM DA İSTEDİÐİM ŞEY FAKAT BEN BUNU DW DA HAZIRLADIÐIM SİTEME NASIL EKLEYECEÐİM BİR DE BUNU SÖYLERSENİZ SEVİNİRİM
Sayfanızı açın, resmi sayfanıza import edin.
kolay gelsin öncelikle bayadır siteyi takip ediyorum kendimce bu siteden faydalanarak bişeyler üretmeye çalışıyorum sorum ::bazı sitelerde scrrol görüyorum fireworkste de böle bi buton var ama nasıl çalıştığını bulmadım bilen arkadaş varsa yardım edebilirmi acaba şimdiden kolay gelsin teşekkürler
mrb bende fireworks dersi görüyorum ... ama daha yenii genelde hiçbir araçların görevlerini bilmiyorum .Ama öğrenmek istiyorum dikkat ediyorumdan yararlandığım hiç bir site adreslerinde araçları açıklammamışlar eğer siz açıklarsanız memnun olurumm:):-dusun::-dusun::-dusun: Şimdiden tşk €d€rim
yaf ben seyı sorcaktım bunun gıbı ama mısal ben adımı yazıcam o ole donecek ben ole bısey yapmak ıstıom bılgısı olan varsa please help me:uzul:
Adınızı da aynı mantıkta yapacaksınız.
çhoq güsel ama bnde yapabilsem:D:D
olmuyo yha:uzul:
Hocam çok güzel çalışma, Tebrik ve teşekkürler...
bunu sağdan sola yapamayız mı

Yukarı Git