create masks with loop and move them...how?

[Flashmatazz]

Just trying to create an effect I saw a number of times (can't find an example now I need it though :puzzle: )

I also think it has been asked before. I searched but couldn't find it so here goes:

I'm trying to create the effect where it seems as if a picture is cut up in a number of pieces that slowly ease to their location where eventually they all form one image again. (can't find a proper term for it, sorry)

Maybe the attached fla will make things more clear.

There must be an onEnterFrame handler somewhere in which the easing is done. I'm not sure exactly how to set it up though. Could somebody please have a look?

Thanks.

[Flashmatazz]

I found an example to show what I mean:

http://www.podlob.com/

click on nr 39. (mask transition 2) to see the effect.

Any ideas how this is done?

[RelandR]

I've been playing with this idea now and then (with partial success) and the best I've come up with is that you need to animate your shapes(they can also be clips) within a clip and then set 'that' clip as the mask for your pic(s)_Clips

yours starts at one point and ends at another but without any 'interval of motion' so it's not really an animation

one thing I noticed w/yours is changing this bit:

_root.attachMovie("mask","mask"+i, 10+i);

to:

_root.attachMovie("mask","mask"+i*10);

will get all the mask panels over the pic...

..I'm going to mess around with this idea some more (kinda droped it for awhile) and if I come up with anything really usefull, I'll let you know

[Flashmatazz]

Ok, thanks a lot :)

[scotty]

here an attempt, i'm still looking/playing for the right speed variable

beginpos = -60;
// mask mc has width of 60 px
MovieClip.prototype.moveMe = function(endPos, speed) {
this.onEnterFrame = function() {
diffX = endPos-this._x;
if (this._x<endPos-1) {
this._x += diffX/speed;
} else {
this._x = endPos;
}
};
};
for (i=0; i<11; i++) {
_root.attachMovie("pic", "pic"+i, i);
_root.attachMovie("mask", "mask"+i, 12*i);
_root["mask"+i]._x = beginPos;
_root["mask"+i].moveMe(i*60-60, (20+i)/i);
_root["pic"+i].setMask(_root["mask"+i]);
_root["pic"+i]._x = -600;
_root["pic"+i].moveMe(0, (20-i)/i);
}

scotty:)

[RelandR]

here's a little adjustment to that, it centers better in test and that lagging unset mask on the left is gone...
(init "i" to "1" instead of "0")
..can't do much with the speed either tho.. (it affects the final _x)
MovieClip.prototype.moveMe = function(endPos, speed) {
this.onEnterFrame = function() {
diffX = endPos-this._x;
if (this._x<endPos-1) {
this._x += diffX/speed;
} else {
this._x = endPos;
}
};
};
for (i=1; i<10; i++) {
_root.attachMovie("pic", "pic"+i, i);
_root.attachMovie("mask", "mask"+i, i*10);
_root["pic"+i].setMask(_root["mask"+i]);
_root["mask"+i]._x = -60;
_root["mask"+i].moveMe(i*60-30, (10+i)/i);

_root["pic"+i]._x = -600;
_root["pic"+i].moveMe(30, (10-i)/i);
}

[Flashmatazz]

Thanks for the replies. =)

It's a push in the right direction. However I'm afraid I need a bit more pushing to really get the precise effect I'm after (see www.podlob.com) so keep 'm coming :P

*goes back fiddling with AS*

[scotty]

i'll keep on pushing :thumb:

scotty

[pom]

I think there were a few examples on www.amedicineforapathy.com but the site seems to be down at the moment...

[Flashmatazz]

bummer :(
But Ilyas, you're an AS-master right? Couldn't you maybe push me a bit more in the right direction? :)