Is there a "best" way to make it look like you are drawing a line?

[JeffreyBradley]

I am putting together technical training materials and in one portion of the project I am drawing a process flow chart. I would like to make my lines appear to be drawn from one box to the next. Also, the lines are curved lines.

Thanks,
Jeff

[blanius]

There is but it's complex

Use the drawing API

clip.lineStyle(thickness,rgb,alpha)
clip.moveTO(x,y)
clip.curveTO(cx,cy,ax,ay)

etc... Straight lines would be prett easy it's the curve ones that are hard to compute. cx and cy are the x,y of a control point and ax and ay are the anchor points of the curved line.

Another way to go would be to do something like what I did with the paint and playback thing I did.
http://bretlanius.com/flash/painter2.html

Example playback
http://bretlanius.com/flash/drawit.html
copy the code generated and play it back with :
Starting Script:
idx=0
root.moveTo(0,0)
root.erase()

black=rgb (0,0,0)
root.lineStyle (3,black,100)

coords=new Array();

//The data from painter goes here:

//*************coord[0]=0 etc...

//End of Data


Script element:
//This is the meat of the code we go through the Array Coords and process the data as follows

//First we make sure we are not at the end of the Array
if (idx<coords.length){//Not the end of the Array?
//*************************************
//if the element is over 1000 it's a moveTo so we divide it by 1000 to get true value
//since we mulitplied by 1000 in the painter movie to distinguish it as a move
if (coords[idx]>=1000){//it's a moveTo
//Move it
root.moveTo(coords[idx]/1000,coords[idx+1]/1000)

//Move the pencil too
element ("pencil").position.x=coords[idx]/1000
element ("pencil").position.y=coords[idx+1]/1000
}//End if Move


//******************************************
//if the element is -1 it's a change color and the next element is the decimal color
if (coords[idx]==-1){//it's a Change Color

root.lineStyle (1,coords[idx+1],100)//assume line width of 1 and Alpha of 100

}//end if Change Color


//******************************************
//if it's not a color or move then it must be a lineTo draw command
if (coords[idx]>-1 && coords[idx]<1000){//It's a lineTo
//move the pencil
element ("pencil").position.x=coords[idx]
element ("pencil").position.y=coords[idx+1]
//draw the line to the coordinates
root.lineTo(coords[idx],coords[idx+1]);
} //end If lineTo
//************************************************** *

//Now since we are working in pairs we increment the array counter by two to get the next pair
idx=idx+2
}//end if

//once we run out we hide the pencil
if (idx>=coords.length){
element ("pencil").hide()
// re-enable the following if you want your animation to loop
// root.erase();
// idx=0;
// root.lineStyle (1,black,100)
// root.moveTo (0,0);
}

[JeffreyBradley]

I worked a little with the algorithm's you gave me and was very impressed with the ease of scripting.

Thanks,
Jeff

[Blackspade™]

heya Bret,

i was stoked to come accross this thread as this is exactly what id like to do; play-back a simple line drawing as if it was being drawn on screen.

but ive copied your actions, and copied the coordinates, and then tested my .fla, and nothing happens at all ?

any ideas ?

thanks!! - Chris, NZ.

[blanius]

.fla?

The coords can be used in Flash MX but the code would have to be redone. I actually did it and may have some MX code around here somewhere.

[ConnELITE]

umm yeh also a WAAAYYY easier way to do that would be to get camstesia studio, I think brett uses it. It records what your doing on your computer then you can turn it into a flash, avi, ect.

[Blackspade™]

camstesia is PC only (?) im OSX.

Blanius, if you could post the MX code that would be much appreciated!!

thanks so much.

-Chris

[blanius]

function drawit(coords){

if (idx<coords.length){//Not the end of the Array?

if (coords[idx]>=1000){//it's a moveTo
trace("MOVE");
//Move it
canvas.moveTo(coords[idx]/1000,coords[idx+1]/1000)

}//End if Move

if (coords[idx]==-1){//it's a Change Color
trace("color");
canvas.lineStyle (3,coords[idx+1],100)//assume line width of 1 and Alpha of 100

}//end if Change Color

if (coords[idx]>-1 && coords[idx]<1000){//It's a lineTo
// trace("line");
//draw the line to the coordinates
canvas.lineTo(coords[idx],coords[idx+1]);
} //end If lineTo


}//end if
idx=idx+2;


}//end function

