A Flash Developer Resource Site

Results 1 to 4 of 4

Thread: How to allow vector drawing in .swf??

Hybrid View

  1. #1
    Junior Member
    Join Date
    Oct 2011
    Posts
    20

    How to allow vector drawing in .swf??

    I am not sure if my title fits what I am asking about but here it is...

    I have seen flash games where the player can actually draw objects.
    Meaning they have like a pen cursor in the game, and they can just start creating vector art. I have a game in mind where it might be a cool feature to have the user draw a few things. I bet this is a heavy subject so I am not asking for every bit of code I'd need to create something like this, but I have searched quite a lot for anything remotely brushing on this subject and clearly I have no idea what I should be punching into google. If anyone can point me in the right direction I would appreciate it.

  2. #2
    on a very basic level, the ability to draw something in flash requires:
    an object to draw on.. i usually create a new sprite and add it as a draw layer

    next you need a loop to be able to track the mouse for drawing.. i usually use an ENTER_FRAME listener for that.

    in the loop, you detect where the mouse is, and potentially where it just was (stored in variables) and use the drawing api to draw a line from the previous point to the new point.

  3. #3
    Junior Member
    Join Date
    Oct 2011
    Posts
    20
    ok makes sense, I did a bit more research and found this...
    http://active.tutsplus.com/tutorials...tion-in-flash/

    Is there anyway to accomplish what you said without the use of packages? I can't have packages for the type of project I am doing. And if it is basic, can you spare some time and give me more of a lead?

    Thanks!

  4. #4
    Senior Member guardiankitty's Avatar
    Join Date
    Dec 2006
    Location
    Here
    Posts
    215
    See: http://help.adobe.com/en_US/FlashPla.../Graphics.html


    In short, in each movieclip or sprite you can access a variable called graphics (ie: myMC.graphics)

    To 'Draw', first you need a brush. Here is an example of one:
    Actionscript Code:
    myMC.graphics.lineStyle(5, 0, 1);// So that is (brush size, color (for instance, 0x000000 is black), alpha (1 is 100% alpha, no transparencies)

    Next, you press your brush to the paper at a given point. For this example I will set it to the current location of the mouse:

    Actionscript Code:
    myMC.graphics.moveTo(stage.mouseX, stage.mouseY);

    And lastly, you will want to move the brush to another location, creating a brush stroke (or line). For this example, we will just have it go from its current location to (100x,100y).

    Actionscript Code:
    myMC.graphics.lineTo(100,100);


    And thats about it.


    Given that the root of your movie technically IS is movieclip/sprite, you can just copy and paste the following, which creates a brush, places a brush down, then allows you to move your brush creating a line.

    (seeing that you dont want these in classes--- which is bad form... tisk tisk), you can just copy and paste the following right into your flash IDE.


    Actionscript Code:
    //Make sure flash knows that you are doing stuff with the mouse
    import flash.events.MouseEvent;

    //Create Brush
    this.graphics.lineStyle(5,0,1);

    //Press Brush to your movieclip
    this.graphics.moveTo(stage.mouseX,stage.mouseY);

    //Each time that the mouse is moved, run 'OnMouseMove'
    stage.addEventListener(MouseEvent.MOUSE_MOVE, OnMouseMove);

    function OnMouseMove(e:MouseEvent):void{
        //Drag the brush along your movieclip to the location of the mouse
        this.graphics.lineTo(stage.mouseX, stage.mouseY);
    }


    So when the above is run, you start drawing everywhere that you move your mouse. However I have gone ahead and given it a little more love, now you can press with the mouse to draw.


    Actionscript Code:
    import flash.events.MouseEvent;

    this.graphics.lineStyle(5,0,1);

    stage.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown);

    function OnMouseMove(e:MouseEvent):void{
        this.graphics.lineTo(stage.mouseX, stage.mouseY);
    }

    function OnMouseDown(e:MouseEvent):void{
        this.graphics.moveTo(stage.mouseX,stage.mouseY);
        stage.addEventListener(MouseEvent.MOUSE_MOVE, OnMouseMove);
        stage.addEventListener(MouseEvent.MOUSE_UP, OnMouseUp);
        stage.removeEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown);
    }

    function OnMouseUp(e:MouseEvent):void{
        stage.removeEventListener(MouseEvent.MOUSE_MOVE, OnMouseMove);
        stage.removeEventListener(MouseEvent.MOUSE_UP, OnMouseUp);
        stage.addEventListener(MouseEvent.MOUSE_DOWN, OnMouseDown);
    }


    Hope that is helpful!


    PS. Please please please, use classes and good OOP reguardless of the size of the project, you really will thank yourself later, when trying to update/work with it. If nothing else, do it for me!!

    ~GK >^.^<
    Last edited by guardiankitty; 12-04-2011 at 05:05 PM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center