So, I’m working on a new interface that works something like a cluttered desk. A list of images in XML is passed to a class which proceeds to load each image, and position them all across the stage in a pseudo-random fashion, each existing as a MovieClip subclass nested within a container clip.
Of course, like real clutter, these images are rotated randomly within a short range as well, which is to say they’re all upright but slightly crooked. This is what’s causing me so much grief.
When a user clicks on an image, the entire heap of images should slide and rotate such that the targeted image is perfectly upright, in the dead center of the stage.
Translating the position of the heap so that the image is centered is not a problem, but rotating the heap at the point, so the target image is no longer crooked, is a problem.
The problem is that the container clip rotates, naturally, from the origin of its coordinate system. As this rotation occurs, the targeted image, within that clip, is rotated as well, such that it is no longer perfectly centered on the stage, although upright.
Because the targeted image is within a container, and the container is the only thing moving, the properties(x, y, rotation) of the targeted image never change.
I’ve tried a number of different solutions so far, most of them based on relatively simple trigonometry, but haven’t been able to determine the proper solution.
I’m using the Tweener class to move everything, and the values I’m using look something like this…
// container clip is initially positioned at Point(0,0) with a rotation of 0.
// target_img is located within container at a pseudo random position with a random rotation
//This is all mated to a MouseEvent.CLICK event handler attached to the targeted image
var x_destination = -target_img.x +(stage.stageWidth - targ_img.width)/2;
var y_destination = -targ_img.y + (stage.stageHeight -targ_img.height)/2;
var rotation_destination = -targ.rotation;
Tweener.addTween(container, {x: x_destination, y: y_destination, rotation: rotation_destination,time:1, transition:"easeOutExpo"});
If I could rotate the container clip around the top left corner of the target clip nested within it, that would likely solve my problems.
Incidentally, I’ve also done a lot of modeling to try and compute the actual distance the target clip ends up from its intended spot whenever an image is clicked on. My figures seem good, but they don’t show up that way on screen, so I must be doing something wrong there as well, or misunderstanding something about the coordinate spaces I’m dealing with. If anybody is interested in that, I can elaborate there as well.
Any help or insight into this matter would be appreciated.
