HTML5:Animate cc交互功能之跳转下一帧

原创 2018年04月15日 15:30:03

一 、实现用户交互功能(点击按钮跳转下一帧)

S.gotoAndStop解释:跳转到舞台上的某一帧并停止

S.gotoAndPlay解释:跳转到舞台上的某一帧并开始播放下一帧

方法1:跳转帧数

if (!S.next_btn1.hasEventListener("click"))
{
 S.next_btn1.addEventListener("click",menu_rxs)
}
function menu_rxs(){
	S.gotoAndStop(0);
}

方法2:封装下一帧事件

nextEvent = function (event)

{
	event.currentTarget.removeEventListener("click", nextEvent);//返回绑定事件的元素,布尔值
	numframe = S.currentFrame;
	S.gotoAndPlay(numframe + 1);

}
if (!S.start_btn.hasEventListener("click"))
{
    S.start_btn.addEventListener("click", nextEvent);

}

注意:要写在第0帧的最开始位置

方法3:帧标记进行跳转

if (!S.next_btn1.hasEventListener("click"))
{
    S.next_btn1.addEventListener("click",menu_rxs)
}
function menu_rxs(){
    S.gotoAndStop("menu");
}

menu是你在帧上面创建的小旗子,可以自己定义


HTML5:Animate cc交互功能之全屏化

1.实现效果图,如下:点击进入:全屏再点击退出:全屏2.代码如下:a.对webkit、moz、ms等浏览器做个兼容处理 function fulls_btn_h(e) { var isFu...
  • wrk2466836002
  • wrk2466836002
  • 2018-04-16 14:45:05
  • 17

HTML5:Animate cc交互之视频自动播放跳转下一帧

1.实现功能一个视频在播放,播放结束后,才能跳转下一帧,播放第2个视频,并跳到第3帧是没有按钮的!2.步骤:a.第一帧 this.frame_4 = function() { S = this; ...
  • wrk2466836002
  • wrk2466836002
  • 2018-04-16 20:58:45
  • 13

【CreateJS】WebStorm+Adobe Animate CC 搭配开发HTML5,入门教程

前提环境: ①安装好Adobe Animate CC ②安装好WebStorm,或者Sublime Text 2,Visual Studio Code之类的编程ide 流程:...
  • arvin0
  • arvin0
  • 2016-07-26 11:03:51
  • 16933

教你一招让你高效搞定高品质的H5交互动画

一般在H5开发流程中,都是交互动画设计师利用Animate cc(即原来的Flash)把动画的原型设计出来,然后交付给UI部门进行开发实现效果。而做过动画开发的UI都知道搞动画开发是较为耗时费力的,而...
  • yylurex
  • yylurex
  • 2017-05-08 15:58:12
  • 3235

Adobe Animate CC 在图形中添加交互性代码

最近在研究HTML Canvas,涉及到Adobe Animate CC的使用,看了一下官方文档,很繁琐,下面简单的总结了一下在图形中添加交互性代码的方法。AnimateCC在图形中添加交互性代码的方...
  • qq_36173194
  • qq_36173194
  • 2018-03-03 15:51:24
  • 176

html5动画制作工具Adobe Edge Animate

由于本人工作需要,需要做一些ipad杂志,杂志里需要一些动态效果,ipad不兼容flash,所以html5,css3在ipad动画特效中是一个很好的解决方案。偶尔接触到adobe新推出的 Edge A...
  • just_do_it2009
  • just_do_it2009
  • 2013-04-23 10:19:00
  • 2036

Adobe Animate:创建HTML5动画01软件基本问题

目前用的是Adobe Edge Animate cc 2015版 ,刚刚接触记录一些简单的操作步骤。 Adobe Edge Animate中文操作手册 :http://www.docin.com/...
  • ymc_webpack
  • ymc_webpack
  • 2017-02-17 09:48:30
  • 396

Adobe Animate CC 2017经典教程(epub版-高清文字-kindle)

  • 2017年11月07日 17:01
  • 30.83MB
  • 下载

Animate CC 2018绿色中文版 32位&64位(附破解文件)

点击下载Animate CC 2018绿色中文版 Animate CC 2018中文版(原Adobe Flash Professional CC)是一款二维动画设计软件,适用于网页、数位出版、多媒体...
  • chenjiajunlkj
  • chenjiajunlkj
  • 2018-01-19 11:45:52
  • 398

Edge Animate轻松制作HTML5动画教程及源码

  • 2015年11月21日 13:37
  • 8.12MB
  • 下载
收藏助手
不良信息举报
您举报文章:HTML5:Animate cc交互功能之跳转下一帧
举报原因:
原因补充:

(最多只允许输入30个字)