<![CDATA[柯南的部落格]]>http://www.conanlwl.net/zh-cnmyBlog v1.2.1Sun, 05 Sep 2010 00:07:42 GMT60<![CDATA[现场演唱歌曲《李雷和韩梅梅》]]>Fri, 06 Nov 2009 19:11:22 GMT昔日英语课本上的那些主角到底何去何从,让我们一起翻开那昔日的英语课本吧

]]><![CDATA[拼图设计思路与源码二[自动吸附篇]]]>Wed, 28 Oct 2009 18:14:18 GMT通过上一篇的画图篇,我们就可以使拼图在游戏舞台上随意的铺放了,但是到目前为止还不会吸附,也就是当两张图案正确的相邻两个拼图拼在一起的时候不会吸在一起.

我们先来回顾一下上一节中所定义的碎片类Piece

package net.conanlwl
{
    import flash.display.Sprite;
   
    public class Piece extends Sprite
    {
        private var m_row:uint;
        private var m_col:uint;
       
        public var Up:Object;
        public var Right:Object;
        public var Buttom:Object;
        public var Left:Object;
       
        private var m_virtualX:Number;
        private var m_virtualY:Number;       
       
        public function Piece(_row:uint,_col:uint,_virtualX:Number,_virtualY:Number)
        {
            this.m_row = _row;
            this.m_col = _col;
            m_virtualX = _virtualX;
            m_virtualY = _virtualY;
        }
       
        public function get virtualX():Number{
            return m_virtualX;
        }
       
        public function get virtualY():Number{
            return m_virtualY;
        }
       
        public function get Row():uint{
            return m_row;
        }
        public function get Col():uint{
            return m_col;
        }
    }
}

其中的virtualX,virtualY,Row,Col都是只读的,也即是说,在声明之后,这四个值就是固定的了.

我们给一张拼好的图的每个小碎片做一个编号.如图1: 


图1

那么A的Row与Col就为0,0;相对拼图的左上角的坐标virtualX=0,virtualY=0
再L的Row与Col就为2,1;相对拼图的左上角的坐标就为virtualX=1*m_pieceW,virtualY=2*m_pieceH
再M的Row与Col就为2,2;相对拼图的左上角的坐标就为virtualX=2*m_pieceW,virtualY=2*m_pieceH

所以,当我们图中的碎片打乱以后,这些数值都是不会变的.我们在吸附判断中,先不考虑旋转以后的吸附判断.假设所有的图片都是正放的,都是0度. 


图2

当我们拿着L靠近M并产生碰撞时(如图2),我们要如何判断他们是正确的相对位置呢?

使用他们的行列差值来判断?也就是Row相等,且L的Col等于M的Col-1?当然,这在两上碎片都是一小块的时候,这种方法是成立的,但如果当我们L与M拼好,再拿个N或者K来拼时,就未必能成了.

所以我们采用坐标差值法来比较.L与M在舞台中都有属于自己的坐标.分别设为L.x,L.y与M.x,M.y,当我们移动L或M时,他们的坐标就相应的变化.但L.virtualX,L.virtualY与M.virtualX,M.virtualY是不变的.

因此,我们认为,当L与M的坐标差与他们的绝对虚拟坐标差相等或小于一个误差值时,吸附成立.

var inaccuracy:Number = 8; //吸附的误差值
if(Math.abs((L.x - M.x) - (L.virtualX - M.virtualX)) <=inaccuracy ){//当前X坐标的差值,与他们的虚坐标的差值接近时
     if(Math.abs((L.y - M.y) - (L.virtualY - M.virtualY)) <=inaccuracy){    
           //吸附条件成立
     }
}

当我们用鼠标拿着L与M碰撞并吸附条件成立时,就将L从舞台转移到M里面去,也即M.addChild(L),并修正L的坐标与M能够准确拼合.至此L与M成为一个整体M,如图3


图3

注意,因为我们将L移到M里面时,只修正L的坐标,所以添加后的大M碎片的坐标原点还是跟原来一样,仍然如图3中箭头所指的点.所以当我们把箭头所指的点移到舞台的0,0点的时候,大M碎片的坐标才是0,0

 


图4

接差我们拿着H与M靠近发生碰撞并判断吸附条件成立时(注意M.x,M.y指的是哪个点),H又加入到了M之中.相反,如果我们拿着大M与H靠近发生碰撞并吸附条件成立时,M将先自己里面的L拿出来搬到H里面去,最后再自己搬到H里面去,也即先H.addChild(L)再H.addChild(M),此时大碎片即为H

接着,我们先把大H放一边,将R与W拼一起,成为一个大W.如图5


图5

然后再拿着大H与大W靠近,如图6


图6

仍然按照下面的公式判断吸附条件,注意H.x,H.y与W.x,W.y指的是哪两个点的坐标

if(Math.abs((H.x - W.x) - (H.virtualX - W.virtualX)) <=inaccuracy ){//当前X坐标的差值,与他们的虚坐标的差值接近时
    if(Math.abs((H.y - W.y) - (H.virtualY - W.virtualY)) <=inaccuracy){   
                    //吸附条件成立
     }
}

如果是拿H碰W,则将H里的三个小碎片一片一片地搬到W里面去,反之,则W搬H.如果此时仍用Row与Col的差值来判断,就会发现吸附条件不成立了.因为H的Row与Col为1,2,而W的则为4,2,所以虽然他们处于同列,但行数却差了4-1=3.所以行列差值比较法就不成立了.

为什么要将大H的三个小碎片一片一片地搬到大W里面,而不直接将大H搬到大W里面去就行了呢?这是为了保证舞台中碎片的层次关系只有二层而为避免对角吸附也会成立的情况做准备(如图7).也即大碎片里面就是小碎片了,小碎片里不会再有小碎片.


图7

按照我们前面的碰撞检测吸附判断条件,上面的情部也是成立的,所以他也会被吸附,所以我们必须保证W以下W里面的小碎片和D以及D下面的小碎片(如果有)之间,必须至少有两个小碎片是相邻的.吸附才会真正的成立

//检查p1与p2里是否相邻连接,避免出现对角连接
private function testHit(p1:Piece,p2:Piece):Boolean{
    if(Math.abs(p1.Row - p2.Row) + Math.abs(p1.Col - p2.Col) == 1) return true;
    var p:Piece;
    var i:uint = 0;
    var j:uint = 0;
    for(i=0;i<p2.numChildren;i++){ //p1自身与p2的child碰撞
        p = p2.getChildAt(i) as Piece;
        if(Math.abs(p1.Row - p.Row) + Math.abs(p1.Col - p.Col) == 1) return true;
    }
    for(i=0;i<p1.numChildren;i++){ //p2自身与p1的child碰撞
        p = p1.getChildAt(i) as Piece;
        if(Math.abs(p2.Row - p.Row) + Math.abs(p2.Col - p.Col) == 1) return true;
    }
    for(i=0;i<p1.numChildren;i++){//p1的child与p2的child碰撞
        for(j=0;j<p2.numChildren;j++){
         p = p1.getChildAt(i) as Piece;
         var pp:Piece = p2.getChildAt(j) as Piece;
         if(Math.abs(pp.Row - p.Row) + Math.abs(pp.Col - p.Col) == 1) return true;
        }
    }        
         return false; 
}

所以绕了这么大的一个圈,就是为了避免出现这样的一个问题,所以如果你的游戏是允许对角拼接的话,那么你大可不用这么麻烦,仍然按照上面的吸附判断公式,然后直接A.addChild(B)或者B.addChild(A)就行了..无论是大A碎片或者是小A碎片,总之将一个大碎片直接搬到另一块碎片里面去就行了.

至此我们整个吸附判断的过程就完成了.所以当我们扩展到多角度的吸附判断时,只是上面的公式中,x与y,virtualX与virtualY之间的相对关系反生了一些变化而已.下面就是扩展多角度吸附判断的公式,

private function testPos(p1:Piece,p2:Piece):Boolean{
        var inaccuracy:Number = 8; //吸附的误差值           
        if(p1.rotation == p2.rotation){
            //trace(p1.rotation);
            if(p1.rotation==0 && Math.abs((p1.x - p2.x) - (p1.virtualX - p2.virtualX)) <=inaccuracy ){//当前X坐标的差值,与他们的虚坐标的差值接近时
                if(Math.abs((p1.y - p2.y) - (p1.virtualY - p2.virtualY)) <=inaccuracy){   
                    if(testHit(p1,p2)){                                                       
                        moveChild(p1,p2);
                        m_pieceLayer.addChild(p2);//移到最上面                                   
                    }
                }
            }
            else if(p1.rotation==90 && Math.abs((p1.x - p2.x) - (p2.virtualY - p1.virtualY)) <=inaccuracy ){//当前X坐标的差值,与他们的虚坐标的差值接近时
                if(Math.abs((p1.y - p2.y) - (p1.virtualX - p2.virtualX)) <=inaccuracy){   
                    if(testHit(p1,p2)){                                                       
                        moveChild(p1,p2);
                        m_pieceLayer.addChild(p2);//移到最上面                                   
                    }
                }
            }
            else if(p1.rotation==180 && Math.abs((p2.x - p1.x) - (p1.virtualX - p2.virtualX)) <=inaccuracy ){//当前X坐标的差值,与他们的虚坐标的差值接近时
                if(Math.abs((p2.y - p1.y) - (p1.virtualY - p2.virtualY)) <=inaccuracy){   
                    if(testHit(p1,p2)){                                                       
                        moveChild(p1,p2);
                        m_pieceLayer.addChild(p2);//移到最上面                                   
                    }
                }
            }
            else if(p1.rotation==-90 && Math.abs((p1.x - p2.x) - (p1.virtualY - p2.virtualY)) <=inaccuracy ){//当前X坐标的差值,与他们的虚坐标的差值接近时
                if(Math.abs((p1.y - p2.y) - (p2.virtualX - p1.virtualX)) <=inaccuracy){   
                    if(testHit(p1,p2)){                                                       
                        moveChild(p1,p2);
                        m_pieceLayer.addChild(p2);//移到最上面                                   
                    }
                }
               
            }
        }           
        return true;   
    }

任何物体在舞台中旋转的角度都在-180~180之间.所以我们必须在旋转一个物体之后再加上360度,才会避免因为P1的角度为-180度与P2的角度为180度拼接不成功的状况.

在本DEMO中,物体绕着鼠标旋转使用了L4CD(Http://L4cd.Net)的绕任意点旋转类iPointRegister.

源码下载

]]><![CDATA[拼图设计思路与源码一[画图篇]]]>Wed, 28 Oct 2009 16:34:16 GMT游戏试玩

想要制作非正规矩形的凹凸拼图,第一步就得先画好每一个小拼图的轮廓.然后再通过位图填充,从而制作出每一个小拼图碎片.小碎片的轮廓示意图如下图所示:


图1

如图1所示,为拼图中左上角的一个碎片,所以该碎片只要画右边与下边的轮廓,其它边都为直线.

每一边的轮廓都由一个圆弧(BCD)以及圆弧两个端点(B点,D点)与矩形的两个角(A点与E点)相连的两条直线(AB与DE)组成.所以一整个碎片轮廓就是由这一系列的直线与弧线组成的.

为了不使每一个碎片的外形都一样,所以加了一小些随机的因素.例如圆弧的凹与凸,以及圆心的位置.

当圆弧随机为凸时,圆心的位置在图中的直线OP上的随意一点.相反,为凹时,则为O'P上的随意一点.其中P为AE的中点.当然,我们也可以在AE中取一小段线段作为P的随机点也行.

