image overlapping problem in iPhone application

[ramya289]

I am developing a site for the iphone application almost at the final stage. But i am stuck with a problem. Please spend some time for me and help me out.

In my site, there is a back end developed using php and the front end which completely flash where there is flash - xml communication for fetching the data's. We have used Action Script 3.0.

Now, let me explain in detail. In my site on the client side, there is an iphone being displayed and it will display some images as it is in the iphone. So here, i have created container where all the images are kept in a row say there are 10 images each of 100px length, then the total length of the container will be 1000px. (like the train compartments)

Now, in the iphone when the site loads first images gets displayed. And then normally in iphone we have to click and drag the image to view the next image, but what i have done is, we does not require to drag the image only a single click is enough. So, with a single click the image gets completely moved. That is here, in the container all the images are in the right side at the start and say the horizontal position is x, so x is at 0. Now on one click the image is move to the left and covers 100px (length on one image) so x is -100. So, at each click the image moves by 100px and at the vice versa also that is from left to right the x value is increased.

If x value is not clear, you think of a graph where the horizontal axis is x and at the beginning of the site all the images are on the positive side of the x, i hope you understood this.


Now, let me come to the problem. Now when i click more one time at a single stretch, say 3 times then the 4th image should be loaded and the x value should be -300.But this does not come, it comes less than 300 and because of this in the iphone, we can see two images overlapping. I have given in the code to move the image by 20px in a function which will repeat 5 times on a single click. This is because to avoid the jumping of the images at single stretch. So, here when some clicks for the 1st time, the loop may just completed 3 times, when the user clicks for 2nd time, so that at present the x value is only -60 (as the loop worked only 3 times), so after the 2nd click the new x value will be -160. So this causes the images over lapping.

I hope you have understood my problem.

So my requirement is, there should be no overlapping of the images.

I would really appreciate if you give me your thoughts on this.