Link to home
Start Free TrialLog in
Avatar of anim8interactive
anim8interactive

asked on

Creating a Flash Movie With the Following Features...

The best way I know how to ask what I'm seeking is to direct you to:

www.advanceflash.com

There are several other examples of this on the web however this is the best and the effect I'm going for.  What I'm needing to know is, how EXACTLY does one go about making that functionality where you click a navigation button, something happens before the movie loads and then the movie loads...then when you click ANOTHER navigation button, the current movie goes away with a cool animation and then the next movie loads...I would assume you do this with LoadMovie?  But whats the process of making it so that when you click on another navigation element, the current element will go away with a cool transitional effect?  I hope I'm making sense here...it's hard to describe...basically I want to know how to recreate a site like the one above :)

THANKS AGAIN
Anim8tion Guy
Avatar of Billystyx
Billystyx

If you use movieclips acting as buttons, you can define your rollover rollout events a lot more interestingly.
you create a mc with a sequence of frames for rollover rollout static and press, and put a
stop();
at the end of each sequaence.
for each sequence, put a framelabel at the first frame, for example
'over'
'out'
'stop'
'press'

then on the parent clip (maybe the _root timeline)
add these functions, assuming your mc button you created has an instance name 'mcbutton'
mcbutton.onRollOver=function(){
this.gotoAndPlay("over");
}
mcbutton.onRollOut=function(){
this.gotoAndPlay("out");//which should then lead directly into 'stop' sequence, if you even bother with
a stop sequence
}
mcbutton.onPress=function(){
this.gotoAndPlay("press");
}

At the last frame of the press sequence, you can add the code directly to the frame, like
getURL("www.google.com");
ie, the command you created the button for in the first place

To add other mcs to the swf on rollover or rollout, on the first frame of each sequence of the mcbutton that you want other things happeningon stage, you can attach them to the mcbutton clip with
attachMovie(mc1","mc1",10);
this.mc1._x=200;
as an example, and then on last frame of that attached clip (make sure you set the linkage name for this in the library), a removeMovieClip(this);
to clean it all up for next time.
Hope this makes some sense:)
If you need anything clarified, please say.
billystyx
Avatar of anim8interactive

ASKER

Hmmm...I pretty much knew all that about the buttons but thank you for the explanation...

But is the attachMovie command what I would use to make my different movies appear and dissapear?  What I'm confused about is, how do I make one "dissapear" effect and apply it to all my movies that I'm using the loadMovie command to get?  Does that make sense?  I know how to make interactive buttons using frame labels and movie clips...I'm not too familiar with the attachMovie function though...and is this code you have provided, for MX 2004?  I'm not familiar with the function(){ } code...never used it in MX before.

Thanks again
I think I've figured out what I'm trying to ask.

I'm making a test movie right now to figure out what I'm trying to do...here's what I have.

I have the main movie with a loading intro in frame 1, then a if statement to tell it if frames loaded == framestotal goto and play frame 2 so that it plays my main movie...got that.  In the main movie I have a mc instance called "mainmovie" which houses all my main movie symbols and instances.  Within mainmovie I have button1, button 2, button 3 etc.

I have 3 external movie clips for each corresponding button.  I can get it to show button 1's movie clip when I click on button 1.  What I need to know how to do, is basically give commands to an external movie clip and target a frame label like you do with internal movie clips.  So what I want to do is:

on press of button 1, loadmovie(button1.swf)  blah blah blah
on press of button 2, gotoandplay the frame label "exit" on button1.swf's main timeline.
And so on for each button...

Make sense?

So essentially, what I need to know is...how do I give commands to an external movie?  OR is there a better way to do what I want?  I just want the current movie clip to go away in a cool animation which I'll setup, and the new movie to appear, then when you click on a new button, the same thing happens...I hope I'm being clear.
For what you're trying to do it's much easier to put your transitions on the main timeline, you can still have content in the mivieclips but the transition content should be on the main timeline to make it easier.

