手机广告

1.添加序列图片制作元件

如图,在“元件”面板下点击新建一个元件,命名为“打开盒子”

点击“素材库”按钮,在“媒体库”对话框中按住Ctrl键选择多张所需要的序列图片,勾选右下角的“以序列帧形式添加”,点击“添加”

我们发现,图片会以每张添加进每一帧的形式添加进“舞台”,可点击“播放”按钮播放动画

同理,新建“手机旋转”“手机展开”元件

2.在“舞台”上添加元件

在“舞台”上新建两个图层,分别为已有三个图层命名“背景”“盒子”“手机”,分别添加背景图片和 “打开盒子”“手机展开”元件,调整素材位置、大小等属性

选中所有图层的第10帧,右键→“插入帧”

将“手机”图层第1帧按照不放拖动至第9帧

在“打开盒子”元件编辑页面中的最后一帧,点击图片的“添加/编辑行为”按钮

设置“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”

同理,在“手机展开”元件最后一帧设置“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现”

点击添加第2页面,在第2页面添加相关素材

3.制作关联动画

新建“手机旋转”图层,鼠标在“元件”面板下将“手机旋转”元件拖拉至“舞台”上,调整元件位置、大小。

选中滑杆素材,在其“属性”面板下设置“拖动/旋转”为“水平拖动”,在“属性”面板下为滑杆元素取名为“滑杆”

选中“手机旋转”元件,在其“属性”面板下选择“动画关联”为“启动”,点击右边的“关联”按钮,设置关联属性
关联对象:“滑杆”
关联属性:“左”
开始值:“25”(“滑杆”在开始时在左边的左值)
结束值:“194”(“滑杆”在结束时在右边的左值)
播放模式:“同步”

将“滑杆”放置线条中央,在其“属性”面板下打开“结束时复位”功能,即设置了松开鼠标或手指时 “滑杆”自动回到中间位置的动画。

4.制作点击效果按钮

如下图,在“元件”面板下点击新建一个“按钮”元件,点击添加一个圆形,并修改其填充色为“透明”,线条边框为白色(为便于观察,我们可将“舞台”填充色调为黑色)

插入关键帧动画,在第5帧“插入关键帧”

按照Shift+Ctrl键使用“变形”工具将圆形以中心点缩小,在“属性”面板内将该位置的圆形透明度设为“50”

将“按钮”元件拖至“舞台”,调整位置、大小等。

5.制作手机缩小动画

在“手机旋转”图层“插入关键帧动画”

鼠标选中“手机旋转”图层最后一帧,将其拖动至第10帧位置

在第10帧位置改变“手机旋转”元件的大小、位置以及旋转角度,如下图

选中“手机旋转”图层第1帧,在“属性”面板下改变其“运动”效果为“淡出”

6.新建元件

在“元件”面板下新建“手机硬件展开”元件,在其元件编辑页面中添加所需要的图片素材,如下图,每一张素材分别添加进一个图层内

为元件中所有图层“插入关键帧动画”,在每个图层的第1帧上依次将图片素材拼合至右下角的图片中

同时分别在每个图层“属性”面板下找到“运动”,选择“淡出”效果

新建图层“暂停”,在“暂停”图层最后一帧“插入关键帧”,添加一个矩形,并设置矩形“暂停”行为:选择“动画播放控制”→“暂停”→触发条件:“出现”

最后将矩形透明度设为“0”

7.继续设置第2页动画

点击选中第2页面,新建图层“手机硬件展开”,在“元件”面板下找到“手机硬件展开”元件,鼠标将其拖动至“舞台”,调整其位置、大小使其与“手机旋转”元件大小、位置、角度,使其重叠在一起。可将“手机硬件展开”图层下拉一层,使“舞台”上的“手机硬件展开”元件置于“手机旋转”元件底下,方便调整。

删除“手机旋转”图层10帧之后的所有帧

鼠标选中“手机硬件展开”图层的第1帧,将其拖动移至第11帧

选中“手机旋转”第1帧,在“属性”面板下将“运动”效果改为“淡入”

选中“手机旋转”图层最后一帧,在“属性”面板下改变其“Y轴旋转”角度为“180”,“Z轴旋转”角度为“8”

在“按钮”图层第2帧“插入关键帧”,删除关键帧上的物体

在“按钮”图层第21帧位置“插入关键帧”,将“按钮”图层第1帧上的物体复制粘贴进入第21帧

在“舞台”上复制粘贴一个“按钮”,调整其位置大小

新建图层“说明”,在该图层22帧(“按钮”出现后)位置上“插入关键帧”,在该帧上插入线条、文本框,输入文字内容,调节颜色、大小等属性

在“说明”图层第30帧位置“插入关键帧”,复制粘贴进第21帧上的物体

将复制的两个物体移至小“按钮”位置上

在“说明”图层第22帧之后“插入进度动画”

在“手机旋转”图层的第11帧“插入关键帧”

选中所有图层40帧位置,右键→“插入帧”

在“说明”图层上“插入进度动画”

8.添加编辑行为
如下图,新建一个“暂停”图层,在该图层上添加一个“矩形”

为矩形设置一个“暂停”行为

分别为“暂停”图层的第2帧、第21帧、第22帧、第29帧“插入关键帧”,同时删除第2帧、第22帧的暂停物体

为“按钮”图层第一帧上的按钮设置“播放”编辑行为:“动画播放控制”→“播放”→触发条件:“点击”

选中“按钮”图层第21帧上的大按钮,设置“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,点击“编辑”按钮,跳转帧号为“22”

同理为“按钮”图层第21帧上的小按钮设置编辑行为:“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,跳转帧号为“30”

删除“暂停”图层第30帧之后的所有帧数,最后点击“预览”观察效果

9.制作第3页

如下图,点击添加第3页面,在第3页面添加一张背景图片素材

新建一个“手机”图层,在“元件”面板下将“手机展开”元件拖动至“舞台”上,调节大小与位置

新建“文字”图层,在所有图层的第20帧上右键→“插入帧”

在“文字”图层的第15帧“插入关键帧”,分别添加“马上预约”“即将隆重上市”两个文本框、一个背景矩形等元素,在“属性”面板下输入文字内容,分别调整文本域矩形元素的大小、字体、颜色、位置等属性

将矩形与“马上预约”文本框组合成一个“按钮”

设置“按钮”编辑行为:“属性控制”→“跳转链接”→触发条件:“点击”,在“参数”对话框中填写需跳转的网址

为“即将隆重上市”文本框、“马上预约”按钮等添加“淡入”效果的预置动画,设置时长、延迟时间等

如下图,在第2页面新建图层“禁止翻页”,添加一个矩形,设置矩形“禁止翻页”行为

设置“我已了解”按钮编辑行为:“动画播放控制”→“下一页”→触发条件:“点击”

选择“滑杆”所在的“背景”图层,在第2帧“插入关键帧”,删除关键帧上的滑杆元素

观看本节视频教程:
http://cdn1.mugeda.com/course/4/4.1/4.1.5.mp4