Edge Animate ile oluşturulan animasyonlar ve geçiş efektleriyle zengin etkileşimli Adobe Muse web sitelerini nasıl oluşturacağınızı öğrenin.

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 bkz. Adobe Muse hizmet sonu sayfası.

Adobe Edge Animate, HTML5 gibi web standartlarını kullanarak web sitelerine animasyonlu içerik ekleyebileceğiniz bir web etkileşim tasarım aracıdır. Animate'teki kullanımı kolay zaman çizelgesi arabirimini kullanarak tüm modern tarayıcılarda görüntülenirken oynatılabilen etkileyici HTML5 animasyonları oluşturabilirsiniz.

Animate'te animasyonlar hazırlama

İçerikleri Muse'da animasyon olarak hazırlamadan önce, Animate dosyasını hazırlayarak Muse'a sorunsuz şekilde gömmek için yapabileceğiniz birkaç değişiklik bulunur. Aşağıdakileri yapın:

  1. Animate'i başlatın. Başlarken penceresi görüntülenir.

  2. Dosya Aç seçeneğini tıklatın ve indirdiğiniz .an dosya uzantılı örnek proje dosyasını bulup seçin. Dilerseniz oluşturduğunuz Animate dosyasını da açabilirsiniz.

    Adobe Muse, Edge Animate animasyonlarını gömmenize olanak verir.
    Başlarken penceresinde Dosya Aç seçeneğini tıklatın.

  3. 'ı tıklatarak .an dosyasını açın ve iletişim kutusunu kapatın. Proje, Animate çalışma alanında görüntülenir.

    Proje görünür
    Animate projesi ekranda görüntülenir.

    Animate kullanılarak oluşturulan animasyonlar, otomatik olarak oynatılacak şekilde ayarlanır (otomatik oynat) veya yüklendikten sonra animasyonu oynatmak için statik bir görüntüyü tıklatmanızı gerektirir. SkyScraper örneği, otomatik olarak oynatılacak şekilde ayarladığı için kullanıcı etkileşimi gerektirmemektedir. Ancak, otomatik oynat işlevi kapatıldığında, sayfada animasyon tıklatılana kadar statik bir görüntü gösterilir. Otomatik oynatılmayan bir animasyon örneği görüntülemek için Animate Showcase'i ziyaret edin.

    Not:

    Animasyonun hemen oynatılıp oynatılmayacağını kontrol etmek için sahneyi seçin ve Özellikler panelinde Otomatik Oynat onay kutusunu işaretleyin veya işaretini kaldırın.

    Otomatik oynat seçeneği
    Otomatik Oynat özelliğini seçerek otomatik oynatma eylemini etkinleştirin.

  4. Arka plan görüntüsünü tıklatarak sahnede seçin. Seçiliyken, mavi bir sınırlayıcı kutu açılır ve soldaki Özellikler panelinde görüntünün özellikleri gösterilir (bu örnekte Image2 olarak adlandırılmıştır). Geri Al tuşu (Windows) veya Delete (Mac) tuşlarına basarak arka plan görüntü dosyasını kaldırın.

    Mavi sınırlama kutusu
    Arka plan görüntüsünü seçin ve silin.

  5. Sahne halen seçiliyken Özellikler panelinde sahnenin renk dilimini tıklatın ve saydam seçeneğini belirleyin.

    Saydam seçeneği
    Sahnenin arka plan özelliğini saydam olarak ayarlayın.

    Not:

    Sahnedeki içerikte beyaz bir arka plan görüntülenir; animasyonu dışa aktarmadığınız veya önizlemediğiniz sürece saydam arka plan sahnede görünmeyecektir.

  6. Dosya > Kaydet'i seçerek en son değişiklikleri kaydedin.

  7. Dosya > Yayınlama Ayarları öğesini seçerek Yayınlama Ayarları iletişim kutusunu açın.

  8. Soldaki Yayınlama Hedefi sütununda, Web onay kutusunun işaretini kaldırın ve Animate Dağıtım Paketi seçeneğini işaretleyin.

  9. Kaydet'i tıklatarak değişiklikleri kaydedin ve Yayınlama Ayarları iletişim kutusunu kapatın.

  10. Projeyi yayınlamak için Dosya > Yayınla öğesini seçin.

  11. Animate'ten çıkın. Windows Gezgini'ni (veya Mac OS Finder) kullanarak sabit diskinizde Animate proje klasörünü bulun. Projeyi yayınladıktan sonra Animate Package adlı klasörü bulun. Bu klasördeki .OAM dosyası, Muse sitenize Animate ile hazırlanan içerikler eklemenizi sağlar.

  12. .OAM dosyasını kopyalayın ve masaüstünde bulunan, web sitenizin diğer tüm görüntülerini ve site varlıklarını içeren klasöre kaydedin. Animasyonu yayınladıktan ve dosyayı site klasörüne kaydettikten sonra Animate içeriğini bir sayfaya yerleştirmek için bir sonraki bölüme geçin.

