说说我对AS(ActionScript)的一点简单理解

    自己在学web前端开发,当然对JS(JavaScript)很是了解,自己也很痴迷炫炫的web页面,所以才开始了我的web前端之路!

    当然了,借鉴别人的代码是很有必要的,所以经常在网上看到很炫的页面,其中不止一次看到很炫的动画,大多数都有交互性的动画,至于想到怎么实现它们时,有的用自己前端知识很难实现,有的或许压根就实现不了!但是,别人怎么做出来的啊,我用调试工具调试了下,发现很多都只是一个“swf”格式的文件,swf文件我知道,flash动画的格式啊,可是它怎么实现这么强的交互能力的?最后在我的好奇心下,知道了,它们是用 ActionScript(简称AS)做的!

      ActionScript(简称AS)是由Macromedia(现已被Adobe收购)为其Flash产品开发的 ,最初是一种简单的脚本语言,现在最新版本ActionScript3.0,是一种完全的面向对象的编程语言,功能强大,类库丰富,语法类似JavaScript,多用于Flash互动性、娱乐性、实用性开发,网页制作和RIA(因特网应用程序)开发。

   在半年前了解了AS这门编程语言,现在回想起来,挺有感触的,发现新技术发展的太快,Win10也出来了,MIUI7马上也要出来了,作为一名web前端开发攻城狮,深知自己的“学的越久,会的越少”,反正要时时去接触新知识,这样你才有可能不被落下。

   一个简单的“AS3制作火苗跳动的gif动画”:

fire.as: 

package { 
import flash.geom.Matrix;//颜色渐变类库倒入
import flash.display.Sprite;//Sprite 类是基本显示列表构造块
import flash.display.GradientType;//Graphics 类包含一组可用来创建矢量形状的方法
public class mack_fire extends Sprite { //本类为火花原形类
 private var fire:Sprite;
 var myMatrix:Matrix;
 public function mack_fire(){
 fire = new Sprite();//初始化一个影片剪辑
 myMatrix = new Matrix();//需要用到的FLASH自带类,在这里这个类的作用是制作火花粒子的颜色渐变效果
 var boxWidth:int = 16;//火花粒子颜色渐变宽高设置,下面是高度
 var boxHeight:int = 16;
 var boxRotation:uint = Math.PI/2;//颜色渐变使用的变量
 var tx:int = 0;//影片剪辑的初试坐标
 var ty:int = 0;
 myMatrix.createGradientBox(boxWidth, boxHeight, boxRotation, tx, ty);//下面开始是颜色付值部分,详细请查阅createGradientBox的具体用法
 var type:String = GradientType.RADIAL;
 var myColors:Array = [0xFFFF00, 0xFFFF00];//颜色渐变,白色到白色
 var myAlphaS:Array = [1, 0];//透明度从,透明到不透明
 var myRalphaS:Array = [0, 255];
 var spreadMethod:String = "pad";
 var interp:String = "rgb";
 var focalPtRatio:Number = 0;
 fire.graphics.beginGradientFill(type, myColors,myAlphaS,myRalphaS, myMatrix, spreadMethod, interp, focalPtRatio);//这里请参考手册中关于beginGradientFill来理解
 fire.graphics.drawCircle(8, 8, 8);//制作一个圆形,半径和中心点坐标,具体可以参考drawCircle
 addChild(fire);
 }
}
} 

showfire.as:

package {
import flash.display.MovieClip;
import flash.events.EventDispatcher;
import flash.events.Event;
import flash.display.BlendMode;
import flash.filters.GlowFilter;
import flash.geom.ColorTransform;
public class fire extends MovieClip {
 private var fires:mack_fire;
 private const maxBalls:int = 60;//火花数量
 private const Mc_x:int = stage.stageHeight/2;//起火开始X坐标
 private const Mc_y:int = stage.stageHeight/2;//+stage.stageHeight/4;//起火开始Y坐标
 private const Mc_more:int = 1;//顶点,移动和透明度的顶点,1为完全不透明或没有缩放比例,AS3中以1做为顶点,AS2中是100
 private const McY:int = 1;//向上移动速度
 private var i=1;//记数变量

 private var obj_scal:Array=new Array();//缩放变量保存数组
 private var obj_fast:Array=new Array();//移动速度变量保存数组
 private var obj_action:Array=new Array();//横向移动速度更改变量

 private var obj_n:Array=new Array();//横向移动方向控制变量
 private var obj_s:Array=new Array();//横向移动速度控制变量
 private var obj_gs:Array=new Array();

 private var obj_g:Array=new Array();//颜色控制变量

 public function fire() { 
 addEventListener(Event.ENTER_FRAME,fire_mv);
 }

 public function fire_mv(event:Event):void{
 var k = Math.random();//制造随即数字,这个变量决定火花的移动距离,已经移动范围
 var scale:Number = k ? k : 1;//制造一个随即数字,这个数字要小于1,大于0
 fires = new mack_fire();//新元件创建
 fires.scaleX = fires.scaleY = fires.alpha = scale;//元件的缩放以及透明度设置,根据上面的随即数设置
 obj_g[i] = 100;
 obj_gs[i] = (1-scale+.2)*3;//定义一个新的数组元素,用处在更改元件颜色
 obj_fast[i] = Math.floor(scale*2);//纵向移动速度主变量
 obj_action[i]=(Math.random()>0.5)?1:-1;//纵向移动 方向主变量
 obj_scal[i] = 1 - obj_fast[i]/10;//对于进行中火花的缩放进行控制
 obj_n[i] = obj_s[i] = 1;
 fires.x= Mc_x;//定义火花产生的横坐标
 fires.y= Mc_y;//定义火花产生的纵坐标
 fires.blendMode = BlendMode.ADD;//这部分是纯代码火花的重点,颜色叠加。让火花和火花之间看起来更圆滑。没有这个部分,火的效果根本不成立
 fires.name = "fire"+i;//定义一个火花的名字,在下面通过getChildByName来使用。这是笨方法。记得以前有朋友不用定义也可以使用的。
 addChild(fires);
 for (var n:int = 1; n<maxBalls; ++n){
 var m=getChildByName("fire"+n);//使用上面定义的火花影片剪辑
 if(m){
 var colorInfo:ColorTransform = m.transform.colorTransform;//定义颜色控制器
 var xx=obj_gs[n]*2;
 obj_g[n] -= Math.ceil(xx);
 if(obj_g[n] < 10) obj_g[n]="00";//更改颜色,这部分就是为什么黄色的影片剪辑变成红色的理由
 var rgbs = "0xff"+obj_g[n]+"00";//转义为字符串,这部分我是用最傻的办法来做的 ,实在是不了解AS3。请高手多指导
 colorInfo.color = rgbs;
 m.transform.colorTransform = colorInfo;
 m.y -= 1-obj_s[n]+.4;//向上移动
 m.x += obj_fast[n]*obj_action[n]*obj_n[n]*obj_s[n];//进行横向移动
 m.scaleX += (obj_scal[n])/20 * obj_n[n] * obj_s[n];//进行横向缩放
 m.scaleY += (obj_scal[n])/20 * obj_n[n] * obj_s[n];//进行纵向缩放
 m.alpha += .1 *obj_n[n]*obj_s[n];//进行透明度设置
 if(m.scaleX >= Mc_more){;
 obj_n[n] = -1;//横向反方向移动
 obj_s[n] = .2;//横向移动速度减缓
 };

 if(m.alpha >= Mc_more){ m.alpha = Mc_more;}else if(m.alpha <= Math.random()*.1){ removeChildAt(m);}//如果透明度高于或者底于指定数值,进行操作
 }
 }
 if(i>=maxBalls){i=0;}
 ++i;
 }
}
} 

  上述代码,只是我学习时借鉴的代码,并非完整代码!

  再给大家提供一个AS做的“电子小仓鼠”:我的电子小仓鼠

   




  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值