HTML5 Canvas'ta bileşenleri kullanma

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.

Pencere > Bileşenler seçeneklerini belirleyin.

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. 

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.

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.

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. 

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.

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

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.

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. 

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. 

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ıklatın.