JavaScript DHTML/Ajax Layer/Image Clip
Animation based on ImageClip
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - ImageClip</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">
dynapi.library.setPath("./dynapisrc/") dynapi.library.include("dynapi.api") dynapi.library.include("dynapi.fx.MotionX") dynapi.library.include("dynapi.fx.TimerX"); dynapi.library.include("ImageClip");
</script> <script language="Javascript">
var img1 = dynapi.functions.getImage("./dynapiexamples/images/penguin_red.gif"); var img2 = dynapi.functions.getImage("./dynapiexamples/images/penguin_blue.gif"); vp=new DynLayer(null,10,65,500,300,"#FFFFFF"); vp._overflow = "hidden"; redpenguin= new ImageClip({x:100,y:100,w:64,h:64,clipImage:img1,cols:11,rows:2,speed:150}); bluepenguin= new ImageClip({x:400,y:200,w:64,h:64,clipImage:img2,cols:11,rows:2,speed:150}); tree=new DynLayer(null,150,60,207,214) tree.setHTML("<img src="./dynapiexamples/images/tree.gif">") evn= { ontimer : function(e){ // timer event var me,xx=0,yy=0; me=e.getSource(); xx=Math.random()*430; yy=Math.random()*200; me.lpengx=me.x; me.lpengy=me.y; me.pengx=xx; me.pengy=yy; me.slideTo(xx,yy,null,50); }, onmove : function(e){ var me=e.getSource(); var fn=0,col=0 if (me.pengx<=me.x) {col=0}else{col=2} fn=me.fm if (fn==1){fn=2}else{fn=1} me.setFrame(fn+col); me.fm=fn if (me.pengx==me.x && me.pengy==me.y) { if (Math.floor(Math.random()*10)==5) { me.playAnimation(false,"17>18,17<18,17>18,22") }else if (Math.floor(Math.random()*10)==3) { me.playAnimation(false,"21>22,21<22,21>22") }else { me.setFrame(22) } } } } redpenguin.addEventListener(evn); bluepenguin.addEventListener(evn); redpenguin.startTimer(2000); bluepenguin.startTimer(1500); vp.addChild(redpenguin); vp.addChild(bluepenguin); vp.addChild(tree); dynapi.document.addChild(vp);
</script> </head> <body>
ImageClip Widget
<script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>
Image Clip and animation
<source lang="html4strict">
http://dynapi.sourceforge.net/ GNU LESSER GENERAL PUBLIC LICENSE Version 2.1, February 1999 <html> <head> <title>DynAPI Examples - ImageClip</title> <script language="Javascript" src="./dynapisrc/dynapi.js"></script> <script language="Javascript">
dynapi.library.setPath("./dynapisrc/") dynapi.library.include("dynapi.api") dynapi.library.include("dynapi.fx.MotionX") dynapi.library.include("dynapi.fx.TimerX"); dynapi.library.include("ImageClip");
</script> <script language="Javascript">
var img1 = dynapi.functions.getImage("./dynapiexamples/images/penguin_red.gif"); var img2 = dynapi.functions.getImage("./dynapiexamples/images/penguin_blue.gif"); vp=new DynLayer(null,10,65,500,300,"#FFFFFF"); vp._overflow = "hidden"; redpenguin= new ImageClip({x:100,y:100,w:64,h:64,clipImage:img1,cols:11,rows:2,speed:150}); bluepenguin= new ImageClip({x:400,y:200,w:64,h:64,clipImage:img2,cols:11,rows:2,speed:150}); tree=new DynLayer(null,150,60,207,214) tree.setHTML("<img src="./dynapiexamples/images/tree.gif">") evn= { ontimer : function(e){ // timer event var me,xx=0,yy=0; me=e.getSource(); xx=Math.random()*430; yy=Math.random()*200; me.lpengx=me.x; me.lpengy=me.y; me.pengx=xx; me.pengy=yy; me.slideTo(xx,yy,null,50); }, onmove : function(e){ var me=e.getSource(); var fn=0,col=0 if (me.pengx<=me.x) {col=0}else{col=2} fn=me.fm if (fn==1){fn=2}else{fn=1} me.setFrame(fn+col); me.fm=fn if (me.pengx==me.x && me.pengy==me.y) { if (Math.floor(Math.random()*10)==5) { me.playAnimation(false,"17>18,17<18,17>18,22") }else if (Math.floor(Math.random()*10)==3) { me.playAnimation(false,"21>22,21<22,21>22") }else { me.setFrame(22) } } } } redpenguin.addEventListener(evn); bluepenguin.addEventListener(evn); redpenguin.startTimer(2000); bluepenguin.startTimer(1500); vp.addChild(redpenguin); vp.addChild(bluepenguin); vp.addChild(tree); dynapi.document.addChild(vp);
</script> </head> <body>
ImageClip Widget
<script>
dynapi.document.insertAllChildren();
</script> </body> </html>
</source>
<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>