Kaydırma Efektleri panelinde, sayfanın nasıl kaydırıldığına bağlı olarak hareketi, opaklığı, slayt gösterisi widget'larını ve Adobe Edge Animate içeriklerini kontrol edebileceğiniz dört farklı sekme bulunur. Kaydırma efektlerini birbirleriyle bağlantılı olarak uygulayarak ve bazı öğeleri iğneleyerek, %100 genişliğe ayarlayarak ve/veya Katmanlar panelini kullanarak birbirinin üstüne veya arkasına yerleştirerek çok çeşitli ilginç efektler oluşturabilirsiniz.
Kaydırma Efektleri panelinin arabirimi Tarayıcı Dolgusu ve Arka Plan Dolgusu alanındaki kaydırma efektleri panelinin arabirimiyle benzerdir. Aşağıdaki adımları izleyerek Kaydırma Efektleri panelindeki Hareket sekmesi ile bir sayfa öğesine kaydırma efektleri uygulayabilirsiniz:
- Muse'da Tasarım görünümüne geçin ve Sayfa > Sayfa Özellikleri'ni seçin.
- Sayfanın kaydırılabilecek uzunlukta olması için Min. Yükseklik değerini en az 2000 piksele ayarlayın.
- Tamam'ı tıklatarak değişiklikleri kaydedin ve Sayfa Özellikleri iletişim kutusunu kapatın.
- Tasarım görünümünde sayfaya bir dikdörtgen veya bir metin çerçevesi çizin.
- Dolgu menüsündeki Dolgu sekmesini kullanarak döşenmiş veya döşenmemiş bir arka plan görüntüsü ekleyin. Veya düz veya degradeli bir dolgu rengi seçin.
- Kaydırma Efektleri panelini açmak için Pencere > Kaydırma Efektleri'ni seçin.
- Kaydırma Efektlerini Etkinleştirme: Kaydırma Efektleri Panelinde, Hareket sekmesi (en solda) görüntülenir. Sayfadaki öğe seçiliyken Hareket onay kutusunu etkinleştirin.
İPUCU: Hareket onay kutusu etkinleştirildiğinde öğeye üst kısma doğru genişleyen bir T şekilli tutamaç eklendiğini göreceksiniz. T şekilli Tutamaç, öğeye uygulanan Kaydırma Efektinin uygulanan temel konumunu belirtir. Ziyaretçi sayfayı kaydırırken Temel Konuma ulaştığında Kaydırma Efekti etkinleşir.
T şekilli tutamaç kontrolü, varsayılan olarak öğenin üst kısmında görüntülenir. Ancak, tutamacı tıklatıp sürükleyerek daha yukarı doğru genişletebilir veya aşağı doğru sürükleyerek kontrol etmekte olduğunuz öğenin köşesiyle hizalayabilir ya da tutamacı öğenin alt kısmına sürükleyebilirsiniz.
- Temel Konumu Ayarlamak için T Şekilli Tutamacın Yerini Belirleme: Temel konumu ayarlamak için T şekilli tutamacı sürükleyin. Böylelikle kaydırılan sayfa T şekilli tutamacın üst kısmına ulaşmadan önceki ve sonraki hareketi belirleyebilirsiniz.
Dilerseniz Hareket sekmesi etkinken Kaydırma Efektleri'nin ortasındaki Temel Konum alanına sayısal bir değer de girebilirsiniz. Yukarıdaki görüntüde, temel konum 200 piksel olarak ayarlanmıştır.
T şekilli tutamacın yeri öğenin temel konumunu gösterir. Sayfa dikey olarak kaydırıldığında, İlk Hareket bölümündeki ayarlar uygulanarak öğenin konumunun Tasarım görünümünde gösterilen konumla eşleşmesi sağlanır.
Ziyaretçi sayfayı kaydırarak veya bir bağlayıcı bağı tıklatarak öğenin temel konumunu aştığında Son Hareket bölümündeki ayarlar uygulanır.
İlk Hareket bölümünde, dikey ve yatay yön okları grubu ve hız seçenekleri bulunur.
- İlk Hareket'in dikey yönünü ayarlama: Dikey düğmelerden birini tıklatarak bir dikey yön (yukarı veya aşağı) belirleyin. Sayfanın kaydırılma hızına göre hareketin oluşacağı hızı ayarlamak için dikey yön oklarının yanında bulunan alana bir hız değeri girin. 0 değerini girdiğinizde, öğe dikey yönde hareket etmez. Ondalık işareti kullanarak bir yüzde değeri de girebilirsiniz. Örneğin, 0,5 değerini girdiğinizde, öğe sayfanın kaydırılma hızının yarısı oranında hızla dikey yönde hareket eder.
- İlk Hareket'in yatay yönünü ayarlama: Sol veya sağ oklarla öğenin temel konuma ulaşmadan önce hareket edeceği yönü ayarlayarak kaydırılan öğenin yatay yönünü (sol veya sağ) belirleyin. Yatay okların sağında bulunan alanda, yatay yönün hız değerini belirleyin. Öğenin yatay yönde hareket etmesini istemiyorsanız ilk yatay hızı 0 olarak ayarlayın.
- Son Hareket bölümünde hareketin yönünü ve oranını ayarlamak için 7. ve 8. adımları tekrarlayın.
Aşağıda gösterilen örnekte, temel konum 500 piksel olarak ayarlanmıştır. Tarayıcı kaydırılmaya başlandığında, öğe 1 misli oranında (yani sayfanın kaydırılma hızıyla aynı oranda) aşağı doğru hareket eder. Sayfa temel konuma doğru kaydırıldıkça öğe belirlenen konumuna gelir. Sayfa kaydırılarak temel konum aşıldığında, öğe sayfanın kaydırılma hızının 2 misli oranında sağa doğru hareket eder.
- Önizleme düğmesine basarak veya Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek kaydırma efektlerini test edin. Sayfayı aşağı ve yukarı kaydırarak öğenin nasıl hareket ettiğini kontrol edin.
- Test işlemlerini tamamladığınızda Muse'a geri dönebilir veya Tasarım düğmesine basıp sayfayı düzenlemeye devam edebilirsiniz.
Bu bölümde, ziyaretçinin kaydırma etkileşimlerine bağlı olarak bir öğenin görüntülenme biçimini değiştirecek görünürlük değişimleri yapma yolları hakkında bilgi edineceksiniz. Bu teknik, ziyaretçi sayfayı yeni bir bölüme doğru kaydırdığında öğeleri soldurarak içerikleri gizlemek veya göstermek için kullanabileceğiniz yararlı bir yöntemdir. Kaydırma Efektleri panelindeki Opaklık sekmesini kullanarak sayfa öğesinin saydamlığını etkileyecek kaydırma efektleri uygulamak için aşağıdaki adımları izleyin:
- Tasarım görünümünde bir sayfayı düzenlerken, Sayfa Özellikleri'nin Min. Yükseklik alanındaki piksel değerinin çoğu monitörün ortalama yüksekliğinden daha yüksek bir değer (örn. 2000 piksel) olarak ayarlanıp ayarlanmadığını kontrol edin. Dilerseniz sayfanın kaydırılacak kadar uzun olmasını sağlamak için sayfaya içerik ekleyebilirsiniz.
- Tasarım görünümünde sayfaya bir dikdörtgen veya bir metin çerçevesi çizin.
- Dolgu menüsündeki Dolgu sekmesini kullanarak (Dolgu panelini de kullanabilirsiniz) seçilen sayfa öğesine döşenmiş veya döşenmemiş bir arka plan görüntüsü ekleyin ya da düz veya degrade bir renk belirleyin. (Dilerseniz sayfaya bir Slayt Gösterisi widget'ı ekleyebilir veya bir Adobe Edge Animate OAM dosyası yerleştirebilirsiniz).
- Öğe seçiliyken Kaydırma Efektleri panelindeki Opaklık sekmesini tıklatıp (soldan ikinci sekme) Opaklık onay kutusunu etkinleştirin.
Opaklık seçeneğini işaretlediğinizde öğenin üzerinde farklı bir tutamaç görünür. Hareket sekmesinde temel konumu belirlemek için kullanılan T şekilli tutamaçta olduğu gibi, tutamacı tıklatıp sürükleyerek öğenin üzerinde görünmesini sağlayabilir, aşağı sürükleyerek öğenin üst köşesiyle (veya öğenin herhangi bir parçasının üst kısmıyla) hizalayabilir ya da öğenin alt kısmına doğru sürükleyebilirsiniz. Opaklık tutamacında, Temel Konum, Soldurma Konumu 1 ve Soldurma Konumu 2 değerlerini ayarlamak için bağımsız şekilde sürüklenebilen üç farklı parça bulunur.
- Tutamacın ortadaki kare parçasını tıklatıp sürükleyerek temel konumu ayarlayabilirsiniz. Aşağıda gösterilen örnekte temel konum, 150 piksel olarak ayarlanmıştır.
- Tutamacın üst kısmındaki dairesel parçayı tıklatıp sürükleyerek tutamacı istediğiniz yere yerleştirebilirsiniz. Aşağıda gösterilen örnekte Soldurma Konumu 1, 100 piksel olarak ayarlanmıştır.
- Tutamacın alt kısmındaki dairesel parçayı tıklatıp sürükleyerek tutamacı istediğiniz yere yerleştirebilirsiniz. Aşağıda gösterilen örnekte Soldurma Konumu 2, 200 piksel olarak ayarlanmıştır.
Not:
Dilerseniz temel konumu soldurma konumu tutamaçları boyunca sürükleyerek her birini aynı değere ayarlayabilirsiniz. Tutamaçları sürüklemek yerine, Kaydırma Efektleri panelinde bu alanların her biri için birer sayısal değer girebilirsiniz.
Bu örnekte, öğe tamamen saydam olarak başlamakta ve giderek opaklaşarak sayfa temel konuma ulaştığında tam opak halini almaktadır (Temel Konuma denk gelen Opaklık değeri şu anda %100 olarak ayarlanmıştır). Sayfa kaydırılarak temel konumu aştığında ise öğe giderek saydamlaşmaya başlamakta ve sayfa kaydırılarak 200 pikseli aştığında görüntüden kaybolmaktadır.
- Önizleme düğmesine basarak veya Dosya > Sayfayı Tarayıcıda Önizle'yi seçerek kaydırma efektlerini test edin. Sayfayı aşağı ve yukarı kaydırarak öğenin opaklığının sayfanın kaydırılmasıyla bağlantılı olarak nasıl değiştiğini kontrol edin.
- Test işlemlerini tamamladığınızda Muse'a geri dönebilir veya Tasarım düğmesine basıp sayfayı düzenlemeye devam edebilirsiniz.
Kaydırma hareketi için yaygın şekilde kullanılan diğer bir yöntem, kaydırma etkileşimini bir slayt gösterisindeki resimlerin görüntülenmesiyle birleştirmektir. Sayfaya bir Slayt Gösterisi widget'ı ekleyebilir ve Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesini kullanarak sayfa belirli bir konuma her kaydırıldığında slayt gösterisinde otomatik olarak yeni bir resim göstermek gibi kaydırma efektleri uygulayabilirsiniz.
Slayt Gösterisi sekmesini tıklatarak (soldan üçüncü sekme) bu bölümün ayarlarını gözden geçirin.
Kaydırma hareketi arabiriminin bu bölüm için en yaygın kullanım şekli, sayfaya bir Slayt Gösterisi widget'ı iğnelemektir. Genelde Slayt Gösterisi widget'ı, (Seçenekler menüsü kullanılarak) sadece büyük slayt gösterisi kabını görüntüleyecek şekilde yapılandırılır ve minik resimler ile Önceki ve Sonraki düğmeleri gizlenir.
Eklemek üzere seçtiğiniz Slayt Gösterisi widget'ının türü site tasarımına bağlı olsa da Tam Ekran slayt gösterisi bu efekt için çok uygundur.
Bir Slayt Gösterisi widget'ına kaydırma efektleri uygulamak için şu adımları uygulayın:
- Sayfa Özellikleri iletişim kutusundaki Min. Yükseklik alanını güncelleyerek sayfayı kaydırılacak uzunluğa getirin. Dilerseniz sayfa içeriği ekleyerek de daha uzun bir sayfa oluşturabilirsiniz.
- Slayt Gösterisi widget'ını Widget Kitaplığı'ndan sayfaya sürükleyin. Seçenekler menüsünü kullanarak slayt gösterisi seçeneklerini yapılandırın. (Slayt Gösterisi widget'larına kaydırma efektleri uyguladığınızda genellikle Önceki, Sonraki ve Minik Resim seçenekleri devre dışı kalır).
- Seçenekler menüsündeki Görüntüler bölümünün yanındaki klasörü tıklatarak Slayt Gösterisi widget'ına resim ekleyin. Eklemek istediğiniz görüntüleri bilgisayarınızdan arayarak seçin ve resim galerisini doldurun.
- Kontrol panelindeki İğnele arabirimini kullanarak slayt gösterilerini tarayıcı penceresindeki geçerli konumuna iğneleyin. Slayt gösterisi seçiliyken, altı iğneleme konumundan birini tıklatın.
Slayt gösterisini ekleyip iğneledikten ve yapılandırdıktan sonra kaydırma efektleri ekleyebilirsiniz.
Kaydırma Efektleri panelindeki Slayt Gösterisi panelinde Slayt Gösterisi widget'ı işaretliyken Slayt Gösterisi onay kutusunu etkinleştirin.
Slayt Gösterisi seçeneği etkinleştirildiği anda temel konum tutamacının Tasarım görünümündeki slayt gösterisine eklendiğini göreceksiniz. Temel kaydırma konumu değerlerini güncellemek isterseniz tutamacın sol veya sağ köşelerini sürükleyebilir veya Temel Kaydırma Konumu alanına sayısal değerler girebilirsiniz. Ayrıca Kaydırma Efektleri panelindeki yukarı ve aşağı okları tıklatarak da sayısal değeri yükseltebilir veya düşürebilirsiniz.
Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesi, slayt gösterisi resimlerinin nasıl oynatılacağını iki farklı şekilde kontrol etmenizi sağlayan iki düğme içerir. Slayt gösterisini otomatik olarak oynatılacak şekilde veya sayfanın kaydırılma hızına göre resimlerin adım adım ilerletilmesini sağlayacak şekilde ayarlayabilirsiniz.
İlk yöntem, istediğiniz temel konumu ayarlayıp ardından Otomatik Oynat onay kutusunu etkinleştirmektir.
Sayfa kaydırılarak temel konumu aştığında (veya ziyaretçi bir bağlayıcı bağlantıya yönlendirilen bir bağlantıyı tıklatarak sayfayı temel konumu aşacak şekilde kaydırdığında) slayt gösterisi oynatılmaya başlar. Otomatik oynat özelliği, sayfa tekrar temel konumun üzerine doğru kaydırılana veya ziyaretçi sayfadan çıkana kadar resimleri set içinde devir yaparak görüntülemeye devam eder.
Yukarıdaki resimde gösterilen örnekte, sayfa 100 piksele (veya temel konum ayarından daha düşük bir değere ayarlı herhangi bir konuma) kaydırıldığında slayt gösterisi oynatılmaya başlar. Ziyaretçi sayfayı tekrar yukarı kaydırıp sayfa temel konumun üzerine geldiğinde (99 piksel veya daha düşük) slayt gösterisinin oynatılması durur.
Slayt Gösterisi widget'ını kontrol etmenin ikinci yöntemi, temel konumu ayarlayıp ardından Şu Piksellerde Slayt Değiştir radyo düğmesini etkinleştirmektir. Bu iş akışında, sayfanın ne kadar aşağı kaydırıldığına bağlı olarak slayt gösterisindeki resimlerin hangi sıklıkta ilerletileceğini belirtmek için radyo düğmesinin altındaki alanda piksel sayısı da ayarlanır.
Örneğin, bir Slayt Gösterisi widget'ını uzun bir sayfaya iğneleyebilir ve diğer sayfa içerikleri kaydırılırken widget'ın sabit bir konumda kalmasını sağlayabilirsiniz. Şu Piksellerde Slayt Değiştir seçeneği için sayısal bir değer ayarlayarak slayt gösterisini sayfa belirtilen piksel sayısına her kaydırıldığında kümedeki bir sonraki resme geçecek şekilde ayarlayabilirsiniz.
Yukarıdaki görüntüde, temel konum 200 olarak ayarlanmıştır. Sayfa en üst kısımdan itibaren 200 pikseli aşacak şekilde kaydırıldığında, sayfanın her 30 piksel kaydırılışında slayt gösterisi dizisindeki bir sonraki resim görüntülenir.
Adobe Edge Animate, HTML5 tabanlı web animasyonları oluşturmanızı sağlayan kullanımı kolay bir tasarım aracıdır. Edge Animate arabirimiyle döngü halinde hareket grafikleri ve sembolleri kullanarak kompozisyonlar oluşturabilirsiniz. Adobe Edge Animate'i kullanarak oluşturduğunuz animasyonlar OAM dosyaları halinde dışa aktarılabilir ve Muse sitelerinizdeki sayfalara yerleştirilebilir. Edge Animate ile oluşturulan animasyonlar herhangi bir eklenti gerektirmeden tarayıcıda oynatılabilir.
Adobe Edge Animate ile animasyonlar hazırladığınızda, öğeleri sahneye sürükleyebilir ve zaman çizelgesini kullanarak bu öğelerin hareketlerini kontrol edebilirsiniz. Doğrudan ana zaman çizelgesine öğe eklemenin yanı sıra kendi dahili zaman çizelgelerini kullanarak oynatılan alt öğeli iç içe öğeler de oluşturabilirsiniz. Adobe Edge Animate ile çalışma hakkında daha fazla bilgi için Adobe Edge Animate ürün sayfasına bakabilirsiniz. Ayrıca Adobe TV'de Adobe Edge Animate video eğitimlerini de izleyebilirsiniz.
Adobe Edge Animate kaydırma hareketi özelliğiyle çalışmak için uygulamanız gereken ilk adım, özellikle bu özelliği kullanma amacı taşıyan bir kompozisyon oluşturmaktır. Kaydırma efektleri, animasyonları etkilemek için ana zaman çizelgesine yerleştirilen OAM dosyalarına uygulanabilir. Ana zaman çizelgesinde yalnızca sayfa kaydırıldığında hareket eden öğelerin bulunduğu (ve animasyondaki diğer her şeyin iç içe geçmiş sembol zaman çizelgelerine yerleştirildiği) bir animasyonu stratejik olarak tasarlayarak etkileşimli animasyonlar oluşturabilirsiniz. Ziyaretçiler sayfayı kaydırdıkça kaydırma efekti ayarları yalnızca ana zaman çizelgesinde bulunan animasyon öğelerinin oynatılmasını kontrol eder.
Özel olarak bir Adobe Muse sitesine eklemek üzere animasyonlar oluşturma hakkında bilgi için bkz. Edge Animate İçeriği Ekleme.
Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesiyle çalışmak için aşağıdaki adımları uygulayın:
- OAM dosyasını Adobe Edge Animate'ten dışa aktarın ve site klasörünüze kaydedin.
- Muse'u başlatın ve bir sayfayı çift tıklatarak Tasarım görünümünde açın. Sayfa Özellikleri iletişim kutusunda min. yükseklik değerini güncelleyerek sayfanın kaydırılacak uzunlukta olduğundan emin olun veya daha uzun bir sayfa olmasını sağlamak için sayfaya başka içerikler ekleyin.
- Dosya > Yerleştir'i seçerek site klasöründen OAM dosyasını bulup seçin.
- Kaydırma Efektleri panelini açın. Adobe Edge Animate sekmesini tıklatarak (soldan dördüncü sekme) bu bölümün ayarlarını gözden geçirin.
- OAM dosyası seçiliyken Edge Animate onay kutusunu etkinleştirin.
Yukarıdaki görüntüde, temel konum 50 piksel olarak ayarlanmıştır. T tutamacını sürükleyerek veya Temel Konum alanına farklı bir değer girerek temel konumu ayarlayabilirsiniz.
Temel konumu ayarladıktan sonra aşağıdaki iki seçeneği kullanarak animasyonun oynatılmasını kontrol edebilirsiniz:
- Otomatik Oynat: Bu seçenek işaretlendiğinde, ana zaman çizelgesinde bulunan animasyon tarayıcı temel konuma kaydırıldığı anda ana zaman çizelgesinde bulunan kare sayısına bakılmaksızın oynatılmaya başlar. Animasyon, sayfa temel konumun üst kısmına kaydırılıncaya kadar oynatılmaya devam eder.
- Şu Piksellerde Çerçeve Değiştir: Bu seçenek işaretlendiğinde, ana zaman çizelgesindeki animasyon sayfanın belirli bir piksel sayısında her kaydırılışında 1 kare ilerler. Örneğin, yüksekliği 3000 piksel olan bir sayfa oluşturduğunuzda ve 10 değerini girdiğinizde, ana zaman çizelgesindeki animasyon, sayfa her 10 piksel kaydırıldığında 1 kare ilerleyecektir. Ziyaretçi sayfayı daha hızlı kaydırırsa animasyon hızı da artar.
Not:
Adobe Edge Animate kompozisyonundaki ana zaman çizelgesinin içine yerleştirilen veya bağlanan hiçbir animasyonlu nesne kaydırma efekti ayarlarından etkilenmez. Bu nedenle, durağan bir arka plan seçmeyi tercih edebilir veya ziyaretçinin sayfa kaydırma etkileşimi her ne olursa olsun tutarlı bir şekilde hareket eden ve bir döngü içinde sürekli olarak devreden iç içe öğeler oluşturabilirsiniz.
- Kaydırma Efektleri panelindeki Edge Animate sekmesinde ayarları belirledikten sonra Dosya > Sayfayı Tarayıcıda Önizle öğesini seçin (veya Önizle düğmesini tıklatın). Sayfayı yukarı ve aşağı kaydırarak Edge Animate animasyonunun (ana zaman çizelgesine eklenen) içeriğinin nasıl oynatıldığını kontrol edin.
- Değişiklik yapmanız gerektiğinde Muse'a geri dönün (veya Tasarım düğmesini tıklatın) ve Kaydırma Efektleri panelinde ayarları güncelleyin.