资源描述：
《iH5高级教程：H5数据应用,实现H5弹幕特效》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。
1、iH5高级教程：H5数据应用，实现H5弹幕特效步骤:第一步：准备素材1.选中舞台，点击页面工具□,新建一个页面。2.选中页面，点击屮文字休工具字，添加儿个屮文字体，分别是“推荐阅读”、“港冏倒计吋……”、“和•新片……”和“泰冏带火了……”，并在后面3个标题下添加3个图标。这个是后面将用作点击跳转外部网站链接用的。3.选中页面，点击图片工具，添加一张按钮图片，在按钮下添加一个开关,这是后而将用来控制弹幕显示的开关。第二步：制作背景动画1•选中页面，点击时间轴工具,添加一个时间轴，设置口动播放和循环播放并将其重命名为背景时间轴。选中时间轴，点击图片工具，添加5张背
2、景图。笫一张与最后一张是一样的。2.为前4张背景图添加轨迹。每张图片的轨迹添加两个关键帧，关键帧1的透明度是100,关键帧2的透明度是0。制作过渡效杲。4钿肯事时就■•Ml4^1•律・«»第三步：添加跳转外链事件在标题1,标题2和标题3下分别添加一个事件。跳转外链的事件的触发条件是轻触，目标对彖是。舞台，目标动作是打开网页，资源位置则是我们耍跳传的链接，可以门行输入，本案例中跳转一个文章链接。除了触发对象和资源位置以外，3个事件是一样的。第四步：制作控制弹幕发送输入框和弹幕内容的开关事件1•选屮页而1,点击透明按钮工具,在舞台上画一个框，添加透明按钮作为弹幕容器
3、，并重命名为弹幕容器，然后在弹幕容器卜-添加一个发表框图片,再选中“弹幕容器“透明按钮，添加淡入和淡出的动效，设置自动播放为NO,让其不会自动播放。2.选中弹幕容器，点击图片工具■，上传发表框图片。选中发表框图片，点击输入框工貝回，添加一个输入框，将其透明背景设置为YES,这样输入框的背景就会变成透明。最大长度[181$透明背景QVUONOI3.选屮输入框，点击事件工具，添加一个事件，触发条件为轻触，目标对彖为输入框1,目标动作为清除文字。然后这里可以先添加一个发送的图片按钮,即图中发表框的“3”。事件1■■■■■■■■■触发对象触发条件目标对象轻触〔手机中—y
4、務台•页面1•弹驀咨器•发表框输入框1y匚从亀台或对ft树选择二］目标动作蒼除文宇1y1.选屮按钮图片，点击计数器工具，添加一个计数器。选屮开关按钮，添加一个事件，触发条件为手指按F（或轻触），目标对象为计数，器，目标动作是加1。曲于计数器用來判断弹幕的显示和隐藏，计数器下添加4个事件，当计数器为奇数吋，开关拨向off,弹幕容器及其子对象隐藏；当计数器为偶数吋，开关拨向on,弹幕容器及其子对象显示。5.选中计数器，点击事件工具添加4个事件。计数器下事件1的触发条件是为奇数，目标对象是开关图片，目标动作是设置属性，改变计数器的x坐标为75px。计数器下的事件2的触
5、发条件是为偶数，口标对象是开关图片，口标动作是设置属性，恢复计数器的x处标为19pxo这样当用手指点开关时，计数器会加1（即为奇数），开关会拨至off处，再点一次则计数器加1变成偶数,所以开关会拨向on。事件2触发对象触发柔件目标对飲为偶数V聂台页面1按胡•开关V从算台或对象树迭择目标动作X坐标设贵属性V1196.计数器下事件3的触发条件是为奇数，口标动作是“弹幕容器”对象淡出的动效，目标动作是开始。计数器下事件4的触发条件是为偶奇数，目标动作是“弹幕容器”对彖淡入的动效，目标动作是开始。这样当用手指点开关时，计数器会加1（即为奇数），弹幕容器里的所有内容会隐藏
6、，再点一次则计数器加1变成偶数，弹幕容器里所冇内容会显示。第五步：制作弹幕播放效果1•选中页面1下的弹幕容器，点击时间轴工具e,添加一个时间轴，重命名为弹幕吋间轴。在弹幕吋间轴下添加10个文本并设置文本属性的记录文本为YES,文本内容可以根拯需要输入原始的弹幕内容。■J弹幕时间紬>回T文和。p叼T文本9「0T文本8JT姑7卜2T'文本6「JT姑5!JT姑4D回T姑3>0T文本2但T如记录文字□ns2.10个文本的10个文本实际上就是案例播放时的弹幕，文本内容将会被输入的最新内容替换。而这些弹幕的移动实际上只是横向的位移，从右到做移动,制作时我们只需要在两个关键
7、帧中改变文本的X轴坐标即可。•Jt?S$3/"中1^3Ji行般2吃耐2W件1/耳tmi八肿咖心百竝r転転如如文炖炖fit伽枷申OOOOsl•2恥》*n5si/s技配vtna八、奔耐21戶牡T入/亠岌衰B/#・R囲T如oT文扔TETN?TEjTW『T文拿3/r»2如牛〒讣I....!hdU.0
8、x坐标-370Y坐标357360高120初怕可见QVltQ9«OI55切DNO〔无背罗濒色背早濒色10000s
9、u10000sg文本10文本9文本8文本7文本6文本5文本4文本3文本2文本1煮15台“页面1八S.按忸・1计数器1开关•J4弹幕苔吉/*漬出"入丿乙发劇5-J厂
10、弹藉册间轴文本10T文本
