Kullanıcı Kılavuzu İptal

Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama

  1. Adobe Animate Kullanıcı Kılavuzu
  2. Animate'e Giriş
    1. Animate'teki Yenilikler
    2. Resimli Sözlük
    3. Animate sistem gereksinimleri
    4. Animate klavye kısayolları
    5. Animate'te Birden Çok Dosya Türü İle Çalışma
  3. Animasyon
    1. Animate'te animasyonun temel öğeleri
    2. Animate'te kareleri ve anahtar kareleri kullanma
    3. Animate'te kare kare animasyonu
    4. Animate'te klasik ara animasyonu ile çalışma
    5. Fırça Aracı
    6. Hareket Kılavuzu
    7. Ara hareket ve ActionScript 3.0
    8. Ara Hareket Animasyonu Hakkında
    9. Ara hareket animasyonları
    10. Ara hareket animasyonu oluşturma
    11. Özellik anahtar karelerini kullanma
    12. Ara oluşturarak konuma animasyon ekleme
    13. Hareket Düzenleyici kullanarak ara hareketleri düzenleme
    14. Ara animasyonunun hareket yolunu düzenleme
    15. Ara hareketleri işleme
    16. Özel hareket hızları ekleme
    17. Hareket önayarları oluşturma ve uygulama
    18. Animasyon ara yayılma alanları ayarlama
    19. XML dosyaları olarak kaydedilen Ara hareketlerle çalışma
    20. Ara hareketler ve Klasik aralar karşılaştırması
    21. Şekil arası doldurma
    22. Animate'te Eklem aracı animasyonunu kullanma
    23. Animate'te karakter canlandırmayla çalışma
    24. Adobe Animate'te maske katmanlarını kullanma
    25. Animate'te sahneler ile çalışma
  4. Etkileşim
    1. Animate ile düğmeler oluşturma
    2. Animate projelerini diğer belge türü biçimlerine dönüştürme
    3. Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama
    4. Animate'te kod parçacıkları ile interaktiflik ekleme
    5. Özel HTML5 Bileşenleri oluşturma
    6. HTML5 Canvas'ta bileşenleri kullanma
    7. Özel Bileşenler oluşturma: Örnekler
    8. Özel Bileşenler için Kod Parçacıkları
    9. En iyi uygulamalar - Animate ile reklamcılık
    10. Sanal Gerçeklik içeriği oluşturma ve yayınlama
  5. Çalışma alanı ve iş akışı
    1. Boya fırçaları oluşturma ve yönetme
    2. HTML5 Canvas belgelerinde Google fontlarını kullanma
    3. Creative Cloud Libraries ve Adobe Animate'i Kullanma
    4. Animate için Sahne Alanı ve Araçlar panelini kullanma
    5. Animate iş akışı ve çalışma alanı
    6. HTML5 Canvas belgelerinde web fontlarını kullanma
    7. Zaman Çizelgeleri ve ActionScript
    8. Birden çok zaman çizelgesiyle çalışma
    9. Tercihleri ayarlama
    10. Animate geliştirme panellerini kullanma
    11. Animate ile zaman çizelgesi katmanları oluşturma
    12. Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma
    13. Nesneleri taşıma ve kopyalama
    14. Şablonlar
    15. Animate uygulamasında Bul ve Değiştir
    16. Geri alma, yineleme ve Geçmiş paneli
    17. Klavye kısayolları
    18. Animate'te zaman çizelgesini kullanma
    19. HTML uzantıları oluşturma
    20. Görüntüler ve Animasyonlu GIF'ler için en iyileştirme seçenekleri
    21. Görüntüler ve GIF'ler için dışa aktarma ayarları
    22. Animate'te Varlıklar Paneli
  6. Multimedya ve Video
    1. Animate'te grafik nesnelerini dönüştürme ve bir araya getirme
    2. Animate'te sembol örnekleri oluşturma ve bunlarla çalışma
    3. Görüntü İzleme
    4. Adobe Animate'te ses kullanımı
    5. SVG dosyalarını dışa aktarma
    6. Animate'te kullanmak üzere video dosyaları oluşturma
    7. Animate'te video ekleme
    8. Video işaret noktalarıyla çalışma
    9. Animate ile nesne çizme ve oluşturma
    10. Çizgileri ve şekilleri yeniden şekillendirme
    11. Animate CC ile konturlar, dolgular ve degradeler
    12. Adobe Premiere Pro ve After Effects ile çalışma
    13. Animate CC'de Renk Panelleri
    14. Flash CS6 dosyalarını Animate ile açma
    15. Animate'te klasik metin ile çalışma
    16. Animate'e resim yerleştirme
    17. Animate'te içe aktarılan bitmap'ler
    18. 3B grafikler
    19. Animate'te sembollerle çalışma
    20. Adobe Animate ile çizgiler ve şekiller çizme
    21. Animate'te kütüphaneler ile çalışma
    22. Sesleri dışa aktarma
    23. Animate CC'de nesne seçme
    24. Animate'te Illustrator AI dosyalarıyla çalışma
    25. Püskürtme Fırçası aracıyla desen uygulama
    26. Karışım modlarını uygulama
    27. Nesneleri düzenleme
    28. Komutlar menüsüyle görevleri otomatikleştirme
    29. Çok dilli metin
    30. Animate'te kamera kullanma
    31. Animate'i Adobe Scout ile Kullanma
    32. Fireworks dosyalarıyla çalışma
    33. Grafik filtreleri
    34. Ses ve ActionScript
    35. Çizim tercihleri
    36. Kalem aracı ile çizim yapma
  7. Platformlar
    1. Animate projelerini diğer belge türü biçimlerine dönüştürme
    2. Özel Platform Desteği
    3. Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama
    4. WebGL belgesi oluşturma ve yayınlama
    5. AIR for iOS için uygulamaları paketleme
    6. AIR for Android uygulamalarını yayınlama
    7. Adobe AIR for desktop için yayınlama
    8. ActionScript yayınlama ayarları
    9. En iyi uygulamalar - Bir uygulamada ActionScript'i organize etme
    10. Animate ile ActionScript'i kullanma
    11. En iyi uygulamalar - Erişilebilirlik talimatları
    12. Animate çalışma alanında erişilebilirlik
    13. Komut dosyaları yazma ve yönetme
    14. Özel Platformlar için Desteği Etkinleştirme
    15. Özel Platform Desteğine Genel Bakış
    16. Erişilebilir içerik oluşturma
    17. Özel Platform Desteği Eklentisiyle Çalışma
    18. ActionScript 3.0'da hata ayıklama
    19. Özel Platformlar için Desteği Etkinleştirme
  8. Dışa Aktarma ve Yayınlama
    1. Animate CC'den dosya dışa aktarma
    2. OAM yayınlama
    3. SVG dosyalarını dışa aktarma
    4. Animate ile grafikleri ve videoları dışa aktarma
    5. AS3 belgelerini yayınlama
    6. Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma
    7. Sesleri dışa aktarma
    8. QuickTime video dosyalarını dışa aktarma
    9. ActionScript ile harici video oynatmayı denetleme
    10. En iyi uygulamalar - Mobil aygıtlar için içerik oluşturma ipuçları
    11. En iyi uygulamalar - Video kuralları
    12. En iyi uygulamalar - SWF uygulaması geliştirme talimatları
    13. En iyi uygulamalar - FLA dosyalarını yapılandırma
    14. Animate için FLA dosyalarını en iyileştirmeye yönelik En İyi Uygulamalar
    15. ActionScript yayınlama ayarları
    16. Animate için yayınlama ayarları belirtme
    17. Projektör dosyalarını dışa aktarma
    18. Görüntü ve Animasyonlu GIF'leri dışa aktarma
    19. HTML yayınlama şablonları
    20. Adobe Premiere Pro ve After Effects ile çalışma
    21. Animasyonlarınızı hızlıca paylaşma ve yayımlama

