POPSブログ

文字を分解してアニメ処理で表示/6

77

  Category:  as32012/04/07 pops 

文字を分解してアニメ処理で表示する6、複数文字を配置してアニメさせるようにして見ました。前のものと違い複数の文字列を一括して処理するクラスにしました。


文字を分解してアニメ処理で表示6


文字を分解してアニメ処理するクラスは、一種類の文字なら簡単でしたが、「複数の文字種」を処理する場合に複雑面倒になりますので、「一括して文字列を処理する」クラスにして、少し簡単になるように改良しました。どちらも一長一短あります。


FlashTest180.swf


2文字をEmbedしました。AS2のSWFをEmbedしました。AS2のSWFをEmbedする場合はコードの無い原点00のものなら問題は無いようです。コードのあるものはloadしないと作動に問題がおきます。


簡単な説明

1. 前のものとほぼ同様ですが、複数文字を受け渡します。z軸の指定は処理の途中で使用者が設定ください。
(_sansなどEmbedしないで使用する場合、[対象Sprite]に z=0 設定で回転させても表示できます。但しY軸に少しズレがでる場合あり。容認できる範囲内です。)
2. 文字間隔の調整の数値は、クラスで-4しますので、それを考慮した値を記入ください。
3. 文字位置のデータは、取得したクラスの配列にアクセスして取得する特殊な形態です。
4. 位置情報などの配列は番号違いになっていますので、ある程度わかるとおもいます。
5. 複数の文字アニメをする場合は、少し簡単になるとおもいます、、。
6. 一例として複数の文字アニメを連続させてみました。面倒なことには変わりありません。


簡単な設定の説明


クラスにアクセスする場合の記載方法

//classで文字を作る
var box1_v:MakeTextLine = new MakeTextLine(
	mvlinetext1,		// String 全ての文字
	mvtextColor,		// uint 0xFFFFFF 文字色自由
	60,			// Number 60 文字サイズ自由
	'rainbow',		// String normal random rainbow 色指定
	'mask',		// String mask none グラデーションマスク
	'font',		// String Embed-fontName font _sans arial _ゴシック
	-6,			// Number Space -4は引いてあるので差を入力
	true			// embedFonts true false embed文字使用の場合true
);

new MakeTextLine()実行の後つぎのようにして位置情報などの配列を取得ください

//class配列を取り込む
sps1 = box1_v.txsBoxArrays;//Sprite
cxs1 = box1_v.cxsArrays;//x位置
cys1 = box1_v.cysArrays;//y位置

Y軸は0になっていますので、問題のある場合は下のようにして修正します
通常は修正しないで使用することが多いとおもいます。最初原点は 00 にあります。

まだ、addChildされて居ないので addChild する、原点でもステージの外でも良い

//addChild-container
//Y軸を下に下げる、キャプチャーデータにあわせる
var i:int = 0;
for (i = 0; i < txline1; i++) {
	sps1[i].x = cxs1[i];
	cys1[i] += sps1[0].height / 2;//修正、下に下げる
	sps1[i].y = cys1[i];
	text_container.addChild(sps1[i]);
}

文字列が配置された場合の大きさは次ぎのように計算できます
ここではビットマップデータをキャプチャーで使用するために計算しています
通常は余り必要ではありません

boxWidth_1 = sps1[txline1 - 1].x + sps1[txline1 - 1].width / 2;
boxHeight_1 = sps1[0].height;

色々なアニメを他の関数で行う場合は、配列のデータを利用します
コンテナにaddChildした形でのクラス化も可能とはおもいますが、このほうが簡単です
応用するのに利便性があります

---------------------------------------------------------------

_sansなどEmbedしないで使用する場合、z 設定で回転させても表示できます。
Embedしている文字では必要在りません 例

sps1[i].z = 0;


AS3

FlashTest180.as


