# 手機廣告
**1.添加序列圖片制作元件**
如圖,在“元件”面板下點擊新建一個元件,命名為“打開盒子”

點擊“素材庫”按鈕,在“媒體庫”對話框中按住Ctrl鍵選擇多張所需要的序列圖片,勾選右下角的“以序列幀形式添加”,點擊“添加”

我們發現,圖片會以每張添加進每一幀的形式添加進“舞臺”,可點擊“播放”按鈕播放動畫

同理,新建“手機旋轉”“手機展開”元件

**2.在“舞臺”上添加元件**
在“舞臺”上新建兩個圖層,分別為已有三個圖層命名“背景”“盒子”“手機”,分別添加背景圖片和 “打開盒子”“手機展開”元件,調整素材位置、大小等屬性

選中所有圖層的第10幀,右鍵→“插入幀”

將“手機”圖層第1幀按照不放拖動至第9幀

在“打開盒子”元件編輯頁面中的最后一幀,點擊圖片的“添加/編輯行為”按鈕

設置“暫停”行為:“動畫播放控制”→“暫停”→觸發條件:“出現”

同理,在“手機展開”元件最后一幀設置“暫停”行為:“動畫播放控制”→“暫停”→觸發條件:“出現”

點擊添加第2頁面,在第2頁面添加相關素材

**3.制作關聯動畫**
新建“手機旋轉”圖層,鼠標在“元件”面板下將“手機旋轉”元件拖拉至“舞臺”上,調整元件位置、大小。

選中滑桿素材,在其“屬性”面板下設置“拖動/旋轉”為“水平拖動”,在“屬性”面板下為滑桿元素取名為“滑桿”

選中“手機旋轉”元件,在其“屬性”面板下選擇“動畫關聯”為“啟動”,點擊右邊的“關聯”按鈕,設置關聯屬性
關聯對象:“滑桿”
關聯屬性:“左”
開始值:“25”(“滑桿”在開始時在左邊的左值)
結束值:“194”(“滑桿”在結束時在右邊的左值)
播放模式:“同步”

將“滑桿”放置線條中央,在其“屬性”面板下打開“結束時復位”功能,即設置了松開鼠標或手指時 “滑桿”自動回到中間位置的動畫。

**4.制作點擊效果按鈕**
如下圖,在“元件”面板下點擊新建一個“按鈕”元件,點擊添加一個圓形,并修改其填充色為“透明”,線條邊框為白色(為便于觀察,我們可將“舞臺”填充色調為黑色)

插入關鍵幀動畫,在第5幀“插入關鍵幀”

按照Shift+Ctrl鍵使用“變形”工具將圓形以中心點縮小,在“屬性”面板內將該位置的圓形透明度設為“50”

將“按鈕”元件拖至“舞臺”,調整位置、大小等。

**5.制作手機縮小動畫**
在“手機旋轉”圖層“插入關鍵幀動畫”

鼠標選中“手機旋轉”圖層最后一幀,將其拖動至第10幀位置

在第10幀位置改變“手機旋轉”元件的大小、位置以及旋轉角度,如下圖

選中“手機旋轉”圖層第1幀,在“屬性”面板下改變其“運動”效果為“淡出”

**6.新建元件**
在“元件”面板下新建“手機硬件展開”元件,在其元件編輯頁面中添加所需要的圖片素材,如下圖,每一張素材分別添加進一個圖層內

為元件中所有圖層“插入關鍵幀動畫”,在每個圖層的第1幀上依次將圖片素材拼合至右下角的圖片中

同時分別在每個圖層“屬性”面板下找到“運動”,選擇“淡出”效果

新建圖層“暫停”,在“暫停”圖層最后一幀“插入關鍵幀”,添加一個矩形,并設置矩形“暫停”行為:選擇“動畫播放控制”→“暫停”→觸發條件:“出現”


最后將矩形透明度設為“0”

**7.繼續設置第2頁動畫**
點擊選中第2頁面,新建圖層“手機硬件展開”,在“元件”面板下找到“手機硬件展開”元件,鼠標將其拖動至“舞臺”,調整其位置、大小使其與“手機旋轉”元件大小、位置、角度,使其重疊在一起。可將“手機硬件展開”圖層下拉一層,使“舞臺”上的“手機硬件展開”元件置于“手機旋轉”元件底下,方便調整。

