HTML5:Animate cc交互功能之制作单选框(开关)

原创 2018年04月16日 14:09:43

1.需要实现的效果


2.步骤:

a.实现点击功能

		S.xld_btn1.txt.text="";//先将单选框的文本清空
		//S.xld_btn1.txt.text是舞台上的"xld_btn1影片剪辑",txt是指文字,text指文字内容
		if(!S.xld_btn1.btn_0.hasEventListener("click", xld_btn1Event))
		{
			S.xld_btn1.btn_0.addEventListener("click", xld_btn1Event);//点击btn0,跳到点击事件xld_btn1Event
		}

b.实现开关

		function xld_btn1Event(e)
		{
			if(S.xld_btn1.currentFrame==0)//判断影片剪辑这个元件里面的帧数为,当前帧为0帧的时候
			{
				S.xld_btn1.gotoAndStop("frame2");//让影片剪辑里的帧数,跳转到frame2,也就是打开
				for(i=1;i<3;i++)
				{
					if(!S["xld_btn1"]["btn_"+i].hasEventListener("click",xld_btn_Click))
					{
						S["xld_btn1"]["btn_"+i].addEventListener("click",xld_btn_Click);//给btn1、2按钮2个点击事件
					}
					
				}
			}
			else
			{
				for(i=1;i<3;i++)
				{
					S["xld_btn1"]["btn_"+i].removeEventListener("click",xld_btn_Click);//删除点击事件
				}
				S.xld_btn1.gotoAndStop("frame1");//回到第0帧,也就是关闭
			}
		}

c.判断对错,和,插入单选框相应的文本

		function xld_btn_Click(e)
		{
			S.xld_btn1.btn_0.removeEventListener("click", xld_btn1Event);//删除xld_btn1Event事件
			for(i=1;i<3;i++)
			{
				S["xld_btn1"]["btn_"+i].removeEventListener("click",xld_btn_Click);//删除btn1、2点击事件
			}
			num=e.currentTarget.name.charAt(4);//获取当前元件名字、截取第4位也就是1,2
			if(num==1)//如果点击的是btn1
			{
				S.xld_btn1.txt.text="阳性";
				alert("选择有误,正确答案应该为阳性")
			}
			else//也就是点击的是btn2
			{
				S.xld_btn1.txt.text="阳性";
				alert("选择正确");
			}
			S.xld_btn1.gotoAndStop("frame1");//让xld_btn1这个影片剪辑,在第0帧停止播放
			S.gotoAndPlay();//继续播放
		}



30分钟轻松制作HTML5交互动画

-
  • 1970年01月01日 08:00

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

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

【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
  • 16946

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

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

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 CC 在图形中添加交互性代码

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

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

  • 2015年11月21日 13:37
  • 8.12MB
  • 下载

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
  • 401

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

  • 2017年11月07日 17:01
  • 30.83MB
  • 下载
收藏助手
不良信息举报
您举报文章:HTML5:Animate cc交互功能之制作单选框(开关)
举报原因:
原因补充:

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