i will make my hammer(movie clip) following cursor and every time I click the mouse / mouse down, the hammer will come down exposed cursor and return to original position. But i just can make the hammer(movie clip) following cursor. How can I do?
hammer.startDrag(true);
First you should create an animation that you want hammer performs when clicking. Then execute that animation whenever user mouse downs.
Let's say hammer has an animation and starts at frame #2 then;
private function MainFunction():void
{
hammerMC.addEventListener(MouseEvent.MOUSE_DOWN, CursorDown);
hammerMC.addEventListener(MouseEvent.MOUSE_UP, CursorUp);
//and other required events...
}
private function CursorDown(ref:MouseEvent):void
{
hammerMC.gotoAndPlay(2);//hammerMC.nextFrame();
//...
}
private function CursorUp(ref:MouseEvent):void
{
//we do this because we want cursor comes back to default status after we release the mouse button
//otherwise it sticks to mouse down animation
hammerMC.gotoAndStop(1);
//...
}
I guess this will do the job enough.
Related
i will make my hammer(movie clip) following cursor and every time I click the mouse / mouse down, the hammer will come down exposed cursor and return to original position. But i just can make the hammer(movie clip) following cursor. How can I do?
hammer.startDrag(true);
enter image description here
After I received your file here is the new code :
Mouse.hide(); //Hide the mouse cursor
//The stage listen the mouse movement
stage.addEventListener(MouseEvent.MOUSE_MOVE, functionA);
function functionA(evt:MouseEvent){
//On mouse movement, the hammer position will change
hammer.x = mouseX; //If you want you can add an offset (ex : stage.mouseX - 5; )
hammer.y = mouseY;
//That's exactly the same as hammer.startDrag(true); but with something more cool, it's you can add an offset for X/Y axes.
}
//The stage is listening on mouse button down
stage.addEventListener(MouseEvent.MOUSE_DOWN, functionName2);
function functionName2(evt:MouseEvent){
//On mouse button down, we enter the movieclip "hammer" and on the timeline we go to and play (gotoAndPlay :D) the label "HammerDown"
//Now if you double click on the hammer on the stage, you will enter the movieclip and you will find a layer call "Labels"
//I called it like that, the name is not important. In Flash you can add a name to a key frame or a group of keys. Maybe you don't see
//any advantage for now but trust me, that's much more upgradable like that. So in my first answer on Stackoverflow I wrote to you
//to type : gotoAndPlay( 1 ), the number was the key's number, but this time I've change it to "HammerDown" wich is the name of my label
//on the layer labels inside hammer's movieclip.
//So at the end what happen is : When the stage receive a mouse down event, the script enter "hammer" movieclip and gotoAndPlay the animation
//start from the first key of "HammerDown" label. That's what the line below means.
hammer.gotoAndPlay( "HammerDown" ); //2 is the number of the key wich contains the hammer with down position
//To give a label's name to a key or a group of key, just click on a keyframe, go to Propriety -> Label -> Name and that's it!
}
//On mouse button up
stage.addEventListener(MouseEvent.MOUSE_UP, functionName3);
function functionName3(evt:MouseEvent){
//On mouse up the script enter hammer's movieclip and gotoAndPlay the animation inside "hammer" movieclip, wich start from "HammerUp".
//The trick is that the animation will be stop because at the same time, the script read the stop(); and so the animation is stop inside "Hammer".
hammer.gotoAndPlay("HammerUp"); //1 is the number of the key wich contains the hammer with up position
}
And here is your file with my editing :
File
What you can do is to use a movieclip with the hammer. Inside this movieclip you have your timeline, on the first keyn of the timeline you stick the hammer with the "up" position and on this same key you type the following code
stop();
And then on the next key you create a new frame with the hammer down, you also add :
stop();
That will stop the frame reader on the first key and what we are going to do is to instance the movieclip on the stage and make it follow the mouse.
//Instance the hammer
var hammer:Hammer = new Hammer(); //Hammer is the name of you class on the movieclip in your flash library
stage.addChild(hammer); //instance on the stage
//Add an event listener on the stage wich is trigger when the mouse move
stage.addEventListener(MouseEvent.MOUSE_MOVE, functionName);
function functionName2(evt:MouseEvent){
hammer.x = stage.mouseX; //If you want you can add an offset (ex : stage.mouseX - 5; )
hammer.y = stage.mouseY;
}
Now the hammer should be moving and following the mouse :
//On mouse button down
hammer.addEventListener(MouseEvent.MOUSE_DOWN, functionName2);
function functionName2(evt:MouseEvent){
evt.target.goToAndStop(2); //2 is the number of the key wich contains the hammer with down position
}
//On mouse button up
hammer.addEventListener(MouseEvent.MOUSE_UP, functionName3);
function functionName3(evt:MouseEvent){
evt.target.goToAndStop(1); //1 is the number of the key wich contains the hammer with up position
}
The advantage of this technic is that if you feel friendly with Flash animation, you can create a small animation between keys with "goToAndPlay(x)", that's not only "up/down", you can add some fun.
Good luck!
I've got a screen which involves a movie-clip where the object has a outline to symbolize that it can be clicked. Upon clicking the object, I'm requesting it to do numerous functions, disable itself and then go to another frame which removes the outline symbolizing it cannot be clicked anymore. But once you disable an object it goes to the original frame.
The object itself consists of these 3 frames.
Frame 1: Original State (Glow)
Frame 2: Hover over giving stats
Frame 3: No glow
To summerise i'd like to click the object and for it to go to the no glow frame and disable the movieclip.
The movieclip enabled = 1 is for when the user returns to the this frame, so the scene is aware of the button press.
Movieclip.addEventListener(MouseEvent.CLICK, Fun_Movieclip);
Movieclip.addEventListener(MouseEvent.MOUSE_OVER, Fun_MovieclipMouseOver);
Movieclip.addEventListener(MouseEvent.MOUSE_OUT, Fun_MovieclipMouseOut);
function Movieclip(event:MouseEvent):void
{
MovieclipEnabled = 1;
Movieclip.gotoAndStop(1);
Movieclip.mouseEnabled = false;
}
function Fun_MovieclipMouseOver(event:MouseEvent):void
{
Movieclip.gotoAndStop(2);
}
function Fun_MovieclipMouseOut(event:MouseEvent):void
{
Movieclip.gotoAndStop(3);
}
For some reason when ever the movieclip is disabled, it always reverts back to the glow state. Does anyone have a solution for this? Cheers
Edit: Inside the movieclip, the first frame has Stop();. Don't know if this would interfere with it.
mc.addEventListener(MouseEvent.CLICK, clickHandler);
mc.addEventListener(MouseEvent.MOUSE_OVER, mouseoverHandler);
mc.addEventListener(MouseEvent.MOUSE_OUT, mouseoutHandler);
function clickHandler(event:MouseEvent):void
{
mc.gotoAndStop(3);
mc.removeEventListener(MouseEvent.CLICK, clickHandler);
mc.removeEventListener(MouseEvent.MOUSE_OVER, mouseoverHandler);
mc.removeEventListener(MouseEvent.MOUSE_OUT, mouseoutHandler);
}
function mouseoverHandler(event:MouseEvent):void
{
mc.gotoAndStop(2);
}
function mouseoutHandler(event:MouseEvent):void
{
mc.gotoAndStop(1);
}
Not entirely sure what you meant by:
The movieclip enabled = 1 is for when the user returns to the this frame, so the scene is aware of the button press.
My suggestion for getting the scene to recognize the button click is to have the scene also listen to the mouse click handler
I have a MovieClip instance (movie) brought by code to the stage. I want to add some effects when mouse over or mouse down for this movie. So, first i added event listeners to this MovieClip:
movie.addEventListener(MouseEvent.MOUSE_DOWN, movieDownHandler);
movie.addEventListener(MouseEvent.MOUSE_UP, movieUpHandler);
movie.addEventListener(MouseEvent.MOUSE_OVER, movieOverHandler);
movie.addEventListener(MouseEvent.MOUSE_OUT, movieOutHandler);
Then i added event handlers:
private function movieDownHandler(e:MouseEvent):void {
trace("down");
}
private function movieUpHandler(e:MouseEvent):void {
trace("up");
}
private function movieOverHandler(e:MouseEvent):void {
trace("over");
}
private function movieOutHandler(e:MouseEvent):void {
trace("out");
}
And when i test it, everything goes ok: mouse over this movie, traces over, mouse down traces down, mouse up traces up and so on... But, when i add size change to the movie, for example, to mouse down handler like this:
private function movieDownHandler(e:MouseEvent):void {
trace("down");
movie.scaleX = 0.9;
movie.scaleY = 0.9;
}
and some filter effect to over handler, for example blurFilter:
private function movieOverHandler(e:MouseEvent):void {
trace("over");
e.currentTarget.filters = [new BlurFilter(1,1,1)];
}
then i receive unexpected behavior for event handlers: mouse over traces over (it is ok) and then i press (mouse down without releasing mouse button) at movie, then three events happen one after one: 'down', 'out', 'over' (mouse cursor don't leave MovieClip shape). What is the problem? Furthermore, setting scaleX and scaleY to 1.1 doesn't break handlers behavior
When you click a button,it go through three stage,first 'over',then 'down',then 'up',so it trace like that.
scareX has a range:0~1,the sacre is 0% ~ 100%
I have a project where I have a scrolling list. I would like for my user to be able to "long touch" an item on the list so that they can delete it.
I am developing in Air for iOS using Flash CS6 so I don't really know much about the appropriate MultiTouch gestures for iOS deployment.
In my mind, the animation steps I would like to go like so..
Previously invisible button called btn_delete inside the Item movieclip will appear when Long Touch starts + timer begins
Intermediate step: btn_delete will rotate 90 degrees using TweenMax Rotate (I have this covered)
Final step: when timer reaches it's conclusion, a dialog box / confirmation box will pop up and ask the user if they are sure if they want to delete the item.
So here is some generic code I've written quickly to give you an idea of my structure so far (I've omitted the interlinking listener functions):
function exampleFunction {
_item.addEventListener(TouchEvent.TOUCH_BEGIN, onTouchBegin);
}
//-- Long Press Listener Functions--//
function onTouchBegin(eBegin:TouchEvent) {
trace("start");
}
function onTouchRotate(eEnd:TouchEvent) {
trace("rotation of image");
}
function onTouchEnd(eEnd:TouchEvent) {
trace("end");
}
If anyone has a piece of code they've already written that roughly matches my criteria then please post it!
I would just use MouseEvent for this.
var timer:Timer = new Timer( 500 ); //ms
timer.addEventListener( TimerEvent.TIMER_COMPLETE, timerCompleteHandler );
listItem.addEventListener( MouseEvent.MOUSE_DOWN, mouseDownHandler );
function mouseDownHandler( e:MouseEvent ):void {
timer.start();
stage.addEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
}
function mouseUpHandler( e:MouseEvent ):void {
//just some clean up to reset the timer and remove the mouse up event listener from the stage
timer.reset();
stage.removeEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
}
function timerCompleteHandler( e:TimerEvent ):void {
timer.reset();
stage.removeEventListener( MouseEvent.MOUSE_UP, mouseUpHandler );
//do delete actions here
}
So on mouse down, you start your timer and listen for a mouse up event (on the stage and not the component. That is important. If you want to know why, try it on the component and experiment). On mouse up, you reset the timer so the next time you mouse down, it starts at 0 (reset() has the added benefit of stopping the timer). On timer complete, you do the same as in mouse up in addition to your delete code.
I'm using a MouseEvent here just because it behaves identical to TouchEvent (for the most part) in this instance and it could be used on the desktop (meaning you can test in the emulator and you could add this to other projects if you wanted)
UPDATE:
Just reread your question and realized I missed the rotate. For this, just add another timer with a separate complete handler that and in that function, ONLY do the rotation and reset that timer.
I'm trying to do a bottom menu like in www.zara.com.
My code have a transparent movieclip that shows the menu when mouse rolls over it, and hide when mouse rolls out.
The menu appears over that transparent movieclip, so I can use the roll over and out actions to maipulate the menu with the transparent MC.
The problem here is when mouse Roll Over my menu MC and it behaves as rolling out the transparent movieclip.
How can I make mouse rolls over a movieclip over another movieclip without roll out the first one?
Is it to confuse?
Thanx!
When a MovieClip B appears on top of another MovieClip A, MovieClip A will fire the MouseEvent.ROLL_OUT event. This is because MovieClip B is preventing MovieClip A from receiving any MouseEvents (since it is on top).
If you do not need to receive any MouseEvents from MovieClip B, you can set its mouseEnabled property to false, then MovieClip A underneath it will receive MouseEvents.
Also, depending on whether it makes sense in your particular case or not, you can make MovieClip B a child of MovieClip A, so that when MovieClip B obscures MovieClip A, the ROLL_OUT event will not be fired.
I hope this helps answer your question.
Here is a quick and dirty trick originaly from javascript technique
1.) build extra logic into the clipA rollout which waits a small period of time and then checks if the mouse is on the menu or not before closing it.
// define a boolean value for the moust beeing on the menu
public var menuOver:Boolean = false;
public function onMenuOver( event:MouseEvent ):void
{
menuOver = true;
// other menu code here
}
public function onMenuOut( event:MouseEvent ):void
{
menuOver = false;
// other menu code here
}
public function onMainClipOver( event:MouseEvent ):void
{
// show menu code here
}
public function onMainClipOut( event:MouseEvent ):void
{
setTimeout(execMainClipOut,100);
}
/**
* close the menu only if the mouse is not over the menu
*/
public function execMainClipOut()
{
if(!menuOver){
// close the menu
}
}
Ooh! I just remembered something interesting that might solve your problem.
When a MouseEvent.ROLL_OUT event is fired, the listener function is called with a MouseEvent object that has the relatedObject property. This is a reference to the object that is gaining mouse focus (getting rolled over) -- in your case, you could ignore the event if this property is set to your other MovieClip object, then fire the event manually when your other MovieClip object rolls out (so that it rolls out both of them).
as mentioned above, relatedObject works PERFECTLY
so for example if you have MovieClip A and then have Movieclip B on top.
You want Movieclip B to show on rolling over MovieClip A and hiding when rolling out of Movieclip A,
what generally happens is that Movieclip B will show but then when you hover over B, Moveclip B will dissappear, as B lies on top of A, rollout event takes place
so on Movieclip A rollout even just use
if((event.relatedObject == MoveClipB)
{
//if its rolling over B, which is a related object, dont do anything
}
else
{
//Hide B
}
Events for B still work when this is used