var idx=0;
var coords = new Array();

coords[0]=47000
coords[1]=60000
coords[2]=47
coords[3]=60
coords[4]=47
coords[5]=60
coords[6]=47
coords[7]=66
coords[8]=47
coords[9]=94
coords[10]=46
coords[11]=129
coords[12]=44
coords[13]=135
coords[14]=44
coords[15]=135
coords[16]=41000
coords[17]=60000
coords[18]=44
coords[19]=60
coords[20]=61
coords[21]=60
coords[22]=69
coords[23]=64
coords[24]=72
coords[25]=70
coords[26]=67
coords[27]=93
coords[28]=55
coords[29]=95
coords[30]=52
coords[31]=95
coords[32]=52
coords[33]=95
coords[34]=78
coords[35]=95
coords[36]=87
coords[37]=104
coords[38]=84
coords[39]=122
coords[40]=78
coords[41]=127
coords[42]=62
coords[43]=127
coords[44]=54
coords[45]=127
coords[46]=48
coords[47]=127
coords[48]=48
coords[49]=127
coords[50]=-1
coords[51]=41215
coords[52]=86000
coords[53]=59000
coords[54]=86
coords[55]=59
coords[56]=98
coords[57]=83
coords[58]=101
coords[59]=113
coords[60]=101
coords[61]=128
coords[62]=102
coords[63]=130
coords[64]=85000
coords[65]=64000
coords[66]=85
coords[67]=64
coords[68]=103
coords[69]=58
coords[70]=116
coords[71]=58
coords[72]=127
coords[73]=73
coords[74]=131
coords[75]=92
coords[76]=125
coords[77]=98
coords[78]=117
coords[79]=99
coords[80]=117
coords[81]=99
coords[82]=115
coords[83]=99
coords[84]=115
coords[85]=99
coords[86]=109
coords[87]=99
coords[88]=105
coords[89]=97
coords[90]=105
coords[91]=97
coords[92]=105
coords[93]=98
coords[94]=130
coords[95]=116
coords[96]=142
coords[97]=127
coords[98]=144
coords[99]=129
coords[100]=144
coords[101]=129
coords[102]=-1
coords[103]=16711680
coords[104]=163000
coords[105]=62000
coords[106]=163
coords[107]=62
coords[108]=163
coords[109]=62
coords[110]=154
coords[111]=67
coords[112]=148
coords[113]=77
coords[114]=152
coords[115]=87
coords[116]=168
coords[117]=97
coords[118]=173
coords[119]=97
coords[120]=166
coords[121]=97
coords[122]=151
coords[123]=99
coords[124]=151
coords[125]=106
coords[126]=159
coords[127]=113
coords[128]=183
coords[129]=124
coords[130]=189
coords[131]=124
coords[132]=-1
coords[133]=0
coords[134]=189000
coords[135]=65000
coords[136]=189
coords[137]=65
coords[138]=247
coords[139]=71
coords[140]=293
coords[141]=75
coords[142]=293
coords[143]=75
coords[144]=243000
coords[145]=70000
coords[146]=243
coords[147]=80
coords[148]=241
coords[149]=120
coords[150]=241
coords[151]=147
coords[152]=241
coords[153]=147
coords[154]=57000
coords[155]=141000
coords[156]=57
coords[157]=141
coords[158]=122
coords[159]=150
coords[160]=230
coords[161]=161
coords[162]=229
coords[163]=162
coords[164]=151
coords[165]=172
coords[166]=123
coords[167]=178
coords[168]=183
coords[169]=178
coords[170]=163
coords[171]=187
coords[172]=140
coords[173]=200
coords[174]=172
coords[175]=213
coords[176]=173
coords[177]=225
coords[178]=171
coords[179]=237
coords[180]=205
coords[181]=256
coords[182]=184
coords[183]=266
coords[184]=216
coords[185]=272




_root.createEmptyMovieClip ("canvas", 1);
canvas.lineStyle(3,0,100);
stop();
mytimer=setInterval(drawit,50,coords);

