Skip to main content
W
withinboy
Participating Frequently
April 22, 2014
Answered

Page Transition / Animation with AS2

  • April 22, 2014
  • 1 reply
  • 758 views

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!

This topic has been closed for replies.
Correct answer kglad

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);

}

1 reply

kglad
Community Expert
kgladCommunity Expert
Community Expert
April 22, 2014

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.

W
withinboyAuthor
Participating Frequently
April 23, 2014

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
Community Expert
kgladCommunity ExpertCorrect answer
Community Expert
April 23, 2014

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);

}

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices