FORUMS: list search recent posts

Page Transition / Animation with AS2

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
tony sader
Page Transition / Animation with AS2
on Aug 13, 2008 at 4:11:45 pm

Hi Everyone,

I am hoping that one of you guys can help me out here since I am very new to Flash and actionscript.

I am working on a website where I would like to implement a consistent page transition from content page to content page.
To keep it simple I have four buttons: Home, Portfolio, About and Contact. Each of the buttons are MovieClips and they animate when rollOver and rollOut.

I would like to have a transition animation played every time you go from content page to content page. Basically the transition involves a falling curtain.

So when for example you are on the Home page and you click on the Portfolio button, I want my animated curtain fall over the Home page and then when it goes up you can see the Portfolio page. And I would like this to happen for all my content pages.

I hope this is clear enough if you need any further information please ask.

Any help or suggestion is highly appreciated. Thank you in advance!



Return to posts index

Sam Mattern
Re: Page Transition / Animation with AS2
on Aug 14, 2008 at 2:20:39 pm

Probably the actionscript-lightest solution would to be create a layer for your content, and a layer above that for your curtain. Setup a keyframe for each of your pages on the content layer, and set the content. Then, when you click any button, it tells the curtain to go down, detects when it's all of the way down, goes to the appropriate frame (page content), then lifts the curtain up.

If you aren't familiar with labels, get to know them as they are your friend. Create a labels layer with keyframes that match the content layer. Then, select the keyframes one at a time and in the label box on the properties inspector, put the page name as the label (ie: home OR about). That way, when the time comes, you can say (gotoAndStop("home")).

If you aren't familiar with intervals, again, get to know them as they are your friend. You can use an interval to detect when your curtain is all of the way down.

Create an actions layer above the labels layer. This actions layer will look like this:

