h5页面制作：定制节日贺卡

时间：2023-07-26 09:21:02 | 来源：网站运营

时间：2023-07-26 09:21:02 来源：网站运营

h5页面制作：定制节日贺卡：如下图，新建元件“海”，在元件页面中点击“媒体库”，添加一张海的素材图片





复制一张，将两张图片左右衔接排列成如下图位置，与“舞台”右对齐





为两张图添加帧动画（第420帧），在动画最后一帧将图片素材平移位置使其与“舞台”左对齐





新建图层“水2”，修改“图层0”名称为“水1”





在“水2”图层第1帧上添加进一张相同的海的素材，将透明度调为“50”度





这时我们点击“播放”按钮，可观察“舞台”上水的运动动画出现波动效果。





新建图层“过渡色”，点击“素材库”按钮添加一张过渡色图片素材，将其移动至海水图片上方位置





回到“舞台”编辑页面，将“舞台”上的“图层0”改名为“背景”，点击“素材库”添加背景图片素材，并将背景图片素材移动至与“舞台”上对齐





新建图层“海”，在“元件”面板下将原先做好的“海”元件用鼠标直接拖动至“舞台”，调整“元件”位置





新建图层“月亮”，添加月亮图片素材至“舞台”，调整月亮图片素材位置、大小等





在所有图层的60帧上右键→“插入帧”，同时为“月亮”设置一个从下往上升的关键帧动画





鼠标选中“月亮”图层，将其拖动至“海”图层下面





新建图层“文字”，在“文字”图层第40帧上右键→“插入关键帧”





在“文字”图层第40帧空白关键帧上添加文字素材





选中文字素材，点击其“预置动画”按钮，添加“移入”的预置动画效果，调整时长、延迟时间，调节方向等





点击“保存”按钮，命名作品为“中秋”





在所有图层80帧位置右键→“插入帧”





在“文字”图层第70帧位置插入关键帧





在70帧位置，点击文字素材“编辑预置动画”按钮，删除预置动画





重新添加预置动画，选择“移出”的动画效果，设置时长、方向等





点击新建图层“人物”，在该图层70帧位置上插入关键帧，添加人物剪影素材





添加人物剪影从右往左移进的“关键帧动画”





为所有图层添加帧数





调整人物素材的“运动”效果为“淡出”





新建“定制文字”图层，在最后一帧插入关键帧





为方便排版，将“文字”图层最后一帧删除





如图，点击“定制文字”图层最后一帧，在“舞台”上添加一个“中秋快乐”文字图片素材，以及三个文本框素材，输入文字内容，调节各个素材的大小、位置、文字颜色、字体等属性。





为各个素材添加预置动画





继续在“定制文字”图层最后一帧添加一个矩形、文本框，调节其大小、颜色、透明度以及文字内容等属性如下图，将两个元素进行组合。





为该组合添加一个“淡入”的预置动画效果，设置该预置动画的延迟时间，可点击“预览”观察效果





分别为第一个文本框命名为“收卡人”、为第二个文本框命名为“祝福词”、为第三个文本框命名为“发卡人”





选择“定制”按钮，在其“属性”面板下选择“动作”为“表单”，点击右边的“编辑”按钮





在“编辑表单”对话框内设置
表单名称：“定制文字”
提交方式：“GET”
提交目标：“微信定制入口”
确认消息：“定制成功！”
修改背景颜色、字体颜色、字体大小等
点击“添加表单项”





在“添加表单项”中添加“收卡人”表单项





同理再添加一个“祝福词”表单项





同理再添加一个“发卡人”表单项





点击“保存”，点击“预览”观察定制效果


更多教程可通过木疙瘩官网查看。