Kullanıcı Kılavuzu İptal

HTML5 Canvas'ta bileşenleri kullanma

  1. Adobe Animate Kullanıcı Kılavuzu
  2. Animate'e Giriş
    1. Animate'teki Yenilikler
    2. Resimli Sözlük
    3. Animate sistem gereksinimleri
    4. Animate klavye kısayolları
    5. Animate'te Birden Çok Dosya Türü İle Çalışma
  3. Animasyon
    1. Animate'te animasyonun temel öğeleri
    2. Animate'te kareleri ve anahtar kareleri kullanma
    3. Animate'te kare kare animasyonu
    4. Animate'te klasik ara animasyonu ile çalışma
    5. Fırça Aracı
    6. Hareket Kılavuzu
    7. Ara hareket ve ActionScript 3.0
    8. Ara Hareket Animasyonu Hakkında
    9. Ara hareket animasyonları
    10. Ara hareket animasyonu oluşturma
    11. Özellik anahtar karelerini kullanma
    12. Ara oluşturarak konuma animasyon ekleme
    13. Hareket Düzenleyici kullanarak ara hareketleri düzenleme
    14. Ara animasyonunun hareket yolunu düzenleme
    15. Ara hareketleri işleme
    16. Özel hareket hızları ekleme
    17. Hareket önayarları oluşturma ve uygulama
    18. Animasyon ara yayılma alanları ayarlama
    19. XML dosyaları olarak kaydedilen Ara hareketlerle çalışma
    20. Ara hareketler ve Klasik aralar karşılaştırması
    21. Şekil arası doldurma
    22. Animate'te Eklem aracı animasyonunu kullanma
    23. Animate'te karakter canlandırmayla çalışma
    24. Adobe Animate'te maske katmanlarını kullanma
    25. Animate'te sahneler ile çalışma
  4. Etkileşim
    1. Animate ile düğmeler oluşturma
    2. Animate projelerini diğer belge türü biçimlerine dönüştürme
    3. Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama
    4. Animate'te kod parçacıkları ile interaktiflik ekleme
    5. Özel HTML5 Bileşenleri oluşturma
    6. HTML5 Canvas'ta bileşenleri kullanma
    7. Özel Bileşenler oluşturma: Örnekler
    8. Özel Bileşenler için Kod Parçacıkları
    9. En iyi uygulamalar - Animate ile reklamcılık
    10. Sanal Gerçeklik içeriği oluşturma ve yayınlama
  5. Çalışma alanı ve iş akışı
    1. Boya fırçaları oluşturma ve yönetme
    2. HTML5 Canvas belgelerinde Google fontlarını kullanma
    3. Creative Cloud Libraries ve Adobe Animate'i Kullanma
    4. Animate için Sahne Alanı ve Araçlar panelini kullanma
    5. Animate iş akışı ve çalışma alanı
    6. HTML5 Canvas belgelerinde web fontlarını kullanma
    7. Zaman Çizelgeleri ve ActionScript
    8. Birden çok zaman çizelgesiyle çalışma
    9. Tercihleri ayarlama
    10. Animate geliştirme panellerini kullanma
    11. Animate ile zaman çizelgesi katmanları oluşturma
    12. Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma
    13. Nesneleri taşıma ve kopyalama
    14. Şablonlar
    15. Animate uygulamasında Bul ve Değiştir
    16. Geri alma, yineleme ve Geçmiş paneli
    17. Klavye kısayolları
    18. Animate'te zaman çizelgesini kullanma
    19. HTML uzantıları oluşturma
    20. Görüntüler ve Animasyonlu GIF'ler için en iyileştirme seçenekleri
    21. Görüntüler ve GIF'ler için dışa aktarma ayarları
    22. Animate'te Varlıklar Paneli
  6. Multimedya ve Video
    1. Animate'te grafik nesnelerini dönüştürme ve bir araya getirme
    2. Animate'te sembol örnekleri oluşturma ve bunlarla çalışma
    3. Görüntü İzleme
    4. Adobe Animate'te ses kullanımı
    5. SVG dosyalarını dışa aktarma
    6. Animate'te kullanmak üzere video dosyaları oluşturma
    7. Animate'te video ekleme
    8. Animate ile nesne çizme ve oluşturma
    9. Çizgileri ve şekilleri yeniden şekillendirme
    10. Animate CC ile konturlar, dolgular ve degradeler
    11. Adobe Premiere Pro ve After Effects ile çalışma
    12. Animate CC'de Renk Panelleri
    13. Flash CS6 dosyalarını Animate ile açma
    14. Animate'te klasik metin ile çalışma
    15. Animate'e resim yerleştirme
    16. Animate'te içe aktarılan bitmap'ler
    17. 3B grafikler
    18. Animate'te sembollerle çalışma
    19. Adobe Animate ile çizgiler ve şekiller çizme
    20. Animate'te kütüphaneler ile çalışma
    21. Sesleri dışa aktarma
    22. Animate CC'de nesne seçme
    23. Animate'te Illustrator AI dosyalarıyla çalışma
    24. Karışım modlarını uygulama
    25. Nesneleri düzenleme
    26. Komutlar menüsüyle görevleri otomatikleştirme
    27. Çok dilli metin
    28. Animate'te kamera kullanma
    29. Grafik filtreleri
    30. Ses ve ActionScript
    31. Çizim tercihleri
    32. Kalem aracı ile çizim yapma
  7. Platformlar
    1. Animate projelerini diğer belge türü biçimlerine dönüştürme
    2. Özel Platform Desteği
    3. Animate'te HTML5 Canvas belgeleri oluşturma ve yayımlama
    4. WebGL belgesi oluşturma ve yayınlama
    5. AIR for iOS için uygulamaları paketleme
    6. AIR for Android uygulamalarını yayınlama
    7. Adobe AIR for desktop için yayınlama
    8. ActionScript yayınlama ayarları
    9. En iyi uygulamalar - Bir uygulamada ActionScript'i organize etme
    10. Animate ile ActionScript'i kullanma
    11. Animate çalışma alanında erişilebilirlik
    12. Komut dosyaları yazma ve yönetme
    13. Özel Platformlar için Desteği Etkinleştirme
    14. Özel Platform Desteğine Genel Bakış
    15. Özel Platform Desteği Eklentisiyle Çalışma
    16. ActionScript 3.0'da hata ayıklama
    17. Özel Platformlar için Desteği Etkinleştirme
  8. Dışa Aktarma ve Yayınlama
    1. Animate CC'den dosya dışa aktarma
    2. OAM yayınlama
    3. SVG dosyalarını dışa aktarma
    4. Animate ile grafikleri ve videoları dışa aktarma
    5. AS3 belgelerini yayınlama
    6. Mobil uygulamalar ve oyun motorları için animasyonları dışa aktarma
    7. Sesleri dışa aktarma
    8. En iyi uygulamalar - Mobil aygıtlar için içerik oluşturma ipuçları
    9. En iyi uygulamalar - Video kuralları
    10. En iyi uygulamalar - SWF uygulaması geliştirme talimatları
    11. En iyi uygulamalar - FLA dosyalarını yapılandırma
    12. Animate için FLA dosyalarını en iyileştirmeye yönelik En İyi Uygulamalar
    13. ActionScript yayınlama ayarları
    14. Animate için yayınlama ayarları belirtme
    15. Projektör dosyalarını dışa aktarma
    16. Görüntü ve Animasyonlu GIF'leri dışa aktarma
    17. HTML yayınlama şablonları
    18. Adobe Premiere Pro ve After Effects ile çalışma
    19. Animasyonlarınızı hızlıca paylaşma ve yayımlama
  9. Sorun Giderme
    1. Düzeltilen sorunlar
    2. Bilinen sorunlar

 

