Flash :: Draw Dashed Line

Help Me Draw A Dashed Border?
Here's my latest attempt at rendering a dynamic rectange (w/ width, height, border_width, border_color & background_color) I'm trying to render a dashed border, and can't seem to get the code right...

I've reworked my logic about five times, and can get the dashes to render right (almost) but the fill color disappears. It's rendered using actionscript. You can see the issues if you change the border width... Anyone mind taking a look to see what I'm doing wrong? It seems like the moveTo function isn't behaving right when I get to the end of each line. Thanks for any help!
I've attached the .fla, here's my code:

code:

var w:Number = 300;
var h:Number = 300;

var border_width:Number = 6;
var border_color:String = '0xcccc99';
var background_color:String = '0x336699';
var dash_width:Number = 10;
var dash_space:Number = (border_width*3);

// figure out how many horizontal dashes to render
// this is crude, but tried other ways and still the fill isn't right...
var h_num_dashes:Number = (w/(dash_width+dash_space));
var v_num_dashes:Number = (h/(dash_width+dash_space));

with(movBox) { // empty movie clip on the stage
if(background_color) {
beginFill(background_color,100);
}
lineStyle(border_width, border_color, 100 );
// start
moveTo(0,0);

// top line
//lineTo(w,0); // draws the next line without dashes for sanity's sake (debug)
var xpos:Number = 0;
for(i=0;i<h_num_dashes;i++) {
lineTo((xpos+dash_width),0);
moveTo((xpos+dash_width+dash_space),0);
xpos += (dash_width+dash_space);
}
lineTo(w,0);

// right line
//lineTo(w,h);
var ypos:Number = 0;
for(i=0;i<v_num_dashes;i++) {
lineTo(w,(ypos+dash_width));
moveTo(w,(ypos+dash_width+dash_space));
ypos += (dash_width+dash_space);
}
lineTo(w,h);

// bottom line
//lineTo(0,h);
var xpos:Number = w;
for(i=h_num_dashes;i>0;i--) {
lineTo((xpos-dash_width),h);
moveTo((xpos-dash_width-dash_space),h);
xpos -= (dash_width+dash_space);
}
lineTo(0,h);

// left line
//lineTo(0,0);
var ypos:Number = h;
for(i=v_num_dashes;i>0;i--) {
lineTo(0,(ypos-dash_width));
moveTo(0,(ypos-dash_width-dash_space));
ypos -= (dash_width+dash_space);
}
// finish
lineTo(0,0);

}

Help Me Draw A Dashed Border?
Here's my latest attempt at rendering a dynamic rectange (w/ width, height, border_width, border_color & background_color) I'm trying to render a dashed border, and can't seem to get the code right...

I've reworked my logic about five times, and can get the dashes to render right (almost) but the fill color disappears. It's rendered using actionscript. You can see the issues if you change the border width... Anyone mind taking a look to see what I'm doing wrong? It seems like the moveTo function isn't behaving right when I get to the end of each line. Thanks for any help!
I've attached the .fla, here's my code:

ActionScript Code:
var w:Number = 300;var h:Number = 300;var border_width:Number = 6;var border_color:String = '0xcccc99';var background_color:String = '0x336699';var dash_width:Number = 10;var dash_space:Number = (border_width*3);// figure out how many horizontal dashes to render// this is crude, but tried other ways and still the fill isn't right...var h_num_dashes:Number = (w/(dash_width+dash_space));var v_num_dashes:Number = (h/(dash_width+dash_space));with(movBox) { // empty movie clip on the stage if(background_color) { beginFill(background_color,100); } lineStyle(border_width, border_color, 100 ); // start moveTo(0,0); // top line //lineTo(w,0); // draws the next line without dashes for sanity's sake (debug) var xpos:Number = 0; for(i=0;i<h_num_dashes;i++) { lineTo((xpos+dash_width),0); moveTo((xpos+dash_width+dash_space),0); xpos += (dash_width+dash_space); } lineTo(w,0); // right line //lineTo(w,h); var ypos:Number = 0; for(i=0;i<v_num_dashes;i++) { lineTo(w,(ypos+dash_width)); moveTo(w,(ypos+dash_width+dash_space)); ypos += (dash_width+dash_space); } lineTo(w,h); // bottom line //lineTo(0,h); var xpos:Number = w; for(i=h_num_dashes;i>0;i--) { lineTo((xpos-dash_width),h); moveTo((xpos-dash_width-dash_space),h); xpos -= (dash_width+dash_space); } lineTo(0,h); // left line //lineTo(0,0); var ypos:Number = h; for(i=v_num_dashes;i>0;i--) { lineTo(0,(ypos-dash_width)); moveTo(0,(ypos-dash_width-dash_space)); ypos -= (dash_width+dash_space); } // finish lineTo(0,0); }

Animating Dashed Line
Hi,

This is simple in theory but hard in practice. All I want to so is create a kind of 'marching ants' effect with a dashed line, but it isn't in a straight line. Im creaing an animation which shows water flowing into the roots of a plant from the ground, hence why its not straight, this may give you an idea of what i'm trying to achieve.

I've tried a number of ways of animating it, mostly using masks. The closest I got was by converting a dashed line into a fill and setting it as a mask, then I animated a blue square moving under it. It still didn't look right though.

This is a relatively simple efect i'm trying to do, but I can't seem to pull it off. This effect must have been done a million times on animations for school science videos!

Thanks.

Dashed Line Blues
Does anyone know if it's possible to shape tween a dashed line in Flash?

When I try, the shape tween works but the line loses its dashes in the in-between frames even though the keyframes at the beginning and stay the same (dashed).

Maybe I need to think about it a different way - can anyone help?

Cheers.

J.

Dashed Line Between Keyframes
HELP! I'm going crazy. For some reason I can no longer create simple motion tweens. Every time I try to create a motion tween, it creates dashed lines instead of the solid arrow.

I've closed the program and created a fresh file just to test it. I drew a box, inserted a new keyframe downstream and then tried to create a motion tween. The result is always the same.

Can anyone tell me what's going on here and what I can do to fix it?

TIA,
Marc

Dashed Line For Motion Tween? Help Please
Hi everyone. I am having a major issue here. I am creating a little site intro, and here I am creating it, my tweens are going good everything is happening as expected. Than all of a sudden I make a new layor and I add a rectangle, I insert a keyframe and for some reason the keyframe, at the end, has a white frame with a circle in it instead of a grey one.

I have tried everything, deleting and remakeing it, doing everything I can and for some reason that last frame is always white! I don't know why and it is extremley hindering my project.

I would appreciate help asap, thanks.

Moving Dashed Line (hopping And Fading)
(sorry for my english)
Maybe very simple, but I just cannot figure out what the easiest way is.
I want a dashed line moving around a square button. So what you see is a dash hopping forward and fading dashes were it came from.
Anyone?

[MX04] Animating A Straight Dashed Line
is there any way of animating a straight dashed line without doing it frame by frame?

my first attempt at doing this frame by frame resulted in uneven dashes and gaps - not really the effect i was after...

alternatively, is there any way of consistently making the same sized dashes and gaps? (ive been using guides and the grid, but i must be a retard)

any help muchly appreciated

Shape Tweening With A Dashed Line Stroke?
I have a simple shape tween set up. The shape has the same dashed line for a stroke on both keyframes, but when the animation is played, the dashed line turns solid during the shape tween.

Why doesn't the stroke style animate?

Helicopter Moves Showing Dashed Line Path
I am building a .fla showing an Army helicopter flying a particular path demonstrating instrument flight to and from a navigational aid. I want the aircraft to leave behind a dashed line, like a trail of bread crumbs, so the viewer can see the path that the aircraft took from start to finish. I could use some assistance in developing the correct ActionScript to display such a path. Thanks for your help, Bob.

