Create Cool Line Effects using Actionscript 3.0 in Flash CS4 or Flex Builder 3

by Horatiu Condrea 58 views23

In this tutorial, you will learn the basics of architecting a simple Line Effect, like the one you can see bellow, either using Flash CS4 or Flex Builder 3.

We cover the basics on the simplest way, so everyone will be able to step in the scripted animation with actionscript 3.0 and create a nice visual effects like glow and blur.



Requirements

One of the following:

Download Source Files

Pre-Requisites

It would be useful to know how to use classes.

Create a ActionScript 3.0 Project or Class

If you use Flex Builder just create a new ActionScript 3.0 Project and call it LineEffect. If you use Flash CS3 or CS4 create a Flash File(ActionScript 3.0), and call it LineEffect.as . The Flash File and the class must be in the same folder. Well, this was the first step. See… It was not so hard. After that we can go and write our code

package {
	import flash.display.Sprite;

Same Imports

Again, if you use Flex Builder (Flex Builder I use too), it is not mandatory to write this step, because Flex Builder automatically imports when it sees something unknown. But if you use Flash CS3 or CS4 is required to write this step.

	import flash.display.Graphics;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.filters.BlurFilter;
	import flash.filters.DropShadowFilter;
	import flash.filters.GlowFilter;
	import flash.text.TextField;
	import flash.utils.getTimer;

       [SWF(width = "600", height = "400", frameRate = "30", backgroundColor = "#000000",    	pageTitle  = "Line Effect")]

If you are confused about this line of code:

 [SWF(width = "600", height = "400", frameRate = "30", backgroundColor = "#000000",    	pageTitle  = "Line Effect")]

Well, here we set the width, height, framerate, backgroundColor and the title of the SWF file.

Declaring Variables

To be easier for your future reference, I’ve declared variables for each color line. But before colors we need to declare a Sprite because we want to draw a line, and apply an effect to it. After that we will declare an Array that will help to animate the line. At the end we will declare the buttons with text as also line colors. The line colors consists in a BlurFilter, two GlowFilter and a DropShadowFilter. The code looks like that:

	public class LineEffect extends Sprite
	{
		private var sp:Sprite = new Sprite();
		private var points:Array = new Array();
		private var prevmouseX:Number = 0;
		private var prevmouseY:Number = 0;

		private var fireBtn:MovieClip = new MovieClip();
		private var fireTF:TextField = new TextField();

		private var skyBtn:MovieClip = new MovieClip();
		private var skyTF:TextField = new TextField();

		private var grassBtn:MovieClip = new MovieClip();
		private var grassTF:TextField = new TextField();

		private var sunBtn:MovieClip = new MovieClip();
		private var sunTF:TextField = new TextField();

		private var bf:BlurFilter = new BlurFilter(3,3,1);
		private var growFilter:GlowFilter = new GlowFilter(0xff3300, 2, 20, 10, 2, 3, true, false);
		private var growFilter_b:GlowFilter = new GlowFilter(0xfff000, 2, 16, 10, 3, 9, false, false);
		private var dropShadow:DropShadowFilter = new DropShadowFilter(0, 360, 0xC11B17, 1, 70, 70, 5, 3, false, false, false);

		private var growFilter_2:GlowFilter = new GlowFilter(0x00ffff, 2, 20, 10, 2, 3, true, false);
		private var growFilter_b_2:GlowFilter = new GlowFilter(0x00ffff, 2, 16, 10, 3, 9, false, false);
		private var dropShadow_2:DropShadowFilter = new DropShadowFilter(0, 360, 0x000fff, 1, 70, 70, 5, 3, false, false, false);

		private var growFilter_3:GlowFilter = new GlowFilter(0x4AA02C, 2, 20, 10, 2, 3, true, false);
		private var growFilter_b_3:GlowFilter = new GlowFilter(0x4AA02C, 2, 16, 10, 3, 9, false, false);
		private var dropShadow_3:DropShadowFilter = new DropShadowFilter(0, 360, 0x4AA02C, 1, 70, 70, 5, 3, false, false, false);

		private var growFilter_4:GlowFilter = new GlowFilter(0xFDD017, 2, 20, 10, 2, 3, true, false);
		private var growFilter_b_4:GlowFilter = new GlowFilter(0xFDD017, 2, 16, 10, 3, 9, false, false);
		private var dropShadow_4:DropShadowFilter = new DropShadowFilter(0, 360, 0xFDD017, 1, 70, 70, 5, 3, false, false, false);

What events we have here?

First we add the sp(Sprite) to the stage, then we add an Enter_Frame event to our Sprite, draw each button and create a Click event for each one in order to change from color and effect.

		public function LineEffect()
		{

			this.addChild(sp);
			this.addEventListener(Event.ENTER_FRAME, onEnter);

			drawFireBtn(fireBtn);
			drawSkyBtn(skyBtn);
			drawGrassBtn(grassBtn);
			drawSunBtn(sunBtn);

			fireBtn.addEventListener(MouseEvent.CLICK, makeFire);
			skyBtn.addEventListener(MouseEvent.CLICK, makeSky);
			grassBtn.addEventListener(MouseEvent.CLICK,makeGrass);
			sunBtn.addEventListener(MouseEvent.CLICK, makeSun);

			sp.filters = [bf, dropShadow];
		}
        }
}