Animate kullanılarak oluşturulmuş animasyonları bir Muse web sayfasına yerleştirme

Animasyonu Muse sitenizdeki bir sayfaya eklemek için şu adımları uygulayın:

  1. Adobe Muse'u başlatın ve düzenlemek istediğiniz siteyi açın.

  2. Plan görünümünde, animasyonu eklemek istediğiniz sayfanın adını çift tıklatın.

  3. Dosya > Yerleştir... seçeneğini belirleyin ve site klasörünüze giderek .OAM dosyasını seçin.

  4. Sayfayı bir kez tıklatarak animasyonu yerleştirin.

    Not:

    Görüntü yerleştirme işleminin tersine, Animate animasyonunu yerleştirdiğinizde yeniden boyutlandırmak için tıklatıp sürükleyemezsiniz. İçeriği farklı bir boyutta yerleştirmek istiyorsanız Edge projesini güncelleyin ve .OAM dosyasını yeniden yayınlayın.

  5. Seçim aracını kullanarak animasyonu sayfada istediğiniz bir yere yerleştirin. Animasyonun arka planı Muse'da opak görünse de sayfayı önizlediğinizde veya yayınladığınızda saydam görünecektir.

  6. Dosya > Sayfayı Tarayıcıda Önizle öğesini seçerek animasyonun beklenen şekilde görüntülenip görüntülenmediğini kontrol edin. Değişiklik yapmak istediğinizde, Muse'a dönerek sayfa öğelerini yeniden yerleştirebilirsiniz. Varlıklar paneline baktığınızda, .OAM dosyasının artık bir varlık olarak listelendiğini göreceksiniz. Edge Animate ile oluşturulan animasyonlar, tıpkı diğer site varlıkları gibi yeniden bağlanabilir ve güncellenebilir.

    Örneğin, Animate'e geri döndüğünüzde, projeyi açıp değiştirebilirsiniz. .OAM dosyasını yeniden yayınladıktan ve site klasörünüzde versiyonu değiştirdikten sonra, Varlıklar panelinde güncel olmayan bağlantı simgesi görünür. Bu simge, varlık sayfaya yerleştirildikten sonra orijinal dosyanın düzenlendiğini belirtir.

    Yerleştirdiğiniz dosyayı güncellemek için Varlıklar panelinde .OAM dosyası adını sağ tıklatın ve Yeniden Bağlantı Kur öğesini seçin.

    Yeniden Bağlantı Kur seçeneği, yerleştirilen varlığı düzenlenen kaynak dosyaya uygun şekilde günceller. Bu yöntem, animasyonu güncellemek için dosyaların elle silinip yerine yenilerinin getirilmesine göre daha kolay bir yöntemdir.

  7. Kontrol panelinde Yayınla bağlantısını tıklatın. İstediğiniz seçenekleri belirleyin ve Tamam'ı tıklatarak site güncellemelerini yayınlayın.

Adobe Edge Animate ile HTML5 web içeriği ve animasyonlar oluşturma hakkında daha fazla bilgi için Adobe Edge Animate Kaynakları başlıklı konuya bakın. Muse ile çalışmaya yönelik daha fazla ipucuna Muse Yardım ve Eğitimler sayfasındaki eğitimlerden veya Muse Etkinlikler sayfasındaki canlı web seminerleri ve kayıtlı video eğitimlerinden ulaşabilirsiniz.

