enhance animation

[sina_izad]

hi
im using Lzanimator to animate a bunch of jpeg images on the screen(moving from one side to the other). for some reason the animation is kind of jerky. it doesn't stop in the middle or freeze or anything like that, but i've seen flash animations and they are much much smoother!! why is that? is there anything that i need to have in my code to smooth the animation?
thanx for you time

[caclark]

It would be a really good idea to provide a little sample so that people could look at your code and see if there's something wrong with it.

Philosophically, it's fine...but then again, you're not compiling and running philosophy...

[sina_izad]

<canvas debug="true" width="558" >

<script>
var ANIM_TIME=10000;
var END=600;
var BEGINING=1;
var SPACING=15;
var IMG_WIDTH=66;
var IMG_WIDTH_SPACED= SPACING + IMG_WIDTH;
var num_items=16;
var MIN_X= canvas.width - (num_items*IMG_WIDTH + (num_items-1)*SPACING);
</script>

<resource name="pics">
<frame src="battery.jpg" />
<frame src="ipod.jpg" />
<frame src="nylon pouch.jpg" />
<frame src="hydro pouch.jpg" />
<frame src="blueTooth.jpg" />
<frame src="shell.jpg" />
<frame src="v3 pouches.jpg" />
<frame src="leather cases.jpg" />
<frame src="hydro with flap.jpg" />
<frame src="horizontal pouches.jpg" />
<frame src="travel charger.jpg" />
<frame src="holder.jpg" />
<frame src="car charger.jpg" />
<frame src="phone holders.jpg" />
<frame src="vertical pouch.jpg" />
<frame src="matrix case.jpg" />
</resource>

<class name="picture" bgcolor="white" width="${IMG_WIDTH+2}" height="62" x="${(this.view_num-1) * IMG_WIDTH_SPACED + 1}" y="1">

<attribute name="view_num" value="1"/>
<attribute name="mousex" value="${getMouse('x')}" />
<attribute name="mousey" value="${getMouse('y')}" />


<!-- instead of mouse over this part is used to calculate weather the mouse is over the pic or not-->
<method event="onmousex"><![CDATA[

if(this.mousex >= 0 && this.mousex < IMG_WIDTH && this.mousey >=0 && this.mousey < 68) {
this.setAttribute('bgcolor', gray);
sub.setAttribute('frame', 5);
}else {
this.setAttribute('bgcolor', white);
sub.setAttribute('frame', this.view_num);
}

]]></method>


<view name="sub" x="1" y="1" resource="pics" frame="${parent.view_num}" />

</class>



<view id="main" onmouseover="mouseIsOver=true" onmouseout="mouseIsOver=false" >
<attribute name="mouseIsOver" value="false" />
<attribute name="mousex" value="${canvas.getMouse('x')}" />
<attribute name="mousey" value="${canvas.getMouse('y')}" />
<attribute name="toRight" value="false" />
<attribute name="dura" value="1000" />


<animator name="left" motion="easeboth" attribute="x" relative="true" to="${-IMG_WIDTH_SPACED}" start="true" duration="1500" onstart="Debug.write('anim1');" onstop="parent.update_dir();" />
<animator name="right" motion="easeboth" attribute="x" relative="true" to="${IMG_WIDTH_SPACED}" start="false" duration="1500" onstart="Debug.write('anim2');" onstop="parent.update_dir()" />
<animator name="fastLeft" motion="easeboth" attribute="x" to="${-IMG_WIDTH_SPACED}" relative="true" duration="${parent.dura}" start="false" onstop="parent.update_dir();Debug.write('pause calls update');" />
<animator name="fastRight" motion="easeboth" attribute="x" to="${IMG_WIDTH_SPACED}" relative="true" duration="${parent.dura}" start="false" onstop="parent.update_dir()" />

<animator name="pause" attribute="x" to="0" relative="true" duration="500" start="false" onstop="parent.update_dir()" />

<method name="update_dir" ><![CDATA[
Debug.write("update started");
if(mouseIsOver) {
Debug.write("mouse over");

if (mousex >= 200 && mousex <= 400) { // pause area
pause.doStart();
}else if(mousex > 400 && mousex < 500 && main.x > MIN_X) { //fast right
this.setAttribute('dura', 800);
fastLeft.doStart();
toRight=false;
}else if(mousex >= 500 && main.x > MIN_X) { //faster right
this.setAttribute('dura', 500);
fastLeft.doStart();
toRight=false;
}else if(mousex <= 200 && mousex >= 100 && main.x < 0){ //fast left
this.setAttribute('dura', 800);
fastRight.doStart();
toRight=true;
}else if(mousex < 100 && main.x < 0) { //faster left
this.setAttribute('dura', 500);
fastRight.doStart();
toRight=true;
}else if(main.x >= 0 || main.x <= MIN_X) {
pause.doStart();
}
}else {
Debug.write("mouse out");

if(!toRight && main.x > MIN_X && main.x < 0) {
left.doStart();
}else if(toRight && main.x > MIN_X && main.x < 0) {
right.doStart();
}else if(main.x >= 0) {
toRight=false;
left.doStart();
}else if(main.x <= MIN_X) {
toRight=true;
right.doStart();
}
}
]]></method>


<picture name="p1" view_num="1"/>
<picture name="p2" view_num="2"/>
<picture view_num="3"/>
<picture view_num="4"/>
<picture view_num="5"/>
<picture view_num="6"/>
<picture view_num="7"/>
<picture view_num="8"/>
<picture view_num="9"/>
<picture view_num="10"/>
<picture view_num="11"/>
<picture view_num="12"/>
<picture view_num="13"/>
<picture view_num="14"/>
<picture view_num="15"/>
<picture view_num="16"/>


</view>

</canvas>

this is the code that is supose to animate the pictures.
now what it does is that at the end of each animation it checks if the users mouse is over the canvas if it is then it eaither moves faster or changes direction according to where the mouse is.
but even without this part the animation for moving 7 pictures on the screen without any intruption caused by all the functions is still jerky.
thanx for your time