3.1.4 展示动画:贺卡

想要了解更多Mugeda功能?>>>猛戳我,学习更多教程​
 
>>>案例预览
 
本节视频教程请点击此处。

可定制贺卡.png


 操作步骤:如下图,新建元件“海”,在元件页面中点击“媒体库”,添加一张海的素材图片

3.1-172_.png


图3.1-172

点击图片,右键→“复制”

3.1-173_.png


图3.1-173
按照Ctrl+Sift+V原位粘贴进当前位置

3.1-174_.png


图3.1-174

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

3.1-175_.png


图3.1-175

为两张图添加帧动画:在第420帧位置右键→“插入帧”

3.1-176_.png


图3.1-176

右键→“插入关键帧动画”

3.1-177_.png


图3.1-177

在动画最后一帧将图片素材平移位置使其与“舞台”左对齐

3.1-178_.png


图3.1-178

如下图,新建图层“水2”,修改“图层0”名称为“水1”

3.1-179_.png


图3.1-179

在“水2”图层第1帧上添加进一张相同的海的素材

3.1-180_.png


图3.1-180

将“水2”图层上的图片素材透明度调为“50”度

3.1-181_.png


图3.1-181

点击“播放”按钮,观察“舞台”上水的运动动画出现波动效果。

3.1-182_.png


图3.1-182

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

3.1-183_.png


图3.1-183

点击“舞台”回到“舞台”编辑页面

3.1-184_.png


图3.1-184

将“舞台”上的“图层0”改名为“背景”,点击“素材库”添加背景图片素材,并将背景图片素材移动至与“舞台”上对齐

3.1-185_.png


图3.1-185

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

3.1-186_.png


图3.1-186

将“元件”移动至“舞台”底端,并使其与“舞台”右对齐

3.1-187_.png


图3.1-187

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

3.1-188_.png


图3.1-188

在所有图层的60帧上右键→“插入帧”

3.1-189_.png


图3.1-189

选中“月亮”图层上的任何一帧,右键→“插入关键帧动画”

3.1-190_.png


图3.1-190

在“月亮”图层第1帧上,按住Shift键将月亮素材垂直往下移动

3.1-191_.png


图3.1-191

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

3.1-192_.png


图3.1-192

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

3.1-193_.png


图3.1-193

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

3.1-194_.png


图3.1-194

选中“海上生明月”文字图片素材,点击其“预置动画”按钮,添加“移入”的预置动画效果

3.1-195_.png


图3.1-195

3.1-196_.png


图3.1-196

点击“编辑预置动画”按钮,默认时长、延迟时间,调节方向为“从下”

3.1-197_.png


图3.1-197

3.1-198_.png


图3.1-198

同理,添加“天涯共此时”文字图片素材的预置动画效果,让其动画延迟“1”秒,其余与“海上生明月”素材动画效果一致

3.1-199_.png


图3.1-199

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

3.1-200_.png


图3.1-200

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

3.1-201_.png


图3.1-201

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

3.1-202_.png


图3.1-202

在70帧位置,点击“海上生明月”素材“编辑预置动画”按钮

3.1-203_.png


图3.1-203

在出现的“动画”对话框中点击“删除”→“确认删除”,删除掉该预置动画

3.1-204_.png


图3.1-204

同理删除掉70帧上“天涯共此时”文字图片素材的预置动画效果
重新添加预置动画:点击“海上生明月”素材“添加预置动画”按钮

3.1-205_.png


图3.1-205

选择“移出”的动画效果

3.1-206_.png


图3.1-206

点击“编辑预置动画”按钮,设置其延迟时间为“1”秒,其他默认

3.1-207_.png


图3.1-207

同理添加“天涯共此时”图片素材的预置动画效果为“移出”,不修改动画选项

3.1-208_.png


图3.1-208

点击新建图层“人物”,在该图层70帧位置右键→“插入关键帧”

3.1-209_.png


图3.1-209

在第70帧空白关键帧上添加人物剪影素材

3.1-210_.png


图3.1-210

在“人物”图层70帧之后的任意一帧上右键→“插入关键帧动画”

3.1-211_.png


图3.1-211

在第70帧上将“人物”素材平移至“舞台”右侧之外

3.1-212_.png


图3.1-212

鼠标选中70帧之后的所有图层部分帧数

3.1-213_.png


图3.1-213

右键→“插入帧”

3.1-214_.png


图3.1-214

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

3.1-215_.png


图3.1-215

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

3.1-216_.png


图3.1-216

为方便排版,将“文字”图层最后一帧删除,点击选中最后一帧,右键→“删除帧(可多选)”

3.1-217_.png


图3.1-217

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

3.1-218_.png


图3.1-218

为各个素材添加预置动画:如下图,点击“中秋快乐”素材的“添加预置动画”按钮,选择“移入”的动画效果

3.1-219_.png


图3.1-219

3.1-220_.png


图3.1-220

点击其“编辑预置动画”按钮,修改方向为“从右”,其余默认,点击“确认”

3.1-221_.png


图3.1-221

设置修改三个文本框的预置动画效果都为“移入”,时长默认“1.5”秒,方向为“从右”。只延迟时间稍作改变,三个文字框从上往下分别延迟“1”秒、“1.5”秒、“2”秒

3.1-222_.png


图3.1-222

3.1-223_.png


图3.1-223

3.1-224_.png


图3.1-224

继续在“定制文字”图层最后一帧添加一个矩形、文本框,调节其大小、颜色、透明度以及文字内容等属性,参考下图。

3.1-225_.png


图3.1-225

选中矩形、文本框两个元素,右键→“组”→“组合”

3.1-226_.png


图3.1-226

为该组合添加一个“淡入”的预置动画效果

3.1-227_.png


图3.1-227

设置该预置动画的延迟时间为“3”秒

3.1-228_.png


图3.1-228

点击“预览”观察效果

3.1-229_.png


图3.1-229

为第一个文本框命名为“收卡人”

3.1-230_.png


图3.1-230

为第二个文本框命名为“祝福词”

3.1-231_.png


图3.1-231

为第三个文本框命名为“发卡人”

3.1-232_.png


图3.1-232

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

3.1-233_.png


图3.1-233

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

3.1-234_.png


图3.1-234

在“添加表单项”中添加
名称:“收卡人”(即第一个文本框)
描述:“收卡人”
类型“输入框”
点击“保存”

3.1-235_.png


图3.1-235

同理再添加一个表单项
名称:“祝福词”(即第二个文本框)
描述:“祝福词”
类型“文本域”
点击“保存”

3.1-236_.png


图3.1-236

同理再添加一个表单项
名称:“发卡人”(即第三个文本框)
描述:“发卡人”
类型“输入框”
点击“保存”,最后点击“确认”

3.1-237_.png


图3.1-237

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

3.1-238_.png


图3.1-238

最后可通过右侧“属性栏”添加背景音乐。

0 个评论

要回复文章请先登录注册