POPSブログ

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

75

  Category:  as32012/04/05 pops 

文字を分解してアニメ処理で表示する4、円周上に文字を配置して回転するようにして見ました。


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


文字を分解してアニメ処理で表示してみます。以外と面倒にはなりますが、ある程度の効果があります。アイデア次第で使い道はあると思います。これは、Wonderflの記事、Clockmakerサンの[3D Carousel]を参考に改造しました。全然違うものになっていますが、3D Carousel風にすることもできます。



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


AS3

FlashTest176.as


//FlashTest176
//等分割 Carousel3D 文字挿入に改造 円運動
//文字Embedはしていない 
//全体の回転だけならこのほうが良いかも知れない

package {
	
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.geom.*;
	import flash.system.*;
	import flash.utils.*;
	import flash.text.*;
	//虹色用
	import frocessing.color.ColorHSV;
	//Tween TweenMax
	import com.greensock.*;
	import com.greensock.easing.*;
 
	[SWF(width="465", height="465", backgroundColor="0x000000", frameRate="60")]
  
	public class FlashTest176 extends Sprite {
		
		private var itemLength:uint = 10;//要素または画像枚数
		private var warpAngle:Number = 0;//全体の傾き 円運動0
		private var itemScale:Number = 1;//画像が前で2倍になるため修正値/0.5
		
		//BIG-MOVE-TEXT-1
		private var mvlinetext1:String = "Wonderfl.SlideShow.POPS WEB.";
		//格納容器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位置格納容
		
		//TEXT集合体
		private var pp:PerspectiveProjection = root.transform.perspectiveProjection;
		private var objs:Array = [];
		private var main :Sprite;
		private var wrap :Sprite;
		private var radius:Number = 200; //半径
		private var rot:Number = 0;//全体の回転角度判定用
		
		//その他
		private var container:Sprite;
		private var tf:TextField;
		//delay終了判定
		private var delayflag:int = 0;
		
		public function FlashTest176 () {
			
			//表示文字数を計算
			itemLength = mvlinetext1.length;
			
			//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);
			
			//create グラデ背景Sprite/0xB18D8D,0x000000
			var grad_square:Sprite = draw_grad_box(stage.stageWidth, stage.stageHeight, 0x009DBF, 0x000000);
			addChild(grad_square);
			//ダミーcontainer円運動の下に何かを表示する用途/未使用
			container = new Sprite();
			addChild(container);
			
			//全体wrap/円運動
			main = Sprite(addChild(new Sprite()));
			main.x = int(stage.stageWidth / 2);
			main.y = int(stage.stageHeight / 2);
			wrap = Sprite(main.addChild(new Sprite()));
			//全体を傾ける
			wrap.rotation = warpAngle;
			
			//text
			tf = createTextField(10, 5, stage.stageWidth - 20, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "動く文字表示テスト";
			addChild(tf);
			
			//GOTO-init
			init();
		}
	
		//画像表示に進む
		private function init():void
		{
			//SET-ITEM
			viewItems();
		}
		
		// MAIN-ACTION
		private function main_action():void
		{
			//必要なMain-Actionなどを記入
			tf.text = "MAIN-ACTION TweenMax";
		}
		
		//円周に文字を表示
		private function viewItems():void {
			
			//1=虹色にそめる 0=指定色 2=ランダム色にそめる
			var rainbow_colored:int = 1;
			//textColor
			var mvtextColor:uint = 0xFFFFFF;
			var nAngle:Number = Math.PI * 2 / itemLength;
			var cAngle:Number = 0;
			
			//Roop
			var i:int = 0;
			for (i = 0; i < itemLength; i++) {
				
				//ITEMベース/ベース背景は現在いれていない
				var carouselItem:Sprite = new Sprite();
				//中心補正
				carouselItem.x = 0;
				carouselItem.y = 0;
				//画像倍率補正0.5
				carouselItem.scaleX = itemScale;//0.5
				carouselItem.scaleY = itemScale;//0.5
				//中心用透過グラヒック/等分割
				var sp: Sprite = Sprite(wrap.addChild(new Sprite()));
				sp.graphics.beginFill(0x000000,0);//透過
				sp.graphics.drawRect( -5, -5, 10, 10);//
				//半径radius
				sp.x = radius * Math.sin( i * 360 / itemLength * Math.PI / 180);
				sp.y = radius * Math.cos( i * 360 / itemLength * Math.PI / 180);
				
				//Classで設定するとグラデが壊れるのでここでZを設定した
				sp.z = 1;
				
				//文字の向きをあわせる
				sp.rotation = (i * 360 / itemLength)* -1;
				//BASE背景
				sp.addChild(carouselItem);
				
				//虹色にそめる
				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 色指定/未使用
						'mask',					// String mask none グラデーションマスク
						'_sans',				// String Embed-fontName font _sans arial _ゴシック
						false					// embedFonts true false
				);
				
				//spにaddChild
				sp.addChild(mvtext_sp);
				//文字要素Sprite格納容器オブジェクト配列に代入
				sps1.push(mvtext_sp);
				//オブジェクト配列に代入
				objs.push(sp);
			}
			
			//Tween設定変数
			var tweentime:Number = 0.6;//tweentime
			var generation:Number = 1;//delay
			var angle:Number;//角度
			var mv_chg:int = 1;
			//delay終了判定を知るためのカウント
			delayflag = 0;
			
			for (i = 0; i < itemLength; i++) {
				//初期位置の移動
				sps1[i].alpha = 0;
				sps1[i].y = -200;
				sps1[i].scaleX = 0.1;
				sps1[i].scaleY = 0.1;
				//delay
				generation += 0.5;
				mv_chg *= -1;
				
				//TweenMax Tweenの実行/onComplete付き
				//onComplete付きが正確である、delayで制御していると終了がわからないのでdelayflagでカウントしながら判定する
				TweenMax.to(sps1[i], tweentime, { delay:generation, alpha:1, x:0, y:0, scaleX:1, scaleY:1, rotation:0, onComplete:function():void {
					//Finish
					if (delayflag == itemLength - 1) { onFinishTween(); }
					delayflag ++;
				}});
				
			}
			
			//ITEMを回転移動
			pp.projectionCenter = new Point(stage.stageWidth / 2, stage.stageHeight / 2 - 100);
			
		}
		
		//Tween-onComplete
		private function onFinishTween():void
		{
			delayflag = 0;
			//読み込み完了/enterFrameリスナーセット
			stage.addEventListener( Event.ENTER_FRAME, enterFrameHandler);
			//GOTO-main_action
			main_action();
		}
		
		//wrap全体の回転
		private function enterFrameHandler(e:Event):void
		{
			//全体を回転移動 rotation で行っているので回転の品質がわるい
			//mouseで向きを変える
			wrap.rotation += (mouseX - stage.stageWidth / 2) * 0.01;
			//OVERFLOW防止
			rot = Math.abs(wrap.rotation);
			if (rot > 360) { wrap.rotation = 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-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);
	}

}

wonderflの記事、clockmakerサンの[3D Carousel]を参考に改造しました、参照ください。

【参考.出典】wonderfl.net: 3D Carousel: 3D Carousel

clockmakerサンのブログ、3Dが詳しい。

【参考】clockmaker: Clockmaker-Blog


以上です。



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