POPSブログ

マウス移動で星型を作りエフェクトする

103

  Category:  as32012/05/04 pops 

AS時代のときから在る単純「なマウス移動エフェクト」で在る。星型、円、輪などが指定できるようにした。


マウス移動で星型を作りエフェクトする

とりわけ目新しいものではない。AS3では createEmptyMovieClip が無くなったから、必要な数だけ Sprite などで作るだけである。
図形を作る部分はクラス化して、星型、円、輪などが指定できるようにしてみた。少し改造すれば色々と使い道もあろう。


ステージの上でマウスを動かしてください。


AS3

FlashTest273.as


//FlashTest273
//マウス移動で 円 星型 を作り散らす
//BlurFilterは使用していない

package {

	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;
	import flash.text.*;
	import flash.filters.BlurFilter;
	
	[SWF(width = 465, height = 465, backgroundColor = 0x000000, frameRate = 30)]
 
	public class FlashTest273 extends Sprite {
		
		private var sw:Number = stage.stageWidth;
		private var sh:Number = stage.stageHeight;
		
        	public function FlashTest273 () {
			
			//MouseEvent Listener設定/MOVEした時
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
			
			//MouseEvent
			function mouseMove(e:MouseEvent):void {
				
				//MouseEventがあったら要素を作る/何でもBallにする癖がある
				var hoverBall:Sprite = new Sprite();
				//マウス位置取得し、hoverBall要素の位置とする
				hoverBall.x = mouseX;
				hoverBall.y = mouseY;
				addChild(hoverBall);
				//Ballクラスで図形を作り挿入する
				var sp:Sprite = new Ball();
				
				//BlurFilter/段階的に使用しないと効果なし、ぼけるだけ
				//要素が大きければ効果があるだろう
				//var fBlur:BlurFilter = new BlurFilter(1,1,2);
				//sp.filters = [fBlur];
				
				//Ballクラスで作ったspをhoverBall(Sprite)にaddChild
				hoverBall.addChild(sp);
				
				//要素hoverBallの行き先用の数値
				var px:Number = Math.random() * sw;
				var py:Number = Math.random() * sh;
				
				//hoverBallの動作Listener
				hoverBall.addEventListener(Event.ENTER_FRAME, hBallEnterframe);
				
				//hoverBallの動作、Enterframeアクション
				function hBallEnterframe(e:Event):void {
					//加速度をつける
					hoverBall.x += (px - hoverBall.x) / 80;
					hoverBall.y += (py - hoverBall.y) / 80;
					//スケールを徐々に大きく
					hoverBall.scaleX += 0.02;
					hoverBall.scaleY += 0.02;
					//回転させる
					hoverBall.rotation += 5;
					//透明にしてゆく
					hoverBall.alpha -= 0.01;
					//alphaが0になったら、要素のアクションを削除、要素も削除
					if (hoverBall.alpha < 0 ) {
						hoverBall.removeEventListener(Event.ENTER_FRAME,hBallEnterframe);
						removeChild(hoverBall);
					}
				}
				
			}
		}
		
	}
}

//Ball CLASS 円または星型を作る、色はランダム
import flash.display.*;
import flash.geom.*;

class Ball extends Sprite {
	
	//円
	private var circle_radius:Number = 2;//半径
	//星型 十字形 3-6
	private var split:int = 4;//星型分割数 4 通常十字形
	private var radius1:Number = 5;//外半径 4-6
	private var radius2:Number = 1;//内径半径 1-2
	//形の指定 Circle Star Ring
	//Ring指定の場合線幅は固定です、変更できません
	private var ball_name:String = "Star";//Circle Star Ring
	//大きさをランダムで変える Randomの指定
	private var radius_random:String = "none";//none Random
	
	public function Ball() {
		//描画に進む
		ball_draw();
	}
		
	private function ball_draw():void {
		
		var random_v:Number;
		//大きさをランダムで変える
		if (radius_random == 'Random') {
			random_v = 0.5 + Math.random() * 3;
			circle_radius *= random_v;
			radius1 *= random_v;
			radius2 *= random_v;
		}
		
		var s:Sprite = new Sprite();//容器作成
		var color:uint = Math.random() * 0x1000000;//ランダム色
		
		if (ball_name == 'Circle') {
			// 円を描画作成
			s.graphics.beginFill(color, 1);
			s.graphics.drawCircle(0, 0, circle_radius);
			s.graphics.endFill();
		}
		if (ball_name == 'Ring') {
			// リングを描画作成
			s.graphics.lineStyle(2, color);
			s.graphics.drawCircle(0, 0, circle_radius);
		}
		if (ball_name == 'Star') {
			//星型の描画作成
			var angle:Number = 2 * Math.PI / split;
			var p1:Point, p2:Point;
			s.graphics.beginFill(color, 1);
			s.graphics.moveTo(radius1, 0);
			for(var i:int = 0; i < split; i++) {
				p1 = Point.polar(radius2, angle * (i + 0.5));
				p2 = Point.polar(radius1, angle * (i + 1));
				s.graphics.lineTo(p1.x, p1.y);
				s.graphics.lineTo(p2.x, p2.y);
			}
			s.graphics.endFill();
		}		
		//addChild
		addChild(s);
		
	}
}

以上です。



[ この記事のURL ]


タグ:flash , ActionScript , as3

 

ブログ記事一覧

年別アーカイブ一覧



[1]