摘要：說(shuō)明在以下開(kāi)始您的自定義代碼行后的新行上添加您的自定義代碼。單擊此元件實(shí)例時(shí)，此代碼將執(zhí)行。開(kāi)始您的自定義代碼此示例代碼在輸出面板中顯示已單擊鼠標(biāo)。

結(jié)合之前的兩篇解析

微信內(nèi)嵌視頻1（案例淺析）
https://segmentfault.com/a/11...
從AnimateCC到CreateJS入門(mén)
https://segmentfault.com/a/11...

這次是一篇createjs完成UI 結(jié)合內(nèi)聯(lián)視頻實(shí)現(xiàn)的一個(gè)demo

因?yàn)橥嗽刂匪源蠹抑荒茏约合耫emo跑一下簡(jiǎn)單的效果了

需要簡(jiǎn)單搭建一個(gè)服務(wù)器來(lái)跑不然createjs對(duì)圖片資源引用

稍微解析一下總結(jié)實(shí)現(xiàn)思路

主要是由兩個(gè)標(biāo)簽實(shí)現(xiàn)

video標(biāo)簽實(shí)現(xiàn)在手機(jī)端內(nèi)嵌視頻播放

canvas標(biāo)簽控制ui層，以及在對(duì)UI進(jìn)行交互時(shí)，對(duì)視頻進(jìn)行操作

首先將fla文件導(dǎo)出成代碼

生成的代碼如下：

與上次不同的是 本次發(fā)布的代碼多了一段自適應(yīng)屏幕尺寸的代碼，這是animateCC2017的新功能

在發(fā)布設(shè)置中

勾選以上內(nèi)容，animateCC會(huì)生成自適應(yīng)手機(jī)寬高的 頁(yè)面
ok那么進(jìn)入正題，需要實(shí)現(xiàn)動(dòng)畫(huà)和視頻的交互，需要在animate的幀中觸發(fā)一些事件
需要使用到一個(gè)createJs的類(lèi)
EventDispatcher管理隊(duì)列的事件偵聽(tīng)器和事件分發(fā)提供了方法。

var model = new createjs.EventDispatcher();

new 一個(gè)實(shí)例然后

model.addEventListener("videoPlay1", function () {
    Loop(video, 0)
})

監(jiān)聽(tīng)某觸發(fā)的事件
然后用animateCC打開(kāi)fla文件

打開(kāi)page1

可以看到在時(shí)間軸上我已經(jīng)加了一些代碼片段

右鍵對(duì)應(yīng)的幀選擇動(dòng)作

/* Mouse Click 事件
單擊此指定的元件實(shí)例會(huì)執(zhí)行您可在其中添加自己的自定義代碼的函數(shù)。

說(shuō)明:
1. 在以下"http:// 開(kāi)始您的自定義代碼"行后的新行上添加您的自定義代碼。
單擊此元件實(shí)例時(shí)，此代碼將執(zhí)行。
*/

this.enter_btn.addEventListener("click", fl_MouseClickHandler.bind(this));

function fl_MouseClickHandler()
{
    // 開(kāi)始您的自定義代碼
    // 此示例代碼在"輸出"面板中顯示"已單擊鼠標(biāo)"。
    console.log(111)
    this.gotoAndPlay(20);
    if(model)model.dispatchEvent("videoPlay1");
    // 結(jié)束您的自定義代碼
}

在彈窗的動(dòng)作窗口中 看到已有的代碼
這代碼需要解釋一下
enter_btn這個(gè)變量需要自己對(duì)某個(gè)元素進(jìn)行命名，這里才能調(diào)用到

點(diǎn)擊此元素

這個(gè)命名需要在該元素第一次出現(xiàn)在時(shí)間軸上的那一幀就命名，否則有可能出現(xiàn)無(wú)法調(diào)用的情況。

那么上面那段代碼就是點(diǎn)擊 此按鈕，跳轉(zhuǎn)到第20幀，并觸發(fā)"videoPlay1"事件
而我們用剛剛new的時(shí)間監(jiān)聽(tīng)的model類(lèi)在外部的js監(jiān)聽(tīng)了這個(gè)事件，就可以在對(duì)應(yīng)的地方對(duì)視頻進(jìn)行操作了

function Loop(obj, index) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    obj.play();
    obj.timer = setInterval(function () {
        var t = obj.currentTime;
        //視頻循環(huán)時(shí)間點(diǎn)
        if (Math.abs(t - videoTimeArr[3 * index + 1]) <= .1) {
            obj.currentTime = videoTimeArr[3 * index];
            // obj.play();
            // clearInterval(obj.timer);
        }
        //動(dòng)畫(huà)播放時(shí)間點(diǎn)
        if (Math.abs(t - videoTimeArr[3 * index + 2]) <= .1) {
            playAnimate(index);
        }
    }, 20);
}

將視頻對(duì)象傳入，并開(kāi)啟一個(gè)定時(shí)器，判斷視頻進(jìn)度是否達(dá)到我們需要的循環(huán)點(diǎn)，如果到了則回到初始點(diǎn)循環(huán)播放
后面還有一個(gè)地方，有個(gè)返回按鈕，而按鈕也有對(duì)應(yīng)的返回的視頻片段，在點(diǎn)擊返回時(shí)播放對(duì)應(yīng)視頻片段，并回到目標(biāo)時(shí)間點(diǎn)

function unloop(obj, index) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    obj.currentTime = videoBackwardTimeArr[3 * index];
    obj.play();
    obj.timer = setInterval(function () {
        var t = obj.currentTime;
        if (Math.abs(t - videoBackwardTimeArr[3 * index + 1]) <= .1) {
            obj.currentTime = videoBackwardTimeArr[3 * index + 2];
            obj.play();
            Loop(obj, 0)
            var view = stage.children[0].view;
            view.gotoAndStop(29)
        }
    }, 20);
}

下面附demo代碼，謝謝

鏈接: http://pan.baidu.com/s/1mijrS7Y 密碼: pth1