Throwprops and BlitMask hitArea Problem

[Kirtan Patel 0 Likes (Newbie)]

I have implemented throwprops functionality.also I am using blit mask but when I Implement scrolling using blit mask I want that user scroll using Blank area covered by blitmask i want that it should scroll.

 

I tried to set hitArea of Blit mask but then It stopped working.

 

TweenPlugin.activate([ThrowPropsPlugin]);
public class ScrollingTest extends Sprite
{
 var layoutManager:HLayout;
 var itemVector:Vector.<ComplexItem> ;
 var rc:int;
 var mainContainer:Sprite;
 var itemList:Sprite;
 var _scrollMask:Sprite;
 var bm:BlitMask;
 var backgroundLoader:Loader;

 public function ScrollingTest()
 {
  MonsterDebugger.initialize(this);
  init();
 }
 var bounds:Rectangle;
 public function init():void
 {
  bounds = new Rectangle(0,0,1280,720);
  rc = 0;
  itemList = new Sprite();
  itemList.y = 100;
  itemVector = new Vector.<ComplexItem>();
  layoutManager = new HLayout();
  layoutManager.hAlign = Align.LEFT;
  layoutManager.vAlign = Align.TOP;
  layoutManager.hGap = 100;
  layoutManager.vGap = 100;
  layoutManager.maxItemsPerRow = 50;
  for (var i:int=0; i<100; i++)
  {
   var complex:ComplexItem = new ComplexItem();
   complex.addEventListener(MouseEvent.CLICK,onItemClick);
   complex.addEventListener(Event.COMPLETE,resourceLoaded);
   complex.startLoad();
   itemVector.push(complex);
   rc++;
  }
  backgroundLoader = new Loader();
  backgroundLoader.contentLoaderInfo.addEventListener(Event.COMPLETE,onImageLoaded);
  backgroundLoader.load(new URLRequest("bigback.png"));

 }
 private function onImageLoaded(event:Event):void
 {
  var bmp:Bitmap = new Bitmap(event.target.content.bitmapData);
  addChildAt(bmp,0);
 }
 private function resourceLoaded(event:Event):void
 {
  rc--;
  if (rc == 0)
  {
   for (var i:int=0; i<itemVector.length; i++)
   {
 layoutManager.add(itemVector[i]);
   }
   layoutManager.layout(itemList);
   itemList.name = "ItemListContainer";
   addChild(itemList);

   _scrollMask=new Sprite();
   _scrollMask.name = "scrollMask";
   _scrollMask.x = 100;
   _scrollMask.y = 0;
   _scrollMask.graphics.beginFill(0xFFFFFF,0.5);
   _scrollMask.graphics.drawRect(0,0,1000,600);
   _scrollMask.graphics.endFill();
   _scrollMask.visible = false;

   bm = new BlitMask(itemList,100,0,1000,650,false,true);
   bm.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
   itemList.hitArea = _scrollMask;
   itemList.addEventListener(MouseEvent.MOUSE_DOWN,mouseDownHandler);
   dispatchEvent(new Event(Event.COMPLETE));
  }
 }
 var t1:uint,t2:uint,x1:Number,x2:Number,xOverlap:Number,xOffset:Number;
 var beforeDragPos:Number;
 function mouseDownHandler(event:MouseEvent):void
 {
  if(isMoving==true)
  {
   isCatched=true;
   isMoving=false;
  }
  beforeDragPos = event.stageY;
  TweenLite.killTweensOf(itemList);
  x1 = x2 = itemList.x;
  xOffset = this.mouseX - itemList.x;
  xOverlap = Math.max(0,itemList.width - bounds.width);
  t1 = t2 = getTimer();
  itemList.stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  itemList.stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
 }
 var isMoving:Boolean=false;
 var isCatched:Boolean=false;
 function mouseMoveHandler(event:MouseEvent):void
 {
  var moveX:Number = event.stageX - beforeDragPos;
  trace(moveX);
  if(moveX<0)
  {
   moveX=moveX * 1;
  }
  if(moveX < 20)
  {
   isMoving = false;
   return;
  }
  else
  {
   isMoving=  true;
  }
  var x:Number = this.mouseX - xOffset;
  //if mc's position exceeds the bounds, make it drag only half as far with each mouse movement (like iPhone/iPad behavior)
  if (x > bounds.top)
  {
   itemList.x = (x + bounds.top) * 0.5;
  }
  else if (y < bounds.top - xOverlap)
  {
   itemList.x = (x + bounds.top - xOverlap) * 0.5;
  }
  else
  {
   itemList.x = x;
  }
  bm.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;
   t2 = t1;
   x1 = itemList.x;
   t1 = t;
  }
  event.updateAfterEvent();
 }
 function mouseUpHandler(event:MouseEvent):void
 {
  itemList.stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
  itemList.stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
  var time:Number = (getTimer() - t2) / 1000;
  var xVelocity:Number = (itemList.x - x2) / time;
  ThrowPropsPlugin.to(itemList, {throwProps:{
   x:{velocity:xVelocity, max:bounds.top, min:bounds.top - xOverlap, resistance:300}
   }, onUpdate:bm.update,onComplete:tweenComplete ,ease:Strong.easeOut
  }, 10, 0.3, 1);
 }
 private function tweenComplete():void
 {
   isMoving=false;
  isCatched=false;
  bm.bitmapMode = false;
 }

 public function onItemClick(e:Event):void
 {
  if(isMoving==false && isCatched==false)
  {
   e.currentTarget.visible = false;
  }
 }

[GreenSock 16,598 Likes (Superhero)]

I haven't analyzed all your code, but I noticed you said it stopped working when you set the hitArea, so I figured I'd ask if you read the note in Adobe's docs about mouseEnabled behavior:

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/Sprite.html#hitArea

 

Note: You must set to false the mouseEnabled property of the sprite designated as the hit area. Otherwise, your sprite button might not work because the sprite designated as the hit area receives the user input events instead of your sprite button.

 

If that doesn't help you, feel free to post a very simple example FLA that we can publish on our end to see the behavior. Being able to publish on our end is VERY helpful in terms of troubleshooting.

 

Was everything working before you added the hitArea?