WebGL nedir?

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.

Not:

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 CC'de 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.

  1. WebGL-glTF tabanlı belge oluşturmak için Ana Sayfa ekranı girintisindekiGelişmiş bölümünden WebGL-glTF Standart veya WebGL-glTF Genişletilmiş seçeneğini belirleyin. 

    WebGL-glTF belge türü
    WebGL-glTF belge türü
  2. İhtiyaçlarınıza göre Genişlik, Yükseklik ve Birimler belirtin ve Oluştur'u tıklatın.

WebGL-glTF dosyası yayımlama

  1. Özellik Denetçisi'nde Yayınlama Ayarları'nı tıklatın.

    WebGL-glTF dosyası yayımlama
    WebGL-glTF dosyası yayımlama
  2. Çıktı adı metin kutusuna bir ad yazın.

    WebGL-glTF Standart belge türünün Yayımlama Ayarları iletişim kutusu
    WebGL-glTF Standart belge türünün Yayımlama Ayarları iletişim kutusu
  3. Format seçeneğinde GLB veya GLTF seçimini yapın.

  4. Görüntü Çözünürlüğü metin kutusunda 1-3 aralığında bir ondalık sayı belirtin.

  5. Dosya boyutunu azaltmak için JSON dosyasındaki byeaz boşlukları kaldır seçimini işaretleyin.

  6. Varsayılan olarak, Döngü zaman çizelgesi ve Gizli katmanları dahil et standart seçenekleri işaretlidir. Küçük hataları bulmak için bu seçeneklerin işaretini kaldırabilirsiniz.

  7. Dosyayı yayımlamak için Yayınla düğmesini tıklatın.

WebGL-glTF Dışa Aktarma (Standart ve Genişletilmiş) hakkında bir video eğitimi

WebGL-glTF Dışa Aktarma (Standart ve Genişletilmiş) hakkında bir video eğitimi
WebGL-glTF Dışa Aktarmayı (Standart ve Genişletilmiş) kullanmayı gösteren video

Animate CC 18.0 ve önceki sürümler

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

WebGL belge türü

Animate CC, 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.

Not:

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 CC'de, 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 CC'yi 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 CC'deyken, 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 CC, WebGL içeriğinin çalıştırılması için bir web sunucusuna ihtiyaç duyar. Animate CC, 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 formatına yayımlama

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

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

HTML'in Üzerine Yaz

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 CC'deki animasyona veya varlıklara yapılan değişiklikleri güncellerken korumak istiyorsanız, bu seçeneğin işaretini kaldırabilirsiniz.

Gizli Katmanları Dahil Et

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.

Zaman Çizelgesini Döngüye Al

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.

webGL_publishSettings
  1. WebGL içeriğini belirtilen konuma yayınlamak için Yayınla'yı tıklatın.

Not:

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:

HTML Sarıcı dosyası

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

JavaScript Dosyası (WebGL Çalışma Zamanı)

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.

Doku Atlası

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.

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

İç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, Bulanıklaştırma efektlerinin 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 WebGL) aynı anda. Desteklenmeyen bir araçla veya seçeneği belirleyerek belge geçişi yaptığınızda. Bu durumda Animate CC, ö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.

Komut Dosyaları

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.

İçerik kaldırılır

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

Filtreler

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

Filters
Bulanıklaştırma efekti kaldırılır ve bunun yerine Düz Dolgu uygulanı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:

 

Radyal Degrade

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

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

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

Bitmap'i önbelleğe olaral görüntü oluşturma performansını geliştirme

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

CacheAsBitmap

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.

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