//動く文字表示テスト
//複数文字のグラデーションマスククラス
//MakeTextLineを使用して簡略化
//FlashTest180
package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.geom.*;
	import flash.system.*;
	import flash.utils.*;
	import flash.text.*;
	
	import flash.filters.GlowFilter;
	import flash.filters.DropShadowFilter;
	import flash.filters.BitmapFilterQuality;
	
	//TweenLite
	import com.greensock.*;
	import com.greensock.easing.*;
	
	//虹色用
	import frocessing.color.ColorHSV;
	
	[SWF(width="465", height="465", frameRate="60", backgroundColor="0x000000")]

	public class FlashTest180 extends Sprite
	{

		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		private var layer3:Sprite;
		private var layer4:Sprite;
		private var container:Sprite;
		private var mv_container:Sprite;
		private var text_container:Sprite;
		private var layer5:Sprite;
		private var layer6:Sprite;
		private var layer7:Sprite;
		private var layer8:Sprite;
		
		private var tf:TextField;
		
		//大きさ/未使用
		private var boxWidth:Number = 400;
		private var boxHeight:Number = 300;
		//特殊処理大きさ受け渡し
		private var boxWidth_1:Number;
		private var boxHeight_1:Number;
		
		//BIG-MOVE-TEXT-1
		private var mvlinetext1:String;
		private var txline1:int;
		//格納容器1
		private var tx_w1:Array = [];//TextFieldの幅
		private var tx_h1:Array = [];//TextFieldの高さ
		private var sps1:Array = [];//要素Sprite格納容器
		private var cxs1:Array = [];//X位置格納容器
		private var cys1:Array = [];//Y位置格納容器
		
		//MOVE-TEXT-2
		private var mvlinetext2:String;
		private var txline2:int;
		//格納容器2
		private var tx_w2:Array = [];//TextFieldの幅
		private var tx_h2:Array = [];//TextFieldの高さ
		private var sps2:Array = [];//要素Sprite格納容器
		private var cxs2:Array = [];//X位置格納容器
		private var cys2:Array = [];//Y位置格納容器
		
		//MOVE3テキスト
		private var mvlinetext3:String;
		private var txline3:int;
		//格納容器3
		private var tx_w3:Array = [];//TextFieldの幅
		private var tx_h3:Array = [];//TextFieldの高さ
		private var sps3:Array = [];//要素Sprite格納容器
		private var cxs3:Array = [];//X位置格納容器
		private var cys3:Array = [];//Y位置格納容器
		
		//Fontの大きさの受け渡し寸法/未使用
		private var font_WV:Number;
		private var font_HV:Number;
		//delay終了判定
		private var delayflag:int = 0;
		
		//注意 複数種類Embedの場合はそのつどClassを設定する、下のようになる、違ったらコンパイルできない
		[Embed(systemFont = "GauFontMilkChoco", fontName = "font", mimeType = "application/x-font")]
		private var embedFont:Class;
		[Embed(systemFont = "Eras Bold ITC", fontName = "font2", mimeType = "application/x-font")]
		private var embedFont2:Class;
		[Embed(source = 'assets/illustmc401.swf')]
		private var mc2:Class;
		
		public function FlashTest180 ():void
		{
			//ステージ
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.HIGH;
			//stage.scaleMode = StageScaleMode.NO_SCALE;//スライドカバーが機能しなくなるので使用しない
			stage.fullScreenSourceRect = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
			//ステージACTION
			stage.addEventListener(MouseEvent.CLICK,function(e:Event):void{
				stage.displayState = (StageDisplayState.FULL_SCREEN==stage.displayState)?StageDisplayState.NORMAL:StageDisplayState.FULL_SCREEN
			});
			
			//BASE/黒背景
			var square:Sprite = new Sprite();
			square.graphics.beginFill(0x000000);//0x000000
			square.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			square.graphics.endFill();
			addChild(square);
			
			//グラデ背景Sprite/0xB18D8D,0x000000/0x25B7C0, 0x000000/0x009CD1, 0x343D55/0xDA709D, 0x000000/
			var grad_square:Sprite = draw_grad_box(stage.stageWidth, stage.stageHeight, 0xDA709D, 0x000000);
			addChild(grad_square);
			
			//container/stage大きさで透過BOX 0 0原点
			container = createSquare(0, 0, stage.stageWidth, stage.stageHeight, 0x000000, 0);
			container.x = 0;
			container.y = 0;
			addChild(container);
			container.visible = false;
			
			//layer5/BIG 収納用
			layer5 = new Sprite();
			layer5.x = 0;
			layer5.y = 170;
			addChild(layer5);
			
			//特殊用途
			text_container=createSquare(0, 0, stage.stageWidth, 60, 0x000000, 0);
			layer5.addChild(text_container);
			text_container.y = 0;
			
			//BIG2 収納用
			layer6 = new Sprite();
			layer6.x = 0;
			layer6.y = 200;
			addChild(layer6);
			
			//通常文字収納用
			layer7 = new Sprite();
			layer7.x = 0;
			layer7.y = 300;
			addChild(layer7);
			
			//特殊処理BitmapData収納用
			layer8 = new Sprite();
			layer8.x = 0;
			layer8.y = 50;
			addChild(layer8);
			
			//text
			tf = createTextField(10, 5, stage.stageWidth - 20, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "動く文字表示テスト2 FlashTest106";
			addChild(tf);
					
			//GOTO-INIT
			init();
		}

		// INIT
		private function init():void
		{
			//MOVE1テキストに進む
			make_MoveText1();//時間がかかる
			
		}
		
		// MAIN-ACTION1
		private function main_action():void{
			//main_action as3 hear
			tf.text = "MAIN-ACTION 1";
			
			//container表示処理
			//FADEするためalpha 0
			container.alpha = 0;
			//AS2 SWFなのでそのままいれる
			container.addChild(new(mc2));
			//WELCOME-TEXT
			var result:TextField = new TextField();
			var fmt:TextFormat = new TextFormat();
			//CENTERにするとスペースがなくなる
			fmt.size = 60;//60
			fmt.font = 'font2';
			result.defaultTextFormat = fmt;
			result.text = 'WELCOME';
			result.autoSize = TextFieldAutoSize.CENTER;//autoSizeでなければならない
			result.textColor = 0xFF87B1;
			result.background = false;
			result.embedFonts = true;
			result.selectable = false;
			result.y = 380;
			result.x = (stage.stageWidth - result.width) / 2;
			//Filter
			var param:DropShadowFilter = new DropShadowFilter(5,45,0x000000,0.7,5,5,0.65,BitmapFilterQuality.HIGH,false,false);
			result.filters = new Array(param);
			container.addChild(result);
			//containerに収容/falseなのでtrueにする、中身の画像はalpha 0
			container.visible = true;
			
			//TweenFadeIn/Finish main_action2に進む
			TweenLite.to(container, 2, { delay:2, alpha:1, onComplete:function():void {
					//Finish main_action2に進む
					main_action2();
			}});

		}
		
		// MAIN-ACTION2
		private function main_action2():void {
			tf.text = "MAIN-ACTION 2";
			
			//layer7 MOVE3テキスト文字を一旦けす ステージ外に移動
			layer7.visible = false;
			layer7.x = stage.stageWidth;
			
			//処理用受け渡しの大きさboxWidth_1 boxHeight_1
			//graphicsで描画されたベクターをビットマップデータをキャプチャー機能でBitmapDataにする
			var bmd:BitmapData = new BitmapData(boxWidth_1, boxHeight_1, true , 0x000000);
			var matrix : Matrix = new Matrix(1,0,0,1,0,0);
			var color : ColorTransform = new ColorTransform(1, 1, 1, 1, 0, 0, 0, 0);
			//原点がずれているのでずらす
			var rect : Rectangle = new Rectangle(0, 0, boxWidth_1, boxHeight_1);
			//BitmapData/text_container
			bmd.draw(text_container, matrix, color, BlendMode.NORMAL, rect, true);
			
			//テスト書き出しlayer5 bmdに受け渡す
			var cap_box:Sprite = createSquare(0, 0, boxWidth_1, boxHeight_1, 0x000000, 0);
			
			//addChild
			layer8.addChild(cap_box);
			//layerの表示位置にあわせる
			layer8.x = 30;
			layer8.y = 170;
			
			//分割表示クラスを実行する
			var bitmap:Bitmap = new Bitmap(bmd);
			//var we:WindEffect = new WindEffect(cap_box, bitmap);
			addChild(new WindEffect(cap_box, bitmap));
			
			//MOVE1テキスト文字を一旦消す
			//上のtext_containerはビットマップであるのでそれなりの処理が出来る
			text_container.visible = false;
			
			//MOVE2テキスト文字mvtext_sp保存値を使用ステージ外に移動
			delayflag = 0;
			//逆転係数
			var mv_chg:int = 1;
			for (var i:int = 0; i < txline2; i++) {
				//Tween2
				TweenLite.to(sps2[i], 0.8, { delay: i * 0.25 + 2, alpha:1, x: stage.stageWidth * mv_chg, y:0 , onComplete:function():void {
					//main_action3に進む
					if (delayflag == txline2 - 1) { main_action3(); }
					delayflag += 1;
				}});
				//逆転係数
				mv_chg *= -1;
			}
		}
		
		// MAIN-ACTION3
		private function main_action3():void {
			delayflag = 0;
			removeChild(layer8);
			tf.text = "";
		}
		
		//MOVE1テキスト
		private function make_MoveText1():void {
			delayflag = 0;
			tf.text = "処理 1";
			mvlinetext1 = "SlideShow";//全ての文字
			var tweentime:Number = 2;//tweentime
			var generation:Number = 1;//delay
			var angle:Number;//角度
			//出来上がった文字列全体の大きさ
			var mvtext_Width:Number = 0;
			var mvtext_Height:Number = 0;
			var mv_chg:int = 1;
			//length
			txline1 = mvlinetext1.length;
			var mvtextColor:uint = 0xFFFFFF;
			
			//layer全体の表示位置
			layer5.x = 30;
			layer5.y = 170;
			
			//classで文字を作る
			var box1_v:MakeTextLine = new MakeTextLine(
					mvlinetext1,		// String 全ての文字
					mvtextColor,		// uint 0xFFFFFF 文字色自由
					60,					// Number 60 文字サイズ自由
					'rainbow',			// String normal random rainbow 色指定
					'mask',				// String mask none グラデーションマスク
					'font',				// String Embed-fontName font _sans arial _ゴシック
					-6,					// Number Space -4は引いてあるので差を入力
					true				// embedFonts true false embed文字使用の場合true
			);
				
			//class配列を取り込む
			sps1 = box1_v.txsBoxArrays;//Sprite
			cxs1 = box1_v.cxsArrays;//x位置
			cys1 = box1_v.cysArrays;//y位置
			
			//addChild-container
			//Y軸を下に下げる、キャプチャーデータにあわせる
			var i:int = 0;
			for (i = 0; i < txline1; i++) {
				sps1[i].x = cxs1[i];
				cys1[i] += sps1[0].height / 2;//修正、下に下げる
				sps1[i].y = cys1[i];
				text_container.addChild(sps1[i]);
			}
			//重要、特殊処理大きさ受け渡し/ビットマップデータをキャプチャーで使用する
			boxWidth_1 = sps1[txline1 - 1].x + sps1[txline1 - 1].width / 2;
			boxHeight_1 = sps1[0].height;
			
			//Animateの設定
			for (i = 0; i < txline1; i++) {
				//初期位置等変更
				sps1[i].x = (stage.stageWidth/2 + 300)*mv_chg;
				sps1[i].rotation = 180;
				sps1[i].scaleX = 0.4;
				sps1[i].scaleY = 0.4;
				//delay
				generation += 0.25;//0,2-0.5秒
				
				//Animateの実行
				TweenLite.to(sps1[i], tweentime, { delay:generation, alpha:1, x:cxs1[i], y:cys1[i] , scaleX:1, scaleY:1, rotation:0, ease:Back.easeOut, onComplete:function():void {
					//Finish
					if (delayflag == txline1 - 1) { onFinishTween1(); }
					delayflag ++;
				}});
				
				//逆転係数
				mv_chg *= -1;
			}
			
		}
		
		//MOVEテキスト2
		private function make_MoveText2():void {
			delayflag = 0;
			tf.text = "処理 2";
			mvlinetext2 = "POPS WEB KOUBOU";//全ての文字
			var tweentime:Number = 1;//tweentime
			var generation:Number = 0.5;//delay
			var angle:Number;//角度
			//出来上がった文字列全体の大きさ
			var mvtext_Width:Number = 0;
			var mvtext_Height:Number = 0;
			var mv_chg:int = 1;
			//length
			txline2 = mvlinetext2.length;
			var mvtextColor:uint = 0xFFFFFF;
			
			//layer全体の表示位置
			layer6.x = 35;
			layer6.y = 250;
			
			//GlowFilter
			var glowFilter:GlowFilter = new GlowFilter(
				0xFFFFFF,		// color (縁取りの色)
				1,				// alpha
				3,				// blurX (X方向の幅: 8px)
				3,				// blurY (Y方向の幅: 8px)
				2,				// strength (ある程度大きい値)
				1,				// quality 適用回数
				false,			// inner 内側かどうか
				true			// knockout trueならグロー以外を消す
			)

			//classで文字を作る
			var box2_v:MakeTextLine = new MakeTextLine(
					mvlinetext2,		// String 全ての文字
					mvtextColor,		// uint 0xFFFFFF 文字色自由
					40,					// Number 60 文字サイズ自由
					'normal',			// String normal random rainbow 色指定
					'none',				// String mask none グラデーションマスク
					'font2',			// String Embed-fontName font _sans arial _ゴシック
					-2,					// Number Space -4は引いてあるので差を入力
					true				// embedFonts true false embed文字使用の場合true
			);
				
			//class配列を取り込む
			sps2 = box2_v.txsBoxArrays;//Sprite
			cxs2 = box2_v.cxsArrays;//x位置
			cys2 = box2_v.cysArrays;//y位置
			//addChild-container
			var i:int = 0;
			for (i = 0; i < txline2; i++) {
				sps2[i].x = cxs2[i];
				sps2[i].y = cys2[i];
				layer6.addChild(sps2[i]);
			}
				
			for (i = 0; i < txline2; i++) {
				//GradientGlowFilter
				sps2[i].filters = [glowFilter];
				//初期位置等変更
				angle = Math.random() * 360;
				sps2[i].alpha = 0;
				//角度で位置を割り振る
				sps2[i].x = stage.stageWidth/2*Math.cos(angle);
				sps2[i].y = stage.stageWidth/2*Math.sin(angle);
				sps2[i].rotation = 180;
				sps2[i].scaleX = 10;
				sps2[i].scaleY = 10;
				//delay
				generation += 0.5;//
				
				//Animateの実行
				TweenLite.to(sps2[i], tweentime, { delay:generation, alpha:1, x:cxs2[i], y:cys2[i] , scaleX:1, scaleY:1, rotation:0, onComplete:function():void {
					//Finish
					if (delayflag == txline2 - 1) { onFinishTween2(); }
					delayflag ++;
				}});
				
				//逆転係数
				mv_chg *= -1;
			}
			
		}
		
		//MOVE3テキスト
		private function make_MoveText3():void {
			delayflag = 0;
			tf.text = "処理 3";
			mvlinetext3 = "これは通常文字MOVEテキストのテストです---------------";//全ての文字
			var tweentime:Number = 0.5;//tweentime
			var generation:Number = 0.2;//delay
			var angle:Number;//角度
			//出来上がった文字列全体の大きさ
			var mvtext_Width:Number = 0;
			var mvtext_Height:Number = 0;
			var mv_chg:int = 1;
			//length
			txline3 = mvlinetext3.length;
			var mvtextColor:uint = 0xFFFFFF;
			
			//layer全体の表示位置
			layer7.x = 35;
			layer7.y = 300;

			//classで文字を作る
			var box3_v:MakeTextLine = new MakeTextLine(
					mvlinetext3,		// String 全ての文字
					mvtextColor,		// uint 0xFFFFFF 文字色自由
					16,					// Number 60 文字サイズ自由
					'normal',			// String normal random rainbow 色指定
					'none',				// String mask none グラデーションマスク
					'_ゴシック',			// String Embed-fontName font _sans arial _ゴシック
					0,					// Number Space -4は引いてあるので差を入力
					false				// embedFonts true false embed文字使用の場合true
			);
				
			//class配列を取り込む
			sps3 = box3_v.txsBoxArrays;//Sprite
			cxs3 = box3_v.cxsArrays;//x位置
			cys3 = box3_v.cysArrays;//y位置
			//addChild-container
			var i:int = 0;
			for (i = 0; i < txline3; i++) {
				sps3[i].x = cxs3[i];
				sps3[i].y = cys3[i];
				layer7.addChild(sps3[i]);
			}

			for (i = 0; i < txline3; i++) {
				
				//初期位置等変更/zはこちらで設定する
				sps3[i].alpha = 0;
				//角度で位置を割り振る/交互にY方向だけかえる
				sps3[i].y = stage.stageWidth / 2 * mv_chg;
				//sps3[i].z = 0;
				sps3[i].rotation = 0;
				sps3[i].scaleX = 1;
				sps3[i].scaleY = 1;
				
				//delay
				generation += 0.2;//0,2秒
				
				//Animateの実行
				TweenLite.to(sps3[i], tweentime, { delay:generation, alpha:1, x:cxs3[i], y:cys3[i] , scaleX:1, scaleY:1, rotation:0, onComplete:function():void {
					//Finish
					if (delayflag == txline3 - 1) { onFinishTween3(); }
					delayflag ++;
				}});
				
				//逆転係数
				mv_chg *= -1;
			}
		}
		
		//Finish終了処理1
		private function onFinishTween1():void
		{
			delayflag = 0;
			//MOVE2テキストに行く
			make_MoveText2();
		}
		//Finish終了処理2
		private function onFinishTween2():void
		{
			delayflag = 0;
			//MOVE3テキストに行く
			make_MoveText3();
		}
		//Finish終了処理3
		private function onFinishTween3():void
		{
			delayflag = 0;
			//main_actionに行く
			main_action();
		}
		
		//create-GradBox
		private function draw_grad_box(w:uint, h:uint, color1:uint, color2:uint):Sprite {
			var gb:Sprite = new Sprite();
			var colors:Array = [color1, color2];
			var alphas:Array = [1, 1];
			var ratios:Array = [0, 255];
			var matrix:Matrix = new Matrix();
			matrix.createGradientBox(w * 1.5, h * 1.5, 0, -w * 0.25, -h * 0.25);
			gb.graphics.beginGradientFill(GradientType.RADIAL, colors, alphas, ratios, matrix, SpreadMethod.PAD, InterpolationMethod.RGB, 0);
			gb.graphics.drawRect(0, 0, w, h);
			gb.graphics.endFill();
			//addChild(gb);
			return gb;
		}
		//create-box
		private function createSquare(x:Number, y:Number, width:Number, height:Number, color:Number, alpha:Number):Sprite
		{
			var s:Sprite = new Sprite();
			s.graphics.beginFill(color, alpha);
			s.graphics.drawRect(x, y, width, height);
			s.graphics.endFill();
			//addChild(s);
			return s;
		}
		//create-Roundbox
		private function createSquare2(x:Number, y:Number, width:Number, height:Number, color:Number, alpha:Number, round:Number):Sprite
		{
			var rs:Sprite = new Sprite();
			rs.graphics.beginFill(color, alpha);
			rs.graphics.drawRoundRect(x, y, width, height, round);
			rs.graphics.endFill();
			//addChild(rs);
			return rs;
		}
		//create-text
		private function createTextField(x:Number, y:Number, width:Number, height:Number):TextField
		{
			var result:TextField = new TextField();
			result.x = x;
			result.y = y;
			result.width = width;
			result.height = height;
			//addChild(result);
			return result;
		}

	}
}

