Solved

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

Posted on 2011-03-07
7
562 Views
Last Modified: 2012-05-11
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
Comment
Question by:AbeDajani
  • 3
  • 2
7 Comments
 
LVL 5

Expert Comment

by:gingermoleman
ID: 35057190
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
 

Author Comment

by:AbeDajani
ID: 35057895
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
 
LVL 5

Expert Comment

by:gingermoleman
ID: 35063114
No worries, here to help.
One question for you before we start, is the number of cards being displayed known?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

Author Comment

by:AbeDajani
ID: 35070137
Yes, just like the attachment.. 5 cards
0
 
LVL 5

Accepted Solution

by:
gingermoleman earned 250 total points
ID: 35073369
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
 
LVL 16

Expert Comment

by:CWS (haripriya)
ID: 36321188
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This is a very simple example to help those of you who are still migrating from AS2 to AS3 understand the redesigned event model in AS3. In AS2.0, event functions (that is, the function to be performed when an event is fired) were stored as a pro…
Recently, I was asked to recommend a tracking system to be implemented on a clients website. As the entire site was built on flash, my first thought was to suggest custom built tracking system. However, our company at that point of time didn't h…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
This Micro Tutorial will teach to how to utilize bit rate in Adobe Flash Media Live Encoder.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now