WebGL belgesi oluşturma ve yayınlama

WebGL, ilave eklentilere gerek kalmadan herhangi bir uyumlu tarayıcıda grafik oluşturulmasını sağlayan açık bir web standardıdır. WebGL, tarayıcıların tüm web standartlarına tam olarak entegre edilmiştir ve web sayfası tuvalinin bir parçası olarak görüntü işlemenin ve efektlerin GPU hızlandırmayla kullanımına olanak tanır. WebGL öğeleri diğer HTML öğeleriyle birlikte gömülebilir ve sayfanın farklı bölümleriyle birleştirilebilir.

Günümüzde kullanılan modern tarayıcıların çoğu WebGL'yi desteklemektedir, ancak tam olarak hangi sürümlerin desteklendiğiyle ilgili daha fazla ayrıntı almak için bu bağlantıyı ziyaret edin.

Bazı tarayıcılarda WebGL varsayılan olarak etkin durumda değildir. Tarayıcınızda WebGL'yi etkinleştirmek için bu makaleye bakın.

 Bazı tarayıcılarda WebGL varsayılan olarak devre dışıdır, bu nedenle WebGL'yi tarayıcınızda etkinleştirdiğinizden emin olun.

WebGL-glTF (Beta) belge türünü kullanma

Animate'te artık iki WebGL-glTF belge türü bulunur. Tüm standart WebGL-glTF paketleriyle entegrasyon sağlamak için WebGL-glTF Standart belge türünü kullanabilirsiniz. Tamamen standartlara uygundur.

WebGL-glTF dosyası yayımlama

Animasyonları GLTF ve GLB formatlarına dönüştürme

WebGL-glTF ve GLB, dosya boyutunu küçültür ve çalışma zamanı sürecini azaltır. Animate'te, belgeleri her iki biçimde de kullanabilirsiniz. Videolarınızı her iki formatta da kullanmak ister misiniz? Bu örneğin sonundaki eğitimi izleyin ve ilgili adımları takip edin.

Animate'te WebGL GLTF Dışa Aktarma kullanılarak, gelişmiş animasyonlar nasıl oluşturulur?

Bir animasyonun WebGL GLTF, GLB formatlarında nasıl göründüğünü öğrenmek için videoyu izleyin.

Animate 18.0 ve önceki sürümler

Animate 18.0 veya Animate'in eski sürümlerinden birini kullanıyorsanız aşağıdaki içeriği inceleyebilirsiniz.

WebGL belge türü

Animate, zengin etkileşimli içerikler oluşturup bunları Web Grafikleri Kütüphanesi (WebGL) biçiminde yayınlamanıza olanak tanır. WebGL tarayıcılara tam olarak entegre edildiği için, Animate'in web sayfası tuvalinin bir parçası olarak GPU hızlandırma ile grafik işleme ve oluşturma yapmasını sağlar.

Bu yeni belge türü içeriği oluşturup bunu bir WebGL çıktısı için hızla yayımlamanıza olanak sağlar. Animate'in güçlü araçlarını kullanarak zengin içerikler yaratabilir ve uyumlu tüm tarayıcılarda çalışan bir WebGL çıktısı oluşturabilirsiniz. Bu sayede geleneksel Animate zaman çizelgesini, çalışma alanını ve çizim araçlarını kullanarak WebGL içeriklerini yerel olarak yazabilir ve üretebilirsiniz. Yaygın olarak kullanılan tarayıcıların çoğu WebGL'yi destekler, diğer bir deyişle, çoğu web platformunda Animate ile içerik oluşturmanıza olanak tanır.

 WebGL desteği sadece önizleme olarak sağlanır. Animate'in bu güncellemesinde, ses ve komut dosyası oluşturmayı içeren temel animasyon desteğinin yanı sıra bir dizi etkileşim özellikleri bulunmaktadır. Animate'in gelecekteki sürümlerinde WebGL belge türü için daha fazla sayıda özelliğin kullanılabilir duruma geleceğini göreceksiniz. WebGL için desteklenen Animate özelliklerinin tam listesini görmek üzere bu Bilgi Bankası makalesine bakın.

WebGL belgesi oluşturma

Animate'te, WebGL belgesi sayesinde hızla içerik oluşturup WebGL biçimi için yayınlamanız mümkündür. WebGL belgesi oluşturmak için:

1. Animate uygulamasını başlatın.
2. Hoş Geldiniz ekranında, WebGL(Önizleme)  seçeneğini tıklatın. Alternatif olarak Dosya > Yeni menü seçeneğini belirleyerek Yeni Belge iletişim kutusunu görüntüleyin. WebGL(Önizleme) seçeneğini tıklatın.

WebGL içeriğini tarayıcılarda önizleme

İçeriğinizi önizlemek veya test etmek için Animate'in Filmi Test Et özelliğini kullanabilirsiniz. İçeriği önizlemek için şunları yapın:

