
iH5中级教程:微场景H5必备.docx
17页iH5中级教程:微场景H5必备,横向滑动切换第一步:1、选中舞台,点击工具栏页面工具,添加五个页面■ 豔台口丽5口页面4口页面M口页面2£页面]2、选中第一个页面,点击工具栏图片工具回,添加窗户的背景图片2、选中页面1,点击时间轴图标添加时间轴13、(1)时间轴下添加箭头图片2)图片下添加轨迹,J 討间轴斗(3) 时间轴总时长0.6秒总时长J^j(4) 为图片添加三个关键帧,通过调整y坐标和透明度,制作箭头指示上滑页 面的效果4、(1)页面1下添加时间轴23)选中时间轴,点击图片工具,添加人物素材5)缩小图片,透明度为0逶明度 ■ (6)点ADD添加关键帧2 / 150.00050.000 s(7 )移动小方块到轨迹1秒的位置,调节图片透明度100逶明度 —<1(8)把图片放大,移动到窗边的位置,点ADD添加关键帧i.on'aj 打 1Q13 亍这样就有人物从无到有出现的效果5、(1)时间轴2里添加两张文字图片 町八时间轴21/03FJ(2)每张图片下都添加一个轨迹■匚页面勺 -P:©时间抽2* 三轨迹1轨迹13)通过设置关键帧,制作文字从两边往中间靠拢的轨迹1)AE42.861 s第二步:1、选中第二页,点击图片工具,添加一张人物图片。
5)选中富文本,添加两个关键帧,调整透明度和位置,使文字会从无到有,2.0Dt)su富文本U-从上到下出现 string of EM 湍7和g drshes, unnvai^dph ilosophy,, a sf)o^ a e jbr 她巒d have chefAirdtie Chitivg p&sino^if ro be a cuhna^y supers rar0.000s第三步:1、选中页面3,点击工具栏滑动时间轴工具',在舞台上画一个区域,添加滑 动时间轴,滑动时间轴与舞台一样尺寸■页面3□r滑动时间轴12、选中滑动时间轴,点击透明按钮工具*,在舞台上画一个区域,添加透明按 钮,此透明按钮宽3200,高1008,是一个比舞台宽的长方形页面3-izr滔动时间轴1/亠诱朋按钮13、选中透明按钮,点击工具栏图片工具,添加 6 张食物的图片作为子对象6 张图片平铺在透明按钮上,其中第一张图片和第六张图片是同一个食物图片前 后图片一样才能在循环播放时前后衔接4、选中透明按钮,点击轨迹工具添加轨迹,点击 ADD 添加关键帧J 页面31.000s-640,0)(-1280,・J 冒动时间樹“ J 透明按钮'透日月按1>钮1-L2803.000 50越标 y坐标x坐标y坐标-1920钮1X坐标 -2560■/坐标 [o-*■4■ ■ ■-3200y■坐标*左1V2、滑动时间轴属性面板设置,总时长5秒,循环播放yes,滑动放大比例0.2, 滑动方向左,自动跳转控制点 YES。
总时长5伸不播放3 百 n ::骨动放犬比例0.2自动跳转控制点arts3 HO '骨动方向 左I滑动放大比例越小,动画越平稳,越大,速度越快自动跳转控制点就是滑一下 屏幕,自动跳到下一个关键帧的状态第四步:1、选中滑动时间轴,点击富文本工具,添加6个富文本 页面M-/申滑动时间轴’/「富文本6富文本弓富文本4口富文本?富文本-2、选中富文本,点击工具栏轨迹工具,每个富文本都添加一个轨迹/ 晋动时间轴1 丿d「富文本E 三就迹1J 富文不5三轼迹“ 富文本4三轨诬1-* 富文本3三轨迹1“ 富文本2三01迹1“ 富文本1三放迹13、在对应食物图片的关键帧处添加富文本的关键帧富文本的轨迹属性面板, 开始显示、结束显示为NO,即当图片1显示的时候,富文本1显示,其他时间均不显示开始显示结束显示自动惇止自动播完4、滑动时间轴下,添加碟子图片作为遮罩装饰为食物添加碟子阴影的效果盲文本2轨曲轨迹1页面2宴文本4 圭轨迹■!* 這文本"孑喷前1 碟子.1 2 3 4 5 65、页面 3 下添加时间轴,时间轴下添加箭头图片,为箭头图片添加轨迹第五步:1、 选中页面4,点击时间轴工具,添加时间轴上页面4时间釉12、 时间轴下添加宽度大于舞台的图片,图片下添加轨迹,图片往左移动。
页面4-7 时间轴1页面5# 页面4包动瘩枚| S vk ]> e总时长10A芯小 E MF2、选中时间轴,点击工具栏事件工具,添加事件,时间轴结束,目标对象时间 轴,目标动作反向播放3、页面 4 下添加时间轴,控制富文本从上往下显示41AFCtlurwM J iH jWf* f 肩文庶1就迹;屛便曲时间轴1/ 事件r八,* 三轨迹1 负面:J□页面2页面】“ 舞台□页面5J 页面山…时闾禅0.179 5Hi富文応* 更面a・时囘轴2富文本,轲迹]d昼:广时IBlffll7 筝件1* J 4轨诺页面3页面2頁面14.000s第六步:页面5 下添加时间轴,时间轴控制富文本从下往上、从无到有显示第 一个关键帧透明度为 0,第二个关键帧透明度为 100"□页面5■回(5时间轴4」■
如果时间设得长,那么自动跳转的时间便会慢TIPS:1、在时间轴与滑动时间轴里,如果希望循环播放可以前后衔接,应该使第一个 关键帧和最后一个关键帧控制图片的状态一致2、需要制作图片移动切换的效果,可以添加一个透明按钮,透明按钮下平铺多 张图片子对象,轨迹控制透明按钮移动,多张图片即可移动切换相关事件: 触发对象:时间轴触发条件:结束目标对象:时间轴 目标动作:反向播放 时间轴控制白色墙向左移动,时间轴结束后,反向播放,即白色墙向右移动[文档可能无法思考全面,请浏览后下载,另外祝您生活愉快,工作顺利,万事如 !]。












