Solved

Interface design: animating panes in and out

Posted on 2003-11-07
17
260 Views
Last Modified: 2010-04-03
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.
0
Comment
Question by:supgee
  • 7
  • 7
  • 3
17 Comments
 
LVL 39

Expert Comment

by:blue-genie
ID: 9701398
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();
}


0
 

Author Comment

by:supgee
ID: 9701446
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.
0
 
LVL 5

Expert Comment

by:Calron
ID: 9701475
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.
0
 

Author Comment

by:supgee
ID: 9701497
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.
0
 
LVL 39

Expert Comment

by:blue-genie
ID: 9701523
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(); )
0
 

Author Comment

by:supgee
ID: 9701585
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.
0
 
LVL 5

Accepted Solution

by:
Calron earned 125 total points
ID: 9701628
You can download it from:

www.lauchenauer.info/nav_new.fla

I simplified your code a bit by adding a variable to store the current page as well.
Also take car e not to assign events to buttons twice, which you had in two cases. You had code on the button itsel:  on (release) {} and later on you wrote in your code: b3.onRelease = function() {}

0
 
LVL 39

Expert Comment

by:blue-genie
ID: 9701673
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.

0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:supgee
ID: 9701676
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.
0
 
LVL 5

Expert Comment

by:Calron
ID: 9701722
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.
0
 

Author Comment

by:supgee
ID: 9701890
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?
0
 
LVL 5

Expert Comment

by:Calron
ID: 9701915
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.
0
 

Author Comment

by:supgee
ID: 9701982
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.
0
 
LVL 5

Expert Comment

by:Calron
ID: 9702067
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.
0
 

Author Comment

by:supgee
ID: 9702150
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.
0
 
LVL 5

Expert Comment

by:Calron
ID: 9702237
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.

0
 
LVL 5

Expert Comment

by:Calron
ID: 9702265
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.
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction This article is primarily concerned with ActionScript 3 and generally specific to AVM2.  Most suggestions would apply to ActionScript 2 as well, and I've noted those tips that differ between AS2 and AS3. With the advent of ActionS…
Sometimes you know that one object has a specific child in it, but you can't find the child. This happened to me when I was trying to code some actionScript to make a toolbar work with its embedded buttons.  My partner had created the toolbar usi…
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
The goal of the tutorial is to teach the user what frame rate is, how to control it and what effect it has on the video.

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now