Zengin medya içeriği gömerek siteye animasyon ekleme

  1. Plan görünümünde, MasterFlash minik resmini çift tıklatarak sayfayı düzenlemek üzere Tasarım görünümünde açın. Daha önce A-Kalıp sayfasını çoğaltmış olduğunuz için statik logonun halen sayfada olduğunu göreceksiniz. Statik görüntüyü animasyon dikdörtgeninin yerine uygun şekilde kullanmak yararlıdır. Ancak, zengin medya öğesi gömdükten sonra yerleştirilen statik logoyu mutlaka silin.

  2. Dosya > Yerleştir'i seçin. İçe Aktar iletişim kutusunda, Kevins_Koffee_Kart klasörüne gidin ve logo.swf adlı dosyayı seçin.

  3. SWF dosyasını, varolan logo görüntü dosyasının konumuyla eşleştirerek sol üst köşeye yerleştirin.

  4. Eski statik logoyu yerleştirdiğiniz yeni SWF penceresiyle hizaladıktan sonra statik logoyu seçip Delete tuşuna basarak silin.

  5. Ana Sayfa sayfasında yapılan yeni değişikliklerle tüm sitenin nasıl göründüğünü gözden geçirmek için Dosya > Siteyi Tarayıcıda Önizle öğesini seçerek logonun farklı sayfalardaki görüntüsünü test edin. Siteyi yayınlamadan, bilgisayarınızda yerel olarak çalışabilir ve siteyi bir tarayıcıda önizleyerek site navigasyonunda sayfaları tıklatarak gezinebilirsiniz. Animasyon (SWF dosyası) bir kez görünecek ve Ana Sayfa sayfasında duracaktır. Diğer sayfaları tıklattığınızda yalnızca statik logo görüntülenir.

    Not:

    Dosya > Sayfayı Tarayıcıda Önizle öğesini seçtiğinizde daha hızlı yüklenerek yeni tarayıcı penceresi Ana Sayfa sayfasını görüntüleyecek, ancak yalnızca etkin (Ana Sayfa) sayfayı önizleyecektir. Web sitesinin tamamı yerine sitedeki tek bir sayfayı kontrol edecekseniz bu seçeneği belirleyin.

Animasyonlara Kaydırma Efektleri ekleme

Adobe Muse, web sayfalarına Adobe Edge Animate kullanılarak oluşturulmuş animasyonlar eklemenizi sağlar. Adobe Edge Animate kaydırma efektleri özelliğini kullanmanın ilk adımı, bu amaca özel bir animasyon oluşturmaktır.

Adobe Muse, ana zaman çizelgesine yerleştirilen animasyonları etkileyecek OAM dosyaları eklemenize olanak tanır. Animasyonu stratejik olarak tasarlayarak yalnızca sayfa kaydırıldığında hareket etmesini istediğiniz öğelerin, etkileşimli animasyonlar oluşturabileceğiniz ana zaman çizelgesi üzerinde kalmasını sağlayabilirsiniz. Geri kalan öğelerin de iç içe zaman çizelgelerinin içine yerleştirilmesi gerekir. Ziyaretçiler sayfayı kaydırdıkça kaydırma efekti ayarları yalnızca ana zaman çizelgesinde bulunan animasyon öğelerinin oynatılmasını kontrol eder.

Adobe Muse'daki Kaydırma Efektleri hakkında daha fazla bilgi edinmek için bkz. Kaydırma Efektleri.

Kaydırma Efektleri panelindeki Slayt Gösterisi sekmesiyle çalışmak için aşağıdaki adımları uygulayın:

  1. OAM dosyasını Animate'ten dışa aktarın ve site klasörünüze kaydedin. Animate'ten OAM dosyalarını dışa aktarma hakkında bilgi edinmek için bkz. Adobe Muse'a animasyonlar yerleştirme.
  2. 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 olmasını sağlayın.
  3. Dosya > Yerleştir'i seçerek site klasöründen OAM dosyasını bulup seçin.
  4. 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.
  5. OAM dosyası seçiliyken Edge Animate onay kutusunu işaretleyin.
Kaydırma Efektleri paneli
Edge Animate animasyonunu sayfa belirli bir konuma kaydırıldığında oynatılacak şekilde veya sayfanın belirli bir mesafedeki (piksel cinsinden) her kaydırılışında karelerin değişmesini sağlayacak şekilde ayarlayın.

Yukarıdaki görüntüde, temel konum 700 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, sayfa belirli bir piksel sayısında her kaydırıldığında bir 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 ilerler. Ziyaretçi sayfayı daha hızlı kaydırırsa animasyon hızı da artar.

Not:

