当前位置: 代码迷 >> Web前端 >> ActionScript 3.0基础提高――下篇
  详细解决方案

ActionScript 3.0基础提高――下篇

热度:628   发布时间:2012-08-29 08:40:14.0
ActionScript 3.0基础提高――上篇
我一直非常重视ActionScript 3.0的基础。也许是觉得自己的基础不够“过硬”的缘故吧,在看过了一些ActionScript的图书后,又回过头来看《Foundation ActionScript 3.0 for Flash and Flex》,从中得到不少收获,愿同各位AS3开发者朋友们分享。
以下仅仅是我的一些读书笔记和思考,欢迎各位评论;讨论中共同进步!


原数组:var array:Array = [John, Bill, Jackson, Blund, Frank]
-----------删除数组中的元素的方法--------
方法1:
delete array[1];
trace(array);
结果:
John, Jackson, Blund, Frank

方法2:
array.splice(1,1); //从下标为1的位置,删除1个元素
trace(array);
结果:同上

------------for循环---------------
循环1:
for(var element: String in object){
    trace(object[element]);
}
循环2:
for each(var element: Object in object){
    trace(element);
}

-----------多个参数的函数------------
function sum(...operands):Number{
   var numOperands:uint = operands.length;
   var total:Number = 0;
   for(var i:unit = 0; i < numOperands; i++){
      total += operands[i];
   }
    return total;
}

----------拷贝对象(真正的拷贝)--------------
var array1:Array = new Array("one", "two", "three");
var array2:Array = array1.slice();

---------关于构造函数------------
如果B继承A,即B为A的子类,A为父类。在写B的构造函数的时候务必在第一行加上super(...),否则B将默认调用A的无参数构造函数。

--------显示列表深度-----------
第一个加到舞台上的图形的Index为0,位于一切物体的最下边;Index的值越高表示物体在越前的位置上显示。

---------------------------------------------------
---------------------------------------------------
----------Blend Mode(混合)-----------------
这个名词用在Flash中,我还真不知道。后得知,在Flash CS4中的属性框中的“混合”中可以设定各种混合模式,不过被设定模式的组件必须是Movieclip才可以。
代码实例:
package {
    import flash.display.Sprite;
    import flash.display.BlendMode;
    import flash.display.Graphics;
   
    public class Blend extends Sprite{

        private var rect1:Sprite;
        private var rect2:Sprite;
        private var rect3:Sprite;
       
        public function Blend() {
            rect1 = new Sprite();
            rect2 = new Sprite();
            rect3 = new Sprite();
           
            var g1:Graphics = rect1.graphics;
            g1.beginFill(0xff200a);
            g1.drawRect(0,0,100,100);
           
            var g2:Graphics = rect2.graphics;
            g2.beginFill(0xf343ea);
            g2.drawRect(50,20,100,100);
           
            var g3:Graphics = rect3.graphics;
            g3.beginFill(0xe2200a);
            g3.drawRect(30,50,100,100);
           
            addChild(rect1);
            addChild(rect2);
            addChild(rect3);
           
            trace("rect1: "+getChildIndex(rect1));
            trace("rect1: "+getChildIndex(rect2));
            trace("rect1: "+getChildIndex(rect3));
           
            rect2.blendMode = BlendMode.INVERT;
        }
    }
   
}
结果:以下就是所谓的Blend,即混合效果中的一个。


----------Fileter(滤镜)------------------------
实例代码:
package {
    import flash.display.Sprite;
    import flash.display.Graphics;
    import flash.filters.*;
   
    public class Blend extends Sprite{

        private var rect1:Sprite;
        private var rect2:Sprite;
        private var rect3:Sprite;
       
        public function Blend() {
            rect1 = new Sprite();
            rect2 = new Sprite();
            rect3 = new Sprite();
           
            var g1:Graphics = rect1.graphics;
            g1.beginFill(0xaf89ee);
            g1.drawRect(0,0,100,100);
           
            var g2:Graphics = rect2.graphics;
            g2.beginFill(0xaf89ee);
            g2.drawRect(50,20,100,100);           
           
            addChild(rect1);
            addChild(rect2);
           
            trace("rect1: "+getChildIndex(rect1));
            trace("rect1: "+getChildIndex(rect2));
           
            var gfilter:GlowFilter = new GlowFilter(0x000000,1,8,8);
            rect2.filters = [gfilter];
        }   
    }   
}
结果:使用的GlowFilter滤镜效果使得第二个方块发黑光。


