可視化H5頁面與交互動畫設計製作 木疙瘩標準教程

本書是根據教育部職業技能等級認證考核的要求，為了滿足“融媒體內容製作”1+X職業技能等級證書考核認證的教學和培訓需求，以及各類企業、高校關於融媒體技術與應用人才培養的需要編寫的。本書結合實際應用案例，以任務為驅動，由淺到深、由簡單到復雜地組織內容。技術上，以木疙瘩為平臺，系統地介紹了可視化H5頁面與交互動畫的設計思路、設計方法與實現技術。

本書內容涵蓋了1+X職業技能等級證書的初級和中級標準的全部內容，以及高級標準的部分內容。全書共7章，主要內容包括移動通信、信息傳播與H5，木疙瘩平臺與專業版H5編輯器的基本操作與管理，H5頁面製作基礎，行為、觸發條件與交互，幀動畫設計、製作與應用，特型動畫，以及關聯動畫。附錄部分介紹了實用工具及控件的基本操作與使用。

本書為木疙瘩官方標準教程，內容全面、案例豐富，具有很強的可讀性和實用性，適用於“融媒體內容製作”1+X職業技能等級證書考核認證的教學與培訓，還適合作為學校相關專業和各類H5培訓班的教材，也可作為新媒體從業人員自學H5頁面設計與製作的參考書。

彭澎，教授，硕士研究生导师，“设计数学”硕士专业创建者，教育管理信息中心特聘专家，出版教材、专著40余部，2016年提出开创融媒体专业，并组建团队研究和建设融媒体核心课程。

姜旭，北京信息职业技术学院数字艺术学院院长，中国出版协会装帧艺术工作委员会委员，长期从事教学研究及平面设计工作，主讲“版式设计”“包装设计”“艺术插图设计”等多门专业课程，设计书籍装帧设计作品百余件。

001　第１章　移動通信、信息傳播與H5

002　1.1　移動通信技術概述

002　1.1.1　通信與移動通信

002　1.1.2　移動通信的發展階段

003　1.1.3　移動通信的優勢及應解決的關鍵問題

004　1.2　信息內容與信息傳播

004　1.2.1　信息內容及其表達形式

005　1.2.2　信息傳播

006　1.3　融媒體、H5與交互動畫

006　1.3.1　融媒體

006　1.3.2　H5

008　1.3.3　交互動畫

008　1.4　H5製作平臺與H5案例體驗

008　1.4.1　可視化H5製作平臺

008　1.4.2　H5案例體驗

009　1.5　H5頁面設計的基本原則與規範

009　1.5.1　H5頁面設計的基本原則

012　1.5.2　H5頁面設計的基本規範

013　1.6　【基礎學習任務】瞭解H5頁面設計的基本流程

013　1.6.1　策劃與頁面設計

014　1.6.2　設計案例介紹

016　1.6.3　素材收集與整理

018　第 2章　木疙瘩平臺與專業版H5編輯器的基本操作與管理

019　2.1　【基礎學習任務】木疙瘩基本操作與管理

019　2.1.1　註冊、登錄與退出木疙瘩操作

021　2.1.2　新建作品與作品文件管理操作

026　2.1.3　模板管理與素材管理操作

027　2.1.4　班級管理與作品分享操作

029　2.2　【基礎學習任務】專業版H5編輯器界面及其操作

029　2.2.1　菜單欄

034　2.2.2　工具欄

036　2.2.3　頁面欄、頁面編輯區和舞臺

038　2.2.4　工具箱

043　2.2.5　屬性面板

045　2.2.6　時間軸和圖層

046　第3章　H5頁面製作基礎

047　3.1　【技能型任務】圖文公益廣告“為夢想起航”

047　3.1.1　規劃與設計

047　3.1.2　任務製作

053　3.2　【技能型任務】長圖新聞故事“節日里的城市守護者”

053　3.2.1　規劃與設計

053　3.2.2　任務製作

058　3.3　【技能型任務】繪圖交互宣傳廣告“我的家鄉邀請你”

059　3.3.1　規劃與設計

059　3.3.2　任務製作

066　3.4　任務訓練

068　第4章　行為、觸發條件與交互

069　4.1　【基礎學習任務】瞭解行為與觸發條件的作用

069　4.1.1　“醒一醒”交互動畫作品的解析

070　4.1.2　行為與觸發條件在交互設計中的作用

072　4.2　【基礎學習任務】交互控制基本原理及圖層和幀的操作

072　4.2.1　圖層及基本操作

073　4.2.2　幀的基本類型

074　4.2.3　幀的基本操作

075　4.2.4　交互控制基本原理