在本实例中,为了不让四条边的圆弧都为凹时出现相交的情况,所以圆弧的半径为碎片矩形长宽中最短一边的1/6.且圆弧的圆心角都为270度.当然在保证四条边的弧线都为凹时不相交的情况下,半径以及圆心角也都可以加上一些随机的因素的.

至此,我们只要用一个数组来存储四条边上的这些圆弧以及端点角点的信息,然后通过一个连线的函数来进行画图,就可以画出一个封闭的拼图碎片轮廓了.

其它碎片,我们要计算的也只是右边与下边,左边与上边都是沿着上一个碎片的信息画的.如第二列的左边,其实就与第一列的右边是一样的.第二行的上边其实就是第一行的下边.

另外需要注意的是,AS3中对于封闭区域轮廓的要求必须是头尾顺笔连接而成..如图中的右边.画图的顺序必须是:A连到B,然后两从B顺时针画圆弧BCD,再D连到E.不能先连直线AB与DE,然后再画一个圆弧BCD,而且还不分顺画或逆画,这样子就算外形看是一个封闭的曲线,但当填充时就会出现意想不到的效果.

以下是计算某一边的信息的函数,通过参数pos来决定要画右边或下边

public function getArcDot(pos:String):Object{
            var rnd:Number = Math.random()<0.5 ? 0:1;//0为凸,1为凹           
            var dist:Number = Math.sqrt(2 * m_pieceArcRadiu * m_pieceArcRadiu);//圆弧两个商战的距离
           
            var obj:Object = new Object();           
           
            switch(pos){
                case "right"://画右边
                    var _arcY:Number = m_pieceH / 2;
                    var _arcX:Number = this.m_pieceArcRadiu * Math.random() * Math.pow(-1,rnd) + m_pieceW;
                    var _angle:Number = 225 - rnd * 180;//开始角度               
                   
                    //画圆弧的起笔位置,顺时针画,凸时,起点在下,凹时起点在上.
                    var nStartX:Number = _arcX + Math.cos(_angle* Math.PI / 180) * m_pieceArcRadiu;
                          var nStartY:Number = _arcY + Math.sin(_angle* Math.PI / 180) * m_pieceArcRadiu;                            
                     
                          obj.o = new Point(_arcX,_arcY);
                          obj.angle = _angle;
                          if(rnd == 0){
                              obj.p1 = new Point(nStartX,nStartY);
                              obj.p2 = new Point(nStartX,nStartY + dist);
                              obj.clockwise = true;
                          }
                          else
                          {
                              obj.p2 = new Point(nStartX,nStartY);
                              obj.p1 = new Point(nStartX,nStartY - dist);
                              obj.clockwise = false;
                          }                                      
                    break;
                    case "down":
                        var _arcX:Number = m_pieceW / 2;
                        var _arcY:Number = m_pieceArcRadiu * Math.random() * Math.pow(-1,rnd) + m_pieceH;
                        var _angle:Number = 315 - rnd * 180; //开始角度
                       
                        //画圆弧的起笔位置,顺时针画,凸时,起点在下,凹时起点在上.
                        var nStartX:Number = _arcX + Math.cos(_angle* Math.PI / 180) * m_pieceArcRadiu;
                          var nStartY:Number = _arcY + Math.sin(_angle* Math.PI / 180) * m_pieceArcRadiu;                    
                         
                          obj.o = new Point(_arcX,_arcY);
                          obj.angle = _angle;
                          if(rnd == 0){
                              obj.p1 = new Point(nStartX,nStartY);
                              obj.p2 = new Point(nStartX - dist,nStartY);
                              obj.clockwise = true;
                          }
                          else
                          {
                              obj.p2 = new Point(nStartX,nStartY);
                              obj.p1 = new Point(nStartX + dist,nStartY);
                              obj.clockwise = false;
                          }                     
                    break;
                }           
            return obj;
        }

其中的object的结构为:

o 圆心坐标
angle 圆弧的开始角度
p1 圆弧的第一个端点
p2 圆弧的第二个端点
clockwise 画圆弧时是顺时针画还是逆时针画

接着我们来创建一个碎片类Piece:

package net.conanlwl
{
    import flash.display.Sprite;
   
    public class Piece extends Sprite
    {
        private var m_row:uint;
        private var m_col:uint;
       
        public var Up:Object;
        public var Right:Object;
        public var Buttom:Object;
        public var Left:Object;
       
        private var m_virtualX:Number;
        private var m_virtualY:Number;       
       
        public function Piece(_row:uint,_col:uint,_virtualX:Number,_virtualY:Number)
        {
            this.m_row = _row;
            this.m_col = _col;
            m_virtualX = _virtualX;
            m_virtualY = _virtualY;
        }
       
        public function get virtualX():Number{
            return m_virtualX;
        }
       
        public function get virtualY():Number{
            return m_virtualY;
        }
       
        public function get Row():uint{
            return m_row;
        }
        public function get Col():uint{
            return m_col;
        }
    }
}

其中Up,Right,Buttom,Left为四边的圆弧信息,Row与Col为碎片在整张拼图中的所在行与列.virtualX与virtualY则为碎片在整张拼图正确位置时的坐标.

最后,我们再把各边的点弧信息集合起来

public function getAllDotArray(_p:Piece):Array{
        var allDotArray:Array = new Array();
        var obj:Object = new Object();
       
        if(_p.Row == 0){//第0行,不用画上面
            _p.Up = null;
        }else
        {
            var tempObj:Object = (m_pieceLayer.getChildByName("piece_" + ((_p.Row-1)*m_col + _p.Col)) as Piece).Buttom;//上一行同一位置的方块
            var upObj:Object = new Object();
            var t:Point = new Point(tempObj.o.x,tempObj.o.y - m_pieceH);
            upObj.o = t;                   
            upObj.angle = tempObj.angle;               
            t = new Point(tempObj.p2.x,tempObj.p2.y - m_pieceH);
            upObj.p1 = t;
            t = new Point(tempObj.p1.x,tempObj.p1.y - m_pieceH);
            upObj.p2 = t;
            upObj.clockwise = !tempObj.clockwise;
            _p.Up = upObj;                   
        }
        if(_p.Col == 0){//第0列,不用画左面
            _p.Left = null;           
        }else{
            var tempObj:Object = (m_pieceLayer.getChildByName("piece_" + (_p.Row*m_col+_p.Col-1)) as Piece).Right;
            var leftObj:Object = new Object();
            var t:Point = new Point(tempObj.o.x - m_pieceW,tempObj.o.y);
            leftObj.o = t;
            leftObj.angle = tempObj.angle;
            t = new Point(tempObj.p2.x - m_pieceW,tempObj.p2.y);
            leftObj.p1 = t;
            t = new Point(tempObj.p1.x - m_pieceW,tempObj.p1.y);               
            leftObj.p2 = t;       
            leftObj.clockwise = !tempObj.clockwise;       
            _p.Left = leftObj;
        }
        if(_p.Row == m_row - 1){//最下一行,不用画下面
            _p.Buttom = null;
        }else{
            _p.Buttom = getArcDot("down");
        }
        if(_p.Col == m_col - 1){//最右一列,不用画右面
            _p.Right = null;
        }else
        {
            _p.Right = getArcDot("right");
        }
        allDotArray.push(_p.Up);
        allDotArray.push(new Point(m_pieceW,0));
        allDotArray.push(_p.Right);
        allDotArray.push(new Point(m_pieceW,m_pieceH));
        allDotArray.push(_p.Buttom);
        allDotArray.push(new Point(0,m_pieceH));
        allDotArray.push(_p.Left);
        allDotArray.push(new Point(0,0));
               
        return allDotArray;
    }

有了各边的点弧信息,只要使用连线函数就可以画出一个封闭的曲线了.

public function drawPiece(p:Piece,dotArray:Array):void{
            var pen:Pen = new Pen(p.graphics);
            pen.lineStyle(1,0,0.4);           
            pen.moveTo(0,0);           
            for(var i:uint=0;i<dotArray.length;i++){
                if(dotArray[i] is Point){                   
                    pen.lineTo(dotArray[i].x,dotArray[i].y);
                }
                else
                {
                    if(dotArray[i]!=null){                       
                        pen.lineTo(dotArray[i].p1.x,dotArray[i].p1.y);
                        pen.drawArc1(dotArray[i].o.x,dotArray[i].o.y,this.m_pieceArcRadiu,270,dotArray[i].angle,false,dotArray[i].clockwise);                       
                                       
                    }
                }
            }
           
        }

其中的Pen类是<<ActionScript3 CookBook>>中的一个代理类.可以方便的画一些特殊的线型,如圆弧,星形等.drawArc1是我在drawArc的基础上新添的一个函数.目的是为了可以确定该圆弧是顺时针画出来的,还是逆时针画出来的.

最后,就可以使用循环连画整幅拼图的碎片以及利用位图填充了.

public function pieceCut():void{
            for(var i:uint = 0; i < m_row;i++){
                for(var j:uint=0;j< m_col;j++){
                    var p:Piece = new Piece(i,j,j * m_pieceW,i * m_pieceH);
                    p.name = "piece_" + (i * m_col + j);               
                    p.graphics.beginBitmapFill(images,new Matrix(1,0,0,1,-j*m_pieceW,-i*m_pieceH));
                    drawPiece(p,getAllDotArray(p));
                    p.graphics.endFill();               
                   
                    m_pieceLayer.addChild(p);                   
                   
                    p.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
                    p.addEventListener(MouseEvent.MOUSE_WHEEL,onMouseWheel);                   
                }
            }           
           
            setKeyboardFocus();
            addEventListener(KeyboardEvent.KEY_DOWN,onKeyDown);
                   
            cutCard();
        }

根据矩阵的定义:

Matrix(a:Number = 1, b:Number = 0, c:Number = 0, d:Number = 1, tx:Number = 0, ty:Number = 0)

我们只要在位图填充beginBitmapFill时,对原图进行位移,便能填充到正确的图案到每一个碎片之中去.

最最最后,通过一个洗牌函数,就可以把碎片随机的平铺在游戏舞台中了.

public function cutCard():void{
        var k:uint = 0;
        var i:uint = 0;
        var j:uint = 0;
        var w:Number = 800 / m_col;
        var h:Number = 800 / m_row;
       
        m_pieceArray = new Array();
        for(var l:uint = 0;l<m_pieceLayer.numChildren;l++){
            if((m_pieceLayer.getChildAt(l) as Piece).numChildren == 0)
                m_pieceArray.push(m_pieceLayer.getChildAt(l));
        }       
       
        m_pieceArray.sort(Utils.arrayRandomSort);
        while(k<m_pieceArray.length)
        {               
            var p:Piece = m_pieceArray[k] as Piece;               
            p.x = j * w;
            p.y = i * h;
            var rnd:int = 2 - Math.floor(4 * Math.random());//随机生成 -1 0 1 2 四个整数
            p.rotation = rnd * 90; //随机旋转
            switch(rnd){
                case -1:
                    p.y += m_pieceH;
                break;
                case 0:
                break;
                case 1:                   
                    p.x += m_pieceW;
                break;
                case 2:
                    p.x += m_pieceW;
                    p.y += m_pieceH;
                break;
            }           
            j++;
            if(j == m_col){
                j=0;
                i++;
                if( i == m_row)i==0;
            }
            k++;               
        }   
    }
]]><![CDATA[《机械迷城》(Machinarium) 绿色硬盘版 下载]]>Wed, 21 Oct 2009 09:45:48 GMT游戏类型：解谜游戏

 

