Snap a draggable MC to preset positions

Question

First let me explain that most of our knowledge of AS3 comes from a small bits used in some interactive animations made in Flash cs5/5.5/6 and not from a programming background mostly just starting to understand a bit of html & Jquery. There are quite a bit of examples that have one or two bits of what we want but due to our lack of knowledge of AS3 it is hard to change these bits of code to something working. We tried a couple of things but without much results. At this point we rather put in some extra work and let it do what we want then have it half work with a couple lines of code that we don't understand. We have actually seen quite a lot of Jquery sliders etc that would also work for our problem but our knowledge to combine if at all possible with the rest of our project is non-existent.

We are working on a interactive presentation on a W7 touchscreen (input is processed as mouse events) with a world map subdivided in 4-5 zones with 30+ points of interest each, this will all be offline and played full-screen in a flash player. For these points of interest we like to show a pop up with more information/photos/videos in the form of some sort of slides (or something similar) Our zoom in animations to the sub-zones are working very well and contain all the points of interest as symbols with their own instance id/name. We were thinking it would be easy for us to get all the content in if it would all be in a very wide and have this subdivided in "slides" (5x screen width for example with 5 "slides" for content) and make that MC draggable on the X-axis and snap on a the positions that will have one of the "slides" on screen, preferably all of this with a ease to make it look smooth.

Here is a link to "AS3 How to startdrag only on x-axis?" which works great on a very wide MC, Makes the user able to drag it from side to side on the X-axis.

Now we would like to be able to snap it to the preset possitions with an ease.

We were thinking along the lines of : X position moves to the left more then 25% it will snap to the next preset position with an ease.

Is this at all possible in the way we see it or is there another way to do this?

As said before, we do not have a programming background and it is very possible we have missed the very obvious options to the programmer orientated mind.

Answer 1

What you need is not an actual dragging, but a simulation of that, because of the fact that you want to move the object with ease to some location, and dragging is actually moving specific object along with the mouse cursor.

So what you can do is not that complex - check when the mouse clicks on your object and save mouse location. Add listener for mouse move. When the mouse moves, check if it's still pressed (add events for MOUSE_DOWN, MOUSE_UP).IF the mouse is down, on every update check it's location. If the location is more close to your next point - move the object with some tween. If the mouse is released, you can stop tracking if it moves or not.

What you will actually do is tracking when the mouse is pressed, moved and released. During the pressed and released moment, you will track it's location and animate the object corresponding to the cursor (for example if you have two 'locations' at 0 and 100, if the cursor is between 0 and 50 - animate to left; if it's between 50 and 100 - animate to second position).

You will still need some programming skills to do so, and there's no easy way to show you how it's done as I don't know your actual structure.

Hope that helps!