How to Draw an Animated Line in Flash

Line animation is one of the first things to learn for creating cartoon animations and action-packed video games. Line animation skills will give you the basics you need to animate stick figures and develop more advanced cartoon characters. Animating lines so that they shoot across the screen will also give you the needed skill to make virtual weapons. You can draw animated lines with Flash's ActionScript 3.0 (AS3) programming language. After you draw an animated line with AS3, you can then animate it any way you like with AS3's x and y graphic properties.

Things You'll Need

  • Adobe Flash Professional (Versions CS3, CS4, CS5)
Show More

Instructions

    • 1

      Start the Flash program. Click "New" from the File menu on the main Flash menu bar. Click the file type "Flash File(ActionScript 3.0)" from the New Document dialog box that appears. Click the "OK" button to close the dialog box.

    • 2

      Select the "Actions" option from the Window menu on the main Flash menu bar to open the Actions editor. Position your mouse cursor on the first line of the Actions editor. Click your mouse button and type in the following code to draw a horizontal line as a MovieClip object that has a width of 6 pixels and spans the distance between points (50,100) and (100,100) on the Flash stage:

      var myLine:MovieClip = new MovieClip();

      myLine.graphics.lineStyle(6);

      myLine.graphics.moveTo(50,100)

      myLine.graphics.lineTo(100,100);

      addChild(myLine);

    • 3

      Type the following code, starting at the next line in the Actions editor to declare a variable that will increment up for each animated frame that is played and control where the animated line will be drawn on the next animated frame:

      var i:int = 0;

    • 4

      Type the following code, starting at the next line in the Actions editor to instruct Flash: to move the line 50 pixels to the right every time the animation enters a new frame; to move back to the left-hand side of the stage and 50 pixels down after the line has moved more than 300 pixels to the right; to move to the left-hand side of the stage at a position 100 pixels from the top of the stage after it has moved down more than 300 pixels:

      stage.addEventListener(Event.ENTER_FRAME, animateLine);

      function animateLine(e:Event):void

      {

      i = i + 5;

      myLine.x = i;

      if (i>300) {i=0; myLine.x = 0; myLine.y = myLine.y + 50}

      if(myLine.y > 300) {myLine.y=100};

      }

    • 5

      Copy and paste the following code into the Actions editor to ensure that the animated line program runs error free:

      var myLine:MovieClip = new MovieClip();

      myLine.graphics.lineStyle(6);

      myLine.graphics.moveTo(50,100)

      myLine.graphics.lineTo(100,100);

      addChild(myLine);

      var i:int = 0;

      stage.addEventListener(Event.ENTER_FRAME, animateLine);

      function animateLine(e:Event):void

      {

      i = i + 5;

      myLine.x = i;

      if (i>300) {i=0; myLine.x = 0; myLine.y = myLine.y + 50}

      if(myLine.y > 300) {myLine.y=100};

      }

    • 6

      Click the "TestMovie" option in the Control menu on the main Flash menu bar to play the movie. Observe that the line moves from left to right across the stage and then repeats this pattern but starting at a position 50 pixels downward.

Learnify Hub © www.0685.com All Rights Reserved