刪除“手機旋轉”圖層10幀之后的所有幀

鼠標選中“手機硬件展開”圖層的第1幀,將其拖動移至第11幀

選中“手機旋轉”第1幀,在“屬性”面板下將“運動”效果改為“淡入”

選中“手機旋轉”圖層最后一幀,在“屬性”面板下改變其“Y軸旋轉”角度為“180”,“Z軸旋轉”角度為“8”

在“按鈕”圖層第2幀“插入關鍵幀”,刪除關鍵幀上的物體


在“按鈕”圖層第21幀位置“插入關鍵幀”,將“按鈕”圖層第1幀上的物體復制粘貼進入第21幀


在“舞臺”上復制粘貼一個“按鈕”,調整其位置大小

新建圖層“說明”,在該圖層22幀(“按鈕”出現后)位置上“插入關鍵幀”,在該幀上插入線條、文本框,輸入文字內容,調節顏色、大小等屬性


在“說明”圖層第30幀位置“插入關鍵幀”,復制粘貼進第21幀上的物體

將復制的兩個物體移至小“按鈕”位置上

在“說明”圖層第22幀之后“插入進度動畫”

在“手機旋轉”圖層的第11幀“插入關鍵幀”

選中所有圖層40幀位置,右鍵→“插入幀”

在“說明”圖層上“插入進度動畫”

**8.添加編輯行為**、
如下圖,新建一個“暫停”圖層,在該圖層上添加一個“矩形”

為矩形設置一個“暫停”行為

分別為“暫停”圖層的第2幀、第21幀、第22幀、第29幀“插入關鍵幀”,同時刪除第2幀、第22幀的暫停物體


為“按鈕”圖層第一幀上的按鈕設置“播放”編輯行為:“動畫播放控制”→“播放”→觸發條件:“點擊”

選中“按鈕”圖層第21幀上的大按鈕,設置“動畫播放控制”→“跳轉到幀并播放”→觸發條件:“點擊”,點擊“編輯”按鈕,跳轉幀號為“22”


同理為“按鈕”圖層第21幀上的小按鈕設置編輯行為:“動畫播放控制”→“跳轉到幀并播放”→觸發條件:“點擊”,跳轉幀號為“30”


刪除“暫停”圖層第30幀之后的所有幀數,最后點擊“預覽”觀察效果

**9.制作第3頁**
如下圖,點擊添加第3頁面,在第3頁面添加一張背景圖片素材

新建一個“手機”圖層,在“元件”面板下將“手機展開”元件拖動至“舞臺”上,調節大小與位置

新建“文字”圖層,在所有圖層的第20幀上右鍵→“插入幀”

在“文字”圖層的第15幀“插入關鍵幀”,分別添加“馬上預約”“即將隆重上市”兩個文本框、一個背景矩形等元素,在“屬性”面板下輸入文字內容,分別調整文本域矩形元素的大小、字體、顏色、位置等屬性

將矩形與“馬上預約”文本框組合成一個“按鈕”

設置“按鈕”編輯行為:“屬性控制”→“跳轉鏈接”→觸發條件:“點擊”,在“參數”對話框中填寫需跳轉的網址


為“即將隆重上市”文本框、“馬上預約”按鈕等添加“淡入”效果的預置動畫,設置時長、延遲時間等

如下圖,在第2頁面新建圖層“禁止翻頁”,添加一個矩形,設置矩形“禁止翻頁”行為


設置“我已了解”按鈕編輯行為:“動畫播放控制”→“下一頁”→觸發條件:“點擊”

選擇“滑桿”所在的“背景”圖層,在第2幀“插入關鍵幀”,刪除關鍵幀上的滑桿元素

