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.
- Adobe Animate Kullanıcı Kılavuzu
- Animate'e Giriş
- Animasyon
- Animate'te animasyonun temel öğeleri
- Animate'te kareleri ve anahtar kareleri kullanma
- Animate'te kare kare animasyonu
- Animate'te klasik ara animasyonu ile çalışma
- Fırça Aracı
- Hareket Kılavuzu
- Ara hareket ve ActionScript 3.0
- Ara Hareket Animasyonu Hakkında
- Ara hareket animasyonları
- Ara hareket animasyonu oluşturma
- Özellik anahtar karelerini kullanma
- Ara oluşturarak konuma animasyon ekleme
- Hareket Düzenleyici kullanarak ara hareketleri düzenleme
- Ara animasyonunun hareket yolunu düzenleme
- Ara hareketleri işleme
- Özel hareket hızları ekleme
- Hareket önayarları oluşturma ve uygulama
- Animasyon ara yayılma alanları ayarlama
- XML dosyaları olarak kaydedilen Ara hareketlerle çalışma
- Ara hareketler ve Klasik aralar karşılaştırması
- Şekil arası doldurma
- Animate'te Eklem aracı animasyonunu kullanma
- Animate'te karakter canlandırmayla çalışma
- Adobe Animate'te maske katmanlarını kullanma
- Animate'te sahneler ile çalışma
- Etkileşim
- Animate ile düğmeler oluşturma
- Animate projelerini diğer belge türü biçimlerine dönüştürme
- Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama
- Animate'te kod parçacıkları ile interaktiflik ekleme
- Özel HTML5 Bileşenleri oluşturma
- HTML5 Canvas'ta bileşenleri kullanma
- Özel Bileşenler oluşturma: Örnekler
- Özel Bileşenler için Kod Parçacıkları
- En iyi uygulamalar - Animate ile reklamcılık
- Sanal Gerçeklik içeriği oluşturma ve yayınlama
- Çalışma alanı ve iş akışı
- Boya fırçaları oluşturma ve yönetme
- HTML5 Canvas belgelerinde Google fontlarını kullanma
- Creative Cloud Libraries ve Adobe Animate'i Kullanma
- Animate için Sahne Alanı ve Araçlar panelini kullanma
- Animate iş akışı ve çalışma alanı
- HTML5 Canvas belgelerinde web fontlarını kullanma
- Zaman Çizelgeleri ve ActionScript
- Birden çok zaman çizelgesiyle çalışma
- Tercihleri ayarlama
- Animate geliştirme panellerini kullanma
- Animate ile zaman çizelgesi katmanları oluşturma
- Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma
- Nesneleri taşıma ve kopyalama
- Şablonlar
- Animate uygulamasında Bul ve Değiştir
- Geri alma, yineleme ve Geçmiş paneli
- Klavye kısayolları
- Animate'te zaman çizelgesini kullanma
- HTML uzantıları oluşturma
- Görüntüler ve Animasyonlu GIF'ler için en iyileştirme seçenekleri
- Görüntüler ve GIF'ler için dışa aktarma ayarları
- Animate'te Varlıklar Paneli
- Multimedya ve Video
- Animate'te grafik nesnelerini dönüştürme ve bir araya getirme
- Animate'te sembol örnekleri oluşturma ve bunlarla çalışma
- Görüntü İzleme
- Adobe Animate'te ses kullanımı
- SVG dosyalarını dışa aktarma
- Animate'te kullanmak üzere video dosyaları oluşturma
- Animate'te video ekleme
- Animate ile nesne çizme ve oluşturma
- Çizgileri ve şekilleri yeniden şekillendirme
- Animate CC ile konturlar, dolgular ve degradeler
- Adobe Premiere Pro ve After Effects ile çalışma
- Animate CC'de Renk Panelleri
- Flash CS6 dosyalarını Animate ile açma
- Animate'te klasik metin ile çalışma
- Animate'e resim yerleştirme
- Animate'te içe aktarılan bitmap'ler
- 3B grafikler
- Animate'te sembollerle çalışma
- Adobe Animate ile çizgiler ve şekiller çizme
- Animate'te kütüphaneler ile çalışma
- Sesleri dışa aktarma
- Animate CC'de nesne seçme
- Animate'te Illustrator AI dosyalarıyla çalışma
- Karışım modlarını uygulama
- Nesneleri düzenleme
- Komutlar menüsüyle görevleri otomatikleştirme
- Çok dilli metin
- Animate'te kamera kullanma
- Grafik filtreleri
- Ses ve ActionScript
- Çizim tercihleri
- Kalem aracı ile çizim yapma
- Platformlar
- Animate projelerini diğer belge türü biçimlerine dönüştürme
- Özel Platform Desteği
- Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama
- WebGL belgesi oluşturma ve yayınlama
- AIR for iOS için uygulamaları paketleme
- AIR for Android uygulamalarını yayınlama
- Adobe AIR for desktop için yayınlama
- ActionScript yayınlama ayarları
- En iyi uygulamalar - Bir uygulamada ActionScript'i organize etme
- Animate ile ActionScript'i kullanma
- Animate çalışma alanında erişilebilirlik
- Komut dosyaları yazma ve yönetme
- Özel Platformlar için Desteği Etkinleştirme
- Özel Platform Desteğine Genel Bakış
- Özel Platform Desteği Eklentisiyle Çalışma
- ActionScript 3.0'da hata ayıklama
- Özel Platformlar için Desteği Etkinleştirme
- Dışa Aktarma ve Yayınlama
- Animate CC'den dosya dışa aktarma
- OAM yayınlama
- SVG dosyalarını dışa aktarma
- Animate ile grafikleri ve videoları dışa aktarma
- AS3 belgelerini yayınlama
- Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma
- Sesleri dışa aktarma
- En iyi uygulamalar - Mobil aygıtlar için içerik oluşturma ipuçları
- En iyi uygulamalar - Video kuralları
- En iyi uygulamalar - SWF uygulaması geliştirme talimatları
- En iyi uygulamalar - FLA dosyalarını yapılandırma
- Animate için FLA dosyalarını en iyileştirmeye yönelik En İyi Uygulamalar
- ActionScript yayınlama ayarları
- Animate için yayınlama ayarları belirtme
- Projektör dosyalarını dışa aktarma
- Görüntü ve Animasyonlu GIF'leri dışa aktarma
- HTML yayınlama şablonları
- Adobe Premiere Pro ve After Effects ile çalışma
- Animasyonlarınızı hızlıca paylaşma ve yayımlama
- Sorun Giderme
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.
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.
-
-
İ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
-
Özellik Denetçisi'nde Yayınlama Ayarları'nı tıklatın.
-
Çıktı adı metin kutusuna bir ad yazın.
-
Format seçeneğinde GLB veya GLTF seçimini yapın.
-
Görüntü Çözünürlüğü metin kutusunda 1-3 aralığında bir ondalık sayı belirtin.
-
Dosya boyutunu azaltmak için JSON dosyasındaki byeaz boşlukları kaldır seçimini işaretleyin.
-
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.
-
Dosyayı yayımlamak için Yayınla düğmesini tıklatın.
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.
-
Özellikler'de Yayınlama Ayarları'nı tıklayın.
-
Çıktı adı metin kutusuna bir ad yazın.
-
Format seçeneğinde GLB veya GLTF seçimini yapın.
-
Görüntü Çözünürlüğü metin kutusunda 3 aralığında bir ondalık sayı belirtin.
-
Dosya boyutunu azaltmak için JSON dosyasındaki byeaz boşlukları kaldır seçimini işaretleyin.
Animate'te WebGL GLTF Dışa Aktarma kullanılarak, gelişmiş animasyonlar nasıl oluşturulur?
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:
- Animate uygulamasını başlatın.
- 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:
- 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.
İç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:
- 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.
- 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'teki 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 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:
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 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.
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.
İç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.
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.