POPSブログ

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

73

  Category:  as32012/04/03 pops 

文字を分解してアニメ処理で表示する2。簡単なクラス処理とアニメの方法。


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


文字を分解してアニメ処理で表示してみます。以外と面倒にはなりますが、ある程度の効果があります。アイデア次第で使い道はあると思います。

簡単なクラスの動作テスト。

  • 簡単なクラスの動作テストです。文字は_sansを使用。Embedはしていません。
  • 文字の動きも、両側からの一例のみです。
  • 通常の文字でsも、zプロパティを設定すれば、回転可能です。そのほかの設定は、下記の説明参照。

[初期設定値] / 順序:先頭 / 縮尺:0.1 / 位置:左右 / delay 0.5


簡単な動作の説明

説明図


1. 図のように、コンテナに対して、y方向は0で配置しています。実際に作られる文字入りの Sprite は大き目になりますので、配置の際に間隔を修正しています。グラデのマスク使用の場合文字間隔を、より狭めたほうがキレイです。
(回転のため中心補正などしていますので、多少の誤差が発生しますのでそれらを考慮して-4.5の補正をしている)
2. 実際にはコンテナの高さは不要である。但し何らかの加工をする場合に、コンテナの中に収容しなければならない場合もある。仮にコンテナをキャプチャ加工しても正常にはならない。コンテナの中におさめれば正常です。
3. 標準的には、横2ピクセル、文字間のスペース1ピクセルが取られ配置されるようである。
4. 文字に回転を伴う場合には、文字の読み込みが原則必要ですが、_sans _ゴシックに限り、zプロパティを設定すれば、回転可能です。但しY軸に対して誤差が出る場合あり。
(_sans以外の英文字は文字間行間がマシン(MAC)により合わなくなる不具合があるらしい。_sansは誤差は在ってもほぼそろうらしい。)
5. ここで扱う文字のそろえ方は、原則1行、幅は表示範囲以内です。文字を順次ならべているだけです。
6. クラスといっても1文字加工のみのクラスです。アニメなどは個別に処理しなければなりません。


簡単な設定



表示文字列を入れる
mvlinetext1 = "SlideShow";

文字間隔補正標準値本来は、-4または-5であるが、現在-4.5にしている
var spase_t:Number = -4.5;

z設定/1の場合z設定する
embed文字使用の場合は設定しません
var set_z:int = 1;//0 1

色の指定、1=虹色にそめる 0=指定色 2=ランダム色にそめる
var rainbow_colored:int = 1;

指定色の場合の色
var mvtextColor:uint = 0xFFFFFF;

classで文字を作る場合に1文字ずつ作ります_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 embed文字使用の場合true
);

グラデーションマスクをする場合は mask を設定する
ここでの色指定は使用していない
重要、embed文字使用の場合 true 設定にしないと、文字表示しません
反対に、普通の文字使用の場合は false です。

文字の間隔設定とアニメ部分は処理コードをお読みください

注意、z設定はクラスの中でも設定可能ですが、マスクをした場合にズレがでるので
クラス外で設定ください。

Embed文字の設定


Embedの場合の書き方の例
文字を分解クラスに受け渡す名前は、fontName の "font" です、名前のつけ方は何でもよい

Embedの場合必ず何らかのクラスを与えてください private var embedFont:Class; など
名前は何でも良い、クラスを与えないとエラーになる

//注意 複数種類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;


AS3


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

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 FlashTest175 extends Sprite {
		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		private var container:Sprite;
		//
		private var mv_container:Sprite;
		private var text_container:Sprite;
		//
		private var tf:TextField;

		//BIG-MOVE-TEXT-1
		private var mvlinetext1:String;
		private var txline1:int;
		//特殊処理大きさ受け渡し
		private var boxWidth_1:Number;
		private var boxHeight_1:Number;
		//格納容器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;

		public function FlashTest175 ():void
		{
			//goto-init
			init();
		}
		
		// INIT
		private function init():void {	
			//init
			//ステージ
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.HIGH;
			//stage.scaleMode = StageScaleMode.NO_SCALE;//使用しない
			
			//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, stage.stageWidth - 20, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "";
			addChild(tf);
			
			//layer2/BIG文字収納用/暫定位置決定
			layer2 = new Sprite();
			layer2.x = 30;
			layer2.y = 230;
			addChild(layer2);
			
			//特殊用途container
			text_container=createSquare(0, 0, stage.stageWidth, 10, 0x000000, 0);
			layer2.addChild(text_container);
			text_container.x = 0;
			text_container.y = 0;
				
			//テキスト作成に進む、時間がかかる
			make_MaskText();
			
		}

		//グラデマスクテキスト MASK-TEXT
		private function make_MaskText():void {
			//表示文字列
			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;
			//文字間隔補正標準値
			var spase_t:Number = -4.5;//-10文字間のスペース補正4-6
			var tweentime:Number = 2;//tweentime
			var generation:Number = 1;//delay
			//出来上がった文字列全体の大きさ
			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;
			
			//文字列の数length
			txline1 = mvlinetext1.length;
			//虹色にそめる変数
			var nAngle:Number = Math.PI * 2 / txline1;
			var cAngle:Number = 0;
			
			//Roop
			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 embed文字使用の場合true
				);
				
				//出来上がった文字BOX、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
				//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にaddChild/特殊なためtext_containerに入れた
				//収納しただけで位置は決定して居ない、一応 00ポイントに存在する
				//見えて悪いならば欄外に飛ばす、またはコンテナをずらしておくなどの事前処理をする
				text_container.addChild(mvtext_sp);
				
				//次の文字位置のため、最後に現在文字の半分の間隔をプラスする
				mvtext_len += (mvtext_sp.width / 2) + spase_t;
				//文字列全体のながさを計算しておく、誤差あり
				mvtext_lens += (mvtext_sp.width + spase_t);
				
			}
			
			//全体の大きさを保存、必要なければ削除
			//1回のspase_tを補正
			mvtext_Width = mvtext_lens - spase_t - 2;
			//特殊処理大きさ受け渡し
			boxWidth_1 = mvtext_Width;
			boxHeight_1 = mvtext_Height;
			
			//初期位置の決定/左右に配置
			mv_chg = 1;
			for (i = 0; i < txline1; i++) {
				//位置大きさ決定修正
				sps1[i].x = stage.stageWidth * 1.2;
				sps1[i].y = 0;
				if (mv_chg < 0 ) { sps1[i].x = stage.stageWidth * 0.3 * -1; }//反転
				sps1[i].scaleX = 0.1;
				sps1[i].scaleY = 0.1;
				sps1[i].rotation = 180;
				//逆転係数
				mv_chg *= -1;
			}
			
			//Animateの実行
			delayflag = 0;
			tf.text = "Animate";
			for (i = 0; i < txline1; i++) {
				//delay
				generation += 0.5;//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 ++;
				}});
			}
			
		}
		
		//Finish終了処理
		private function onFinishTween():void {
			//
			tf.text = "Animate-Finish";
			delayflag = 0;
		}
		
		//-------------------------------------------------------
		
		//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.*;

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);
	}

}

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

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


以上です。



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