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

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:

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ö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.

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.

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

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.

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

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

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.

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

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

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.

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.

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.

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.

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.

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.

 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ı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.

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

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

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.

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.

İş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.

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

İş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).

İş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.

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.

3. İç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:

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

 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:

Üçü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:

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.

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:

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. 

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:

İç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.

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.

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.

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.

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

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.