Jump to content


ThrowProps - Button clicked when trying to throw

Recommended Posts

I am sure this might be a common issue but I have buttons in my mc that is being moved by throws prop with the iPhone effect. I am using eventListerners. How do I fix this issue?


It is creating buttons dynamically in this function and adding dynamic event listners to each button and then finally putting them all in on MC and making it "flickable" with throwProps.



Here is my code/// DECLARES flagMC
var flagMC:MovieClip = new MovieClip();
var bounds:Rectangle = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
var blitMask:BlitMask;

function displayFlags(evt:Event = null)
    trace("DISPLAY FLAGS---------------");
    if(!Lang) { trace("No Lang!"); return; }
    var p:uint = 0;
    for (var i:uint = 0; i < Lang.length; i++)
       flag = new Loader();
       flag.load(new URLRequest(File.applicationStorageDirectory.url + "Languages/" + Lang + "/roundFlag.png"));
       flag.name = Lang;
       flagButton = new roundFlag();
       flagButton.btext.text = Lang;
       flag.addEventListener(MouseEvent.CLICK, loadLang(Lang,flagMC));
       var fh = flagButton.getBounds(flagButton);
       if (i % 2){ flagButton.x = flagButton.width + flagButton.width/20; flagButton.y = fh.y * i;}
       else {flagButton.x = 0;  trace("I is " +i); flagButton.y = fh.y * i; }
     // flagButton.y = fh.y * i;
       trace("Flag Button Height " + flag.height);



flagMC.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);


//B1.addEventListener(MouseEvent.CLICK, getLang);
//B2.addEventListener(MouseEvent.CLICK, displayFlags);

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;
import flash.geom.Rectangle;
import flash.utils.getTimer;
import flash.events.MouseEvent;
import flash.text.*;
import flash.display.*;

var t1:uint, t2:uint, y1:Number, y2:Number, yOverlap:Number, yOffset:Number;

function mouseDownHandler(event:MouseEvent):void {
    trace("Mouse Down");
    y1 = y2 = flagMC.y;
    yOffset = this.mouseY - flagMC.y;
    yOverlap = Math.max(0, flagMC.height - bounds.height);
    t1 = t2 = getTimer();
    flagMC.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
    flagMC.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

function mouseMoveHandler(event:MouseEvent):void {
    var y:Number = this.mouseY - yOffset;
    //if flagMC's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
    if (y > bounds.top) {
        flagMC.y = (y + bounds.top) * 0.5;
    } else if (y < bounds.top - yOverlap) {
        flagMC.y = (y + bounds.top - yOverlap) * 0.5;
    } else {
        flagMC.y = y;
    var t:uint = getTimer();
    //if the frame rate is too high, we won't be able to track the velocity as well, so only update the values 20 times per second
    if (t - t2 > 50) {
        y2 = y1;
        t2 = t1;
        y1 = flagMC.y;
        t1 = t;

function mouseUpHandler(event:MouseEvent):void {
    trace("Mouse Up");
    flagMC.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
    flagMC.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
    var time:Number = (getTimer() - t2) / 1000;
    var yVelocity:Number = (flagMC.y - y2) / time;
    ThrowPropsPlugin.to(flagMC, {throwProps:
    y:{velocity:yVelocity, max:bounds.top,
    min:bounds.top - yOverlap, resistance:300}},
    ease:Strong.easeOut }, 10, 0.3, 1);

that causes the issue:





Link to comment
Share on other sites

If I'm understanding your issue correctly, this is not related to throwProps. You are using a BlitMask and still want to be able to click the buttons inside it, yes?


When BlitMask is activated it replaces your target DisplayObject with itself so that you can get the performance benefits of scrolling a static Bitmap. If you need children of the target to receive events, you need to set BlitMask's bitmapMode to false. This hides the BlitMask and restores your target so it can receive events and be as dynamic as you like. You then just toggle bitmapMode to true again to see the performance benefits when scrolling.


You can toggle bitmapMode in your mouse events based on the context of what you are doing i.e.


MouseUp: bitmapMode = false - this allows mouse events on your target to work

MouseMove: if mousedown and the mouse moves more than a couple of pixels you might interpret this as an intention to scroll - bitmapMode = true

Link to comment
Share on other sites

Hi, Jamie. Thanks for jumping in.


I think he might be referring to distinguishing between a valid click of a button and the MOUSE_UP that happens that should trigger his throwProps tween. 


Perhaps he doesn't want his throw to trigger a button click, or he doesn't want a button click to trigger a throw if there was slight movement between MOUSE_DOWN and MOUSE_UP. Hard to know.




This thread here is worth reading.


Definitely pay attention to MrEmpty's input. Don't know how easy it is going to be to implement his solution with what you have, but it has helped others.


Again, not entirely sure if you need this type of solution, or something more along the lines of what Jamie suggested.

  • Like 1
Link to comment
Share on other sites

Yea sorry about my weird response, I kind of misread the question...

Link to comment
Share on other sites

Hi guys,


Thanks for the great tips. Let me try to explain what exactly I need. First I will say I did something that "kind of" helped by making the button press on the bittMask a touch event, a "tap" or a "press" mobile event. That helped a little but its still a little sketchy and I want to ensure it's the best for the users.



In short my "Flag Buttons" load two by two all the way down off the screen. Each flag when "pressed" is supposed to do an action. But I want the whole bittMask to be "flickable" like the iPhone screens that have more content below... like a scroll to see the new content. I am hoping you know what I mean. Anyway, the "flick" always works but sometimes when you start the flick from a button it "flicks" but when I let go it calls the function from the button and loads that screen.


I hope this makes sense. Please let me know what works best with this. I have a testFlightApp account so I can send you a demo if you need. Please email me at ed.vizenor@gmail.com and I can add your iPhone to my testing account to show you.


Thanks for all your support and this great product.


P.S. I think that that one of you suggested is the issue but I look at the book to read on that page and it has so many HUGE code bits and even new people posting their code for help that its hard to find out what the answer is.

Perhaps JACK or you guys could do a tutorial on this subject because my guess is 90 percent of users who use throwprops on devices will want to achieve this effect on smart phones.

Or maybe you could upload another thowprop example with code on it

Link to comment
Share on other sites

SOLVED:  - I think 8-)

So here is what I did. I made a new boolean:


var flagsClickNow:Boolean = true;


Then instead of using a MouseEvent.CLICK  - I used a MouseEvent.MOUSE_DOWN


Then I did an event listener using a MOUSE_MOVE event. If it is moving I made the boolean false so when the finger came off the button it would not triger the button. When on a mouse_up event I set the boolean back to true.  So now when they click on a button while it's not moving it will go to the MC I intended.


Does this make sense? Do you see any potential pitfalls?


I still think you guys should do a tutorial based off of this logic :)


Thanks Amigos! :mrgreen:

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.