由捷克独立开发小组Amanita Design设计制作的最新作品《Machinarium》PC版发售日定于09年10月16日。此作堪称以独特的水墨风格展现给玩家的是一款冒险解谜游戏，值得期待。

游戏将采用传统点击式界面,和Samorost游戏相似,2D背景和人物,没有对白.不过,Machinarium游戏时间将更长更复杂,这次画面将由手画,而玩家有个小物品栏。

Machinarium中每个人都是机器人,包括我们的小英雄,他将对从 "Black Cap Brotherhood"来的坏人。

本游戏在2009年独立游戏节上斩获了视觉艺术奖。

刚在网上玩了在线版的试玩DEMO http://machinarium.net/demo/,三关后,就说要玩后续就得交钱..囊中羞涩....就把它关了...然后就在网上找到了一个绿色硬盘版的下载地址......

绿色版下载: http://download.chnren.com/SoftView.Asp?SoftID=8359

一开始的那种气氛,就好像电影的<机器人总动员>那样的荒凉..然后就是一个破旧的机器人..然后就产生了瓦力和伊娃的动人故事了.............

]]><![CDATA[AS3编写凹凸拼图游戏(能够智能吸附)]]>Mon, 19 Oct 2009 23:43:02 GMT花了几天的时间,终于完成了这个拼图游戏.当两张相邻的拼图拼并正确的时候.程序和自动地将其吸附..另.可使用鼠标的滚轮在拼图上滚动以旋转拼图,增加了游戏的难度.

游戏源码过段时间整理完成再说吧...报了个驾校,要考法规了.

[全屏试玩]

多添加了在拼图上按键盘空格键即可旋转拼图的功能(10.27)

游戏设计思路与源码(10.28)

]]><![CDATA[[Mark][转]在Flash中嵌入元数据标签]]>Mon, 19 Oct 2009 12:50:16 GMT这篇文章描述了在Adobe Flash CS4专业版中怎么利用[Embed]元数据标签来嵌入不同类型的媒体、数据和图片资源。文章提供了多个例子关于怎么链接和现实元数据信息，并讨论了在你的工程中加入元数据标签有用的多种原因。

元数据在Flash CS4以前的版本中是不支持的。这对于在Flex中写代码然后尝试在Flash中编译的人会产生一些问题。在Flash CS4中使用元数据标签的主要优势之一就是她简化了Flex-Flex的工作流程。

基本要求

为了能够完成这篇文章中的示例，你需要如下软件和文件：

Flash CS4 Professional; Flex 3 SDK

示例文件: http://download.macromedia.com/pub/developer/embed_metadata.zip (ZIP, 390K)

关于作者

Tareq AlJaber是Adobe的一位软件质量工程师，他专注于Flash-Flex工作流程以及编译特性。在进入Adobe之前，他在一个制造工作制作3D动画，为Jordan Television创立了虚拟实验室。Tareq在 Jordan University获得了计算机科学学位，并获得了 Cal State East Bay University的MBA。在他的空闲时间里，Tareq喜欢看和玩足球或者篮球，并很喜欢阅读。他最喜欢的书是Leap of Faith: Memoirs of an Unexpected Life。这是他的博客flashauthoring.blogspot.com。

 

嵌入GIF,PNG,JPEG,MP3文件

这一部分描述怎么中Flash CS4专业版中利用[Embed]元数据标签嵌入GIF,PNG,JPEG,或者MP3文件。第一个示例来看看嵌入GIF文件的过程。

如果你没有准备好，一定要下载本文章第一页可用的样例文件。跟着提供的例子，解压ZIP文件，然后打开名称为\gif的目录检查示例文件：

1、选择"文件">"新建">"Flash文件(ActionScript 3.0)"菜单，创建一个新的Flash CS4文件.

2、保存这个Flash文件为GIFEmbed.fla.

3、选择"文件">"新建">"ActionScript文件"，来创建一个新的ActionScript文件.

4、保存ActionScript文件为GIFEmbed.as.

5、当GIFEmbed.as是活动标签，拷贝并粘贴如下代码到脚本窗口：

package
{
   import flash.display.*;
   public class GIFEmbed extends Sprite 
   {
       [Embed(source = "../assets/talapetra.gif")]
       private var theClass:Class;
       public function GIFEmbed () 
       {
           var displayObj:DisplayObject = new theClass(); 
           addChild (displayObj); 
       }
   }
}

代码中的高亮行包括了源属性，指示了嵌入的名称和资源的路径。你可以使用绝对路径或者文档文件的相对路径来包含嵌入的描述。在这个示例中，这个名称为GIFEmbed.as的ActionScript类指示了定位到命名为\assets的文件夹中，这个文件夹包含了talapetra.gif的图片文件。

注意：[Embed]元数据标签可以有另外一个可选属性，mimeType，它允许你指定链接资源的MIME类型。我将在后面再具体的讨论这个属性。

ActionScript代码的顺序非常重要。你必须在声明变量前添加[Embed]元数据标签，而且这个变量的类型会是Class。在下面的代码片段中，[Embed]元数据标签中一个成为theClass，类型声明为Class的私有变量前使用：

[Embed(source = "../assets/talapetra.gif")]  
   private var theClass:Class;

在名称为GIFEmbed的函数内部，一个新的类型为DisplayObject命名为displayObj的变量被用来实例化theClass为一个新的DisplayObject。下一行使用addChild方法将displayObj添加到了显示列表当中，并在舞台上渲染：

var displayObj:DisplayObject = new theClass(); 
    addChild (displayObj);

参考示例文件，查看文件夹结构，确认GIFEmbed.as类文件和名称为 talapetra.gif的GIP图片的路径(放在assets目录中)。

6、做了这些改变之后，保存GIFEmbed.as 。

7、点击相应的标签打开 GIFEmbed.fla文件。点击舞台，在属性面板中查看发布属性。

8、在文档类输入框中输入类名，将类作为文档类与Flash文件关联。在这个示例中，输入你创建的类名GIFEmbed(如图1)。

 


图1：在属性面板的文档类框中输入类名

9、选择"控制">"测试影片"来测试影片。

一个错误信息会出现，因为项目尝试用了一个在Flash CS4中的特性，这需要一些额外的Flex类。Flash检测了缺少的Flex类，并显示如图2的信息。


图2：Flex SDK需求信息窗口

在这个对话框中，你有一个选项可以将路径指向Flex SDK，但是这并不是必须浏览指向的，因为路径已经设置了。你需要做的是，点击"更新库路径"按钮来确保flex.swf的正确路径($(FlexSDK)/frameworks/libs/flex.swf)自动地添加到当前FLAS文件的库路径中。

注意：在第一次运行SWF文件之后，Flex SDK需求窗口不会再出现。取而代之，你会看到编译错误，看成是缺失类(如图3)。


图3：随后尝试运行SWF时编译错误结果

10、点击"更新库路径"按钮将flex.swf文件从Flex SKD添加到FLA文件的库路径。

11、根据如下步骤，你会看到会发生什么：

1、选择"文件">"发布设置"，然后点击Flash标签；
   2、点击脚本下拉菜单后面的设置按钮(如图4)；


图4：在Flash标签上，点击设置按钮访问ActionScript的设置

3、在高级AS3设置窗口中，选择库路径标签。列表包含了Flex SDK目录中的flex.swc的路径(如图5)。

12、点击确认按钮关闭AS设置窗口。然后点击确认关闭发布设置对话框。

13、选择"控制">"测试影片"来再次测试SWF。独立的Flash播放器显示了SWF文件，现在它正确地显示了嵌入GIF文件(如图6)。


图6：SWF文件显示了嵌入元数据源的数据
   

正如我之前提到的，[Embed]元数据标签带有两个属性： Source:(必选的)使用这个属性来确认嵌入资源的名称和路径。如果你嵌入了一个元件，你可以用元件的关键词确定元件认嵌入到SWF中的名字。 mimeType:(可选的)使用这个属性来确定嵌入资源的MIME类型。如果这个属性没有设置，Flash会在源属性中根据导入资源文件的扩展名载入合适的类型。

Flash CS4专业版支持与Flex一样的一系列MIME类型：

application/x-font 
   application/x-font-truetype 
   application/x-shockwave-flash 
   audio/mpeg 
   image/gif 
   image/jpeg 
   image/png 
   image/svg 
   image/svg-xml

在帧脚本中使用[Embed]标签

同前面列出的过程一样，元数据也可以应用到帧脚本。在这段中，我会描述怎么利用[Embed]标签来嵌入元数据到帧脚本中。如果你跟着示例文件，请参阅<Embed on Frame Script>目录下的文件：

1、通过选择"文件">"新建">"Flash文件(ActionScript 3.0)"菜单来创建一个新的Flash CS4文件；

2、将这个Flash文件保存为GIFEmbed.fla。

3、选择图层1的第一帧并打开动作面板("窗口">"动作")。

4、拷贝如下代码，并粘贴到脚本窗口：

[Embed(source="../assets/talapetra.gif")] 
   var theClass:Class;
   var displayObject:DisplayObject = new theClass(); 
   addChild(displayObject);

5、重复前面一个段落的10-13步测试SWF文件，并更新Flex SDK目录库路径来添加flex.swc文件。

 

从SWF文件中嵌入一个元件

在前面的段落中，我写了使用[Embed]标签利用GIF文件嵌入图像的元数据的过程。显示外部数据非常有用，但是当使用[Embed]元数据标签是会有很多可能的情况。这个段落中会描述嵌入整个SWF文件或者一个SWF文件中的一些特殊元件的步骤。

如果你随着下载的示例文件学习，请参阅文件夹中的文件名为<SWF with slice 9>的示例 。按照如下步骤：

1、在Flash CS4中，选择"文件">"打开"，从示例文件的<SWF with slice 9>目录中选择"Movie.fla"文件。

2、选择"窗口">"库"，打开库面板(如果它还没有打开的话)。

3、右键(或者苹果机上Control-click)点击库中的"Slice9"元件，从上下文菜单中选择"属性"(如图7)。


图7：当右键点击库中的"Slice9"元件是出现的菜单中选择"属性"

4、在元件属性对话框中，选择"Export for ActionScript"选项(如果没有被选中的话)，如图8所示。


图8：在元件属性对话框中检查"Export for ActionScript"选项

注意：在这个练习中，也需要确保"Enable Guides for 9-Slice Scaling"选项被选中。

5、选择"控制">"测试影片"来测试FLA文件。

6、关闭独立播放器的movie.swf。也关闭Flash的movie.fla。

7、选择"文件">"新建">"Flash文件(ActionScript 3.0)"，命名为SWFEmbed.fla。

8、选择"文件">"新建">"ActionScript文件"，命名为SWFEmbed.as。

9、复制并粘贴如下代码到SWFEmbed.as文件的脚本窗口中：

package
{
   import flash.display.*;
   import flash.events.MouseEvent;
   import flash.geom.Rectangle;
   public class SWFEmbed extends MovieClip 
   {
       public var displayObj:DisplayObject;
       [Embed(source="Movie.swf", symbol="Slice9")] 
       var theClass:Class;
       public function SWFEmbed()
       {
            displayObj = new theClass(); 
            addChild(displayObj);
            displayObj.x = 200; 
            displayObj.y = 220; 
       }
   }
}

