Solved

slow drag down

Posted on 2011-03-24
16
636 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Salesforce Made Easy to Use

On-screen guidance at the moment of need enables you & your employees to focus on the core, you can now boost your adoption rates swiftly and simply with one easy tool.

 

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
 

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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes a solution to a problem of subloading one movie into another when they have different SWF versions. Sometime back, I was working on an ActionScript project while I came across an interesting fact which I would like to share…
In my long career of working as an actionscript developer, I had spent sleepless night often working hard to solve some small problems which actually took a lot of my development time; later found out the solutions to be a line or two. Here are s…
Not only does Prezi allow you to create non-linear presentations, it also makes it easy to apply transition animations between your frames. Learn how to apply a fade-in transition to select items and entire frames in this tutorial Select "Edit Path"…
Learn how to use the remote presentation tool in Prezi to allow you to harness the power of this cloud based presentation platform. You can show your presentation with a remote audience using this free tool.

691 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