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

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

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

Not:

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.

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

    Component_example_7
    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 CC, örnek adını seçili düğmeye atar. Yeni eklenen kodu Eylemler panelinde görüntüleyebilirsiniz.

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

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

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

Not:

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

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.

Ön koşul

Uzantıları Yönet yardımcı programı. Talimatları indirmek için Animate CC ürününüzde Yardım > Uzantıları Yönet seçeneklerini tıklatın.

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.

    ManageExtensions
  2. Uzantı Yükle seçeneğini tıklatın ve yüklemek istediğiniz uzantıyı (.zxp dosyası) belirleyin.

  3. Animate CC'de 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ıklatın.

    reloading-components

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