Simple Line Drawing for Beginners

[InAFlash]

Thanks to Jack Doyle, GreenSock is making a lot of weekend Flash addicts like me look pretty amazing.

 

I looked in this forum and on the web for some really ultra simple solutions for drawing lines in a progressive sequence. I may have missed something, but most were more (code) than I wanted to take on. They were good and they are probably fantastic when you get some serious code writing behind you... but I was looking for something a newbie could do right out of the box. Couldn't find simple.

 

This simple use of the scaleX and scaleY properties has been great--worked well for me, and I did not see it used elsewhere. So, I thought I'd share it and welcome your comments.

For the advanced group, you are welcome to chuckle at its simplicity, but I believe others will see it as an ultra-simple application of GS Tweening and leverage the example for greater, more elaborate use.

 

Three steps:

1. draw a set of lines on the stage: change each line to a movieclip instance & name it.

2. With ActionScript, shrink the scaleX of horizontal lines and scaleY on vertical lines to zero.

3. With ActionScript, expand your lines to their full scale (1) sequentially with TweenLite

 

import gs.*;
import gs.easing.*;

//Use your line tool to draw a box on the stage. 
//Use F8, "Convert to MovieClip" to create 4 mc instances. Name them-top, right, bottom, left .

var as_val:Number = 1.5;//as_val is abbreviation for adjust speed value.
//I'm using as_val to adjust the delay also-this allows them to draw one after the next, not all at once. 
//Below, we'll preset  the scaleX and scaleY to zero
//   initiate  scaleX property to zero on top and bottom of  your box
top.scaleX = bottom.scaleX = 0;
//   initiate  scaleY property to zero on top and bottom of  your box
right.scaleY =left.scaleY = 0;

TweenLite.to(top, as_val,  {delay: 1*as_val, scaleX:1});
TweenLite.to(right, as_val,  {delay: 2*as_val, scaleY:1});
TweenLite.to(bottom, as_val,  {delay: 3*as_val, scaleX:1});
TweenLite.to(left, as_val,  {delay: 4*as_val, scaleY:1});

 

GreenSock is about simplicity and the final result here would not be possible without a great tweening engine (thanks again Jack) so I felt it would be appropriate to post so others would wind up here for a SIMPLE solution.

Thanks-

Victor

[GreenSock]

Thanks for sharing, Victor.

 

For those who get errors or are confused by the "import gs.*;" stuff, that's the old package structure (pre-v11). It's now "import com.greensock.*;"

[stevenp]

Thanks for this ...

 

I'm trying this with ActionScript 2, so I changed it to:

 

//////////////////////

// http://forums.greens...-for-beginners/

import com.greensock.*;

//import com.greensock.core.*;

import com.greensock.easing.*;

 

 

//Use your line tool to draw a box on the stage.

//Use F8, "Convert to MovieClip" to create 4 mc instances. Name them-top, right, bottom, left .

// My _instances_ are:

// top

// right

// bottom

// left

 

var as_val:Number = 1.5;//as_val is abbreviation for adjust speed value.

trace(as_val);

//I'm using as_val to adjust the delay also-this allows them to draw one after the next, not all at once.

//Below, we'll preset the _xscale and _yscale to zero

// initiate _xscale property to zero on top and bottom of your box

top._xscale = bottom._xscale = 0;

trace(top._xscale);

// initiate _yscale property to zero on top and bottom of your box

right._yscale =left._yscale = 0;

trace(right._yscale);

 

TweenLite.to(top, as_val, {delay: 1*as_val, _xscale:1});

trace(1*as_val);

TweenLite.to(right, as_val, {delay: 2*as_val, _yscale:1});

trace(2*as_val);

TweenLite.to(bottom, as_val, {delay: 3*as_val, _xscale:1});

trace(3*as_val);

TweenLite.to(left, as_val, {delay: 4*as_val, _yscale:1});

trace(4*as_val);

/////////////////////

 

But it doesn't do anything. the lines don't ever "draw". All the variables trace out as expected.

[stevenp]

Yeah ... I feel like an idiot. I should have changed my "_xscale" and "_yscale" values from "1" to "100":

 

/////////////////////

TweenLite.to(top, as_val, {delay: 1*as_val, _xscale:100});

TweenLite.to(right, as_val, {delay: 2*as_val, _yscale:100});

TweenLite.to(bottom, as_val, {delay: 3*as_val, _xscale:100});

TweenLite.to(left, as_val, {delay: 4*as_val, _yscale:100});

/////////////////////

 

I'm definitely at a disadvantage using AS2.

 

Sorry for bumping up an old thread for help ... but this was actually good for me and maybe for it will be for someone else ...

[GreenSock]

I think you meant to use 100 instead of 1, right? Remember, in AS2, _xscale/_yscale are 100-based whereas in AS3, scaleX/scaleY are 1-based.

[stevenp]

"I think you meant to use 100 instead of 1, right? Remember, in AS2, _xscale/_yscale are 100-based whereas in AS3, scaleX/scaleY are 1-based. " - greensock

 

Thank you I actually - - figured that out for myself. I had transposed scaleX to _xscale, but not the values.

 

With a little fiddling, I've learned how to "draw" a line in any direction simply by using the registration point as the originating point ... this is very, very cool. I have a project where I used masks and lines to draw an international route with waystops on a global map - not unlike the introduction to "Casablanca" or the route displayed in "Indiana Jones Raiders of The Lost Ark" ... I'm sure your tools will significantly reduce the size and dramatically increase the quality of that movie.

 

This is an awesome set of tools, sir.