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.
Animate CC 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 CC, CreateJS'ye entegre edilmiştir. Böylelikle açık web teknolojilerinde HTML5 aracılığıyla zengin etkileşimli içerik sağlanır. Animate CC, 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, 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şturmak için şunları yapın:
- 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ıklatı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.
Animate CC, 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 CC, 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.
JavaScript'i kullanarak sahne alanındaki şekillere ve nesnelere hareket ekleyebilirsiniz. JavaScript'i bağımsız karelere ve anahtar karelere de ekleyebilirsiniz.
- JavaScript eklemek istediğiniz kareyi seçin.
- Eylemler Paneli'ni açmak için Pencere > Eylemler seçeneğini belirleyin.
Animate CC'de 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 Kütüphanesi||API Belgeleri||Github'daki Kod Örnekleri|
|EaselJS||http://createjs.com/Docs/EaselJS/modules/EaselJS.html||https://github.com/createjs/easeljs/|
|TweenJS||http://createjs.com/Docs/TweenJS/modules/TweenJS.html||https://github.com/createjs/tweenjs/|
|SoundJS||http://createjs.com/Docs/SoundJS/modules/SoundJS.html||https://github.com/createjs/soundjs/|
|PreloadJS||http://createjs.com/Docs/PreloadJS/modules/PreloadJS.html||https://github.com/createjs/preloadjs/|
Sahne alanındaki içeriği HTML5'e yayınlamak için şunları yapın:
- Dosya > Yayınlama Ayarları seçeneğini belirleyin.
- Yayınlama Ayarları iletişim kutusunda şu ayarları belirtin:
Çıktı
FLA'nın yayınlandığı dizin. Bu, FLA ile aynı dizine varsayılan olarak ayarlanır ancak gözat düğmesi "..." tıklatılarak 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.
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.
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.
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.
Not:
Varsayılan ayar, mantıksal alt klasörlere ayrılan dosyaları yayınlamaya devam eder.
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.
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.
Not:
Yuvalanmış zaman çizelgeleri kullanılarak tasarlanmış, tek kareli bir animasyon döngüye alınamaz.
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 CC


sürümü
|$VERSION|
|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*|
Not:
Bu belirteçler birimlerine ayrıştırılır ve diğer belirteçlerle değiştirilir.
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ı”);
- Yayınlama Ayarları menüsünde Gelişmiş sekmesine geçin ve HTML'ye JavaScript'i dahil et seçeneğini belirleyin.
- 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.
- 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.
- 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ıklatın.
- 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.
Not:
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.
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:
-
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.
Animatörler genellikle üçüncü taraf JavaScript kütüphanelerini dahil eder, ancak Animate CC'nin 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:
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ı.
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.
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.
- Değiştirmek istediğiniz tuvali seçin.
- Özellikler bölmesinde Sahne Alanı seçeneğini belirleyin.
- Sahne Alanı'nda Alfa için yüzde değerlerini belirleyin.
Aynı zamanda, tuval arka planını saydamlaştırmak için Renk Örneği Yok seçimini de kullanabilirsiniz:
- Değiştir>Belge>Sahne Alanı Rengi'ni seçin veya Özellik Denetçisi'nde Gelişmiş Ayarlar seçeneğini belirleyin.
- Sahne Alanı Renk örneğinde Renk Yok seçeneğini belirleyin.
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.
- Hareketli Grafik Sayfası sekmesinde Görüntü ve varlıkları hareketli grafik sayfasıyla birleştir onay kutusunu seçin.
- Format olarak PNG, JPEG veya Her İkisi seçeneğini belirleyin.
- 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ıklatın ve hareketli grafik sayfasının arka plan rengini ayarlayın.
- 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ıklatın ve hareketli grafik sayfasının arka plan rengini ayarlayın.
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, ç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.
Animate CC, 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 CC'de 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.
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ı).
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 CC'de 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 CC ö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 CC 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.
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.
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
Animate CC, 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.
- ActionScript 3 belgesini Animate CC'de açın.
- Komutlar > AS3'ü HTML5 Canvas belgesine dönüştür seçeneğini belirleyin.