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)
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
- 3 Adet Ok simgesi
- 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.
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.
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)
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)
Şimdi ise, diğer Frame’ lerdeki okları gizleyeceğiz. İlk önce, Frame 2’ye geçin ve Okların bulunduğu katmanları gizleyin
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.
Yaptığınız işlemlerin sonucu şu şekilde olmalı
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
Ş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)
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)