THEN!

Let's say you have three pages for example purposes:  About  Products  Contact plus a preloader.

Each page should use (for example) 20 frames.  10 for in transition and 10 for out transition.  So for the about page frame 10 could be the beginning of the in transition, frame 20 where the content actually is and then frame 30 the end of the out transition.

The beginning frame of each transition should be labeled:  About, Products,......

Frame 10 would need no actions.
Frame 20 would have a stop(); action plus any actions needed to run your content.
Frame 30 would have the action:  gotoAndPlay(page);  // page will be set as a variable in the buttons.

Now your buttons just need a play() action and set the page variable to match the frame label, like:
on (release) {
     page = "About";
     play();
}
and repeat this for all your buttons.

So what's going on is this:
You're on a page, let's say contact.
You click the about button.  This tells your play head to play() which plays your out transition for contact.
When it gets to the end of the contact trasition, you reach the gotoAndPlay(page); code.
By clicking the about button, you defined the variable "page" as being "About" so it sends the playhead to the beginning of the in transition for About.

Make sense?

-Sam
If you are still having trouble upload a fla and we will take a look:)

billystyx
Okay this is very helpful however I'm still confused a bit and I don't have an .fla to really show you as I'm trying to figure out the concept and THEN I was gonna start building the movie :)  I see this featured a LOT in flash websites so I'm excited to learn how to do it.  What I'm confused on is this...do I not use loadmovie to load the different external swf files for say, about us, products, contact us, home.?

I don't really want to have all my movies within one .swf file as that will be a HUGE file my users will have to download...thus I wanted to use the LoadMovie function..am I making sense?  I'm sure this is such an easy thing to do, I'm just confused on the logistics.  Just so you know, I'm a fairly decent flash developer already and understand a lot of functionality...this is just something that has me baffled for some reason...I mean I KNOW I could do it with just having several different movie clips and calling to each one, setting an in and out transition, but again I think that would be too cumbersome.  With the method you have specified for me to use, I don't see how to do it using external movies?  Please clarify or post an example .fla if you could please.  Thanks so much for your help...this site is amazingly cool!
You can make the transitions part of the external movie, but it won't be reall smooth that way.

Best thing would be to put your transition effect graphics all in the main movie, and at the center point (where it stops in the middle of the trasition) load your external movie with all the content in it.

-Sam
... and if its just the one transition effect, then essentially it'll only be one mc, which means it won't add that much more weight to your swf, no matter how many times you load it (with attachMovie or straight in the clip as sam suggests)

billystyx

loadmovie with the trainsition means flash has to get it in from outside before playing it, before moving onto the thing the buttons are really there for. As he says, it wouldn't be smooth that way
but how do I get the content to dissapear and show the new content for the button I'm clicking...for instance:

About us content is on the stage...I click contact us and then want the about us to transition OFF and the contact us to transition ON...this is where I'm confused...how do I tell flash how to take the content off and specify WHICH content to take off?
I will make an example...
grea tthank you...sorry to be so slow...I don't think I'm communicating my needs very well...or explaining very well where my confusion lies :) I'm sorry but thank you for wanting to help me out!
http://www.billystyx.co.uk/setups/EE/transition.fla

it may not be exactly what you are after - but if the idea is there and you can't figure it out, ask me and I will adjust it...

billystyx
hmm it won't open...says unexpected file format...is this an mx 2004 document?  If so, I don't have mx 2004 on this particular machine...can you make it MX Compatible?

thanks
I just thought of something I forgot - on the frame of the transition clip with the stop();
on it, that would be where you might put your loadMovie
like
_root.container.loadMovie(_root.mov);