//複数文字の グラデーションマスク クラス
import flash.display.*;
import flash.geom.*;
import flash.text.*;
import flash.system.*;
import flash.utils.*;
//虹色用
import frocessing.color.ColorHSV;

class MakeTextLine extends Sprite {
	//受け渡し配列変数
	public var txsBoxArrays:Array;
	public var cxsArrays:Array;
	public var cysArrays:Array;
	//変数
	private var tx:String;
	private var txs:String;
	private var color:uint;
	private var color_type:String;
	private var mask_type:String;
	private var font_name:String;
	private var font_size:Number;
	private var embed:Boolean;
	private var space:Number;
	private var space_v:Number = -4;
	private var len:Number;
	private var sps:Array;//要素Sprite格納容器
	
	public function MakeTextLine(_txs:String, _color:uint, _font_size:Number, _color_type:String, _mask_type:String, _font_name:String, _space:Number, _embed:Boolean = false):void {
		//変数の代入
		txs = _txs;
		color = _color;
		color_type = _color_type;
		mask_type = _mask_type;
		font_name = _font_name;
		font_size = _font_size;
		embed = _embed;
		space = _space;
		
		//受け渡し配列変数クリア
		txsBoxArrays = [];
		cxsArrays = [];
		cysArrays = [];
		sps = [];
		//作成
		maskText();
	}
	private function maskText():void {
		
			var mvlinetext:String = txs;
			var txline:int;
			var mvtext_pX:Number = 0;//先頭文字位置調整用
			var mvtext_pY:Number = 0;//先頭文字位置調整用
			var mvtext_len:Number = 0;//字位置調整用
			var cx:Number = 0;
			var cy:Number = 0;
			var cxs:Array = [];
			var cys:Array = [];
			var spase_t:Number = space_v + space;//文字間のスペース
			//length
			txline = mvlinetext.length;
			//1=虹色にそめる 0=指定色 2=ランダム色にそめるrandom rainbow 
			var rainbow_colored:int = 0;
			if (color_type == 'rainbow') {rainbow_colored = 1;}
			if (color_type == 'random') {rainbow_colored = 2;}
			//基本textColor
			var mvtextColor:uint = color;
			//虹色にそめる変数
			var nAngle:Number = Math.PI * 2 / txline;
			var cAngle:Number = 0;
			
			for (var i:int = 0; i < txline; i++) {
				//虹色にそめる
				if (rainbow_colored == 1) {
					//frocessingで虹色を求める
					var hsv:ColorHSV = new ColorHSV(0, 1, 1, 1);
					hsv.h = cAngle / Math.PI * 180;
					//虹色を取得受け渡す
					mvtextColor = hsv.value;
					cAngle += nAngle;
				}
				//ランダム色に染める/問題あるときはランダム色
				if (rainbow_colored > 1) {
					//ランダム色
					mvtextColor = 0xFFFFFF * Math.random();//random
				}
				//文字を作る
				var mvtext_sp:Sprite = maskBox(mvlinetext.charAt(i), mvtextColor, font_size, mask_type, font_name, embed);
				//表示位置決定のため半分の間隔をプラスする、中心補正
				mvtext_len += mvtext_sp.width / 2;//文字間補正1
				//位置確定
				cxs[i] = cx = mvtext_pX + mvtext_len;//
				cys[i] = cy = 0;
				//出来上がった文字BOX、mvtext_spを保存
				sps[i] = mvtext_sp;
				//次の文字位置のため、最後に現在文字の半分の間隔をプラスする
				mvtext_len += (mvtext_sp.width / 2) + spase_t;
			}
			
			//配列を受け渡し配列に代入
			txsBoxArrays = sps;
			cxsArrays = cxs;
			cysArrays = cys;

	}
	private function maskBox(tx:String, color:uint, font_size:Number, mask_type:String, font_name:String, embed:Boolean):Sprite {
		//maskBox
		var result:TextField = new TextField();
		var fmt:TextFormat = new TextFormat();
		//CENTERにするとスペースがなくなる
		fmt.size = font_size;//60
		fmt.font = font_name;
		fmt.rightMargin = 0;
		fmt.leftMargin = 0;
		result.defaultTextFormat = fmt;
		result.text = tx;
		result.autoSize = TextFieldAutoSize.LEFT;//LEFT autoSizeでなければならない
		result.textColor = color;
		result.background = false;
		result.embedFonts = embed;
		//result.condenseWhite = false;//HTMLの場合有効
		result.selectable = false;
		//中心補正
		result.x = -result.width / 2;
		result.y = -result.height / 2;
		//基盤Spriteを作る
		var _text_sp:Sprite = new Sprite();
		
		//マスク処理
		if (mask_type=='mask') {
			//MASK/ShapeでもSpriteでもどちらでもOKのようだ
			var text_mask:Shape = new Shape();	
			//MASK,マスク透過グラデを作る
			var mtx:Matrix = new Matrix();
			mtx.createGradientBox(result.width, result.height, 0, 0, 0);
			//ずらした
			text_mask.graphics.beginGradientFill(
				GradientType.LINEAR,
				[0x00, 0x00],
				[1, 0],
				[50, 240],//[0, 255]
				mtx
			);
			text_mask.graphics.drawRect(0, 0, result.width, result.height);
			
			//マスク中心補正
			text_mask.x = -result.width / 2;
			text_mask.y = -result.height / 2;
			//マスクChildは必要
			_text_sp.addChild(text_mask);
			//グラデマスク実行 TextFieldに直接実行してもOK
			result.mask = text_mask;
			//cacheAs
			result.cacheAsBitmap = true;
			text_mask.cacheAsBitmap = true;
		}
		//Child
		_text_sp.addChild(result);
		//重要
		addChild(_text_sp);
		return _text_sp;
	}

}