1. Animate'teyken, Windows için Ctrl+Enter'a ve MAC için CMD+Enter tuşlarına basın. Böylece varsayılan tarayıcınız başlatılır ve WebGL içeriği oluşturulur.

Animate, WebGL içeriğinin çalıştırılması için bir web sunucusuna ihtiyaç duyar. Animate, WebGL içeriğini Bağlantı Noktası 8090'da çalıştırmak için yapılandırılmış yerleşik bir Web Sunucusuna sahiptir. Bir sunucu bu bağlantı noktasını zaten kullanıyorsa Animate bu çakışmayı otomatik olarak algılar ve giderir.

İçeriği WebGL biçimine yayınlama

Animate, WebGL içeriğini yerel olarak Animate'te oluşturmanızı ve yayınlamanızı sağlar.

WebGL belgenizi yayınlamak için şunları yapın:

1. Yayınlama Ayarları iletişim kutusunu görüntülemek için Dosya > Yayınlama Ayarları seçeneklerini belirleyin. Alternatif olarak, WebGL için Yayınlama Ayarlarını daha önce yaptıysanız Dosya > Yayınla seçeneklerini belirleyin.
2. Yayınlama Ayarları iletişim kutusunda şu özellikler için değer belirleyin:

Çıktı için anlamlı bir ad girin. Ayrıca WebGL çıktısının yayınlanmasını istediğiniz konuma gözatın veya bu konumu girin.

WebGL projenizi her yayınladığınızda HTML Sarıcı'nın üzerine yazılıp yazılmayacağını belirtmenize olanak tanır. Yayınlanan HTML dosyasına harici değişiklikler yaptıysanız ve bunları Animate'teki animasyona veya varlıklara yapılan değişiklikleri güncellerken korumak istiyorsanız, bu seçeneğin işaretini kaldırabilirsiniz.

WebGL çıktısındaki tüm gizli katmanları dahil eder. Gizli Katmanları Dahil Et'in seçimini kaldırma, film kliplerinin içinde yuvalanmış katmanlar dahil, gizli olarak işaretlenmiş tüm katmanların oluşturulan WebGL'ye dışa aktarılmasını engeller. Bu sayede katmanları görünmez yaparak WebGL belgesinin farklı sürümlerini kolayca test edebilirsiniz.

Son kareye ulaşınca içeriği tekrarlar. Son kareye ulaşınca içeriği durdurmak için bu seçeneğin seçimini kaldırın.

3. WebGL içeriğini belirtilen konuma yayınlamak için Yayınla'yı tıklayın.

 Tarayıcılarda çalışan WebGL içeriği için belirtilebilecek maksimum FPS, 60FPS'dir.

WebGL çıktısını anlama

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

Çalışma zamanını içerir, varlıkları çağırır ve aynı zamanda WebGL oluşturucusunu başlatır. Dosya varsayılan olarak <FLA_name>.html şeklinde adlandırılır. Yayınlama Ayarları iletişim kutusunda (Dosya > Yayınlama Ayarları) HTML dosyasına farklı bir ad verebilirsiniz.

HTML dosyası varsayılan olarak FLA ile aynı dizine yerleştirilir. Yayınlama Ayarları iletişim kutusunda farklı bir konum belirleyebilirsiniz.

WebGL'de yayınlanan içeriği oluşturur. İçerik WebGL belgesinin libs/ klasöründe yayınlanır. Dosya flwebgl-<version>.min.js olarak adlandırılır.

HTML sarıcı WebGL içeriğini oluşturmak için bu JS dosyasını kullanır.

Sahne alanındaki bitmap örnekleri de dahil olmak üzere, (şekillerin) tüm renk değerlerini saklar.

WebGL belgenize ses ekleme

WebGL belgenize ses içe aktarabilir veya gömebilir, senkronizasyon ayarlarını (olay, başlat ve durdur) kullanarak oynatmayı kontrol edebilir ve zaman çizelgesi sesini çalışma zamanında oynatabilirsiniz. WebGL şu anda yalnızca .wav ve .mp3 biçimlerini destekler.

Ses ile çalışma hakkında daha fazla bilgi için bkz. Animate'te Ses Kullanma.

Mevcut içeriği bir WebGL belgesine taşıma

Animate'teki mevcut içeriği bir WebGL belgesine taşıyabilirsiniz. Animate bunun için içeriği el ile kopyalayarak veya içe aktararak taşımanıza olanak sağlar. Ayrıca Animate'te birden fazla belge ile çalışırken, içeriği belgeler arasında Katmanlar olarak veya Kütüphane'de varlıklar olarak kopyalamak yaygın şekilde kullanılan bir uygulamadır. Animate'in birçok özelliği desteklenir ancak bazı içerik türleri WebGL biçimini daha iyi karşılamak amacıyla değiştirilmiştir.

