Nice game

[discofly]

Hi all,

Just seen this nifty little trick:

http://www.centreforlife.co.uk/home.asp


The 3by3 grid which changes dependent upon which direction the mouse is moving...

I'd like to do something similar... any ideas how??? Also - if when you get all the blocks to form one fully correct face - could you have a 'congratulations' screen or something???

Thanks

discofly

[Esquared]

Make each block in the grid a mc. That movie clip should have a stop() command on the first frame, and then, for instance, on every 10th frame after that for as many images as you want to cycle through. In between these keyframes, add motion tweens as a transition. Then, on the block mc itself, place the script:

onClipEvent(enterFrame)
{
if(this.hitTest(_root._xmouse, _root._ymouse, false))
{
this.play()
}
}

To check for a win, just test to see if the _currentframe property of each block mc is the same, and use a _root.gotoAndPlay() to move to a new part of the timeline.

Hope it helps :)

[Esquared]

Oops, after taking a second look, I see that it's more complex, as you noted and I overlooked. Here are a few thoughts on it then...

To figure out the direction, keep track of 4 vars of the mouse position (obtained with _root._xmouse, etc.): lastX, thisX, lastY, thisY

if(lastX>thisX)
{
direction = left
magnitude = lastX-thisX
}
if(lastX<thisX && (thisX-lastX)>magnitude)
{
direction = right
magnitude = thisX-lastX
}
if(lastY>thisY && (lastY-thisY)>magnitude)
{
direction = up
magnitude = lastY-thisY
}
if(lastY<thisY && (thisY-lastY)>magnitude)
{
direction = down
}

This will just figure out which direction the mouse is moving the fastest in, and set the block to move that direction. Now, as for actually animating the different directions, that's a different story...and much more difficult.
Here's what I THINK could work.

Start with the block mcs, and then make each individual pic you want the blocks to spin among a separate mc, inside another mc, inside the block mc. Name the mcs directly inside the block mc 1, 2, 3, etc. Name the mcs inside the pic mcs all graphic. Place all of these clips directly one on top of the other, and on each pic mc place the following code:

onClipEvent(load)
{
this.Y = this._y //stores its initial y
this.X = this._x //stores its initial x
this.currentPic = 0 //assuming 0 starts on the top of your virtual mc pile
}

Now, here's the tricky part. You have no more tweens...everything is scripted. Now basically, you're gonna put all of this script in the spot where this.play() was in the last post...so when the mouse rolls over a block mc, the following happens: first, insert the script above to test for a direction. Then, set the initial conditions of the next scripted tween, as shown below.

prevPic = currentPic-1
nextPic = currentPic+1
if(prevPic<1)
prevPic = totalPics-prevPic
if(nextPic<totalPics)
Next = 1
[nextPic].swapDepths([prevPic])
[currentPic].swapDepths([nextPic]) //brings next pic into view on the top
currentPic = nextPic //moves to the next pic
[currentPic].tween = true //tells it to move, explained below

if(direction == left)
{
[currentPic].graphic._x = [currentPic]._width //moves the graphic mc to the left of the origin of the pic mc for scaling purposes
[currentPic]._xscale = 0
[currentPic]._x = [currentPic]._width //moves it to the right side of the block
[currentPic].y = [currentPic].Y //sets the y position back to start
}

Follow the same logic for the other directions...setting the position of the graphic mc to the side of the origin you want it to spin to, and then the pic mc to the opposite side, of course making it's _xscale (or _yscale, for up/down) property 0 to begin with. Once you've done this, you're set to animate the tween itself. Luckily, the tween script is the same no matter which direction it needs to move, since we've set the initial conditions. This being the case, you just need to tell one script to run. I would place the script on the block mc. Give all the block mcs a boolean variable called tween, initially set to false. here's the script for the block mc. Then when you change it's value to true above, it will actully animate. It should be placed within the onClipEvent(enterFrame) handler you already have there, but outside of the hitTest block:

if(tween)
{
if([currentPic].xscale < 100
[currentPic].xscale += (10)
if([currentPic].yscale < 100
[currentPic].yscale += (10)
if([currentPic]._xscale == 100 && [currentPic]._yscale == 100)
tween = false //tell it to stop animating when done
//I'm out of time to work on this right now...but now that I think about it, you need to set initial conditions for the prevPic too, and animate that one in reverse as well...
}

OK....so that's that. I can't promise you that this is some perfect code...in fact, I promise you it's not. I haven't tested anything yet. If I get the time, I'll try to create an .fla, but time is hard to come by. At the least, it should provide a step in the right direction, at least in one way of thinking about it. Hopefully others will ammend this code too, so it can become an efficient little algorithm for what you want to do...

Hope it points you in the right direction!