[[Solved] Click or Touch through Blitmask to movieclip]

Glad to see it is working. I updated the above code block.

Focus on blitMask.disableBitmapMode() and blitMask.enableBitmapMode() lines. It gives performance when mc is moving.

[[Solved] Click or Touch through Blitmask to movieclip]

Below code seems sufficient.

if you just click and release, it fires button/movieclip listeners for the interactive items.

if you click and move the mouse, it detects throw action and does not fire button/mc listeners.

 

if you click while items animating, it does not fire button/mc listeners. Just stops the throw action.

 

//mc is the big moving movieclip

//mc_1 is the clickable movieclip inside the mc.

 

//note that i add onComplete:throwComplete for the ThrowPropsPlugin

 

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.*;
import net.hires.debug.Stats;

TweenPlugin.activate([ThrowPropsPlugin]);

this.addChild(new Stats());

var bounds:Rectangle = new Rectangle(0, 200, 1280, 600);


var blitMask:BlitMask = new BlitMask(mc, bounds.x, bounds.y, bounds.width, bounds.height, false);
blitMask.bitmapMode=false;

var t1:uint, t2:uint, y1:Number, y2:Number, x1:Number, x2:Number, xOverlap:Number, xOffset:Number, yOverlap:Number, yOffset:Number;
var isMoving:Boolean=false;
var isCatched:Boolean=false;
blitMask.stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

function mouseDownHandler(event:MouseEvent):void {
TweenLite.killTweensOf(mc);
blitMask.disableBitmapMode();
if(isMoving==true)
{
isCatched=true;
isMoving=false;
}

x1 = x2 = mc.x;
xOffset = this.mouseX - mc.x;
xOverlap = Math.max(0, mc.width - bounds.width);
y1 = y2 = mc.y;
yOffset = this.mouseY - mc.y;
yOverlap = Math.max(0, mc.height - bounds.height);
t1 = t2 = getTimer();
mc.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
mc.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);



}

function mouseMoveHandler(event:MouseEvent):void {
isMoving=true;
if(blitMask.bitmapMode==false)
{
blitMask.enableBitmapMode();
}
/*
var y:Number = this.mouseY - yOffset;
//if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
if (y > bounds.top) {
mc.y = (y + bounds.top) * 0.5;
} else if (y < bounds.top - yOverlap) {
mc.y = (y + bounds.top - yOverlap) * 0.5;
} else {
mc.y = y;
}
*/
var x:Number = this.mouseX - xOffset;
if (x > bounds.left) {
mc.x = (x + bounds.left) * 0.5;
} else if (x < bounds.left - xOverlap) {
mc.x = (x + bounds.left - xOverlap) * 0.5;
} else {
mc.x = x;
}
blitMask.update();
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) {
x2 = x1;
x1 = mc.x;
//y2 = y1;
t2 = t1;
//y1 = mc.y;
t1 = t;
}
event.updateAfterEvent();
}

function mouseUpHandler(event:MouseEvent):void
{
mc.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
mc.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
var time:Number = (getTimer() - t2) / 1000;
var xVelocity:Number = (mc.x - x2) / time;
//var yVelocity:Number = (mc.y - y2) / time;

ThrowPropsPlugin.to(mc, {throwProps:{ x:{velocity:xVelocity, max:bounds.left, min:bounds.left - xOverlap, resistance:50}}, onUpdate:blitMask.update, onComplete:throwComplete, ease:Strong.easeOut}, 5, 0.3, 1); 

}

function throwComplete ()
{
isMoving=false;
isCatched=false;
blitMask.disableBitmapMode();
}




mc.mc_1.addEventListener(MouseEvent.CLICK,onC);
function onC (e:MouseEvent)
{
if(isMoving==false && isCatched==false)
{
isc.text="Item Clicked..";
} else
{
isc.text="";
}
}

[[Solved] Click or Touch through Blitmask to movieclip]

This becomes a common problem. Can you provide a well-working solution Jack?

 

This becomes really an issue on touch based devices.

 

Thanks.