Adobe Muse'da nesnelere farklı durumlar atama

Not:

Adobe Muse artık yeni özellikler eklemeyecek ve 26 Mart 2020'de desteği sonlandıracak. Ayrıntılı bilgi ve yardım için Adobe Muse hizmet sonu SSS sayfasına bakın.

Adobe Muse CC 2015.1 Sürümünde Geliştirilen Özellikler / Şubat 2016

Web sayfanızdaki farklı nesnelere durum geçişleri uygulayarak tasarımınızı daha ilgi çekici ve etkileyici hale getirebilirsiniz. Ayrıca, her nesnede her durum geçişi için gecikme, süre ve zamanlama seçeneklerini de ayarlayabilirsiniz.

Durum geçişinde, durumlar arasındaki Eğim ve Işıma değişiklikleri desteklenir.

Nesnelerin farklı durumlarını anlama

Bir nesnenin durumu, kullanıcı nesneyle etkileşim kurduğunda oluşan görünümünü belirler. Bu etkileşimler; fareyle nesnenin üzerine gelinerek (rollover adı da verilir), nesneyi tıklatarak veya buna benzer eylemlerle kurulabilir. Bir nesne ile etkileşim kurulduğunda, nesnenin varsayılan durumdan dönüştüğü veya normal durumdan başka bir duruma geçtiği söylenir. Bu amaç doğrultusunda, Adobe Muse bu tip etkileşimler için sorunsuz geçişler ekler.

Adobe Muse'da, metin, widget kapları (her türlü widget), görüntüler, köprüler, düğmeler dahil olmak üzere çeşitli nesne türlerine Durumlar uygulayabilirsiniz. Durumlar, grafik stillerini, paragraf stillerini, karakter stillerini vb. varsayabilir.

Adobe Muse'daki nesnelerin farklı durumları nelerdir?

Adobe Muse, aşağıdaki durum türlerini sağlayarak bir nesnenin kullanıcı etkileşimine bağlı olarak stilini belirlemenize ve görünümünü değiştirmenize olanak tanır. 

  • Normal: Normal durumu, nesnenin web sayfası yüklendiği sıradaki varsayılan görünümünü belirler. Nesneyle etkileşim kurulmadığı sıradaki nesne durumunu tanımlamanızı sağlar. Normal durumundan başka durumlara geçen nesne dönüşümleri.
  • Fare Tuşu Basılı: Fare Tuşu Basılı durumu, nesnenin üzerine tıklandığı ve fare tuşunun bırakılmadığı sıradaki görünümünü belirler. 
  • Rollover: Rollover durumu, farenizi nesnenin üzerine getirdiğiniz sıradaki nesne görünümünü değiştirmenizi sağlar. Rollover durumunu kullanmak, bir web sayfasındaki etkileşimli ve etkileşimli olmayan nesneleri ayırt etmenin en kolay yollarından biridir.
  • Etkin: Etkin durumu, nesnenin Etkin olduğu ve daha önce üzerine tıklandığı sıradaki görünümünü tanımlar. Bir düğmenin tıklatılması veya bir menünün seçilmesi buna örnek olarak verilebilir.
    Bir nesnenin Etkin durumuna geçmesi, nesnenin kullanılmakta olduğunu belirtir. Etkin durumları, Köprüler de dahil her türlü nesne için tanımlanabilir.

Nesnelere durum atama

Tüm nesnelere varsayılan olarak dört durum atanmıştır. Ancak, Adobe Muse Durumlar Panelini kullanarak bu durumların her birini ayrı ayrı özelleştirmenizi sağlar.

Not:

Durumlar ile çalışırken Seçim Göstergesi özelliğini kullanarak seçimlerinizi izlemeniz önemlidir. Bunun nedeni, Adobe Muse'un varsayılan olarak bir nesnenin Normal durumunu düzenlemenize olanak vermesidir. Yani, A Nesnesinin Etkin durumunu düzenliyor olsanız bile B Nesnesini seçip ardından tekrar A Nesnesini seçtiğinizde nesne Normal durumda olarak kabul edilir. Bu nedenle, nesnenin stilini belirlemeden önce her seferinde düzenlemek istediğiniz Durum ayarını Durumlar panelinden seçmeniz önemlidir.

Bir nesne üzerinde yapılan düzenlemeler varsayılan olarak Normal durum şeklinde kaydedilir. Ancak, Muse'da Durumlar Panelini kullanarak farklı bir duruma geçebilir ve başka bir durumu özelleştirerek nesnenin stilini belirleyebilirsiniz. Bu durumların her birini ayrı ayrı düzenleyerek her etkileşim türünde nesnenin davranışına odaklanabilirsiniz.

Bir nesnenin durumunu özelleştirmek veya düzenlemek için şunları yapın:

  1. Pencere > Durumlar'ı tıklatarak Durumlar panelini açın.
  2. Durumunu düzenlemek istediğiniz nesneyi seçin.
  3. Düzenlemek istediğiniz Durum'u seçin ve nesneye stil vererek devam edin.
  4. Durumlar Panelinden, Geçiş'i seçin ve Soldurma seçeneğini belirleyin. Geçiş için Gecikme, Süre ve Hız seçeneklerini ayarlayın. Geçiş'i seçtiğinizde, nesne ayarlarınıza uygun şekilde bir durumdan diğerine geçiş yapar.
Bir nesnenin stilini belirlerken Seçim Göstergesi'ndeki açılır menüyü kullanarak da bir durum seçebilirsiniz.

