木疙瘩應用 - 關於如何跳轉到某一頁的某一幀

現今，隨著H5動畫越來越成為富媒體傳播的主要手段，圍繞著H5動畫設計製作的各種雲平台也愈來愈專業。 今天我們重點來介紹木疙瘩雲平台中的一個小技巧 — 如何結合代碼，巧妙的控制跨頁的幀數跳轉！

什麼叫做跨頁的幀數跳轉？

我們簡單來普及一下「頁」和「幀」的區別!

學習過木疙瘩的同學都知道，「頁」是使用木疙瘩雲平台在製作H5動畫時的基礎概念，相當於FLASH中的場景。 當一個場景中的動畫內容播放完畢，可以通過木疙瘩雲平台預設的過渡方式，自動跳轉到第二個場景中進行動畫播放。而由該平台製作完成的H5動畫，大多數情況下是由多個場景（頁）組成，用來敘述動畫的故事（段落）內容。 這就是頁。

如果說，「頁」代表一個動畫故事的其中一個段落，那麼「幀」就代表這個段落中的每一個時間節點。我們可以認為是這一段動畫中的每一個點點滴滴，都是由「幀」這個單位進行記錄的。 在木疙瘩雲平台中，「幀」就是最小的時間單位。

那麼，回到主題。 跳轉到某一頁的某一幀，就好比是我們在看某一集動畫片的時候，突然想看前一集的某一個精彩部分。這個時候我只要通過點擊一個按鈕，就可以回到我想讓他去的某一個點上。 這豈不是很方便！？

那我們怎麼來做呢？

我帶大家一起來做一個案例，通過案例步驟的解析，帶大家來了解這種方式如何實現！

先呈上案例預覽地址：

http://8bcf13d0.u.mgd5.com/campaigns/578846528e28cdb85e8b4619/20160929035949/579ef178a34834277d000dfe/index.html

好吧，既然時下是一個小鮮肉橫行的世界，那麼我們姑且就借用當紅炸子雞，韓國 BigBang 組合來完成我們的案例。 在製作的同時，也大可讓腐妹們的內心默默的泛起漣漪。

那麼如果看完了動畫，我們快速進入主題。在這個案例中，我們能看到：當我們進入到小鮮肉的幻燈片播放頁面時，一邊留著口水看完，一邊點擊右下角的「BACK」按鈕，我們又回到了封面頁，可是這裡要拋出的問題是：

我們回到了封面的第一幀了嗎？

不，請仔細看，我們其實回到了封面頁的最後一幀！

那為什麼一定要回到最後一幀？

因為， 如果不這樣做，如果我們回到了頁面的第一幀，那麼，豈不是每點擊一次「BACK」，就必須要把第一頁的整段動畫從頭至尾看一遍？

好，點擊一次，看一遍。點擊兩次，看兩遍！ 點擊三次，看三遍！ 點擊四次 …… 我覺得，這個時候怎樣的吐槽都無法形容我的無奈了！ 小鮮肉再美麗也無法按捺住要關閉的衝動。

那麼我們換一個思路。如果我們每點擊一次「BACK」，都可以把那段該死的動畫給省略掉，豈不是就完美了？ 帶著這個思路，我們進入案例的製作。

首先我們來進行封面頁面的製作。

1. 將圖層一名稱改為「BG」，並從素材庫里找到封面的圖片，將其置入到場景中，匹配場景的大小進行調整。 （所有素材圖片，隨本案例奉送，腐妹們歡呼吧！）

2. 新建一層，改名為「半透明」。然後用適量工具繪製一個比背景圖略大一些，透明度為60%的黑色矩形，並將它移動到圖片的底端。（思路：為什麼要這樣做？ 很簡單，我希望通過對封面圖片做一個手指向上滑動的動作，然後半透明的黑色矩形，就可以「PIU」一下飛上來改在圖片上，多麼狂拽炫酷吊炸天！）

3. 基於以上的思路，我們要考慮的點是：

a. 手指沒有做向上滑動的時候，動畫能不能播放？

b. 手指向上滑動以後，還能允許翻頁嗎？

c. 手指向上滑動以後，怎麼做動畫播放？

答a：手指沒有向上滑動的時候，肯定不播放動畫啊！ 所以，我們需要新建一層，命名為「行為」，然後我們選中新建的層，在第一幀話一個隨便什麼形狀。對，隨便，愛什麼形狀都行，但是必須放在場景外！ 然後，我們給當前的圖形加上行為「暫停」！

不會加的同學，請去查看木疙瘩的基礎教程，並請自動忽略以下所有步驟！^_^

答b：手指向上滑動是木疙瘩內默認的翻頁手勢，但是我們現在只需要半透明的黑色矩形飛上來，不需要翻頁，所以，我們再給剛剛畫好的圖形加一道命令「禁止翻頁」！

加完以後，基本上應該長成右圖那樣！

答c：怎麼讓半透明的黑色矩形飛上來呢？ 很簡單，我們在該層第一幀到第十幀之間做一個關鍵幀動畫。然後只需要在第十幀上挪動黑色半透明的矩形，讓它覆蓋在封面圖片上即可。 這樣就完成了一個半透明黑色矩形從底部飛到頂部（用時十幀）的動畫。 我們為了效果的完美，請選擇該層的第一幀，把右側屬性欄的運動模式改為「阻尼退出」。預覽一下，是否完美到爆！？

註：這裡要特別注意的是，行為層上，千萬千萬不能出現延時幀。 不然你會發現手指怎麼向上滑動，動畫都會很卡，黑色矩形飛不上去。那是因為如果有延時幀，暫停行為就會對每個延時幀都生效，試想一下，每一幀都有暫停，是個多麼美的畫面！

4. 接下來我們來做一件開心的事情。 我們從素材庫里找到5位當紅小鮮肉的封面圖，然後按照下圖的形式排列出來。 當然，除了GD權志龍是隊長，必須放在頂部，其他4位成員，你們想怎麼排都可以！ 需要注意的是，分別給每位隊員的封面圖，放置在單獨的一個層上。 然後給每一層做一個透明度由0% — 100% 的錯幀動畫，讓他們依次出現就行。

5. 好啦，第一頁我們就做到這兒，接下來我們新建一個頁面，在第二頁上，製作隊長GD的幻燈片。 我準備了6張GD的大片圖，各種風格都有，腐妹們根據喜好，放置到幻燈片里就行。

搞定後，記得千萬要預覽一下，看看幻燈片組件里的6張美圖是否能輪播的很完美。順便吞一口口水，然後思考一下： 到了這一頁以後，我們是否需要通過點擊一個按鈕，回到前一頁？ 只有這樣，我才能選擇其他4位成員，去看他們的美圖不是嗎？

6. 基於以上思路，我們需要製作一個按鈕。 這個就很簡單了，新建一層，畫一個圓形，然後用文字工具寫「BACK」，並把圓形和文字層編組。然後給它加一個由右側外進入場景右下角的關鍵幀動畫（十幀足夠）就可以。 做完後，應該是長成右圖那樣！

為什麼要放在右下角？

很簡單，最終播放的硬體一定是手機，那右下角就一定是你的右手大拇指最容易操作的位置，不是嗎？不是嗎？不是嗎？

7. 好了，接下來我們要做非常重要的一步。也就是，當我們點擊這個「BACK」按鈕的時候，我需要動畫能跳轉到封面頁。 請仔細想想， 這個時候到底是要跳轉到封面的起始幀（再看一遍動畫），還是封面頁的最後幀（5美男圖片都已經陳列出來了）？

好吧，如果是我的話，我一定寧願省略掉中間重複播放的動畫，看多了會煩躁，會煩躁，會煩躁！！

那麼，如果是希望實現跳轉到第一頁的最後一幀，該怎麼做呢？ 給「BACK」按鈕加上行為「跳轉到頁」，能實現嗎？答案是「一定辦不到！」這個時候，我們就需要結合代碼來實現跳轉到某一頁的某一幀了！

代碼? 那是什麼？ 我不認識它！

對，是代碼，但是不要怕怕！ 我給你們準備好了。 我們來看一下：

window.gotoPage= function(){

mugeda.scene.gotoAndPause(50,1);

}

好了，我們不用管這是什麼，我們只要會複製粘貼就行！ 我們要做的事情就是，認識它一下，打個招呼（嘿，你好！）然後複製粘貼就可以！

那麼我們需要認識些什麼？ 仔細聽好！