HTML5 Canvas nedir?

Canvas, HTML5'teki yeni bir özelliktir ve grafikleri, çizelgeleri, görüntüleri ve animasyonları dinamik bir şekilde oluşturmanıza olanak tanıyan API'ler sunar. HTML5 için Canvas API'si olduğunda, iki boyutlu çizim özellikleri sağlanır ve HTML5 platformu güçlendirilir. Bu özellikler en modern işletim sistemlerinde ve tarayıcılarda desteklenir.

Temel olarak Canvas bir bitmap oluşturma motorudur, çizimler son halleriyle oluşturulur ve yeniden boyutlandırılamazlar. Buna ek olarak, Canvas öğesinde çizilen nesneler web sayfasına ait DOM parçası değildir.

Web sayfası içinde, <Canvas> etiketini kullanarak Canvas öğeleri ekleyebilirsiniz. Bu öğeler daha sonra etkileşim oluşturulması için JavaScript kullanılarak genişletilebilir. Daha fazla bilgi için bu bağlantıya bakın.

Yeni HTML5 Canvas belgesi türü

Animate zengin resimlere, grafiklere, animasyonlara vb. sahip bir HTML5 Canvas belgesi oluşturmanızı sağlar. Zengin ve etkileşimli HTML5 içerikleri oluşturmak için yerel destek sağlayan yeni bir belge türü (HTML5 Canvas) Animate uygulamasına eklenmiştir. Bu sayede içerik oluşturmak için geleneksel Animate zaman çizelgesini, çalışma alanını ve araçlarını kullanabilir ve sonuçta bir HTML5 çıktısı üretebilirsiniz. Birkaç basit tıklamayla, bir HTML5 Canvas belgesi oluşturmaya ve tam işlevli bir çıktı elde etmeye hazır duruma gelirsiniz. Bunu sağlamak için, Animate'te belge ve yayınlama seçenekleri bir HTML5 çıktısı oluşturulacak şekilde önceden ayarlanmıştır.

Animate, CreateJS'ye entegre edilmiştir. Böylelikle açık web teknolojilerinde HTML5 aracılığıyla zengin etkileşimli içerik sağlanır. Animate, sahne alanında oluşturulan içerikler (bitmap'ler, vektörler, şekiller, sesler, aralar vb. dahildir) için HTML ve JavaScript oluşturur. Çıktı, HTML5 Canvas'ı destekleyen herhangi bir aygıtta veya tarayıcıda çalıştırılabilir.

Animate ve Canvas API'si

Animate, Canvas API'sinden yararlanarak HTML5'e yayınlama yapar. Animate, sahne alanında oluşturulan nesneleri, bunların Canvas eşlerine sorunsuz bir şekilde dönüştürür. Animate, Canvas içindeki API'lerle 1'e 1 eşleme özellikleri sağlayarak karmaşık içerikleri HTML5'e yayınlamanıza olanak tanır.

HTML5 Canvas belgesi oluşturma

HTML5 Canvas belgesi oluşturmak için şunları yapın:

  1. Yeni Belge iletişim kutusunu görüntülemek için Dosya > Yeni seçeneklerini belirleyin. Ekranın üst kısmındanGelişmiş sekmesini seçin ve HTML5 Canvas seçeneğini tıklayın. Bu işlemle, HTML5 çıktısının oluşturulması için Yayınlama Ayarlarının değiştirildiği yeni bir FLA açılır.

Artık Animate içindeki araçları kullanarak HTML5 içeriği oluşturmaya başlayabilirsiniz. HTML5 Canvas belgesiyle çalışmaya başladığınızda, belirli özelliklerin ve araçların desteklenmediğini ve devre dışı olduklarını fark edersiniz. Bunun nedeni, bu özelliklerin sırasıyla Animate'in HTML5'teki Canvas öğesi tarafından desteklenmesidir. Örneğin 3B dönüştürmeleri, noktalı çizgiler ve eğim efektleri desteklenmez.