Edited: 12/04/2006 at 11:24:27 AM by Witchdoctor40

Draw A Line Using LineTo Then Hit Test That Line
is there a way to hitTest a line drawn with the following method?

Code:
clear();
lineStyle(1, 0, 100);
moveTo(obj1._x, obj1._y);
lineTo(obj2._x, obj2._y);

perhaps turn it into a movie clip and hitTest that?

...I'm stumped here...

API-draw: Check If Line Intersects Another Line
It been a while and I need some help on this one...

I'm making a very simple game that lets you draw a curve by hand (using lineTo to the mouse position on mousemove) but now, I need to check wether the line intersects wiith another part of the same line (e.g. a loop)

I first used an onrollover command, and that worked, but not always because the mouse moved too fast (same with hittest with mouse). Then I pre-drawed the line in another mc, used hittest on it, and if it wasn't intersecting, draw it in the real mc. But that didn't work because it used the bounds to test. I guess the best way is to use some mathematical formula, but that would mean I have to save all my coordinates in an array...

Is there another way?

TIA

Draw A Line Through A Path Line
Hail,
Does anyone knows how I draw a line through a path line?
An example I have a movieClip that is a pencil and it is moving through a path line, now I want to draw the line that the pencil draw. Confused?

How To Draw A Line
Hi !

I would like some pointers as to how to go about drawing a line. Here's what I want to happen :

I would like the user to click and drag from a point A and a line should begin and end at the point B where the user releases the mouse button.

Any help is highly appreciated.

Thanks in advance
Vinod Sharma

Draw Line
How do you draw lines between different mcs with actionscript

I am using flash 5 but I would be interested in the Mx way as well.

How To Draw Line?
Hi all,

I have a photo, say of a Printer and I draw the Outline of the Printer, with simple Sketches... just Lines.

Now, how would I create an Animation like Someone is "DRAWING" that lines that make up a Printer???

Hope you get that...
Please help me with that... I do not mean a masking effect.. If I want the Individual Lines to be drawn the way they are... how would I do that..
Thanks a lot for any help that you may provide.
Wishy

How To Draw A Line?
Hiya..
how to draw a line from one point to the other?
and how can i use masking to mask it??????

Draw A Line With Acs Between Two Mc ¿?
hi
is there anyway by acs to draw a permanent line between two mc? and what happed i those two mc are moving by easing effect?
thanks.

How To Draw Line
Hi hi,

Another question from newbie... I am learning AS3 diligently... reading books and online tutorial...

I know how to draw line :

--------------------------------------------------
var sp:Sprite = new Sprite;
addChild(sp);
sp.graphics.moveTo(400, 100);
sp.graphics.lineStyle(1, 0xff6600);
sp.graphics.lineTo(400, 150);

--------------------------------------------------

... but how to do some animation from point (400, 100) to (400, 150) in one minute time...
I know tween class and also tweener... but just don't know how to apply....

Don't laugh at me... please help !!!

Thanks in advance

Florence

Draw A Line In 1 Sec
Easy question to answer, probably.

I'd like to have a series of lines (using a loop) drawn across the screen in relation to some specific amount of time.

So I would like to draw a line across the screen like this

MoveTo(0, 50);
LineTo(30, 188);

then pause 1000 milliseconds, then another line etc., until a series of these are drawn. I have tried the usual tricks (getTimer(), etc.), but I can't get anything to work.

How To: Get A Line To Draw Itself?
I'm trying to get a line to follow the outline of a path/ object, so that it apears to draw itself.

The sort of thing you see in many contepory design/graphis sites.

I can do this by frame by frame animation, but it doesn't look smooth enough. I have been told to look at Actonscripts, but at Newbie stage this is a bit over my head.

Is there a tutorial, page or site were I can learn to do this specific animation.?

Cheers.