在这段代码中，[Embed]元数据标签使用了source参数来确认将被嵌入的SWF文件的名称和路径。symbol参数来确认特殊元件的名称，这个元件是从source参数关联的SWF文件中嵌入的。

10、添加了代码之后，保存ActionScript文件为 SWFEmbed.as。

11、点击Flash CS4中其他的标签，激活SWFEmbed.fla标签。在舞台上点击一次，在属性检查中查看发布属性。

12、在文档类区域，输入类名SWFEmbed，链接ActionScript文件到Flash文件。

13、选择"控制">"测试影片"来在独立播放器中查看SWF。Flex SDK Required对话框出现(如图9)。


图9：信息表明这个工程需要Flex SDK

14、点击"Update Library Path"按钮，从Flex SDK中添加flex.swc到FLA文件的库路径中。

15、选择"控制">"测试影片"来再次预览SWF，你会看到元件显示在SWFEmbed.swf文件中(如图10)。


图10：在SWFEmbed.swf中显示元件元数据

使用[Embed]标签嵌入字体

除了嵌入图片文件，SWFs，还有SWFs中的元件以外，[Embed]元数据标签还可以嵌入OpenType和TrueType字体到Flash文件中。在这个段落中，我将演示怎么使用[Embed]元数据标签在Flash CS4中嵌入字体。这篇文章将定你已经安装了Arial Bold字体在你的系统中。如果你没有这个字体，你可以从 SearchFreeFonts.com或者类似网站上购买它。

注意：[Embed]元数据标签仅仅支持类和成员变量，如果你尝试在函数前使用[Embed]标签，如下的编译错误将会显示： "Embed is only supported on classes and member variables."(Embed仅仅支持类和成员变量)

如果你是跟随教程学习，请参阅示例文件中TrueType目录。

1、选择"文件">"新建">"ActionScript文件"，创建一个新的ActionScript文件。

2、保存文件为FontClass.as。

3、拷贝并粘贴如下代码到脚本窗口中：

package 
{
    import flash.text.*;
    import flash.display.MovieClip;
    public class FontClass extends MovieClip 
    {            
     [Embed(source="Arial Bold.ttf", fontName="myFont", fontWeight="bold", advancedAntiAliasing="true", mimeType="application/x-font")]
     private var theClass:Class;
     public function FontClass ()
     { 
            var t:TextField=new TextField();
            t.embedFonts = true; 
            var textFormat:TextFormat=new  TextFormat();
            textFormat.size = "30";
            textFormat.font = "myFont";
            t.text = "[Embed] metadata rocks!!!";
            t.width = 500;
            t.setTextFormat (textFormat); 
            addChild (t);  
     } 
    } 
}


上面代码中的高亮部分，[Embed]元数据标签中使用到如下的参数来嵌入一个Arial bold字体:

Source: 这个参数指出了font文件的位置。如果愿意，你可以使用systemFont参数确认名称而不是source来嵌入系统字体。 fontName: 这个参数指明了嵌入字体的名称，字体的名称是一个唯一标识，所以你可以通过名称来调用字体。 mimeType: 这个参数描述了嵌入元数据的MIME类型。因为你在这个例子中嵌入了一种字体，你可以设置MIME类型为"application/x-font"。 fontWeight: 这个参数表明了字体的粗细，如粗体或者正常。

注意：如果字体有粗细，并且你没有在[Embed]元数据标签中包含fontWeight参数，当测试SWF文件是，你会看到如下编译错误：

Exception during transcoding: Font for alias 'myFont' with plain weight and style was not found at... (意外的转换：带有粗细和样式的别名为'myFont'的字体没有被找到在...)

随着嵌入字体的路径(如图11)。


图11：如果嵌入字体的粗细在参数中没有明确，将会显示编译错误

如果嵌入字体有特殊的样式(如斜体)，在[Embed]元数据标签中没有使用fontStyle参数来明确，同类型的错误也将会显示出来。当使用元数据嵌入字体时，请确保明确所有必需的参数。

4、粘贴代码到脚本窗口后，确保保存文件为FontEmbed.as。

5、选择"文件">"新建">"Flash文件(ActionScript 3.0)"来创建一个新的Flash文件。

6、保存Flash文件为EmbedFont.fla。

7、点击舞台访问属性窗口(选择"窗口">"属性")。

8、在发布属性中，输入类型FontClass到文档类文本框中。

9、选择"控制">"测试影片"，测试FLA。

10、当<Flex SDK Required>对话框出现时，点击<Update Library Path>按钮。这引导Flash将flex.swc添加到FLA文件的库路径。你可以再次测试FLA文件。

11、选择"控制">"测试影片"。这次，预期的文本(粗体的Arial字体)显示在EmbedFont.swf文件中(如图12)。


图12：使用嵌入字体外观和粗细，测试FLA文件，查看显示信息

 

使用嵌入的XML文件

在这篇文章的前面段落中，我讲述了使用 [Embed] 元数据标签嵌入图形文件，SWF文件，SWF文件中元件，还有字体等到SWF中。所有这些可能性都是非常有用的，不过还有另外一种类型的文件也可以采用 [Embed] 元数据标签嵌入到SWF中：XML文件。

我保留最好的到最后，这是因为这个功能对于将外部数据导入到SWF中非常用用 -- 而且很直接地就可以完成。根据嵌入的XML数据，你可以做一些有趣的事情，为将来的工程记住这个是一个极好的提醒。

下面的示例提供了使用 [Embed] 元数据标签嵌入一个XML文件的一个说明。如果你跟随教程学习，请参阅示例文件的XML目录。

1、选择"文件">"新建">"Flash文件(ActionScript 3.0)"创建文件，并保存文件为XMLLoader.fla。

2、选择"文件">"新建">"ActionScript文件"创建文件，并保存文件为 XMLLoader.as。

3、当XMLLoader.as被激活，拷贝并粘贴如下如下代码到脚本窗口：

package 
{
    import flash.display.*;
    import flash.utils.ByteArray;
    public class XMLLoader extends Sprite
    {
      [Embed(source = "training.xml",mimeType = "application/octet-stream")]
      private var theClass:Class;
      public function XMLLoader ()
      {
           var xmlObj:Object = new theClass();
           trace(xmlObj);
      }
     }
}

注意：当嵌入XML数据时，你必须将mimeType参数设置为"application/octet-stream"。 Flash不能通过XML文件的扩展名检测正确的MIME类型，所以无论什么时候你嵌入XML数据时都要设置mimeType参数。

4、将代码粘贴到脚本窗口后，确保保存XMLLoader.as文件。

5、激活XMLLoader.fla标签页。如果属性窗口还没有打开，在舞台上点击一次，打开属性检查器("窗口">"属性")。

6、在发布属性中，在文档类文本框中输入类名。在这个示例中，添加你创建的类：XMLLoader。

7、选择"控制">"测试影片"测试FLA。<Flex SDK Required>对话框出现了。

8、点击< Update Library Path >按钮将flex.swc添加到FLA文件库路径。

9、再次选择"控制">"测试影片"测试FLA。这次你会看到XML数据显示在输入面板中(如图13)。


图13：输出面板显示嵌入到SWF中的XML数据

 

从这里可以去哪儿

需要看其他关于使用 [Embed]元数据标签的示例，请参看<Programming ActionScript 3.0 for Flash>文档中"Working with Pixel Bender shaders" 段落的 Loading or embedding a shader 部分。同时也可参考<Using Flash CS4 Professional >文档中 "ActionScript"段落的 Using Flex metadata部分。也可以查看 Flash Authoring blog 以获取更多信息，还有Peter deHaan的blog：Using Flex classes in Flash CS4。可以访问 Flash Developer Center 和 Flex Developer Center 去获取更多的文章，指南和示例工程。

]]><![CDATA[[Mark][转]FLEX Builder compiler arguments 的设置]]>Mon, 19 Oct 2009 12:48:14 GMT【编译参数】
-default-background-color int
-default-frame-rate int
-default-size width height
设置SWF的背景色，帧频与宽高，这个也可以通过元标签设置，诸如
[SWF(width="720",height="560",backgroundColor="#000000")]

-default-script-limits
-max-recursion-depth
-max-execution-time 
定义应用脚本程序的执行限制，最大代码条目，最大递归层次，最大的执行时间

-debug=true|false 
是否生成调试用SWF，调试用SWF会比一般的SWF要大。在Flex Builder中，默认为true，而在以Release方式时发布时，默认为false，所以用Release发布的文件会被debug时小很多。

-optimize=true|false 
优化as，减少文件大小，增加性能，默认为true。

-strict=true|false 
是否采用严谨模式

-use-network=true|false 
可读取网络或者可读取本地文件

-includes class [...]
强制导入类，不管是否曾使用过这个类

-include-libraries library [...]
强制导入SWC文件中的所有类，不管是否曾使用过这个类

-frames.frame label class_name [...] 
将类绑定label标记的帧上

【后台相关】

-context-root string
-context-path string
设置{context.root}的值，这个数值被应用在flex-services.xml，flex-config.xml内，是flash Remoting的必要参数，以确认服务端目录。也可通过设置Flex Server内的context root。

-services filename 
指定services-config.xml的位置，用于Flash Remoting。也可以通过新建项目的选项卡设置。


【调试时信息】

-benchmark=true|false 
是否输出编译时期的详细信息，默认为true

-warnings=true|false 
是否显示警告信息

-show-unused-type-selector-warnings=true|false
是否显示未使用CSS的警告信息

-show-binding-warnings=true|false 
是否显示绑定失效信息

【其他】

-keep-generated-actionscript=true|false 
保留编译MXML文件过程中的AS文件

]]><![CDATA[更换在线音乐 - Sunrise/Sunset ～LOVE is ALL～]]>Mon, 17 Aug 2009 15:50:41 GMT哈哈,AYU的最新单曲又来了. [Sunrise/Sunset ～LOVE is ALL～]

 

日本天后滨崎步最新单曲碟《Sunrise/Sunset/LOVE is ALL》将于8月12日发售。新曲《Sunrise/LOVE is ALL》将作为馆广博主演的朝日台日剧《Dandy Daddy》的主题曲，于7月9日在电视上播送。

新曲《Sunrise/LOVE is ALL》将收在双A面单曲《Sunrise/Sunset/LOVE is ALL》，除了收有这两首曲子之外，还将特别收录电子混音《Special Mega-Mash-Up-Mix》，混音包括著名的《JULY 1st》《fairyland》等。

另外，单曲将以两种形式发行，包括CD和CD+DVD两种。DVD将收录两首歌的MV和拍摄花絮。

唱片于8月12日才上市，同一天日本还有众多大牌当红歌手出碟。但滨崎步已先拨头筹，《Sunrise/LOVE is ALL》近日已登上手机铃声下载榜的每周冠军。

本次的单曲封面是特意的去巴厘岛拍摄的，草裙舞的健康性感造型充满夏日的热情魅力。而MV则是拍自日本的海边公园，以Live的形式，在舞台上热唱歌。这首夏日歌曲欢快的旋律 加上滨崎步背心配热裤的性感打扮，充满轻松快乐的感觉，滨崎步台上的亲和力也令MV增色不少。

 

专辑曲目: 

1. Sunrise ~LOVE is ALL~ (Original mix)
2. Sunset ~LOVE is ALL~ (Original mix)
3. "fairyland-glitter-BLUE BIRD-Greatful days-July 1st" Mega-Mash-Up-Mix
4. Sunrise ~LOVE is ALL~ (Original mix -Instrumental-)
5. Sunset ~LOVE is ALL~ (Original mix -Instrumental-)

