JS animate images

[Spectre]

Ok, so here's the deal. I have a slot machine I've made in php, very simple, click buttons etc etc and it'll display the images, 3 reels, 10 images used on all 3, various win combos... what I'd LOVE to be able to do, is when the button is clicked to spin, the images come up, but before they actually finish up on the right image (images are gotten using 3 rand() vars) I'd like them to cycle the images, in the same fashion as a spinning reel on a slot machine would. Any ideas on how to accomplish this?

[Psycho]

1. Create a design with layers such that the "slot machine" is on a top layer and the images moving behind the slot machine are not visible except through the small windows for the three slots.

 

2. Create individual images for each item (same sizes)

 

3. Create the script to rotate the images and randomly select one for each slot. Here is how I would approach the script:

 

When the event is triggered I would first run a function to select the winning items for each slot. Then I would run a secondary function to start the image rotating process. I would write this function so that all images in each slot rotate at the same speed for a set number of seconds (3-5). Then the function would slow down the image rotations slot number 1 and ultimately stop. Then I would do the same for slot two and three in turn.

 

The image rotation logic would need to have the order of images for each slot - they are not supposed to be in the same order for each. Then it would need to determine which images was currently being displayed (image 1) in a slot and place the next image (image 2) directly above it (which should be hidden behind another layer). Next it would move image 1 and image 2 down a set number of pixels based upon the speed you want to display. The function would be recursive (calling itself using setTimeout() so it can repeat the process). Once image 1 has past out of view, image 2 should be fully in view. The script would then remove image 1 from the page and place image 3 directly above image 2 and start the process over again.

 

Here is a link to a tutorial on moving images in JS - not sure how good it is: http://www.c-point.com/javascript_tutorial/MMTutorial/lMoveImage.htm

 

There are a lot of different things that would need to be done, but none of them are extremely difficult. Just break it down into specific pieces of functionality and work on one at a time. Once that piece works, move on to the next. If you tried to do it all-at-once I suspect it would be overwhelming.

 

 

[Spectre]

I'll give it a whirl, thanks