HTML5 Canvas belgesine etkileşim ekleme

Animate, CreateJS kitaplıklarını kullanarak HTML5 içerikleri yayınlar. CreateJS, açık web teknolojilerinde HTML5 aracılığıyla zengin etkileşimli içerikler oluşturulmasını sağlayan modüler kütüphanelerden ve araçlardan oluşan bir pakettir. CreateJS paketi şunlardan oluşur: EaselJS, TweenJS, SoundJS ve PreloadJS. CreateJS bu bireysel kütüphaneler yoluyla sahne alanında oluşturulan içeriği HTML5'e dönüştürerek HTML ve JavaScript çıktı dosyaları oluşturur. Ayrıca içeriğinizi zenginleştirmek için bu JavaScript dosyasında ayarlamalar yapabilirsiniz.

Bunun yanında Animate, HTML5 Canvas için oluşturulan sahne alanındaki nesnelere içeriden etkileşim eklemenize olanak sağlar. Bu sayede sahne alanındaki bireysel nesnelere Animate'ten JavaScript kodu ekleyebilir ve bunları yazma zamanında önizleyebilirsiniz. Bu sayede Animate, kod düzenleyici içindeki kullanışlı özelliklerle JavaScript için yerel destek sağlar ve programlayıcıların iş akışı verimliliğinin artırılmasına yardımcı olur.

İçeriğinize etkileşim eklemek için Zaman Çizelgesi'nde bağımsız kareler ve anahtar kareler seçebilirsiniz. HTML5 Canvas belgesi için, JavaScript kullanarak etkileşim ekleyebilirsiniz. JavaScript kodu yazma hakkında daha fazla bilgi için bu bağlantıya bakın.

JavaScript kodu doğrudan Eylemler panelinde yazılabilir ve JavaScript kodu yazılırken şu özellikler desteklenir:

Kod İpucu

JavaScript kodunu hızla ve hata yapmadan eklemenizi ve düzenlemenizi sağlar. Eylemler Paneli'nde karakterler yazarken, girişinizi tamamlayabilecek bir adaylar listesi görürsünüz.

Animate bunun yanında HTML5 Canvas ile çalışırken Eylemler Paneli'ne özgü olan bazı özellikleri de destekler. Bu özellikler sahne alanındaki nesnelere etkileşim eklenirken iş akışı verimliliğinin artırılmasına yardımcı olur. Bu özellikler şunlardır:

Sözdizimi Vurgulama

Sözdizimine bağlı olarak kodu farklı fontlarda veya renklerde görüntüler. Bu özellik yapısal bir yöntemle kod yazabilmenizi sağlar ve doğru kod ile sözdizimi hatalarını görsel olarak ayırt etmenize yardımcı olur.

Kod Renklendirme

Sözdizimine bağlı olarak kodu farklı renklerde görüntüler. Böylece sözdiziminin çeşitli bölümlerini görsel olarak ayırt edebilirsiniz.

Parantez

JavaScript kodu yazarken açılan parantezler ve küme parantezleri otomatik olarak kapatır.

(A) Sözdizimi Vurgulama (B) Kod Renklendirme (C) Parantez

JavaScript'i kullanarak sahne alanındaki şekillere ve nesnelere hareket ekleyebilirsiniz. JavaScript'i bağımsız karelere ve anahtar karelere de ekleyebilirsiniz.

  1. JavaScript eklemek istediğiniz kareyi seçin.
  2. Eylemler Paneli'ni açmak için Pencere > Eylemler seçeneğini belirleyin.

JavaScript Kod Parçacıklarını Kullanma

Animate'te bulunan JavaScript kod parçacıklarını kullanarak etkileşim ekleyebilirsiniz. Kod Parçacıkları'na erişmek ve bunları kullanmak için Pencere > Kod Parçacıkları seçeneğini belirleyin. JavaScript kod parçacıkları ekleme hakkında daha fazla bilgi için bu makaleye bakın.

CreateJS belgelerine ilişkin başvurular

Etkileşimi Teşvik Eden Kodlar

Javascript, animasyonu etkileşimli hale getirmek için çeşitli seçenekler sunar. Karakterinize etkileşimli hareketler eklemeyi öğrenmek ister misiniz? Bu örneğin sonundaki eğitimi izleyin ve bu adımları takip edin.

  1. Özellikler bölümünde örnek adını girin.

  2. Pencere'yi tıklayın ve Eylem'i seçin.

  3. Geçerli Kare bölümünde, Sihirbaz ile ekle'yi seçin.

HTML5 ile içeriğinizi etkileşimli hale getirme

Karakterinizin istediğiniz hareketleri yapmasını sağlamak için kodları nasıl değiştireceğinizi öğrenmek üzere videoyu izleyin.

HTML5'e animasyon yayınlama

Sahne alanındaki içeriği HTML5'e yayınlamak için şunları yapın:

  1. Dosya > Yayınlama Ayarları seçeneğini belirleyin.
  2. Yayınlama Ayarları iletişim kutusunda şu ayarları belirtin:

Temel ayarlar

Temel Yayımlama ayarları

Çıktı

FLA'nın yayınlandığı dizin. Bu, FLA ile aynı dizine varsayılan olarak ayarlanır ancak gözat düğmesi "..." tıklanarak değiştirilebilir.

Zaman Çizelgesini Döngüye Al

Bu seçenek işaretlenmişse zaman çizelgesi döngüye alınır, işaretlenmemişse sonuna kadar oynatıldığında durur.

Gizli Katmanları Dahil Et

Seçimi kaldırılmışsa, gizli katmanlar çıktıya dahil edilmez.

Sahne Alanını Ortalama

Kullanıcıların sahne alanını şu şekillerde ortalamayı seçmelerine olanak tanır: Yatay, Dikey veya Her İkisi. HTML tuval/sahne alanı, varsayılan olarak tarayıcı penceresinin ortasında görüntülenir.

