上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示。
这次用Sprite来动态显示图片。
依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并追加show方法,如下:
- function LSprite(){
- var self = this;
- self.type = "LSprite";
- self.x = 0;
- self.y = 0;
- self.visible=true;
- self.childList = new Array()
- }
- LSprite.prototype = {
- show:function (cood){
- if(cood==null)cood={x:0,y:0};
- var self = this;
- if(!self.visible)return;
- LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});
- },
- addChild:function (DisplayObject){
- var self = this;
- self.childList.push(DisplayObject);
- }
- }
因为Sprite上可以有图片等其他的可显示对象,所以我在其构造函数里,添加了childList,用来保存它上面的所有对象。然后在调用它本身的show方法的时候,将其LGlobal循环现实其子对象。这样一来,我们上一篇中显示图片的代码,也可以利用Sprite来显示了,代码如下:
- function main(){
- loader = new LLoader();
- loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
- loader.load("1.png","bitmapData");
- }
- function loadBitmapdata(event){
- var bitmapdata = new LBitmapData(loader.content);
- var mapimg = new LBitmap(bitmapdata);
-
- var backLayer = new LSprite();
- addChild(backLayer);
- backLayer.addChild(mapimg);
- }
我们知道,actionscript中的Sprite可以添加EnterFrame事件,用来动态显示图片,我这里也来模仿一下,因为在LSprite类中show方法是不断循环的,所以,我只需要在show方法中不断调用一个方法,就能让其循环。我假设有一个数组,里面存储了所有不断循环的所有方法,然后我就可以在show方法中循环这个数组,这样就达到了所有方法的循环,看下面
- function LSprite(){
- var self = this;
- self.type = "LSprite";
- self.x = 0;
- self.y = 0;
- self.visible=true;
- self.childList = new Array()
- self.frameList = new Array();
- }
- LSprite.prototype = {
- show:function (cood){
- if(cood==null)cood={x:0,y:0};
- var self = this;
- if(!self.visible)return;
- LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});
- self.loopframe();
- },
- loopframe:function (){
- var self = this;
- var key;
- for(key in self.frameList){
- self.frameList[key]();
- }
- },
- addChild:function (DisplayObject){
- var self = this;
- self.childList.push(DisplayObject);
- }
- }
光假设当然是不行的,我们需要有添加这个循环事件的方法,所以我们还需要addEventListener方法,以及移除这个事件的removeEventListener方法
- addEventListener:function (type,listener){
- var self = this;
- if(type == LEvent.ENTER_FRAME){
- self.frameList.push(listener);
- }
- },
- removeEventListener:function (type,listener){
- var self = this;
- var i,length = self.frameList.length;
- for(i=0;i<length;i++){
- if(type == LEvent.ENTER_FRAME){
- self.frameList.splice(i,1);
- break;
- }
- }
- }
该添加的都添加了,接下来,就来简单实现一个人物的行走图先来给BitmapData类添加几个方法,用来改变图片显示的区域位置等
- LBitmapData.prototype = {
- setProperties:function (x,y,width,height){
- var self = this;
- self.x = x;
- self.y = y;
- self.width = width;
- self.height = height;
- },
- setCoordinate:function (x,y){
- var self = this;
- self.x = x;
- self.y = y;
- }
- }
好了,现在准备一张人物的行走图,这就让它动起来
- var list = new Array();
- var index = 0;
- var mapimg;
- var loader
- var imageArray;
- var animeIndex = 0;
- var dirindex = 0;
- var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});
- function main(){
- loader = new LLoader();
- loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
- loader.load("1.png","bitmapData");
- }
- function loadBitmapdata(event){
- var bitmapdata = new LBitmapData(loader.content,0,0,70,92);
- imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);
- mapimg = new LBitmap(bitmapdata);
- mapimg.x = 100;
- mapimg.bitmapData.setCoordinate(0,0);
- index = 0;
- var backLayer = new LSprite();
- addChild(backLayer);
- backLayer.addChild(mapimg);
- backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)
- }
-
-
- function onframe(){
- index++;
- if(index >= imageArray[0].length){
- index = 0;
- }
- mapimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);
-
- mapimg.x += dirarr[dirindex].x*3;
- mapimg.y += dirarr[dirindex].y*3;
- if(animeIndex++ > 20){
- dirindex++;
- if(dirindex > 3)dirindex = 0;
- animeIndex = 0;
- }
- }
效果看下面的url,看不到效果的请下载支持html5的浏览器http://fsanguo.comoj.com/html5/jstoas01/index.html源码的话,直接用浏览器就可以查看了,地球人都知道
分享到:
相关推荐
《精通Flex 3.0——基于ActionScript 3.0实现》一书源代码。 Flex 3.0 ActionScript 3.0源代码 Flex 3.0源代码。 --------------------------- 第1篇 Flex技术概述 第1章 Flex概述 3 1.1 Flex简介 3 1.2 Flex...
actionscript 3.0基础语法讲解。
C语言典型应用系统之——聊天室(ActionScript 3.0实现),用以共享,相互交流!
详细讲解flash开发中用到的ActionScript动作脚本。
ActionScript 3.0语法参考手册,希望对大家有帮助
第2篇 ActionScript3.0面向对象特性 第4章 ActionScript3.0面向对象编程 第5章 ActionScript3.0中的String对象 第6章 ActionScript3.0中的Array类型 第7章 ActionScript3.0中的日期和时间 第8章 ...
利用ActionScript实现Flash开发游戏.pdf
Flash_ActionScript语法综合
[Flash.ActionScript.3.0动画教程],这是一本由Keith Peters编写的一本动画设计教材,此书要求读者对as2.0要有比较深的了解,主要讲解的是动画相关的原理。绝对有价值的一本书。 目录如下: 第一部分ActionScript...
该控件用Flash CS4+ActionScript3写成,能在网页上方便调用,用FlashVars参数传入图片路径。 该控件涉及了很多AS3画图的知识点。实现了加载图片,过度平滑,能通过调整SliderBar对加载的相片随意放大缩小等功能。对...
学习AS3.0的最佳教程。 里面详细讲述了as3.0制作各种动画的实例和原理。
ActionScript语法参考手册,保留看看。资料太老,不建议看
第2篇ActionScript3.0面向对象特性 第4章ActionScript3.0面向对象编程 74 4.1面向对象编程 74 4.1.1对象的世界 74 4.1.2具体与抽象 75 4.2类 75 4.2.1类的定义 76 4.2.2类的属性 78 4.2.3类的方法 80 4.2.4对象成员...
第1~5章介绍了 ActionScript 3.0的基础知识,包括程序编写界面、数据结构、基本语法以及事件机制;第6~9章介绍了ActionScript 3.0的核心——类及以类为基础的面向对象程序设计方法,包括类的基本概念、...
Flash.ActionScript.3.0动画教程源代码
Flash.ActionScript.3.0动画高级教程.pdf
第二章 转向 行为 行为 2D向量(Vector2D)类 机车(Vehicle)类 转向机车(SteeredVehicle)类 寻找行为 避开行为 到达行为 追捕行为 躲避行为 漫游行为 对象回避 路径跟随 群落 总结 第三章 等角 投影 等角投影 等角vs...
Flash actionscript 3.0 动画教程源码
actionscript3动画 人物行走8视角
文档介绍几款市面上成熟的HTML5 动画工具的使用简介。