iH5高级教程：H5交互菜单,旋转菜单特效.doc

iH5高级教程：H5交互菜单，旋转菜单特效步骤：第一步：上传图片1、选中舞台，点击页面工具，添加6个页面。因为这个案例的主题是“2014公路”，我们将页面重命名为菜单、打老虎、世界杯、冰桶挑战、APEC蓝、终于告别。把这五个页面都设置成不一样的背景颜色。2、分别选中2、3、4、5、6页，点击图片工具，添加返回图片。第二步：利用滑动时间轴制作滑动旋转1、选中“菜单”，点击滑动时间轴工具，在舞台上画一个区域，添加一个滑动时间轴，并设置其宽高为舞台大小，xy坐标为（0,0），这样可以防止出现别人在观看我们作品时出现滑动时间轴显示不全的问题。2、选中滑动时间轴，点击图片工具，添加旋转背景，并为其添加轨迹。旋转背景其实是一张1500*1500的图，由于舞台默认设置被剪切，所以我们看不完旋转背景的全部，只要把舞台的剪切设置为No就可以看到完整的旋转背景。3、选中轨迹，添加控制点来设置它位置。我们要制造旋转的效果，所以我们的控制点设置主要在与旋转。例如第一点的旋转是0，第二点的旋转是-72，第三点的旋转是-144，第四点的旋转是-216，第五点的旋转是-288。第三步：制作跳转页面1、回到控制点1的位置，将舞台剪切设置为NO，选中“旋转背景”，在相应的位置添加可以通过点击它来跳转其他页面的透明按钮并重命名为“打老虎”、“世界杯”、“冰桶挑战”、“APEC蓝”、“终别告”。2、为了让别人知道牌子可以点，我们在这里添加一个点击提示圈让它不断地在闪。选中冰桶挑战透明按钮，点击时间轴工具，先添加一个时间轴，设置为两秒，且选择自动播放并循环播放。然后添加图片并为其在时间轴下添加轨迹。3、做好之后可以通过复制粘贴的方法粘贴到别的透明按钮下。第四步：设置跳转页面1、分别在5个透明按钮下的点击提示圈添加事件，选中提示圈图片，点击事件工具，触发条件设置为点击，目标对象设置为舞台，目标动作设置为跳转页面，页面分别设置为“打老虎”、“世界杯”、“冰桶挑战”、“APEC蓝”、“终别告”。2、选中舞台，将剪切改回YES。3、选中其他5个页面下的透明按钮，点击事件工具，在透明按钮下添加事件，触发条件为点击，目标对象为舞台，目标动作为跳转页面，页面为舞台。设置之后在跳转页面通过点击按钮能返回菜单页。第五步：旋转提示图标制作1、为了让别人知道可以旋转，我们还需制作一个提示图标动画，选中菜单添加一个透明按钮，重命名为左右滑动提示后选中这个透明按钮，添加一个时间轴，设置时长为2.2.秒，将时间轴设为yes和循环播放设为yes。2、选中时间轴，点击图片工具，添加一个左右箭头的标志“hand”。3、选中时间轴，点击透明按钮工具，添加一个透明按钮，在选中透明按钮，添加“手势”图。4、为透明按钮1添加一条轨迹，并添加控制点，通过控制点来设置手势左右晃动的动画。先行知识：滑动时间轴、页面重点控件：滑动时间轴、页面、事件、舞台剪切知识点:1、 剪切：将舞台的属性面板中的“剪切”属性状态设为“YES”，您可以剪切掉所有舞台区域外部的菜单图片。如果剪切为“NO”，那么超出舞台范围的内容可以显示，方便编辑。2、 滑动时间轴下添加菜单图片，菜单图片下添加轨迹，添加5个关键帧记录图片不同的旋转角度，制作旋转菜单。重点事件：触发对象：