Create Cool Line Effects using Actionscript 3.0 in Flash CS4 or Flex Builder 3
来源:互联网 发布:嵌入式linux启动过程 编辑:程序博客网 时间:2024/05/22 09:49
Create Cool Line Effects using Actionscript 3.0 in Flash CS4 or Flex Builder 3
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:
- Adobe Flash CS4 Try or Buy
- Flex Builder 3 Try or Buy
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.
- Create Cool Line Effects using Actionscript 3.0 in Flash CS4 or Flex Builder 3
- Create real water effects with Flash CS4 & ActionScript 3.0
- using flex Webservice component in flash cs4
- The Flash Anthology: Cool Effects and Practical ActionScript
- Using ActionScript in Flex
- 如何使Flex Builder 3与flash cs4共同工作
- flash cs4 和 flex builder 联合开发
- Really cool effects in WPF
- 【转】Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系
- Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系
- Actionscript,AS3,MXML,Flex,Flex Builder,Flash Builder,Flash,AIR,Flash Player之关系
- ACTIONSCRIPT,AS3,MXML,FLEX,FLEX BUILDER,FLASH BUILDER,FLASH,AIR,FLASH PLAYER之关系
- Flash 书籍资料推荐:Foundation ActionScript 3.0 Image Effects
- CS3 / CS4 / Flex Builder 3 的帮助文件存放路径
- Flex + Blazeds "HelloWorld" in Flash builder 4.5
- Configuring ${DOCUMENTS} variable in Flash (Flex) Builder
- [FLASH]Understanding ActionScript 3 debugging in Flash
- 结合Flex Builder和Flash CS4制作一个中国地图的应用
- java.lang.UnsupportedOperationException: createRequestComponentDeployer
- 历年奥斯卡获奖影片(1927—2015)
- 根文件系统实验
- Android应用程序开发教程 - 实现一个登录对话框
- 眼中的世界
- Create Cool Line Effects using Actionscript 3.0 in Flash CS4 or Flex Builder 3
- 如何实现dorado的datatable整列单选效果
- 转)DB2 未发出启动数据库管理器的命令的几个问题
- Hard to Believe, but True!
- C#清除页面缓存
- 怎样才能生活的愉快——学会与人沟通
- 中国电子商务10年嬗变路线图
- JSP 文件 下载 代码 (不使用 jsp smart upload 组件) 解决中文名 问题
- sqlserver 中文簡繁體保存時注意的問題,無法解析 equal to 動作的定序衝突,亂碼
Mon, May 18, 2009
Effects, Flash, Flex, Tutorials