AS3 Scrolling Movieclip - actionscript-3

Question

I have a problem with my code whereby I have a spawned vertical movieclip where there are button instances in it which makes it look like a list.
The problem is that I am trying to recreate a iOS-style drag scrolling. When I hold and drag my movieclip, it works fine, scrolling up and down. But when I release my left mouse button, It registers a click on one of my buttons.
I tried to remove the event listeners on the buttons but the scrolling only works once, after I released my left mouse button, the whole scrolling does not work the second time.
Is it possible to have maybe like a mouse drag (up or down) ignoring the button click listeners however when the user want to click the button instead, the scrolling won't kick in?
My buttons' class
public function PlaceOneButtons()
{
for (var a=0; a<buttons.length; a++)
{
stationsone1[a].addEventListener(clicked,StationSelectOne);
stationsone2[a].addEventListener(clicked,StationSelectOne);
stationsone3[a].addEventListener(clicked,StationSelectOne);
stationsone4[a].addEventListener(clicked,StationSelectOne);
stationsone5[a].addEventListener(clicked,StationSelectOne);
}
}
My Main (spawner) class
package
{
import flash.display.MovieClip;
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.ui.*;
import flash.utils.*;
import flash.media.*;
import IconSpawn;
import Scrolling;
public class MainClass extends MovieClip
{
private var iconspawn:IconSpawn = new IconSpawn();
private var touchay:int = new int;
private var touchPoint:int = new int;
private var touchPoint2:int = new int;
private var touchString:int = new int;
private var AYint:int = new int;
private var touchTimer:Timer = new Timer(150,1);
private var endTime:Timer = new Timer(1,1);
private var speed:int = new int;
public static var scrollDiff:int = new int;
public static var doubleDiff:int = new int;
public static var dragging:Boolean = new Boolean
//private var scrolling:Scrolling = new Scrolling();
//public static var Ystore:Point;
public function MainClass()
{
// constructor code
AYint = IconSpawn.A_Y.y;
}
public function startApp()
{
addChild(iconspawn);
iconspawn.MenuSpawn();
dragging = false;
}
public function directionsApp()
{
addChild(iconspawn);
iconspawn.KeyboardOne();
}
public function placeOneApp()
{
addChild(iconspawn);
iconspawn.PlaceOneSpawn();
Evtlistener();
}
private function Evtlistener()
{
addEventListener(Event.ENTER_FRAME,update);
addEventListener(MouseEvent.MOUSE_DOWN,spawnTouch);
addEventListener(MouseEvent.MOUSE_UP,endScroll);
}
public function directionsApp2()
{
addChild(iconspawn);
iconspawn.KeyboardTwo();
}
public function update(evt:Event)
{
//trace(touchTimer);
//trace(touchString);
touchPoint2 = mouseY;
scrollDiff = touchPoint2 - touchPoint;
doubleDiff = scrollDiff - scrollDiff;
trace(dragging);
if(dragging == true)
{
//iconspawn.PlaceOneButtons();
}
}
public function spawnTouch(evt:MouseEvent)
{
touchPoint = mouseY;
touchTimer.addEventListener(TimerEvent.TIMER,timerTouch);
endTime.addEventListener(TimerEvent.TIMER,endTimer);
touchTimer.start();
dragging = true;
touchay = IconSpawn.A_Y.y;
}
public function timerTouch(evt:TimerEvent):void
{
if(dragging == true)
{
addEventListener(Event.ENTER_FRAME,startScroll);
}
}
public function startScroll(evt:Event)
{
if(mouseY > 540 && mouseY < 1510)
{
IconSpawn.A_Y.y = touchay + (touchPoint2 - touchPoint);
}
}
public function endScroll(evt:MouseEvent)
{
removeEventListener(MouseEvent.MOUSE_DOWN,spawnTouch);
removeEventListener(Event.ENTER_FRAME,startScroll);
touchTimer.reset();
endTime.start();
}
private function endTimer(evt:TimerEvent):void
{
dragging = false;
Evtlistener();
}
}
}
Help will be appreciated! Have been stuck at this problem for days now.
UPDATE: Added new updated code
Hi guys, now my problem is that after I scroll my movieclip, the code will listen out for scrollDiff if its = 0.
When scrollDiff is 0, the buttons of the movieclip is clickable but if its more or less than that, the buttons are not clickable. Now my new problem is that after I release my left click, the code does not update the scrollDiff to 0, so user have to double click to select the button. Help!
package
{
import flash.display.MovieClip;
import flash.display.*;
import flash.text.*;
import flash.events.*;
import flash.ui.*;
import flash.utils.*;
import flash.media.*;
import IconSpawn;
import Scrolling;
public class MainClass extends MovieClip
{
private var iconspawn:IconSpawn = new IconSpawn();
private var touchPoint:int = new int;
private var touchPoint2:int = new int;
private var AYint:int = new int;
private var touchTimer:Timer = new Timer(150,1);
private var endTimer:Timer = new Timer(150,1);
private var IconSpwnY:int = new int;
private var touchbool:Boolean = new Boolean
public static var scrollDiff:int = new int;
//private var scrolling:Scrolling = new Scrolling();
//public static var Ystore:Point;
public function MainClass()
{
// constructor code
}
public function startApp()
{
addChild(iconspawn);
iconspawn.MenuSpawn();
}
public function directionsApp()
{
addChild(iconspawn);
iconspawn.KeyboardOne();
}
public function placeOneApp()
{
AYint = IconSpawn.A_Y.y;
addChild(iconspawn);
iconspawn.PlaceOneSpawn();
addEventListener(Event.ENTER_FRAME,update);
addEventListener(MouseEvent.MOUSE_DOWN,spawnTouch);
addEventListener(MouseEvent.MOUSE_UP,endScroll);
touchbool = false;
//IconSpawn.container.mouseChildren = true;
}
public function directionsApp2()
{
addChild(iconspawn);
iconspawn.KeyboardTwo();
}
public function update(evt:Event)
{
touchPoint2 = mouseY;
scrollDiff = touchPoint2 - touchPoint;
trace(scrollDiff);
}
public function spawnTouch(evt:MouseEvent)
{
touchPoint = mouseY;
touchTimer.addEventListener(TimerEvent.TIMER,timerTouch);
touchTimer.start();
IconSpwnY = IconSpawn.A_Y.y;
if(scrollDiff == 0)
{
IconSpawn.container.mouseChildren = true; //Important <-
}
else
{
IconSpawn.container.mouseChildren = false; //Important <-
}
}
public function timerTouch(evt:TimerEvent):void
{
addEventListener(Event.ENTER_FRAME,startScroll);
touchbool = true
}
public function startScroll(evt:Event)
{
if(mouseY > 0 && mouseY < 1510)
{
IconSpawn.A_Y.y = IconSpwnY + (touchPoint2 - touchPoint);
}
}
public function endScroll(evt:MouseEvent)
{
removeEventListener(MouseEvent.MOUSE_DOWN,spawnTouch);
removeEventListener(Event.ENTER_FRAME,startScroll);
endTimer.addEventListener(TimerEvent.TIMER,endTiming);
endTimer.start();
trace("CALLL")
scrollDiff = touchPoint2 - touchPoint;
//touchTimer.reset();
}
private function endTiming(evt:TimerEvent)
{
IconSpawn.container.mouseChildren = true;
addEventListener(MouseEvent.MOUSE_DOWN,spawnTouch);
//addEventListener(Event.ENTER_FRAME,startScroll);
scrollDiff = 0;
}
}
}

Answer 1

While you're moving set <container_mc>.mouseChildren = false. When the container clip stops moving, set the mouseChildren property to 'true'.

Answer 2

Adding to Craig's answer (which I definitely recommend implementing, to make life easier!), here is the list of the event listeners you should have hooked up for this to work as planned. This is theory, so you may have to play around with it a bit.
container.addEventListener(MouseEvent.MOUSE_DOWN, response);: You'll want to raise some sort of flag that the mouse is down, and wait for the next mouse event, which determines the action.
container.addEventListener(MouseEvent.MOUSE_MOVE, response);: If the mouse is down, disable child clicking (Craig's answer) and initiate dragging. You'll also want to raise a dragging flag.
container.addEventListener(MouseEvent.MOUSE_UP, response);: If the dragging flag is raised, stop drag and enable child clicking. If it isn't raised, do nothing, so the item can take over from there.
item.addEventListener(MouseEvent.MOUSE_UP, itemResponse);: Your click action.
Theoretically, this should work fine with your nested MovieClips, as long as you use MouseEvent.MOUSE_UP as the listener on them (as shown above). Using MouseEvent.MOUSE_DOWN or MouseEvent.CLICK may mess your timing up. However, I'd experiment a bit to find the right combination, as I could be wrong on that last point.