3.1.3 展示动画:简历

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

个人简历.png


 1.制作图标

如下图,在“舞台”上添加一个五边形,选择“节点”工具

3.1-101_.png


图3.1-101
鼠标选中多边形边上的节点,将其往多边形中心方向拖动,形成一个五角星图标

3.1-102_.png


图3.1-102
在“舞台”上分别添加一个圆形、矩形

3.1-103_.png


图3.1-103
选择“节点”工具,点击选中矩形,按住Ctrl键,鼠标移动到矩形最上一边,箭头出现一个“+”的符号,点击添加一个节点

3.1-104_.png


图3.1-104
同理,在矩形最上一边再添加两个节点,使其平均分布在矩形最上一边

3.1-105_.png


图3.1-105
鼠标选中中间的节点,按住Shift键将其往上拖动

3.1-106_.png


图3.1-106
选中最上方节点,按住Ctrl键水平拉动最上方节点的杠杆,使尖角变成有弧度的圆角

3.1-107_.png


图3.1-107
如下图调整左右两边角的弧度

3.1-108_.png


图3.1-108
移动圆形至如下图位置,如果圆形在矩形底下,则可选中圆形,右键→排列→移至顶层

3.1-109_.png


图3.1-109

同时选中两个图形,右键→对齐→左右居中

3.1-110_.png


图3.1-110

右键→合并→合并

3.1-111_.png


图3.1-111

选择“节点”工具,选中矩形下边两个节点,按照Shift键鼠标将其向上拖动

3.1-112_.png


图3.1-112
则可以画出一个头像图标

3.1-113_.png

图3.1-113

2.制作第1页加载页面

如下图,在第1页面添加背景图片、文字等元素,在右边“加载”页面中选择“样式”为“首页作为加载页”

3.1-114_.png


图3.1-114

3.制作第2页微信对话页面

制作微信头像:如下图,在“舞台”上添加一个圆形,在圆形“属性”面板下点击背景图片的“+”标志

3.1-115_.png

图3.1-115

在弹出的“媒体库”中找到自己想要的头像图片,点击“添加”

3.1-116_.png

图3.1-116

即可制作出圆形的头像

3.1-117_.png

图3.1-117

添加素材:如下图,在第2页面添加图片、文字等元素。
注意:分别新建一个图层放置每一则对白的元素,例如新建“对白1”图层放置第一则对白的头像、文字以及对话框等

3.1-118_.png

图3.1-118

第一则对白中的“微信昵称”需点击“微信”工具条下的“微信昵称”按钮添加,其余对白中的文字可直接点击“文字”按钮添加文字内容

3.1-119_.png


图3.1-119
添加动画:在所有图层的第10帧上右键→“插入帧”

3.1-120_.png


图3.1-120
选中四个对白图层的一帧,右键→“插入关键帧动画”

3.1-121_.png


图3.1-121
点击锁状按钮,锁定不需做动画的图层

3.1-122_.png


图3.1-122
同时选中四则对白元素,在时间轴第1帧位置,按照Shift键垂直向下拖动“舞台”上的对白元素

3.1-123_.png


图3.1-123
双击“对白2”的时间轴,选中“对白2”图层上的时间单元

3.1-124_.png


图3.1-124
鼠标选中将其往后拖动至“对白1”动画完成之后的位置

3.1-125_.png


图3.1-125
同理拖动“对白3”“对白4”的时间单元至如下位置

3.1-126_.png


图3.1-126
点击其余图层的锁状按钮解锁,选中动画最后一帧的所有图层,右键→“插入帧”

3.1-127_.png


图3.1-127
选中 “对白1”图层的第1帧,在“属性”面板下选择“运动”为“淡出”

3.1-128_.png


图3.1-128
同理在“对白2”“对白3”“对白4”图层动画的第一帧上也分别将其“运动”效果设为“淡出”

3.1-129_.png


图3.1-129
分别在“对白1”“对白2”“对白3”“对白4”图层动画的第1帧上将其透明度设为“0”

3.1-130_.png


图3.1-130
如下图,我们在“菜单”图层上添加的是“舞台”底端菜单栏下的背景矩形,在“按钮”图层上添加的是四个菜单图标。选中“按钮”“菜单”两个图层动画的最后一帧,右键→“插入关键帧”

3.1-131_.png


图3.1-131
鼠标选中“按钮”图层的第28帧(即最后一则对白出现时),在“舞台”上对准图标右键→“删除物体”

3.1-132_.png


图3.1-132
同理鼠标选中“菜单”图层的第28帧(即最后一则对白出现时),在“舞台”上对准菜单背景矩形,右键→“删除物体”

3.1-133_.png


图3.1-133

添加预置动画效果:
选中菜单背景矩形,点击“添加预置动画”按钮

3.1-134_.png


图3.1-134
选择“移入”效果

3.1-135_.png


图3.1-135
再选择菜单背景矩形,点击“编辑预置动画”按钮

3.1-136_.png


图3.1-136
设置动画选项:时长“1”秒,延时“0”秒,方向“从下”,点击“确认”

3.1-137_.png


图3.1-137