电驴下载链接:ed2k://|file|%E6%BB%A8%E5%B4%8E%E6%AD%A5%28Ayumi.Hamasaki%29.-.%5BSunrise%EF%BC%8FSunset%EF%BD%9ELOVE.is.ALL%EF%BD%9E%5D.%E5%8D%95%E6%9B%B2.%28MP3%29.rar|73941919|9c3f3a395990c82cac4acbb65898c4d3|/

]]><![CDATA[猫叔的传奇]]>Mon, 10 Aug 2009 12:45:20 GMT这是一只生活在日本乡下，红遍岛国的猫叔。猫叔滴特长是——拿大顶！

从来不怕沉

有时猫叔喜欢把自己打扮成印度阿叉

偶尔还会cosplay一把羊二车那母

不要以为我们猫叔永远睁不开眼

人家可是明星咧！

有时梳中分

有时扎小辫

有时随意

有时扮小甜甜

其实猫叔原来只是个不入流的小演员

一直在夹缝中求生存

参加过黑涩会

跑龙套演过城管

还拍过什么庐山恋

后来出名是因为一张自拍艳照

猫叔曾经很彷徨

很无助

最终索性改走性感路线

很多不堪入目的镜头：“亚埋爹~~~~”

然后猫叔火了

杂志争相约TA拍照

偶尔回首看看一路走过地艰辛

小筒子门努力吧~！

祝大家天天开心！

猫叔的传奇博客http://kagonekoshiro.blog86.fc2.com/

]]><![CDATA[重写BLOG]]>Wed, 29 Jul 2009 16:11:09 GMT准备重写BLOG程序,重新架构,参考PETSHOT4的结构方式,重写个2.0版,只是没什么时间去写他,也不知何时才能完成重写了....

]]><![CDATA[一个简单的扑克框选选牌效果]]>Wed, 29 Jul 2009 15:52:40 GMT一开始没写代码前,还以为一个简单的碰撞检测就能完成效果,可是写了测试以后,才发现了一个深度问题,不该碰测的也都碰测了,所以最后得用划的方框的四个顶定来确认哪一张开始往右做检测..

源码下载

]]><![CDATA[悼念Michael Jackson逝世]]>Sat, 27 Jun 2009 18:28:08 GMT迈克尔杰克逊是这个星球上绝无仅有的天才和巨星。U ARE NOT ALONE，但他却一直是孤独的。这样的去世方式，结束了流行音乐史上最伟大的一段故事。地球上，不再有让人战栗的传奇……

这样的音乐奇才,就这样地走了,确实令人感到震撼,但愿在天堂能够真正的U ARE NOT ALONE.

音乐播放器换上几首jackson的歌以怀念这们音乐界的天才与大慈善家.

]]><![CDATA[AS3歌词秀源码之歌词分析篇]]>Thu, 18 Jun 2009 21:25:14 GMT想做实现歌词秀效果,首先第一步就是得加载歌词,而现在通用的还是LRC歌词格式,所以在加载歌词之前,我们有必要先了解一下什么是LRC歌词格式.(从百度百科COPY过来的..)

LRC歌词是一种包含着“[*:*]”形式的“标签(tag)”的、基于纯文本的歌词专用格式。最早由郭祥祥先生(Djohan)提出并在其程序中得到应用。这种歌词文件既可以用来实现卡拉OK功能（需要专门程序），又能以普通的文字处理软件查看、编辑。当然，实际操作时通常是用专门的LRC歌词编辑软件进行高效编辑的。以下具体介绍LRC格式中的“标签”。
时间标签（Time-tag）
　　形式为"[mm:ss]"或"[mm:ss.fff]"（分钟数:秒数）。
　　数字须为非负整数，比如"[12:34.5]"是有效的，而"[0x0C:-34.5]"无效。它可以位于某行歌词中的任意位置。一行歌词可以包含多个时间标签（比如歌词中的迭句部分）。
　　根据这些时间标签，用户端程序会按顺序依次高亮显示歌词，从而实现卡拉OK功能。另外，标签无须排序。
　　标识标签（ID-tags）
　　其格式为"[标识名:值]"。大小写等价。以下是预定义的标签.
　　[ar:艺人名]
　　[ti:曲名]
　　[al:专辑名]
　　[by:编者（指编辑LRC歌词的人）]
    　[offset:时间补偿值]其单位是毫秒，正值表示整体提前，负值相反。这是用于总体调整显示快慢的。
   　样例
   　[ar:unknown]
   　[ti:sample]
   　[al:none]
   　[by:me]
   　[01:02.355][00:00]Thislineshouldbesungtwice
   　[0:5.7]Andthisone...onceonly.
　 开发标准(供程序员阅读参考)以下列出了开发支持LRC格式的软件时应遵守的一些标准。
　    1.无论是否在行首，行内凡具有“[*:*]”形式的都应认为是标签。（注意：其中的冒号并非全角字符“：”）
　　2.凡是标签都不应显示。
　　3.凡是标签，且被冒号分隔的两部分都为非负数，则应认为是时间标签。
　　4.因此，对于非标准形式（非“[mm:ss]”）的时间标签也应能识别（如“[m:s]”）。
        5.应能正确识别连续的时间标签.如[00:01.555][01:03.234]歌词内容
　　6.凡是标签，且非时间标签的，应认为是标识标签。
　　7.标识名中大小写等价。
　　8.为了向后兼容，应对未定义的新标签作忽略处理。另应对注释标签（[:]）后的同一行内容作忽略处理。
　　9.应允许一行中存在多个标签，并能正确处理。
　　10.应能正确处理未排序的标签。

鉴于这上面的一大堆的开发标准,我们必须编写一个容错性较高的歌词解释程序.另外在编写代码之前,建议没有正则表达式认识的人,先恶补一下正则的知识再来吧,因为分析字符串最好的工具莫过于正则表达式了.

在写主代码之前,先贴一个事件类LRCEvents,它的作用也就是存放一些用于广播事件的字符串常量罢了.

package net.conanlwl.LRC
{
    import flash.events.Event;   
    public class LRCEvents extends Event
    {
        public function LRCEvents(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);           
        }        
        public static const LRC_READY:String = "LRCReady";
        public static const LRC_ERROR:String = "LRCError";
        public static const LRC_CHANGE:String = "LRCChange";
    }
}

对歌词分析的最终目的就是,就是生成一个二维数组,二维数组的每一个元素的格式都是[播放歌词的时间且以毫秒为单位 ,  歌词内容]. 所以我们在提取歌词中的时间以后[mm:ss.fff],还得将它换算为毫秒.

我们第一个用到的正则表达式就是:

var r:RegExp = /(\[(\d{1,2}):(\d{1,2})(|\.\d{1,3})\])+[^\[]*/g;

r表示的意思为一句时间歌词格式.也即包括时间戳标签以及该时间所对应的歌词.表达式中的"+"号表示允许同时有多个连续的时间戳标签存在(注意:多个时间标签之间不能有空格.否则空格将也会被认为是歌词),这也正是符合上面提到的开发标准中的第5条.那么,如何描述歌词呢?我认为,一句歌词就是从时间标签结束以后一直到下一个"["出现之前,就为一句歌词的内容了.所以用一个非左括号表达式来匹配歌词内容.

接下来我们只要使用字符串中的match方法来匹配歌词,并将匹配结果存于一个数组中.注意,表达式r的最后必须加上全局标识g,才能够匹配所有符合格式的歌词,否则只会匹配第一句而已.

假设字符串变量s为整个LRC文件里的所有字符串.使用arr_lrc数组来存放歌词

var arr_lrc:Array = s.match(r);

我用了一个辅助表达式r1来匹配一句歌词中的时间标签.此次不需全局标识g了.

var r1:RegExp = /\[(\d{1,2}):(\d{1,2})(|\.\d{1,3})\]+/;

另外,我们还需要一个函数来将时间标签换算为毫秒.我用一个getTimeArray(time:String):Array函数来实现.注意,它的返回值为一个数值,那是因为输入的time字符串有可能是多个连续的时间标签.以下是getTimeArray(time:String):Array函数的实现代码:

        //解析时间戳.如[01:25.36][01.28.39][01.38.30]为毫秒数组
        private function getTimeArray(time:String):Array{
            var r:RegExp = /\[(\d{1,3}):(\d{1,2})(|\.\d{1,3})\]/g;//[mm:ss.fff],全局搜索           
            var result:Array = new Array();
            var m:Array = r.exec(time);
            while(m != null){
                var t:Number = Number(m[1]) * 60 + Number(m[2]) + Number(m[3]);//总秒数
                t -= m_offset/1000;//添加偏移值
                t = Math.floor(t * 100) * 10; //总毫秒数,将ss.fff精确到 ss.ff位.               
                if(t<0)t=0;
                result.push(t);
                m = r.exec(time);
            }
            return result;           
        }

至此,我们就可以通过getLRCArray(value:String):Array函数来分析歌词了,参数value就为整个LRC歌词字符串.

       public function getLRCArray(value:String):Array{
            var arr:Array = new Array();
            var r:RegExp = /(\[(\d{1,2}):(\d{1,2})(|\.\d{1,3})\])+[^\[]*/g;//[mm:ss.fff][mm:ss.fff]...歌词
            var r1:RegExp = /\[(\d{1,2}):(\d{1,2})(|\.\d{1,3})\]+/;//[mm:ss.fff][mm:ss.fff]...
            var s:String = value;//创建歌词副本
            var arr_lrc:Array = s.match(r);
            for(var i:uint=0; i < arr_lrc.length; i++){
                var txt:String = String(arr_lrc[i]).replace(r1,""); //歌词
                txt = txt.replace(/\r|\n/g,""); //去掉换行符
                var timeArray:Array = getTimeArray(r1.exec(arr_lrc[i])[0]);
                for(var j:uint = 0; j<timeArray.length;j++){
                    arr.push([timeArray[j],txt]);
                }
            }
            arr.sortOn("0",Array.NUMERIC);//根据第一维排序
            return arr;
        }

至于其它的标签,如人名,专辑名什么的,我们可以用一个通用的函数getTag(tag:String):String来实现:

public function getTag(tag:String):String{
            var r:RegExp = new RegExp("\\[" + tag + ":([^\\]]*)\\]","i");
            var m:Array = r.exec(lrc);
            if(m != null && m.length == 2){
                return m[1];
            }else    return "";
        }

以下就是分析加载并分析歌词的全代码:

package net.conanlwl.LRC
{
    import flash.events.ErrorEvent;
    import flash.events.Event;
    import flash.events.EventDispatcher;
    import flash.events.IOErrorEvent;
    import flash.net.URLLoader;
    import flash.net.URLLoaderDataFormat;
    import flash.net.URLRequest;
    import flash.utils.ByteArray;
   
    import net.conanlwl.utils.ArrayUtilities;

   
    public class LoadLRC extends EventDispatcher    {
        private var load:URLLoader = new URLLoader();
       
        private var m_lrcURL:String;
        private var lrc:String = "";
        private var m_offset:Number;//时间补偿值,其单位是毫秒，正值表示整体提前，负值相反。这是用于总体调整显示快慢的。
        private var lrcArray:Array = new Array();//一个二维数组.第一维保存播放时间,第二维保存歌词内容
        public function LoadLRC(lrcURL:String)
        {           
            this.m_lrcURL = lrcURL;                   
            load.load(new URLRequest(lrcURL));
            load.dataFormat = URLLoaderDataFormat.BINARY;
            load.addEventListener(Event.COMPLETE,onLRCLoaded);
            load.addEventListener(IOErrorEvent.IO_ERROR,onError);
        }
       
        public function get LRCArray():Array{
            return ArrayUtilities.duplicate(lrcArray,true) as Array; //复制一个副本
        }
       
        private function onLRCLoaded(e:Event):void{
            var bytes:ByteArray = load.data as ByteArray;           
            if(bytes != null)
            {
                //bytes.position = 0;
                lrc = bytes.readMultiByte(bytes.bytesAvailable,"gb2312");
                m_offset = this.offset;
                lrcArray = getLRCArray(lrc);
                dispatchEvent(new LRCEvents(LRCEvents.LRC_READY));
            }
            else
            {//加载错误
                dispatchEvent(new LRCEvents(LRCEvents.LRC_ERROR));
            }
           
        }
       
        private function onError(e:ErrorEvent):void{
            dispatchEvent(new LRCEvents(LRCEvents.LRC_ERROR));
        }
       
        public function getLRCArray(value:String):Array{
            var arr:Array = new Array();
            var r:RegExp = /(\[(\d{1,2}):(\d{1,2})(|\.\d{1,3})\])+[^\[]*/g;//[mm:ss.fff][mm:ss.fff]...歌词
            var r1:RegExp = /\[(\d{1,2}):(\d{1,2})(|\.\d{1,3})\]+/;//[mm:ss.fff][mm:ss.fff]...
            var s:String = value;//创建歌词副本
            var arr_lrc:Array = s.match(r);
            for(var i:uint=0; i < arr_lrc.length; i++){
                var txt:String = String(arr_lrc[i]).replace(r1,""); //歌词
                txt = txt.replace(/\r|\n/g,""); //去掉换行符
                var timeArray:Array = getTimeArray(r1.exec(arr_lrc[i])[0]);
                for(var j:uint = 0; j<timeArray.length;j++){
                    arr.push([timeArray[j],txt]);
                }
            }
            arr.sortOn("0",Array.NUMERIC);//根据第一维排序
            return arr;
        }
        //解析时间戳,如[01:25.36][01.28.39][01.38.30]为毫秒数组
        private function getTimeArray(time:String):Array{
            var r:RegExp = /\[(\d{1,3}):(\d{1,2})(|\.\d{1,3})\]/g;//[mm:ss.fff],全局搜索           
            var result:Array = new Array();
            var m:Array = r.exec(time);
            while(m != null){
                var t:Number = Number(m[1]) * 60 + Number(m[2]) + Number(m[3]);//总秒数
                t -= m_offset/1000;//添加偏移值
                t = Math.floor(t * 100) * 10; //总毫秒数,将ss.fff精确到 ss.ff位.               
                if(t<0)t=0;
                result.push(t);
                m = r.exec(time);
            }
            return result;           
        }       
       
        //得到指定标签的内容
        public function getTag(tag:String):String{
            var r:RegExp = new RegExp("\\[" + tag + ":([^\\]]*)\\]","i");
            var m:Array = r.exec(lrc);
            if(m != null && m.length == 2){
                return m[1];
            }else    return "";
        }       

        //获得艺人名 artist
        public function get Ar():String{
            return getTag("ar");
        }
        //获得曲名 Title
        public function get Ti():String{
            return getTag("ti");
        }
        //获得专辑album
        public function get Al():String{
            return getTag("al");
        }
        //获得编辑LRC歌词的作者by
        public function get By():String{
            return getTag("by");
        }
        //获得总体时间偏移值
        public function get offset():Number{
            var o:String = getTag("offset");
            if(o==null || isNaN(Number(o)))return 0;
            else return Number(o);           
        }

    }
}

这是工具类.目前的功能只有复制数组

package net.conanlwl.utils
{
    public class ArrayUtilities
    {
        public function ArrayUtilities()
        {
        }       
       
        //复制数组,bRecursive为true时,可以复制二维数组
        public static function duplicate(oArray:Object, bRecursive:Boolean = false):Object {
          var oDuplicate:Object;
          if(bRecursive) {
            if(oArray is Array) {
              oDuplicate = new Array();
              for(var i:Number = 0; i < oArray.length; i++) {
                if(oArray[i] is Object) {
                  oDuplicate[i] = duplicate(oArray[i]);
                }
                else {
                  oDuplicate[i] = oArray[i];
                }
              }
              return oDuplicate;
            }
            else {
              var oDuplicate:Object = new Object();
              for(var sItem:String in oArray) {
                if(oArray[sItem] is Object && !(oArray[sItem] is String) && !(oArray[sItem] is Boolean) && !(oArray[sItem] is Number)) {
                  oDuplicate[sItem] = duplicate(oArray[sItem], bRecursive);
                }
                else {
                  oDuplicate[sItem] = oArray[sItem];
                }
              }
              return oDuplicate;
            }
          }
          else {
            if(oArray is Array) {
              return oArray.concat();
            }
            else {
              var oDuplicate:Object = new Object();
              for(var sItem:String in oArray) {
                oDuplicate[sItem] = oArray[sItem];
              }
              return oDuplicate;
            }
          }
    }

    }
}

 

]]><![CDATA[as3实现仿千千静听歌词秀效果]]>Sat, 13 Jun 2009 14:56:59 GMT 

模拟千千静听的一个歌词秀效果,歌词面板可拖曳进行音乐进度同步调节.

音乐加载LRC歌词文件格式

预览地址: http://www.conanlwl.net/demo/Spectrum/musicplayer.swf

 

]]><![CDATA[几乎完美的四元数旋转]]>Thu, 14 May 2009 18:13:44 GMT该接触PV3D这个引擎,而且对3D的编程也是一种半解,所以Mark两篇文章,以备自己学习PV3D用..

人类最初用9个值的矩阵（Matrix），来表示一个三维物体的旋转位置。它的缺陷是数据大，和无法自动在两个角度间产生过度的角度。

由于矩阵描述角度过于抽象，人类又发明了3个值的优拉角（Euler）。可优拉角是个很不负责任的家伙，旋转圈数和旋转顺序完全不做区分。三维动画师最厌恶的情况之一‘万向锁（Gimbal Lock）’就是这个家伙的问题。按不同轴以优拉角旋转几次后，出现x,y,z三个轴完全变成同向的情况，也就是说，优拉角很容易出现旋转到最后只剩一个方向可以旋转的情况，这就是恐怖的‘万向锁’。

后来，聪明的爱尔兰数学家发明了我们今天要研究的四元数（Quaternion），这就是迄今为止描述三维空间旋转相对完美的方案。

四元数和矩阵一样，不满足乘法交换率，也就是说，A*B不等于B*A。四元数之所以可以明确地表述三维旋转，是因为他实际上是一种‘四维’的算法。这里的‘四维’是数学上的使用，不需要去想象什么是四维的世界=_=,只是多一条轴，多一个参数而已。


我们主要介绍PV3d里Quaternion常用的几个方法和其用法，不会涉及过深的数学知识，所以不用担心。Quaternion类位置在org-papervision-core-math包里。



//构造四元数需要4个值（人家名字就叫4元嘛=_=）,x,y,z是个三维向量，表示‘任意轴’，w是个标量，表示旋转度数。这就是几乎完美的角度旋转。
四元数之所以不是‘绝对完美’，是因为插值的时候过渡速率不恒定，且很难解决。不过这比起‘恐怖万向锁’已经是很小的问题。


public function Quaternion( x:Number = 0, y:Number = 0, z:Number = 0, w:Number = 1 )




//下面两个个分别是‘从优拉角换算出四元数’和‘从矩阵换算出四元数’。这是两个非常常用的方法，只要已知一个物体的优拉角或矩阵，即可生成对应的四元数。
Pv3d里任何DisplayObject3D的tranform这个属性就是变换他的矩阵，由这个矩阵就能得到目前旋转的四元数。（我们研究所的Flab摄像机旋转就用到了这些方法）


public static function createFromEuler( ax:Number, ay:Number, az:Number, useDegrees:Boolean = false )
public static function createFromMatrix( matrix:Matrix3D )




//和上面的刚好反向，分别是‘得到已知四元数的优拉角’和‘得到已知四元数的矩阵’


public function toEuler()
public function get matrix()




//插值是四元数最重要的用处之一，slerp方法的参数中，qa为开始的旋转位置的四元数，qb为结束的旋转位置四元数，apha可以看成一个插值的位置的比例，数值在0-1之间。


public static function slerp( qa:Quaternion, qb:Quaternion, alpha:Number )



完美旋转的思路是这样的：
我们必须要首先知道我们的开始位置和结束位置，结束位置很多情况用一个DisplayObject3D虚拟，我们可以用它的.tranform（是个矩阵值），变换成一个四元数
知道两头的四元数，我们只需要每祯增加alpha值（从0-1），即可在这两个四元数之间插入任意多的过渡帧的四元数。
然后将每祯的这个四元数反向为矩阵，在通过矩阵相乘目前物体的位置，即可得到物体每祯的新位置。

下面这些都是四元数的基本运算（一般使用没必要掌握），维基词典可以了解‘四元数’更专业的解释。
维基词典-四元数（会打开新窗口）

//求模，四元数到原点的距离，简单的说就是长度
public function get modulo()

//共轨

public static function conjugate( a:Quaternion )


//点乘

public static function dot( a:Quaternion, b:Quaternion )


//叉称
public static function multiply( a:Quaternion, b:Quaternion )

//求差
public static function sub(a:Quaternion, b:Quaternion)

//求和
public static function add(a:Quaternion, b:Quaternion)


From:Flab3D.com

 

]]><![CDATA[[转]图形学原理 矩阵变换]]>Thu, 14 May 2009 18:09:05 GMT空间中的某个点（x,y,z）的任何移动，旋转，缩放的变换，都是用这个点乘以某个一个矩阵而得到。那么模型是由一个个(x,y,z)的点组成，模型整个要变换，就是让每个点乘以某个矩阵。
这是三维引擎开发，和引擎代码阅读的必备的基础常识。
由于（x,y,z）乘以3*3矩阵可以达到旋转和缩放的目的，但是无法表示移动，所以为了统一，我们通常是采用乘以一个4行4列的矩阵。也就是说所有变换方法，都是用如下公式：
变换后点的（x’,y’,z’）=原来的（x,y,z） 乘以 4*4矩阵M
如果使用pv3d的数学类，写法如下：

var 点:number3D=new Number3D(x的值,y的值,z的值); //原来的点
var 数组:Array=[n11,n12,n13, 0,
                  n21,n22,n23, 0,
                  n31,n32,n33, 0,
                  nx , ny, nz, 1]; //构造矩阵内每个值，需要一个数组，我们通常都是以这种格式书写
var 矩阵: Matrix3D=new Matrix3D(数组); //构造矩阵
Matrix3D.multiplyVector4x4(矩阵,点); //点的x,y,z数据直接就更新为相乘后的数据了。

那么具体是用哪个矩阵M呢？下面我们就列出来：

旋转
旋转在三维里应该是最麻烦的东西，因为人类对旋转的描述是很有限。光靠矩阵控制旋转很多情况是非常复杂和不形象的，所以我们还发明了优拉角和四元数这些对旋转的控制更优良的办法，这些我们以后会讲到。

角度θ表示的是延某轴旋转的角度。
下面三个矩阵分别表示了点绕x轴，y轴，z轴的旋转矩阵。

移动
从公式我们很容易能看出，第4行1，2，3列的数，分别控制着点在x,y,z方向上的移动。

缩放
从公式我们很容易能看出，对角线上的n11,n22,n33，分别控制着点在x,y,z方向上的缩放。

这些就是最简单的变换矩阵，熟悉了这些，我们就又向前迈进了一步。
图形学应该是一个很有趣的东西，并非像很多学校和学生教授的的那种痛苦不堪的东西。其实道理非常简单，如果自己再具备一点编程知识，很容易就能做出自己的成像程序。

From:Flab3D.com

]]><![CDATA[9.0.124后loadPolicyFile失效问题]]>Wed, 06 May 2009 16:52:11 GMT在9.0.124前..我们会使用Security.loadPolicyFile()的方法来加载非根目录下的跨域文件
如Security.loadPolicyFile("http://www.conanlwl.net/demo/crossdomain.xml")
可更新9.0.124后..使用还是会报跨域错误..
这是由于9.0.124对安全策略作了一些更新..
引用
在4月份的安全更新之前，crossdomain是可以放于任何位置的，只要在代码中指定Security.loadPolicyFile即可，当然，默认的会首先去找站点根目录下（对于tomcat来说就是root了）。
不过在安全更新之后，flash的安全策略发生了一些变化。
其 中一点就是，将策略文件控制类型由原来的ALL改为了MASTER，MASTER策略文件称为主策略文件，在4月份以前，基本上没人注意这个主策略文件， 和我们常用的策略文件有什么区别。主策略文件是置放在站点根目录下，对整个站点访问权限进行约束的策略文件。这个改变使得默认的必须在站点根目录下置放 crossdomain文件，即使你在自己的站点中需要crossdomain，也必须获得主策略文件的许可。
如果这种限制，就要求一定有对服务器控制的能力，至少你要能在根目录放置文件。但是有些时候，没有这样的权限，因此，官方还提供了另一种做法，在后台代码级别允许提供策略文件来取代master策略。
以.net为例
String policyFile = "....(省略)"
Response.AppendHeader("Content-Type", "text/xml; charset=UTF-8");
Response.AppendHeader("X-Permitted-Cross-Domain-Policies", "all");
Response.Write(policyFile);
这种代码级别的做法就是，在loadPolicy时，reposonse中的header里加上("X-Permitted-Cross-Domain-Policies", "all");然后再返回policyFile。
PS:上面内容来源www.riachina.com论坛中的cimmicola于一篇文章中的回复
地址:http://www.riachina.com/showtopic-12813.aspx

按上面的方法..把原来的XML换成了由ASP提供,保存为crossdomain.aspview plaincopy to clipboardprint?

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>   
<%   
var policyFile = '<?xml version="1.0" encoding="utf-8"?>'  
policyFile += '<cross-domain-policy>'  
policyFile += '<allow-access-from domain="*.l4cd.net" />'  
policyFile += '</cross-domain-policy>'  
Response.AddHeader("Content-Type", "text/xml; charset=UTF-8");   
Response.AddHeader("X-Permitted-Cross-Domain-Policies", "all");   
Response.Write(policyFile);   
%>

 Security.loadPolicyFile("http://www.conanlwl.net/demo/crossdomain.asp")
一切解决..

 

From: http://www.l4cd.net

]]><![CDATA[AS3实现频谱与波形图]]>Wed, 06 May 2009 11:09:56 GMTAS3声音功能中最令人兴奋的新增功能之一,就是可以访问声音频谱数据.这在以往的版本中是比较难实现的,或者得借助第三方工具才能完成的,而现在,这些频谱功能给内建到SoundMixter类里的computeSpectrum().所以在编写频谱之前,我们先从AS3的帮助文档中来认识一下computeSpectrum()是什么东西.

先浏览一下效果先,点击频谱可以切换效果 (注意,浏览前,关掉或暂停其它FLASH的声音,如本页右侧的音乐播放器,computeSpectrum () 会捕捉到其它FLASH上的声音而导致沙箱安全冲突= =!)

computeSpectrum () 方法  

public static function computeSpectrum(outputArray:ByteArray, FFTMode:Boolean = false, stretchFactor:int = 0):void

获取当前声音波形的快照，并将其放在指定的 ByteArray 对象中。 这些值已设置为标准浮点值（范围为 -1.0 到 1.0）格式。新值覆盖了传递到 outputArray 参数的 ByteArray 对象。 创建的 ByteArray 对象的大小固定为 512 个浮点值，其中前 256 个值表示左声道，后 256 个值表示右声道。

参数  outputArray:ByteArray — 用于保存与声音关联的值的 ByteArray 对象。 如果由于安全性限制 (areSoundsInaccessible == true) 而导致任何声音不可用，则 outputArray 对象将保持不变。 如果停止了所有声音，则用零填充 outputArray 对象。 
 
 FFTMode:Boolean (default = false) — 一个用于指示是否首先对声音数据执行 Fourier 转换的布尔值。 将此参数设置为 true 会导致方法返回的是频谱而不是原始声音波形。 在频谱中，左侧呈现的是低频，右侧呈现的是高频。 
 
 stretchFactor:int (default = 0) — 声音采样的分辨率。 如果将 stretchFactor 值设置为 0，则会按 44.1 KHz 对数据进行采样；如果值为 1，则按 22.05 KHz 对数据进行采样；如果值为 2，则按 11.025 KHz 对数据进行采样；依此类推。 

所以我们只要建立一个字节数组,然后不断的通过该方法得到声音快照.然后通过图形运算,形象的描绘出一个阶梯状的频谱图,就是接着我要做的事情.

今天我要做的频谱效果呢,是从千千静听模仿过来的. 如图.

可见,频谱中左侧呈现的是低频,首先要从computeSpectrum ()获得频谱的数据,就必须将第二个参数FFTMode设为true.当我们获得快照以后,字节数组的长度总是为2048,而它储存的是32位单精度浮点数据,也即一个数据占4个字节,2048的长度,实际上就是存了2048/4=512个浮点数据,(经实际试验:它的值在0~1.3之间,没有找到资料有明确介绍最大值的,所以我也只是自己在实际调试中得出来的,未必最大值就是1.3)所以如果我们想要通过ByteArray的position来移动读取指针时,就必须以4的整数倍数为单位来移动.

在512个数据中,前256个是描述左声道的,而后256个是描述右声道的.而在每个声道的靠前的数字是描述低频的,靠后的数字是描述高频的.而接下来我要画的频谱,他并没有512条柱体.而只有64条柱体,所以呢.我的做法就是取左声道的连续的四个浮点数据加上右声道相应位置的四个连续的数据的总和再除于一个平均因数得出来的一个近似值来表示柱体的高度.

 整个频谱是由一个一个的柱体来组成的,所以首先我们得先用一个类来定义这个柱体,那么柱体是如何运作的呢,其实很简单,它的主要任务就是只要他的高度不为0,他就不断的缩短,在缩短的过程中,频谱数据会命令他一个新的高度,如果新的高度比它现在要高,他就自动变为指定的高度,如果比现在还要短,则无视命令,然后就接着继续缩短,直到高度为0时就等待新的指令高度.而柱体上的小方块,它的运行方式也跟柱体差不多一样,只要它不在最低点,他就不断的下降(下降的速度比柱体缩短的慢),直到有一个比它所在的高度还要高的指令时它才变为新的高度,另外,它还会不断的与柱体做碰撞检测,永远保证方块是处于柱体之上的.最低也就是放在柱体的上面.以下就是通过这个原理所描述的柱体类

import flash.display.Sprite;
import flash.utils.Timer;
import flash.events.TimerEvent;
   

class Rect extends Sprite{
    private var s:Sprite; //柱状体
    private var z:Sprite; //柱状体上的小方块
    private var timer:Timer;
    private var h:Number;
   
    public function Rect(_width:Number,_height:Number,color:uint = 0xFFFFFF){
        s = new Sprite();
       
        //画柱状体
        s.graphics.beginFill(color);
        s.graphics.drawRect(0,0,_width,_height);
        s.graphics.endFill();
       
        //旋转180度柱体才会从上往下降
        s.rotation = 180;
        s.height = 0;
        s.y = _height;
        addChild(s);
       
        h = _height;//记录最高长度
       
        var zHeight:Number = 2;//块状体高
        z = new Sprite();
        z.graphics.beginFill(0x2AEAEB);
        z.graphics.drawRect(0,0,_width,zHeight);
        z.graphics.endFill();
        z.y = _height - zHeight;
        z.rotation = 180;
        addChild(z);
       
        timer = new Timer(40);
        timer.addEventListener(TimerEvent.TIMER,onTimer);
        timer.start();
    }   
   
   
   
    private function onTimer(e:TimerEvent):void{
        if(s.height > 0){
            var speed:Number = 0.02 * h;//柱状体下降的速度
            if(speed > s.height)s.height = 0;
            else s.height -= speed;       
        }
        if(z.y + z.height >= h - s.height){
            z.y = h - s.height - z.height;
        }
        else{
            var zspeed:Number = 0.01 * h;
            z.y += zspeed;
        }
               
    }
   
    //更新柱体的高度,仅只当设置的高度比当前的高度还要高的时候才更新.
    public function update(percent:Number):void{
        if(percent>1.0) percent = 1.0;       
       
        if(s.height < h * percent){
            s.height = h * percent;
            if(z.y + z.height >= h - s.height){
            z.y = h - s.height - z.height;
            }
        }       
    }
}

接下来我们就可以读取频谱数据来画频谱图了:

 

private var s:Sprite = new Sprite();
private var Main:Sprite ;   
private var spectrum:ByteArray = new ByteArray();       
private var timer:Timer;

private var m_width:Number;
private var m_height:Number;

public function Spectrum(_width:Number = 200,_height:Number = 100)
{
    addChild(s);
    m_width = _width;
    m_height = _height;           
    prismatical(_width,_height);
}

private function prismatical(_width:Number,_height:Number):void{           
    Main = new Sprite();
    s.addChild(Main);
    for(var i:uint = 0; i<64 ; i++){
        var r:Rect = new Rect(5,_height);
        r.y = 0;
        r.x = 6 * i;
        Main.addChild(r);
        r.name = "r_" + i;
    }
    Main.width = _width;
    timer = new Timer(200);                
    if(!SoundMixer.areSoundsInaccessible()){        
        timer.addEventListener(TimerEvent.TIMER,prismatical_update);
        timer.start();
    }              
}

private function prismatical_update(e:Event):void{           
    SoundMixer.computeSpectrum(spectrum,true);
    for(var i:uint = 0; i < 64; i++){
        var a:Number = 0.0;
        spectrum.position = i * 16;//将指针移到左声道的相应位置
        a = spectrum.readFloat() + spectrum.readFloat() + spectrum.readFloat() + spectrum.readFloat();//读取4个连续的数据
       
        spectrum.position = 1024 + i * 16;//将指针移到右声道的相应位置
        a += spectrum.readFloat() + spectrum.readFloat() + spectrum.readFloat() + spectrum.readFloat();//读取4个连续的数据               
        var r:Rect = Rect(Main.getChildByName("r_" + i));
   
        r.update(a / 6);//更新柱体长度,除以一个平均因数,大家也许可以试着改一下6为其它的数字试试
    }           
}

至此阶梯频谱便已完成,看图 

接着模仿了千千静听上的另外一个波形图.

波形图的效果是我在网上的一个Blog上看到的,所以我就直接拿过来整合在一起了.原理什么的,可以直接上闪客小东's Blog 的更炫的效果来了!AS3波形图教程<二>去看吧.我就直接贴修改过的代码了. 

