13 Replies Latest reply on Dec 17, 2006 8:40 AM by kglad

    simple drawing app...

    gav_payner Level 1
      i want to create a simple drawing app.... the user can draw rectangles on the screen with drag and drop mouse action...

      when a recatngle is drawn... the user can

      1) stretch the size of the rectangle and

      2) can 'drag' it around the screen with the mouse.


      can any one help me with this... thanks.

        • 1. Re: simple drawing app...
          kglad Adobe Community Professional & MVP
          you'll want to have a button that the user presses to indicate that they want to draw a rectangle. when that button is pressed define

          1. an onMouseDown handler that calls initiates the creation of a movieclip to contain the drawing, the lineStyle and a moveTo(_root._xmouse,_root._ymouse), and
          2. an onMouseMove handler that clears the movieclip and contains a 4 lineTo() statements to draw the rectangle and
          3. an onMouseUp handler that deletes the other handlers and itself.
          • 2. Re: simple drawing app...
            gav_payner Level 1
            hey kglad....
            i got something like this so far.....

            still a bit stuck on drawing a recatangle that can be scalable by the user and can be draged around the screen...


            will i have to keep on creating movie clips for every rectangle the user wants to create....

            im trying to buld a simple room map app, where the user can draw a plan of a house.. each room will be a rectangle.


            onMouseDown = function () {
            this.createEmptyMovieClip("rectang", 1);
            rectang.lineStyle(1, 0x000000, 100);
            rectang.moveTo(_xmouse, _ymouse);

            };
            onMouseMove = function () {
            rectang.clear();
            //draw rect here...
            };
            onMouseUp = function () {
            };
            • 3. Re: simple drawing app...
              kglad Adobe Community Professional & MVP
              yes, you'll want to create a few movieclips for each rectangle.

              one just to contain the drawing methods and two (non-empty) others to contain the mouse handlers for dragging and resizing.

              here's more detail on the drawing methods:

              • 4. Re: simple drawing app...
                gav_payner Level 1
                good stuff...thanks

                im still a bit lost with adding mouse handlers for the recangle movieclip..?

                how can i create a few movie clips for the same rectangle...

                thanks
                • 5. Re: simple drawing app...
                  kglad Adobe Community Professional & MVP
                  you can create child movieclips of r (for example, r.createMovieClip("drag",rectangleNum++) ) within startDraw(), update their position in r.onMouseMove and assign handlers for resizing and dragging in startDraw().

                  usually the drag movieclip would be placed along the top of the rectangle and the resize movieclip would be placed at the lower right corner of the rectangle, but those are just convential placements. you can position them whereever suits your needs.
                  • 6. simple drawing app...
                    gav_payner Level 1
                    hey kglad... im still a bit of a newbie with aciton script....

                    are you saying 3 rectangle movie clips... all the same size... r is the parent, with a dragable child rectangle... and another r child for resizing...?

                    so if you drag the drag / resize any of the r-child movie clips .... it will then drag / resize the main rectangle..?

                    thanks
                    • 7. Re: simple drawing app...
                      kglad Adobe Community Professional & MVP
                      no. here's sample code that adds a drag bar to your rectangle. you would add additional code to draw the "s" the "sizing" button, position it and assign handlers for it:

                      • 8. Re: simple drawing app...
                        gav_payner Level 1
                        ok got it.....

                        all i need now is to display the name of the room

                        ive been trying this way....

                        with (this) {
                        clear();
                        lineStyle(1, 0x000000, 100);
                        beginFill(0x3333ff, 100);
                        moveTo(startX, startY);
                        lineTo(_xmouse, startY);
                        lineTo(_xmouse, _ymouse);
                        lineTo(startX, _ymouse);
                        lineTo(startX, startY);

                        lineStyle(10, 0x000000, 100);
                        this.createTextField("some box name", this.getDepth(), _root._xmouse,_root._ymouse,100,100);



                        thanks again.
                        • 9. Re: simple drawing app...
                          kglad Adobe Community Professional & MVP
                          where do you want to display the name? in the dragbar above the rectangle? below the rectangle? elsewhere?
                          • 10. Re: simple drawing app...
                            gav_payner Level 1
                            in the dragbar would look the best....
                            • 11. Re: simple drawing app...
                              kglad Adobe Community Professional & MVP
                              try:

                              • 12. Re: simple drawing app...
                                gav_payner Level 1
                                thanks kglad.....

                                i appreciate your help.....

                                happy christmas and all that..!
                                • 13. Re: simple drawing app...
                                  kglad Adobe Community Professional & MVP
                                  you're welcome.