iH5高级教程：H5交互进阶,打字机效果

1、iH5高级教程：H5交互进阶，打字机效果第一步：添加素材1、选中舞台，点击音乐工具，添加背景音乐素材，音乐属性设为自动播放YES,同样添加打字机声音的音乐素材，音乐属性设为自动播放NO（因为只有在打字机动的时候才有声曰）纯音乐那些花儿打字机的声音选中舞台，点击图片工具国，添加打字机图片。选中打字机图片，添加两个音乐按钮图片。按钮灰在按钮红的上面，即打开作品首先显示按钮灰。J団国打字机B团音扌£齟坝）>si音扌細红）选中按钮灰，点击事件工具，添加2个事件。手指按下，音乐暂停，并且让按钮红盖住按钮灰。触左对象搖下时间目标对象目标动作融岌对象触发条件手指扭下-虾时间b-0|目标对象琏

2、台页面1，打字机音按钮（班）¥臥舞台或对象树选择目标动作同层量底7选中按钮红，点击事件工具，添加2个事件。手指按下，音乐继续播放，并且让按钮灰盖住按钮红。触发对象触发条件按下时间目标耐象音按訊（红）手指按下00l菇台找音乐那些花儿¥扯靈台或对象树选择维续擂啟目标动作>ff2丰指按下-就舞台或对象树选择触岌对象触发条件按下时间目标对象目标动作同层置顶选中舞台，点击时间轴工具。,添加时间轴1（根据这个案例的需要，将时间轴的自动播放和循环播放属性设置为NO,时间轴时长设为65s）,在时间轴下添加1、2、3、4、5图片素材，即打字机中出现的图片，让这些图片成为时间轴1的子对象

3、。同样的方法添加时间轴2,并在它下面添加打字机的GIF图片。时间轴1重命名为24气节，时间轴2重命名为打字。第二步：设置打字出现的效果，为每张图片添加轨迹。然后选中时间轴1下的每张图片，点击工具栏中的轨迹按钮工在轨迹上添加图片运动的关键帧。例如，选中图片1的轨迹添加关键帧，控制图片1的运动。在这个案例中，这些图片是从下到上出现的，所以只需要选中关键帧，修改图片的Y坐标就可以达到向上运动的效果。比如在图片1轨迹1中，0秒关键帧时，图片1的坐标为（0,950），在11秒的地方，添加另一个关键帧，并设置图片1的坐标为（0,-602），这样图片1就在11秒的时间内从Y坐标为950的位置向上移动到了-6

4、02的位置，即视觉上打字机中的图片向上慢慢出现了。醴标0省¥坐标-602C第三步：添加打字机动画选中打字时间轴，添加打字GIF,选中打字GIF,点击轨迹，使打字GIF有左右移动的效果。第一个关键帧和第三个关键帧设置一样。第二个关键帧，gif处于右边。第四步：选中舞台，添加透明按钮14，区域为“按下看清每一步”的大小，或可以拉得更大。添加透明按钮的远影是避免手机由于长按图片会自动跳出保存图片的指令。选中透明按钮，点击事件工具。，添加事件，用户的动作是长按底部按钮时，打字针会左右运动，同时打字机中的图片向上出现，当手指离开的时候，打字针停止，打字机中的图片也停止向上。手指按下，24时节时

5、间轴继续播放，手指离开，时间轴暂停。手指按下，打字时间轴继续播放，手指离开，时间轴暂停。目标动作遗明按钮目标动作事加触戎对象触岌条件按下时间目标对象VfflO触岌对象触发条件目标对象手指按下，打字声音继续播放，手指离开，声音暂停。W7触发对象触发条件按下时间目标对象透明按钮丰指按下-0舞台打宇机的声音"F就斑台或対象树选揉目标动作触发对象遗明按钮触发条件手指离开目标对象舞台打宇机的声音甌舞台前对象树迭择目标动作暂傳手指按下，打字GIF显示，手指离开，GIF隐藏。手指按下，打字GIF从头播放，手指离开，GIF结束。先行知识：时间轴、事件重点控件：时间轴、事件、GIF、透明按钮重点事件：触发对象：透明按钮触发条件：手指按下目标对象：时间轴目标动作：继续播放触发对象：透明按钮触发条件：手指按下目标对象：时间轴目标动作：暂停TIPS:1、避免长按手机时弹出保存图片提示，可以添加层或透明按钮，挡住下面的图