Cool Mask Transition

[piranha01]

Hi,

Anyone know how to do these cool mask transitions found here: www.andyfoulds.co.uk I'd like to be able to make some of my own, I'm sure there's quite bit of action scripting envolved.

Thanks.

[SpaceChicken]

Yeah, so first you want to get REALLY REALLY good with Flash.

Seriously, the whole exploding square thing (is that what you mean?) is probably just a really big movie clip on top of everything that's just tweened squares times a million. That's how I'd do it, but then again... I'm not REALLY REALLY good with Flash yet...

If you do try something like that you should change it around a bit. It's probably better to be original is some sense. I mean, art IS all about stealing other people's stuff and altering it to call your own, but still people like new things. And opera, but I've never figured that one out.

[piranha01]

I reckon its proably Action Script, cus the rest of the site is pretty script heavy, and this guys seems to know what he's doing. I wouldn't copy what he's done, but I'd like to know the script just so I can adapt it to my own uses.

Thanks for you post any how.

[Lexicon]

I agree it is scripted rather than tweened. Only a madman would spend time tweening all those squares!

Here is how I think he did it. If not this, then something very similar...

(place code on a frame)

code:

---

// create mc that will contain all the squares

mask = _root.createEmptyMovieClip("maskMC",1);

// square size

size = 20;

// init

c=0;

r=0;

// wait however long before squares disapear (in frames)

stallFor=20;



for (i=0; i<560; i++){

	// create square mc

	mc = mask.createEmptyMovieClip("mc"+i,i);

	// draw the square

	mc.lineStyle(1,0x000000,0);

	mc.beginFill(0x999999,100);

	mc.moveTo(0,0);

	mc.lineTo(0,size);

	mc.lineTo(size,size);

	mc.lineTo(size,0);

	mc.lineTo(0,0);

	mc.endFill();

	

	// position the square

	mc._x = r * size;

	mc._y = c * size;

	

	// set random properties for movement scaling etc

	mc.delay = stallFor + r;

	mc.rot = random(20) - 10;

	mc.scaler = random(6)+6;

	mc.mvx = random(5)+2;

	mc.mvy = random(20)-10;

	

	// set on enterframe function for the square

	mc.onEnterFrame = function(){

		if (!this.delay) {

			// do movements

			this._rotation += this.rot;

			this._xscale = this._yscale -= this.scaler;

			this._x -= this.mvx;

			this._y -= this.mvy;

			if (this._xscale < 0) {

				// remove it when we are finished with it

				this.removeMovieClip();

			} else {

				this._alpha-=this.scaler/2;

			}

		} else {

			this.delay--;

		}

	}

	// sort out position in grid

	if( c<19 ){

		c++;

	}else{

		c=0;

		r++;

	}

}

---

[oldnewbie]

You might want to have a look at this thread also...

http://www.flashkit.com/board/showth...hreadid=569039

[piranha01]

Thankyou both for your help, I'll give it a try.

[piranha01]

That script works great Lexicon! I'll have fun playing around with it. Is there a way it can be changed to go vertically and diagonally accross the screen, rather than horizontally?

Thanks

[Lexicon]

change the delay line to give different directions

// horizontally right
mc.delay = stallFor + r;

// horizontally left
mc.delay = stallFor + (28-r);

// vertical down
mc.delay = stallFor + c;

// vertical up
mc.delay = stallFor + (20-c);

// diagonally
mc.delay = stallFor + c + r;

// diagonally reverse
mc.delay = stallFor + (20-c) + (28-r);


Enjoy

[piranha01]

Thats works great! I'll have fun playing around with that. There was one more thing I'd like to know; is there a way the transition can be used as a mask to create a transition between two images, kinda like a slideshow?

I tried putting the code into a mask layer but I couldn't get it to work.

Thanks for your help.

[Lexicon]

certainly can...

just put this after all the code....


imageMC.setMask(mask);


... where imageMC is a movieclip containing an image.

[piranha01]

Ah, how simple, brilliant! Works like a treat.

