# 舞臺截圖
**1.“舞臺截圖”行為**
如下圖,點擊“素材庫”(或按“S”鍵)彈出“素材庫”對話框,選擇添加一張背景圖片,同時點擊“文字”工具在舞臺上添加一個文字文本框。

新建第2頁,在“素材庫”中選擇添加一張圖片素材(目標圖片),在其“屬性”面板下為其命名為“a”

回到第1頁,為文字設置行為:“屬性控制”→“舞臺截圖”→“觸發條件”:“點擊”,點擊“編輯”按鈕進入“參數”對話框

設置“參數”:
“目標圖片”:“a”
“操作成功后”:“跳轉到頁”
點擊“編輯”按鈕

“頁名稱”:“第2頁”
點擊“確認”

點擊預覽,在“預覽”中點擊第1頁的文字,跳轉至第2頁,并且第1頁的圖片和文字合并成一張圖,即是舞臺截圖

可點擊圖片,右鍵→“圖片另存為”,將圖片以PNG格式下載保存在本地

* * * * *
**2.房產證例子**
新建一個作品編輯頁面,先點擊“保存”按鈕,在“保存”對話框內將作品命名為“房產證”,點擊“保存”

先發布作品,找到發布后的作品二維碼,右鍵→“圖片另存為”保存二維碼,也可截圖保存

在PS內將作品發布生成的二維碼合并進原有的“房產證”背景圖內,儲存進psd文件內

回到Mugeda作品編輯頁面,點擊媒體工具欄下的“PS”按鈕,彈出“導入Photoshop(PSD)素材”對話框

將之前保存的PSD格式文件直接拖動至對話框內,選擇要導入的文件夾(如圖保存在“test2”文件夾內),點擊“整體導入”

新建首頁,在首頁的舞臺上添加“姓名”“地址”“時間”內容的輸入框,可修改文字大小、字體等

新建圖層,重命名為“線”,將其拖動至“圖層1”下面,為方便辨識,將“圖層1”重命名為“輸入框”

點擊選中“線”圖層第1幀,使用“直線”工具在舞臺上畫(或復制粘貼)出三條線,調整至合適位置,同時點擊“文字”工具在舞臺上添加一個“確定”按鈕

點擊第2頁,在舞臺上添加三個文字文本框,調整字體、大小、顏色、位置等使其符合背景圖片

點擊回到第1頁,分別在其“屬性”面板下為三個輸入框命名為“姓名”“地址”“時間”

點擊回到第2頁,選中舞臺上與“姓名”位置匹配的文字,在其“屬性”面板下找到如圖的文字內容“關聯”標志,點擊“關聯”

設置關聯屬性:
“關聯對象”:“姓名”
“關聯屬性”:“文本取值”
其他默認

同理分別選中舞臺上與 “地址”“時間”位置匹配的文字,點擊“關聯”,設置關聯屬性:
“關聯對象”:“地址”/“時間”
“關聯屬性”:“文本取值”
其他默認


在舞臺上添加一個文字,輸入內容“生成證件”,可在其“屬性”面板下修改其文字大小、顏色等

點擊新建第3頁,添加一張320*520(與舞臺大小相等)圖片,作為舞臺截圖的目標圖片

* 注:目標圖片只能是以導入的方式添加jpg或png的圖片素材,不能直接繪制
在其“屬性”面板下為導入的圖片命名為“a”

回到第2頁,為“生成證件”文字添加編輯行為:“屬性控制”→“舞臺截圖”→“觸發條件”:“點擊”,點擊“編輯”按鈕進入“參數”對話框

設置“參數”:
“目標圖片”:“a”
“操作成功后”:“跳轉到頁”
點擊“編輯”按鈕

“頁名稱”:“第3頁”
點擊“確認”

去除合成后圖片上的“生成證件”字樣:選中舞臺上的“生成證件”文字,在其“屬性”面板下將其命名為“按鈕”

設置“生成證件”文字編輯行為:“屬性控制”→“改變元素屬性”→“觸發條件”:“點擊”,點擊“編輯”按鈕進入“參數”對話框

設置“參數”:
“元素名稱”:“按鈕”
“元素屬性”:“左”
“賦值方式”:“用設置的值替換現有值”
“取值”:“500”(>320)
點擊“確認”,即設置了“點擊‘生成證件’文字,該文字即會跳至左值為500的位置(超出舞臺范圍)”的行為

可點擊預覽觀察效果

點擊回到第1頁,為“確定”文字添加“點擊跳轉下一頁”編輯行為

同時在舞臺之外添加一個矩形,為其設置“禁止翻頁”行為:“動畫播放控制”→“禁止翻頁”→“觸發條件”:“出現”


設置“跳轉至下一頁”行為的條件:重新回到“確定”文字的“編輯行為”對話框內,設置“參數”:
“執行條件”:“邏輯表達式”
“邏輯表達式”:‘{{姓名}}’!=‘’&&‘{{地址}}’!=‘’&&‘{{時間}}’!=‘’
點擊“確認”
即當輸入框是空的時候,點擊“確定”按鈕不能跳轉至下一頁

觀看本節視頻教程:
http://cdn1.mugeda.com/course/3/3.4/3.4.11.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簡約版介紹
- 如何自定義綁定微信公眾號
- 教師版賬號詳情介紹及使用方法