第一行里的 gotoPage，是這段代碼的名字，好比它叫老王一樣！

第二行最後面的括弧里，50代表的是幀數，1代表的是頁數！

其他的，請自動忽略，請自動忽略，請自動忽略！

我已經認識它了，那然後呢？

如果已經認識它了，接下來就是怎麼來應用了。 我們先把整一段代碼複製下來。 記住，是複製全部，請不要忘記第三行的花括弧！

然後，我們點擊菜單右側第三項「視圖」，在下拉菜單內，點擊「腳本」命令！這個時候會彈出一個腳本框，我們把代碼複製到框框里！然後關了它就行了，不看不煩人！

好了，代碼就先用成醬紫！ 我們可以不用理腳本框了。 我們再下來要做得事情，就是讓這段代碼產生作用！

8. 我們先來思考一下，我們的動畫流程，是否是在幻燈片頁面看完後，點擊按鈕回到封面頁的最後一幀？

是的，一定是醬紫沒錯！

那麼，關鍵一定是這個「BACK」按鈕被賦予了神奇的能力。

好了，我們選擇「BACK」按鈕，點擊行為小按鈕，在彈出的行為窗口內，選擇屬性控制—回調函數！

還記得代碼的名稱gotoPage嗎？點擊回調函數命令後面的小鉛筆，然後一定要一點不差的複製到函數名稱欄里！ 一定要注意大小寫，不要出現多餘的東西，不要寫錯任何字母，切記！ 切記！ 切記！

9. 喘口氣，剩下的操作不多了！

還記得第二行最後括弧里的內容嗎？(50,1)，50代表幀數，1代表頁數！

我們是否只要調整這些數字就行了？ YEE，完全正確！

但是 ……

代碼的世界和我們的認知，有一點點的不一樣。 我們用代碼數數，並不是單純的1,2,3,4,5 ……

代碼是從0開始數數的，也就是 0,1,2,3,4 ……

所以，我們廣義上認知的第1頁，對於代碼而言，其實是第0頁。

那麼，括弧里的數字，代碼世界中的幀數50，其實就是廣義認知中的第51幀，代碼世界中的第1頁，其實就是廣義認知中的第2頁，以此類推 ……

如果還是聽不懂，那麼我就記住，如果我希望可以跳轉到廣義認知中的第1頁里的第40幀，那麼我們轉換到代碼世界中，就是第（1-1）頁中第（40-1）幀，那就可以了！

好了，下圖是封面頁的完整時間軸。封面頁是廣義認知中的第1頁； 現在我需要點擊「BACK」按鈕後，能跳轉到第1頁的第40幀，該怎麼跳幀數字呢？

我們可以這樣做，數字改成（40-1）幀，（1-1）頁，是否就能成功切換到代碼世界了？ 換句話說，幀為39，頁為0，把數字替換成他們就行了！ 一定要做減法哦！切記！

另外需要注意的是，回到某一頁的某一幀，這個幀只允許是關鍵幀哦，千萬不能跳轉到延時幀上，不然是無效的！

10.現在，去好好檢查一下是否已經實現了跳轉到封面頁的最後一幀了？如果是，恭喜你，最重要的步驟我們都做完了！

接下來還剩什麼？ 還有，但是很簡單了 ……

a. 請把幻燈片複製4個頁面出來。

b. 請把每一個幻燈片里的圖片換掉。比如，第3頁換成勝利的6張美圖，第4頁換成T.O.P的6張美圖，以此類推！

c. 請回到封面頁，給每位成員的照片都加上行為「跳轉到頁」，醬紫就能做到點擊勝利的照片，跳轉到勝利的幻燈片頁，點擊大成的照片，跳轉到大成的幻燈片頁啦！

d. 請仔細檢查每一頁是否都能夠跳轉到封面頁的最後一幀！

e. 好好欣賞，好好欣賞，好好欣賞！

好啦，接下來就沒有啦！ 整個案例做完了，那麼是否會結合代碼，製作跳轉到某一頁的某一幀了呢？如果已經做完了，那麼本次案例就到此結束了，做個好夢，夢裡有小鮮肉，886！

本文純屬學習交流，部分圖片來源於網路，如有侵犯請及時與本人聯繫，謝謝！

火星時代 沈老師

2017/2/1