Tnx mate

[carlito_00]

whats involved in finding the coordanance of more complicated shapes?

very cool script though.

[piranha01]

There's some information about generating complex shapes here: http://www.macromedia.com/devnet/mx/...w_methods.html

I bet some great mask effects could be created using the shape effects given there. I wouldn't know how to do it, but I'm sure someone on Flashkit would. Probably Lexicon, considering he figured out the preivous masking script for me. Anyone fancy a go at more advanced mask effects?

[Lexicon]

Play around with the draw API lots, pencil stuff out on graph paper to see what coords might be of certain shapes. Definitly check out that posted link above.

I made a little experiment with curveTo below for you to play with.... At least it shows a way of animating with the Draw API.

code:

---

// create mc that will contain all the squares

mask = _root.createEmptyMovieClip("maskMC",1);

// square size

size = 20;

// init

c=0;

r=0;

// wait however long before squares disapear (in frames)

stallFor=50;



for (i=0; i<560; i++){

        // create square mc

        mc = mask.createEmptyMovieClip("mc"+i,i);

        // draw the square

        mc.lineStyle(1,0x000000,0);

        mc.beginFill(0x999999,100);

        mc.moveTo(0,0);

        mc.lineTo(0,size);

        mc.lineTo(size,size);

        mc.lineTo(size,0);

        mc.lineTo(0,0);

        mc.endFill();

        

        // position the square

        mc._x = r * size;

        mc._y = c * size;

        

        // set random properties for movement scaling etc

        mc.delay = stallFor + r;

        mc.rot = random(20) - 10;

        mc.scaler = random(6)+6;

        mc.mvx = random(5)+2;

        mc.mvy = random(20)-10;

        

        // set on enterframe function for the square

		mc.cT = 0;

		

        mc.onEnterFrame = function(){

                if (!this.delay) {

						this.clear();

						this.beginFill(0x999999,100);

                        this.moveTo(0,0);

				        this.curveTo(this.cT,size/2, 0, size);

						this.curveTo(size/2,size-this.cT,size,size);

						this.curveTo(size-this.cT,size/2,size,0);

						this.curveTo(size/2,this.cT,0,0);

						this.endFill();

                        if (this.cT == size - 5) this.scaleThis = true;

						if (this.scaleThis) {

							if (this._xscale > 0) {

								this._xscale = this._yscale -= 10;

							} else {

								this.removeMovieClip();

							}

						} else {

							this.cT++;

						}

						this._rotation++;

                } else {

                        this.delay--;

                }

        }

        // sort out position in grid

        if( c<19 ){

                c++;

        }else{

                c=0;

                r++;

        }

}

---

[ixlstudios]

Any idea why when the transition runs is brings itself to the foreground everytime.

[mrpixel04]

Originally posted by Lexicon
certainly can...

just put this after all the code....


imageMC.setMask(mask);


... where imageMC is a movieclip containing an image.

ello lexicon ...i have another question which in ur code i have to alter if i wanna masking effect working everytime i load another image by pressing different button let's say i got 3 button..is can be done though..

thnaks inadvanced

[tyzoo]

I never could understand mask's (in my 2 days of flash)

[mrpixel04]

anyone have any idea on it?....

[Lexicon]

sorry i have been away for an extended period.

Try placing the for loop and it's contents inside a function as a start.

you can then call the function from the buttons.

If you do that then it would be better to declare the mc.onEnterFrame actions inside a separate function, but see if you can it to work from a button before bothering with that.

sorry for the rushed answer, gotta fly, good luck...

[mrpixel04]

Originally posted by Lexicon
sorry i have been away for an extended period.

Try placing the for loop and it's contents inside a function as a start.

you can then call the function from the buttons.

If you do that then it would be better to declare the mc.onEnterFrame actions inside a separate function, but see if you can it to work from a button before bothering with that.

sorry for the rushed answer, gotta fly, good luck...

ok i'll take a look it...anything i'll msg u....anyway bon voyage...