//キャプチャーデータ加工アクッションクラス
import flash.display.*;
import flash.events.*;
import flash.geom.*;
import flash.system.*;

import com.greensock.*;
import com.greensock.easing.*;

internal class WindEffect extends Sprite {
	private var _pictureArray:Array = [];
	private var numberOfColumns:uint = 20;
	private var numberOfRows:uint = 4;
	private var bitmap:Bitmap;
	private var base:Sprite;
	private var slice_Len:Number = 0;
	private var it_count:Number = 0;

	public function WindEffect (_base:Sprite,_bitmap:Bitmap):void {
		base = _base;
		bitmap = _bitmap;
		createEffect (base,bitmap);
	}
	private function createEffect (base:Sprite,bitmap:Bitmap):void {
		var centerWidth:Number = 0;
		var centerHeight:Number = 0;
		//分割の合わせ方などこの辺まだ甘い	
		//Math.ceil/intで無いときれいに分割できない
		//端数の大きさ修正がおこなわれていない
		var sizeWidth:uint = int(bitmap.width / numberOfColumns);
		var sizeHeight:uint = int(bitmap.height / numberOfRows);
		var numberOfBoxes:uint = numberOfColumns * numberOfRows;
		//Roop
		for (var i:uint = 0; i < numberOfColumns; i++)
		{
			for (var j:uint = 0; j < numberOfRows; j++)
			{
				var tempBitmapData:BitmapData = new BitmapData (sizeWidth, sizeHeight);
				var sourceRect:Rectangle = new Rectangle (i * sizeWidth, j * sizeHeight, sizeWidth, sizeHeight);
				tempBitmapData.copyPixels (bitmap.bitmapData, sourceRect, new Point);
				var tempBitmap:Bitmap = new Bitmap (tempBitmapData);
				var tempSprite:Sprite = new Sprite;
				tempSprite.addChild (tempBitmap);
				_pictureArray.push (tempSprite);
				tempSprite.x = i * sizeWidth + centerWidth;
				tempSprite.y = j * sizeHeight + centerHeight;
				//base.addChild (tempSprite);
				base.addChild (tempSprite);
			}
		}
		slice_Len = _pictureArray.length;
		//
		blowWind();
	}
	//アクッション
	private function blowWind ():void
	{
		//	
		var point_c:Number;
		var angle:Number;
		var tweentime:Number;
		var generation:Number = 0;
		var cx:Number;
		var cy:Number;
		
		//ここで削除が出来ないのでほかで削除
		for (var i:uint = 0; i < slice_Len; i++) {
			angle = int(Math.random() * 360);
			cx = 600 * Math.cos(angle);
			cy = 600 * Math.sin(angle);
			generation += 0.05;
			tweentime = 0.2;
			//ちらす
			TweenLite.to(_pictureArray[i], tweentime, { delay:generation, alpha:1, x:cx, y:cy , scaleX:1, scaleY:1 } );
			//
		}
	}
}

【参考】当方の記事: 文字を分解してアニメ処理で表示2


以上です。



[ この記事のURL ]


タグ:flash , ActionScript , as3 , series

[ 文字を分解してアニメ処理で表示 シリーズ記事 ]

サイン曲線で画像を動かすテストです/22012.04.22
サイン曲線で画像を動かすテストです/12012.04.21
三次ベジェ曲線で文字を動かす/22012.04.19
三次ベジェ曲線で文字を動かす/12012.04.17
文字を分解してアニメ処理で表示/112012.04.16
文字を分解してアニメ処理で表示/102012.04.14
文字を分解してアニメ処理で表示/92012.04.13
文字を分解してアニメ処理で表示/82012.04.12
文字を分解してアニメ処理で表示/72012.04.08
文字を分解してアニメ処理で表示/62012.04.07
文字を分解してアニメ処理で表示/52012.04.06
文字を分解してアニメ処理で表示/42012.04.05
文字を分解してアニメ処理で表示/32012.04.04
文字を分解してアニメ処理で表示/22012.04.03
文字を分解してアニメ処理で表示/12012.04.02

 

ブログ記事一覧

年別アーカイブ一覧



[1]