Is this a masking effect?

[Ruth21]

Hi,

I'm really new to flash and I was wondering how they did the transition effects on the background pictures between each section of this website.

http://www.wyoung.co.uk/

How do you do this? Is it done with masking???

Ruth

[mad_A]

Hi Ruth,

I don't know for definite how that site was built, but you can get that effect by making one verticle image that includes all your sections above each other. Make that into a movvie clip, and have a motin tween scrolling the image up along the time line. Then get your sections to play the tween section between the section you are in and the one you are going to as you change sections. To bring it the step furthur where the image slides in strips, split the virticle image into strpts and have each one tweening at a slightly different pace (by adding or removing keyframes).

That is the easiest way to do this effect. It can also be done with actionscript, setting x and y coordinates to increase/decrease.

Hope that makes sense!

[pixelwit]

Hi MadA, Don't see you round these parts too often.

I coded up an effect that's similar to the one posted but it's not exactly the same and it's a bit messy (it could use some custom classes). BUT, it should show you the general concepts involved.

Hope it helps,

-PiXELWiT
http://www.pixelwit.com

[Ruth21]

Hi Pixelwit and Mad_A,

Thanks very much for your replies. I think I understand how to do the affect now, you have helped me out alot!

Cheers

Ruth

[mad_A]

Hey Pixelwit! How are you keeping?

You are right about me not being here as much these days. Been very busy so far this year, and just have not had the time.

Hopefully will get to be here more going forward.

A

Ruth - very welcome!

[goku]

Hi pixelwit

Could you resave the your file in flash 5 - haven't upgraded yet to MX!


cheers:)

[pixelwit]

The file uses features which are only available in FlashMX. I'm pasting the code from the original file so you might be able to modify or adapt the concepts involved.var stripes = 6;
var wi = this._width;
var stepY = this.Back0.ImageA._height;
var stepX = this._width/stripes;
var snap = 2;

function cutUp(){
for(i=1; i<stripes; i++){
Back0.duplicateMovieClip("Back"+i, i);
Msk0.duplicateMovieClip("Msk"+i, stripes+i);
}
for(i=0; i<stripes; i++){
var m = this["Msk"+i];
var b = this["Back"+i];
m._width = stepX;
m._height = stepY;
m._x = i*stepX;
b.setMask(m);
b.drag = .2+Math.random()*.6;
b.easeTo = function(y){
this.goalY = y;
this.onEnterFrame = function(){
this.step = (this.goalY-this._y)*this.drag;
this._y += this.step;
if(this._y<this.goalY+snap && this._y>this.goalY-snap){
this._y = this.goalY;
this.onEnterFrame = null;
}
}
}
}
}
cutUp();
function showBack(numbr){
for(i=0; i<stripes; i++){
this["Back"+i].drag = .2+Math.random()*.4;
this["Back"+i].easeTo(-(numbr-1)*stepY);
}
}Hope it helps,

-PiXELWiT
http://www.pixelwit.com

[goku]

thanks pixelwit:D

[goku]

Hi again pixelwit - any chance you can take a look at my new post called 'Help! in the this section.


Can't figure this one out!!!


:confused: