2

First off, I'm pretty novice when it comes to Flash and AS3.

I am trying to create a displayObject that contains 12 buttons for a mobile app. Since there are twelve buttons that will all open up into seperate menus they obviously all won't fit on a mobile devices screen. This is why I want to have all of the buttons on one display object that can be dragged up and down to show the buttons not currently displayed on the screen.

I am running into numerous problems while attempting this. 1) If I make the object containing the buttons draggable, which is behind the buttons, I can't click it through the buttons in order to drag it(unless I hit a sweet spot where there aren't any buttons but this isn't efficient for the user).

2) If I make the object containing the buttons draggable and put it in front of the buttons then I can't click the buttons in order to open the menus and access what is contained within them.

3) For some reason all of the buttons are seperately draggable when I don't want them to be. For example, I click anywhere on the screen (whether the touchID point is on a button or not) to move the entire list of buttons and if I happen to be clicking a button then, instead of moving the entire list, it moves that one button.

So the main question here is "How can I create a list of buttons and scroll through the list using a drag method (such as the settings menu on your phone) without dragging the buttons apart from each other." So the containing display object is draggable, and the buttons are clickable.

Some guy named Glenn does a good job with his example: http://rabidgadfly.com/2010/03/as3-clickable-button-inside-a-draggable-movie-clip/

However, if you click the yellow button in his example you can drag it out of the gray box. I want my button to remain stationary relative to the gray box. So you can move the gray box but the yellow button remains in the same location within the box but you cant drag the button around within the box.

1 Answers1

0

I am not familiar with accelerometer events for the smartphones, but I do have an idea on how to fix this with regular actionscript 3 listeners. (You can just convert these to whatever is used by smartphone listeners)

A solution that comes to mind is to have a mouse down listener and a mouse up listener on the whole drag-able box. And when a mouse down event fires, you start a timer to go off in about a quarter of a second, and when it does you then set up a enter frame (or a timer based) function that fires every frame. This will update the whole box's position every frame corresponding to the current mouse location (your dragging box effect) and when the mouse up listener fires, it stops the dragging (and at this points, if the mouse is up, then the user is not touching the screen at all).

Also add a mouse click listener to every button. This way, with the quarter of a second timer, you KNOW that if the user simply wants to click a button, then they will click, leaving less that a quarter of a second between the mouse down and mouse up events (so that the dragging never starts) and the button is only clicked. And if the user holds the mouse down for more than a quarter of a second, then you KNOW that they must be trying to drag the whole thing.

This seams like the only way to differentiate between a user wanting to drag the box, and the user wanting to click a button inside it.

Obviously it does not have to be a quarter of a second, it can be any length of time that you want, it could even be no time at all, but then this might mess up things when people only want to click the button and accidentally slides it when clicking.

If you have any questions or problems, please comment and i'll try to help.

Xiler
  • 426
  • 4
  • 13