page transition slide in and out

[kony]

Hello there,

I am very beginer for actionscript.

I would like to make the site below.

http://www.gotmilk.com/#/gotmilkbrand/

I do not know specific name of what I want to do.

First, In the site 1st page( mc?) is slided in,
and then, when one (it is supposed to go to 2nd page) of the buttons in the navigation bar is clicked, 1st page will be slide out, then 2nd page will be slided in.

Anyone knows how to do this.

Please help and give me tip and idea.

Thank you.

[Medyman]

AS 2.0 or 3.0?

[kony]

I am starting as 3.0

I am leaning basic things.

[Medyman]

In general, I agree with what Erik Hallander told you over on the GTAL forums -- start with the basic and work your way up.

But, I consider this a basic concept. It's referred to as masking. I'm not sure how familiar you are with Photoshop or Flash, but masking is basically manually defining the portion of a particular plane to show. So, on the page that you linked, what's happening is that the page moves down and then another comes up in it's place.

This can be done by creating a separate movieclip for each "page" and animating them in/out as necessary. Or you can have page and swap out content. The latter is definitely the more efficient of the two.

Before you go further though, you should learn the basics of masking, then move on to tweening (animating). In AS 3, I generally use the Tweener classes for animation. I've started using TweenMax and TweenLite because they're less resource intensive. But, for what you'll be doing, the performance of all of them will be the same.

So, take a look at this example. When you open the .fla, you'll notice a pink layer. That's the visible area of the .swf. No matter how large/small you make the .swf when you embed it, only that area will be visible. So, if you want to create that sinking down and coming back up effect, you simple animate the object to drop below the visible area, and then reappear. Note that the "ripple" effect from the Got Milk? website is probably a video important in from After Effects of the like.

I hope that helped. Let me know if you have any questions.

[kony]

Thank you for response.

basically I understood how teen worked.(I looked at the lee's video again and again)
It was very helpful, but I did not expect masking for the site.

The link you gave did not have fla anymore, but I try to figure this out by myself.
what you commented is very helpful, and I really appreciate you caz you gave me key to start.

[Medyman]

The link you gave did not have fla anymore, but I try to figure this out by myself.

Oops. Sorry about that. I'll fix that soon.

[kony]

hello

if possible , i would like to see fla.

anyway, again thank you.

[Medyman]

hello

if possible , i would like to see fla.

anyway, again thank you.

Yeah, like I said, I'll fix it soon. The .fla is on my home computer and I'm at my office. I'll upload it when I get home.

[kony]

hello
I wrote the code below:

import caurina.transitions.*;
import caurina.transitions.properties.*;


home_mc.addEventListener(MouseEvent.CLICK, onBtn1Clk);
addChild(btn1_mc);


btn1_mc.buttonMode = true;

//function onBtn1Clk(evnet:MouseEvent):void {

function onBtn1Clk(event:MouseEvent):void {
Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic"});
Tweener.addTween(ref2_mc, {y:100, time:2, transition:"easeinoutQubic"});
}


//trace("btn1_mc was clicked.");

//}




philosophy_mc.addEventListener(MouseEvent.CLICK, onBtn2Clk);
addChild(btn2_mc);

btn2_mc.buttonMode = true;


function onBtn2Clk(event:MouseEvent):void {
Tweener.addTween(ref_mc, { y:100, time:2, transition:"easeinoutQubic"});
Tweener.addTween(ref2_mc, { y:500, time:2, transition:"easeoutSine"});

}

What i did is that there are 2 buttons, and when you click on btn1_mc, ref_mc is going to come up from the bottom, and then when you click on btn2_mc, ref_mc is going down , and ref2_mc is coming up.

But, i do not think it is what I want to do. What I want to do is "when you click on btn2_mc, ref_mc is going down after ref_mc is donw completerly, then ref2_mc is coming up.

so I just wonder how this transition works?

Use timerEvent? or something else?

[Medyman]

You can do that in one of two ways:

1) Add a delay
There is a delay parameter. So, if you know that ref_mc will take 2 seconds to move all the way down, you can do this:

Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic"});
Tweener.addTween(ref2_mc, {y:100, time:2, delay:2, transition:"easeinoutQubic"});

Now, ref2_mc's tween starts 2 seconds after ref_mc.

2) onComplete
Tweener also has a callback function. It'll fire as soon as the initial tween is complete. So, your code might look something like:

Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic", onComplete: function():void { Tweener.addTween(ref2_mc, {y:100, time:2, transition:"easeinoutQubic"});}});

Or, cleaning it up to use a function call instead of the anonymous function

Tweener.addTween(ref_mc, { y:500, time:2, transition:"easeinoutQubic", onComplete: TweenRef2 });
function TweenRef2() {
	Tweener.addTween(ref2_mc, {y:100, time:2, transition:"easeinoutQubic"});
}