Özelleştirilebilir bileşenler kullanmayla ilgili daha fazla bilgi edinmek için bu makaleden yararlanın.

Bileşen, bir işlev veya reklam oluşturucular için üretkenliği geliştiren yeniden kullanabilir ve özelleştirebilir bir bileşen grubu sağlar. Önceden Animate, flash tabanlı hedeflerle kullanılan flash bileşenlerini desteklerdi. Bu sürümden itibaren Animate, HTML5 Canvas'ı desteklemektedir. 

  1. Dosya > Yeni'yi seçin.

    Yeni Belge iletişim kutusunda ekranın sağ üst kısmındaki sekmelerden Gelişmiş'i seçin ve ardından HTML5 Canvas seçeneğini belirleyin.

    Yeni Belge
    HTML5 Canvas

  2. Pencere > Bileşenler seçeneklerini belirleyin.

    Varsayılan Bileşenler

  3. Bileşenler > Video seçeneklerini belirleyin. İlgili bileşenleri tuvale sürükleyip bırakın. 

  4. Sahne alanındaki Video bileşen Örneğini seçin ve Özellik Denetçisi içinde parametreleri görüntüleyin ve değiştirin. Kaynak parametresi, yerel bir konumdan video dosyası seçmenize veya videoyu oynatmak için herhangi bir URL sağlamanıza (mp4, ogg, ogv ya da webm biçimleri) olanak tanır. 

    Bileşenleri sürükleyip bırakma

  5. Giriş video boyutlarını eşleştirmek üzere video oynatıcıyı yeniden boyutlandırmak için "kaynak boyutlarıyla eşleştir" seçeneğini belirleyin. Bu özellik, yalnızca mp4 videolar için işe yarar. Diğer video türleri için, en boy oranının aynı kalmasını sağlamak üzere sahne alanındaki video örneğini elle yeniden boyutlandırın.

  6. Filmi önizlemek için Ctrl + Enter (MAC için Cmd + Enter) tuşlarına basın. Video, varsayılan tarayıcınızda oynatılır. Kontroller varsayılan olarak görünür olduğundan bir tarayıcı içinde videonun üzerine geldiğinizde kontrolleri görüntüleyebilirsiniz.

    Diğer bileşenleri kullanmak için de aynı işlemden yararlanabilirsiniz.

    Bileşen çıktısını önizleme

 Bileşenler HTML belgesine DOM öğeleri olarak eklendiğinden Bileşenlere etkileşim eklemek için Bileşen kod parçacıklarına bakın (Kod Parçacıkları > HTML5 Canvas > Bileşenler).

