Using the syntax of ActionScript to write the second html5--, using a sprite to achieve animation

In the previous article, I have imitated as, joined the Lbitmap and Lbitmapdata classes, and used them to achieve the display of static pictures.
This time use a sprite to animate the picture.
Still follow the previous idea of handling the display object, add the Lsprite class, and append the Show method, as follows:

functionLsprite () {varSelf = This; Self.type= "Lsprite"; Self.x= 0; Self.y= 0; Self.visible=true; Self.childlist=NewArray ()} Lsprite.prototype={show:function(cood) {if(cood==NULL) cood={x:0,y:0}; varSelf = This; if(!self.visible)return; Lglobal.show (self.childlist,{x:self.x+cood.x,y:self.y+cood.y}); }, AddChild:function(displayobject) {varSelf = This;    Self.childList.push (Displayobject); }}

Because the sprite can have other visible objects such as pictures, I added Childlist in its constructor to hold all the objects above it. Then, when invoking its own Show method, it lglobal its sub-objects in a loop.
In this way, the code for the image shown in our previous article can also be displayed with a Sprite, with the following code:

 function   main () {loader  = new   Lloader ();    Loader.addeventlistener (Levent.complete,loadbitmapdata); Loader.load ( "1.png", "BitmapData"  function   Loadbitmapdata (event) { var  bitmapdata =    Span style= "COLOR: #0000ff" >new   Lbitmapdata (loader.content);  var  mapimg = new   Lbitmap (BitmapData);  var  backlayer = new   Lsprite ();    AddChild (Backlayer); Backlayer.addchild (mapimg);}  

We know that the sprite in ActionScript can add the Enterframe event to animate the picture, and I'll imitate it here, because the Show method in the Lsprite class is constantly looping, so I just need to call a method in the Show method constantly, You can make it loop.
I assume that there is an array that stores all the methods that are constantly looping, and then I can loop through the array in the Show method, so that the loop of all the methods is reached, see below

functionLsprite () {varSelf = This; Self.type= "Lsprite"; Self.x= 0; Self.y= 0; Self.visible=true; Self.childlist=NewArray () self.framelist=NewArray ();} Lsprite.prototype={show:function(cood) {if(cood==NULL) cood={x:0,y:0}; varSelf = This; if(!self.visible)return; Lglobal.show (self.childlist,{x:self.x+cood.x,y:self.y+cood.y});    Self.loopframe (); }, Loopframe:function (){        varSelf = This; varkey;  for(Keyinchself.framelist)        {Self.framelist[key] (); }}, AddChild:function(displayobject) {varSelf = This;    Self.childList.push (Displayobject); }}

The light hypothesis is certainly not possible, we need to have a way to add this loop event, so we also need to addeventlistener the method, and the RemoveEventListener method to remove the event

AddEventListener:function(type,listener) {varSelf = This; if(Type = =levent.enter_frame)        {Self.frameList.push (listener); }}, RemoveEventListener:function(type,listener) {varSelf = This; varI,length =self.frameList.length;  for(i=0;i<length;i++){            if(Type = =levent.enter_frame) {Self.frameList.splice (i,1);  Break; }        }    }

The addition is added, then, to simply implement a character's walking diagram
First, add a few methods to the BitmapData class to change the location of the image display area, etc.

 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; }    }

All right, now, prepare a picture of a man's walk, and let it move.

varList =NewArray ();varindex = 0;varmapimg;varLoadervarImagearray;varAnimeindex = 0;varDirindex = 0;varDirarr =NewArray ({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});functionMain () {loader=NewLloader ();    Loader.addeventlistener (Levent.complete,loadbitmapdata); Loader.load ("1.png", "BitmapData");}functionLoadbitmapdata (event) {varBitmapData =NewLbitmapdata (loader.content,0,0,70,92); Imagearray= Lglobal.dividecoordinate (bitmapdata.image.width,bitmapdata.image.height,8,8); Mapimg=NewLbitmap (BitmapData); mapimg.x= 100; Mapimg.bitmapData.setCoordinate (0,0); Index= 0; varBacklayer =NewLsprite ();    AddChild (Backlayer);    Backlayer.addchild (MAPIMG); Backlayer.addeventlistener (Levent.enter_frame, Onframe)}functionOnframe () {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; }}

effect see below URL, see the effect of please download support HTML5 browser
Http://fsanguo.comoj.com/html5/jstoas01/index.html
Source words, directly with the browser can be viewed, the earth people know


In the next article, the study of mouse events

Using the syntax of ActionScript to write the second html5--, using a sprite to achieve animation