dcsimg
A Flash Developer Resource Site

Page 1 of 2 12 LastLast
Results 1 to 20 of 27

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

  1. #1
    Junior Member
    Join Date
    Aug 2005
    Location
    Columbia, SC
    Posts
    2

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

    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

  2. #2
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    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);
    }
    Last edited by blanius; 08-29-2005 at 01:07 PM.

  3. #3
    Junior Member
    Join Date
    Aug 2005
    Location
    Columbia, SC
    Posts
    2

    Thanks

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

    Thanks,
    Jeff

  4. #4
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17

    cant get to work?

    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.

  5. #5
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    .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.

  6. #6
    Game Master ConnELITE's Avatar
    Join Date
    Apr 2005
    Location
    United States, DC
    Posts
    473
    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.
    BC

  7. #7
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    camstesia is PC only (?) im OSX.

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

    thanks so much.

    -Chris

  8. #8
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    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.

  9. #9
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    awesome thanks!! shall try it out now.

    cheers!!

  10. #10
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    good stuff, works peyfekt.

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

  11. #11
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    this might sound stupid. but how would i change the line-colour to say #00FFFF ?

  12. #12
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    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.

  13. #13
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    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

  14. #14
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    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.

  15. #15
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    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

  16. #16
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    ive started my coords as:

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

    but this draws a black line^

  17. #17
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    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

  18. #18
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    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
    Last edited by blanius; 09-14-2005 at 08:05 AM.

  19. #19
    KoolMoves Moderator blanius's Avatar
    Join Date
    Jul 2001
    Location
    Atlanta GA
    Posts
    5,244
    The problem with editing the coords array is the numbers in [] cannot change or the loop will fail.

  20. #20
    Junior Member
    Join Date
    Sep 2005
    Location
    Aotearoa/NZ
    Posts
    17
    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 ?

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