asked on

Interface design: animating panes in and out

what i'm trying to do is make an interface that has different sections which each have an opening and closing animation. I want to make it so that when you click to open a new page the current page animates out first and then the new page animates in. I've made the interface all on the main timeline and divided it using frame labels, two for each of the three pages, one that contains the opening animation(page1, page2, page3) and one that contains the closing animation(page1_close, page2_close, page3_close ).

I'm using this actionscript, modified for each of 3 buttons:

b1 is an instance of a button

b1.onRelease=function(){
if(_root._currentframe=="page2"){
_root.gotoAndPlay("page2_close");
newPage="page1"
_root.gotoAndPlay(newPage);
b1.enabled=0;
b2.enabled=1;
b3.enabled=1;
}else if(_root._currentframe=="page3"){
_root.gotoAndPlay("page3_close");
newPage="page1"
_root.gotoAndPlay(newPage);
b1.enabled=0;
b2.enabled=1;
b3.enabled=1;
}else{
(_root.gotoAndPlay("page1"));
b1.enabled=0;
b2.enabled=1;
b3.enabled=1;
}

}

To download the fla check out: http://www.habitrecordings.co.uk/downloads/nav_new.fla

The problem that i'm getting is that the opening animations all work fine, as does the disabling of the buttons, but the closing animations are not playing. When u click on a new page the current one disappears and the new one animates in, i want the current page to first animate out.

Thanks for your help.

blue-genie

here's a primative suggestion (it's friday afternoon and i'm not too keen to think very hard)

due to your frame setup, its a bit difficult, so a hack would be to incorporate frame and btn script, ie. button script sets up a variable and tells frame which is current section, and after closing the currentsection, the frame moves on to play the new section.

something along these lines (each btn will set itself to be the _global me)
b2.onPress = function() {
      if (_global.open == 2) {
      } else {
            _root.gotoAndPlay("page" add _global.open add "_close");
      }
      _global.me = 2;
};

then in the frames where the animation is stoped (closed)

if (_global.me == 1) {
      _root.gotoAndPlay("page1");
} else if (_global.me == 2) {
      _root.gotoAndPlay("page2");
} else if (_global.me == 3) {
      _root.gotoAndPlay("page3");
} else {
      stop();
}

supgee

ASKER

i understand part of that i think.

b2.onPress = function() {
if (_global.open == 2) {
} else {
_root.gotoAndPlay("page" add _global.open add "_close");
}
_global.me = 2;
};

would be placed in frame 1, one for each button.

not too sure where the other code would be placed, could you tell me what number frame that would go into to give me an idea please.

You say that my frame setup makes it difficult, could you give me any guidance as to a better way of doing this please.

Calron

Your problem is this call:

_root.gotoAndPlay(newPage);

You would have to add this call to the end of the fading out animation. You also have to make sure that the variable newPage is accessible in the fading out animation. This can be solved by replacing newPage with _global.newPage.

Try this. Else let me know and I can do straight in your fla.

supgee

ASKER

Calron, would appreciate if you could show me on the .fla if you are able to post it somewhere for me or email it to me.

blue-genie

in my version, the button functions will remain where you have them now.

the
if (_global.me == 1) {
      _root.gotoAndPlay("page1");
} else if (_global.me == 2) {
      _root.gotoAndPlay("page2");
} else if (_global.me == 3) {
      _root.gotoAndPlay("page3");
} else {
      stop();
}
must go into all the last frame of all the pageX_close animation sequences (ie. where they close animation stops and where you currently have the stop(); )

supgee

ASKER

blue-genie, should the above code be the same in each of the 3 frames where pageX_close animation is, i've put it all in and it doesnt work, once the swf has opened page 1 cannot be accessed and the closing animations are still not played.

Thanks.

ASKER CERTIFIED SOLUTION

Calron

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

blue-genie

supgee, yes, the code will all be the same, sorry i forgot to mention the one thing, which unfortunately is important, you'll notice the use of the global variable open, that must be set in each frame each time when the animation stops at the open state. ie.

ie. when your menu item is open, at the frame where you've got the stop actions, _global.open = 1; or 2 or 3 ...

that will do it
:-)

i'm off home now, good luck.

supgee

ASKER

Calron, you're a star mate. If i was to turn this into a full site how would i go about loading content when the page had opened. would it be possible to nest an opening and closing animation for content loading and unloading, inside an mc perhaps?

Thanks again.

Calron

Do you mean a preloader?
For a preloader I usually add a new scene before the main scene and show a preloading animation there before even continuing to the main part.

Now if you mean about loading a picture once the frame is there, the I would put that into a separate movieclip. Then you just add that to the page and it will show your loading animation until you have the image loaded. Have a look at:
http://www.actionscript-toolbox.com/samplemx_loadjpg.php

this shows how to a load a jpg.

Unloading takes no time so you would not have to add an animation for that.

By separate movieclip I mean a movieclip in your library that you then either add dynamically and set the filename you want to load.

supgee

ASKER

Thanks again Calron, i mean if for example when page 1 opens and stops, if i was to want to load some content such as text and an image, how could i make it so that i could have an animated mask that reveals the content and then hides it again before the page_close animation when a new page is selected?

Calron

As I said before have a separate movieclip that does all the loading and displaying. Add this movieclip to the end of the opening animation, like that it only shows up once the opening animation is done. Then remove it at the beginning of the closing animation. In you case you would only have to span two frames with this movieclip. The last frame of the opening animation and the first frame of the closing animation.
You can alos add this movieclip dynamically through actionscript. and remove it like that again. It all depends what you are more comfortable with and how dynamic you want to keep the whole thing.

supgee

ASKER

woould it be possible then to have the actual content then animating in and out in the same way that the background for each page will animate in and out. so in the context i said before a mask animating in, displaying the content, holding it, then animating out as the page animates out. I'm just confused by the fact that an mc has its own timeline which i want to be able to control alongside the main timeline.

Calron

That's the nice thing of Flash. I can have a separate animation and drop it onto the main timeline as it's own object.

You have to think of it this wa, say I wanted to animate a face. In one movieclip I animate the mouth and stick that into the library. The same for the eyes, etc.

Then on a intermediate level I stick the complete face together. Here I have the face, the eyes, all set up. But his is still a movieclip from the library.

In the end I only drop one movieclip on the main timeline, which is the complete face. I can then move around the face, resize it, rotate it, all in very easy steps without ever having to worry about whether the eyes or ears are move along correctly.
Nesting Movieclips into movieclips into movieclips can be an incredibly powerful feature once you get the hang of it.

supgee

ASKER

you've been a huge help calron, all much appreciated. if you get the chance i would appreciate it greatly if you could adapt my .fla to show me how i could achieve what i was saying about the mask.

Either way, thanks a lot for all the help.

Calron

What you would have to do is replace the objects that you are now using in your opening and closing animation. Create a movieclip for each page and use that moviclip in the opening and closing animation.
Now that you have three separate movieclips (one for each page) you can add as much animation to each of those movieclips as you would like. They will still move in and out when the buttons are pressed.

Calron

If you want to attach movies dynamicalls have a look at:

http://www.actionscript-toolbox.com/sampleattachmovie.php

for tutorials on using masks search for them on www.flashkit.com/tutorials

and most important of all. Try out everything you can think of. The best way to learn flash is to try out your ideas. Look at flash files from others and see how they did it. Again www.flashkit.com has a whole lot of samples so it's a good place to start.