[AS]line Draw
Hi, what I want to do with the follow code is to draw a line between 0,0 to my mc, so when the mc moves, the single line will keep stick to this 2 point, one is 0,0, and one is my mc, but when I execute this code, it just keep duplicating the lines, so it became tones of lines when my mc moves along, how can I clear the previous lines? I only need one line stick to it when it moves but not act like it's duplicating the lines...I tried clear() but it didn't work...any other method? thank you.

Code:
onEnterFrame = function(){
mc._x += 2;
this.lineStyle(1, 0, 100);
this.moveTo(0,0);
this.lineTo(mc._x, mc._y);
}

Draw Line
Is there any formula to generate a line (like line graph) between two random points on the stage? (I want to use 'onEnterFrame' to show the line growth)

Thanks in Advance.

Draw Line
Hi All,

Is there any formula to draw a line between two points dynamically?

How Can I Draw A Line Use Mouse?
How can I draw a line use mouse?

Draw A Line From X To Y With Actionscript?
Hi there new friends!

Is it possible to add a snippet of code which draws a line from point 1 to point 2, according to variable coordinates.

I want a funcion looking like this, kinda;

drawLine(p1_X,p1_Y,p2_X,p2_Y,COLOR_GREEN, WIDTH_2px)

Or something like that.

Or can you stretch a piece of graphics between those points? It sure would be great, sorry if this is a n00b question.

Cheers and thanks in advance.

/Hoffe

How To Draw A Line With Action?
how to draw a line with action?
my way is :draw a 100 pix width ,0 pix height in a mc.
then use _root.mc._xscale=*** to cortrol the length.
but there is much problems,for example the line's thickness will be scale which look abnormal.
Is there a better way to carry out?
thank you very much in advance~~

Draw A Line Between To Points
Hi all!

i wan to draw a line between to points. After that the line should be drawn to the next point and so on. Finally I have a full shape. It should of course be done only by actionscript.

regards
schth23

Draw A Free Line
Hi all,
Here is part of my script first.

onClipEvent (enterFrame) {
b = _root.i;
// Assign drawing object counter to b
if (_root.mode == "_root.Free") {
i++;
_root.attachMovie("lin", "lin"+i, i);
}
}
.................................

