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.
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.
Related
I am currently developing a web app in meteor with angular. I have an html range element that moves along with a video (serving as a progress bar for the video). I want to be able to append pins to the progress bar that keep track of a certain time in the video for the user. So far, I have all this working.
However, I now want to be able to hover over these pins and display some data. Until now I have been using pointer events: none; to prevent the pins from making the progress bar un-clickable.
But,this also prevents me from using hover on the pins. Long story short, is there a way to turn off pointer events for clicks (so that the progress bar under the pins gets clicked instead), while still retaining the ability to use hover events on the pins?
For reference I included a picture of the progress bar filled with pins. The problem is if pointer events are turned on, you won't be able to select parts of the video in the large cluster of pins at the beginning. However, with pointer events set to none, I can't use hover events.
I have two buttons one on top of another, the button that is in front is clickable. The button that is behind is not clickable. How can I make that button clickable too?
It's not easy to deliver a click event to anything that's below the foreground object that accepts mouse events, because it intercepts their dispatch. In order to manually provide a click event, you should listen for clicks on stage, then run getObjectsUnderPoint() and filter out those that you need to accept a click. Here is a question that has an example of how it should work.
I know that it's possible to let the user drag the content in a ScrollPane around using scrollDrag, so that they don't have to use the scrollbars. However, with scrollDrag, it only works for the left mouse button.
What I want to be able to do is pretty much the same, but for either the middle (mousewheel) or right mouse button. That way the user can use the left button for other functions.
Does anybody know of a feature I may have missed that can do this, or a custom method? Note that I don't want this, I just want scrollDrag with other mouse buttons.
So what do they mean?
I am making an "interactive" iPhone as a project.
Currently I have 1 scene and within it, a movie clip labeled iphone and within it, about 8 or so buttons for different "apps". I want to create a scrolling affect after clicking one of the icons. How would I go about this?
If you're referring to creating Button type symbols, as in:
There are four states in the timeline to skin the visual appearance of the button depending on mouse interaction.
Up - Button's appearance when the pointer is not over the button.
Over - Button's appearance when the pointer is over the button.
Down - Button's appearance as it is being clicked.
Hit - Defines the area bounds that will respond to a mouse click. This area is invisible when published.
Addressing the remainder of your question, creating a virtual iPhone in Flash running various apps is substantial depending on scope. I would recommend breaking that down in to multiple questions.
I have a login MC on frame 1, layer 1. It contains 2 input texts username and password, and a login button. Beneath the login MC is menu MC (in frame 1, layer2). Menu MC contains a series of buttons (each button loads a child swf). When I publish and press tab key, the buttons located in menu MC also get selected, which I don't want. How can I stop this? What I want is so long as I have not logged in, I should not be able to select buttons on Menu MC by means of tab key. Very good site for SOLUTIONS. Whenever I face any programming problem, I turn to to stackoverflow. Thanks in advnce.
You can control whether a movieclip's children (or the movieclip itself) are selected when pressing tab with the tabChildren and tabEnabled properties. For example:
// disable selection of menu children with tab
menuMc.tabChildren = false;
Good luck.