Widget'lara ve widget kaplarına durum atama

  1. Tarayıcıyı kapatın ve Adobe Muse'a geri dönün.

  2. Widget'ı bir kez tıklatarak menünün tamamını seçin. Yiyecek düğmesini bir kez daha tıklatarak yiyecek menü öğesini seçin. Yanlışlıkla üçüncü kez tıklatırsanız ve Seçim Göstergesi'nde Etiket sözcüğü görüntülenirse Menü Öğesi sözcüğünün görüntülenmesi için Escape tuşunu bir kez tıklatarak hiyerarşide bir düzey yukarı geçin.

    Seçenekler panelinde Birlikte Düzenle seçeneği etkin olduğu için bu yiyecek menü öğesinin görünümünde yapacağınız tüm değişiklikler Yatay Menü widget'ındaki geri kalan düğmelerin hepsine uygulanır. Bu şekilde düzenleme işlemleri çok daha hızlı yapılabilir. Tasarım her bir düğmeye farklı stil uygulamanızı gerektirmedikçe Birlikte Düzenle seçeneğinin varsayılan ayarını etkin durumda bırakın.

  3. İlgili sekmeyi seçerek veya Pencere > Durumlar seçeneklerini belirleyerek Durumlar panelini açın.

    Bu panel, ziyaretçinin imleciyle yapılan etkinliğe bağlı olarak düğme grafiğinin farklı görüntülenme şekillerini düzenlemenizi sağlar. Her bir durumun görünümünü tanımlayan pek çok gri kutu olduğunu göreceksiniz.

    Siteyi önizlediğiniz sırada, Normal durumunun sayfa ilk yüklendiğinde ziyaretçinin imleci menüyle etkileşim halinde değilken menünün nasıl göründüğünü belirttiğini görmüştünüz. Ziyaretçi imlecini bir düğmenin üzerine getirdiğinde, Rollover durumuna uygulanan stiller görüntülenir. Ziyaretçi düğmeye basarsa, Fare Tuşu Basılı durumuna uygulanan stiller görüntülenir. Son olarak, ziyaretçi sitenin geçerli sayfasındaysa (örneğin, hakkında menü öğesini tıklatmışsa ve halen hakkında sayfası görüntüleniyorsa) düğme, Etkin durumuna uyguladığınız stille görünür. Bu son durum isteğe bağlıdır; ancak ziyaretçilerin o sırada görüntüledikleri sayfayı görebilmelerini sağlaması nedeniyle bazı durumlarda yararlıdır.

  4. Durumlar panelinden listedeki Normal, Rollover, Fare Tuşu Basılı ve Etkin durumlarının her birini tıklatın. Paneldeki her bir durumu tıklattığınızda, sayfadaki Menü widget'ının durumun varsayılan görünümünü güncellediğini göreceksiniz.

  5. Normal durumunu tekrar tıklatın. Ana menü öğesi seçiliyken Dolgu Rengi Dilimi'ni kullanarak kırmızı gibi tamamen farklı bir renk seçebilirsiniz. Farklı bir dolgu rengi ayarladığınızda Birlikte Düzenle seçeneği etkin olduğu için menü öğelerinin tümü Normal durumlarını günceller.

    Birlikte Düzenle seçeneği etkinken düğme durumlarından birinin dolgu rengini güncellediğinizde diğerleri de otomatik olarak güncellenir.

  6. Geçiş'i seçin ve Soldurma seçeneğini belirleyin. Bir durumdan diğerine yapılan nesne geçişi, ayarlarınıza uygun şekilde solarak açılır veya kapanır.

    Bir durumdan diğerine geçiş seçeneğini belirlerken aşağıdaki seçenekleri ayarlayabilirsiniz:

    Gecikme: Bir durumdan diğerine geçiş sırasında olan, saniye cinsinden gecikme süresi.

    Süre: Geçişin süresi.

    Hız: Bu seçenekte, geçişi Doğrusal yapabilir ve bir sonraki duruma geçişin Yavaş olmasını seçebilirsiniz. Ayrıca Artan Hareket Hızı, Azalan Hareket Hızı veya Artan/Azalan seçeneklerini de belirleyebilirsiniz. Nesne geçişi ayarlarınıza uygun şekilde artan veya azalan hareket hızıyla gerçekleşir.

  7. Dosya > Siteyi tarayıcıda önizle'yi tekrar seçtiğinizde düğmenin Normal durumunu özelleştirmiş olduğunuzu göreceksiniz. Menü ilk yüklendiğinde, geçerli sayfayı belirten düğme dışındaki tüm düğmeler artık kırmızı renkte görünür. Düğmelerin üzerine tek tek gittiğinizde, varsayılan gri Rollover rengi görüntülenir ve bir rollover efekti oluşturur.

  8. Bu örnekte, Durumlar panelindeki durumları tek tek seçin (veya Kontrol Paneli'nde bulunan Seçim Göstergesi'nin yanındaki Durumlar menüsünü kullanarak her bir durumu seçin) ve Dolgu Rengi'ni Yok (kırmızı çapraz çizgili beyaz renk dilimi) olarak ayarlayın. Bu ayar, arka plan menü öğesi düğmelerini kaldırır; böylece menü düğmeleri saydamlaşır ve arka plandaki tasarım şeffaf biçimde görünür.

Bu belge yazıldığı sırada, Yatay Menü widget'ının dış kabı varsayılan olarak saydam görünmektedir. Ancak, istediğiniz zaman Dolgu Rengi Seçici'yi kullanarak tıpkı menü öğesi düğme kaplarında olduğu gibi dolgu rengini ayarlayabilirsiniz. Daha sonra kendi sitelerinizi hazırlarken tüm widget'ın dolgu rengini ayarlayıp düğme kapları için farklı dolgu renkleri belirleyerek denemeler yapabilirsiniz. Ayrıca, düğmeleri tasarlamak için bir arka plan rengi ayarlamayı da deneyebilirsiniz.

Adobe logosu

Hesabınıza giriş yapın