where _root.mov is set in the button code that takes you there...
mov="myswf.swf";
attachMovie("fadein","faidein etc

billystyx
yes just a minute
hmm that really didn't help me much as it doesn't do anything?  I'm still very confused...
what d o you mean it doesnt do anything?
What happens when you push the buttons?

billystyx
It works Billy, you just didn't export the main file.

ANIM8  just open Billy's fla and the ctrl+enter to export it.  That'll generate the missing file.

-Sam
thanks sam - it was too early in the morning !
Yeah I did that, when I push the buttons it doesn't do anything :(  I created the main .swf but still nothin...not sure what I'm doin wrong...

Anim8
try again with
http://www.billystyx.co.uk/setups/EE/transition3.zip

does this work (forgot to save swf1 and 2 as flash player 6

billystyx
nah still doesn't do anything when I click the buttons...does it work for you?
you need to open the transition.fla and ctl-enter to test it..
got to your publsih settings for flash - what version of flash are you publishing for?

billystyx

Flash Player 6...maybe that is the problem?
hmm, can you try 7?

not sure if this is the problem though...
I can't export in version 7 using MX :(
I thought that...
um...
I can explain it again, and you can try it yourself?

billystyx
(aside from that I am not sure)
maybe you can explain to me how to do it in MX?  That would more than likely cure my confusion...

So let me make sure I understand what you're saying...are you saying I can create a movie clip with a transition in it and apply  any other movie clip (using the attach movie function) to that transition?  If that's what you're saying I think I'm following you :) Please clarify...thank you so much for your help and many clarifications on this subject..I assure you I will get this :)

THANKS
i have one frame on the root, withthis code:

attached = "false";
btn1.onRelease = function() {
      if (attached != "true") {
            mov = "swf2.swf";
            _root.attachMovie("fadein", "fadein", 10);
            attached = "true";
            _root.fadein._x = 200;
            _root.fadein._y = 200;
      } else {
            mov = "swf2.swf";
            _root.fadein.gotoAndPlay(16);
      }
};
btn2.onRelease = function() {
      if (attached != "true") {
            mov = "swf1.swf";
            _root.attachMovie("fadein", "fadein", 10);
            attached = "true";
            _root.fadein._x = 200;
            _root.fadein._y = 200;
      } else {
            mov = "swf1.swf";
            _root.fadein.gotoAndPlay(16);
      }
};

both buttons onthe root have instance names, btn1 and btn2.
I fthis doesn't workfor you (in mx), then use ordinary button instances, subbing the btn1.onRelease line for
on(release){ which you stick on the button itself.

then, make a movie called fadein (linkage identifier in the library), and add an animation 5 frames long for the transition up effect, and 5 frames after for thetranstion down effect.
on frame5 of that clip add:

_root.cont.loadMovie(_root.mov);
mov=_root.mov;
stop();

and on frame10:
_root.cont.unloadMovie(mov);

finally, on root frame1 add also an empty mc, with instance name 'cont'

add 2 swfs to the same folder named swf1.swf anf swf2.swf.
These are the loading content for this example.

If you have troulbe, ask me - (sorry about the rushed method, but I am late for work!)

billystyx
Hmm alright I'm starting to get a lot clearer on this.  I have done everything you suggested however it's not producing my desired effect...

I click button 1, my "up" animation happens and move1 is loaded...but the transition is not applied to movie 1...it's only playing my fadein mc and then popping up movie 1.  Then when I click button 2, fadein mc plays and movie 2 pops in.  However what I want to happen is this:

When button 1 is clicked, my "transition" animation plays (like on advanceflash.com) and the movie with the content I want to appear fades in.  THEN if content is already displayed other than the content I want to be displayed, the content that is up fades out, my transition animation plays, and then the movie with the content I want to be displayed fades in, and so on and so on.  With what you have provided me with, I still don't have a clear understanding on how to produce my desired effects, described above.

To create the fadein/fadeout effect on my movies with the content in them, do I actually have to create the fadein/fadeout effect for EACH movie?  

Also another flaw of what you have told me to do is, the transition animation stays on the screen..it doesn't go away.  

I hope this gives you clearer vision of what I'm trying to accomplish??

Yes, it does a bit - you want a fadein-fadeout effect on the movie loading and the one unloading - that should be easy enough (sorry I misunderstood), first question though, is are the movies being loaded from outside the main swf, or are they all there and available inside the main (so you would be using either loadMovie, unloadMovie (or a derivative thereof) or attachMovie, removieMovieClip).

Let me know that and I will explain it (hopefully a bit better:)

billystyx
well when the movies are created that will contain the content I will want to pull in, they will more than likely be external .swf movies and I would just use loadMovie/unloadMovie.  Is this what you are asking?
attachMovie seems to be working good too :) So whatever is easiest I guess.
ASKER CERTIFIED SOLUTION
Avatar of Billystyx
Billystyx

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
oooook now you've lost me with all that advanced code...I guess I could just copy and paste but then I wouldn't be learning anything...is there an easier way to do what I'm looking for?  That seems really complicated to me and it uses a lot of coding I'm not familiar with...keep in mind, I'm a VERY BEGINNING MX 2004 user...so function () is new to me...I'm sorry to be such a pain...
what is the eval and dep code for ?
function is nothing more than (in this case) a way of arranging the code into specific methods:
function fadeout fades out the level, and function fadein does opposite.
everything between
function fadeout(){
//is the 'functional' part of the code
}

