iH5高级教程：H5交互菜单，流动的按钮特效

1、1、 选中舞台，点击页面工具，添加一个页面。

2、 选中页面点击滑动时间轴工具，在舞台上画一个与舞台一样大的框，添加滑动时间轴。

3、 选中滑动时间轴，点击图片工具，添加10张图片做子对象。

2、1.将页面的属性面板，剪切设为NO，就可以看到舞台外的图片。

2.第一张图第一个关键点，XY坐标是(0,0)，大小是640*1008,也。就是刚好放满舞台，。第二个关键点，，图片在舞台上方，大小也改变了。数值可以参考截图。

3.第二张图第一个关键点，XY坐标是(0,1008)，大小是640*1008，放在舞台下面，第二个关键点，图片在舞台上，大小还是满屏，第三个关键点，图片在舞台上方，并且缩小了。数值可以参考截图。其余图片也是同样的设置。

3、1.选中滑动时间轴，点击透明按钮工具，在舞台上画一个框，添加一个透明按钮作为容器，为容器添加一个轨迹。这个图片的轨迹就是移动到啊每一页的围巾下方。

2.容器下添加一个时间轴，时间轴下添加“加号”的图片，图片下添加轨迹。加号这个图片会明暗变化，提示用户去点击。

4、在滑动时间轴下添加一个围巾的容器（可以是透明按钮，也可以是空的图片），容器下加10张小图。为每一张小图，添加轨迹与关键点，设置关键点，让小图会跟着大图运动与缩小。

5、1.选中舞台，点击计数器工具，添加一个计数器。选中流动按钮里的加号图片，点击事件工具，添加一个事件，点击加号图片，计数器加1，实现点击同一物体出现不同效果。计数器初始值为0，计数器下添加4个事件。

2.当计数器是奇数时（点击1次），旋转45度，加号变成叉号。但计数器是偶数时（点击2次），旋转角，。度为0，图片回到加号状态。

3.当计数器是奇数时（点击1次），滑动时间轴里的围巾小图父对象，显示。但计数器是偶数时（点击2次），围巾小图隐藏。

6、先行知识：滑动时间轴、事件

重点控件：滑动时间轴、事件、计数器、旋转

知识点：

1、滑动时间轴下控制10张人物图片，除第一张与最后一张外，每张图片3个关键帧，第一个关键帧图片在舞台下方，第二个关键帧图片占满舞台，第三个关键帧图片缩小并处于舞台上方，控制图片从下往上显示，然后缩小离开舞台。

2、滑动时间轴下有一个围巾空图片父对象，下面有10张围巾子对象，围巾跟随对应的人物图片运动，点击流动按钮显示围巾父对象，则带动显示对应的围巾子对象。

3、滑动时间轴下添加流动按钮空图片，流动按钮下添加轨迹，轨迹里添加10个关键帧，控制流动按钮的运动，流动按钮下添加时间轴，时间轴下添加按钮图片，时间轴控制按钮透明度，使之闪烁，吸引人点击。

重点事件：

触发对象：按钮图片

触发条件：点击

目标对象：计数器

目标动作：加1

触发对象：计数器

触发条件：为奇数

目标对象：流动按钮

目标动作：设置属性，旋转0度

触发对象：计数器

触发条件：为偶数

目标对象：流动按钮

目标动作：设置属性，旋转45度

触发对象：计数器

触发条件：为奇数

目标对象：围巾

目标动作：显示

触发对象：计数器

触发条件：为偶数

目标对象：围巾

目标动作：隐藏