help with rollover/rollout animation

[azuki]

Hi all,

 

I just discovered Greensock and have started using it. I *think* I'm getting the hang of it but, honestly, it's either so simple that I can't believe it or I'm completely mucking it up... I'm a novice to AS3 so I'd really appreciate any insight.

 

I'm creating a simple fade in/fade out animation for a button rollover/rollout. Here's what I've written so far, which works fine I'd just like to check with someone if this is the most efficient way to go about coding this animation.

 

navAbout_mc.addEventListener(MouseEvent.ROLL_OVER, aboutRollOver);

navAbout_mc.addEventListener(MouseEvent.ROLL_OUT, aboutRollOut);

navAbout_mc.deco_mc.alpha = 0; //comment: I wasn't sure if I needed to set the movieclip.alpha to 0 before fading it in but this is the only way it would work.

navAbout_mc.buttonMode = true;

 

function aboutRollOver(evt:MouseEvent):void

{

var navAboutTimeline:TimelineLite = new TimelineLite();

navAboutTimeline.append(TweenLite.to(navAbout_mc.deco_mc, .4, {alpha:1, ease:Sine.easeIn}));

navAboutTimeline.timeScale = 2

}

function aboutRollOut(evt:MouseEvent):void

{

var navAboutTimeline:TimelineLite = new TimelineLite();

navAboutTimeline.append(TweenLite.to(navAbout_mc.deco_mc, .4, {alpha:0, ease:Sine.easeOut}));

navAboutTimeline.timeScale = 2

}

 

 

Also, I'm just starting to write classes for my projects in order to clean them up and create some reusable code. Although not really Greensock specific, would I be able to take the above chuck of code, put it in a separate .as file and attach it to other buttons (rather than have it on the main timeline of my fla file? I'm guessing it would go something like this:

 

package

{

import com.greensock.TimelineLite;

import com.greensock.TweenLite;

import com.greensock.easing.*;

import flash.events.MouseEvent;

import flash.display.MovieClip;

 

public class navBtnAnimation extends MovieClip

{

 

public function navBtnAnimation()

{

this.addEventListener(MouseEvent.ROLL_OVER, navBtnRollOver);

this.addEventListener(MouseEvent.ROLL_OUT, navBtnRollOut);

this.deco_mc.alpha = 0;

buttonMode = true;

}

function navBtnRollOver(evt:MouseEvent):void

{

var navBtnTimeline:TimelineLite = new TimelineLite();

navBtnTimeline.append(TweenLite.to(this.deco_mc, .4, {alpha:1, ease:Sine.easeIn}));

navBtnTimeline.timeScale = 2;

}

function navBtnRollOut(evt:MouseEvent):void

{

var navBtnTimeline:TimelineLite = new TimelineLite();

navBtnTimeline.append(TweenLite.to(this.deco_mc, .4, {alpha:0, ease:Sine.easeOut}));

navBtnTimeline.timeScale = 2;

}

 

}

 

}

 

thanks for any insight!

[Carl]

Hello,

 

First, off congratulations on getting your buttons to work and your effort to implement the greensock classes. There are so many cool things to play with. There are many ways to get things done with AS3 in general and greensock.

 

As for the efficiency aspect of your code. I don't see that there is much benefit to using TimelineLite in your particular case as TweenLite on its own can handle the simple fade. TimelineLite comes into play more when you are dealing with sequencing tweens. I notice you are using the timeScale property which is cool, but if you just have one tween, changing the duration is just as easy as setting a timeScale.

 

your event handler functions code could simply be:

 

function navBtnRollOver(evt:MouseEvent):void
{
TweenLite.to(this.deco_mc, .4, {alpha:1, ease:Sine.easeIn});
}
function navBtnRollOut(evt:MouseEvent):void
{
TweenLite.to(this.deco_mc, .4, {alpha:0, ease:Sine.easeOut});
}

 

