[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 646
  • Last Modified:

slow drag down

Hi,

I have a menu dragging function that works like this: When I e.g. drag the menu item up and it hits the menu above the menus switches position. It works fine when I drag slowly but if I do it fast I think Flash is not fast enough to register my mouse position, hence everything gets messed up.

Is there a way that I can slow down the dragging or is there another way to get around this problem?

(the drag function is similar to the one u might know from the weather app on the iPhone)
0
RapperOnStep
Asked:
RapperOnStep
  • 10
  • 6
3 Solutions
 
tomaugerdotcomCommented:
We'll probably need some of your code, or access to your FLA in order to answer this one. The problem is more likely a mathematical one. Off the top of my head I would look at rounding errors and sequencing issues. If I understand what you're describing, then as you pull the menu item out, the list collapses, then as you drag it, the list expands at the insertion point, dropping the menu down. These kinds of things can get tricky. When you move the mouse quickly, you maybe skip a menu item, which if not handled correctly, could screw up the math.

Again, this is mere conjecture - I'll need to see your FLA in action to properly understand what you're trying to accomplish and what the nature of the problem is.

T
0
 
RapperOnStepAuthor Commented:
hi tomaugerdotcom,

Thx for your reply. My site is pretty big, but I have tried to clean up in all my code and only include what is relevant for you. In the classes folder(app/gui) I have marked my AS-classes that has to do with the menu dragging. I am not an expert in writing AS and my way of writing is probably not good. But I hope it can make sense to you and you can help me on how to optimize the dragging so Flash doesn't screw up the dragging effect....

Please let me know if you have questions.

ps: I just tried to upload a zipped file with the fla-files and all the classes but it wouldn't accept my zip file for some reason... So attach the menudragging class instead - dont know if that can give you an idea of my problem. If you need all the relevant files please let me know - then we have to find another way around it.


Look forward to hear from you.

Regards,
R.  MenuDragging.as
0
 
tomaugerdotcomCommented:
Yo, Raps. Okay, thanks for the code. I'm going through it now. As I notice stuff I'll post my comments. Since I can't test the code out, can you put what you have up somewhere so I can at least just run the SWF file to observe the erroneous behaviour?

T
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
RapperOnStepAuthor Commented:
Hey.

Ok. Can u download it from here and let me know when u are done? Then I'll remove it again.

http://www.rotate.dk/downloads/project(ee).zip

Thx.
0
 
tomaugerdotcomCommented:
done.
0
 
tomaugerdotcomCommented:
Without going into the code, I can see what's happening. The system breaks down when you move the mouse so fast that it skips over a menu item in-between polls of the mouse. What happens is that the menu item you're currently over moves down (or up) but it slips underneath the menu item that was skipped. And since the menu item that was skipped doesn't move, you now have a "hole".

The solution is never to assume that the menu item immediately above or below the one that you're moving has already moved. At each poll of the mouse movement, if the mouse has moved (onDrag), you should check each menu item between the last known position of the mouse (from the previous poll) to the current position. Each menu item that is "hit" within this test needs to be moved up or down accordingly.
0
 
tomaugerdotcomCommented:
In reviewing your code, I think that your approach can be simplified, while at the same time avoiding this kind of issue altogether.

Consider this: your menu is nothing more than a structure. With the drag and drop all you want to do is restructure the menu. This has nothing to do with pixels or position on a computer screen. It should only be about the sequence or order of your menu items.

I would suggest that you focus on re-arranging your structure, instead of re-arranging your graphics. You will still need to work with the graphics to know where your Mouse is, and what menu item it is over. However, instead of then just changing the position of your MovieClips, you should instead re-arrange your virtual menu structure.

Then, every poll, run a drawMenu() function that analyses the current structure of the menu and redraws it in the correct order. This avoids all sorts of complications, and is much more bomb-proof. It also allows you to change the look of your menus (the size, the position, the shape) without changing the underlying logic.

To store the structure in an non-OOP way, just use an array, or a multidimensional array.

var menuStructure = [
  ["menuItem1"],
  ["menuItem2", [
    ["submenu1", "submenu2"]
  ]],
  ["menuItem3"],
  ["menuItem4", [
    ["submenu3", "submenu4", "submenu5"]
  ]]
];

Open in new window

0
 
tomaugerdotcomCommented:
You could also approach this from an object oriented fashion, where each menuItem is an Object that "understands" its position within the structure. You could implement a linked list. Here are some references if you're not familiar with this programming concept:

http://en.wikipedia.org/wiki/Linked_list
http://www.emanueleferonato.com/2010/09/02/creation-of-new-data-types-in-as3-linked-list/

IN a linked list, each item knows about its neighbours (well, its antecedent, only, in some cases). This can make re-ordering your elements quite easy.

There are a number of other approaches, where you transfer the control down to the menu item rather than some top-level function that has to poll the mouse and do hit tests on menu items. Of course, if you're not comfortable with object-oriented approaches, this may not be the fastest option for you because you will need to brush up on a number of concepts before this will all feel comfortable for you.

Tom
0
 
RapperOnStepAuthor Commented:
hey tomaugerdotcom.

Thanks for all your valuable information!!!

It makes sense to me what you are saying. I will look at your different suggestions soon!

Thanks again.

Rasmus
0
 
RapperOnStepAuthor Commented:
hi tomaugerdotcom.

It's been a while since I got your answers but I hope you are still out there since I have a couple of more questions.

I have worked with the linked list, made some classes inspired by the links u send me – and it somehow makes sense to me now. But u write "rather than some top-level function that has to poll the mouse and do hit tests on menu items".

I cannot see how I can avoid to make the mouse polling and do the hittests? If I drag a menu and ie it has moved 20 px down and therefore is above another menuitem. I will have to tell that menuitem that is not i.e. number 3 anymore but is now number 2. And I also have to tell it that it now has to have a y value as number 2. To do this checking and moving I would use event frame function that constantly keeps an eye on the menu. Is this the wrong way to do it?

Hope to hear from u.

Rasmus

0
 
tomaugerdotcomCommented:
Hi Rasmus. I'm still there! Give me a little bit of time to re-familiarize myself with your case and I will try to continue to help you resolve this question.
0
 
tomaugerdotcomCommented:
Actually, I suggest you hit the "ask a related question" link, since this question has already been closed. Then make sure you post a quick link to that question here and I'll get it. This way you'll also get some input from other Experts out there!

T
0
 
RapperOnStepAuthor Commented:
Hey T.

Thanks. I think I did what u just suggested, but I did that after posting here... Got a little confused about how to do it so I didn't have to start all over.

Rasmus
0
 
tomaugerdotcomCommented:
Just back to your last question - I see where the confusion might come in.

I didn't mean to suggest that you wouldn't be polling the mouse or doing hit tests. All I was suggesting was if you felt like cleaning up your coding approach a little, you could move the code that checks the hit test and the mouse out of the top-level and into a class.

Consider this class structure:

menu class diagram UML
your entire menu is an instance of SortableMenu. That instance then contains an array of MenuItems that you create one by one and add to the SortableMenu in order using addMenuItem(). Each individual MenuItem is responsible for starting and handling its own drag operations and hitTest operations. So the event handlers are defined inside MenuItem, not at the top level of your application.

Hope this makes a little more sense!

Tom
0
 
tomaugerdotcomCommented:
Arg, my class diagram was backward. Please see attached.
SortableMenu.png
0
 
RapperOnStepAuthor Commented:
Ok. Thanks. This was kind of my idea as well.

I'll try to work a bit on it and see how it goes.

R.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 10
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now