# 手机广告
**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
- 阅读须知
- Mugeda平台介绍
- 新手必看
- Mugeda是什么?
- 快速入门
- 快速制作炫酷动画
- 无代码添加交互
- 学会使用Mugeda模板
- 如何快速修改木疙瘩模板
- 作品创建前必读
- 手机屏幕适配方法
- 图片处理
- 声音及视频处理
- 屏幕适配设置
- 发布和预览链接的区别
- H5作品相关设置
- 如何发布作品
- 功能详解
- 界面与舞台
- 简介
- 缩放层数据
- 翻页的相关设置
- 关键帧和页面的命名
- 加载的相关设置
- 物体属性设置
- 元件界面介绍
- 滤镜效果
- 屏幕适配范围与安全框
- 辅助线功能
- 首页加载的静态导出
- 素材与媒体
- 图片上传/素材库
- 文本/文本段落
- 网页
- 幻灯片
- 视频
- 声音
- 声音的控制
- 绘制素材
- 云字体
- 曲线图表
- 拖动动画
- 虚拟现实
- 粘贴第三方文字和图片
- 常用编辑操作
- 锁定物体
- 节点工具
- 路径工具
- 排列、对齐、变形、组合、合并功能
- 转换为元件
- 导入PSD及注意事项
- 声音和视频的压缩
- 声音和视频的交互控制
- 动画
- 时间轴及图层
- 选择工具
- 关键帧动画
- 路径动画
- 进度动画
- 曲线变形动画
- 预置动画
- 元件动画
- 分页/加载页
- 遮罩动画
- 动画运动
- 标尺和辅助线的使用
- 复制帧/图层
- 如何实现动画控制
- 文字变形动画
- 运动曲线编辑
- 行为
- 行为添加以及触发事件
- 帧的行为
- 页的行为
- 播放元件片段
- 改变元素属性
- 改变图片
- 设置定时器
- 手机功能
- 跳转链接
- 拖动的多种逻辑关系
- 舞台截图
- 改变行为属性增加方框颜色
- 控件
- 陀螺仪
- 定时器
- 随机数
- 擦玻璃
- 点赞
- 绘画板
- 投票
- 抽奖
- 连线
- 拖动容器
- 投票、抽奖实时数据管理
- 计数器组件
- 排行榜
- 微信功能
- 微信头像/微信昵称
- 定制图片
- 录制声音
- 分享信息
- 表单
- 自定义表单
- 系统默认表单
- 定制文字
- 定制贺卡文字
- 关联绑定
- 舞台动画关联
- 元件动画关联
- 属性关联
- 自动关联
- 公式关联
- 条件判断
- 逻辑表达式判断
- 多种表达式的写法
- Mugeda API
- MugedaAPI整体结构
- 在动画中插入脚本
- 使用自定义回调函数
- 通过API定义微信转发
- 获取Mugeda后台数据
- 部署第三方服务器
- 案例讲解
- 展示动画
- 邀请函
- 招聘
- 个人简历
- 可定制贺卡
- 手机广告
- 长按手指控制动画播放
- 2016网易娱乐圈画传
- 一只挖空心思的行礼箱
- 科幻风格H5的制作
- 拖动长图类H5制作
- 小爷吴亦凡案例
- UI原型
- 小图标动画
- 用Mugeda巧做GIF
- 小游戏
- 拍宇航员
- 手术刀
- 测试题
- 拖动选择
- 概率抽奖
- 声音测试题
- 真假朋友大质检
- 图片合成类H5的制作
- 60秒帮你摆脱朋友圈
- H5录音机
- 制作接力型H5
- 微信/定制
- 和宝宝聊天
- 和奥运冠军合影
- 热门案例(试看)
- 什么才是福
- 教你玩转密室逃脱类H5制作
- 星巴克咖啡
- 小爷吴亦凡
- 谁是足球明星
- 拷问拍拍618机密
- 用HTML5做交互课件
- CEO邀你群聊
- 里约大冒险
- 天猫宇宙邀请函
- 快闪
- H5换装小游戏
- 视差类型H5制作
- H5版flappy bird
- 连连看小游戏
- 用遮罩做镜头特效
- 网易5笔画爱
- 剪刀石头布小游戏
- 交互动画类H5制作
- 最新功能(1213)
- 如何使用排行榜
- 小功能更新
- 锁定边距
- 其他教程
- Mugeda简约版介绍
- 如何自定义绑定微信公众号
- 教师版账号详情介绍及使用方法