关于H5制作,你不得不知道的10个Tips

111.png

1、作品在手机上看很流畅,在电脑上看很卡,怎么办?


手机性能不比电脑,所以看案例会感觉慢。下面介绍几种提升播放速度的方法。


方法一:上传图片的大小控制在100k-200k之间,推荐一个网站压缩图片www.tinypng.com。另外最后发布案例时可以用编辑器上方的“发布”按钮整体优化作品的图片。

方法二:若作品使用了滑动时间轴,在设定滑动时间轴的时候尽量只在需要时显示图片,不要同时显示很多张图片。(即属性里的开始显示和结束显示设为NO)

方法三:用时间轴设置某些物体运动时,尽量避免在同一时间点设置太多关键帧,可以设置关键帧错开一些同时的点。

方法四:调整时间轴精度,调到70%-80%,既不会影响播放速度,又可以提高案例流畅性。(教学视频:www.ih5.cn/idea/tB-oFLJ)

 

2、预览的时候作品空白,怎么办?


可能存在以下几种情况,请一一排查:


(1)第一个页面(对象树最底下的那个页面)本来是个空白页面。

(2)第一个页面上的对象素材初始可见都是NO。

(3)页面上有时间轴,但是忘记开启时间轴自动播放YES。

(4)页面上有时间轴,但是时间轴的开始显示和结束显示都为NO。

(5)有时候是网速问题,再预览一次试试。

 

3、作品浏览时,有时会显示一个白块,怎么办?


一般是缓冲问题,作品的流畅播放与作品大小和网速有很大关系。

建议对作品做优化,优化图片大小,或上传图片时注意尽量使用200k以下的图片,另外在wifi状态下打开作品。

 

4、添加音乐之后,没有声音怎么办?


你用的是360浏览器等非原生浏览器,它对音乐支持功能很弱,因此建议更换谷歌或火狐浏览器。音乐自动播放属性在PC和微信都是直接播放的,但如果是在手机浏览器打开,音乐是不能自动播放的,请使用点击或手机按下事件来触发音乐的播放。

 

5、为什么上传视频之后,视频只有声音,没有图像?


视频的格式不对,iH5支持的格式是MP4格式H264编码,如果不是该编码,可用软件转一下。另外iPhone若无法控制视频播放视频,可在视频的属性窗口找到“控制条”,将其设置为YES。

 

6、如何控制音乐暂停和播放?提示的箭头动画怎么做?


可以使用事件控制音乐的暂停和播放。事件可以通过按下按钮、滑动时间轴、舞台初始化等方式触发,“触发对象”选择所要控制的音频对象,“目标动作”选择“继续播放”或“暂停播放”即可。值得注意的是,在除微信以外的手机浏览器浏览iH5案例,音频属性里的“自动播放”会无效,所以需要使用事件来控制播放。


提示的箭头动画可以在网站的精品模板中找到,名字是“箭头素材”。下载模板后跨案例复制即可使用。

 

7、可以做重力感应的作品么?


可以。在舞台下添加事件,属性面板的“触发条件”里有“摇动手机”、“左/右/前/后倾手机”、“竖置手机”等选项,可以通过这些事件制作重力感应的相关作品。


(案例可参考“摇一摇抽奖”教学视频:

http://file.vxplo.cn/learning/template/1508263.mp4)

 

8、怎么设置转发出去的可变标题?


首先,把需要改动的内容和变量绑定,比如在输入框/文本/计数器的属性面板中绑定变量。然后添加事件,事件的目标对象选为“舞台”,目标动作选择“微信设定标题”,在值当中加入“$+变量名称”,比如“$a在测试中得到了$b的高分”。当事件触发的时候,微信分享和朋友圈的标题就会包含所需要的内容。


(教学视频:http://file.ih5.cn/?nid=901745&key=58400d70cd&title=5pWZ5a2m5Yid57qn56.H&html5=true&width=720&logo=1&v=32&slink=/idea/learn02)

 

9、怎么将个人微信头像设置为分享截图?


(1)添加一个文本和变量,变量1绑定文本1。

(2)添加一张图片1,在舞台下添加事件,触发条件为“初始化完成”,目标对象选择“舞台.图片1”,目标动作选择“获取微信头像”。

(3)添加用于获取属性的按钮1,在按钮1下添加事件,事件的目标对象选为“舞台.图片1”,目标动作选择“获取属性”,第一个属性名字选择“资源位置”,第二个属性名字选择“舞台.变量1”。

(4)添加用于设定截图的按钮2,在按钮2下添加事件,事件的目标对象选择“舞台”,目标动作选择“微信设定截图”,资源位置设为“$+变量名称”。

(5)点击按钮1,获取图片的资源位置,点击按钮2,可以设置截图的位置,转发后就可以看到个人微信头像变成了分享截图。

(教学视频:http://file.ih5.cn/files/68141/16849/d64a27.mp4)

 

10、随机页面如何不重复显示?


(1)添加一个2维变量,假设变量名称设为a,值为“2,3,4,5”(假设共5个页面,数字分别表示页面2,页面3,页面4,页面5),1行4列。

(2)添加若干页面(假设5个页面),除页面1外,在其他页面下添加事件,目标动作为“赋值数值”,赋值为0,行设为1,页面2、页面3、页面4、页面5的列分别设为1,2,3,4。

(3)添加一个按钮,目标对象选择“舞台”,目标动作选择“跳转页面”,页面选择“随机页面”,包含页面设置为“$a[1][1], $a[1][2], $a[1][3], $a[1][4]”,其中,$a[1][1]表示变量a的第1行第1列,其余同理。

(4)设置完成后点击按钮,随机页面就不会重复显示。

(教学视频:http://file.ih5.cn/files/68141/16849/aa0126.mp4)

文章来源:iH5

链接:http://mp.weixin.qq.com/s?__biz=MzI0NjA2NDI2MA==&mid=402392891&idx=3&sn=0736c84c48c756e73f9a7c13a8c3cd13&scene=1&srcid=0314Ov6o69WQQYv9t6F4F3VP#wechat_redirect


本站文章均由 HTML5梦工场 编辑从其他媒体精选HTML5相关文章转载,仅供网友学习和交流,如果我们的工作有侵犯到您的权益,请及时联系小编QQ:123464386,我们会在第一时间进行处理!投稿与合作,请发至邮箱:tommy@html5dw.com