A few questions on making animated buttons for a website Nav

Question

Hello, I have a few questions on creating some animated buttons for a nav.
There are 2 actions I want to trigger on moue over.
If I want to use a static (PNG) image that I created in Photoshop for the actual button, can I use that? I want to smoothly slide button down on mouse-over and slide back up on mouse off. If I push part of the button off the "canvas" (sorry, this is coming from a Photoshop guy) will it disappear in the final animation? Another way to put that is, if I put an animated element off the white area, will it no longer show up in the movie (.swf) when it's published?
For the second part; you can see a bit of what I want to do if you look at this website's top Nav: http://www.photoshopsupport.com/index.html
I need the "light" above the button and it's going to be on another colored <div> so I can't set one solid BG color for my flash document. But I want to achieve the effect of the "bar" lighting up above the button and the actual button sliding down upon moue over.
Any help you can provide would be greatly appreciated.

Answer 1

Hi,
Regarding this button problem mentionned by kglad, it is easily overcome with a little trick.
I call this the undesired "jumpy button". Your button starts to hesitate down-back-down-back quickly, like it's a bug, and then it settles.
What you could do is create a simple sprite or movieclip containing only a simple shape, whatever the color, put it on top of your button's graphic, change this sprite/movieclip's alpha to 0, then add your mouse events on this invisible "target" instead of your graphic. So, when you mouse over, you have the graphic move, not the invisible "target".
Sometimes, for this invisible target, you will be using a movieclip, not a sprite, so you can easily add your own properties on it.
Example:
var graphicBtn:Sprite; // your png
var targetBtn:MovieClip; // your invisible target, created with code or not
targetBtn.graphics.beginFill(0x000000);
targetBtn.graphics.drawRect(0, 0, graphicBtn.width, graphicBtn.height);
targetBtn.alpha = 0;
targetBtn.mygraphic = graphicBtn;
targetBtn.addEventListener(MouseEvent.MOUSE_OVER, onOver);
targetBtn.addEventListener(MouseEvent.MOUSE_OUT, onOut);
addChild(graphicBtn);
addChild(targetBtn);
function onOver(event:MouseEvent):void
     TweenLite.to(event.target.mygraphic, 0.25, {y:40, ease:Back.easeOut});
function onOut(event:MouseEvent):void
     TweenLite.to(event.target.mygraphic, 0.25, {y:0, ease:Cubic.easeOut});
So you see, you can have only one function (well, 1 for over, 1 for out) used for all your buttons. You can add as many properties you need on your movieclip to make that one-function flexible.
Here I used GreenSock's tweening engine, but use the one you prefer (Here, I am moving the graphicBtn in y for 0.25 second).
Design Cyboïde
Création de sites web