onClipEvent (mouseUp) {
endX = _root._xmouse;
endY = _root._ymouse;
// Create Free Line if the drawing within the board
if (endX-startX != 0 && endY-startY != 0) {
if (_root.mode == "_root.Free") {
b++;
_root.createEmptyMovieClip(b, b);
with (_root[b]) {
lineStyle(_root.pensize, _root.SelColor, 100);
moveTo(_root["lin"+i]._x, _root["lin"+i]._y);
....
....
...
}

This is only a part of the script, but i hope this is still helpful to understand.

My problem is: I have recorded the track of free drawing, and use moreTo to draw a "REAL" line on the track. The whole "REAL" line is considered to be in a movie clip with name "b" and with depth "b", right? Ok, then once i have drawn a free line on the stage and use trace(_root[b]._x) to check its x-coordinate, the value it gives is zero no matter where i draw this line. Then i try to make this drawn line draggable, sure when it go right, _x value would increas from zero, on the other hand, it will decrease its _x value when it move left. So I am wondering why its default _x coordinate is zero? How can I make its _x coordinate is refernece to the coordinate to the stage?

(I hope that my english is clear enough for you to understand, thank you for reading)

Line Draw Question
does a line drawn with flash onto a movieclip count when you're doing hittests?

ie. I have an object travelling from left to right, and in the middle of the screen I have drawn a line on movieclip vectorblank:

vectorblank.moveTo(100, 0)
vectorblank.lineTo(100, 100)
etc..

Now, if I run hittest on the ball, will it detect a hit over the line?

Uh... Draw A Simple Line? Help Me Out Here...
How do you simply just draw a line with Actionscript, without resorting to a MC?

Seems like it should be easy...

Frankenmoro

Random Draw Line
Hi all,

I am a newbie in flash MX here and I really need help from everyone. I am currently creating a flash action script which require me to create a game which will randomly draw line when you click on the dot.

The game will be done this way.... There will be a dot in the middle of the scene and when the user click on the dot, 3 lines will spread out randomly from the dot of different length and at different directions. At the end of the line drawn, there will be a dot at the end of the line which the user can in turn click on it and 3 more lines will spread out... the rule is not to collide with any of the line and touch the border of the scene...

Can anyoune out there please help- me here with my problems as I really do not know how should I do... Thanks.

Warmest Regards
Fernado

[F8] Line Fades Out While You Draw.. Help Please (API)
Hi. I know how to draw using actionscript and all that. But how do you make it so that the line fades after a while. Like this http://www.selftitled.ca/ (drag the thing around). How do you get this effect. I'm guessing you could use arrays to do it, but I don't know anything about arrays. Can anyone explain to me how to do this?? It would be very much appreciated. Thanks,
Christian

How To Draw A Line And Erase It?
Probably a newbie question:

on a button click, i want to dynamically draw a line starting at a point, and when it reaches a certain length, have it retract again. Think of it as a fishing line. How do i do this? I can get the first part, drawing a line using "lineTo", but have no idea how to 'rewind' it so to speak. I also tried stretching a line using ._yscale or ._height, but i can not get the desired effect.

Thanks for your help!

Line Draw With Images?
hi, I'm working on a ragdoll program and i've hit a wall... my program will rotate the lines it produces using linedraw but if you draw your own images they kinda... orbit and don't spin... is there a way to linedraw but instead of lines you use png's or jpg's..or import from the library?

Draw Line On Top Of Bitmap
Hi all,

I am using flex2. I would like to draw a bitmap on canvas and then draw lines on top of bitmap. My code is attached. I found that the line is always underneath the bitmap and thus invisible. How can I fix it?

Thanks,

ff

ActionScript Code:
var image:Bitmap = ...
var bitmapHolder:UIComponent = new UIComponent();
var mySprite:Sprite = new Sprite();
mySprite.addChild(image);
bitmapHolder.addChild(mySprite);
canvas.height = image.height;
canvas.width = image.width;
canvas.addChild(bitmapHolder);

canvas.graphics.lineStyle(2, 0xff0000, 1);
canvas.graphics.moveTo(100, 100);
canvas.graphics.lineTo(200, 200);

Draw Preloader Line?
Hello

I have a preloader which does what it is supposed to do except that the line which moves from left to right while it is taking effect is not too straight (it is slightly ragged instead of being super straight).

Here is my AS:

Code:
onClipEvent (load) {
total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
loaded = _root.getBytesLoaded();
percent = int(loaded/total*100);
// text = percent+"%";
gotoAndStop(percent);
if (loaded == total) {
_root.gotoAndPlay(2);
}
}
Instead of hand-drawing the line with the pencil tool as I do now, is there a way I can use action script to ensure it is completely horizontal?

Thanks

Steve

How Do You Make A Line Appear To Draw Itself?
I want to make a border appear to be "drawing itself" around a rounded rectangle on my site, how would I go about doing it? I'm sure it's easy but for the life of me I can't figure it out. Also, I want to have an X appear to draw itself on the site to cross out some text, how would I do this? (the X I want to use is a graphic, not a vector graphic).

Thanks big time!

How To Draw A Line Over Time
I want to draw a line so that it look like it is transitioning from one point to another. Basically like it is being drawn from point A to point B. I am able to draw a line with ActionScript but I need to put a little interval in there (maybe 1/2 - 1 second) so that it looks like the line is being drawn.

Does anyone have any suggestions.

Thank you.

Dave

Can't Draw A Line Across The Stage
Trying to make a banner ad. Want a cigarette to start at left side of stage and then draw a line (ashes) across to right side of stage. Have animated cigarette from left to right using a guide motion. Don't know how to draw the line without it either disapearing or the whole line appearing from start to finish. Any suggestion? See http://1800quitnow.cancer.gov/banners.aspx for an example of what I am trying to do.

Making Line Draw Itself
I've hit a wall. I need to make a line look like it's drawing itself, as if an invisible hand is drawing on the screen. For some reason, though, I can't figure out or find how to do this.

Could anybody link me to a tutorial or tell me how I might do this? I really appreciate any input in advance.

-Jacob

How To Make A Line Draw Itself?
Hi I'm pretty new to flash and I've managed to find tutorials on pretty much everything I've needed to know so far, but just due to the words in my latest search, I can't find the answer to this Q: I want to make a line draw itself. It's a relatively complex shape I want to trace, and it even has to split at three points. So far I've done it using masks the same as the bg colour that reveal it piece by piece. I'm guessing this is a very crude way of doing this, and I'm getting a pretty poor frame rate. Is there a right way to make a line draw itsef?

If you go here and click "view" on any of the things, and look at the preloader - http://www.brendandawes.com/headshop/ - Thats the nearest thing I can find to an example of what I want to do.

How To Draw A Line In Flex?
As the Title

Dose the Flex has some Tags just like <v:line> or <v:polyline> in VML?

Random Line Draw
Okay, Hey Guys!
I am trying to get an effect like http://www.lindsaylohanmusic.com/news.asp at the header when her picture comes up, the lines draw all by themselves and then they reverse the same way.
Just so they randomly draw squiggly, loopy, big sqiggles all over the scene. I think its a cool effect.
Thanks

Draw Line Between Different Shapes
Hi ther,

i have created array of rectangles using

var myUIComponent:UIComponent = new UIComponent();
//var roundRect:Sprite = new Sprite();
myUIComponent.graphics.beginFill(0xFF8800);
myUIComponent.graphics.drawRoundRect(X,
Y,
150,
75,
50,
50);
myUIComponent.graphics.endFill();

in mxml my code is like

for (i = 1; i <= 2; i++)
{
X = 10;
for(j=1;j<=5;j++)
{
var rectsprit:UIComponent = rect.drawRect(X,Y);
//this.rawChildren.addChild(rectsprit);
panel.addChild(rectsprit);
//this.addChild(rectsprit);
X = (160*j) + 10;
}
Y = (85*i) + 10;
}

Now i need to draw line between these shapes. i mean when i click to point and then drag and draw a line to other rectangle.

Pls help me out

Thanks in advance

Draw A Moving Line From (400,100) To (500, 150)
Hi hi,

I am newbie in AS3. This forum is great. With the replies of my previous post, I have learned how to draw vertical, horizontal or with 45 degrees moving line.

But what if I want to draw a line from (400,100) to (500, 150).... I think I need to use some sine, cos or tan formula to increment ... right ?? :

-----------------------------------------------------------

var line:Sprite = new Sprite;
addChild(line);

with (line.graphics) {
clear();
moveTo(400, 100);
lineStyle(1, 0xff6600);
lineTo(500, 150);
}

var sp:Sprite = new Sprite;
addChild(sp);
var lineY:uint = 100;
var lineX:uint = 400;

function drawLine(e:Event):void {

with (sp.graphics) {
clear();
moveTo(400, 100);
lineStyle(1, 0xff6600);
lineTo(lineX++, lineY++); // I know this is not correct !!!!
}
trace("lineX = ", lineX, " lineY = ", lineY);

if ((lineY>150) || (lineX>500)) {
removeEventListener(Event.ENTER_FRAME,drawLine);
}
}

addEventListener(Event.ENTER_FRAME,drawLine);

------------------------------------------------------------------------

Please show me how to achieve this.

Thanks

Florence

Draw Dashed Line

Hello. Can i Draw a dashed line using the ActionScript 3? I just have success draw a normal line but not a dashed line. Thanks