下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

HTML5实例,如何支持摇一摇功能

作者:课课家教育     来源: http://www.kokojia.com点击数:1277发布时间: 2016-09-03 16:07:25

标签: HTML5教程摇一摇功能HTML5功能

想学设计?来看看大师是如何完成作品的?

     看惯了微信的摇一摇功能,是不是自己也想设置一个摇一摇功能呢,现在很多应用都有摇一摇功能,不单止是微信,QQ也有,360也有。所以,设置摇一摇功能在互联网的应用上已经是很普遍了。这次我们课课家教育将为大家带来的是:HTML5技术教程如何支持摇一摇,摇一摇功能,我们也可以自己研发出来。希望大家能够喜欢这个教程。谢谢大家。

  摇一摇功能:这是一个能够实现手机陀螺仪功能,当我们摇摆手机的时候,就已经可以触发某个操作。如下图所示:

HTML5实例,如何支持摇一摇功能_HTML5教程_摇一摇功能_HTML5功能_课课家

  实例讲解:如何支持摇一摇功能。

  步骤1:首先我们需要在舞台上,输入一下文字,小编在这里输入的文字是:“摇一摇”,如下图所示:

在舞台上输入“摇一摇”文字

  步骤2:我们就应该在图层0的第20帧处输入“摇成功啦!”这样子的文字(这是一种显示成功的语言,大家也可以添加其他的,意思相同即可),如下图所示:

在图层0的第20帧处输入“摇成功啦!”这样的文字

  步骤3:我们需要选中舞台“摇一摇”文字(这是非常重要的,不然的话,就算是摇了也没用),然后在属性面板上把动作设置为【行为】,我们就在点击【编辑】进入编辑行为对话框,展开播放控制,选择【跳转并停止】,然后展开事件选择【摇一摇】,如下图所示:

选中舞台“摇一摇”文字

  步骤4:然后我们需要点击【编辑】的按钮,把【帧号】设置为20(这里的话,其实你也可以设置帧号大一些,只不过这些需要别人摇大力点而已,小编觉得,20已经是适当的帧号了,所以还是要20妥当一点。),然后点击【确认】的按钮,如下图所示:

把【帧号】设置为20

  步骤5:然后我们应该在播放控制里,点击【暂停】的按钮,然后再把事件设置为【出现】,如下图所示:

点击【暂停】,然后把事件设置为【出现】

  步骤6:最后我们要先保存,然后再用自己的手机微信扫描一下二维码,摇一摇试试……恭喜大家,就是这样子已经成功啦!(最后是非常惊喜的,希望大家都能够做到这一步),如下图所示:

再用手机微信扫描二维码

  小编结语:相信大家看完这个教程之后,都会觉得挺简单吧,摇一摇功能很多app软件都会有,如果你有兴趣,你也可以自己设置一个尝试一下的,最重要的是千万不要粗心而忘记了其中的步骤。最后感谢大家支持我们课课家教育,如果大家还想了解更多更精彩的教程,那么欢迎继续关注我们课课家教育,我们将为大家带来更多更精彩的教育咨询。

赞(0)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程