в 09:58, 26 мая 2010

2010-05-26T09:58:48Z

Admin: 1 версия

2010-05-26T07:15:57Z

1 версия

Новая страница

==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>
<p><font face="Arial" size="4">ImageClip Widget</font></p>
<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>
<p><font face="Arial" size="4">ImageClip Widget</font></p>
<script>
dynapi.document.insertAllChildren();
</script>
</body>
</html>

</source>

<A href="http://www.wbex.ru/Code/JavaScriptDownload/dynapi.zip">dynapi.zip( 791 k)</a>

← Предыдущая	Версия 09:58, 26 мая 2010
(нет различий)

JavaScript DHTML/Ajax Layer/Image Clip - История изменений

в 09:58, 26 мая 2010

Admin: 1 версия