0 Replies Latest reply on Dec 4, 2008 6:42 AM by LMcConnell29

    Problems with collision detection between movie clips and text boxes

      I have a large map (movie clip) on a stage that is much smaller so that only a portion of the map is shown on the stage at a time. The map contains points of interest (movies clips) and labels (text boxes) for those points. These points and labels are dynamically created and placed on the map. The position of the map point is determined by an external XML file and the label is positioned next to the map point. Each map point links to a corresponding webpage. The map point for the page the user is on becomes the center of the map and determines the portion of the map shown.

      I have been able to get the map to re-center with reasonable accuracy and I am planning on using variables from the URL or flashvars to determine what map point should be the center based on the page the user is on. The problem I am currently having is there are several labels that overlap map points or other labels. I have been attempting to use collision detection to determine which labels are overlapping and move those labels to an empty area on the map. My first attempt at collision detection was with hitTest() but this was not working. From what I found, hitTest() only works with movie clips and the labels are dynamically created text boxes. It is necessary to have the labels as text boxes because the labels need to have a background color and have a variable width to accommodate the longer text ; this didn’t seem possible with a movie clip. Below is the method I am currently trying to use:
      1. Create an instance of a movie clip (pre-existing movie clip from the library, containing a dot) for each map point and place according to the information in an external XML file.
      2. Create text boxes for each label and place the text boxes next to the appropriate map point
      3. Determine which labels overlap other labels or map points
      4. Determine if the labels that overlap can be moved above or below their current position without causing new collisions.
      5. Check to see if the new position of the labels that need to be moved will overlap with other labels that are being moved. If they do, find a new place for the label then move it. If not, just move the label.

      There are several problems with the current method:
      1. For the best results I have to check each corner of every label and map point to see if it overlaps with other labels. This results in lots of if-statements with the code in the if-statements being very similar.
      2. While loops and functions do not work so there is lots of repeated code. When I use while loops, the Flash movie runs very slow and eventually crash the program before anything is placed on the map. When I use functions, I am unable to access variables inside the functions and I end up with a blank map when I test the movie. I thought this might be a variable scope problem and declared my variables outside of the function but this didn’t fix the problem.
      3. Several label overlaps are not detected. I was thinking this has something to do with the depths of the labels because collisions only seem to be detected with labels that were placed after the label being tested but I don’t know if or how this problem can be fixed.
      4. I can’t seem to get the labels to a point where all labels are not overlapping no matter where the map is centered. I can usually manage to get one portion of the map to look decent but as soon as I re-center the map the labels are overlapping in that portion worse than they were before.

      I have searched extensively on the internet and can only find collision detection used for creating games. As you can see, I have been unsuccessful at tailoring the gaming solutions to my problem. What I would appreciate is any suggestions, links to websites or tutorials, or anything else that might be helpful in solving my problem. Thank you in advance for your help.