as3用鼠标拖动图形拼图——灰常简单的教程

2024-06-01 13:58

本文主要是介绍as3用鼠标拖动图形拼图——灰常简单的教程,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

话说这种效果在课件里面经常用到,鼠标拖动事件,一个运用很频繁的事件,一起学习学习吧
首先SWF贡献给大家看看效果


感觉咋样,原理其实还蛮简单的,做做试试吧

下面来看看源码吧
  1. package

  2. {

  3. import flash.display.MovieClip;

  4. import flash.display.Sprite;

  5. import flash.events.Event;

  6. import flash.events.MouseEvent;


  7. public class Main extends MovieClip

  8. {

  9. //声明一个mc变量当临时的容器

  10. private var mc;

  11. //声明一个数组用来存储拖动元件的初始坐标

  12. private var arr:Array = new Array();

  13. //声明一个num数字,用来判断所有图形是否都已经对好了

  14. private var num:uint = 0;

  15. public function Main()

  16. {

  17. //for为所有拖动的对象添加鼠标手型和鼠标按下事件

  18. for (var i:int = 0; i < 4; i++) 
  19. {

  20. //为所有对象添加鼠标手型

  21. this["mc" + i].buttonMode = true;

  22. //为所有对象添加按下事件

  23. this["mc" + i].addEventListener(MouseEvent.MOUSE_DOWN, downHandler);

  24. //http://www.shengshiyouxi.com把所有对象的初始坐标存储进数组里面

  25. arr.push(this["mc" + i].x, this["mc" + i].y);

  26. }

  27. //归位按钮在开始时候隐藏

  28. gw_btn.visible = false;

  29. }

  30. //鼠标按下的方法

  31. private function downHandler(e:MouseEvent):void 

  32. //临时容器mc赋值为当前按下的对象

  33. mc = e.currentTarget;

  34. //开始拖动mc

  35. mc.startDrag();

  36. //把mc对象移动到最上层,这样就不会出现拖动的对象处于未拖动对象的下方了

  37. addChild(mc);

  38. //用stage监听鼠标抬起事件 
  39. stage.addEventListener(MouseEvent.MOUSE_UP, upHandler);

  40. }

  41. //stage鼠标抬起的方法

  42. private function upHandler(e:MouseEvent):void 
  43. {

  44. //mc对象停止拖动

  45. mc.stopDrag(); 
  46. //移除stage的鼠标抬起监听事件

  47. stage.removeEventListener(MouseEvent.MOUSE_UP, upHandler);

  48. //声明uint类型的变量n并赋值为mc对象的名字的第2位往后面的数值,这一步是为了取值被对图的对象的编号

  49. var n:uint = uint(String(mc.name.substr(2))); 
  50. //if语句判断,如果mc碰撞到了对图对象mc_i时执行

  51. if (mc.hitTestObject(this["mc_" + n])) 
  52. {

  53. //mc隐藏

  54. mc.visible = false;

  55. //被碰撞到的mc_i对象停止播放在第二帧上(第二帧就是对图对象的完整界面)

  56. this["mc_" + n].gotoAndStop(2);

  57. //判断的值num加加,用来判断拼图拼对了几次

  58. num++;

  59. }

  60. //如果没有碰撞到mc_i对象

  61. else 
  62. {

  63. //mc的x、y坐标等于数组里面存储的初始坐标,为啥会乘以2呢,你可以自己研究一下

  64. mc.x = arr[n*2];

  65. mc.y = arr[n*2+1]; 
  66. }

  67. //清空mc对象

  68. mc = null; 
  69. //if语句判断,如果num等于4(有四个被拼图的对象,所以这里的判断值为4)

  70. if (num == 4)

  71. {

  72. //归位按钮gw_btn显示

  73. gw_btn.visible = true;

  74. //为归位按钮添加按钮点击事件

  75. gw_btn.addEventListener(MouseEvent.CLICK, clickHandler);


  76. }

  77. //归位按钮的鼠标点击事件

  78. private function clickHandler(e:MouseEvent):void 
  79. {

  80. //当前点击的对象隐藏,也就是归位按钮隐藏

  81. e.currentTarget.visible = false;

  82. //num判断的数值归0,以便于再次判断拼图拼对了几个

  83. num = 0;

  84. //for为mci对象添加隐藏属性为true,x、y坐标为初始坐标,被拼图的对象停止播放在第一帧上面

  85. for (var i:int = 0; i < 4; i++) 
  86. {

  87. this["mc" + i].visible = true;

  88. this["mc" + i].x = arr[i*2];

  89. this["mc" + i].y = arr[i * 2 + 1];

  90. this["mc_" + i].gotoAndStop(1);

  91. }

  92. }

  93. }

  94. }
复制代码
最后送上我的祝福:祝大家

早日成为大神

这篇关于as3用鼠标拖动图形拼图——灰常简单的教程的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1021203

相关文章

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》:本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务,增加、删

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

IDEA自动生成注释模板的配置教程

《IDEA自动生成注释模板的配置教程》本文介绍了如何在IntelliJIDEA中配置类和方法的注释模板,包括自动生成项目名称、包名、日期和时间等内容,以及如何定制参数和返回值的注释格式,需要的朋友可以... 目录项目场景配置方法类注释模板定义类开头的注释步骤类注释效果方法注释模板定义方法开头的注释步骤方法注

Python虚拟环境终极(含PyCharm的使用教程)

《Python虚拟环境终极(含PyCharm的使用教程)》:本文主要介绍Python虚拟环境终极(含PyCharm的使用教程),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录一、为什么需要虚拟环境?二、虚拟环境创建方式对比三、命令行创建虚拟环境(venv)3.1 基础命令3

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例

python连接本地SQL server详细图文教程

《python连接本地SQLserver详细图文教程》在数据分析领域,经常需要从数据库中获取数据进行分析和处理,下面:本文主要介绍python连接本地SQLserver的相关资料,文中通过代码... 目录一.设置本地账号1.新建用户2.开启双重验证3,开启TCP/IP本地服务二js.python连接实例1.

Python 安装和配置flask, flask_cors的图文教程

《Python安装和配置flask,flask_cors的图文教程》:本文主要介绍Python安装和配置flask,flask_cors的图文教程,本文通过图文并茂的形式给大家介绍的非常详细,... 目录一.python安装:二,配置环境变量,三:检查Python安装和环境变量,四:安装flask和flas

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经