POPSブログ

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

76

  Category:  as32012/04/06 pops 

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


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


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



Broadway BT文字をEmbedしました。_sans文字使用可能です。


AS3

FlashTest177.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 FlashTest177 extends Sprite {
		
		private var itemLength:uint = 10;//要素または画像枚数
		private var warpAngle:Number = -15;//全体の傾き
		private var itemScale:Number = 0.5;//画像が前で2倍になるため修正値/0.5
		
		//BIG-MOVE-TEXT
		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;
		
		//文字Embed/Broadway/Broadway BT/
		[Embed(systemFont = "Broadway BT", fontName = "font", mimeType = "application/x-font")]
		private var embedFont:Class;

		
		public function FlashTest177 () {
			
			//表示文字数を計算
			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/0xEEC063, 0x765B1B/0xFE32AF,0x000000
			var grad_square:Sprite = draw_grad_box(stage.stageWidth, stage.stageHeight, 0xFE32AF, 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/Y軸は使用しない/円周配置はY軸/CarouselはZ軸
				sp.x = radius * Math.sin( i * 360 / itemLength * Math.PI / 180);
				sp.z = radius * Math.cos( i * 360 / itemLength * Math.PI / 180);
				
				//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 グラデーションマスク
						'font',					// String Embed-fontName font _sans arial _ゴシック
						true					// 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 = 300 * mv_chg;
				sps1[i].scaleX = 0.1;
				sps1[i].scaleY = 0.1;
				sps1[i].rotation = 180;
				//delay
				generation += 0.75;
				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
		{
			//ITEMを回転移動
			pp.projectionCenter = new Point(stage.stageWidth / 2, stage.stageHeight / 2 - 100);
			//mouseで向きを変える
			wrap.rotationY += (mouseX / stage.stageWidth * 480 - wrap.rotationY) * 0.05;
			
			//objを正面に向ける/変化をつけた
			var arr:Array = [];
			for (var i:int = 0; i < itemLength; i++) {
				var ele:Sprite = objs[i] as Sprite;
				ele.rotationY = wrap.rotationY / 2;
				var mtx:Matrix3D = ele.transform.getRelativeMatrix3D(main);
				arr.push( { ele:ele, z:mtx.position.z } );
			}
			
			//z-index blur-effect
			arr.sortOn("z", Array.NUMERIC | Array.DESCENDING);
			var baseZ:Number = wrap.z;
			for (i = 0; i < arr.length; i++) {
				ele = arr[i].ele as Sprite;
				var z:Number = arr[i].z;
				wrap.setChildIndex(ele, i);
				var b:Number = Math.abs(z);
			}
			
		}
		
		//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]