Growing Lines with ActionScript 3
February 6, 2009 by: smonteIn this tutorial I will teach you how to create randomly growing lines. The code should be well enough commented, so you know what we are doing in each step.
In this tutorial I will teach you how to create randomly growing lines. The end result can be seen above. The code should be well enough commented, so you know what we are doing in each step.
Setting up the environment
1. Create a new document of size 300×300.
Moving into ActionScript 3
2. Open your actions panel and paste the following.
//We use the timer to create one new line each second var timer:Timer = new Timer(1000, 0); timer.start(); timer.addEventListener(TimerEvent.TIMER, createNewLine); //This function creates a new line function createNewLine(e:Event):void { //Create a MovieClip that will hold a single line var holder:MovieClip = new MovieClip(); //How fast the line is moving up holder.speedY= Math.random() * 4 + 2; //The frequency of the line holder.speedAngle = Math.random() - 0.5; //How wide the movement is (range) holder.range = Math.random() * 50; //Calculate a random speed to decrease the range holder.rangeSpeed = Math.random(); //Set a random line width for start holder.lineWidth = Math.random() * 20 + 10; //Set a starting angle holder.angle = 0; //Set the starting position (always start at bottom of stage) holder.xpos = Math.random() * stage.stageWidth; holder.ypos = 300; //Save the starting x position holder.centerX = holder.xpos; // Get access to the ColorTransform instance associated with the line. var colorInfo:ColorTransform = holder.transform.colorTransform; // Set a random color for the ColorTransform object. colorInfo.color = 0xffffff * Math.random(); //Apply the random color for the line holder.transform.colorTransform = colorInfo; //Move the graphics starting point to the holder's //starting position holder.graphics.moveTo(holder.xpos, holder.ypos); //Add ENTER_FRAME to animate the movement holder.addEventListener(Event.ENTER_FRAME, animateLine); //Add the holder to stage addChild(holder); } //This function is called in each frame function animateLine(e:Event):void { //Get the holder from the event var holder:MovieClip = e.target as MovieClip; //Decreate the line width holder.lineWidth -= 0.2; //Set the lineStyle to match the new width holder.graphics.lineStyle(holder.lineWidth, 0xffffff); //Make the line go up (decrease y coordinate) holder.ypos -= holder.speedY; //Decrease the range holder.range -= holder.rangeSpeed; //Calculate new x position (sin wave) holder.xpos = holder.centerX + Math.sin(holder.angle) * holder.range; //Update the angle holder.angle += holder.speedAngle; //Finally, draw the portion of the line holder.graphics.lineTo(holder.xpos, holder.ypos); //We don't animate the line if it's too thin if (holder.lineWidth < 1) { holder.removeEventListener(Event.ENTER_FRAME, animateLine); holder.addEventListener(Event.ENTER_FRAME, fadeAway); } } //This function fades away a single line function fadeAway(e:Event):void { var holder:MovieClip = e.target as MovieClip; holder.alpha -= 0.02; //Remove the line completely if the alpha is below 0 if(holder.alpha < 0) { holder.removeEventListener(Event.ENTER_FRAME, fadeAway); removeChild(holder); } }
Related tutorials:
Comments
3 Responses to “Growing Lines with ActionScript 3”Leave a Reply
You must be logged in to post a comment.
Whats the level of compatibility, of the above script with Actionscript 2.0?
How hard is it to transform it to Actionscript 2.0?
The removal doesn’t work:
ArgumentError: Error #2025: Het opgegeven DisplayObject moet een onderliggend item van de aanroeper zijn.
at flash.display::DisplayObjectContainer/removeChild()
at banner_fla::MainTimeline/fadeAway()
This will make the flash slow over a (long) period of time