private var s:Sprite = new Sprite();
        private var Main:Sprite ;   
        private var spectrum:ByteArray = new ByteArray();       
        private var timer:Timer;
private function waveform(_width:Number,_height:Number):void{           
            var line:Sprite=new Sprite();
            var bmpData:BitmapData = new BitmapData(_width,_height,true,0x000000);
            var bmp:Bitmap = new Bitmap(bmpData);       
           
            //声明一个BlurFilter滤镜
            var blur:BlurFilter = new BlurFilter(7,7,BitmapFilterQuality.LOW);
            var n:Number = 0;           
            var r:Rectangle=new Rectangle(0,0,_width,_height);
            var p:Point=new Point(0,0);           
            var colorM:ColorMatrixFilter=new ColorMatrixFilter([0.9,0,0,0,0,
                                                                0,0.9,0,0,0,
                                                                0,0,0.9,0,0,
                                                                0,0,0,0.68,0,//0.68是透明因数,数值越小,背景模糊效果淡化得越快,可以试着设一下其它的值来测试更好的视觉效果
                                                                ]);
            Main = new Sprite();
            Main.blendMode=BlendMode.ADD;

            s.addChild(Main);
            Main.addChild(bmp);
            Main.addChild(line);                    
            timer = new Timer(80);     
            if(!SoundMixer.areSoundsInaccessible()){                
                timer.addEventListener(TimerEvent.TIMER,waveform_update);
                timer.start();
            }
            function waveform_update(e:TimerEvent):void{
                 n = 0;
                //这里是为了每2次才执行一次滤镜而做的if,如果需要让原来的波形图消失的更慢就把2改成更大的数字
                if(timer.currentCount%2==0){
                    //将Main的内容绘制到bmpData                   
                    bmpData.draw(Main);
                    //应用滤镜
                    bmpData.applyFilter(bmpData,r,p,colorM);
                       bmpData.applyFilter(bmpData,r,p,blur);
                }              
                //清除绘图
                line.graphics.clear();
                //设置线条样式,颜色湖蓝,宽度1,透明度100
                line.graphics.lineStyle(1,0x2AEAEB,100);           
               
                SoundMixer.computeSpectrum(spectrum);
                //左声道
                for(var i:uint=0; i < 256; i+=2){
                        //在ByteArray中读取一个32位的单精度浮点数(这个是livedoc上写的,实际就是把数据流读取成浮点数)
                        n = spectrum.readFloat();
                        //为了平滑,隔着读
                           spectrum.readFloat();//spectrum.position += 4;
                        //这个实际作用是把n扩大一下
                       // n = n*_height;
                        //如果i不为0
                        if(i!=0){
                        //画波形图
                        line.graphics.lineTo(i * _width / 256,_height * (n + 3)/ 6 );
                        }else{
                        //移动   
                        line.graphics.moveTo(0,_height * (n + 3)/ 6);
                        }
                }
                //右声道
                for(i=0; i < 256; i+=2){
                      
                        n = spectrum.readFloat();
                               spectrum.readFloat();//spectrum.position += 4;
                      
                        if(i!=0){                      
                              line.graphics.lineTo(i * _width / 256,_height * (n + 3) / 6);
                        }else{                         
                               line.graphics.moveTo(0,_height * (n + 3)/ 6);
                        }
                }
            }
        }

 

最后我偷懒,把这所有的代码都整合到一个类文件里面.....所以代码可能看起来有点吃力.. 

 点击下载类文件

调用的代码:

package {
    import flash.display.Sprite;
    import flash.media.Sound;
    import flash.net.URLRequest;
   
    import net.conanlwl.*;

    public class myTest extends Sprite
    {   
        private var s:Spectrum;
        public function myTest()
        {
            var snd:Sound = new Sound(new URLRequest("http://www.conanlwl.net/demo/Spectrum/v3.mp3"));
            snd.play();
            s = new Spectrum();
            s.addEventListener(MouseEvent.CLICK,onChangeSpectrumStyle);
            addChild(s);
        }       
        private function onChangeSpectrumStyle(e:MouseEvent):void{
            s.changeStyle();
        }   
    }
}
]]><![CDATA[关于找茬游戏如何添加新图的方法]]>Tue, 05 May 2009 17:44:09 GMT这几天都有几个朋友都有问我的那个找茬DEMO(相关帖子:大家来找茬设计思路与源码)如果要添加新的找茬图,要如何加.....看来我的代码写得不好,没人看得懂.......我在这里就写个简单的教程,介绍一下如何添加新图吧...首先下载一个找茬的资源包;

游戏图片资源原文件下载(6.37MB)

下载完解压以后,有四个文件,分别是gameData.as pic01_07.fla Music.fla 以及 图片元件.fla

首先我们必须先用PhotoShop或者其它作图软件,制作找茬的原图,制作找茬的图必须遵循以下的原则:

1.每张小图的尺寸都为371*300.
2.图片的不同数必须在5个或5个以上.
3.所有的不同处所在的矩形不能有相交,因为在玩家的眼里,两个不同处相交的话,他都会认为那是一个不同而已.
4.修改所有的不同处以后,先记录下所有不同处的大小与位置,在游戏中,全部统一不同处为一个矩形,所以就算你左右两张图片不同的地方是一个圆形的区域,我们在记录时也要记录这个圆形所占的矩形区域.
5.把修改后的图片,上下拼接起来,拼接后的图片尺寸为371*600,最后保存为PNG格式.

当按照上面的原则修改完图片并保存为PNG文件以后,我们使用FlashCS3以上版本打开资源文件里的Pic01_07.fla, 然后按菜单栏的 "文件"->"导入"->"导入到库",选择刚做完的图,按"打开"就把刚做完的图片导入到库里了.


图1

如图1所示,我导入了一张名为hello.png的图片,接着我们在hello.png上点击右键的"链接",打开链接属性面板,在"为ActionScript导出"前打勾,系统会自动帮在"在第一帧导出"打勾,然后在类那里,我们自已取一个类名,如"Kitty",基类保持默认不变,仍为"flash.display.BitmapData" ,如图2,设置完成点确定,会弹出一个警告(图3),无视点确定就行


图2


图3

 然后我们打开gameData.as文件.
在className数组里添加一个我们刚新加图片命的类名kitty.添加后的数组为:

public var className:Array = ["pic01","pic02","pic03","pic04","pic05","pic06","pic07","Kitty"];

然后在arr07数组的下面,再多添加一个数组.这是一个二维数组.第二维的每一个数组就代表一个不同处,格式为[x,y,width,height],也就是刚才在作图原则中提到的第四点所记录下来的那些数据.例如:

private var arrKitty:Array = [[67,69,76,2],[129,129,23,33],[53,70,29,48],[275,155,40,20],[281,223,37,26],[97,48,20,18],[86,184,17,14],[196,156,75,53]];

最后就是把类名与新添加的数组添加到构造函数中的pos关联数组中,

pos ={ pic01:arr01,pic02:arr02,pic03:arr03,pic04:arr04,pic05:arr05,pic06:arr06,pic07:arr07,Kitty:arrKitty};

 以下是添加新图后完整的gameData.as代码

package{
    public class gameData{
        public function gameData(){
            pos ={ pic01:arr01,pic02:arr02,pic03:arr03,pic04:arr04,pic05:arr05,pic06:arr06,pic07:arr07,Kitty:arrKitty};
            }
        public var className:Array = ["pic01","pic02","pic03","pic04","pic05","pic06","pic07","Kitty"];
        private var arr01:Array = [[31,145,55,48],[90,76,55,79],[77,0,55,79],[258,187,48,96],[292,87,51,99],[121,206,13,61],[158,177,63,52],[278,36,30,35]];
        private var arr02:Array = [[23,212,21,47],[139,132,51,37],[279,198,92,102],[262,143,62,33],[238,1,121,53],[154,242,91,19],[203,182,25,25],[97,137,34,57]];
        private var arr03:Array = [[159,198,18,46],[36,272,88,12],[16,58,41,22],[222,203,20,26],[0,218,35,43],[237,4,14,15],[270,38,55,45],[283,265,88,35]];
        private var arr04:Array = [[205,42,87,76],[264,185,107,115],[157,224,43,20],[26,142,38,40],[118,237,26,30],[0,24,148,45],[145,180,15,17],[169,146,31,22]];
        private var arr05:Array = [[95,150,65,21],[196,177,27,25],[218,63,40,54],[247,282,11,15],[309,203,22,19],[142,228,42,41],[298,152,11,14],[115,72,39,45]];
        private var arr06:Array = [[32,64,43,49],[92,44,28,30],[0,254,41,46],[43,178,33,105],[273,275,8,25],[160,41,12,25],[94,146,26,23],[177,217,16,15]];
        private var arr07:Array = [[67,80,76,22],[129,129,23,33],[23,70,29,88],[275,155,40,20],[281,223,37,26],[97,48,20,18],[86,184,17,14],[196,56,175,53]];
        private var arrKitty:Array = [[67,69,76,2],[129,129,23,33],[53,70,29,48],[275,155,40,20],[281,223,37,26],[97,48,20,18],[86,184,17,14],[196,156,75,53]];
       
        public var pos:Object;
    }
}


最后我们再回到Pic01_07.fla,在菜单栏中的"文件"->"导出"->"导出影片",命名为picture.swf,点击保存就可以了.然后把picture.swf覆盖到我们FindX游戏目录下的picture文件夹下的相同文件就可以了.

其实大家可能会想gameData.as里的数据也给编译到了picture.swf里面去了吗?细心的朋友可能就会发现,我在pic01_07.fla文件的第一帧里我写了一句代码:

var g:gameData = new gameData();

里面的import gameData;因为pic01_07.fla与gameData.as是在同一目录下,所以这一句其实是可以不写的,我多写了一句,也没删了.

FLASH在编译的时候,为了节省空间,所以他不会把完全没有调用到的类编译到SWF文件里面去,所以如果没有
var g:gameData = new gameData();这一句的话,gameData.as是不会给编译进SWF文件里的,所以我就随便声明了一下变量,(证明我路过,提高知名度..= =!),告诉FLASH,gameData.as我是用过的,你必须把它编译进去..至此我们就可以添加新的图片到游戏里面去了.

如果你想修改背景音乐,可以打开Music.fla,在库列表里的ne.mp3上点击右键的"属性",打开属性面板


图4

点击"导入",选择新的声音文件,然后确定以后.再导出为SWF影片,并命名为Music.swf,然后覆盖到游戏目录里的Source文件夹下的同名文件就可以了.

最后图片文件.fla是游戏界面的一些图片,你也可以根据自己的需要修改图片,注意每一张图片在右键的"链接"里都有对应的类名,不要搞错了就行了.最后导出为item.swf文件,并覆盖到游戏目录下的Source文件夹下的同名文件就可以了.

至此,游戏的人机界面设计方面的就已经完成了..希望哪位朋友能帮我这个很囧的界面做个好看一点的.

]]><![CDATA[经典红白机游戏音乐]]>Wed, 15 Apr 2009 00:28:48 GMT

 

我想只有我们这些八零后的人玩FC玩得最多吧.90后的几乎都玩16位或者PS游戏去了,我只有我们才会时不时地去缅怀一下这些经典的红白机游戏吧.

在上面的这个FLASH里的收集的音乐,很多都不是游戏原声音乐,都是重奏版,这些音乐虽是出于FC游戏时代,但其音乐旋律绝不逊于当今的一些游戏.

 

]]>