Duyarlı Yap

Kullanıcıların, animasyonun Genişlik, Yükseklik veya her ikisi bakımından duyarlı olup olmayacağını seçmelerine olanak tanır ve yayınlanan çıktıyı farklı form faktörlerine göre yeniden boyutlandırır. Sonuç olarak duyarlı, daha keskin ve daha net bir HiDPI uyumlu çıktı elde edilir.

Çıktı aynı zamanda, kenarlıklar olmadan tüm ekranı kaplayacak şekilde uzatılır ancak yine de tuvalin bir bölümü görünüme sığmasa da orijinal en boy oranını korur.

  • Genişlik, Yükseklik veya Her İkisi seçenekleri, tüm içeriğin tuval boyutuna göre küçültülmesini ve küçük bir ekranda (mobil aygıtlar veya tabletler gibi) görüntülendiğinde bile görünür olmasını sağlar. Ekran boyutu, geliştirilen sahne alanı boyutundan büyükse tuval, orijinal boyutunda görüntülenir.

Görünür Alanı Doldurmak için Ölçekle'yi Etkinleştir

Kullanıcıların şu seçeneklerden birini seçmelerine olanak tanır: Çıktıyı tam ekran modunda görüntülemek için animasyonu sığdırma veya sığdırmak için uzatma. Varsayılan olarak bu seçenek devre dışıdır.

Görüntüye sığdır: Çıktıyı tüm ekran alanına yayılacak şekilde Tam ekran modunda görüntüler ancak en boy oranını korur.

Sığdırmak için uzat: Çıktıda hiçbir kenar boşluğu olmayacak şekilde uzatır.

Önyükleyiciyi Dahil Et:

Kullanıcıların şu seçeneklerden birini seçmelerine olanak tanır: Varsayılan önyükleyici veya belge kütüphanesinden seçilen bir Önyükleyici.

Önyükleyici, bir animasyon oluşturması gereken komut dosyaları ve varlıklar yüklenirken görüntülenen hareketli GIF biçiminde görsel bir göstergedir. Varlıklar yüklendikten sonra önyükleyici gizlenir ve gerçek animasyon görüntülenir.

Önyükleyici seçeneği varsayılan olarak seçili değildir.

  • Varsayılan önyükleyiciyi kullanmak için Varsayılan seçeneği veya
  • Seçtiğiniz önyükleyici GIF'i kullanmak için Gözat seçeneği. Önyükleyici GIF, Görüntü varlıklarını dışa aktar içindeki yapılandırılan görüntüler klasörüne kopyalanır.
  • Seçili GIF'i önizlemek için Önizleme seçeneğini kullanın.
Yayınlama ayarları

Kök veya alt klasör düzeyinde yayınlama seçimini yapmak için değiştirme seçeneklerini kullanın. Bu düğme varsayılan olarak AÇIK durumdadır. KAPALI konumuna getirildiğinde klasör alanı devre dışı bırakılır ve varlıklar çıktı dosyası olarak aynı klasöre dışa aktarılır.

Tuval varlıklarını kök klasöre yayınlama

Belgeyi doku olarak dışa aktar  Animasyonların performansını  geliştirmek için vektör animasyonunu doku olarak dışa aktarın. Daha fazla bilgi için bkz. Doku Yayımlama.

Belgeyi doku olarak dışa aktarma
Belgeyi doku olarak dışa aktarma

 Bu, yalnızca Görüntüleri hareketli graf. sayfasında birleştir seçeneğinin işareti kaldırıldığında kullanılabilir.

 Tuval belgesinden içe aktarılmış tüm görüntüleri, boyutlarını koruyarak (sıkıştırılmış olanlar dahil) dışa aktarmayı tercih edebilirsiniz. Temel sekmesinde Belgeyi doku olarak dışa aktar ve Görüntüleri hareketli grafik sayfasında birleştir seçeneklerinin seçimini kaldırın. Görüntüler, boyut değişikliği olmadan dışa aktarılır.

Görüntü varlıklarını dışa aktar

Görüntü varlıklarının yerleştirildiği ve başvuru konumu olarak kullanıldığı klasör.

Hareketli grafik sayfalarında birleştir: Tüm görüntü varlıklarını bir hareketli grafik sayfasında birleştirmek için bu seçeneği belirleyin. Daha fazla hareketli grafik sayfası seçeneği için bkz. Bitmap'leri hareketli grafik sayfası olarak dışa aktarma.

Ses varlıklarını dışa aktar

Belgenizdeki ses varlıklarının yerleştirildiği ve başvuru konumu olarak kullanıldığı klasör.

CreateJS varlıklarını dışa aktar

CreateJS kitaplıklarının yerleştirildiği ve başvuru konumu olarak kullanıldığı klasör.

 Varsayılan ayar, mantıksal alt klasörlere ayrılan dosyaları yayınlamaya devam eder.

Gelişmiş Ayarlar

Varlık Dışa Aktarma Seçenekleri

Görüntü, ses ve destekleyen CreateJS JavaScript kitaplıklarının dışa aktarılacağı ilgili URL'ler. Sağdaki onay kutusu işaretlenmediyse bu varlıklar FLA'dan dışa aktarılmaz ancak belirtilen yol bunların URL'lerini birleştirmek için yine de kullanılır. Birden fazla medya varlığı bulunan bir FLA'dan yayınlama işlemini hızlandırır veya değiştirilen JavaScript kütüphanelerinin üzerine yazılmasını engeller.

Tüm bitmap'leri Hareketli Grafik sayfası olarak dışa aktar seçeneği tuval belgesindeki tüm bitmap'leri hareketli grafik sayfasında paketlemenize olanak tanır; bu sayede sunucu isteklerinin sayısı azalır ve performans artar. Yükseklik ve genişlik değerlerini belirleyerek hareketli grafik sayfasının maksimum boyutunu belirleyebilirsiniz.