Kod parçacıklarını kullanarak bileşenlere etkileşim ekleme

  1. Pencere > Bileşenler seçeneklerini belirleyin.

  2. Bileşenlere etkileşim eklemek için Pencere > Kod parçacıkları panelini seçin. Çeşitli kullanılabilir bileşen davranışları eşlemesini görüntüleyebilirsiniz.

  3. Kod Parçacığı ekranında HTML5 Canvas > Bileşenler seçeneklerini belirleyin.

    Varsayılan kod parçacıkları

  4. Seçtiğiniz bileşene bağlı olarak, parçacığı Eylemler panelinde görüntülemek için karşılık gelen kod parçacığını çift tıklatın. Kod parçacıklarına etkileşim ekleme ile ilgili daha fazla bilgi için bkz. Animate'te kod parçacıkları ile etkileşim ekleme

Örnek

Video oynatma işleminin kod aracılığıyla kontrol edildiği durumlarda kod parçacıklarının nasıl kullanılacağını öğrenmek için aşağıdaki örnekten yararlanın.

  1. Sahne alanındaki video örneğini seçin ve Özellik denetçisinde Otomatik Oynat ayarını devre dışı bırakın. 

  2. Sahne alanında iki örnek oluşturmak için Bileşenler panelinde Düğme bileşenini çift tıklatın ve düğmeleri yerleştirin. Ayrıca bu düğmeleri, doğrudan bileşenler panelinden sahne alanına sürükleyip bırakabilirsiniz.

    Düğmeleri yerleştirme

  3. İlk düğme örneğini seçin ve etiketi, Özellik Denetçisinde Oynat olarak değiştirin ve ikinci düğmeyi Duraklat olarak belirleyin. 

  4. Pencere > Kod Parçacıkları seçeneklerini tıklatarak Kod Parçacıkları Paneli'ni açın. HTML5 Canvas > Bileşenler seçeneklerine gidin ve Kullanıcı Arabirimi Bölümü'nü genişletin. 

  5. Sahne alanında Oynat düğmesini seçin, Kod Parçacıkları Paneli'nde Düğme Tıklatma Olayı'nı çift tıklatın ve Tamam'ı tıklatın. Animate, örnek adını seçili düğmeye atar. Yeni eklenen kodu Eylemler panelinde görüntüleyebilirsiniz.

    Kod parçacıkları ekleme

  6. Sahne alanında Video'yu seçin ve Kod parçacıklarında Video bölümünü genişletin. Video Oynat'ı çift tıklatın. Videoyu oynatmak için gereken kod, Eylemler paneline eklenir.

    Eylemler paneline eklenen kod

  7. Düğme tıklatıldığında videonun oynaması için kodu <Start your custom code> ile <End your custom code> bölümü arasına taşıyın. 

    Etiketlerin içindeki kodu taşıma

  8. Videoyu duraklatmak için bir kod eklemek üzere duraklat düğmesini seçin, yeni düğme tıklatma işleyicisini atayın ve video duraklatma kodunu ekleyin.

  9. Filmi önizleyin. Videoyu oynatmak için Oynat düğmesini, duraklatmak için ise Duraklat düğmesini tıklatın. 

 Özellik Denetçisi'nde her bir bileşen için className niteliğini görüntüleyebilirsiniz. CSS kullanarak bileşenleri kaplamak için bu sınıf adlarını kullanın. Özel CSS'nizi yüklemek için CSS bileşenini kullanın. CSS bileşeni, filme dahil olan herhangi bir yerel CSS dosyasını seçmenize olanak tanır.