Enter Frame Function

The following Enter Frame function will track the mouse coordinates and show the effect on the stage .

		private function onEnter(e:Event):void
		{
			var line:Graphics = sp.graphics;
			line.clear();
			line.lineStyle(2, 0xffffff);
			line.moveTo(mouseX, mouseY);

            var dx:Number = this.mouseX - prevmouseX;
			var vx:Number = dx ? dx : Math.random() * randSet(-1, 1);
			var dy:Number = this.mouseY - prevmouseY;
			var vy:Number = dy ? dy : Math.random() * randSet(-1, 1);
			var pLen:Number = points.push({x:this.mouseX, y:this.mouseY, vx:vx / 20, vy:vy / 20, life:getTimer()});

			for (var i:Number = 0; i < pLen; i++)
			{
				if (!points[i])
				{
					continue
				}
				if (getTimer() - points[i].life > 1000)
				{
					points.splice(i--, 1)
				}
				else
				{
					if (i!=0 && points[i])
					{
						points[i].x += points[i].vx;
						points[i].y += points[i].vy;
						var cx:Number = points[i - 1].x;
						var cy:Number = points[i - 1].y;
						line.curveTo(cx, cy, (points[i].x + cx) * 0.5, (points[i].y + cy) * 0.5 );
					}
					else
					{
						line.moveTo(points[i].x, points[i].y);
					}
				}
			}

			prevmouseX = this.mouseX;
			prevmouseY = this.mouseY;
                }
                private function randSet(p_min:Number,p_max:Number):Number
		{
			return Math.floor(Math.random() * 2);
		}
        }
}

Draw the buttons and make the click events

Now we write a function for each button that applies the colors and effects we have created in the beginning. On each function we insert the text buttons into the stage by drawing it with actionscript 3.0 using the drawRect class and we choose the rectangle fill color. Then we create a second function inside this one which calls the MouseEvent we have mentioned above and will start the effect.

private function drawFireBtn(obj:MovieClip):void
		{
			with(obj.graphics)
			{
				beginFill(0x0000ff,0);
			    drawRect(0,0,20,20);
			    endFill();
			}
			fireTF.text = "Fire"
			fireTF.textColor = 0x666666;
			fireTF.mouseEnabled = false;
			fireTF.selectable = false;

			this.addChild(obj);
			obj.buttonMode = true;
			obj.addChild(fireTF);
			obj.x = 20;

			obj.y = 380;
		}

		private function makeFire(E:MouseEvent):void
		{
			sp.filters = [bf,growFilter,growFilter_b,dropShadow];

		}

		private function drawSkyBtn(obj:MovieClip):void
		{
			with(obj.graphics)
			{
				beginFill(0x0000ff,0);
			    drawRect(0,0,20,20);
			    endFill();
			}
			skyTF.text = "Sky"
			skyTF.textColor = 0x666666;
			skyTF.mouseEnabled = false;
			skyTF.selectable = false;

			this.addChild(obj);
			obj.buttonMode = true;
			obj.addChild(skyTF);
			obj.x = 70;
			obj.y = 380;
		}

		private function makeSky(e:MouseEvent):void
		{
			sp.filters = [bf,growFilter_2,growFilter_b_2,dropShadow_2];
		}

		private function drawGrassBtn(obj:MovieClip):void
		{
			with(obj.graphics)
			{
				beginFill(0x0000ff,0);
			    drawRect(0,0,25,20);
			    endFill();
			}
			grassTF.text = "Grass"
			grassTF.textColor = 0x666666;
			grassTF.mouseEnabled = false;
			grassTF.selectable = false;

			this.addChild(obj);
			obj.buttonMode = true;
			obj.addChild(grassTF);
			obj.x = 120;
			obj.y = 380;
		}

		private function makeGrass(e:MouseEvent):void
		{
			sp.filters = [bf,growFilter_3,growFilter_b_3,dropShadow_3];
		}

		private function drawSunBtn(obj:MovieClip):void
		{
			with(obj.graphics)
			{
				beginFill(0x0000ff,0);
			    drawRect(0,0,20,20);
			    endFill();
			}
			sunTF.text = "Sun"
			sunTF.textColor = 0x666666;
			sunTF.mouseEnabled = false;
			sunTF.selectable = false;

			this.addChild(obj);
			obj.buttonMode = true;
			obj.addChild(sunTF);
			obj.x = 170;
			obj.y = 380;
		}

		private function makeSun(e:MouseEvent):void
		{
			sp.filters = [bf,growFilter_4,growFilter_b_4,dropShadow_4];
		}
	}
}

