4 Replies Latest reply on Jul 20, 2006 8:36 PM by Newsgroup_User

    Dotted line within API???

    muhl
      Hello all,

      I have the following code on a button that on release the user can draw several lines using the lineTo method. I have done some research, but can't find out if there is a method within the drawing API that would draw a dotted line. Any info would be a help...Thanks,

      Muhly

      on (release) {
      gotoAndPlay(2);

      MovieClip.prototype.buildPoint = function(halfWidth) {
      this.lineStyle(3, 0x000000, 200);
      this.beginFill(0xE6E6E6, 100);
      this.moveTo(-halfWidth, -halfWidth);
      this.lineTo(halfWidth, -halfWidth);
      this.lineTo(halfWidth, halfWidth);
      this.lineTo(-halfWidth, halfWidth);
      this.lineTo(-halfWidth, -halfWidth);
      };
      function drawProcess() {
      xPos = _xmouse;
      yPos = _ymouse;
      point1._x = point2._x=xPos;
      point1._y = point2._y=yPos;
      point1._visible = point2._visible=true;
      line.moveTo(xPos, yPos);
      this.onMouseMove = function() {
      tempLine.clear();
      tempLine.lineStyle(3, 0xE6E6E6, 50);
      tempLine.moveTo(xPos, yPos);
      if (Key.isDown(Key.SHIFT)) {
      if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
      point2._x = xPos;
      point2._y = _ymouse;
      tempLine.lineTo(xPos, _ymouse);
      } else {
      point2._x = _xmouse;
      point2._y = yPos;
      tempLine.lineTo(_xmouse, yPos);
      }
      } else {
      point2._x = _xmouse;
      point2._y = _ymouse;
      tempLine.lineTo(_xmouse, _ymouse);
      }
      };
      }
      function drawFinalLine() {
      tempLine.clear();
      delete this.onMouseMove;
      point1._visible = point2._visible=false;
      line.lineStyle(3, 0x000000, 100);
      if (Key.isDown(Key.SHIFT)) {
      if (_ymouse<=yPos-100 || _ymouse>=yPos+100) {
      line.lineTo(xPos, _ymouse);
      } else {
      line.lineTo(_xmouse, yPos);
      }
      } else {
      line.lineTo(_xmouse, _ymouse);
      }
      }
      function clearMe() {
      if (Key.isDown(Key.DELETEKEY)) {
      line.clear();
      }
      }
      for (var i = 0; i<=20; i++) {
      var line = this.createEmptyMovieClip("line"+i,
      this.getNextHighestDepth());
      //trace ("movie");
      createEmptyMovieClip("tempLine", 2);
      createEmptyMovieClip("point1", 3).buildPoint(3);
      createEmptyMovieClip("point2", 4).buildPoint(3);
      point1._visible = point2._visible=false;
      onMouseDown = drawProcess;
      onMouseUp = drawFinalLine;
      onEnterFrame = clearMe;
      line.onPress = function() {
      this.startDrag();
      }
      line.onRelease = function() {
      this.stopDrag();
      }
      }
      }
        • 1. Re: Dotted line within API???
          Level 7
          Muhly,

          > I have done some research, but can't find out if there is a
          > method within the drawing API that would draw a dotted
          > line. Any info would be a help...

          In this case, you've got to roll your own. The Drawing API is actually
          just a subset of the MovieClip class, so if you don't see any dotted-line
          method there (and you won't), you'll know it doesn't exist.

          Ric Ewing wrote an approach in this article here.

          http://www.adobe.com/devnet/flash/articles/adv_draw_methods.html

          ... the ActionScript is a bit out of date (not his fault, of course -- this
          is an excellent article), but the approach is as useful as ever.


          David
          stiller (at) quip (dot) net
          Dev essays: http://www.quip.net/blog/
          "Luck is the residue of good design."


          • 2. Re: Dotted line within API???
            muhl Level 1
            David,

            Thanks for the link. I think I can make this work...

            Muhly
            • 3. Re: Dotted line within API???
              muhl Level 1
              David,

              I used Ric's code and it works fine when it's on the main timeline. However, if I dump it into a movie clip and the attach the movieclip with a button, the dashed line is at a different xy coordinate that the handles are.

              Here is the code I have on the first frame of the movieclip lineDash

              import com.polymercode.Draw;
              // place the two handles for the endpoints
              attachMovie("handle", "h1", 5);
              attachMovie("handle", "h2", 6);
              h1._x = 50;
              h1._y = 150;
              h2._x = 250;
              h2._y = 150;
              h1.clr = new Color (h1);
              h2.clr = new Color (h2);
              h1.onPress = drag;
              h1.onRelease = noDrag;
              h2.onPress = drag;
              h2.onRelease = noDrag;
              drawDash();
              //
              function drag() {
              this.startDrag();
              this.onMouseMove = drawDash;
              this.clr.setTransform({rb:255});
              }
              //
              function noDrag() {
              this.stopDrag();
              this.onMouseMove = null;
              this.clr.setTransform({rb:0});
              drawDash();
              }
              //
              function drawDash() {
              _root.clear();
              _root.lineStyle(3,0x000000);
              Draw.dashTo(_root, h1._x,h1._y,h2._x,h2._y,4,8);
              updateAfterEvent();
              }

              Then I call it from the library with the following code...

              on (release) {
              // create a clip to draw to
              mc10 = attachMovie("lineDash", "lineDash" + counter, counter + 4);
              counter++;
              mc10._x = 100;
              mc10._y = 100;
              //trace ("movie attached");
              }

              Like i said, this works...However, the line is separate from the handles.

              Any help you could give me would be greatly appreciated. I'm almost done with this project...

              mike
              • 4. Re: Dotted line within API???
                Level 7
                Mike,

                > I used Ric's code and it works fine when it's on the main
                > timeline. However, if I dump it into a movie clip and the
                > attach the movieclip with a button, the dashed line is at a
                > different xy coordinate that the handles are.

                Aha. Yeah, that makes sense. Check out MovieClip.localToGlobal() and
                MovieClip.globalToLocal() methods. They provide a handy conversion between
                Stage and movie clip coordinate spaces.


                David
                stiller (at) quip (dot) net
                Dev essays: http://www.quip.net/blog/
                "Luck is the residue of good design."