Growing Lines with ActionScript 3

February 6, 2009 by: smonte

In 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);
        }
}
  • Digg
  • Sphinn
  • del.icio.us
  • Mixx

Related tutorials:

  1. ActionScript 3 Drawing API
  2. Animated Spiral with ActionScript 3
  3. Creating Random Lines with Animation
  4. Movie Clip Trail Effect
  5. Creating Fireworks with ActionScript 3

Comments

3 Responses to “Growing Lines with ActionScript 3”
  1. jorge k. says:

    Whats the level of compatibility, of the above script with Actionscript 2.0?
    How hard is it to transform it to Actionscript 2.0?

    Log in to Reply
  2. Nyte says:

    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

    Log in to Reply

Leave a Reply

You must be logged in to post a comment.