stop();
var curtainInt:Number; //Allows the interval to be cleared later
function curtainFunction( whatPage:String ):Void{
if( curtain_mc._currentframe == 15 ){
clearInterval(curtainInt);
this.gotoAndStop(whatPage);
curtain_mc.gotoAndPlay(16); //brings curtain back up
}
//where curtain_mc = name of curtain movieclip and 15 is the frame
//that the curtain is down, 16+ would be the curtain lifting again.
//I'd put a stop on frame 15 of the curtain mc.

Then the home button, for instance, would look like:
on(press){
curtainInt = setInterval( curtainFunction, 100, "home" );
}
//"home" ends up as whatPage in the curtainFunction. It
//has to match the labels that you set on the labels layer


Hope that helps,
Sam



Return to posts index

tony sader
Re: Page Transition / Animation with AS2
on Aug 14, 2008 at 5:26:34 pm

Hi Sam,

Thanks a lot for your detailed reply. I will give it a go right away and let you know the outcome. Thanks mate!

Tony



Return to posts index


tony sader
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 12:09:34 am

Hi Sam,

For some reason it is not working for me. Could you please explain what the "whatPage" is supposed to be for the following: function curtainFunction( whatPage:String ):Void{?

I get the following error: Parameter name expected

Thanks



Return to posts index

tony sader
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 12:30:24 am

update:

I changed the whatPage from "home" back to whatPage and the compiling error is gone now but I am not sure if I was supposed to leave the whatPage as you had written the code originally in:
function curtainFunction( whatPage:String ):Void{

But it swf doesn't work. When I click on my home button the curtain_mc does not play at all. I have done all the necessay changes as you had advised see the following:

stop();

var curtainInt:Number;
function curtainFunction( whatPage:String ):Void{
if( curtain_mc._currentframe == 48 ){
clearInterval(curtainInt);
this.gotoAndStop("home");
curtain_mc.gotoAndPlay(74);
}
}

And on the button itself:

on(press){
curtainInt = setInterval( curtainFunction, 100, "home" );
}

Any suggestions?



Return to posts index

Sam Mattern
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 1:20:59 pm

Sorry, I had this answer completely written up nearly an hour ago and was met by a bluescreen. I gave the machine some percussive maintenance, so here's hoping.

Anyways, in my code example I used "curtain_mc" so that it would be clear what the code was referring to. You will need to substitute in the instance name of your curtain movieclip OR give it the instance name "curtain_mc."
*Note, to address a movieclip with actionscript, you must give it an instance name or link it to export in the first frame. The instance name is assigned by selecting the movieclip and naming it via the "instance name" box on the Properties Inspector.

Moving on, the following is the function definition/declaration:
function curtainFunction( whatPage:String ):Void{}

It says that curtainFunction is expecting a string to be passed to it, which becomes the "whatPage" variable for use in the function. It would normally be called like:

curtainFunction("home");

However, since we need to continuously check to see if the curtain is down before we execute the actions, we use this interval to call the function:

curtainInt = setInterval( curtainFunction, 100, "home" );
Which is the same as calling "curtainFunction("home");" every 100 milliseconds, until it is cleared by "clearInterval(curtainInt);"
So, the about button would have the code:
curtainInt = setInterval( curtainFunction, 100, "about" );

So, that is why inside of the function we say:
this.gotoAndStop(whatPage);
Then no matter what button you press, it goes to that page.

Also, important to note. Inside of your curtain movieclip, there should be a "stop();" action on the actions layer for frame 48 to stop it in the down position. Then there should be a blank keyframe on the actions layer on frame 75 so that when you tell it to go there and play, it actually plays instead of stopping there.



Hope that helps,
Sam


Return to posts index


tony sader
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 4:06:00 pm

Then I am not quite sure what I am doing wrong because it seems like I have followed all the steps you have given. Would it be possible for you to have a look at my .fla?

It is not the entire project, just a small version of the what I am trying to establish. Is there a way for me to send you the file?

Tony



Return to posts index

Sam Mattern
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 5:14:09 pm

Sure. Send the FLA to original.svelte at gmail dot com.

Hope that helps,
Sam


Return to posts index

tony sader
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 5:40:54 pm

thanks sam, just sent it off



Return to posts index


Sam Mattern
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 7:21:14 pm

I found the error. It's a scope problem from within the function. It can be fixed by:

_root.gotoAndStop(whatPage);
instead of
this.gotoAndStop(whatPage);

I've tested it and it works. I was gonna suggest referencing _root in my original reply, but I generally try to use relative referencing whenever possible. I like the button rollover effect, btw!

Hope that helps,
Sam


Return to posts index

Sam Mattern
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 8:42:15 pm

More to do to make this work:

To do on the curtain movie clip.
1. Delete the bottom layer (white background).
2. Add a stop() at frame 1 on the actions layer
3. Add a gotoAndStop(1) on the last frame of the actions layer

To do on each button onRelease
1. Add: curtain_mc.gotoAndPlay(2); above curtainInt call.

To do on main stage
1. Select the curtain_mc and set alpha to 100% (You really threw me for a loop with that one, buddy! I was like why isn't it displaying the curtain!?)
2. I forgot to add that under the _root.gotoAndStop(whatPage); in the curtainFunction should say:
_root.curtain_mc.gotoandPlay(49);
NOT
_root.curtain_mc.gotoandPlay(74); or whatever you had

That should do it!

Hope that helps,
Sam


Return to posts index

tony sader
Re: Page Transition / Animation with AS2
on Aug 15, 2008 at 11:37:24 pm

Sam,

I tried all the changes you have given me but for some reason the curtain_mc does not play at all for me. I have sent you the amended fla file again to your email. Could you have a look? Thanks

Tony

PS: thanks for button animation compliment :)



Return to posts index


tony sader
Re: Page Transition / Animation with AS2
on Aug 19, 2008 at 12:40:12 pm

Hi Sam,

Have you ever received my email? thanks

Tony



Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]