Solved

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

Posted on 2011-03-07
7
560 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
Comment Utility
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
Comment Utility
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
Comment Utility
No worries, here to help.
One question for you before we start, is the number of cards being displayed known?
0
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 

Author Comment

by:AbeDajani
Comment Utility
Yes, just like the attachment.. 5 cards
0
 
LVL 5

Accepted Solution

by:
gingermoleman earned 250 total points
Comment Utility
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)
Comment Utility
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

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
The last time I worked with Flash and Socket connections was in AS1. A recent project required flash connecting to a Socket, and sending receiving information - we figured it would be easy enough - we all know about the socket policy documents and c…
In this tutorial viewers will learn how to create a basic shape tween animation in Flash including shape hints for smooth animation Open a new document in Flash: Draw a shape: Select another frame (how long you want the tween to be): Right click and…
The goal of the tutorial is to teach the user how to live broadcast using Flash Media Live Encoder and connecting it to YouTube to broadcast. Log into your Youtube account, choose live stream settings, start live stream from Flash Media Live Enc…

743 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

8 Experts available now in Live!

Get 1:1 Help Now