When I finished the tutorial about rotating 3d cube using skew and rotation techniques, I decided to try myself extending the rotating 3d cube into a Rubik cube. Here I will explain the manipulation of pieces of Rubik cube and the construction of Rubik cube rotation. To make 3d points rotating around an arbitrary axis is discussed in this tutorial.

There are 6 faces for Rubik cube. Each face consists of 9 squares. I make a 100x100 movieClip, with 9 small square movieClips. To make the face skewable, I put it into an empty movie holder.

When the Rubik cube is rotated by the user, the specific "blocks ring" will move and the color arrangement of each face will change. Well, in fact, the script to make the square move is complicated: I don't move the square movieClip. I just change its color. There are ways to change the color of a square movieClip. I construct a square movieClip by 8 frames, each frame is a different color. To set it to show color no. 3, I just make square.gotoAndStop(3); To get what color it is, I just peek square._currentframe. Another important reason for this is that, one of these frames is blank empty. If I make it gotoAndStop("blank"), the square is invisible. My square consists of a transparent button, setting it invisible is not enough to hide it from clicking or dragging.

OK, now it is the trivial work to script what pieces, what color should change in responce to a specific move. It is trivial work and is complex. This work made me crazy until Mark in Xpress told me an idea: to draw a diagram. So, I make a diagram like below and print it out and put it by my desk. Then I could easily think what is the moving ring and face and what are those squares that are moving.

Now, see the diagram above.  I define White color as color no. 2.

When the upper most blocks rotate clockwisely, it involves 1 face and 1 ring. The rotate face is the white face, the face ring that rotating is white sq(0-1-2-5-8-7-6-3) with (4) in the center. The side ring, if start frome the red face, it will be (red sq 6-7-8, green sq 0-3-6, orange sq 2-1-0, blue sq 8-5-2); This sequence data is stored with the id of the face. The id of white face is 1, then these data are stored in faceRing1, and sideRing1.

I don't know how to "generalize" the data. I did not succeed in writing a function to generate the side ring and face ring by number id. So I build them manually, with this diagram by the desk. So, I got 6 sets of these sequence data.

Believe me or not, all manipulation of the Rubik cube can be done by these 6 sets of data. Simple enough, right? Ok, when the color no. 1 face is turned, I take reference of the faceRing1 and sideRing1.  I read the values of faceRing into a data and then do shift - push - shift - push - shift - push of this array and then store it back to faceRing. Again, I take reference of the sideRing and also read _currentframe of these square into array and do shift - push and store it back by gotoAndStop(value). That will be the result of the rotation. In fact, all moves are combination or variant of this move. It maybe clockwise or counterClockwise. If it is middle ring rotation, the effect is the same as opposite rotation of both upper face and lower face.

Well the last step is setting up the link between button in square and the rotation face. If the button in the square is pressed and drag, we know which square it is. Search the faceRing and sideRing data, it will be found in two independent Ring. For example, the orange corner square appears in  faceRing of orange color and also in the sideRing of green color. But, if we consider the direction of dragging, we can take it orange faceRing rotation or green sideRing rotation.

Now, the Rubik cube game is nearly completed. What I want to do is adding animation to this cube. This animation does not disturb what I described above. I just duplicate a cube and give it a rotation animation. The duplicated cube only copies colors of the original cube and do animation then remove itself. It does nothing to color manipulation scheme.

Below is the step about setting up a duplicated cube to show the illusion of rotation animation. Simple enough, right? Try to click the button to show construction step by step.

This is the final engine for the cube: