企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# 手机广告 **1.添加序列图片制作元件** 如图,在“元件”面板下点击新建一个元件,命名为“打开盒子” ![](https://box.kancloud.cn/1543517272eadce43db0f50835ec4db2_800x450.png) 点击“素材库”按钮,在“媒体库”对话框中按住Ctrl键选择多张所需要的序列图片,勾选右下角的“以序列帧形式添加”,点击“添加” ![](https://box.kancloud.cn/353b83f32b509133f03f0bb89e01ce79_800x453.png) 我们发现,图片会以每张添加进每一帧的形式添加进“舞台”,可点击“播放”按钮播放动画 ![](https://box.kancloud.cn/fbb4144aa18c05f55753d98858710a2c_800x444.png) 同理,新建“手机旋转”“手机展开”元件 ![](https://box.kancloud.cn/5e6ef0111e3e835285053a05603a2688_800x451.png) **2.在“舞台”上添加元件** 在“舞台”上新建两个图层,分别为已有三个图层命名“背景”“盒子”“手机”,分别添加背景图片和 “打开盒子”“手机展开”元件,调整素材位置、大小等属性 ![](https://box.kancloud.cn/54daaede62e4b0e2ccae9031835f7bd8_800x453.png) 选中所有图层的第10帧,右键→“插入帧” ![](https://box.kancloud.cn/58c2a31cefef89151b045f042d974c2e_800x451.png) 将“手机”图层第1帧按照不放拖动至第9帧 ![](https://box.kancloud.cn/4975973773060e6d1529495188846e50_800x449.png) 在“打开盒子”元件编辑页面中的最后一帧,点击图片的“添加/编辑行为”按钮 ![](https://box.kancloud.cn/6e8618342b24d225d6d3faf2262c6ad7_800x449.png) 设置“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现” ![](https://box.kancloud.cn/f3b1509571c09f5acd08d9930247c246_800x450.png) 同理,在“手机展开”元件最后一帧设置“暂停”行为:“动画播放控制”→“暂停”→触发条件:“出现” ![](https://box.kancloud.cn/2f3a69f337df8f5577a973018d608c41_800x452.png) 点击添加第2页面,在第2页面添加相关素材 ![](https://box.kancloud.cn/0447f05f53a745602f9d5121c64f1c8b_800x454.png) **3.制作关联动画** 新建“手机旋转”图层,鼠标在“元件”面板下将“手机旋转”元件拖拉至“舞台”上,调整元件位置、大小。 ![](https://box.kancloud.cn/f437a62067d068ce53011fcca6057731_800x449.png) 选中滑杆素材,在其“属性”面板下设置“拖动/旋转”为“水平拖动”,在“属性”面板下为滑杆元素取名为“滑杆” ![](https://box.kancloud.cn/7ce8bf7d38c763ccfa56dbcb467e1e76_800x452.png) 选中“手机旋转”元件,在其“属性”面板下选择“动画关联”为“启动”,点击右边的“关联”按钮,设置关联属性 关联对象:“滑杆” 关联属性:“左” 开始值:“25”(“滑杆”在开始时在左边的左值) 结束值:“194”(“滑杆”在结束时在右边的左值) 播放模式:“同步” ![](https://box.kancloud.cn/01dca8e439def01a3b16bd0a50cc73a2_800x449.png) 将“滑杆”放置线条中央,在其“属性”面板下打开“结束时复位”功能,即设置了松开鼠标或手指时 “滑杆”自动回到中间位置的动画。 ![](https://box.kancloud.cn/4536bde9d193d73f2577a79ac2ddde49_800x454.png) **4.制作点击效果按钮** 如下图,在“元件”面板下点击新建一个“按钮”元件,点击添加一个圆形,并修改其填充色为“透明”,线条边框为白色(为便于观察,我们可将“舞台”填充色调为黑色) ![](https://box.kancloud.cn/4933bcfb5e42522143ec3ff411068ec7_800x452.png) 插入关键帧动画,在第5帧“插入关键帧” ![](https://box.kancloud.cn/a6d19de6cfa693e20925733b4e84a9aa_800x454.png) 按照Shift+Ctrl键使用“变形”工具将圆形以中心点缩小,在“属性”面板内将该位置的圆形透明度设为“50” ![](https://box.kancloud.cn/0903bdfa9f8682938165e9181108cb3e_800x452.png) 将“按钮”元件拖至“舞台”,调整位置、大小等。 ![](https://box.kancloud.cn/0cbc772dc46f1d0a846e4556b825e0a1_800x456.png) **5.制作手机缩小动画** 在“手机旋转”图层“插入关键帧动画” ![](https://box.kancloud.cn/ba4e7fdc9e8701e69eee7ec67daa379d_800x451.png) 鼠标选中“手机旋转”图层最后一帧,将其拖动至第10帧位置 ![](https://box.kancloud.cn/58c391b044c12af5d947448a6031a14e_800x451.png) 在第10帧位置改变“手机旋转”元件的大小、位置以及旋转角度,如下图 ![](https://box.kancloud.cn/4bbfeb438bff1c11e76bde412200023e_800x453.png) 选中“手机旋转”图层第1帧,在“属性”面板下改变其“运动”效果为“淡出” ![](https://box.kancloud.cn/b3a8eac6657a0f69b9fde0fa9ecabe9c_800x453.png) **6.新建元件** 在“元件”面板下新建“手机硬件展开”元件,在其元件编辑页面中添加所需要的图片素材,如下图,每一张素材分别添加进一个图层内 ![](https://box.kancloud.cn/afd14619f350dad91b4b00f248db2f51_800x453.png) 为元件中所有图层“插入关键帧动画”,在每个图层的第1帧上依次将图片素材拼合至右下角的图片中 ![](https://box.kancloud.cn/132e0d052c1ee5239283e9433c0d8b46_800x452.png) 同时分别在每个图层“属性”面板下找到“运动”,选择“淡出”效果 ![](https://box.kancloud.cn/f5485748daed8aaa015a0cbde349de8d_800x453.png) 新建图层“暂停”,在“暂停”图层最后一帧“插入关键帧”,添加一个矩形,并设置矩形“暂停”行为:选择“动画播放控制”→“暂停”→触发条件:“出现” ![](https://box.kancloud.cn/ac90a14c505450c095ef9000fdacfb38_800x459.png) ![](https://box.kancloud.cn/02975743e4d50915adb98fa4594c691e_800x453.png) 最后将矩形透明度设为“0” ![](https://box.kancloud.cn/993a0a6aec3dcadff56088087154caa7_800x451.png) **7.继续设置第2页动画** 点击选中第2页面,新建图层“手机硬件展开”,在“元件”面板下找到“手机硬件展开”元件,鼠标将其拖动至“舞台”,调整其位置、大小使其与“手机旋转”元件大小、位置、角度,使其重叠在一起。可将“手机硬件展开”图层下拉一层,使“舞台”上的“手机硬件展开”元件置于“手机旋转”元件底下,方便调整。 ![](https://box.kancloud.cn/a79d1dbe95456f1492501bb3be1a43e6_800x453.png) 删除“手机旋转”图层10帧之后的所有帧 ![](https://box.kancloud.cn/3585fcb05f3307c518794f8697cde500_800x451.png) 鼠标选中“手机硬件展开”图层的第1帧,将其拖动移至第11帧 ![](https://box.kancloud.cn/d2556079212b39e9210acff7ff4f879d_800x454.png) 选中“手机旋转”第1帧,在“属性”面板下将“运动”效果改为“淡入” ![](https://box.kancloud.cn/37de433b1b7c363e7a918949642cafa1_800x452.png) 选中“手机旋转”图层最后一帧,在“属性”面板下改变其“Y轴旋转”角度为“180”,“Z轴旋转”角度为“8” ![](https://box.kancloud.cn/5abc6e0f84d3655ea7377c21dcc47886_800x448.png) 在“按钮”图层第2帧“插入关键帧”,删除关键帧上的物体 ![](https://box.kancloud.cn/1b560ad70a3f5188aa51b65487614d09_800x453.png) ![](https://box.kancloud.cn/524400c7e728e5dd42b090451014030a_800x451.png) 在“按钮”图层第21帧位置“插入关键帧”,将“按钮”图层第1帧上的物体复制粘贴进入第21帧 ![](https://box.kancloud.cn/db8c08113c1486fc2bee7f7a39872147_800x453.png) ![](https://box.kancloud.cn/9f87bc504028927d9afff1c38af61d3d_800x455.png) 在“舞台”上复制粘贴一个“按钮”,调整其位置大小 ![](https://box.kancloud.cn/9a831a76af8bd6da6d81be500d0e237c_800x454.png) 新建图层“说明”,在该图层22帧(“按钮”出现后)位置上“插入关键帧”,在该帧上插入线条、文本框,输入文字内容,调节颜色、大小等属性 ![](https://box.kancloud.cn/c5678380b43e6dbe60c32a5ccfa3cd8b_800x452.png) ![](https://box.kancloud.cn/0ef8e49ff19135be5bc11c2d617f3e81_800x454.png) 在“说明”图层第30帧位置“插入关键帧”,复制粘贴进第21帧上的物体 ![](https://box.kancloud.cn/1826746f86b2e946596f8acd577c8140_800x450.png) 将复制的两个物体移至小“按钮”位置上 ![](https://box.kancloud.cn/dbd9dee1d934801f946bdb738e710870_800x450.png) 在“说明”图层第22帧之后“插入进度动画” ![](https://box.kancloud.cn/27a5de0d0b5b8917b8e9faef28d6ed67_800x450.png) 在“手机旋转”图层的第11帧“插入关键帧” ![](https://box.kancloud.cn/fb44d8821f87e1154e29bda5533df839_800x460.png) 选中所有图层40帧位置,右键→“插入帧” ![](https://box.kancloud.cn/dc26fbf337ac0734f9ed61b5fdd3ca95_800x449.png) 在“说明”图层上“插入进度动画” ![](https://box.kancloud.cn/5e6bce56c52a834f5f2ae69b1a8c67b3_800x452.png) **8.添加编辑行为**、 如下图,新建一个“暂停”图层,在该图层上添加一个“矩形” ![](https://box.kancloud.cn/88478cc69b92231347951c60114aad9c_800x452.png) 为矩形设置一个“暂停”行为 ![](https://box.kancloud.cn/295e76de409db280400291d241298634_800x448.png) 分别为“暂停”图层的第2帧、第21帧、第22帧、第29帧“插入关键帧”,同时删除第2帧、第22帧的暂停物体 ![](https://box.kancloud.cn/026a51b8de8241c90e765be09395b52f_800x448.png) ![](https://box.kancloud.cn/096d7a5b77c70a958897d835ce284287_800x451.png) 为“按钮”图层第一帧上的按钮设置“播放”编辑行为:“动画播放控制”→“播放”→触发条件:“点击” ![](https://box.kancloud.cn/8ce9ab8576168e2d3c74d5c6236d8bbc_800x451.png) 选中“按钮”图层第21帧上的大按钮,设置“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,点击“编辑”按钮,跳转帧号为“22” ![](https://box.kancloud.cn/d9e8bbb74484049d9ca8bd7425a79fe1_800x458.png) ![](https://box.kancloud.cn/5695b6fde8c8ffff9a7f7006445b989f_800x453.png) 同理为“按钮”图层第21帧上的小按钮设置编辑行为:“动画播放控制”→“跳转到帧并播放”→触发条件:“点击”,跳转帧号为“30” ![](https://box.kancloud.cn/be870d9588a3b0d5cb315a9fd10f2bda_801x449.png) ![](https://box.kancloud.cn/fb271a070d943517edbf0ddbb89eaae9_800x437.png) 删除“暂停”图层第30帧之后的所有帧数,最后点击“预览”观察效果 ![](https://box.kancloud.cn/a1d007dac8e6d3efeb4e5c3d7d5f7478_800x447.png) **9.制作第3页** 如下图,点击添加第3页面,在第3页面添加一张背景图片素材 ![](https://box.kancloud.cn/8d58650dbfcb28b904906ab2eb80982c_800x453.png) 新建一个“手机”图层,在“元件”面板下将“手机展开”元件拖动至“舞台”上,调节大小与位置 ![](https://box.kancloud.cn/18e20161fd0d490bc3520e054e1c4e1d_800x449.png) 新建“文字”图层,在所有图层的第20帧上右键→“插入帧” ![](https://box.kancloud.cn/ec130b368daba05a1e962c889d13dd2b_800x447.png) 在“文字”图层的第15帧“插入关键帧”,分别添加“马上预约”“即将隆重上市”两个文本框、一个背景矩形等元素,在“属性”面板下输入文字内容,分别调整文本域矩形元素的大小、字体、颜色、位置等属性 ![](https://box.kancloud.cn/1faaebddcc2a2192b55f293e93cf3e4a_800x448.png) 将矩形与“马上预约”文本框组合成一个“按钮” ![](https://box.kancloud.cn/a506ae97242d4f261755f9790d3c7c10_800x451.png) 设置“按钮”编辑行为:“属性控制”→“跳转链接”→触发条件:“点击”,在“参数”对话框中填写需跳转的网址 ![](https://box.kancloud.cn/7642e1f82ac1807d77d92ea99f3b2af4_800x450.png) ![](https://box.kancloud.cn/1c01aa093d51a8cf069bf3fa6e7c2d2b_800x376.png) 为“即将隆重上市”文本框、“马上预约”按钮等添加“淡入”效果的预置动画,设置时长、延迟时间等 ![](https://box.kancloud.cn/534d7fafa2995af0c04d32037ce9d14e_800x449.png) 如下图,在第2页面新建图层“禁止翻页”,添加一个矩形,设置矩形“禁止翻页”行为 ![](https://box.kancloud.cn/01ae36533a22c00f0d4b66f6f60e1900_800x460.png) ![](https://box.kancloud.cn/a85520ff4c94c4b4f1bf1725aebd8ade_800x450.png) 设置“我已了解”按钮编辑行为:“动画播放控制”→“下一页”→触发条件:“点击” ![](https://box.kancloud.cn/8ebc8e146533fb2c0d44451d7498ff4d_800x449.png) 选择“滑杆”所在的“背景”图层,在第2帧“插入关键帧”,删除关键帧上的滑杆元素 ![](https://box.kancloud.cn/b77af421ddb9c89fd0828130db25944f_800x451.png) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.1/4.1.5.mp4