Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 571
  • Last Modified:

Animating a button in AS3 - on Roll over and roll out

Hello,

Please view attached and advise over the following:
Attached is an image of the navigation menu i'm trying to create. What i have done so far is creating the vector cards and placing them on the stage. i need the script that does the following scenario:
when mouse over any of the 5 cards, the card moves and stops, when roll out, animation is reversed and  card moves back to its original state.
The hit area should be the card whether the user clicks on the card during the motion tween or when it reaches the last frame where it stops.
It seems like a simple thing to do, it's been a while since i've worked on flash, let alone that i have no experience with CS3.

I'll appreciate your prompt reply and help
Screen-shot-2011-03-07-at-2.17.5.png
0
AbeDajani
Asked:
AbeDajani
  • 3
  • 2
1 Solution
 
gingermolemanCommented:
Hi there,

How have you put these on stage? Library object or created in the as3?

Basically you need 2 event listeners and a tween, so something like

Var myTween: Tween =new tween(//details of tween);
MyTween.stop();
MenuitemA.addEventListener(mouseevent:mouse_over, do_over_anim);
MenuItemA.addEventListener(mouseevent:mouse_out,do_out_anim);
Function do_over_anim(e:mouseevent):void{
MyTween.play();
}
Function do_out_anim(e:mouseevent):void{
MyTween.revese();
}

Gmm
0
 
AbeDajaniAuthor Commented:
Thanks for your reply,

Each card is a grouped vector and text (graphic only), created in Illustrator then imported to Flash. So if you can bear with me as i am not familiar with flash CS.. can you guide me step by step:
1- the cards are graphics only, shall i convert them each into buttons or movie clips?
2- what are the replaceable names in the script above?
3- what do you mean by "details of tween"?

thanks a million
0
 
gingermolemanCommented:
No worries, here to help.
One question for you before we start, is the number of cards being displayed known?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
AbeDajaniAuthor Commented:
Yes, just like the attachment.. 5 cards
0
 
gingermolemanCommented:
Ok, then to answer your questions:

1) convert each one to its own movieClip. Ensure that you give each one a distinct instance name (this is different to the name of the movieClip and refers to this EXACT instace of that movieClip).
Something like menu_Portfolio, menu_stories, etc
2)MenuItemA is interchangeable but I'll explain all the code below
3) by details of tween, I mean the direction and duration of the movement. In flash these are called tweens. Again I will explain further in the code below

A better example for you is as follows:



import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;
// these import statements are required so that the compiled SWF knows it needs these components



var finalY:Number = 100;
var startY:Number = 0;
// these define the start and end position of our animated tween. For you to have your "spread" layout, your likely to need a unique start and end for each menu item so that
//each one can have its own unique slide direction


menu_itemA.y=startY;
//sets the menu item position to not hovered


menu_itemA.addEventListener(MouseEvent.MOUSE_OVER, do_over_anim);
menu_itemA.addEventListener(MouseEvent.MOUSE_OUT,do_out_anim);
// these "Listen" for the mouse over and mouse out events and then performs the defined function. You will need this code x5 (once for each menu item. "menu_itemA" in this example would be the instance name set on the movieclip


function do_over_anim (e:MouseEvent):void{
var localObj:Object = e.target;
//This part simply identifes which menu item was moused over and herein refers to it as localObj

var myTween: Tween = new Tween(localObj,"y",Strong.easeOut, localObj.y, finalY, 1, true);
//the Tween. This actually instructs the movement. it breaks down as: The Object name(localObj), the property being tweened (in this case the y position), the easing type, start position (ie y=0), end position, duration of time it should take to complete. in this example we have the start position as localObj.y. This is so it starts from its current position, even if its mid tween as opposed to "skip" to a position then tween. The tween plays automatically.




}
function do_out_anim (e:MouseEvent):void{
      var localObj:Object = e.target;
var myTween: Tween = new Tween(localObj,"y",Strong.easeOut, localObj.y, startY, 1, true);

//same as the over function, but the end position of the tween is set to startY

}


Now, Im presuming that as you have this nice fan layout, that you want them to extend upwards? this will result in needing more than one tween as you'll be moving at an angle (so will need and X and Y tween to fire at the same time). Knowing that your new to flash im loathe to reccomend this just yet, but the default tween engine isnt cosidered that good, and most people will now use a tween engine like tweenMax or tweenLite. both of these would make this slightly off axis animation very simple. Let me know if you want to go down this route.

GMM
0
 
CWS (haripriya)Commented:
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now