empty stage this code in the first and only frame.

[Blackspade™]

awesome thanks!! shall try it out now.

cheers!!

[Blackspade™]

good stuff, works peyfekt.

thanks again, i need to poke my head around the flashkit forums a bit more often.

[Blackspade™]

this might sound stupid. but how would i change the line-colour to say #00FFFF ?

[blanius]

well this code assumes the coord info is from my paint prog.. and color changes are -1 with the next being the color to change to.

[Blackspade™]

oh ok, so if entered;

coords[132]=-1
coords[133]=#00FFFF

? doesnt seem to do anything, or does this mean that using this code is limited to the colour chart using your painter prog ?

cheers
c

[blanius]

Well as it stands yes it's limited but if you hand change a color it should work just fine. However the drawing routine is looking for an integer like 41215 is the light blue in my pallette you need to convert the 00ffff to integer(65535) and it should work. You can use the RGB function to get it. The Painter program was originaly an example I did for the release of 3dfa V4 and then I got the idea to track the data and see if I could redraw it. You could make a new painter that had more options.

[Blackspade™]

i cant see where you find the interger value? I can see the RGB value, i would guess that #00FFFF is 0,255,255 ?

but this doesnt work and is ignored.

i entered your light blue 41215, & that works fine

[Blackspade™]

ive started my coords as:

coords[0]=-1
coords[1]=65535

but this draws a black line^

[Blackspade™]

ultimately Im wanting this type of drawing/writing animation... (and others)

http://webdev1.otago.ac.nz/vid/loading.html


to be playing on top of this, is say white or #00FFFF while it loads...

http://webdev1.otago.ac.nz/vid/index.html

[blanius]

Click on drawit link again!

white is 16777215

what I did was did a color to white then black so I could see it then when I pasted the code I change the black to white again and voila.