I guess having timelineLites built could help for extending the animation effects in the future, but for a fade-in it is a bit overkill.

 

Below are a few video tutorials I made that show a few different ways of efficiently having multiple MovieClip buttons share similar functionality. They are not class-based but pretty much hammer home the concepts of using target vs currentTarget properties of event objects. If anything download the sample files and take a look at them. They may serve as a good starting point for projects in the future.

 

http://www.snorkl.tv/2010/08/assign-eve ... enttarget/

http://www.snorkl.tv/2010/11/create-a-s ... y-clicked/

http://www.snorkl.tv/2010/11/part-1-bui ... flash-as3/

http://www.snorkl.tv/2010/09/tweenmax-t ... wn-by-now/

 

of greater importance:

http://www.greensock.com/tweening-tips/

read the api docs often!

spend time reading through the posts on this forum. there is so much good stuff hidden in here.

 

enjoy

 

Carl

[azuki]

Thanks for the tips Carl!

 

Shortly after posting, I was on your site going through the 'Sticky Nav' tutorial. After multiple attempts at trying to force my code into a class (I'm still trying to find the best use of custom classes), I realized that might be overkill. Is it always best practice to try and get most of your code into classes and off the timeline?

 

In any event, I finally worked it out. I really appreciate the clarification regarding the usage for TweenLite and TimelineLite. I'll be spending some time on Snorkl.tv to improve my skills so thanks for posting those tutorials!

 

Here's the code I landed on (a bit more streamlined than in my previous post - and it took long enough for me to figure it out!)

 

var currentNav:MovieClip;
function navOver(e:MouseEvent):void
{
var navItem:MovieClip = e.target as MovieClip;
if (navItem != currentNav)
{
	TweenLite.to(navItem.deco_mc, .3, {alpha:1});
}
}

function navOut(e:MouseEvent):void
{
var navItem:MovieClip = e.target as MovieClip;
if (navItem != currentNav)
{
	TweenLite.to(navItem.deco_mc, .3, {alpha:0});
}
}

function navClick(e:MouseEvent):void
{
var navItem:MovieClip = e.target as MovieClip;
if (currentNav != null)
{
	TweenLite.to(currentNav.deco_mc, 0, {alpha:0});
}
TweenLite.to(navItem.deco_mc, 0, {alpha:1});
currentNav = navItem;
switch (navItem.name)
{
	case "navAbout_mc" :
		container_mc.addChild(aboutBg);
		break;
	case "navScreenings_mc" :
		container_mc.addChild(screeningsBg);
		break;
	case "navTrailer_mc" :
		container_mc.addChild(trailerBg);
		break;
	case "navPhotos_mc" :
		container_mc.addChild(photosBg);
		break;
	default :
		break;
}
}

 

thanks again,

Demian

[Carl]

Damian,

 

Glad to help. Yeah, your final code is great and I like the switch on the navClick.

 

As for best practices and classes v timeline code. It can be a divisive issue. The way things are going I would encourage you to experiment more with breaking things into classes as that is the way things are going and you will learn good habits that will pay off as your skills increase and the scope of your projects increase.

 

I find with my audience and the style of tutorials I do it is just easier to keep everything in one file and focus on very basic concepts. Also I'm no master of the class-based approach as I am still learning and sorting it all out. There is a time and a place for everything. There is plenty of cool stuff you can do on frame 1 of a timeline but it can get messy fast. The main problem is that most people (with no programming experience) struggle just to understand how to "click the button and go to a url"... when you throw in... create a new AS file... import these 12 classes... make this a private function... this protected... extend that... I feel it is a huge barrier to people who just want to make a circle bounce and change color every 5 seconds;)

 

If you are just starting out, continue to read as much about OOP as you can... it will pay off! You should be very pleased with yourself for getting your project to work as you did. If you can get that far you have what it takes to keep learning more and it will get progressively easier.

 

Carl