Masking Animation...

[rammionline]

Hi All

How can i do this kind of masking ...

http://www.templatemonster.com/flash...ates/9877.html

I need the solution for the masking effect applied for the main images.

Can anyone can explain me...

Thanks in advance.

[hum]

Hi...

Here is one way
Here is an example using lineTo method to create movieclips
acting as mask and white transparent bars.....
Open a new File...
Have 3 layers...
Top layer is actions layer.....
second layer has an image converted to a movieclip and named ...ImageMC....dimensions 550x400...matching default stage size..
bottom layer has a different image on it 550x400 also...no need to convert this one....
Then copy and paste this onto the actions layer......

code:

---

this.createEmptyMovieClip("mask", 2);

//draw the mask

mask.moveTo(0, 0);

mask.beginFill(0x6600CC, 100);

mask.lineTo(550, 0);

mask.lineTo(550, 400);

mask.lineTo(0, 400);

mask.lineTo(0, 0);

mask.endFill();

mask.onEnterFrame = function() {

	this._y += 10;//moves mask downwards

	//trace(this._y);

	if (this._y>400) {//stops mask moving past 400

		this._y = 400;

	}

};

this.createEmptyMovieClip("bar", 3);

//draw a white bar to follow mask 

bar.moveTo(0, 0);

bar.beginFill(0xFFFFFF, 50);//here 50 is the alpha setting

bar.lineTo(550, 0);

bar.lineTo(550, 20);

bar.lineTo(0, 20);

bar.lineTo(0, 0);

bar.endFill();

bar.onEnterFrame = function() {

	this._y += 10;

	//trace(this._y);

	if (this._y>400) {

		this._y = 400;

	}

};

this.createEmptyMovieClip("bar2", 4);

//draw another white bar to follow mask 

bar2.moveTo(0, 0);

bar2.beginFill(0xFFFFFF, 50);

bar2.lineTo(550, 0);

bar2.lineTo(550, 10);

bar2.lineTo(0, 10);

bar2.lineTo(0, 0);

bar2.endFill();

bar2.onEnterFrame = function() {

	this._y += 9;

	//trace(this._y);

	if (this._y>400) {

		this._y = 400;

	}

};

this.createEmptyMovieClip("bar3", 5);

//draw another white bar to follow mask 

bar3.moveTo(0, 0);

bar3.beginFill(0xFFFFFF, 50);

bar3.lineTo(550, 0);

bar3.lineTo(550, 5);

bar3.lineTo(0, 5);

bar3.lineTo(0, 0);

bar3.endFill();

bar3.onEnterFrame = function() {

	this._y += 8;

	//trace(this._y);

	if (this._y>400) {

		this._y = 400;

	}

};

ImageMC.setMask(mask);

//here the image MC is masked by the movieclip created earlier called 'mask' 

stop();

---

[rammionline]

Hi Hum,

Thanks a lot... its working!.

The give code is getting applied for only one image, how i can apply that for multiple images like 4 to 5.

Could you help me in that plz

Thanks

[hum]

Hi
With this layer order:
Pause...layer 4
Actions.....layer 3
ImageMC.....layer 2
Image.....layer 1

Here is one way....
First add a new layer to your project(i named it pause)...and give it two blank keyframes...
Then this code goes on the first keyframe....

code:

---

stop();

// function that restarts playing

function myPlay() {

	clearInterval(myInterval);

	play();

}

// trigger the function after 5 seconds(edit to suit)

myInterval = setInterval(myPlay, 5*1000); 

---

This pauses the main timeline on this keyframe for 5 seconds...edit to suit.
Then , for now just put a stop() action on the second keyframe...
(i'll come back to this in a bit)

We now need to right click and copy the keyframe that is on lowest layer (second image shown) then create a new blank keyframe on layer2 that has the ImageMC on it....so we can then paste the lowest image next to it on frame 2...
This is because we now want to start with the second image instead which will then have a transition to the next new image...
Once you have done this...you need to convert this image to a movieclip and once again ...name it ImageMC in the properties panel....
All that remains now is to import your new image onto layer1 frame 2.
Going back to the pause part.......I merely put a stop() on the pause layer frame 2 because i am just showing an example of how to add a new image with the same transition effect....to add more images you would actually copy and paste the pausing code into the second keyframe so it waits again for 5 seconds before moving to next frame.....so you are basically repeating the same process all over again ....