coords[0]=-1
coords[1]=16777215
coords[2]=-1
coords[3]=65535
coords[4]=30000
coords[5]=197000
coords[6]=30
coords[7]=197
coords[8]=30
coords[9]=197
coords[10]=40
coords[11]=194
coords[12]=62
coords[13]=190
coords[14]=75
coords[15]=185
coords[16]=82
coords[17]=178
coords[18]=90
coords[19]=169
coords[20]=96
coords[21]=159
coords[22]=97
coords[23]=143
coords[24]=97
coords[25]=142
coords[26]=91
coords[27]=140
coords[28]=86
coords[29]=140
coords[30]=78
coords[31]=146
coords[32]=71
coords[33]=155
coords[34]=67
coords[35]=166
coords[36]=67
coords[37]=179
coords[38]=67
coords[39]=198
coords[40]=67
coords[41]=214
coords[42]=67
coords[43]=233
coords[44]=62
coords[45]=255
coords[46]=48
coords[47]=267
coords[48]=40
coords[49]=270
coords[50]=34
coords[51]=271
coords[52]=30
coords[53]=271
coords[54]=29
coords[55]=269
coords[56]=27
coords[57]=259
coords[58]=28
coords[59]=254
coords[60]=32
coords[61]=247
coords[62]=42
coords[63]=243
coords[64]=49
coords[65]=241
coords[66]=53
coords[67]=241
coords[68]=62
coords[69]=243
coords[70]=69
coords[71]=246
coords[72]=74
coords[73]=248
coords[74]=80
coords[75]=248
coords[76]=86
coords[77]=246
coords[78]=95
coords[79]=240
coords[80]=98
coords[81]=235
coords[82]=101
coords[83]=232
coords[84]=104
coords[85]=230
coords[86]=104
coords[87]=230
coords[88]=104
coords[89]=230
coords[90]=104
coords[91]=230
coords[92]=102
coords[93]=230
coords[94]=98
coords[95]=233
coords[96]=96
coords[97]=238
coords[98]=94
coords[99]=244
coords[100]=94
coords[101]=246
coords[102]=98
coords[103]=249
coords[104]=103
coords[105]=253
coords[106]=104
coords[107]=253
coords[108]=105
coords[109]=253
coords[110]=108
coords[111]=251
coords[112]=108
coords[113]=243
coords[114]=106
coords[115]=239
coords[116]=102
coords[117]=236
coords[118]=102
coords[119]=236
coords[120]=101
coords[121]=236
coords[122]=101
coords[123]=236
coords[124]=101
coords[125]=236
coords[126]=104
coords[127]=238
coords[128]=104
coords[129]=238
coords[130]=104
coords[131]=238
coords[132]=105
coords[133]=238
coords[134]=108
coords[135]=239
coords[136]=112
coords[137]=240
coords[138]=112
coords[139]=240
coords[140]=118
coords[141]=240
coords[142]=119
coords[143]=240
coords[144]=122
coords[145]=234
coords[146]=125
coords[147]=224
coords[148]=129
coords[149]=219
coords[150]=130
coords[151]=219
coords[152]=130
coords[153]=219
coords[154]=130
coords[155]=219
coords[156]=130
coords[157]=219
coords[158]=125
coords[159]=222
coords[160]=121
coords[161]=228
coords[162]=121
coords[163]=234
coords[164]=125
coords[165]=239
coords[166]=128
coords[167]=241
coords[168]=129
coords[169]=241
coords[170]=132
coords[171]=237
coords[172]=132
coords[173]=229
coords[174]=132
coords[175]=225
coords[176]=132
coords[177]=224
coords[178]=132
coords[179]=224
coords[180]=132
coords[181]=224
coords[182]=132
coords[183]=224
coords[184]=136
coords[185]=231
coords[186]=140
coords[187]=235
coords[188]=143
coords[189]=237
coords[190]=147
coords[191]=237
coords[192]=153
coords[193]=232
coords[194]=156
coords[195]=227
coords[196]=157
coords[197]=222
coords[198]=160
coords[199]=220
coords[200]=161
coords[201]=218
coords[202]=161
coords[203]=218
coords[204]=161
coords[205]=218
coords[206]=161
coords[207]=218
coords[208]=159
coords[209]=218
coords[210]=155
coords[211]=221
coords[212]=151
coords[213]=224
coords[214]=149
coords[215]=227
coords[216]=149
coords[217]=233
coords[218]=151
coords[219]=237
coords[220]=156
coords[221]=240
coords[222]=162
coords[223]=242
coords[224]=164
coords[225]=242
coords[226]=165
coords[227]=237
coords[228]=165
coords[229]=231
coords[230]=162
coords[231]=221
coords[232]=156
coords[233]=206
coords[234]=150
coords[235]=186
coords[236]=142
coords[237]=167
coords[238]=142
coords[239]=158
coords[240]=142
coords[241]=158
coords[242]=142
coords[243]=158
coords[244]=142
coords[245]=159
coords[246]=143
coords[247]=171
coords[248]=149
coords[249]=193
coords[250]=152
coords[251]=201
coords[252]=156
coords[253]=207
coords[254]=160
coords[255]=213
coords[256]=168
coords[257]=225
coords[258]=169
coords[259]=226
coords[260]=173
coords[261]=227
coords[262]=175
coords[263]=227
coords[264]=178
coords[265]=227
coords[266]=180
coords[267]=220
coords[268]=181
coords[269]=209
coords[270]=181
coords[271]=203
coords[272]=179
coords[273]=200
coords[274]=179
coords[275]=200
coords[276]=179
coords[277]=202
coords[278]=183
coords[279]=211
coords[280]=186
coords[281]=216
coords[282]=189
coords[283]=218
coords[284]=191
coords[285]=219
coords[286]=191
coords[287]=219
coords[288]=198
coords[289]=215
coords[290]=201
coords[291]=208
coords[292]=203
coords[293]=203
coords[294]=206
coords[295]=200
coords[296]=206
coords[297]=200
coords[298]=208
coords[299]=201
coords[300]=212
coords[301]=209
coords[302]=213
coords[303]=212
coords[304]=214
coords[305]=214
coords[306]=215
coords[307]=216
coords[308]=215
coords[309]=217
coords[310]=215
coords[311]=217
coords[312]=215
coords[313]=212
coords[314]=221
coords[315]=198
coords[316]=227
coords[317]=191
coords[318]=228
coords[319]=189
coords[320]=228
coords[321]=189
coords[322]=229
coords[323]=191
coords[324]=230
coords[325]=196
coords[326]=230
coords[327]=203
coords[328]=228
coords[329]=205
coords[330]=226
coords[331]=207
coords[332]=224
coords[333]=210
coords[334]=224
coords[335]=211
coords[336]=224
coords[337]=212
coords[338]=224
coords[339]=212
coords[340]=224
coords[341]=209
coords[342]=227
coords[343]=204
coords[344]=228
coords[345]=204
coords[346]=231
coords[347]=201
coords[348]=238
coords[349]=195
coords[350]=243
coords[351]=190
coords[352]=247
coords[353]=188
coords[354]=250
coords[355]=188
coords[356]=256
coords[357]=188
coords[358]=258
coords[359]=192
coords[360]=256
coords[361]=197
coords[362]=253
coords[363]=201
coords[364]=253
coords[365]=201
coords[366]=251
coords[367]=201
coords[368]=251
coords[369]=206
coords[370]=251
coords[371]=211
coords[372]=251
coords[373]=212
coords[374]=251
coords[375]=212
coords[376]=249
coords[377]=210
coords[378]=250
coords[379]=201
coords[380]=250
coords[381]=192
coords[382]=250
coords[383]=190
coords[384]=250
coords[385]=190
coords[386]=244
coords[387]=190
coords[388]=237
coords[389]=194
coords[390]=235
coords[391]=203
coords[392]=238
coords[393]=210
coords[394]=244
coords[395]=214
coords[396]=251
coords[397]=214
coords[398]=258
coords[399]=209
coords[400]=260
coords[401]=196
coords[402]=260
coords[403]=195
coords[404]=260
coords[405]=195
coords[406]=258
coords[407]=196
coords[408]=258
coords[409]=209
coords[410]=259
coords[411]=227
coords[412]=262
coords[413]=256
coords[414]=262
coords[415]=278
coords[416]=254
coords[417]=281
coords[418]=243
coords[419]=281
coords[420]=237
coords[421]=274
coords[422]=234
coords[423]=258
coords[424]=255
coords[425]=242
coords[426]=287
coords[427]=218
coords[428]=299
coords[429]=200
coords[430]=303
coords[431]=181
coords[432]=303
coords[433]=172
coords[434]=303
coords[435]=162
coords[436]=299
coords[437]=154
coords[438]=294
coords[439]=149
coords[440]=291
coords[441]=146
coords[442]=291
coords[443]=146
coords[444]=291
coords[445]=146
coords[446]=291
coords[447]=146
coords[448]=291
coords[449]=146
coords[450]=317000
coords[451]=91000
coords[452]=315
coords[453]=102
coords[454]=316
coords[455]=133
coords[456]=318
coords[457]=146
coords[458]=320
coords[459]=151
coords[460]=320
coords[461]=153
coords[462]=320
coords[463]=153
coords[464]=320
coords[465]=153
coords[466]=320
coords[467]=154
coords[468]=320
coords[469]=156
coords[470]=323000
coords[471]=192000
coords[472]=323
coords[473]=192
coords[474]=324
coords[475]=193
coords[476]=338000
coords[477]=165000
coords[478]=339
coords[479]=165
coords[480]=340
coords[481]=166
coords[482]=358000
coords[483]=145000
coords[484]=358
coords[485]=145
coords[486]=358
coords[487]=159
coords[488]=359
coords[489]=160
coords[490]=361
coords[491]=153
coords[492]=375000
coords[493]=134000
coords[494]=375
coords[495]=134
coords[496]=375
coords[497]=145
coords[498]=375
coords[499]=146
coords[500]=384000
coords[501]=133000
coords[502]=385
coords[503]=135
coords[504]=386
coords[505]=138

[blanius]

The problem with editing the coords array is the numbers in [] cannot change or the loop will fail.

[Blackspade™]

f*%$ked if i know what im doing wrong! but i pasted your coords, and it drew blue?

any chance of you posting your original .fla for this one again;
http://bretlanius.com/flash/drawit.html
so I can compare/get my head around it !?

i also have a MC called pencil, like yours, but it doesnt show up at all ?