Joint Style from lineStyle() using LineTo()

[depth9]

Hi,

I am trying to create a simple drawing app. I am using Flash 9.0 with ACtion Script 3 inside the CS3 environment. Here is my code snippet that I am having a problem with:

var childLine:Shape=new Shape;
childLine.graphics.beginFill(cp.selectedColor,1*(s lider_val/num_alpha_intervals));
childLine.graphics.lineStyle((halfSize*2)+2,cp.sel ectedColor,1*(slider_val/num_alpha_intervals),
false,LineScaleMode.VERTICAL,CapsStyle.ROUND, JointStyle.ROUND);
childLine.graphics.moveTo(x_origin,y_origin);
childLine.graphics.lineTo(x_new_origin+(halfSize), y_new_origin+(halfSize));
childLine.graphics.endFill();
addChild(childLine);


Here is the output of the Flash Movie:



The alpha value of the line being drawn here is set to about 0.50.
So the problem appears to be the joints on the beginning and end of each new line are doubling up. By that I mean the starting joint of the new line seems to be overlayed on the end joint of the previous line.

I wan to use JointStyle = ROUND becuase it creates the smooth transition I want from one line to the next. I have tried various setting for the JointStyle in conjunction with the CapStyle, but non seem to prevent the joint from each line from doubling up.

Should I use a different technique altogether to accomplish a line drawing app. Would the Pen object be a better choice for this app?

Thanks very much

[deldelfarrom]

Firstly, yes the overlapping of the different lines is causing the circle highlights.

I have only ever dealt with this problem in flash8, and as2 but I would image the same would work. The way in which I used to get round it was to...

1) put the whole thing inside a movie.
2) draw the lines with 100% alpha.
3) use darken as the blend method for the containing movie.
4) reduce the alpha of the movie that the code was cantained within to get the effect you wanted.

Hope this helps, (and can be translated into as3)

[depth9]

Hi deldelfarrom,

thanks for your reply.

I made the adjustments you described and the lines did draw with the alpha effect that I wanted, producing one contiguous colored line with no overlays on the joints.

There were two problems though:

1) All lines drawn to the container continued to have the alpha of the container. This makes sense since the alpha of the container is effecting all graphics objects in it.
But I don't see a way to draw additional lines that have a greater or lesser alpha than all other lines already in the container.
By this I mean I cant distinguish alpha values between objects since they are universally effected by the container's alpha value.

2) In Firefox, the container started off with a white background, with alpha set to 1. As I decreased the alpha value of the container the background became increasingly dark (meaning the opaqueness darkens with a lesser alpha value since the blend mode is set to DARKEN).
At the point the alpha value of the container reached (or nearly approched) zero, the container became black. In IE this problem did not seem to exist.


It seems to me I need to find a graphics mode such that all lines added to the display list have an absolute color, but that color is adjusted by the alpha. I will try using my opaqueness slider to actually adjust the color of the lines rather than their aplha. But I think this will cause all new lines added to the display list to overlay previous lines on the display list, regardless of alpha.

Well, thanks again for the help. There must be a way to do this with blend techniques.

[deldelfarrom]

I found my old programs, and I had already solved the problem...

Ready for this (drum roll please).....

Just dont drop the line in between movements, (or wait until you have released the mouse). It should be noted that picking the line up again (lineStyle, or moveTo - or whatever the as3 equivilent) is the same as dropping then picking up.

I have included here the crude example on as2 (that is the fla below) and that is summed up as.

onpress - start line, pen = true;
onrelease - pen = false;
onmousemove - if pen { lineto }

You will see from that the start line only exists on the mouse press at the begining, and is not re-done on each mouse movement.

Hope this is of come help...
(NOTE: FLA Flash 8, AS2)

[depth9]

Hi deldelfarrom.

Your solution was correct.

Simply calling the <obj>.graphics.lineStyle() method in my MouseDOWN event function instead of my MouseMOVE event function solved the problem.

I did not realize lineStyle() picked up and then dropped the line again and caused this overlay effec on the line joints.

Many Thanks to you.
<markAsAnswer />