Kaydırma Efekti ayarları, Animate kompozisyonundaki ana zaman çizelgesine gömülen veya bu ana zaman çizelgesinden bağlantı verilen animasyonlu nesneleri etkilemez. 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.

  1. 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.
  2. 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.

Örnek

Bu örnek, kaydırma efektleri kullanılarak Adobe Edge Animate'ten dışa aktarılan OAM dosyalarının nasıl kontrol edildiğini göstermektedir. Bu örnekte, sayfaya açık turkuaz ile başlayarak koyu maviye dönen dikey degrade dolgu uygulanmıştır. Örnek dosyayı ScrollEffects.com sayfasından indirebilirsiniz.

Bu animasyonlu efekt, Hareket ve Edge Animate sekmelerinde uygulanan ayarlardan oluşur.

Aynı OAM dosyasının üç örneği yatay olarak yan yana yerleştirilerek bir animasyonlu pusula oluşturulur. Örnek siteyi bir tarayıcıda görüntülediğinizde, üç pusula görünüme gelerek yerlerini alır. Üç pusulanın her birinin farklı hızlarda hareket ediyormuş gibi görünmektedir. Oysa ki bunun nedeni, Edge Animation dosyasının yapısı değil, Kaydırma Efektleri panelinde farklı şekillerde belirlenmiş ayarlardır.

Yerleştirilmiş üç OAM dosyasıyla benzer bir efekt oluşturmak için aşağıdaki adımları uygulayın:

  1. Tasarım görünümünde Sayfa > Sayfa Özellikleri öğesini seçin. Min. Yükseklik alanını yüksek bir değere ayarlayın. Bu örnek sitede, sayfanın minimum yüksekliği 7465 piksel olarak ayarlanmıştır.
  2. Sayfadaki üç pusulanın bütün örneklerini seçin. Kaydırma Efektleri panelindeki Hareket sekmesinde aynı temel konum ve hareket ayarlarına sahip olan üç OAM dosyası görmenizin nedeni tüm değerlerin görüntüleniyor olmasıdır.
Aynı anahtar konumları ve hareket ayarları
Pusulalar, sayfanın kaydırılmasıyla temel konumlarına ulaşana kadar yukarı doğru hareket eder ve sayfa aşağı kaydırılmaya devam ettikçe yerlerinde sabit şekilde kalır.

Örneği bir tarayıcıda önizlediğinizde, üç OAM öğesinin uyum içinde yukarı yöneldiğini, ardından da iğnelendiklerinde bir sıra halinde yerlerini aldıklarını göreceksiniz.

  1. Üç pusulanın her birinin işaretini kaldırmak için sayfada başka bir yeri tıklatın ve yalnızca soldaki pusulayı seçin. Shift tuşunu basılı tutarak sağdaki pusulayı tıklatın ve her ikisini birden seçin. Kaydırma Efektleri panelindeki Edge Animate sekmesini açarak ayarları gözden geçirin.
Her 350 pikselde bir kare geçişi
Her iki taraftaki pusulalar, kare her 350 pikselde bir değişecek şekilde ayarlanır.

Yanlardaki iki pusula, zaman çizelgesi animasyonunda bir döngü yapacak ve sayfa aşağı doğru her 350 piksel kaydırıldığında bir sonraki kareye ilerleyecek şekilde yapılandırılır.

  1. Yanlardaki iki pusulanın işaretlerini kaldırın. Ortadaki pusulayı seçin ve tekrar Edge Animate sekmesine bakıp Şu Piksellerde Çerçeve Değiştir alanının 400 piksel olarak ayarlanıp ayarlanmadığını kontrol edin. Bu ayar, ortadaki animasyonun diğer iki pusulaya göre daha yavaş hareket ettiğini gösterir.
Her 400 pikselde bir kare geçişi
Ortadaki OAM dosyası, kare her 400 pikselde bir değişecek şekilde ayarlanmıştır.

Pek çok Edge Animate animasyonunun hızını sayfa kaydırma hızına göre değiştirerek ilgi çekici animasyonlar oluşturabilirsiniz. Örneğin, aynı OAM dosyasının birden çok örneğini kullanıp her birine farklı kaydırma efekti ayarları uygulayarak bir balık sürüsü, hareket eden bulutlarla dolu bir gökyüzü veya başka efektler oluşturabilirsiniz.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi