Page Transition / Animation with AS2

[withinboy]

Hi Everyone,

I am hoping that one of you guys can help me out here since I am very new to Flash and actionscript.

I am working on a website where I would like to implement a consistent page transition from content page to content page.

To keep it simple I have four buttons: Home, Portfolio, About and Contact. Each of the buttons are MovieClips and they animate when rollOver and rollOut.

I would like to have a transition animation played every time you go from content page to content page.

So when for example you are on the Home page and you click on the Portfolio button, I want my Home page go up, and then the Portfolio page will come down, now on the Portfolio page and you click on the About button, the Portfolio page will go up, and then the About page come down. And I would like this to happen for all my content pages.

I hope this is clear enough if you need any further information please ask.

Any help or suggestion is highly appreciated. Thank you in advance!

[kglad]

each page should be converted to a movieclip.  you can then use the tween class to tween your pages up and down in response to your button clicks.

[withinboy]

Hi, thanks for the reply, for example i put a script on the Portfolio button

on (release){

gotoAndPlay ("portfolio");

}

and the Portfolio page will come down, but how to make the current page go up first instead of just letting the Portfolio page come down.

I will make a movieclip on every content page that is showing them go up, but how can i play the movieclip (go up) first when i click on a button?

[kglad · Accepted solution]

if you're going to use timeline tweening you'll have a mess.  you'll need 12 frames with tweens for 4 pages (or more generally n*n-n frames for n pages).

use the tween class and actionscript to tween your pages:

import fl.transitions.Tween;

import fl.transitions.easing.*;

var currentPage:MovieClip = Home_mc;  // name your pages like your buttons but append "_mc" to distinguish the buttons and movieclip pages.  place Home_mc on stage at y=0 and the others above the stage.

var tweendown:Tween;

var tweenup:Tween;

var btnA:Array=[ Home, Portfolio, About and Contact];

for(var i=0;i<btnA.length;i++){

btnA.addEventListener(MouseEvent.CLICK,pageF);

}

function pageF(e:MouseEvent):void{

tweendown = new Tween(this[e.currentTarget.name+"_mc"], "y", Elastic.easeOut, -this[e.currentTarget.name+"_mc"].height, 0, 1, true);

tweenup = new Tween(currentPage, "y", Elastic.easeOut, 0, -currentPage.height, 1, true);

}

[withinboy]

thank you, this is what i exactly looking for, appreaciate that!

[kglad]

you're welcome.