A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: Is there a way to draw a chiseled line in Flash?

  1. #1

    Is there a way to draw a chiseled line in Flash?

    I have a project where I need to draw a chiseled line as if the user is using a calligraphy pen / chiseled marker. I'm not sure how to even approach this as it is outside of Flash's drawing API, and to make things more challenging it has to be in AS2. I'm guessing that there is no way to do this using the drawing API, but that I will have to go old school and use a rotating rectangle that leaves behind imprints of itself. I'm doubting I can get a smooth line that way, though.

    Has anyone out there ever done this? Or do you have any insight as to the best approach? Any feedback would be appreciated.

    Thanks!

  2. #2
    This works OK, but the line is somewhat jagged. I could update with trig to change the angle of the line, but I don't think that would make the line smoother. I tried messing with the lineStyle parameters but that didn't change the results.

    Code:
    lineStyle(2, 0x000000);
    thickness = 5;
    
    onMouseDown = startDrawing;
    onMouseUp = stopDrawing;
    
    function startDrawing() {
    	fromX = _xmouse;
    	fromY = _ymouse;
    	onMouseMove = drawChiseledLine;
    }
    
    function stopDrawing() {
    	delete onMouseMove;
    }
    
    function drawChiseledLine(){
    	toX = _xmouse;
    	toY = _ymouse;
    	moveTo(fromX+thickness, fromY-thickness);
    	beginFill(0x000000);
    	lineTo(toX+thickness, toY-thickness);
    	lineTo(toX-thickness, toY+thickness);
    	lineTo(fromX-thickness, fromY+thickness);
    	lineTo(fromX+thickness, fromY-thickness);
    	endFill();
    	fromX = toX;
    	fromY = toY;
    }

  3. #3
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    Don't use lines. Use shapes. I haven't used a line in over a decade and I have to do artwork and animation all the time.

    All your shapes have to be on the pixel to be sharp. x = 100 not x = 100.2 Math.round(myNumber) will round to the nearest integer.

    You should just draw stuff by hand on the stage whenever possible. I know programmers or coders think they're doing something by coding artwork but it's super inefficient.

  4. #4
    Hi moot. Unfortunately I cannot do that. It is for an application where the user controls a chiseled marker that has to dynamically draw on the screen.

  5. #5
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    Sure you can. You can't use lineTo if that's what you mean.

    You can "draw" using whatever you want. You can draw lines using shapes, bitmaps, jpgs, text, whatever. The mouse/touch movements are all recorded and broadcast. You can put down whatever you want where the mouse goes.
    Last edited by moot; 05-09-2014 at 09:59 PM.

  6. #6
    Do you have code in mind that would accomplish drawing smooth calligraphic lines not using lineTo? I don't understand how leaving a trail of shapes would be any better.

  7. #7
    It seems that drawing from point to point is what is causing a segmented looking line. It might not be an issue if the frame rate was so high that the mouse coordinates were recorded at every pixel but I do not have that option. Perhaps curving from point to point with curveTo (or leaving a trail of shapes as you are suggesting) would smooth the line out. I'm just not sure how to code this.

  8. #8
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    It's definitely possible but it's definitely complicated.

    It's how you code it. In the code you gave, you're using onMouseMove. onMouseMove will give you a bunch of close together points. If you want a bunch of points to look smooth (without smoothing out the points with code - changing the points), you put shapes on the points. As opposed to drawing lines inbetween the points.

    You can get into interpreting the movements and drawing smooth lines from certain points but that's complicated - flash can draw a beautifully smooth line between two points but you have to figure out what points to use.

    Here is a good drawing with code tutorial in AS3. AS3 is essentially the same as AS2 with drawing.
    http://www.republicofcode.com/tutori...s3drawvectors/

Tags for this Thread

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