Smooth Transition Between Pages

[flash_noob]

When I click a button (btnAboutUs for example), the About Us movie clip/page will play. But right now, when I click another button (e.g. btnHome), the Home movie clip will just play and there is no transition happening between the About Us page and the Home page.

I have seen nice Flash websites which has this smooth transition effect like when one presses a button, that page will animate out (do an exit animation) before the other page/movie clip animates in (do an entrance animation). An example would be this flash site:

http://www.easytemplates.com/preview/300109808

As you can see, when you click a button, the screen on the right (which shows the content) fades into a gray color, then fades out before showing the target page. Also if you would also look at the gallery, the transition between the images is very smooth. The next image kind of transparently overlaps the previous image before being shown fully.

I don't know how to do this. I can't find any tutorial at all about this. Can someone please help me out? Thanks!

[nwalton]

There are a few ways to do an exit/entrance animation. I usually have a function that is called when any button is pressed. It takes the name of the next page as its parameter. Here's an example:

var nextPage:String;  // Holds the variable name of the next page 

home_button.onRelease = function() {  // The button's function
  goNext("home")
}

function goNext(page:String) {  // Sets the nextPage variable, and calls the exit animation
  nextPage = page;
  playExitAnimation();  // The exit animation function (not shown)
}

At the end of the animation you can use the "nextPage" variable to open the page you want to navigate to. You could have something like:

gotoAndPlay(nextPage);  // This is if the pages are on different frames

Make sure that your buttons are each passing the right parameter (the data for the page that should open), and that the page reload is triggered at the end of whatever animation you're doing. You can use the nextPage variable to hold whatever string data you need, for whatever method you're using to navigate your pages.


For the cross-fade image effect, you've got to load the new image into a different MovieClip from the old one, and use the Tween class to fade it in once it's loaded.

(By the name "flash_noob", I'm thinking there may be some things here you haven't done before. Feel free to ask for more info or clarification. Hope this gets you pointed in the right direction though.)

[Medyman]

Also, if you want to use things like fading (alpha tweens) and motion tweens programatically...

have a look at the Tween & Easing classes

also, the MC Tween and (new) Tweener class

Just google these terms...

Quick References:
MC Tween: http://hosted.zeh.com.br/mctween/
Tween/Easing Class: http://www.kirupa.com/developer/actionscript/tween.htm

[ropost]

Hi
Thank you for this post
I was looking allover the web 4 weeks now

The thing is
Can you do a step by step for me PLEASE
I tray to folow this but I think i put stuff in the wrong way
(or can you sent me a fla so i can figer it out))

YES i'm a absolute newbee of 54 years
but i realy like to learn

Sorry for my English
(DUTCH you see, to make thing worse)

Help is very very welcomed

ropost

[Medyman]

Hi Ropost...

What exactly are you trying to do? Tweening and easing is a pretty vast topic that can be manipulated in several ways. Depending on what you're trying to do, you'll need to use different methods.

Maybe posting some code and/or source files might help.

[ropost]

hi Medyman

Thx for the respons

What i like 2do is like the xmple above
meaning

bt_home is active
when click bt-about or bt_contact etc is clicked a outro will play
a move or a disove (or both lets say several swf_movies leave the stage) and conten _about gets in

like


http://www.easytemplates.com/preview/300109808

and other nice sites

I got stuck just loadin swf's

I hope you understand me

thank you
ropost

[ropost]

Can you please xplane how/were to put this code
Thank you very much
~ropost

Originally Posted by nwalton

There are a few ways to do an exit/entrance animation. I usually have a function that is called when any button is pressed. It takes the name of the next page as its parameter. Here's an example:

var nextPage:String;  // Holds the variable name of the next page 

home_button.onRelease = function() {  // The button's function
  goNext("home")
}

function goNext(page:String) {  // Sets the nextPage variable, and calls the exit animation
  nextPage = page;
  playExitAnimation();  // The exit animation function (not shown)
}

At the end of the animation you can use the "nextPage" variable to open the page you want to navigate to. You could have something like:

gotoAndPlay(nextPage);  // This is if the pages are on different frames

Make sure that your buttons are each passing the right parameter (the data for the page that should open), and that the page reload is triggered at the end of whatever animation you're doing. You can use the nextPage variable to hold whatever string data you need, for whatever method you're using to navigate your pages.


For the cross-fade image effect, you've got to load the new image into a different MovieClip from the old one, and use the Tween class to fade it in once it's loaded.

(By the name "flash_noob", I'm thinking there may be some things here you haven't done before. Feel free to ask for more info or clarification. Hope this gets you pointed in the right direction though.)

[Medyman]

Have a look at this:
http://www.oman3d.com/tutorials/flas...letransitions/

This will explain the basics of setting up page transitions (nothing fancy). Once you have a grasp of that, it'll be easier to walk you throw MCTween.

You're tackeling too many things at once. Take it one at a time and it'll be easier.

Post back with any questions.

[ropost]

Thanx you Medyman 4 your effort and respons

this part is very clear to me

But what if we r in eg About and click on eg Home

and "about" moves away from the stage first b4 "Home" comes in

thanx
ropost

[Medyman]

Alright...

we'll here is something quick I just made up.

Here is what it looks like.
Here is the fully commented .fla

Post back if you have any questions.

Make sure you have mcTween installed. Google it to find a source to download.