母親節(jié)策劃｜教你如何制作H5簽名電子賀卡！

時(shí)間：2023-07-25 06:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-07-25 06:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

母親節(jié)策劃｜教你如何制作H5簽名電子賀卡?。耗赣H節(jié)到了，教你怎么制作朋友圈高逼格的母親節(jié)H5主題感恩賀卡！快來(lái)把對(duì)母親的愛(ài)寫(xiě)下來(lái)吧！

一、案例效果

效果一：

效果二：

點(diǎn)擊學(xué)習(xí)視頻教程

二、素材準(zhǔn)備

文末附件下載素材，非商用，僅供學(xué)習(xí)使用。

制作軟件傳送門(mén)：在線交互軟件Epub360

三、功能設(shè)置

輸入祝福語(yǔ)——親筆簽名——檢查確認(rèn)——生成海報(bào)

輸入祝福語(yǔ)頁(yè)面

1.增添段落組件，勾選文本可編輯。修改提示語(yǔ)為”感恩節(jié)來(lái)了，在這里點(diǎn)擊輸入你想說(shuō)給大家的話吧~“點(diǎn)擊時(shí)設(shè)置激活編輯狀態(tài)

2.增添一個(gè)全局變量命名為祝福語(yǔ)，格式改為文本

3.“下一頁(yè)”點(diǎn)擊觸發(fā)設(shè)置：設(shè)置參數(shù)值，將段落賦值給這個(gè)全局變量并跳轉(zhuǎn)頁(yè)面

簽名頁(yè)面

1.插入高級(jí)組件——畫(huà)板，勾選筆觸效果

2.增添一個(gè)全局變量命名為用戶簽名，格式改為文本

3.“下一步”點(diǎn)擊觸發(fā)設(shè)置：畫(huà)板設(shè)置選擇轉(zhuǎn)成圖片操作，勾選畫(huà)板元素，將畫(huà)板轉(zhuǎn)成的圖片關(guān)聯(lián)這個(gè)全局變量并成功后跳轉(zhuǎn)頁(yè)面

4.”重新寫(xiě)“點(diǎn)擊觸發(fā)設(shè)置：畫(huà)板設(shè)置選擇清空畫(huà)板操作，勾選畫(huà)板元素

檢查確認(rèn)頁(yè)面

1.添加段落組件

2.用頁(yè)面觸發(fā)器——切換到當(dāng)前頁(yè)：設(shè)置參數(shù)值，把之前頁(yè)面里收集的 “想說(shuō)的話”全局變量賦值給段落組件

3.添加圖片容器

4.用頁(yè)面觸發(fā)器——切換到當(dāng)前頁(yè)：替換資源觸發(fā)器，把之前頁(yè)面里收集的 “用戶簽名”全局變量賦值給圖片容器

5.添加圖片容器，命名為郵票

6.用頁(yè)面觸發(fā)器——切換到當(dāng)前頁(yè)：替換資源觸發(fā)器，把微信頭像參數(shù)賦值給”郵票“的圖片容器

7.添加截屏組件，并選擇需要被截屏的元素

8.添加全局變量命名為”海報(bào)“，格式改為文本

9.”完成“點(diǎn)擊觸發(fā)設(shè)置：截屏設(shè)置，選擇截屏組件，將截屏圖片關(guān)聯(lián)到”海報(bào)“的全局變量，成功后跳轉(zhuǎn)頁(yè)面

生成海報(bào)頁(yè)面

1.添加一個(gè)空白替換的圖片，勾選 “二維碼識(shí)別”（這樣才可以確保長(zhǎng)按后彈出菜單進(jìn)行保存或轉(zhuǎn)發(fā)）

2. 用頁(yè)面觸發(fā)器——切換到當(dāng)前頁(yè)：替換資源，把 全局變量“海報(bào)”替換到圖片組件中

3.特別提示：

（1）段落組件，勾選文本可編輯并設(shè)置點(diǎn)擊時(shí)激活編輯狀態(tài)

（2）全局變量，改成文本

（3）畫(huà)板組件，筆觸效果

（4）畫(huà)板組件，生成圖片的關(guān)聯(lián)

（5）截屏組件，需要所要截屏的元素

（6）截屏組件，生成圖片的關(guān)聯(lián)

（7）頭像的獲取，頭像參數(shù)

（8）圖片容器，需勾選二維碼識(shí)別這樣才可以確保長(zhǎng)按后彈出菜單進(jìn)行保存或轉(zhuǎn)發(fā)

4.其他母親節(jié)主題H5：




更多交互邏輯應(yīng)用、融媒體創(chuàng)作、H5交互設(shè)計(jì)請(qǐng)關(guān)注專欄：玩轉(zhuǎn)Epub360