# 界面與舞臺簡介
#### **一、界面概覽**
**1. 常用菜單欄**
包含基本操作菜單,例如文件、編輯、修改、視圖、動畫、幫助等。

**2. 工具箱(快捷工具欄)**
包含保存、預覽等常用的一些工具的快捷訪問。

**3. 時間線(時間軸)**
用來方便的對動畫進行精確的控制,可以添加關鍵幀動畫、進度動畫、變形動畫、遮罩動畫等形式。

**4. 工具條**
包含選項、元素、繪制、動畫控制、手機功能等內容。

**5. 頁面欄**
用來進行頁面的增加、復制、刪除、插入等操作。

**6. 舞臺**
整個界面的核心區域,是編輯、制作、播放動畫的區域

**7. 屬性欄**
包含你所選的元素(圖片、文字、視頻等)屬性,這些屬性包括位置、大小、旋轉、行為等。

#### **二、菜單欄**
菜單欄包括“文件”“編輯”“視圖”“動畫”“功能演示”五大板塊。
**1.“文件”**:包括“新建”“打開”“保存”等功能。

**2.“編輯”**:包括“撤銷”“重做”“剪切”“復制”“鎖定物體”及“全部解鎖”等功能。

2.1“鎖定”功能
選擇舞臺上需鎖定的物體,點擊“編輯”→“鎖定物體”,即將物體鎖定。鎖定后不能對其進行位置、大小等屬性調節。點擊“編輯”→“全部解鎖”即解鎖所有被鎖定的物體。

2.2“排列”功能
“排列”功能即排列舞臺上各個物體的層次覆蓋順序。例如選擇舞臺上的紅框,點擊“編輯”→“排列”→“上移一層”,即可將紅框移至藍框之上。


2.3“對齊”功能
“對齊”功能用于舞臺上物體之間的排版。包括“左”“右對齊”“上”“下對齊”等對齊方式。如圖,同時選中需對齊的物體,點擊“編輯”→“對齊”→“右對齊”,即出現兩個物體右對齊效果。


2.4“變形”功能
“變形”功能包括“左右翻轉”“上下翻轉”兩種變形方式。如圖,選中需翻轉的物體,點擊“編輯”→“變形”→“左右翻轉”即可將物體左右翻轉。


* 注:“排列”“對齊”“變形”等功能可直接在舞臺上選中物體,右鍵出現功能列表。
**3.“視圖”**:包括“工具條”“工具箱”“標尺”等功能。

3.1 “標尺”功能
點擊“標尺”功能即可在舞臺上出現標尺,便于排版等操作。

**4.“動畫”**:包括“插入關鍵幀動畫”“刪除關鍵幀動畫”“插入進度動畫”“刪除進度動畫”等功能。

**5.“功能演示”**:包括“快捷鍵”“交互教程”,“交互教程”下會有Mugeda相關教程講解。

#### **三、快捷工具欄**
如下圖,快捷工具欄包括“新建”“打開”“保存”“剪切”“復制”“粘貼”“刪除”“撤銷”“重做”“播放”“停止”“預覽”“通過二維碼共享”“腳本”“發布”等快捷按鈕。

其中,“通過二維碼共享”中包括預覽地址鏈接、編輯地址鏈接、手機可掃描預覽的二維碼等功能。

#### **四、時間線**
時間線是制作動畫的關鍵功能。時間線把圖層和圖像、幀按時間進行組合、播放來形成動畫。時間線包含“圖層”“幀”區域;底下有“新建圖層”“新建圖層夾”“刪除圖層”“洋蔥皮”“轉為遮罩層”“添加遮罩層”“切換遮罩顯示”功能按鈕;“幀速”“當前幀位置”“當前幀時間”等顯示。

#### **五、工具條**
工具條包含“選擇”“媒體”“繪制”“控件”“表單”“微信”六大工具板塊。

**1.“選擇”**:包括“選擇”“節點”“變形”“縮放比例”“快捷工具”五大工具。
**2.“媒體”**:包括“素材庫”“圖像”“聲音”“視頻”“文字”“文本段落”“幻燈片”“網頁”“曲線圖表”工具。
**3.“繪制”**:包括“直線”“曲線”“矩形”“圓角矩形”“橢圓”“多邊形”等工具
**4.“控件”**:包括有“擦玻璃”“點贊”“繪畫板”“定時器”“隨機數”“陀螺儀”等工具。
**5.“表單”**:包括“輸入框”“單選框”“多選框”“列表框”“表單”等工具。
**6.“微信”**:包括“微信頭像”“微信昵稱”“定制圖片”“錄音”等工具。
#### **六、頁面欄**
在“頁面欄”下可通過點擊頁面下的“+”添加多個新頁面,通過點擊切換頁面,頁面欄下的每個頁面都是一個單獨的動畫。

點擊頁面右下角“從模板中添加”按鈕可從Mugeda自帶模板中選擇添加模板頁面。

#### **七、舞臺**
“舞臺”是整個界面的核心區域,位于界面的中央,在其周圍,留有一定的編輯緩沖區域,該區域內的對象不會在最終的內容展示上出現,但是可以用來很方便的組織暫時不在舞臺的對象。動畫在“舞臺”區域內制作和播放。

#### **八、屬性面板**
**1.“屬性面板”**
“屬性面板”顯示和控制“舞臺”及動畫元素的各種參數,其中包括“內容標題”“舞臺”或“元素”及其圖像、寬高、幀速設置、填充色設置等功能。

**2.“元件庫”**
“元件庫”包含聲音元件和動畫元件。“元件庫”對元件進行管理的必要功能,例如新建元件,復制元件、生成文件夾、刪除元件、導出導入元件、等。一個元件是一個包含有自身獨立的時間線的動畫片段,可以反復在舞臺上使用,創建比較復雜的組合動畫。

3.“翻頁面板”
“翻頁面板”包括“翻頁效果”“退出效果”“翻頁方向”“循環”“翻頁時間”“翻頁圖標”

4.“分享面板”
“分享面板”包括轉發標題、轉發描述、朋友圈轉發標題等分享信息。

5.“加載”設置
“加載”的樣式包含“默認”“進度條”“進度環”“旋轉加載”“旋轉加載+百分比”“首頁作為加載界面”

觀看本節視頻教程:
http://medu.mugeda.com/lesson/5948eb0f9aeb7060c44f03e4
- 閱讀須知
- 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簡約版介紹
- 如何自定義綁定微信公眾號
- 教師版賬號詳情介紹及使用方法