Kullanıcı Kılavuzu İptal

HTML5 Canvas'ta bileşenleri kullanma

Ara

Son güncelleme: 25 May 2023

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

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.

HTML5 Canvas
Pencere > Bileşenler seçeneklerini belirleyin.

Varsayılan Bileşenler
Bileşenler > Video seçeneklerini belirleyin. İlgili bileşenleri tuvale sürükleyip bırakın.
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
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.
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

Pencere > Bileşenler seçeneklerini belirleyin.
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.
Kod Parçacığı ekranında HTML5 Canvas > Bileşenler seçeneklerini belirleyin.

Varsayılan kod parçacıkları
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.

Sahne alanındaki video örneğini seçin ve Özellik denetçisinde Otomatik Oynat ayarını devre dışı bırakın.
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
İlk düğme örneğini seçin ve etiketi, Özellik Denetçisinde Oynat olarak değiştirin ve ikinci düğmeyi Duraklat olarak belirleyin.
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.
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
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
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
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.
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.

Windows'u tıklayın ve Bileşenler'i seçin.
Videolar klasörünü genişletin ve sahne alanındaki video simgesini tıklayıp sürükleyin..
Ö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:

ManageExtensions.exe dosyasını çift tıklatın. Uzantıları Yönet iletişim kutusu açılır.
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.
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.
Sağ üst köşedeki ayarlar simgesini ve Bileşenleri Yeniden Yükle seçeneğini tıklayın.