how is this done???

Brian

unread,

Feb 15, 2005, 11:07:31 PM2/15/05

to

http://www.andytitus.com

How does he split the image like that???

Thanks,
B

abeall

unread,

Feb 15, 2005, 11:38:52 PM2/15/05

to

I love his work. Brilliant stuff. At any rate, the image is not actually being
split. There are two copies which are masked, then tehy are moved and the masks
are moved depending on mouse position. Of course pulling it off and with such
style is easier said than done, but there's the short answer.

NSurveyor

unread,

Feb 16, 2005, 12:10:21 AM2/16/05

to

Took me awhile to figure out the effect, but I got it. Here's how to do it:

Createa movieclip with instance name logo. Then behind it, place a movieclip
with instance bg. logo should be the image to split. And bg should just be the
red box thing. Then add the following script to the frame that holds your
movieclips:

maxWidth = 100;
originalMin = logo.getBounds(_root).xMin
originalX = logo._x;
this.logo.duplicateMovieClip('logo2', this.getNextHighestDepth());
this.createEmptyMovieClip('mask1',this.getNextHighestDepth());
this.createEmptyMovieClip('mask2',this.getNextHighestDepth());
logo.setMask(mask1);
logo2.setMask(mask2);
this.createEmptyMovieClip('blanker', this.getNextHighestDepth());
this.blanker._y = bg.getBounds(_root).yMin;
this.blanker.onMouseMove = function() {
var center = (bg.getBounds(_root).yMax+bg.getBounds(_root).yMin)/2;
var distAway = Math.abs(center-_root._ymouse);
var lowDist = bg._height/2;
var blankWidth = (1-distAway/lowDist)*maxWidth;
blankWidth = (blankWidth<0) ? 0 : blankWidth;
with (blanker) {
clear();
beginFill(0xFFFFFF, 100);
lineTo(0, bg._height);
lineTo(blankWidth, bg._height);
lineTo(blankWidth, 0);
endFill();
}
with(mask1){
clear();
beginFill(0x000000,100);
moveTo(bg.getBounds(_root).xMin,bg.getBounds(_root).yMin);
lineTo(this.getBounds(_root).xMin,bg.getBounds(_root).yMin);
lineTo(this.getBounds(_root).xMin,bg.getBounds(_root).yMax);
lineTo(bg.getBounds(_root).xMin,bg.getBounds(_root).yMax);
endFill();
}
with(mask2){
clear();
beginFill(0x000000,100);
moveTo(this.getBounds(_root).xMax,bg.getBounds(_root).yMin);
lineTo(bg.getBounds(_root).xMax,bg.getBounds(_root).yMin);
lineTo(bg.getBounds(_root).xMax,bg.getBounds(_root).yMax);
lineTo(this.getBounds(_root).xMax,bg.getBounds(_root).yMax);
endFill();
}
this._x = _xmouse-blankWidth/2;
var deletePoint = this._x-originalMin
//logo._x = originalX-(deletePoint/2);
logo2._x = this.getBounds(_root).xMax-deletePoint;
logo._x = originalX - blankWidth/2;
logo2._x = originalX +blankWidth/2;
updateAfterEvent();
};

NSurveyor

unread,

Feb 16, 2005, 3:53:05 PM2/16/05

to

I updated my code, now all you need is an image to split with instance name,
logo:

maxWidth = 100;
//
originalMinX = logo.getBounds(this).xMin
originalMaxX = logo.getBounds(this).xMax;
originalMinY = logo.getBounds(this).yMin
originalMaxY = logo.getBounds(this).yMax;
originalX = logo._x;
//

this.logo.duplicateMovieClip('logo2', this.getNextHighestDepth());
this.createEmptyMovieClip('mask1',this.getNextHighestDepth());
this.createEmptyMovieClip('mask2',this.getNextHighestDepth());

this.createEmptyMovieClip('blanker', this.getNextHighestDepth());
//
logo.setMask(mask1);
logo2.setMask(mask2);
//
this.blanker._y = originalMinY;
this.blanker.onMouseMove = function() {
var center = (originalMaxY+originalMinY)/2;
var distAway = Math.abs(center-this._parent._ymouse);
var lowDist = logo._height/2;

var blankWidth = (1-distAway/lowDist)*maxWidth;
blankWidth = (blankWidth<0) ? 0 : blankWidth;
with (blanker) {
clear();

beginFill(0xFFFFFF, 0);
lineTo(0, logo._height);
lineTo(blankWidth, logo._height);

lineTo(blankWidth, 0);
endFill();
}
with(mask1){
clear();
beginFill(0x000000,100);

moveTo(originalMinX,originalMinY);
lineTo(this._x,originalMinY);
lineTo(this._x,originalMaxY);
lineTo(originalMinX,originalMaxY);
endFill();
}
with(mask2){
clear();
beginFill(0x000000,100);
moveTo(this._x+blankWidth,originalMinY);
lineTo(originalMaxX,originalMinY);
lineTo(originalMaxX,originalMaxY);
lineTo(this._x+blankWidth,originalMaxY);
endFill();
}
this._x = _xmouse-blankWidth/2;
var deletePoint = this._x-originalMinX
logo2._x = this._x+blankWidth-deletePoint;

Brian

unread,

Feb 16, 2005, 8:11:07 PM2/16/05

to

Amazing!!!

Thank you to both of you!
B

NSurveyor

unread,

Feb 18, 2005, 4:56:17 PM2/18/05

to

You're welcome.

NSurveyor

unread,

Feb 18, 2005, 4:55:46 PM2/18/05

to

You're welcome.