Hatena::ブログ(Diary)

PHP,MySQL,Flex,JSな日々+イラストとか このページをアンテナに追加 RSSフィード Twitter

2008年09月18日

桜パーティクル

ちょっと季節外れですが桜パーティクルをやってみました。

こんな感じ

http://moeten.info/flex/20080918_sakuraParticleTest/bin-release/main.html

f:id:haru-komugi:20080918215658j:image

ちょっと重いかも(^^;

ソースコードは右クリックから見れます。

ちょっとした解説

今回は画像の切り分けをしてみました。

小さい画像をたくさん作ってそこに元画像をずらしながら描画(コピ−)していきます。

for (i = 0; i < myPhoto.height/h - 1; i++ )
{
    for (j = 0; j < myPhoto.width/w - 1 ; j++ )
    {
        //小さい画像作成
        var bd:BitmapData = new BitmapData( w , h );
        //ちょっとづつずらして描画
        var mat:Matrix = new Matrix();
        mat.translate( -w * j , -h * i );
        bd.draw( myPhoto , mat);
        var im:Image = new Image();
        im.width  = w;
        im.height = h;
        im.source = new Bitmap( bd );
    }
}

パーティクルのほうはどうもクラス化がうまくできなかったので普通の関数として作成しました。

パーティクルって初速度や回転などがあるのがパーティクルなのかなぁって認識してます。

ってことで配列を作ってあとは EnterFrame で分回します。

参考リンクと今後の参考にしたいページ

桜パーティクル main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" backgroundAlpha="1" backgroundColor="0xffffff"
    backgroundGradientAlphas="[1,1]" backgroundGradientColors="[0xffffff,0xffccff]"
    viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.events.EffectEvent;
import mx.effects.*;
import mx.effects.easing.*
[Embed(source='sakura.png')]private var flower:Class
//初期化関数
private function init():void{
    //マウスムーブでサクラパーティクル
    this.addEventListener(MouseEvent.MOUSE_MOVE , function(e:MouseEvent):void{
        makeParticle( e.target.mouseX , e.target.mouseY  );
    });
    //画像を分割して配列に保存
    var i:int = 0;
    var j:int = 0;
    //区切る大きさ
    var w:int = 50;
    var h:int = 50;
    // パーティクルを分割して保存するループ
    for (i = 0; i < myPhoto.height/h - 1; i++ )
    {
        for (j = 0; j < myPhoto.width/w - 1 ; j++ )
        {
            //小さい画像作成
            var bd:BitmapData = new BitmapData( w , h );
            //ちょっとづつずらして描画
            var mat:Matrix = new Matrix();
            mat.translate( -w * j , -h * i );
            bd.draw( myPhoto , mat);
            var im:Image = new Image();
            im.mouseEnabled = false;
            im.cacheAsBitmap = true;
            im.alpha  = 0;
            im.width  = w;
            im.height = h;
            im.source = new Bitmap( bd );
            myImage.addChild( im );
            //エフェクト追加
            var m:Move = new Move();
            m.easingFunction = Cubic.easeOut;
            m.startDelay = 300*i + 300*j;
            m.duration   = 2000;
            m.xFrom      = i*w+200;
            m.yFrom      = 0;
            m.xTo        = j * w +80;
            m.yTo        = i * h +80;
            m.addEventListener(EffectEvent.EFFECT_END,function(e:Event):void{
                var t:Move = e.target as Move;
                //桜パーティクルの作成
                makeParticle( t.xTo + w/2 , t.yTo + h/2 );
            });
            var f:Fade   = new Fade();
            f.startDelay = 300*i + 300*j;
            f.duration   = 3000;
            f.alphaFrom  = 0;
            f.alphaTo    = 1;
            var g:Glow   = new Glow();
            g.color      = 0xffffff;
            g.blurXFrom  = 20;
            g.blurYFrom  = 20;
            g.blurXTo    = 0;
            g.blurYTo    = 0;
            g.alphaFrom  = 1;
            g.alphaTo    = 0;
            g.strength   = 5;
            g.duration   = 1000;
            g.startDelay = 300*i + 300*j + 2000;
            /*
            var r:Resize = new Resize();
            //r.startDelay = 300*i + 300*j;
            r.duration   = 5000;
            r.widthFrom  = 0;
            r.heightFrom = 0;
            r.widthTo    = w;
            r.heightTo   = h;
            var d:Dissolve = new Dissolve();
            d.startDelay = 300*i + 300*j + 2000;
            d.color     = 0xffffff;
            d.alphaFrom = 1;
            d.alphaTo   = 0;
            d.duration  = 400;
            */
            //エフェクトの実行
            var pa:Parallel = new Parallel();
            pa.addChild( m );
            pa.addChild( f );
            pa.addChild( g );
            //pa.addChild( r );
            //pa.addChild( d );
            pa.play([im]);
        }
    }
}
//パーティクル作成
private var _vol:Number     = 5;
private var _drag:Number    = 0.9;
private var _shrink:Number  = 0.95;
private var _gravity:Number = 0.8;
private var _fade:Number    = 0.02;
private var _wind:Number    = 0.3;
private var xVelArr:Array   = new Array();
private var yVelArr:Array   = new Array();
private var rotArr:Array    = new Array();
private var cnt:int         = 0;
private function makeParticle(x:Number,y:Number):void{
    _gravity = -0.2;
    _wind    = -0.2;
    for (var i:uint = 0; i < 2; i++){
        var pt:Point = getNearPoint( new Point( x , y ) );
        var mc:Bitmap = new flower();
        mc.x    = pt.x;
        mc.y    = pt.y;
        mc.alpha = Math.random()*1;
        mc.name = "" + cnt;
        xVelArr[cnt] = getRandRange( -5, 5);
        yVelArr[cnt] = getRandRange( -5, 5);
        rotArr[cnt]  = getRandRange( -20, 20);
        mc.addEventListener(Event.ENTER_FRAME, function(e:Event):void{
            var m:Bitmap = e.target as Bitmap;
            m.filters = [gf];
            if ( m.alpha > 0){
                var c:int     = int( m.name );
                m.x          += xVelArr[c] + _wind * 10;
                m.y          += yVelArr[c];
                xVelArr[c]   *= _drag;
                yVelArr[c]   *= _drag;
                m.scaleX     *= _shrink;
                m.scaleY     *= _shrink;
                yVelArr[cnt] += _gravity;
                m.alpha      -= _fade;
                m.rotation   += rotArr[c];
            }else{
                m.removeEventListener(Event.ENTER_FRAME, arguments.callee);
                myImage.removeChild(m);
                m = null;
            }
        });
        cnt ++;
        myImage.addChild( mc );
    }
}
private function getRandRange(min:Number, max:Number):Number{
    var randomNum:Number = (Math.random() * (max - min )) + min;
    return randomNum;
}
private function getNearPoint(pt1:Point):Point{
    var len:uint   = Math.round(Math.random() * 10);
    var angle:uint = Math.round(Math.random() * 2 * Math.PI);
    var pt2:Point  = Point.polar(len, angle);
    pt2.offset( pt1.x, pt1.y );
    return pt2;
}
]]>
</mx:Script>
<mx:GlowFilter id="gf" blurX="16" blurY="16" color="0xffccff" />
<mx:BlurFilter id="bf" blurX="16" blurY="16"/>
<mx:Fade id="myShow" startDelay="8000" duration="1000"
    alphaFrom="0" alphaTo="0.8"/>
<mx:Image id="myImage" width="{myPhoto.width}" height="{myPhoto.height}"/>
<mx:Image id="myPhoto2" filters="{[bf]}"  source="@Embed('_MG_4374s.jpg')"
    creationCompleteEffect="myShow" x="80" y="80" alpha="0"
    width="{myPhoto.width}" height="{myPhoto.height}" blendMode="screen"/>
<mx:Image id="myPhoto" source="@Embed('_MG_4374s.jpg')" visible="false"/>
</mx:Application>

CedricCedric 2009/09/13 00:25 Hey, great example. It's nice to see Japanese Flex developer. I hope it will get more and more popular.

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証