POPSブログ

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

74

  Category:  as32012/04/04 pops 

文字を分解してアニメ処理で表示する3、ランダムな条件でのアニメの方法実例です。処理の流れを考えてください。


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


文字を分解してアニメ処理で表示してみます。以外と面倒にはなりますが、ある程度の効果があります。アイデア次第で使い道はあると思います。FLASH9,10ならもっと複雑に出来るでしょう。
アニメ処理の実際参考です。前頁のものは簡単なアニメ処理でしたが、色々な条件の下にアニメさせている実例です。スクリプトの説明はいたしません。下記コードなどをお読みください。

参考、簡単なクラスの動作テスト。アニメ処理の実際です。
中央の黒い文字は同じ文字をTextFieldで一括表示しています。アニメの文字位置はこの文字情報から設定してはいません。重なり位置が同じになるように計算して、個々のSprite収容の文字要素を移動表示しています。



_sans文字をそのまま使用しています。zプロパティを設定すれば、回転可能です。


AS3

FlashTest175b.as


//動く文字表示テスト
//虹色にそめる rainbow-colored
//FlashTest175b

package
{

	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.geom.*;
	import flash.system.*;
	import flash.utils.*;
	import flash.text.*;
	
	//TweenLite
	import com.greensock.*; 
	import com.greensock.easing.*;
	
	//虹色用
	import frocessing.color.ColorHSV;
	
	[SWF(width="465", height="465", frameRate="30", backgroundColor="0x000000")]

	public class FlashTest175b extends Sprite
	{
		
		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		private var layer9:Sprite;
		private var container:Sprite;
		//文字収容コンテナ
		private var mv_container:Sprite;
		private var text_container: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位置格納容器
		//delay終了判定
		private var delayflag:int = 0;
		
		//説明のためのランダムアニメ用
		private var poschgflag:Boolean = false;
		private var scalechgflag:Boolean = false;
		private var posNo:int = 0;
		private var posNo_name:Array = ['右', '左', '左右', '上', '下', '上下', '中央', 'ランダム','定点'];
		private var scaleNo:int = 0;
		private var scale_v:Array = [0, 0.1, 0.5, 0.8, 1, 2, 5, 10, 0, 0, 0];
		private var mv_pos1_x:Array = [];//開始X位置格納容器
		private var mv_pos1_y:Array = [];//開始Y位置格納容器
		//説明用コンテナ
		private var text_container_base:Sprite;
		private var text_sample:Sprite;
		
		//FullScreenButton
		private var fullScreenBtn:Sprite;
		
		//注意 複数種類Embedの場合はそのつどClassを設定する、下のようになる、違ったらコンパイルできない
		//[Embed(systemFont = "GauFontMilkChoco", fontName = "font", mimeType = "application/x-font")]
		//private var embedFont:Class;
		//[Embed(systemFont = "Arial", fontName = "arial", mimeType = "application/x-font")]
		//private var embedFont_Arial:Class;

		public function FlashTest175b ():void {
			init();
		}
		
		// INIT
		private function init():void {
			
			//init
			//ステージ/ステージACTION削除
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.HIGH;
			//stage.scaleMode = StageScaleMode.NO_SCALE;//使用しない
			stage.fullScreenSourceRect = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
			
			//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);
			
			//そのほかの初期レイアウト配置
			//layer1
			layer1 = new Sprite();
			addChild(layer1);
				
			//text
			tf = createTextField(10, 5, 200, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "動く文字表示テスト";
			addChild(tf);
			
			//layer2/BIG 収納用
			layer2 = new Sprite();
			layer2.x = 0;
			layer2.y = 170;
			addChild(layer2);
			
			//特殊用途container
			text_container=createSquare(0, 0, stage.stageWidth, 10, 0x000000, 0);
			layer2.addChild(text_container);
			text_container.y = 0;
			
			//説明用
			text_container_base = createSquare(0, 0, stage.stageWidth, 10, 0x444444, 1);
			text_container.addChild(text_container_base);
			//説明用text-sample
			text_sample = new Sprite();
			var result:TextField = new TextField();
			var fmt:TextFormat = new TextFormat();
			//CENTERにするとスペースがなくなる
			fmt.size = 60;//60
			fmt.font = '_sans';
			fmt.rightMargin = 0;
			fmt.leftMargin = 0;
			result.defaultTextFormat = fmt;
			result.text = 'SlideShow';
			result.autoSize = TextFieldAutoSize.LEFT;//LEFT autoSizeでなければならない
			result.textColor = 0x000000;
			result.background = false;
			result.embedFonts = false;
			result.x = 0;
			result.y = 0;
			text_sample.addChild(result);
			text_container.addChild(text_sample);
			
			//layer9/FullScreenButton収納用
			layer9 = new Sprite();
			layer9.x = stage.stageWidth - 35;
			layer9.y = stage.stageHeight - 30;
			addChild(layer9);
			//FullScreenButton
			fullScreenBtn = createFullScreenButton();
			fullScreenBtn.x = 0;
			fullScreenBtn.y = 0;
			//layer9に収納
			layer9.addChild(fullScreenBtn);
			//FULLSCREEN-ACTION
			fullScreenBtn.addEventListener(MouseEvent.CLICK, fullClickHandler);
						
			//BIG-MASK-TEXT作成に進む
			make_MaskText();//時間がかかる
		}
		
		//グラデマスクテキスト MASK-TEXT
		private function make_MaskText():void {
			
			tf.text = "";
			mvlinetext1 = "SlideShow";//
			//
			var mvtext_pX:Number = 0;//先頭文字位置調整用
			var mvtext_pY:Number = 0;//先頭文字位置調整用
			var mvtext_len:Number = 0;//字位置調整用
			var mvtext_lens:Number = 0;//文字列全体のながさ
			//BetweenAS3 delayで出現をコントロール
			var cx:Number = 0;
			var cy:Number = 0;
			//-4標準値
			var spase_t:Number = -4.5;//-10文字間のスペース補正-4-6
			var tweentime:Number = 2;//tweentime
			var generation:Number = 1;//delay
			var generation_max:Number = 1;//delay最大値
			var angle:Number;//角度
			//出来上がった文字列全体の大きさ
			var mvtext_Width:Number = 0;
			var mvtext_Height:Number = 0;
			var mv_chg:int = 1;
			
			//z設定/1の場合z設定する
			var set_z:int = 1;//0 1
			
			//1=虹色にそめる 0=指定色 2=ランダム色にそめる
			var rainbow_colored:int = 1;
			//textColor
			var mvtextColor:uint = 0xFFFFFF;
			
			//layer全体の表示位置の決定
			layer2.x = 30;
			layer2.y = 230;
			
			//length
			txline1 = mvlinetext1.length;
			//虹色にそめる
			var nAngle:Number = Math.PI * 2 / txline1;
			var cAngle:Number = 0;
			var i:int = 0;
			for (i = 0; i < txline1; 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
				}
				
				//classで文字要素をつくる、_sansでもマスクOK
				var mvtext_sp:Sprite = new MakeText(
						mvlinetext1.charAt(i),	// String 1文字
						mvtextColor,			// uint 0xFFFFFF 文字色
						60,						// Number 60 文字サイズ
						'normal',				// String normal random rainbow 色指定/未使用
						'none',					// String mask none グラデーションマスク
						'_sans',				// String Embed-fontName font _sans arial _ゴシック
						false					// embedFonts true false
				);
				
				//mvtext_spを保存
				sps1[i] = mvtext_sp;
				//高さ
				if (i == 0) { mvtext_Height = mvtext_sp.height;}
				
				//TEXT(FONT)の長さを保存、未使用
				tx_w1[i] = mvtext_sp.width;
				tx_h1[i] = mvtext_sp.height;
				
				//表示位置決定のため半分の間隔をプラスする、中心補正
				mvtext_len += mvtext_sp.width / 2;//文字間補正1
				//BetweenAS3戻り位置に代入
				//X
				cx = mvtext_pX + mvtext_len;
				cxs1[i] = cx;//X位置保存
				//Y
				cy = 0;//重要、0のほうが便利
				//cy = mvtext_pY;
				cys1[i] = cy;//Y位置保存
				//通常の文字表示X位置/10補正
				mvtext_sp.x = mvtext_pX + mvtext_len;
				//z設定
				if (set_z) { mvtext_sp.z = 1; }
				
				//layer2 text_container	特殊なためtext_containerに入れた
				text_container.addChild(mvtext_sp);
				
				//次の文字位置のため、最後に現在文字の半分の間隔をプラスする
				mvtext_len += (mvtext_sp.width / 2) + spase_t;
				//全体の長さ間隔補正値加算/文字列全体のながさを計算しておく、誤差あり
				mvtext_lens += (mvtext_sp.width + spase_t);
				//逆転係数
				mv_chg *= -1;
				
			}
			
			//1回のspase_tを補正/誤差修正/1-2の狂いあり
			mvtext_Width = mvtext_lens - spase_t -2;
			//特殊処理大きさ受け渡し/Sprite全体の収まり範囲
			boxWidth_1 = mvtext_Width;
			boxHeight_1 = mvtext_Height;
			
			//説明用
			text_container_base.width = mvtext_Width;
			text_container_base.height = mvtext_Height;
			//説明用
			text_container_base.y = -mvtext_Height / 2;
			text_sample.y = -mvtext_Height / 2;
			
			//アニメの準備アニメ実行
			set_animedata ();
			animate();
			
		}
		//animate
		private function animate ():void {
			//
			tf.text = "Animate/POS " + posNo_name[posNo] + " /SCL  " + scale_v[scaleNo] + "";
			delayflag = 0;
			var tweentime:Number = 2;//tweentime
			var generation:Number = 1;//delay
			var generation_max:Number = 1;//delay最大値
			var angle:Number;//角度
			
			//random設定
			tweentime = (Math.floor(Math.random() * 6) / 10) * 2 + 1.2;
			var g_time:Number = (Math.floor(Math.random() * 6) / 10) * 2 + 0.3;
			
			var i:int = 0;
			for (i = 0; i < txline1; i++) {
				//delay
				generation += g_time;//0,2-0.5秒
				//Tween
				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) { onFinishTween(); }
					delayflag ++;
				}});
			}
		}
		//animate2
		private function animate2 ():void {
			//固定アニメ
			tf.text = "Animate2";
			delayflag = 0;
			var tweentime:Number = 2;//tweentime
			var generation:Number = 1;//delay
			var generation_max:Number = 1;//delay最大値
			var angle:Number;//角度
			
			var i:int = 0;
			for (i = 0; i < txline1; i++) {
				//delay
				generation += 0.5;//0,2-0.5秒
				//Tween
				TweenLite.to(sps1[i], tweentime, { delay:generation, alpha:0, x:mv_pos1_x[i], y:mv_pos1_y[i] , scaleX:0, scaleY:0, rotation:0, onComplete:function():void {
					//Finish
					if (delayflag == txline1 - 1) { onFinishTween2(); }
					delayflag ++;
				}});
			}
		}
		
		//set-anime-data
		private function set_animedata ():void {
			//
			tf.text = "Animate-Data";
			//random値で位置スケールを決める
			posNo = Math.floor(Math.random() * 9);
			scaleNo = Math.floor(Math.random() * 9);
			
			//変数
			var stageW:Number = stage.stageWidth;
			var stageH:Number = stage.stageHeight;
			var pos_x:Number = 0;
			var pos_y:Number = 0;
			var scl_x:Number = 0;
			var scl_y:Number = 0;
			var rotation_v:Number = 0;
			var alpha_v:Number = 1;
			var pos_fg:Boolean = false;
			var r_fg:int = Math.floor(Math.random() * 2);
			
			//位置決定
			if (posNo == 0) {pos_x = stageW * 1.2;pos_y = 0;}
			if (posNo == 1) { pos_x = stageW / 2 * -1; pos_y = 0; }
			if (posNo == 2) { pos_x = stageW; pos_y = 0; }
			if (posNo == 3) { pos_x = 0; pos_y = stageH / 2 * -1; pos_fg = true; }
			if (posNo == 4) { pos_x = 0; pos_y = stageH / 2; pos_fg = true;}
			if (posNo == 5) { pos_x = 0; pos_y = stageH / 2; pos_fg = true;}
			if (posNo == 6) { pos_x = stageW / 2 - 30; pos_y = 0; }
			if (posNo == 7) { pos_x = 0; pos_y = 0; }
			if (posNo == 8) { pos_x = 0; pos_y = 0; }
			//scale決定
			scl_x = scale_v[scaleNo];
			scl_y = scale_v[scaleNo];
			//alpha補正
			alpha_v = 0;
			//rotationはrandom決定
			rotation_v = Math.floor(Math.random() * 8) * 60;
			if (rotation_v >= 360) { rotation_v = 0; }
			
			//初期位置等変更
			var mv_chg:int = 1;
			var i:int = 0;
			for (i = 0; i < txline1; i++) {
				if (pos_fg) { pos_x = cxs1[i]; }
				if (posNo == 2) { pos_x = stageW * mv_chg; }
				if (posNo == 5) { pos_y = stageH / 2 * mv_chg; }
				if (posNo == 7) {
					pos_x = Math.floor(Math.random() * stageW) - 30;
					pos_y = Math.floor(Math.random() * stageH) - stageH / 2;
				}
				//定点
				if (posNo == 8) {
					pos_x = 0;
					pos_y = -150;
				}
				//位置保存
				mv_pos1_x[i] = pos_x;
				mv_pos1_y[i] = pos_y;
				//
				sps1[i].x = pos_x;
				sps1[i].y = pos_y;
				if (r_fg) {sps1[i].rotation = rotation_v * mv_chg;} else {sps1[i].rotation = rotation_v;}
				//sps1[i].rotation = rotation_v * mv_chg;
				sps1[i].scaleX = scl_x;
				sps1[i].scaleY = scl_y;
				sps1[i].alpha = alpha_v;
				//逆転係数
				mv_chg *= -1;
			}
			//
		}
		
		//Finish
		private function onFinishTween():void {
			tf.text = "Animate-Finish";
			//setTimeout使用の場合
			var intervalId:uint = setTimeout(animate2, 3000);
			
			//Timer使用の場合
			//var timer:Timer = new Timer(3000, 1);
			//timer.addEventListener(TimerEvent.TIMER_COMPLETE, completeTimer);
			//timer.start();
		}
		//Finish2
		private function onFinishTween2():void {
			tf.text = "Animate-Finish2";
			//setTimeout使用の場合
			var intervalId:uint = setTimeout(set_animate3, 2000);
			
			//Timer使用の場合
			//var timer2:Timer = new Timer(2000, 1);
			//timer2.addEventListener(TimerEvent.TIMER_COMPLETE, completeTimer2);
			//timer2.start();
		}
		//setTimeout使用の場合/set_animate3
		private function set_animate3 ():void {
			set_animedata ();
			animate();
		}
		
		//-------------------------------------------------------
		//Timer使用の場合completeTimer
		//completeTimer
		private function completeTimer(e:TimerEvent):void {
			animate2();
		}
		//completeTimer2
		private function completeTimer2(e:TimerEvent):void {
			set_animedata ();
			animate();
		}
		//-------------------------------------------------------
		
		//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;
		}
		
		//FullScreenBtn CLICK
		private function fullClickHandler(e:MouseEvent):void {
			stage.displayState = (StageDisplayState.FULL_SCREEN==stage.displayState)?StageDisplayState.NORMAL:StageDisplayState.FULL_SCREEN
		}
		//FullScreenButton
		private function createFullScreenButton():Sprite {
			// 画面右下にボタン配置(YouTube風)
			var margin:Number = 10;
			var b:Sprite = new Sprite();
			b.graphics.lineStyle();
			b.graphics.beginFill(0x4d4d4d);
			b.graphics.drawRoundRect(7, 5, 21, 14, 3);
			b.graphics.beginFill(0xc1c1c1);
			b.graphics.drawRoundRect(8, 6, 10, 6, 2);
			b.graphics.endFill();
			b.buttonMode = true;
			return b;
		}
		
	}
}

//文字の グラデーションマスク クラス
import flash.display.*;
import flash.geom.*;
import flash.text.*;
import flash.system.*;

class MakeText extends Sprite {
	//変数
	private var tx: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;

	public function MakeText(_tx:String, _color:uint, _font_size:Number, _color_type:String, _mask_type:String, _font_name:String, _embed:Boolean = false):void {
		//変数の代入
		tx = _tx;
		color = _color;
		color_type = _color_type;
		mask_type = _mask_type;
		font_name = _font_name;
		font_size = _font_size;
		embed = _embed;
		//作成
		maskText();
	}
	private function maskText():void {
		//
		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();
			//var text_mask:Sprite = new Sprite();	
			//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);
	}

}

クラス処理の文字をアニメする。次ぎのページを参照ください。

【参考】文字をアニメする: 文字を分解してアニメ処理で表示2


画像のアニメ処理ですが、基本的に処理方法、流れ内容は同じです。参照ください。

【参考】画像分割してアニメする: FLASH-SLIDESHOW-1


以上です。



[ この記事の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]