HTML yayınlama şablonu:

 

Varsayılanı Kullan: Varsayılan şablonu kullanarak HTML5 çıktınızı yayınlar.

Yenisini İçe Aktar: HTML5 belgeniz için yeni bir şablonu içe aktarır.

Dışa Aktar: HTML5 belgenizi şablon olarak dışa aktarır.

Barındırılan Kütüphaneler:

İşaretlenmişse, code.createjs.com'da, CreateJS CDN'de barındırılan kütüphanelerin kopyalarını kullanır. Kütüphanelerin önbelleğe alınmasını ve çeşitli siteler arasında paylaşılmasını sağlar.

Gizli Katmanları Dahil Et:

Seçimi kaldırılmışsa, gizli katmanlar çıktıya dahil edilmez.

Kompakt Şekiller:

İşaretlenmişse, vektör talimatlarının çıktısı kompakt bir biçimde alınır. Okunabilir, ayrıntılı talimatları dışa aktarmak için seçimi kaldırın (öğrenme amaçlı olarak faydalıdır).

Çoklu kare sınırları:

İşaretlenmişse, zaman çizelgesi sembollerine zaman çizelgesindeki her bir karenin sınırlarına karşılık gelen bir Dikdörtgen dizisi içeren frameBounds özelliği dahildir. Çoklu kare sınırları yayınlama süresini önemli ölçüde artırır.

Yayınlandığında HTML dosyasının üzerine yaz ve HTML dosyasına JavaScript'i dahil et:

HTML dosyasına JavaScript'i dahil et seçiliyse, Yayınlandığında HTML dosyasının üzerine yaz onay kutusu işaretli halde devre dışı bırakılır. Yayınlandığında HTML dosyasının üzerine yaz onay kutusu işaretini kaldırdığınızda, HTML dosyasına JavaScript'i dahil et işareti de kaldırılır ve devre dışı bırakılır.

  1. İçeriğinizi belirtilen konuma yayınlamak için Yayınla'yı tıklayın.

 Yuvalanmış zaman çizelgeleri kullanılarak tasarlanmış, tek kareli bir animasyon döngüye alınamaz.

HTML şablon değişkenleri

Yeni bir HTML şablonu içe aktardığınızda, yayınlama esnasında varsayılan değişkenler, FLA dosyanızın bileşenlerine bağlı olarak özelleştirilmiş kod parçacıkları ile değiştirilir. 

Aşağıdaki tablo, Animate tarafından tanınan ve değiştirilen güncel şablon değişkenlerini listeler:

Nitelik Parametresi Şablon Değişkeni
HTML belgesinin başlığı  $TITLE
CreateJS komut dosyalarını dahil etme yer tutucusu $CREATEJS_LIBRARY_SCRIPTS
Oluşturulan komut dosyalarını dahil etme (web fontu komut dosyalarını dahil) yer tutucusu $ANIMATE_CC_SCRIPTS
Bir istemci tarafı komut dosyası başlatmak için HTML Etiketi                                                                                                               $SCRIPT_START
Yükleyici (CreateJS LoadQueue) oluşturma kodu yer tutucusu $CREATE_LOADER
Manifest dosyasında bulunan varlıkları yükleme kodu yer tutucusu $LOAD_MANIFEST
Dosyaları yükleme yöntemini tanımlama kodu yer tutucusu $HANDLE_FILE_LOAD_START
Dosya yükleme olayını yönetme kodu yer tutucusu $HANDLE_FILE_LOAD_BODY
Dosyaları yükleme yöntemini sonlandırma kodu yer tutucusu $HANDLE_FILE_LOAD_END
Varlıklar yüklendikten sonra çağrılan Tamamla işlemini yönetme yöntemini tanımlama yer tutucusu $HANDLE_COMPLETE_START
Sahne alanı oluşturma kodu yer tutucusu $CREATE_STAGE
Animasyon başladıktan sonra tick olayını kaydetme kodu yer tutucusu $START_ANIMATION
Duyarlı ölçekleme ve hidpi ekranları destekleme kodu yer tutucusu $RESP_HIDPI
Tamamla işlemini yönetme yöntemini sonlandırma kodu yer tutucusu $HANDLE_COMPLETE_END
Sesli
içeriği yönetme işlevi yer tutucusu                                                                            
$PLAYSOUND
Tuvali ortalamayı destekleyen bölümü biçimlendirme yer tutucusu $CENTER_STYLE
Önyükleyiciyi destekleyecek tuval görünüm stili özelliği yer tutucusu $CANVAS_DISP
Önyükleyiciyi görüntüleme kodu yer tutucusu $PRELOADER_DIV
İstemci tarafı komut dosyası sonu için HTML Etiketi                                                                                                                $SCRIPT_END
Tuval öğesi kimliği                                                                                                                                                  $CANVAS_ID
Sahne alanı veya tuval öğesinin genişliği                                                                                                              $WT
Sahne alanı veya tuval öğesinin yüksekliği                                                                                                                 $HT
Sahne alanı veya tuval öğesinin arka plan rengi                                                                                          $BG
İçerik
oluşturmak için kullanılan Animate sürümü                                                                                     
$VERSION

Önceki sürümlerde bulunan aşağıdaki belirteçler, geçerli sürümde kaldırılmıştır:

Nitelik Parametresi

Şablon Değişkeni

Komut dosyalarını (CreateJS ve oluşturulan Javascript) dahil etme yer tutucusu

$CREATEJS_SCRIPTS

CreateJS kütüphanelerini başlatma, medya yükleme, sahne alanı oluşturma ve güncelleme kodu yer tutucusu

$CJS_INIT*

 Bu belirteçler birimlerine ayrıştırılır ve diğer belirteçlerle değiştirilir.

Tuval belgeleri için HTML şablonlarını içe ve dışa aktarmaya yönelik JSAPI desteği

