iH5中级教程微场景H5必备,下拉画轴效果.docx

iH5中级教程微场景H5必备,下拉画轴效果iH5中级教程：微场景H5必备，下拉画轴效果 向下拉动画轴，跟随着画轴的展开，会出现一幅图，里面的小船还会移动。 利用IH5工具，你也可以很快地制作这样的一个交互效果！ 第一步：舞台下添加一张背景图和上下卷轴，下卷轴设置拖动类型为垂直。 1、 选中舞台，点击图片工具添加图片。 2、卷轴属性面板处设置卷轴类型为垂直。 第二步: 1、 选中下卷轴，点击时间轴工具2、 选中时间轴，点击透明按钮工具转父对象。 ，添加一个透明按钮，右键重命名为旋，添加一个时间轴 3、选中透明按钮，添加轨迹，做一个左右摆动的轨迹 4、透明按钮下加一个中国结的子对象，透明按钮的轨迹是五个控制点，旋转度数分别是，0，15，0，-15，0。 5、时间轴的自动播放和循环播放都设为YES。 这样中国结就像黏透明按钮上左右摆动。 第三步：添加下拉画轴的提示 1、选中舞台，点击透明按钮工具提示。 ，添加一个透明按钮。右键重命名为点击2、选中透明按钮，点击时间轴工具，添加一个时间轴。 3、选中时间轴，点击中文字体工具图片工具，添加手的图片。 ，添加“下拉画轴展开”的文字，点击4、选中手的图片，点击轨迹工具拉画轴观看效果 ，添加一个上下移动的轨迹，提示用户下5、第一个控制点手在上方，第二个控制点手在下方，第三个控制点位置与第二个关键帧一样。 第四步：添加画，轴里的画 1、选中舞台，点击工具栏滑动时间轴工具，在舞台上拉出一个与展开的画一样大的框，滑动时间轴属性面板设置绑定对象下卷轴这张图片素材。 3、 滑动方向是下，滑动时间轴放大比例1.3，。 4、 选中滑动时间轴，点击透明按钮工具击图片工具，添加一张黄色的宣纸。 ，画一个区域，选中透明按钮，点5、宣纸的属性面板，剪切设为YES，。 5、 选中宣纸，点击图片工具6、选中透明按钮，点击轨迹工具透明按钮来控制画的展开效果。 ，添加轨迹。透明按钮的高度在变化，用，添加一幅画。 第五步：小船移动 1、 选中宣纸，点击时间轴工具，宣纸下添加一个时间轴。 2、 选中时间轴，点击图片工具，添加小船的图片，选中小船，点解轨迹工具，添加轨迹。 3、点击ADD添加关键帧，小船的时间轴在国画下面，所以第一个控制点小船可以藏在国画左边，第二个控制点，小船在国画右边，模拟小船运动。 第六步：选中下卷轴，点击事件工具，添加三个事件： 下卷轴开始拖动后，下拉画轴的文字与手的图片隐藏。 在下卷轴完全拉开的地方，添加一个透明按钮，作为下卷轴碰撞触发取消拖动的对象。 下卷轴离碰撞定位对象25个距离时，下卷轴设定属性不能拖动。 下卷轴下添加事件，当下卷轴离碰撞定位对象25个距离时，小船的时间轴开始播放，即小船开始运动。 重点控件：事件，透明按钮，滑动时间轴 重点事件： 触发对象：下卷轴 触发条件：手指按下 目标对象：下拉画轴提示的文字与手的图片 目标动作：隐藏 触发对象：下卷轴 触发条件：碰撞， 对象：碰撞定位对象透明按钮， 目标对象：下卷轴 目标动作：设置属性，不能拖动。 触发对象：下卷轴 触发条件：碰撞 对象：碰撞定位对象透明按钮， 目标对象：小船时间轴， 目标动作：从头播放。 TIPS: 1、 滑动时间轴绑定对象，则会通过此对象的移动使滑动时间轴播放。 2、 滑动时间轴直接控制图片从窄变高显示，会使图片不等比例压缩，应该为图片添加父对象透明按钮，选中透明按钮，添加轨迹，通过透明按钮从窄变高显示，让图片以正常尺寸慢慢显示出来。