Smooth Transition Between Pages

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!

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:

Code:

---

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:

Code:

---

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

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

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

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.

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

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

Quote:

---

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:

Code:

---

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:

Code:

---

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

---

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.

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

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.

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

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.

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:

Code:

---

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:

Code:

---

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

---

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

No problem :)

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?

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

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

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

Thanks Medyman

Wingsze

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.

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 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:

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

Quote:

---

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.

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 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 // TWEENING IN ACTIONSCRIPT 3.0

This link is broken too Medyman.

Thanks.

The page that was linked can now be found here.

Quote:

---

Originally Posted by 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.

---

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!

Medyman, thanks so much for your template. It really helped me understand how to use actionscript for navigation and transitions (instead of doing it in the timeline). Being that I knew very little actionscript before reading this thread, you clearly have a good way of explaining things.

I am wondering if I can ask you to take this example a step further. I am trying to build a portfolio site that uses entrance and exit animations for several levels of navigation. For example, you click on "videos" and a VHS tape appears with several more navigation options (camera, director, etc.). When you click on say "camera" a video appears and you have a "next" and "previous" button to access other videos in this category.

Meanwhile I need the VHS nav bar that originally flew in to stick around while the various videos come in and out. I can't do this with what you originally provided b/c obviously it does the exit animation and takes it away if I make the individual video pages part of the original actionscript (like adding a pg.7,8,9...).

Hopefully this makes sense. I feel like there must be a simple "do exit animation, except if pg.7,8,9) kind of thing that could work here.

I've tried to reincorporate navigation on the timeline for these interior pages, but that has just created a mess.

Any advice you could provide would be much appreciated.

Thanks,
Mike
(Flash 8)

Well, you would essentially use the same technique but on two different levels. When I get a chance, I'll put together a demo.

I have just discovered this thread and I am so thankful Medyman - your solution for transitioning between pages was so elegant and clean, and exactly what I was looking for. I had been unsatisfactorily trying various methods of transition between pages for days!

But I am now trying to make the first of my movie clips appear on the first frame. You gave the following answer to someone with the same problem:

Quote:

---

Originally Posted by 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.

---

I have tried to solve this for myself with my limited Actionscript knowledge, but with no success. Would you be able to give a quick example of how you would do this?

Any help would be greatly appreciated.

If I get a chance tomorrow, I'll try to look at the code. I wrote it too long ago to remember what exactly the loadPage() function is.

I'm not at a computer with Flash at the moment so can't do much right now.

WOW! What was I thinking when I made this? It's brutal to see your old code. It's so unelegant! I'm going to redo this and upload a new demo with more efficient code.

But to the point at hand -

Change the highlighted variables as shown:

Code:

---

var whoIsOn:Number = 0;
var whatIsNext:Number = 1;
var blankScreen:Boolean = false;

---

Next, add a call to loadPage() at the bottom of the code

Code:

---

//  Load Image on Start
loadPage();

---

But I don't recommend using this code. If you can, wait a day or so and I'll post a newer, more robust version.

Hey Medyman, thanks for this. With the generosity of strangers such as yourself I have learnt a great deal about AS code in the last week or so. Finally I am getting to understand the principles of it - until now it made about as much sense to me as a Chinese dictionary!

Anyway, I made the changes you suggested above (even though you recommended not to) and on the whole it works fine, but there seem to be a few minor glitches:
The first page appears automatically as desired as soon as the site opens, but it remains on the stage even when other pages are loaded through their menu buttons unless I click the "home" (first page button) before any of the others. The second problem concerns some weird behavior in the functionality of two pages that have instances of the SlideshowPro component on them. Basically if I go to those pages ("gallery" and "video") first the buttons of the component work fine, but if I then go to a SlideshowPro component-free page and back to the gallery or video page (or if I go to another page before I click on them) the functions of the component stop working. I gotta tell you, it has me stumped. Any thoughts?

You mentioned that you might try and put together a more robust version of your transitioning code, and if you do, it may be that those problems will go away, and who knows, in the meantime I may discover I am able to solve the problem for myself (although I'm not too confident of that right now!)

I look forward to seeing what you come up with. Thanks for the help so far.