Aşağıdaki JSAPI'lar, tuval belgeleri için HTML şablonlarını içe ve dışa aktarmayı destekler:

  • Belirtilen bir konumdaki belgeye ilişkin HTML5 Canvas Yayınlama Şablonunu dışa aktarır:

bool document::exportCanvasPublishTemplate(pathURI)

  • Örnek:

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Şablon dışa aktarılamadı”);

  • Belirtilen konum yolu URI'sinden, belirli bir belge için HTML5 Canvas Yayınlama Şablonunu içe aktarır ve ayarlar:

bool document::importCanvasPublishTemplate(pathURI)

  • Örnek: 

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Şablon içe aktarılamadı”);

JavaScript'i HTML'ye gömme

Animate, tuval yayınlarken JS dosyasını HTML dosyasına dahil etme özelliği sunar.

  1. Yayınlama Ayarları menüsünde Gelişmiş sekmesine geçin ve HTML'ye JavaScript'i dahil et seçeneğini belirleyin.
  2. HTML'in üzerine yazan içeriği yeniden yayınlamak için Yayınlandığında HTML'e JavaScript'i dahil et iletişim kutusunda Tamam seçeneğini belirleyin.
  3. Bu işlem, Yayınlandığında HTML dosyasının üzerine yaz onay kutusunu devre dışı bırakır ve herhangi bir yayınlama olayı gerçekleştirilirken HTML oluşturulur ancak üzerine yazılmaz.
  4. JavaScript'i hariç tutmak ve HTML dosyasını yeniden yayınlamak için JavaScript'i HTML'ye dahil etmeyi durdur seçeneğini belirleyerek Tamam düğmesini tıklayın.
  5.  Yayınlandığında HTML dosyasının üzerine yaz seçili değilken, HTML dosyasına JavaScript'i dahil et seçeneği otomatik olarak devre dışıdır. 

 HTML'in üzerine yazılmasını istemiyorsanız Yayınlandığında HTML dosyasının üzerine yaz ve HTML'e JS Göm seçenekleri aynı anda geçerli olamaz.

Genel ve Üçüncü Taraf komut dosyaları ekleme

Animatörler genellikle animasyonun tamamına uygulanabilen bir JavaScript kodu kullanır. Bu özellik ile Animate'ten animasyonun tamamına uygulanabilen ve bir kareye bağlı olmayan genel ve üçüncü taraf komut dosyaları ekleyebilirsiniz. 

Genel komut dosyalarını eklemek ve kullanmak için:

  1. Pencere > Eylemler'i seçin

  2. Eylemler panelinde, Genel hiyerarşinin içinde Komut Dosyası seçeneğini belirleyin.

    Genel Komut Dosyası bölümü, Animate'te veya harici komut dosyası olarak belgelere uygulanabilir komut dosyaları yazmanıza olanak tanır.

    Harici komut dosyası olarak: Dahil Et ekranında, bir sonraki bölümde açıklanan şekilde dahil edilecek belirli komut dosyasını seçin.

Üçüncü taraf komut dosyaları ekleme

Animatörler genellikle üçüncü taraf JavaScript kütüphanelerini dahil eder, ancak Animate'in oluşturduğu kodu elle değiştirmeleri gerekir. Bu özellik ile, animatörler en son JavaScript kütüphanelerini veya animasyon kodunu kullanma konusunda daha fazla esnekliğe sahip olur.

Üçüncü taraf komut dosyaları eklemek için:

  1. Pencere > Eylemler'i seçin.

  2. Eylemler panelinde, Genel hiyerarşi içinde Dahil Et seçeneğini belirleyin.

  3. Harici olarak barındırılan bir URL'den komut dosyası eklemek için + düğmesini tıklayın veya yerel bir kütüphaneye göz atarak dosya ekleyin.

    Ayrıca, bazı nesneler önceden varolan diğer kütüphanelere bağımlı olduğundan, komut dosyalarını birbirleri arasındaki bağımlılığı temel alarak yeniden sıralayabilirsiniz.

JSON verilerini JS ile birleştirme

Müşteri geri bildirimleri ve doğası gereği güvenli olmayan JSON dosyalarına dayanarak ilgili verileri JS dosyası ile birleştirdik ve böylece ayrı bir JSON dosyası oluşturulmadı.

HTML5 Canvas çıktı optimizasyonu

Animate, HTML5 Canvas çıktı boyutunu ve performansı şu şekillerde optimize eder:

  • Yayınlama Ayarları'ndaki Hareketli Grafik Sayfası sekmesi seçeneklerini kullanarak bitmap'leri hareketli grafik sayfası olarak dışa aktarma.
  • Yayınlanan çıktıdan gizli katmanları (Gizli katmanları dahil et onay kutusunun işaretini kaldırarak) hariç tutma.
  • Sesler ve bitmap'ler gibi kullanılmayan tüm varlıkları ve kullanılmayan karelerdeki tüm varlıkları hariç tutma (varsayılan).
  • Görüntüler, sesler gibi varlık dışa aktarma seçeneklerinin işaretlerini kaldırarak varlıkları FLA'dan dışa aktarmamayı seçme ve CreateJS JavaScript kitaplıklarını destekleme ve dışa aktarmak üzere ilgili URL'leri kullanma.
  • HiDPI uyumlu HTML5 Canvas çıktısı: Animate çıktıyı, içeriği görüntülediğiniz aygıtın piksel oranına göre ölçekler. Bu uyumluluk, yakınlaştırma ile daha keskin bir çıktı sağlar ve HTML Canvas çıktısını Yüksek DPI'li bir makinede görüntülediğinizde ortaya çıkan tuval belgesi pikselleşme sorunlarını giderir.

Saydam tuval arka planı ayarlama

Tuvali farklı renklerle özelleştirebilir ve görünüm saydamlığını değiştirebilirsiniz. Saydam bir tuval oluşturduğunuzda, yayınlama esnasında altındaki HTML içeriğini görüntüleyebilirsiniz.

