本教程是使用Flash CS4或者Flex Builder 3里面的Actionscript3.0实现的一种非常漂亮的曲线特效！

最终效果：

下面大致介绍下制作的流程，文章的最后提供源码下载。其中的一些英文没有给大家翻译啊！呵呵

建立一个ActionScript 3.0项目或者类

如果你用的是 Flex Builder 那么你就创建一个新的ActionScript 3.0项目，命名为LineEffect。如果你使用的是Flash CS3 or CS4创建一个新的文档(ActionScript 3.0)命名为LineEffect.as 。

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.

源文件下载：/upload/tech/20091001/20091001060309_d07e70efcfab08731a97e7b91be644de.zip

评论 (0) All

登陆 还没注册？