Solved

slow drag down

Posted on 2011-03-24
16
628 Views
Last Modified: 2012-05-11
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
Comment
Question by:RapperOnStep
  • 10
  • 6
16 Comments
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 35215260
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
 

Author Comment

by:RapperOnStep
ID: 35240233
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
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 35242517
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
 

Author Comment

by:RapperOnStep
ID: 35242860
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
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 35243190
done.
0
 
LVL 14

Assisted Solution

by:tomaugerdotcom
tomaugerdotcom earned 500 total points
ID: 35243531
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
 
LVL 14

Assisted Solution

by:tomaugerdotcom
tomaugerdotcom earned 500 total points
ID: 35243593
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
 
LVL 14

Accepted Solution

by:
tomaugerdotcom earned 500 total points
ID: 35243729
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:RapperOnStep
ID: 35259329
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
 

Author Comment

by:RapperOnStep
ID: 36131067
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
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 36137492
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
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 36137500
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
 

Author Comment

by:RapperOnStep
ID: 36137560
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
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 36137723
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
 
LVL 14

Expert Comment

by:tomaugerdotcom
ID: 36137773
Arg, my class diagram was backward. Please see attached.
SortableMenu.png
0
 

Author Comment

by:RapperOnStep
ID: 36137831
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

This is intended to introduce all collision detection principles in flash, their strengths, weaknesses and workarounds. The main method for Collision Detection in flash is using hitTestObject. But unless you'll be pushing rectangular shapes without …
I have found that much of my time doing support ends up being a constant repetition of the same steps to different people.  Early on I stated using web pages with Frequently Asked Questions (FAQs) to alleviate most of the burden.  Sometimes this jus…
Learn how to set up basic frames and paths in Prezi and understand the open space that Prezi allows you to create presentations in.
Learn how to create interesting presentations by including videos to keep your audience engaged using Prezi. Select "Insert" from the top menu in your Prezi editor: Select "YouTube Video": Paste the video URL into the prompt: "Select "Insert":…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now