Not: Bu ayar aynı zamanda OAM yayınlama sırasında arka planı saydamlaştırır.

  1. Değiştirmek istediğiniz tuvali seçin.
  2. Özellikler bölmesinde Sahne Alanı seçeneğini belirleyin.
  3. Sahne Alanı'nda Alfa için yüzde değerlerini belirleyin.

"Renk örneği yok" desteği

Aynı zamanda, tuval arka planını saydamlaştırmak için Renk Örneği Yok seçimini de kullanabilirsiniz:

  1. Değiştir>Belge>Sahne Alanı Rengi'ni seçin veya Özellik Denetçisi'nde Gelişmiş Ayarlar seçeneğini belirleyin.
  2. Sahne Alanı Renk örneğinde Renk Yok seçeneğini belirleyin.

 

Tuval Saydamlığı: Gelişmiş Ayarlar

Bitmap'leri hareketli grafik sayfası olarak dışa aktarma

HTML5 Canvas belgenizde kullandığınız çok sayıda bitmap'i tek bir hareketli grafik sayfası olarak dışa aktarma sonucu sunucu isteklerinin sayısı, çıktı boyutu azalır, performans artar. Hareketli grafik sayfasını PNG (varsayılan), JPEG veya her ikisi şeklinde dışa aktarabilirsiniz.

  1. Hareketli Grafik Sayfası sekmesinde Görüntü ve varlıkları hareketli grafik sayfasıyla birleştir onay kutusunu seçin.
  2. Format olarak PNG, JPEG veya Her İkisi seçeneğini belirleyin.
  3. PNG veya Her İkisiseçeneğini belirlediyseniz PNG Ayarları altındaki şu seçenekleri belirtin:
    • Kalite: Hareketli grafik sayfasının kalitesini 8 Bit (varsayılan), 24 Bit veya 32 Bit olarak ayarlar.
    • Maksimum Boyut: Hareketli grafik sayfası için maksimum yüksekliği ve genişliği piksel cinsinde belirtir.
    • Arka Plan: Tıklayın ve hareketli grafik sayfasının arka plan rengini ayarlayın.   
  4. JPEG veya Her İkisi seçeneğini belirlediyseniz JPEG Ayarları altındaki şu seçenekleri belirtin:
    • Kalite: Hareketli grafik sayfasının kalitesini ayarlar.
    • Maksimum Boyut: Hareketli grafik sayfası için maksimum yüksekliği ve genişliği piksel cinsinde belirtir.
    • Arka Plan: Tıklayın ve hareketli grafik sayfasının arka plan rengini ayarlayın.   

HTML5 Canvas belgesinde metinle çalışma

HTML tuval, Statik ve Dinamik metni destekler.

Statik Metin

Statik metin, yayınlama süresi boyunca tüm varlıkların anahatlara dönüştürüldüğü daha zengin bir seçenektir. Ayrıca harika WSYWIG kullanıcı deneyimi sağlar. Metin vektör anahatları olarak yayınlandığından, bunları çalışma zamanında düzenleyemezsiniz.

Not: Çok fazla statik metin kullanımı, şişirilmiş dosya boyutuna yol açabilir.

Dinamik metin

Dinamik metin, çalışma zamanında metnin değiştirilmesine izin verir ve dosya boyutunu çok fazla artırmaz. Statik metinden daha az seçeneği destekler. Adobe Fonts aracılığıyla web fontlarını destekler.

Son kullanıcı makinelerinde bulunmayan fontlara sahip dinamik metin kullanıyorsanız görüntüleme için çıktıda varsayılan font kullanılır ve kullanıcı deneyimi çarpıtılır. Bu tür sorunlar, web fontları aracılığıyla çözülür.

HTML5 Canvas belgenize web fontları ekleme

Animate, HTML5 Canvas belgesinde Dinamik Metin türü için Web fontları sunar. Adobe Fonts, en iyi font tasarım ortakları tarafından sunulan binlerce kaliteli, premium fonta doğrudan erişim sağlar. Creative Cloud üyeliğinizi kullanarak modern tarayıcılar ve mobil cihazlar için HTML5 çıktınızda Adobe Fonts'a sorunsuz şekilde erişip bunları kullanabilirsiniz.

Animate'te Adobe Fonts'tan web fontlarını kullanma hakkında daha fazla bilgi için bkz. HTML5 Canvas belgelerinde Web fontlarını kullanma

Animate 2015.2 sürümü, bir tuval belgesindeki dinamik metnin görsel deneyimini geliştirir; böylece, sahne alanı ve yayınlanan görünümler senkronize çalışır.

Not: Adobe Fonts, Statik metin türü için kullanılamaz.

HTML5 Canvas çıktısını anlama

Yayınlanan HTML5 çıktısı şu dosyaları içerir:

HTML dosyası

Canvas öğesi içindeki bütün şekillerin, nesnelerin ve çizimlerin tanımlarını içerir. Ayrıca, Animate'i HTML5'e dönüştürmek için CreateJS ad alanını ve etkileşimli öğeleri içeren karşılık gelen JavaScript dosyasını çağırır. 

JavaScript dosyası

Animasyonun tüm etkileşimli öğeleri için ayrılmış tanımlar ve kodlar içerir. Aynı zamanda JavaScript dosyası içinde tüm ara türlerine ait kodlar tanımlanmıştır.

Bu dosyalar varsayılan olarak FLA ile aynı konuma kopyalanır. Yayınlama Ayarları iletişim kutusunda çıktı yolunu belirleyerek bu konumu değiştirebilirsiniz (Dosya > Yayınlama Ayarları).

Mevcut içeriği HTML5 Canvas'a taşıma

