Not:

  Typekit'in adı Adobe Fonts olarak değiştirildi ve Creative Cloud ve diğer aboneliklere dahil edildi. Daha fazla bilgi alın.

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

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

Parantez

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

Code_Aspects
(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 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 belgelerine ilişkin başvurular

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

publish-settings-basics

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

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.

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

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

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.

Gelişmiş ayarlar

publish_settings_output

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.

JSEmbed23
Export-spritesheets
Publish_Settings_JavaScript_Namespaces

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

Not:

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 CC
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*

Not:

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

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.

Mering Json
Js'yi HTML ile birleştirme

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

    actions-add-script
  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 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:

  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ıklatın veya yerel bir kütüphaneye göz atarak dosya ekleyin.

    actions-include

    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.

 

canvas tranperancy_final
Tuval saydamlığı

advanced_settings
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ıklatı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ıklatın ve hareketli grafik sayfasının arka plan rengini ayarlayın.   
sprite-sheet
Export-spritesheets-1

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.

Static-text

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. Ayrıca, Typekit aracılığıyla web fontlarını da 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 TypeKit web fontları ekleme

Animate CC, HTML5 Canvas belgesinde Dinamik Metin türü için Typekit Web fontları sunar. Typekit, 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 Typekit fontlarına sorunsuz şekilde erişip bunları kullanabilirsiniz.

Animate CC'de Typekit fontlarını kullanma hakkında daha fazla bilgi için bkz. HTML5 Canvas belgelerinde Typekit 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: Typekit web fontları, 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 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.

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 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.
Bir AS3 belgesini HTML5 Canvas belgesine dönüştürmek için şunları yapın:
  1. ActionScript 3 belgesini Animate CC'de açın.
  2. Komutlar > AS3'ü HTML5 Canvas belgesine dönüştür seçeneğini belirleyin.

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