h5頁面制作：定制節(jié)日賀卡

時間：2023-07-26 09:21:02 | 來源：網(wǎng)站運營

時間：2023-07-26 09:21:02 來源：網(wǎng)站運營

h5頁面制作：定制節(jié)日賀卡：如下圖，新建元件“?！保谠撁嬷悬c擊“媒體庫”，添加一張海的素材圖片





復(fù)制一張，將兩張圖片左右銜接排列成如下圖位置，與“舞臺”右對齊





為兩張圖添加幀動畫（第420幀），在動畫最后一幀將圖片素材平移位置使其與“舞臺”左對齊





新建圖層“水2”，修改“圖層0”名稱為“水1”





在“水2”圖層第1幀上添加進一張相同的海的素材，將透明度調(diào)為“50”度





這時我們點擊“播放”按鈕，可觀察“舞臺”上水的運動動畫出現(xiàn)波動效果。





新建圖層“過渡色”，點擊“素材庫”按鈕添加一張過渡色圖片素材，將其移動至海水圖片上方位置





回到“舞臺”編輯頁面，將“舞臺”上的“圖層0”改名為“背景”，點擊“素材庫”添加背景圖片素材，并將背景圖片素材移動至與“舞臺”上對齊





新建圖層“?！?，在“元件”面板下將原先做好的“海”元件用鼠標(biāo)直接拖動至“舞臺”，調(diào)整“元件”位置





新建圖層“月亮”，添加月亮圖片素材至“舞臺”，調(diào)整月亮圖片素材位置、大小等





在所有圖層的60幀上右鍵→“插入幀”，同時為“月亮”設(shè)置一個從下往上升的關(guān)鍵幀動畫





鼠標(biāo)選中“月亮”圖層，將其拖動至“海”圖層下面





新建圖層“文字”，在“文字”圖層第40幀上右鍵→“插入關(guān)鍵幀”





在“文字”圖層第40幀空白關(guān)鍵幀上添加文字素材





選中文字素材，點擊其“預(yù)置動畫”按鈕，添加“移入”的預(yù)置動畫效果，調(diào)整時長、延遲時間，調(diào)節(jié)方向等





點擊“保存”按鈕，命名作品為“中秋”





在所有圖層80幀位置右鍵→“插入幀”





在“文字”圖層第70幀位置插入關(guān)鍵幀





在70幀位置，點擊文字素材“編輯預(yù)置動畫”按鈕，刪除預(yù)置動畫





重新添加預(yù)置動畫，選擇“移出”的動畫效果，設(shè)置時長、方向等





點擊新建圖層“人物”，在該圖層70幀位置上插入關(guān)鍵幀，添加人物剪影素材





添加人物剪影從右往左移進的“關(guān)鍵幀動畫”





為所有圖層添加幀數(shù)





調(diào)整人物素材的“運動”效果為“淡出”





新建“定制文字”圖層，在最后一幀插入關(guān)鍵幀





為方便排版，將“文字”圖層最后一幀刪除





如圖，點擊“定制文字”圖層最后一幀，在“舞臺”上添加一個“中秋快樂”文字圖片素材，以及三個文本框素材，輸入文字內(nèi)容，調(diào)節(jié)各個素材的大小、位置、文字顏色、字體等屬性。





為各個素材添加預(yù)置動畫





繼續(xù)在“定制文字”圖層最后一幀添加一個矩形、文本框，調(diào)節(jié)其大小、顏色、透明度以及文字內(nèi)容等屬性如下圖，將兩個元素進行組合。





為該組合添加一個“淡入”的預(yù)置動畫效果，設(shè)置該預(yù)置動畫的延遲時間，可點擊“預(yù)覽”觀察效果





分別為第一個文本框命名為“收卡人”、為第二個文本框命名為“祝福詞”、為第三個文本框命名為“發(fā)卡人”





選擇“定制”按鈕，在其“屬性”面板下選擇“動作”為“表單”，點擊右邊的“編輯”按鈕





在“編輯表單”對話框內(nèi)設(shè)置
表單名稱：“定制文字”
提交方式：“GET”
提交目標(biāo)：“微信定制入口”
確認消息：“定制成功！”
修改背景顏色、字體顏色、字體大小等
點擊“添加表單項”





在“添加表單項”中添加“收卡人”表單項





同理再添加一個“祝福詞”表單項





同理再添加一個“發(fā)卡人”表單項





點擊“保存”，點擊“預(yù)覽”觀察定制效果


更多教程可通過木疙瘩官網(wǎng)查看。