Değişen Resimler (Swap Images)

Bu yazımızda, Değişen resimler nasıl yapılır öğreneceğiz.

Değişen resimler genelde haber sitelerinde kullanılır. Siz bir haber başlığının üzerine geldiğinizde, haber kısmında o haber ile alakalı olan resim görünür. Aşağıda, ne yapacağımıza dair bir örnek vardır.

Farenizi Ok' ların üzerine getirerek değişimi görebilirsiniz. (Şu anda çalışmamaktadır)

Tsubasa Hyuga Misaki
Değişen Resim

NOT: Bilmeyenler için, yukarıdaki örnekte kırmızı ok ile gelen resim Tsubasa, Mavi ok ile gelen resim Hyuga, Sarı ok ile gelen is Misaki 'dir 🙂

1.Adım

Bu adımda kendimize bir çalışma alanı oluşturuyoruz. Ben 500*300 piksellik bir çalışma alanını tercih ettim.

 

2.Adım

Bu çalışmamız, Yukarıdaki Tsubasa ve arkadaşları ile verdiğimiz olan örnek gibi olacaktır. Bu yüzden, bu adımda ihtiyacımız olan elemanları oluşturacağız. İhtiyacımız olan elemanları sıralarsak

  1. 3 Adet Ok simgesi
  2. 3 Farklı Resim

İlk önce Okları Oluşturalım;

Fireworks Penceremizden 3 adet ok çiziyoruz. Bunun için Firework'un Ok çizmek için kullanılan aracından yararlanıyoruz.Ben 135*40 boyutunda oklar çizdim. Yanına da bir adet , uygun boyutlarda bir resim (Tsubasanın Resmi)  koydum. Siz kendi istediğiniz bir resmi koyabilirsiniz.

İpucu: 3 oku ayrı ayrı çizmek yerine, ilk okunuzu çizin ve Ctrl+Shift+D tuşlarını kullanarak 2 adet klonunu oluşturmak size zamandan kazandırır.

Ok AracıOluşturduğum OklarTsubasa

 

 

3.Adım

Bu adımda, yeni Frame' ler oluşturacağız. Frame Penceresinden, Frame 1' i farenizle, alt tarafta bulunan "+" simgesinin üzerine sürükleyip bırakın.

Frame Çoğaltma

Bu işi 2 kere daha tekrarlayın. Böylece 4 adet frame'imiz olacak.

4.Adım

Oluşturduğumuz 4 Frame'in bazı katmanlarının içeriklerini bu adımda değiştireceğiz. İlk önce Frame 3'ü seçin, seçiliyken Tsubasa'nın resmini (yada siz hangi resmi kullanıyorsanız) silin, yerine farklı bir resim koyun. Resmin, sildiğiniz Tsubasa' nın resmi ile aynı hizada olmasına dikkat edin(Fare ile aynı hizaya getirmeye uğraşmayın. Properties panelinden, koordinatlarını yazarak istediğiniz yere yerleştirebilirsiniz)

4.Adım

 

Aynı işlemi, Frame 4 için de tekrar edin. Biz bu sefer Misaki' nin resmini kullanın.

5.Adım

Bu adımda, bazı katmanlarımızı gizleyeceğiz.

Frame 1'e geçin, ve Layers menüsünden Tsubasa' nın bulunduğu katmanı gizleyin ( yanındaki göz ifadesine bir kere tıklayarak gizliyoruz)

Katmanları Gizliyoruz

Şimdi ise, diğer Frame' lerdeki okları gizleyeceğiz. İlk önce, Frame 2'ye geçin ve Okların bulunduğu katmanları gizleyin

Okları Gizliyoruz

Okları gizleme işlemini, Frame 3 ve Frame 4'e de aynı şekilde uygulayın

6.Adım

Bu adımda, resimlerimizi dilimleyeceğiz. Frame 1'e geçin ve 4 objemizi de tek tek seçin ve

Edit > Insert > Rectangular Slice (Alt + Shift + U ) işlemini herbirine ayrı ayrı uygulayın.

Dikdörtgen Dilimler

 

Yaptığınız işlemlerin sonucu şu şekilde olmalı

Dilimleme Sonucu

7.Adım

Artık, Ok 'larımıza Rollover etkisi vermenin zamanı geldi. Bu işlem için Behaviours paneline ihtiyacımız olacak. Eğer sizde bu panel görünmüyorsa Window > Behaviours komutunu vererek paneli görünür hale getirebilirsiniz.

3 Ok' umuzu teker teker tıklayarak, Behaviours panelinden Simple Rollover davranışını Ok' larımıza kazandıralım

Davranış Kazandırma

Şimdi üstteki Ok' un üstüne bir kere tıklayın. Ok' un ortasında yuvarlak bir obje belirmeli. Farenizi bu obje' nin üzerine götürün. Kursor' unuz el'e dönüşecek. Bu durumdayken, farenizin sol tuşuna basılı tutun, ve yan tarafa, yani Tsubasa' nın olduğu resmin üstüne sürükleyin ve farenizi bırakın. Sürüklemeye başladığınız yerden bıraktığınız yere doğru, halat gibi bir çizgi belirmeli. Farenin tuşunu bıraktığınız anda ise, ekranda hangi Frame' i seçeceğinizi soran bir pencere gelecek. İlk ok için Frame 2'yi seçeceğiz bu pencereden de. (Burada yaptığımız şey, bir nevi oklara link vermek)

Sürükleme İşlemi

Sürüklemeyi Bıraktığında ...


Aynı işlemi, diğer 2 Ok' a da uygulayacağız. Fakat bu sefer, sürüklemeyi bıraktığınızda karşınıza gelen "Swap Image" penceresinden ( üstteki resim ) 2. Ok için Frame 3'ü , 3. ok için Frame 4ü seçiyoruz.

8.Adım - Final

Artık herşeyi tamamladık, sıra yaptıklarımızın sonucunu almaya geldi.Şu komutu uygulayın.  File > Preview in Browser > Preview in firefox.exe (Sizde Internet Explorer yada başka bir tarayıcı çıkabilir. Ben Firefox kullandığım ve ayarlarım bu şekilde olduğundan firefox.exe yazıyor)

Sonuç

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir