# 手机广告
**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
- 阅读须知
- 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简约版介绍
- 如何自定义绑定微信公众号
- 教师版账号详情介绍及使用方法