076　4.3　【技能型任務】屬性控制交互——“安全駕駛”公益廣告

076　4.3.1　規劃與設計

077　4.3.2　任務製作

082　4.4　【技能型任務】頁行為交互——“昆明老街與重慶市井”影集

083　4.4.1　規劃與設計

083　4.4.2　任務製作

085　4.5　【技能型任務】幀行為交互——“看圖猜成語”游戲

085　4.5.1　規劃與設計

086　4.5.2　任務製作

089　4.6　【技能型任務】限時拼圖交互——“電影洗印設備拼圖”游戲

089　4.6.1　規劃與設計

090　4.6.2　任務製作

094　4.7　任務訓練

095　第5章　幀動畫設計、製作與應用

096　5.1　【技能型任務】幀動畫的基本製作——“油菜花節”宣傳廣告

096　5.1.1　規劃與設計

096　5.1.2　任務製作

098　5.2　【技能型任務】交互幀動畫製作——“把精彩留給自己”公益廣告

099　5.2.1　完成3個頁面的基本製作

102　5.2.2　控制賽車的運動速度：插入、刪除幀的操作

102　5.2.3　幀動畫重復播放設置：復制、移動幀的操作

103　5.3　【技能型任務】運動鏡頭幀動畫製作——“中國電影博物館”宣傳介紹

104　5.3.1　規劃與設計

104　5.3.2　任務製作

107　5.4　【技能型任務】逐幀動畫“倒霉的貓”

108　5.4.1　規劃與設計

109　5.4.2　任務製作

111　5.5　【技能型任務】逐幀交互動畫“風景如畫”

112　5.5.1　規劃與設計

112　5.5.2　任務製作

113　5.5.3　循環交互效果逐幀動畫設計與製作

114　5.6　任務訓練

116　第6章　特型動畫

117　6.1　【技能型任務】製作基本特型動畫

117　6.1.1　進度動畫——“節約用水”公益廣告

118　6.1.2　路徑動畫——“UFO來了”動畫

121　6.1.3　變形動畫——“企業標志轉換為產品”動畫

123　6.1.4　遮罩動畫——“春節快樂”音樂賀卡

126　6.2　【技能型任務】交互動畫——“走進雲南”旅游宣傳

126　6.2.1　規劃與設計

127　6.2.2　任務製作

130　6.3　【技能型任務】元件、元件動畫設計與製作

131　6.3.1　元件動畫製作與調用——“C919大飛機介紹”動畫

135　6.3.2　元件交互動畫製作與播放控制——“新龜兔賽跑”動畫

140　6.4　【技能型任務】交互游戲——“雙、單按鈕控制轎車行駛”游戲

141　6.4.1　“雙按鈕控制轎車行駛”的規劃與設計

141　6.4.2　“雙按鈕控制轎車行駛”的任務製作

145　6.4.3　“單按鈕控制動畫播放與暫停”的設計與製作

147　6.5　【技能型任務】自定義預置動畫——“物體自動上升擺動”動畫

147　6.5.1　任務製作

148　6.5.2　自定義預置動畫的使用

148　6.6　任務訓練

149　第7章　關聯動畫

150　7.1　【基礎學習任務】關聯的概念及基本操作

150　7.1.1　認識關聯

150　7.1.2　“矩形與圓形互動”關聯製作

152　7.2　【技能型任務】舞臺關聯動畫—“觀國寶”動畫

152　7.2.1　規劃與設計

153　7.2.2　任務製作

154　7.3　【技能型任務】遮罩關聯動畫—“定位”動畫

154　7.3.1　規劃與設計

155　7.3.2　任務製作

157　7.4　【技能型任務】元件關聯動畫—“射擊”游戲

157　7.4.1　規劃與設計

158　7.4.2　任務製作

162　7.5　任務訓練

164　附錄　實用工具及控件的基本操作與使用

165　附錄A　微信定製工具—定製微信頭像、昵稱和圖片

166　附錄B　表單工具—“城市人口愛好”調查表

169　附錄C　數據統計—查看作品發布後的瀏覽次數等數據

170　附錄D　編輯表單工具—製作個人聯系方式表單

171　附錄E　預置考題工具—製作電腦基礎練習試捲

175　附錄F　陀螺儀控件—左右搖擺的孔明燈

177　附錄G　點贊控件—為你更喜歡的車點贊

178　附錄H　排行榜控件—成績排名

181　附錄I　投票控件—為你喜歡的顏色投票

184　附錄J　抽獎控件—促銷活動抽獎

188　附錄K　虛擬現實工具—文化古街“國子監街”

192　附錄L　連線控件—識別車輛行進標志