you call a function by using the name of the function, and in the above case I call the function from inside itself until the alpha of the level is set to what I want it to be set to.

The only alternative to coding it though, is to put the fadein and fadeout tweens on each movie being loaded, which not only will be timeconsuming, it'll make each one a lot heavier too...

Try it, make sure it works, and then I can dissect the code for you so you understand it:)
billystyx

num is the level number you set to load to, so to fade the right level you need to 'evaluate' the target path.
If you are not comfortable with it, just always load to level1, in which case, do away with the eval line in favour of:

if(_level1._alpha>0){

and so on.

dep=_root.getNextHighestDepth();

because I never know how many different depths are going to be on stage before the levelpreloader gets added, I put this in as a precaution.
But if you know there are only a few things on stage first, then
you can get rid of this too, and just attach the movie with :

_level0.attachMovie("levelpreloader", "levelpreloader", 10);
...as an example
okay do I put all the :

loaderloaded=false;
function fpreloader() {
     var preLoader1 = new MovieClipLoader();
     preListener = new Object();
     preListener.onLoadStart = function(loader) {
          dep = _level0.getNextHighestDepth();
          if (_level0.loaderloaded == false) {
               _level0.attachMovie("levelpreloader", "levelpreloader", dep);
               _level0.levelpreloader._x = 275;
               _level0.levelpreloader._y = 270;
               _level0.levelpreloader._xscale = 100;
etc...

code in the 1st frame of the main timline then?  I'll give it a shot and see what happens :)
yes, and the other code (starting with on(release)) on the buttons

where do I add these functions:
function fadein(){
if(eval("_level"+num)._alpha<100){
eval("_level"+num)._alpha +=10;
fadein();
}
}
function fadeout(){
if(eval("_level"+num)._alpha>0){
eval("_level"+num)._alpha -=10;
fadeout();
}else{
fpreloader();
}
}


???
one other really quick question...

is there a way to say...

if (variable == "something" OR "somethingelse") {
do this {
}
}

What I'm trying to do is set it up so that the variable mov = "none" when the main movie is first loaded.  But then when a button is clicked, it changes the variable mov to the name of the swf that it's loading.  Then on the buttons I want to say:

{
if (_root.mov == "(swf's name).swf" OR "none") {
DO THIS }
}

So that if button 2's content is loaded, when I click button 1, it will do the actions on button1...and if button 1 is the one loaded, when I click button 1, it won't do anything.

I can do what I want if I just have two buttons on the stage, but when I get 4 or 5 or more, that is where I'll need to know how to tell flash if mov is set to this OR that, do this...make sense?




 
if (mov== "swf1.swf" || mov= "swf2.swf") {
//do this
}else{
//do something else
}

would be the correct syntax

on buttons:
on(release){
if(!_level1){
mov="myswf1.swf";//subbing the movie name only
num=1;
fpreloader();
}else{
mov="myswf1.swf";//and here
num=1;
fadeout();
}
}

billystyx
I did all that you said above with exception to the latest code I asked about...please have a look at my .fla file and see what I'm doing wrong because I can't get anything to work...

www.jefflongsmusic.com/testmovie/testmovie2.zip

Thanks
I will do - can't till tonight unfortunately(about 7hrs) - I will get onto it asap:)

billystyx
ok, frame1:

loaderloaded = false;
function fpreloader() {
      var preLoader1 = new MovieClipLoader();
      preListener = new Object();
      preListener.onLoadInit = function() {
            levelpreloader.removeMovieClip();
            eval("_level"+num)._x = 0;
            eval("_level"+num)._y = 0;
            eval("_level"+num)._xscale = 100;
            eval("_level"+num)._yscale = 100;
            eval("_level"+num)._visible = true;
            eval("_level"+num)._alpha = 0;
            fade = "fadein";
      };
      preLoader1.addListener(preListener);
      preLoader1.loadClip(mov, num);
}
onEnterFrame = function () {
      if (fade == "fadein") {
            if (eval("_level"+num)._alpha<100) {
                  eval("_level"+num)._alpha += 10;
            } else {
                  fade = "";
            }
      }
      if (fade == "fadeout") {
            if (_level1._alpha>0) {
                  _level1._alpha -= 10;
            } else {
                  fade = "";
                  fpreloader();
            }
      }
};

button1:
on (release) {
      if (!_level1) {
            _level0.mov = "swf1.swf";
            //subbing the movie name only
            _level0.num = 1;
            _level0.fpreloader();
      } else {
            _level0.mov = "swf1.swf";
            //subbing the movie name only
            _level0.num = 1;
            _level0.fade = "fadeout";
      }
}
button2:
on (release) {
      if (!_level1) {
            _level0.mov = "swf2.swf";
            //subbing the movie name only
            _level0.num = 1;
            _level0.fpreloader();
      } else {
            _level0.mov = "swf2.swf";
            //subbing the movie name only
            _level0.num = 1;
            _level0.fade="fadeout";
      }
}

billystyx
I will upload it too...
thanks man but that file still doesn't work..
did you try the code?
I will upload again - double check its allfor mx...
billystyx
I haven't tried the code just yet...would be really good if we could get your file to work though so I can see everything in action and pick apart the code...I learn really well that way.
http://www.billystyx.co.uk/setups/EE/transition.zip

let me know if it doesn't work and you need more help on the script and we can go through the script here instead...
billystyx
downloading and trying now...will let you know the results
still no luck...sorry friend...bummer...now what?
I would try that code and let me know how you get on with it...
(what are you working on? Is it a mac?)
billystyx
nope pc
Is it saying unrecognised file type?

Can you try the code and see how that goes (there isn't anything else in it - at this stage it just fades in the new clip on button press and then press again (or other button) will fade out the loaded one first and then fade in the new one)?

billystyx

k I will give it a try and let you know...no the file comes up just fine but when I click the buttons, it doesn't do anything...that's what I mean by it doesn't work...
sorry about that- I just realised the moviecliploader doesn't work with 6.

try this code instead (I would upload a fla but I don't have access to flash right now)

loaderloaded = false;
onEnterFrame=function(){
if(eval("_level"+num)._width>0){
 eval("_level"+num)._alpha = 0;
          fade = "fadein";
loaderloaded =true;

 if (fade == "fadein") {
          if (eval("_level"+num)._alpha<100) {
               eval("_level"+num)._alpha += 10;
          } else {
               fade = "";
          }
     }
     if (fade == "fadeout") {
          if (_level1._alpha>0) {
               _level1._alpha -= 10;
          } else {
               fade = "";
               fpreloader();
          }
     }

}
function fpreloader() {
loadMovieNum(mov,num);
}

button1:
on (release) {
     if (!_level1) {
          _level0.mov = "swf1.swf";
          //subbing the movie name only
          _level0.num = 1;
          _level0.fpreloader();
     } else {
          _level0.mov = "swf1.swf";
          //subbing the movie name only
          _level0.num = 1;
          _level0.fade = "fadeout";
     }
}
button2:
on (release) {
     if (!_level1) {
          _level0.mov = "swf2.swf";
          //subbing the movie name only
          _level0.num = 1;
          _level0.fpreloader();
     } else {
          _level0.mov = "swf2.swf";
          //subbing the movie name only
          _level0.num = 1;
          _level0.fade="fadeout";
     }
}


That SHOULD work, but if not - at least the problem is sorted - sorry about my fuzzy head:)

we will get this sorted out by tonight I reckon

billystyx
hmmm still no worky :(  I'm gonna get some rest, we'll try again later...thanks for trying
I will take another look tonight in front of flash  -

billystyx
try this:

loaderloaded = false;
onEnterFrame = function () {
      if (eval("_level"+num)._width>0 && loaderloaded == true) {
            eval("_level"+num)._alpha = 0;
            fade = "fadein";
            loaderloaded = false;
      }
      if (fade == "fadein") {
            if (eval("_level"+num)._alpha<100) {
                  eval("_level"+num)._alpha += 10;
            } else {
                  fade = "";
            }
      }
      if (fade == "fadeout") {
            if (_level1._alpha>0) {
                  _level1._alpha -= 10;
            } else {
                  fade = "";
                  fpreloader();
            }
      }
};
function fpreloader() {
      loaderloaded = true;
      loadMovieNum(mov, num);
}

and buttons 1 and 2:

on (release) {
      if (!_level1) {
            _level0.mov = "swf1.swf";
            // subbing the movie name only
            _level0.num = 1;
            
            _level0.fpreloader();
      } else {
            _level0.mov = "swf1.swf";
            // subbing the movie name only
            _level0.num = 1;
            _level0.fade = "fadeout";
      }
}

on (release) {
      if (!_level1) {
            _level0.mov = "swf2.swf";
            // subbing the movie name only
            _level0.num = 1;
            _level0.fpreloader();
      } else {
            _level0.mov = "swf2.swf";
            // subbing the movie name only
            _level0.num = 1;
            _level0.fade = "fadeout";
      }
}

this should be compatable for mx.

billystyx
Hey one question on this...

explain to me what and how this code works:

 if (eval("_level"+num)._alpha<100) {

what is the eval function??
eval just takes a string and converts it to code.
SO the full string up above there would be
_level1._alpha
which the eval function sees as the alpha level of level1, rather than a string.
make sense?

billystyx
ah ok that makes sense :)  
cool:)
Well I'm designing my interface over the next few days and then I'll try your code again...in the mean time, can you try and explain something else to me?

How do you create the following things:

1)  A "tooltip" type thing, where you mouseover something and something else pops up whereever the cursor is...know what I'm talking about?  And then make it follow the cursor but constrained to a certain area...make sense?  If not i'll try and find an example.
2) How do you control the speed and direction of something, like a string of portfolio images  or something based upon the direction and speed you're dragging the cursor...know what I'm talking about?  again if not I'll try and find an example...
Yes, but these may be best set as separate questions (in the interest of making the PAQ archives as useful as possible:)

Billystyx
no prob I will post them seperately so you can get more points :) hehe

look for em!
thanks:)
no prob, just posted them.  Don't forget about me in this post though :)
no, once you test it all out - just post a comment and I will be back to help (if needed, of course:)
how are you going with this one?