İlgi çekici HTML5 bileşenleri

İçeriğinize etkileşim eklemek ilgi çekicidir ve HTML 5 bileşenleriyle kullanılan birçok özellik içerir. Bu HTML5 bileşenlerinin Animate'te nasıl kullanılacağını öğrenmek ister misiniz? Bu örneğin sonundaki eğitimi izleyin ve ilgili adımları takip edin.

  1. Windows'u tıklayın ve Bileşenler'i seçin.

  2. Videolar klasörünü genişletin ve sahne alanındaki video simgesini tıklayıp sürükleyin..

  3. Özellikler'de Konumlar ve Boyut sekmesini genişletip gerekli değerleri ayarlayın.

HTML5 bileşenlerini kullanarak animasyon kompozisyonlarınızı geliştirme

Kompozisyonunuza nasıl daha fazla bileşen ekleyeceğinizi öğrenmek için videoyu izleyin.

Dağıtılan bileşenleri yükleme

Animate tasarımcıları veya geliştiricileri, Uzantıları Yönet yardımcı programını kullanarak, dağıtılan ZXP dosyası bileşenini yükleyebilir. Daha fazla bilgi için bkz. Uzantıları yükleme.

Ön koşul

Bileşenleri yükleme

Dağıtılan bileşenleri yüklemek için şu adımları uygulayabilirsiniz: 

  1. ManageExtensions.exe dosyasını çift tıklatın. Uzantıları Yönet iletişim kutusu açılır.

  2. Uzantı Yükle seçeneğini tıklatın ve yüklemek istediğiniz uzantıyı (.zxp dosyası) belirleyin. Daha fazla bilgi için bkz. Uzantıları yükleme.

  3. Animate'te yüklenen bileşeni görüntülemek için şu seçenekleri tıklatın: Pencere > Bileşen. Bileşenler açılır iletişim kutusu görünür. 

  4. Sağ üst köşedeki ayarlar simgesini ve Bileşenleri Yeniden Yükle seçeneğini tıklayın.

 Adobe

Daha hızlı ve daha kolay yardım alın

Yeni kullanıcı mısınız?

Adobe MAX 2024

Adobe MAX
Yaratıcılık Konferansı

14–16 Ekim Miami Beach ve çevrimiçi

Adobe MAX

Yaratıcılık Konferansı

14–16 Ekim Miami Beach ve çevrimiçi

Adobe MAX 2024

Adobe MAX
Yaratıcılık Konferansı

14–16 Ekim Miami Beach ve çevrimiçi

Adobe MAX

Yaratıcılık Konferansı

14–16 Ekim Miami Beach ve çevrimiçi