同理,设置四个图标的欲置动画效果都为“移入”,时长为“1”秒,方向“向下”。但注意“技能”图标延迟“0.2”秒,“经验”图标延迟“0.4”秒,“联系”图标延迟“0.6”秒,出现先后移入的效果

3.1-138_.png


图3.1-138

3.1-139_.png


图3.1-139

3.1-140_.png


图3.1-140

4.添加编辑行为

如下图,在第3、4、5页分别添加作品、技能、经验、联系的相关素材

3.1-141_.png


图3.1-141

3.1-142_.png


图3.1-142

3.1-143_.png


图3.1-143

3.1-144_.png


图3.1-144

添加跳转页面动画:
如图,回到第2页动画最后一帧,点击“作品”图标的“添加/编辑页面”按钮

3.1-145_.png


图3.1-145

在“编辑行为”对话框中选择“动画播放控制”→“跳转到页” →触发事件:“点击”,点击“编辑”按钮

3.1-146_.png


图3.1-146

在“参数”对话框中填写“页号”为“3”,“翻页方式”为“淡入”,点击“确认”

3.1-147_.png


图3.1-147

同理,添加“技能”“经验”“联系”图标的“跳转到页”编辑行为,分别跳转到第“4”“5”“6”页

3.1-148_.png


图3.1-148

3.1-149_.png


图3.1-149

3.1-150_.png


图3.1-150

如下图,选中第2页的“作品”图标,点击“编辑”→“复制行为”

3.1-151_.png


图3.1-151

选中第4页的“作品”图标,点击“编辑”→“粘贴行为”,即可将第2页面的“作品”图标设置的“跳转到页”编辑行为复制到第4页

3.1-152_.png


图3.1-152

同理,将第2页面的“作品”图标编辑行为复制到第5、6页;将第2页面的“技能”图标编辑行为复制到第3、5、6页;将第2页面的“经验”图标编辑行为复制到第3、4、6页;将第2页面的“联系”图标编辑行为复制到第3、4、5页;

禁止翻页:如下图,在第2页面新建图层“禁止翻页”,在该图层上添加一个矩形,点击矩形“添加/编辑行为”按钮

3.1-153_.png


图3.1-153

在“编辑行为”对话框中选择“动画播放控制”→“禁止翻页”→触发条件:“出现”

3.1-154_.png


图3.1-154

5.制作第3页面动画

如图,点击第3页面,在“作品组”图层添加相关的素材

3.1-155_.png


图3.1-155

右键→“组”→“组合”

3.1-156_.png


图3.1-156

在组的“属性”面板下选择“组类型”为“裁剪内容”,“允许滚动”设置为“垂直滚动”,鼠标选中“变形”工具调节组的位置

3.1-157_.png


图3.1-157

同时,也可为组内的“H5游戏”文字设置一个跳转动画,跳转到第2帧的网页链接(此处略谈)

3.1-158_.png


图3.1-158

6.制作第4页面动画

点击第4页面,添加“曲线图表”(具体可参看图表制作章节)

3.1-159_.png


图3.1-159

7.制作第5页面动画

点击选中第5页面,如下图,在“经验”图层上添加相关素材

3.1-160_.png


图3.1-160

新建“陀螺仪”图层,在该图层上添加一个陀螺仪,将其移至“舞台”之外,并在“属性”面板下将其命名为“陀螺仪”

3.1-161_.png


图3.1-161

在陀螺仪的“属性”面板下选择“类型”为“绕Y轴旋转角”

3.1-162_.png


图3.1-162

选中“经验”图层上的所有元素,右键→“组”→“组合”

3.1-163_.png


图3.1-163

在“组”的“属性”面板下点击“X轴旋转”的“关联”按钮,在下拉菜单中设置:

关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-45”
当主控量=“180”时被控量=“45”

3.1-164_.png


图3.1-164

同理在“组”的“属性”面板下点击“Y轴旋转”的“关联”按钮,在下拉菜单中设置:
关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-50”
当主控量=“180”时被控量=“50”

3.1-165_.png


图3.1-165

同理在“组”的“属性”面板下点击“Z轴旋转”的“关联”按钮,在下拉菜单中设置:

关联对象:“陀螺仪”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“-180”时被控量=“-5”
当主控量=“180”时被控量=“5”

3.1-166_.png


图3.1-166

可在手机上观察效果

8.制作第6页面动画

如下图,点击第6页面,分别在“简介”“文字”图层上添加头像、联系方式等相关素材

3.1-167_.png


图3.1-167

如图,新建“定时器”图层,在该图层上添加一个定时器,并在“属性”面板下将其命名为“定时器”

3.1-168_.png


图3.1-168

点击选中头像,在其“属性”面板下点击“Z轴旋转”的“关联”按钮,设置关联属性:

关联对象:“定时器”
关联属性:“文本取值”
关联方式:“自动关联”
当主控量=“30”时被控量=“0”
当主控量=“0”时被控量=“360”

3.1-169_.png


图3.1-169

设置定时器属性:精度为“毫秒”,“记时方向”为“倒计时”,“是否循环”为“循环”

3.1-170_.png


图3.1-170

同时,我们也可在该作品中添加背景音乐以及补充其他信息,美化简历。
点击“预览”或扫描二维码观察效果

3.1-171_.png


图3.1-171

0 个评论

要回复文章请先登录注册