3 Replies Latest reply on Sep 6, 2007 1:58 PM by Hasenstein

    thismc.startDrag(...constraints..) confusion

    Hasenstein Level 1
      Hello,

      (ADDED/EDITED AFER POSTING: Actually, my greatest issue is not the formula, after describing it to you I can think more clearly now ;-) - but my lack of understanding of what those constraints in startDrag(...) actually mean/do. When I have all values (withs and constraints) I should know what to expect on screen - but I'm very often completely surprised by the result.)

      I am thoroughly confused now. I have a movieclip with an onMouseDown event attached to it that calls startDrag(..). So far so easy - but I don't want the user to drag it too far outside the screen. The mc holds a print preview. The catch: I also have zoom-in/out buttons and they change mc._xscale and mc._yscale.

      So I cannot use fixed values for the constraints, I have to calculate them - but how? I have been unable to find a rule (formula) that works under all conditions - mc size (x,y separately) larger or smaller than the screen?

      Example for the complexity:
      - If it's smaller I want the user to be able to drag it left to the left until the mc's left edge touches the left screen boundary.
      - However, if it's larger I want the user to be able to drag it so far outside left until the RIGHT edge plus 100px space is visible. (It is a preview for print, after all)
      - x and y have to be looked at separately

      My problem: Unlike 20 years ago (in school, I'm not THAT old), when I wrote complex algorithms using my brain, pen and paper I have now adopted the coding method of today (I've seen it in action many times at some large and well-known software firms... where the code is so ugly and complex that it's almost the only way left to get any work done), which seems to be to start coding randomly, check the result, change something, run again, etc. :-(

      Ahhh, describing the problem already helped... let's see if I can figure it out after lunch. But if anyone already has the algorithm for this not-so-unsual issue - after all, something exactly like this is needed for any zoom-and-drag function to view something that could be larger than the stage (like image viewers) - I'd welcome the help :-)

      Thanks,
      Michael

      PS: my stage size is 800x600 and when the mc is larger than the stage I want 100px space and not stop dragging exactly at the edge - but I want no space when it's smaller than the stage.

        • 1. Re: thismc.startDrag(...constraints..) confusion
          Level 7
          Michael,

          > Ahhh, describing the problem already helped... let's
          > see if I can figure it out after lunch. But if anyone
          > already has the algorithm for this not-so-unsual issue -

          Rather than the MovieClip.startDrag() method, whose constraints aren't
          changeable, it sounds like you may want to roll your own dragging mechanism.
          Basic algorithm goes like this:

          draggableMC.onPress = function():Void {
          this.onMouseMove = function():Void {
          this._x = _root._xmouse;
          this._y = _root._ymouse;
          updateAfterEvent();
          }
          }
          draggableMC.onRelease = function():Void {
          delete this.onMouseMove;
          }

          The above moves the object relative to its registration point, which
          means the movie clip will snap to the mouse every time you click it. To
          drag from where the mouse happens to be during the clicking, use an offset:

          draggableMC.onPress = function():Void {
          this.origX = this._xmouse;
          this.origY = this._ymouse;
          this.onMouseMove = function():Void {
          this._x = _root._xmouse - this.origX;
          this._y = _root._ymouse - this.origY;
          updateAfterEvent();
          }
          }
          draggableMC.onRelease = function():Void {
          delete this.onMouseMove;
          }

          To constrain ... well, that's up to you. :) An if() statement or two,
          and perhaps a reference to the Stage class may be all you need.

          draggableMC.onPress = function():Void {
          this.origX = this._xmouse;
          this.origY = this._ymouse;
          this.onMouseMove = function():Void {
          if (_root._xmouse > 50 && _root._xmouse < Stage.width - 100) {
          this._x = _root._xmouse - this.origX;
          }
          this._y = _root._ymouse - this.origY;
          updateAfterEvent();
          }
          }
          draggableMC.onRelease = function():Void {
          delete this.onMouseMove;
          }

          Note, the above examples are written in ActionScript 2.0. There is a
          difference in the way events are handled between AS2 and AS3, but the
          general approach would be the same.

          Here's an example of constraining to a circle, just for kicks. If
          you're looking for algorithms, it may help reinforce the snippets I pasted
          above:

          http://www.quip.net/blog/2006/flash/actionscript-20/how-to-constrain-circle


          David Stiller
          Co-author, Foundation Flash CS3 for Designers
          http://tinyurl.com/2k29mj
          "Luck is the residue of good design."


          • 2. Re: thismc.startDrag(...constraints..) confusion
            Hasenstein Level 1
            Actually, I found with some thinking I could have avoided lots of trouble. The constraint parameters work very well - the only trouble is that they are not at all explained in the documentation, and that is something that is definitely necessary.

            I'm preparing a demo of various cases to illustrate what the parameters do. That's all right even if it takes some time (but I hope to be done later today), since one of my more crazy pet projects is an open-source multimedia trainning website http://letexa.com/ :-)