H5案例：“天猫”一只挖空心思的行李箱制作方法

1、如图，添加一张图片素材，调整舞台大小使其符合素材大小，同时右键将图片素材转换为元件，双击元件进入元件编辑页面

2、如图，在元件第20帧插入帧，插入关键帧动画。选中变形工具，按住Ctrl键将中间的控制原点移至舞台右侧中间位置

3、分别选中第一帧、最后一帧，改变其“Y轴旋转”为“-90”“90”

4、可点击“预览”观察元件动画的效果

同时我们在帧数的中间位置（图片正居舞台）插入关键帧，调整“透视度”为“50”

5、如下图，我们新建多个图层，复制图层0上的所有帧，分别粘贴进每一个图层内

6、如下图，在图层8上，删除除第一帧之外的前半部分帧数，同时修改第一帧的“Y轴旋转”为“0”

7、同理，分别删除图层7、6、5、4前半部分的一些帧如下图，分别修改图层7、6、5、4第一帧“Y轴旋转”角度为“-18”“-36”“-54”“-72”

8、移动图层2、1、0上的关键帧如下图位置，即在前面分别插入2、4、6帧

9、新建图层9，在与图层0第一帧相同帧数上插入一个矩形，调整颜色如下图，制作一个光韵矩形。

10、如下图为光韵矩形也设置相同的翻页动画，调整其第一帧关键帧的“Y轴旋转”为“-90”，调整其最后一帧关键帧的“Y轴旋转”为“0”，同时在最后插入一个空白帧。

11、如下图，隔图层复制光韵图层及帧。

12、之后，可双击元件每个图层的物体，分别进入各自的组，添加相对应的素材。即做好一个元件动画。

1、回到舞台，新建一个图层，添加“左右滑动预览”指示图标、一个文本框、两个定时器分别为文本框、两个定时器命名为“关联数值”“加”“减”

2、改变文本框数值为“10”。点击其“添加/编辑行为”按钮，添加两个行为：

属性控制→设置定时器 →触发条件：出现 →设置“参数”：定时器名称：加设置状态：暂停记时器

3、属性控制→设置定时器 →触发条件：出现 →设置“参数”：定时器名称：减设置状态：暂停记时器

4、为“加”定时器添加行为属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：元素名称：关联数值元素属性：文本取值赋值方式：在现有值基础上增加取值：0.01

5、同理，为“减”定时器添加行为属性控制→改变元素属性 →触发条件：属性改变 →设置“参数”：元素名称：关联数值元素属性：文本取值赋值方式：在现有值基础上增加取值：-0.01

6、设置元件的动画关联如下图：关联对象：关联取值关联属性：文本取值开始值：10结束值：0播放模式：同步

7、为元件添加六个行为，分别为“向左滑动‘加’定时器继续计时”“向左滑动‘减’定时器暂停计时”“向右滑动‘减’定时器继续计时”“向右滑动‘加’定时器暂停计时”“点击暂停‘加’定时器”“点击暂停‘减’定时器”

8、为文本框添加两个控制定时器的行为：

属性控制→设置定时器→触发条件：属性改变→设置“参数”定时器名称：减设置状态：暂停记时器执行条件：检查元素状态元素名称：关联数值参考属性：文本取值逻辑条件：小于等于参考值：0

9、属性控制→设置定时器→触发条件：属性改变→设置“参数”定时器名称：加设置状态：暂停记时器执行条件：检查元素状态元素名称：关联数值参考属性：文本取值逻辑条件：大于参考值：10