This was the Line Effect tutorial. I hope it will be usefull for many of you. Now you can try to create your own line effects and drop a comment mentioning the url of your experiments. We are always looking for the results of our tutorials.


Comments (23)

  1. Great job there. 😉 Keep it up.

  2. very cool tutorial, this will make for some great spiking – thanks!

  3. Now that, is very cool. I like how you can change colors and keep moving it around.

  4. Now THAT’S what I like to see. Simple, minimalistic but beautiful stuff. Well done!

  5. Bravo !!!!!
    Well done and keep on .

    Greetings from Athens.

  6. Thank you all, I’m glad you enjoyed this tut.

  7. Hi I was wondering if it is possible to make a MC called NUll which cannot be seen, and the particles will follow NUll, and on the stage u animate null so it looks like the particle is moving itself, thank you

  8. Hi
    Thanks for this informative tutorial. I was just wondering, when we move the mouse a lot, or in other words, when the mouse cursor following line is a bit more long, the smoothness from the animation is kinda lost. Can you give some tips regarding how to make this animation a little more smoother??
    Thanks in advance.

  9. Really cool effect, can I use it on my site ?

  10. @timothyinspa

    You can try, and see if it works…

    @Shwetabh

    Well,if I understood well what you want to do, in the enter frame function you can see that line:

    if (getTimer() – points[i].life > 1000)

    Put 500 instead of 1000 or other value.

    @Chetan Sachdev

    I do not know what to say, I think you can put it, but put a link…

  11. Changed the parameter to 500 as per your instruction.
    The animation has become somewhat smoother than before, but still when too much of movement of the cursor is there, smoothness is somewhat lost again, but thanks, gonna experiment with it. Thanks for the tutorial.
    Gonna keep an eye on more tut from you. 🙂

  12. hi.. i’m from indonesia,
    emm
    i still dunno how to import those files to my flash?
    i’m currently using Adobe Flash CS3
    need help here
    thanx

  13. Really cool effect!But it seems a bit difficult to me.

  14. Another great tutorial!

  15. @ANdree

    You need to have one of the following:

    Adobe Flash CS4
    Flex Builder 3

  16. Anyone can share this source in AS2 ? is possible? Im making the new site with AS2 and i liked put this effect on mouse.

  17. how to do make use this efect in another swf , please ?

  18. i am a web developer fresher now beginner in flash actionscript can you post yor work to my mail this work is so good can we stop the drawing when the mouse in up

  19. @ prasanth: Yes stoping the drawing while the mouse is up is actually quite simple, implent a:

    private var drawing:Boolean = false;

    stage.addEventListener(MouseEvent.MOUSE_DOWN, MouseDown);
    stage.addEventListener(MouseEvent.MOUSE_UP, MouseUp);

    private function MouseDown(e:MouseEvent)
    {
    drawing = true;
    }
    private function MouseUp(e:MouseEvent)
    {
    drawing = false;
    }

    to the public class, and add:

    if (drawing == true)
    {

    BEFORE the onEnter function.
    note, im not

    anyway, what i would like to ask is how do i turn off the “sliding” of the line after i stop moving the mouse?

    im asking this as i have been trying to find out wether it is implented is the dropshadow or the blurfilter (as these are the only ones that are used on the gray line in the start).

  20. Hey..!Its Really Nice…Thank U so Much for this Script..

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>