Animate'teki mevcut içeriği bir HTML5 çıktısı oluşturmak üzere taşıyabilirsiniz. Animate bunun için tek tek katmanları, sembolleri ve diğer kitaplık öğelerini el ile kopyalayarak veya içe aktararak içerikleri taşımanıza olanak tanır. Alternatif olarak, AS3'ü HTML5 Canvas Belgesine Dönüştür komutunu çalıştırabilir ve mevcut ActionScript içeriğini yeni bir HTML5 Canvas belgesine otomatik olarak taşıyabilirsiniz. Daha fazla bilgi için bu bağlantıya bakın.

Ancak, Animate'te HTML5 belge türüyle çalışırken bazı Animate özelliklerinin desteklenmediğini fark edebilirsiniz. Bunun nedeni, Animate uygulamasındaki özelliklerin Canvas API'si içinde ilgili özelliklere sahip olmamasıdır. Sonuç olarak bu özellikler HTML5 Canvas belge türünde kullanılamaz. Bu, içerik taşıma işlemi sırasında şu işlemleri yapmaya çalıştığınızda sizi etkileyebilir:

Kopyala

İçeriği (katmanlar veya kütüphane sembolleri) geleneksel bir Animate belge türünden (örneğin ActionScript 3.0, AIR for Android, AIR for Desktop vb.) bir HTML5 belgesine kopyaladığınızda. Bu durumda, desteklenmeyen bir içerik türü kaldırılır veya desteklenen varsayılanlara dönüştürülür.

Örneğin bir 3B animasyonunu kopyaladığınızda, sahne alanındaki nesnelere uygulanan tüm 3B dönüştürmeleri kaldırılır.

İçe Aktar:

Desteklenmeyen içerik barındıran bir PSD veya AI dosyası. Bu durumda, içerik kaldırılır veya desteklenen varsayılanlara dönüştürülür.

Örneğin, Degrade Eğim efektinin uygulandığı bir PSD dosyasını içe aktarın. Animate, efekti kaldırır.

Çalış:

Birden fazla belge türüyle (örneğin ActionScript 3.0 ve HTML5 Canvas) aynı anda. Desteklenmeyen bir araçla veya seçeneği belirleyerek belge geçişi yaptığınızda. Bu durumda Anime özelliğin desteklenmediğini görsel olarak gösterir.

Örneğin, bir ActionScript 3.0 belgesinde noktalı bir çizgi oluşturdunuz ve Çizgi aracı seçili durumdayken HTML5 Canvas'a geçiş yaptınız. İşaretleyiciyi ve Özellik Denetçisi'ni incelediğinizde, noktalı çizginin HTML5 Canvas'ta desteklenmediğini belirten simgeler görüntülediklerini fark edersiniz.

Komut Dosyaları:

ActionScript bileşenleri kaldırılır ve kod derleme dışında bırakılır. Ayrıca, yorum bloğunuzda yazılı JavaScript bulunuyorsa (Animate 13.0 ile Toolkit for CreateJS için), kod açıklamasını el ile kaldırdığınızdan emin olun.

Örnek olarak, düğmeler içeren katmanlar kopyaladığınızda bunlar kaldırılır.

Taşıma sonrasında içeriğe uygulanan değişiklikler

Eski içeriği bir HTML5 Canvas belgesine taşıdığınızda uygulanan değişiklik türleri aşağıda verilmiştir.

İçerik kaldırılır

HTML5 Canvas'ta desteklenmeyen içerik türleri kaldırılır. Örneğin:

  • 3B Dönüştürmeleri kaldırılır
  • ActionScript kodu derleme dışında bırakılır
  • Videolar kaldırılır

İçerik, desteklenen bir varsayılan değer olarak değiştirilir

İçerik türü veya özelliği desteklenir, ancak özelliğe ait olan bir özellik desteklenmez. Örneğin:

  • Kaplama Karışım Modu desteklenmez, Normal olarak değiştirilir.
  • Noktalı Çizgi desteklenmez, Düz olarak değiştirilir.

Taşıma sırasında desteklenmeyen özelliklerin tam listesi ve bunlara ait geri dönüş değerleri için bu makaleye bakın.

Diğer belge türlerini HTML5 Canvas belgelerine dönüştürme

Universal belge türü dönüştürücü, mevcut FLA projelerinizi (herhangi bir tür) HTML5 Canvas, ActionScript/AIR, WebGL gibi diğer belge türlerine veya özel bir belge türüne dönüştürmenizi sağlar. Bir biçime dönüştürdüğünüzde Animate'in söz konusu belge için sunduğu geliştirme özelliklerinin avantajından faydalanabilirsiniz. 

Daha fazla bilgi için bkz. Diğer belge biçimlerine dönüştürme

JSFL komut dosyasını kullanarak ActionScript 3'ü HTML5 Canvas belgesine dönüştürme

Animate, bir AS3 belgesinin HTML5 Canvas belgesine dönüştürülmesinde kullanılan bir JSFL komut dosyası sağlar. Çalıştırıldığı zaman, JSFL komut dosyası şunları gerçekleştirir:

  • Yeni bir HTML5 Canvas belgesi oluşturur.
  • Tüm katmanları, sembolleri ve kütüphane öğelerini yeni HTML5 Canvas belgesine kopyalar.
  • Desteklenmeyen özelliklere, alt özelliklere ve özelliklerin özelliklerine varsayılanları uygular.
  • HTML5 Canvas belgesi birden fazla sahneyi desteklemediğinden, her sahne için ayrı FLA dosyaları oluşturur.
Bir AS3 belgesini HTML5 Canvas belgesine dönüştürmek için şunları yapın:
  1. ActionScript 3 belgesini Animate'te açın.
  2. Komutlar > AS3'ü HTML5 Canvas belgesine dönüştür seçeneğini belirleyin.

 Bu, yalnızca Görüntüleri hareketli graf. sayfasında birleştir seçeneğinin işareti kaldırıldığında kullanılabilir.

Daha fazla benzer konu

 Adobe

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?