Animate, görsel olarak zengin içerikler oluşturulmasına yardımcı olacak çok sayıda güçlü özellik sunar. Ancak, bu özelliklerden bazıları sadece yerel olarak Animate'te sunulmaktadır ve bu nedenle WebGL belgesinde desteklenmezler. Animate bu gibi içerikleri desteklenen bir biçime dönüştürmek üzere tasarlanmıştır ve bir aracın veya özelliğin desteklenmediği zamanlarda bunu görsel olarak belirtir.

İç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 WebGL 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, Bulanıklaştırma efektlerinin 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 WebGL) 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ı çizgi oluşturdunuz ve Çizgi aracı seçili durumdayken WebGL'ye geçiş yaptınız. İşaretçiyi ve Özellik Denetçisi'ni gözlemleyin. Noktalı çizginin WebGL içinde desteklenmediğini görsel olarak belirtirler.

Eylemler Paneli'nde oynatıcı kareye girdikten sonra yürütülecek Javascript kodu yazabilirsiniz. Kare komut dosyaları bağlamındaki 'this' değişkeni ait olduğu MovieClip örneğine başvurur. Ayrıca, kare komut dosyaları Javascript işlevlerine ve kapsayıcı HTML dosyasında bildirilen değişkenlere erişebilir. Bir ActionScript belgesinden bir kare veya katman kopyalayıp bunu bir WebGL belgesine yapıştırdığınızda varolan komut dosyaları yorumlanır.

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

Eski içeriği bir WebGL 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:

desteklenmez. Efekt kaldırılır ve bunun yerine şekil düz dolgu haline gelir.

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

 

değiştirilir ve birincil renk kullanılarak Düz dolgu haline gelir.

Bitmap'i ön belleğe alarak görüntü oluşturma performansını arttırma

Çalışma zamanı bitmap önbelleğe alma, statik bir film klibi (örneğin, bir arka plan görüntüsü) veya düğme sembolünün çalışma zamanında bir bitmap olarak önbelleğe alınacağını belirterek, oluşturma performansını en iyileştirmenizi sağlar. Varsayılan olarak, vektör öğeleri her karede yeniden çizilir. Film klibini veya düğme sembolünü bitmap olarak ön belleğe alma, tarayıcının onları sürekli yeniden çizmesini engeller çünkü görüntü bitmap'tir ve konumu değişmez. Bu WebGL içeriği oluşturma performansının önemli ölçüde geliştirilmesini sağlar.

Örneğin, karışık arka planlı bir animasyon oluşturduğunuzda, arka plandaki tüm öğeleri içeren bir film klibi oluşturun. Daha sonra Özellik Denetçisinde arkalan film klibi için Bitmap olarak önbelleğe al seçeneğini seçin. Oynatma sırasında arka plan, geçerli ekran derinliğinde saklanan bir bitmap olarak çizilir. Tarayıcı sahne alanında bitmap'i hızlıca ve bir defaya mahsus çizer, bu da animasyonun daha hızlı ve daha pürüzsüz biçimde oynamasını sağlar.

Bitmap önbelleğe alma, bir film klibi kullanıp onu otomatik olarak yerinde dondurmanızı sağlar. Bir bölge değişirse, vektör verisi bitmap önbelleğini günceller. Bu süreç, tarayıcının yapması gereken yeniden çizimlerin sayısını en aza indirir ve daha düzgün, daha hızlı oluşturma performansı sunar.

Bir movieclip sembolü için Bitmap olarak önbelleğe al özelliğini etkinleştirmek üzere, movieclip örneğini seçin ve Özellik Denetçisi'nde (Pencere > Özellikler) Oluştur açılır menüsündeki Bitmap olarak önbelleğe al seçeneğini belirleyin.

Bitmap olarak önbelleğe al kullanılırken dikkat edilmesi gerekenler

WebGL belgesinde Bitmap olarak önbelleğe al özelliğini kullanırken şunları dikkate alın:

• Movieclip sembolü için maksimum boyut 2048x2048 olarak sınırlanmıştır. Önbelleğe alınabilecek film klibi örneğinin gerçek sınırlarının 2048x2048 boyutundan az olduğunu, WebGL'nin bazı pikselleri ayırdığını unutmayın.
• Aynı movieclip için birden fazla örnek varsa, Animate önbelleği karşılaşılan ilk örneğin boyutunda oluşturur. Ancak, önbellek yeniden oluşturulmaz ve film klibinin dönüştürülmesi daha büyük bir boyuta değişse de Bitmap olarak önbelleğe al özelliği yok sayılmaz. Bu nedenle, movieclip sembolü animasyon sırasında büyük oranda ölçeklenmişse, animasyon pikselleştirilmiş görünebilir.