删除滤镜:
filters = square.filters;
filters.pop();
square.filters = filters;

-----------Flash 高级滤镜--------------
1. ConvolutionFilter(浮雕滤镜)
2. DisplacementMapFilter(哈哈镜效果)

----------关于Stage------------------
1. 全屏的方法,发布HTML中设置“仅Flash,允许全屏”,并在代码中嵌入this.stage.displayState=StageDisplayState.FULL_SCREEN;
2. Stage的ScaleMode的选项。
3. Stage的StageAlighn的选项。

---------关于MotionBase, Motion, AnimatorFacotry类------------
这几个类我没见过,不过看过本书和研究后,发现可以通过这些类在代码中实现帧动画。

代码示例如下,其中的_ball是Flash舞台上的一个组件实例,arrX和arrY指定了_ball对象的运动路径(分别对应x和y)。数组中每一个(x,y)表示一帧中_ball在舞台上的位置。
代码示例1:
import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import fl.motion.Motion;


var mb:MotionBase = new Motion();
mb.duration=24;
mb.overrideTargetTransform();
var arrX:Array = new Array();
var arrY:Array = new Array();
for(var i:int = 0; i < 240; i++){
    arrX.push(i);
}
for(var j:int = 0; j < 240; j++){
    arrY.push(0);
}
mb.addPropertyArray("x",arrX);
mb.addPropertyArray("y",arrY);

var afb:AnimatorFactory=new AnimatorFactory(mb);
afb.addTarget(_ball);

其实还可以不用数组,如果是动画设计师已经在Flash中做好了的动画,可以通过以下方式获取其路径。
首先在时间轴选中要导出的一段帧,然后选择Flash CS4中菜单中的“命令”->"导出到XML"。最后你是通过加载外部xml也好,还是直接复制XML内容也好,直接用XML内容初始化Motion。效果是一样的。代码示例2用的是XML内容初始化Motion.
代码示例2:
import fl.motion.AnimatorFactory;
import fl.motion.MotionBase;
import fl.motion.Motion;

var xml:XML = <Motion duration="46" xmlns="fl.motion.*" xmlns:geom="flash.geom.*" xmlns:filters="flash.filters.*">
    <source>
        <Source frameRate="24" x="24" y="25" scaleX="1" scaleY="1" rotation="0" elementType="graphic" symbolName="补间 5">
            <dimensions>
                <geom:Rectangle left="-24" top="-24" width="48" height="48"/>
            </dimensions>
            <transformationPoint>
                <geom:Point x="0.5" y="0.5"/>
            </transformationPoint>
        </Source>
    </source>

    <Keyframe index="0" tweenSnap="true" tweenSync="true">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="7" tweenSnap="true" tweenSync="true" firstFrame="7" x="77.5" y="135">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="11" tweenSnap="true" tweenSync="true" firstFrame="11" x="192.6" y="181.55">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="14" tweenSync="true" firstFrame="14" x="78.95" y="215"/>

    <Keyframe index="16" tweenSnap="true" tweenSync="true" firstFrame="16" x="23.950000000000003" y="247">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="23" tweenSync="true" firstFrame="23" x="49.95" y="58"/>

    <Keyframe index="26" tweenSnap="true" tweenSync="true" firstFrame="26" x="109" y="23">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="33" tweenSync="true" firstFrame="33" x="247" y="-1"/>

    <Keyframe index="35" tweenSnap="true" tweenSync="true" firstFrame="35" x="295.95" y="8">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="41" tweenSnap="true" tweenSync="true" firstFrame="41" x="356.9" y="111">
        <tweens>
            <SimpleEase ease="0"/>
        </tweens>
    </Keyframe>

    <Keyframe index="45" tweenSync="true" firstFrame="45" x="262.95" y="222"/>
</Motion>;
var mb:MotionBase = new Motion(xml);
mb.duration=24;
mb.overrideTargetTransform();
var afb:AnimatorFactory=new AnimatorFactory(mb);
afb.addTarget(_ball);
  相关解决方案