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


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/flash/learnflash_simpletransitions/

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 (http://www.demos.designsbyvishal.com/dynamicdrive/completeRopost.html) is what it looks like.
Here (http://www.demos.designsbyvishal.com/dynamicdrive/completeRopost.fla) 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.

[ropost]

Hi Medyman TNXs
i will look into it
sorry 4 the late respons (i was offline 4 a while)

I appriciate y'r effort vry much

~ropost

[paulyBoi]

That example is awesome, that helped me out heaps! I was lucky enough to stumble upon this site last night.

Is it very difficult to remove the mouse interaction from that movie and just have a simple timeline; movie starts, first page fades/blurs in, 10 seconds later second page blurs/fades in whilst first page fades/blurs out etc etc.

Sorry in advance if this is a very dumb question.

[Medyman]

No, it's not too hard.

There are two ways to do it:

1) To use timeline animation. This can be really annoying and I don't like doing anything on the timeline. All of my flash files have 1 keyframe (not counting a preloader). That's all I really need to add visuals. The rest can be done with AS.

2) Using mcTween, as I have used in that example, it's fairly easy to do sequential animation.

For example, if you want to fade an MC called image2 after image1 is done fading, you would do something like this:

image1.alphaTo(100, 1, "easeOutQuad")
image1.onTweenComplete = function() {
image2.alphaTo(100, 1, "easeOutQuad")
}

This would be if you wanted to do something right after you finish tweening it.

For what you're asking, you can actually do it all in one block code, using timed delays.

For example, you can tell image2 to fade 10 seconds after image1 has STARTED loading (so if you want to wait 10 secs, the delay is 11 secs).

To do that, you'd need AS like this:

image1.alphaTo(100, 1, "easeOutQuad")
image2.alphaTo(100, 1, "easeOutQuad", 11)

[paulyBoi]

Thanks heaps for that Medyman, I appreciate your time and help. :)

[Medyman]

No problem :)

[gesoneguy]

Thank's Medyman!!! This is soooo helpful.

Is there a way to have the first page already active when you go to the site, instead of an empty page?

[jc10]

Is there a way to have the first page already active when you go to the site, instead of an empty page?

I need help too

[wswingsze]

It is the new links from the old one that Medyman put up:

Here (http://www.designsbyvishal.com/dynamicdrive/completeRopost.html) is what it looks like.
Here (http://www.designsbyvishal.com/dynamicdrive/completeRopost.fla) is the fully commented .fla

Thanks Medyman

Wingsze

[Medyman]

Thanks for updating those wswingsze.

Since two people have asked this in the last few posts (even though they're pretty old), I'll answer.

Yes, it's possible to load an image on the first frame. Just call the loadPage() function and set the whatIsNext variable outside an onRelease event.

[kaiion]

Hey guys, I'm a 2nd generation newbie, this was done in flash 8 (Actionscript 2.0) and I am bringing this question alive again for the purposes of AS3. I know that there were some source files located finally on the designs by vishal website (http://www.designsbyvishal.com/dynamicdrive/completeRopost.html) great job, by the way! But the code has changed, and I'm sure all of you guys have become well versed.

please help, 2nd gen newbie.!
:rolleyes:

[Medyman]

It's funny that you should mention that. I've been getting a lot of questions on this same thing.

I get AS 2.0, but how does AS 3.0 change the picture?

Well, it doesn't really. The tools change, but the logic is still the same. In the posted source files, we used McTween to do the animations. For AS 3, we upgrade to the Tweener class.

Since I'm a little free this week (I just finished a large Flash project, and we don't have another one until the end of next week), I decided to make a quick tutorial on how to do this in AS3. It's not ready yet, but when it is, I'll post it here.

So, subscribe to this thread or check back in a few days.

[Medyman]

Ok, so the tut isn't up yet.
I'm planning a series in both AS 2.0 and AS 3.0 to go from a basic "click for next" slideshow to a fully dynamic database-powered and/or XML/API powered one.

I'm not sure how many installments this will take but it should be fun (and a time saver as I see this question a lot).

I ported my previous example to AS3. It's not the way I would do it for a large application of this type, but it should get you started on some ideas.

You'll need Tweener (http://code.google.com/p/tweener/)installed to do be able to edit/compile the source.

Check back here for a some step by step tutorials in a few days.

EXAMPLE PAGE + SOURCE (http://www.visualbinary.net/tutorials/tweener/) // TWEENING IN ACTIONSCRIPT 3.0

[ReadyToLearn]

This link is broken too Medyman.

[Medyman]

Thanks.

The page that was linked can now be found here (http://www.visualbinary.net/files/tutorials/tweener/).

[euanc]

Thanks for updating those wswingsze.

Since two people have asked this in the last few posts (even though they're pretty old), I'll answer.

Yes, it's possible to load an image on the first frame. Just call the loadPage() function and set the whatIsNext variable outside an onRelease event.

is there any way you could show an example of how to do this. i have tried different ways and cant get it to work. im desperate to get this sorted as i have to get a site live tomorrow! eek! thanks in advance!