How to center a randomly animated MC inside its Mask?

[jamescover]

Hi:

How do you center a clip within a mask?

I have a random easing script, that works great, except I can't figure out how to center the MC I'm animating within it's mask.

To center a popup in Javascript you just subtract the width of the popup from the screen width/resolution and divide the remainder by 2. So, I tried subtracting the width of the mask from the width of the photo inside of it, and dividing by 2, but it doesn't work. However, the width of the photo and the width of the mask are the only two constants I have to work with to fix a center point.

Below is an example:

http://www.ekigroup.com/random/randomEasing.swf


I have the above example working well, but in a convoluted way. So, the formula changes when the size of the mask changes. I'm looking for a tried-n-true formula for doing this, so that the photo is centered, and the animation covers every square pixel of the photo. I'm sure you've already noticed--I'm no math wiz.

Again, all I want to be able to do is to center the [random] MOVEMENT of the clip inside of the mask, i.e., fix a center point. BTW, the photo is a MC, inside the MC containing the mask.

Any help would be greatly appreciated.


James
He is risen!!!

[garbage]

I don't mean to be funny, but didn't you say you had it working? The example you posted online doesn't work ... maybe it's just me crappy machine!

Okay, as I see it, you don't want to centre anything on anything. What you have is 2 pictures, 1 masked and 1 not. The main picture (the one you ca see ALL of) has a movement script of some sort (yes?), as does the masked picture, but what you want is the 2 pictures moving from the same script, so that it looks like the blue box is "revealing" a small area of the picture to the lower right. Is that about right?

If so, what you need to do is simply apply a transformation formula to the random script, making both pictures move in synch, but in different places. To work out the transformation, all you need to do is subtract the co-ords of the centre of the blue box from the co-ords of the centre of the mask, then apply thos numbers to the new random co-ords.

If the offset is _x = 100, _y = 50, then ...

Visible picture new co-ords = 123, 46
Masked picture new co ords = 223, 96

Keep them moving synchronised in this fashion and you should get the effect you're after.

[ericlin]

the width of the photo and the width of the mask are the only two constants I have to work with to fix a center point.

If I understand your problem, we need informations about registration point of the mask and the photo movieClip.

If we align mask and movieClip , making their registration point center at (0,0), then we dont need math.

If we make registration point both at left-top corner as (0,0), then the math used in javascript will work here.

[jamescover]

Hi garbage:

Sorry, I guess I didn't explain my situation very well. I know that most people don't like longwinded explanations, so I tried to shorten it. I guess that only complicated things.

The only picture I'm interested in is the one that is actually masked, i.e., I'm NOT trying to synchronize the movement of the two images. The other "example" (on the left) is just to show you what is going on behind the masking. And I provided the crosshairs to illustrate the center point of the mask and the picture.

So, to answer ericlin's question, the registration point is at 0,0 (dead center) for both the mask and the picture. However, the movement still isn't centered without some manipulation.



Below is the script I'm currently using:


onClipEvent (load) {
w = 375;
h = 262;
y = random(h)-h/2;
x = random(w)-w/2;
}
onClipEvent (enterFrame) {
if (x-_x>-5 && x-_x<5) {
x = random(w)-w/2;
}
_x += (x-_x)/10;

if (y-_y>-5 && y-_y<5) {
y = random(h)-h/2;
}
_y +=(y-_y)/10;

}

Unfortunately, the above script is, well, it's the closest I could come to making this work, without an actual formula. The width (w) and height (h) aren't even the actual dimensions of the picture, so that tells you that the script isn't right. The pictures actual dimensions are 500x350. The mask is 200x200.

What I tried previously was:

w = (500-200)/2;
h = (350-200)/2;
x = random(w);
y = random(h);

What I was looking to do was to get a fixed center point. In the above script, w always returns 150, and h always returns 75. I thought that that would do the trick, but it didn't, so I came up with this convoluted way of subtracting the original width/height values from the random width/height returned by the x/y values. Am I making any sense.

Anyway, I just want to move the photo within the mask, in the same random fashion that it is presently moving in my examples, but I'm looking for a set formula for doing so. But I also want the movement to cover every pixel of the photo. In other words, the movement should eventually show the entire photo, down to the pixel, not just a portion of it.

However, I'm presently adjusting the w/h values to get the script to do what I want, but these will have to change depending on the size of the mask. This isn't very scientific, so I'm looking for a mathematical formula that I can plug in to each mask that takes into account the size of the mask, the size of the photo, and a center (0,0) registration point. I thought that x = (photoWidth - maskWidth)/2 would do it, but it doesn't.

Any ideas???

Thanks for your responses.





James
He is risen!!!

[ericlin]

Theoretically, the math should be:

w = 500-200;
h = 350-200;
y = random(h)-h/2;
x = random(w)-w/2;

There is a script saying, if the distance is below 5, then we will pick another random point. So, the possibility to see the edge of the photo is small. If we increase it up to w=375, h=262, the chance of seeing edge is increased but, there is also a chance of overBound.

[jamescover]

Hi Ericlin:

Thanks for your help.

I see my mistake. I was doing:


w = (500-200)/2;
h = (350-200)/2;
y = random(h)-h;
x = random(w)-w;

instead of:


w = 500-200;
h = 350-200;
y = random(h)-h/2;
x = random(w)-w/2;

The latter of the two works perfectly, using the original values, i.e., width/height of the photo and the mask.

I guess I'm not understanding how Flash is executing the script. In the last example, the correct one, is the value for w changing? If it's not, then I don't see the difference in the two scripts. Or are you saying that:
random(w)-w is being divided by 2, not just w? I thought that that would expressed as:

x= (random(w)-w)/2;

not

x= random(w)-w/2;

An clarification would be great. As you can see, I have the formula I was looking for, but I'm not completely understanding how Flash is executing it.

BTW, the 5 pixels is not a problem.


Thanks again for your help.
James
He is risen!!!

[ericlin]

glad to know it works.

w = (500-200)/2;
x = random(w)-w;

The range of x will be (0 ~ 150)-150; That is (-150 ~ 0);

What we need is to make x range: -150 ~ 150;
So, I would use random(300)-150; That is (0 ~ 300)-150;