Collapsing my home, about, contact sections with an animation

[Kivit]

When I click the buttons on my flash website, I have it set up such that each section opens up as a neat little animation. Simple to do! But... I cannot, for the life of me, figure out how to make the animation "collapse" when a new button is clicked, thus proceding to the animation for the next section.

for example if i am under the "home" section and I click the "about" section I need the content in the "home" screen to animate back to whence it came, and the "about" section content to pop up with its usual animation... and of course, this has to work with any given situation.

I tried a million things... and I kept hitting brick walls... It's baffling me.

I tried to write what needed to be done on paper, to see if i could script it, but my head just explodes...

I know it's possible, I've seen other sites do it... Maybe I'm just missing something really obvious? That usually seems to be the case... but i usually figure that out pretty quickly.

Any help would be appreciated!

Thanks :)

[xInstinct]

Hi Kivit :)

Have you looked into the ActionScript 3.0 Tween() class?
You can dynamically set up a tween (motion) and also add listeners to see when it has finished, that way I think you can achieve what you want.

Lemme know,


xInstinct

[Kivit]

That sounds like it just may work! I'll give it a shot then get back to you :)

Thanks xInstinct!

but there may be one problem, part of my animation is not a tween... but i think i can figure out a way to do it.

[Kivit]

oh... and i just thought of another problem. I'm not sure how I would make it listen for 4 possible tween endings.

and how would i make an event that varied based on what button was clicked... like where would i even put the script for that... would it be something that is part of each button? oh darn here i go getting all confused again... I still think im missing something obvious here lol

[xInstinct]

Lol, lemme give you an example...

Say you have a rectangle (shape, but lets make it a movieclip) and a button.
When you click the button, the shape will Tween to a new position.
Button's instance name is btn, movieclip's instance name is shape.

btn.addEventListener(MouseEvent.MOUSE_DOWN, doSomething);

function doSomething(e:MouseEvent):void
{
    var myTween = new Tween(shape, "x", Bounce.easeOut, shape.x, shape.x+60, 0.5, true);
}

So, that will make the object (shape), animate in the "x" direction, in a Bounce fashion, from where it's x position (shape.x) is to plus 60 pixels (shape.x + 60) in half of a second.
Then, you can add a listener...

btn.addEventListener(MouseEvent.MOUSE_DOWN, doSomething);

function doSomething(e:MouseEvent):void
{
    var myTween = new Tween(shape, "x", Bounce.easeOut, shape.x, shape.x+60, 0.5, true);
    myTween.addEventListener(Event.COMPLETE, doSomethingElse);
}

function doSomethingElse(e:Event):void
{
    myTween.removeEventListener(Event.COMPLETE, doSomethingElse);
    var newTween = Tween(shape, "x", Bounce.easeOut, shape.x, shape.x-60, 0.5, true);
}

So when that's done, it will move back to where it was... You gotta love the functions!

xInstinct

[Kivit]

wow thanks, combining that with another idea that popped into my head solved the problem! woo

[Kivit]

once i get it all working ill post an example of what I did to make it clear to everyone else. thanks again :)