觀看本節視頻教程:
http://cdn1.mugeda.com/course/4/4.1/4.1.5.mp4
- 閱讀須知
- Mugeda平臺介紹
- 新手必看
- Mugeda是什么?
- 快速入門
- 快速制作炫酷動畫
- 無代碼添加交互
- 學會使用Mugeda模板
- 如何快速修改木疙瘩模板
- 作品創建前必讀
- 手機屏幕適配方法
- 圖片處理
- 聲音及視頻處理
- 屏幕適配設置
- 發布和預覽鏈接的區別
- H5作品相關設置
- 如何發布作品
- 功能詳解
- 界面與舞臺
- 簡介
- 縮放層數據
- 翻頁的相關設置
- 關鍵幀和頁面的命名
- 加載的相關設置
- 物體屬性設置
- 元件界面介紹
- 濾鏡效果
- 屏幕適配范圍與安全框
- 輔助線功能
- 首頁加載的靜態導出
- 素材與媒體
- 圖片上傳/素材庫
- 文本/文本段落
- 網頁
- 幻燈片
- 視頻
- 聲音
- 聲音的控制
- 繪制素材
- 云字體
- 曲線圖表
- 拖動動畫
- 虛擬現實
- 粘貼第三方文字和圖片
- 常用編輯操作
- 鎖定物體
- 節點工具
- 路徑工具
- 排列、對齊、變形、組合、合并功能
- 轉換為元件
- 導入PSD及注意事項
- 聲音和視頻的壓縮
- 聲音和視頻的交互控制
- 動畫
- 時間軸及圖層
- 選擇工具
- 關鍵幀動畫
- 路徑動畫
- 進度動畫
- 曲線變形動畫
- 預置動畫
- 元件動畫
- 分頁/加載頁
- 遮罩動畫
- 動畫運動
- 標尺和輔助線的使用
- 復制幀/圖層
- 如何實現動畫控制
- 文字變形動畫
- 運動曲線編輯
- 行為
- 行為添加以及觸發事件
- 幀的行為
- 頁的行為
- 播放元件片段
- 改變元素屬性
- 改變圖片
- 設置定時器
- 手機功能
- 跳轉鏈接
- 拖動的多種邏輯關系
- 舞臺截圖
- 改變行為屬性增加方框顏色
- 控件
- 陀螺儀
- 定時器
- 隨機數
- 擦玻璃
- 點贊
- 繪畫板
- 投票
- 抽獎
- 連線
- 拖動容器
- 投票、抽獎實時數據管理
- 計數器組件
- 排行榜
- 微信功能
- 微信頭像/微信昵稱
- 定制圖片
- 錄制聲音
- 分享信息
- 表單
- 自定義表單
- 系統默認表單
- 定制文字
- 定制賀卡文字
- 關聯綁定
- 舞臺動畫關聯
- 元件動畫關聯
- 屬性關聯
- 自動關聯
- 公式關聯
- 條件判斷
- 邏輯表達式判斷
- 多種表達式的寫法
- Mugeda API
- MugedaAPI整體結構
- 在動畫中插入腳本
- 使用自定義回調函數
- 通過API定義微信轉發
- 獲取Mugeda后臺數據
- 部署第三方服務器
- 案例講解
- 展示動畫
- 邀請函
- 招聘
- 個人簡歷
- 可定制賀卡
- 手機廣告
- 長按手指控制動畫播放
- 2016網易娛樂圈畫傳
- 一只挖空心思的行禮箱
- 科幻風格H5的制作
- 拖動長圖類H5制作
- 小爺吳亦凡案例
- UI原型
- 小圖標動畫
- 用Mugeda巧做GIF
- 小游戲
- 拍宇航員
- 手術刀
- 測試題
- 拖動選擇
- 概率抽獎
- 聲音測試題
- 真假朋友大質檢
- 圖片合成類H5的制作
- 60秒幫你擺脫朋友圈
- H5錄音機
- 制作接力型H5
- 微信/定制
- 和寶寶聊天
- 和奧運冠軍合影
- 熱門案例(試看)
- 什么才是福
- 教你玩轉密室逃脫類H5制作
- 星巴克咖啡
- 小爺吳亦凡
- 誰是足球明星
- 拷問拍拍618機密
- 用HTML5做交互課件
- CEO邀你群聊
- 里約大冒險
- 天貓宇宙邀請函
- 快閃
- H5換裝小游戲
- 視差類型H5制作
- H5版flappy bird
- 連連看小游戲
- 用遮罩做鏡頭特效
- 網易5筆畫愛
- 剪刀石頭布小游戲
- 交互動畫類H5制作
- 最新功能(1213)
- 如何使用排行榜
- 小功能更新
- 鎖定邊距
- 其他教程
- Mugeda簡約版介紹
- 如何自定義綁定微信公眾號
- 教師版賬號詳情介紹及使用方法