POPSブログ

FLASH-SLIDESHOW-5

65

  Category:  flash2012/03/27 pops 

FLASH AS3 による、BitmapTransitionを使用した、スライドショー(アルバム)です。自動を削除して、サムネールページャー付きにしました。


FLASH-SLIDESHOW-5

FlashTest168c.swf

フルスクリーン対応、サムネールページャー付き「簡単なスライドショー」サンプル表示


画像読み込みに時間がかかる場合があります、ご了承ください。

FLASH表示テスト 専用のSWF FlashTest168c.swf 465x465


注意、FlashTest168c.swf は「BaserCMS」で使用する専用です。画像は /main/images/xxxx.jpg


簡単な説明

サムネールページャー付きの「簡単なスライドショー」タイプです。

  • FlashDevelopで作りました。AS3表記です。
  • スクリプトだけの資料です。書き換えなどは自由です。
  • 画像URLはスクリプト内部に記載します。
  • ランダムに設定された条件で作動しますので、合わないものもでます。ご了承ください。
  • Wonderflの記事、BitmapTransition処理のクラスを利用しました。
  • 表現が広がります。満足できるエフェクトです。
  • 当方のFlashDevelopの設定により、as swf クラスの名前は同じです。環境にあわせてください。

参考、出典

Wonderflの記事、BitmapTransition のクラスを利用しました。但しそのままでは使用できず、改良修正しました。現在、Wonderfl記事はコードは取得できるが、画像が切れているのか表示しない。
改良箇所、、、
1. クラスを利用でエラーがでるので、var base:Sprite = new Sprite();を追加した。
2. クラスは使いまわしが出来ない。使いまわしも可能だが、直ぐにBitmapがたまりすぎて動かなくなる。
3. よって、BitmapTransition処理が終了したら直ぐに削除するようにした。(Functionの受け渡しで処理)
以上の修正などにより、快適に動くようになった。詳細はコードを参照ください。不都合があれば書き換えてください。


簡単なスクリプト説明


次の数値を変更してください、

[SWF(width="465", height="465", frameRate="30", backgroundColor="0x000000")]

//大きさ/現在上で決めている
private var boxWidth:Number = 465;
private var boxHeight:Number = 465;

//main-image 画像のおおきさを決定する
private var image_W:Number = 465;
private var image_H:Number = 350;

//thumbnailのおおきさ
private var thumb_W:Number = 32;
private var thumb_H:Number = 24;

-----------------------------------------------------
画像URLの登録は使用者の環境にあわせてください
グラデ画像は、下のダウンロードより取得できます

//画像URL 465x350
imageUrls = [
	"/main/images/cat11m.jpg",
	"/main/images/cat12m.jpg",
	"/main/images/cat13m.jpg",
	"/main/images/cat14m.jpg",
	"/main/images/cat15m.jpg",
	"/main/images/cat16m.jpg",
	"/main/images/cat17m.jpg",
	"/main/images/cat18m.jpg",
	"/main/images/cat19m.jpg",
	"/main/images/cat20m.jpg"
];
//画像説明文
imageMess = [
	"画像説明 1",
	"画像説明 2",
	"画像説明 3",
	"画像説明 4",
	"画像説明 5",
	"画像説明 6",
	"画像説明 7",
	"画像説明 8",
	"画像説明 9",
	"画像説明 10"
];
//マスク画像URL
maskUrls = [
	"/main/images/kirikiri001.png",
	"/main/images/kirikiri002.png",
	"/main/images/kirikiri003.png",
	"/main/images/kirikiri004.png",
	"/main/images/kirikiri005.png",
	"/main/images/kirikiri006.png",
	"/main/images/kirikiri007.png",
	"/main/images/kirikiri008.png",
	"/main/images/kirikiri009.png",
	"/main/images/kirikiri010.png",
	"/main/images/kirikiri011.png",
	"/main/images/kirikiri012.png",
	"/main/images/kirikiri013.png",
	"/main/images/kirikiri014.png",
	"/main/images/kirikiri015.png",
	"/main/images/kirikiri016.png",
	"/main/images/kirikiri017.png",
	"/main/images/kirikiri018.png",
	"/main/images/kirikiri019.png"
];


使用する、グラデーション画像ZIPのダウンロード

ダウンロード: グラデーション画像ZIP 683kb


AS3

as FlashTest168c.as

FlashDevelopで制作しました。中には使用していない変数もあります。画像URLなどは環境に合わせてください。
グラデーション画像は適当に作っても利用できます。コードでグラデを作りキャプチャしてBitmapData化しても使用できます。画像のほうが手軽です。


//MenuBoxテンプレート
//FlashTest168c
//簡単Thumbnail/BitmapTransition
//動作中または、同じ番号は拒否を追加した

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.DropShadowFilter;
	//虹色用
	import frocessing.color.ColorHSV;
		
	[SWF(width="465", height="465", frameRate="30", backgroundColor="0x000000")]

	public class FlashTest168c extends Sprite
	{
		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		private var layer3:Sprite;
		private var layer4:Sprite;
		//コンテナ画像BOX
		private var container:Sprite;
		//Text
		private var tf:TextField;
		private var mvtf:TextField;
		//大きさ/うえで設定している
		private var boxWidth:Number = 465;
		private var boxHeight:Number = 465;
		//Menu収納ベース
		private var menu_base:Sprite;
		private var menu_cover:Sprite;
		//Menu収納ベースのY方向位置/X方向は中央に割り振り
		private var menu_Y:Number = 385;
		//サムネールX位置を保存
		private var photomax:int = 0;
		private var countImage:int = 0;//現在表示配列番号
		//private番号サムネール処理用途
		private var active_no:int = 0;
		//受け渡し番号
		private var show_no:int = 0;
		//前の番号
		private var keep_no:int = 0;
		//start
		private var startflag:Boolean = true;//最初の判定/未使用
		//Mask
		private var maskmax:int = 0;
		private var countMask:int = 0;//Mask配列番号
		//thumbnailのおおきさ
		private var thumb_W:Number = 32;
		private var thumb_H:Number = 24;	
		//LOADER
		private var loader:Loader;
		private var maskloader:Loader;
		//Loading
		private var indicator:DisplayObject;
		//main
		private var mainImages:Array = [];//Array-Bitmap
		//main-imageのおおきさ
		private var image_W:Number = 465;
		private var image_H:Number = 350;
		private var mainImageBox:Sprite;
		//下画像
		private var backImageBox:Sprite;
		//画像
		private var bitmapImages:Array = [];//Array-Bitmap
		private var imageUrls:Array = [];
		private var thumbs:Array = [];//Array-thumbnail
		//マスク
		private var bitmapMasks:Array = [];//Array-Bitmap
		private var maskUrls:Array = [];
		//画像の説明文の保存
		private var imageMess:Array = [];
		//FullScreenButton
		private var fullScreenBtn:Sprite;
		//BitmapTransition
		private var bitmap_base:BitmapTransition;
		//Transition動作中判定
		private var mv_flag:Boolean = false;
		
		public function FlashTest168c ():void
		{
			//ステージ、layer等の基本構造のレイアウト
			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);
			
			//create グラデ背景Sprite/0xB18D8D,0x000000
			var grad_square:Sprite = draw_grad_box(stage.stageWidth, stage.stageHeight, 0x25B7C0, 0x000000);
			addChild(grad_square);
			
			//コンテナ画像BOXをベースにして画像BOXを作る
			container = createSquare(0, 0, image_W, image_H, 0x000000, 1);
			addChild(container);
			//下画像/BitmapTransitionは直ぐ削除するので下画像が必要
			backImageBox = createSquare(0, 0, image_W, image_H, 0x000000, 1);
			container.addChild(backImageBox);
			//上画像/BitmapTransitionを乗せる容器に使用している、透明
			mainImageBox = createSquare(0, 0, image_W, image_H, 0x000000, 0);
			container.x = (stage.stageWidth - image_W) / 2;
			container.y = 30;//25-40
			container.addChild(mainImageBox);
			
			//title
			mvtf = new TextField();
			addChild(mvtf);
			
			//menuサムネール用/サムネール位置算出が簡単なようにlayer3の位置とあわせる
			layer3 = new Sprite();
			addChild(layer3);
			layer3.visible = true;
			
			//text
			tf = createTextField(25, 5, stage.stageWidth - 60, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "文字表示";
			addChild(tf);
			
			//LOADING
			indicator = new Indicator();
			indicator.x = 12;
			indicator.y = 15;
			indicator.addEventListener(Event.ENTER_FRAME, step);//回転Listener
			addChild(indicator);
			indicator.visible = false;
			
			//FullScreenButton
			fullScreenBtn = createFullScreenButton();
			fullScreenBtn.x = stage.stageWidth - 35;
			fullScreenBtn.y = 2;
			addChild(fullScreenBtn);
			//FULLSCREEN-ACTION
			fullScreenBtn.addEventListener(MouseEvent.CLICK, fullClickHandler);
			
			tf.text = "";
			
			//GOTO-Url_Set
			loadImage_Url_Set();
		}
		// 画像URL-SET
		private function loadImage_Url_Set():void {
			//画像URL 465x350
			imageUrls = [
				"/main/images/cat11m.jpg",
				"/main/images/cat12m.jpg",
				"/main/images/cat13m.jpg",
				"/main/images/cat14m.jpg",
				"/main/images/cat15m.jpg",
				"/main/images/cat16m.jpg",
				"/main/images/cat17m.jpg",
				"/main/images/cat18m.jpg",
				"/main/images/cat19m.jpg",
				"/main/images/cat20m.jpg"
			];
			//画像説明文
			imageMess = [
				"画像説明 1",
				"画像説明 2",
				"画像説明 3",
				"画像説明 4",
				"画像説明 5",
				"画像説明 6",
				"画像説明 7",
				"画像説明 8",
				"画像説明 9",
				"画像説明 10"
			];
			//マスク画像URL
			maskUrls = [
				"/main/images/kirikiri001.png",
				"/main/images/kirikiri002.png",
				"/main/images/kirikiri003.png",
				"/main/images/kirikiri004.png",
				"/main/images/kirikiri005.png",
				"/main/images/kirikiri006.png",
				"/main/images/kirikiri007.png",
				"/main/images/kirikiri008.png",
				"/main/images/kirikiri009.png",
				"/main/images/kirikiri010.png",
				"/main/images/kirikiri011.png",
				"/main/images/kirikiri012.png",
				"/main/images/kirikiri013.png",
				"/main/images/kirikiri014.png",
				"/main/images/kirikiri015.png",
				"/main/images/kirikiri016.png",
				"/main/images/kirikiri017.png",
				"/main/images/kirikiri018.png",
				"/main/images/kirikiri019.png"
			];
			
			//カウント
			countImage = 0;
			//画像数
			photomax = imageUrls.length;
			//カウント2
			countMask = 0;
			//マスク画像数
			maskmax = maskUrls.length;
			//LOADING表示
			indicator.visible = true;
			//GOTO-loadImage
			loadImage();
		}
		
		// 画像をロード
		private function loadImage():void {
			//画像
			loader = new Loader();
			var imageName:String = imageUrls[countImage];
			loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete_img);//onComplete
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);//Error
			loader.load(new URLRequest(imageName));//loader
		}
		//onComplete
		private function onComplete_img(event:Event):void {
			loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete_img);
			tf.text = "画像読み込み中";
			
			//main-imageの加工保存			
			//Matrixを使用した場合
			var mainloader:Loader = event.currentTarget.loader;
			var ratio:Number = image_W / loader.width;//縮尺比率
			var matrix:Matrix = new Matrix();
			matrix.scale(ratio, ratio);
			var bd2:BitmapData = new BitmapData(image_W, image_H, false);
			bd2.draw(mainloader, matrix);//Matrixを適応
			mainImages.push(bd2);
			
			//サムネール用にLoaderを用意する
			var cliploader:Loader = event.currentTarget.loader;//onComplete(event:Event)を参照する
			//loaderのBitmapを縮小操作する/BitmapDataを直接縮小操作できないから
			var thumb_bitmap:Bitmap = Bitmap(cliploader.content) as Bitmap;
			thumb_bitmap.width = thumb_W;
			thumb_bitmap.height = thumb_H;
			
			//BitmapData化
			//BitmapDataを得る1/縮小されている
			var bd:BitmapData = new BitmapData(thumb_W, thumb_H, false);
			//縮小操作したloaderをBitmapData容器に流しこむ
			bd.draw(cliploader);
			
			//BitmapDataを配列に入れる
			bitmapImages[countImage] = bd;
			countImage ++;
			
			//サムネール用Sprite容器にBitmapを収納する
			//薄めにDropShadow処理
			var thumb:Sprite = new Sprite();
			var Dshadow:DropShadowFilter = new DropShadowFilter();
			Dshadow.distance = 2.0;
			Dshadow.alpha = 0.5;
			thumb.filters = [Dshadow];
			thumb.addChild(thumb_bitmap);
			thumbs.push(thumb);
			
			//全て読み込んだらinitにまだなら残り画像をロードする
			if (countImage >= photomax) {
				//LOADING非表示
				indicator.visible = false;
				//画像をロード終了/マスク画像をロードに進む
				loadMask();
			} else {
				//残り画像をLoad
				loadImage();
			}
		}
		
		//マスク画像をロード
		private function loadMask():void {
			//マスク画像
			maskloader = new Loader();
			var maskName:String = maskUrls[countMask];
			maskloader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete_mask);//
			maskloader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler2);//Error
			maskloader.load(new URLRequest(maskName));//loader
		}
		//onComplete-mask
		private function onComplete_mask(event:Event):void {
			maskloader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete_mask);
			tf.text = "マスク画像読み込み中";
			
			//maskの加工保存		
			//Matrixを使用した場合
			var subloader:Loader = event.currentTarget.loader;
			
			//Matrixを使用大きさを、画像の大きさにする
			var ratio:Number = image_W / maskloader.width;//縮尺比率
			var matrix:Matrix = new Matrix();
			matrix.scale(ratio, ratio);
			var bd2:BitmapData = new BitmapData(image_W, image_H, false);
			bd2.draw(subloader, matrix);//Matrixを適応
			//配列に保存
			//画像サイズに合わせた完全なBitmapDataを保存している
			bitmapMasks.push(bd2);
			
			//カウントをすすめる
			countMask ++;
			
			//全て読み込んだらinitにまだなら残り画像をロードする
			if (countMask >= maskmax) {
				//LOADING非表示
				indicator.visible = false;
				//マスク画像をロード終了goto-init
				init();
			} else {
				//残りマスク画像をLoad
				loadMask();
			}
		}

		// INIT
		private function init():void {
			//init
			//マスク画像数を再度チェック/エラーの場合は読み込んでいない
			maskmax = bitmapMasks.length;
			//goto-MakeHoverMenuサムネールを仮セット
			make_HoverMenu();
			//最初の画像を表示
			show_Image(0);
			//goto-main
			main_action();
		}
		//現在ページ1対応
		private function make_HoverMenu():void {
			
			//menu画像を配置
			menu_base = new Sprite();//背景なし
			menu_base.y = 0;
			
			//初期の配置、現在ページ1対応、複数ページはまだ処理していない
			var btnsX:Number = 0;
			var i:int = 0;
			for (i = 0; i < photomax; ++i) {
				
				thumbs[i].x = btnsX;
				thumbs[i].y = 0;
				
				btnsX += (thumb_W + 2);
				//ボタン CLICK-Listener
				thumbs[i].addEventListener(MouseEvent.CLICK, mouseClickHandler);
				//ボタンモード設定
				thumbs[i].buttonMode = true;
				//
				menu_base.addChildAt(thumbs[i], i);
			}
			//layer3に表示/中央補正
			layer3.x = (stage.stageWidth - menu_base.width) / 2;
			layer3.y = menu_Y;//高さ決定
			layer3.addChild(menu_base);
			
			//menu_cover/ラインだけ
			menu_cover = new Sprite();
			menu_cover.graphics.lineStyle(1,0xFF0000);
			menu_cover.graphics.drawRect(0, 0, thumb_W, thumb_H);
			layer3.addChild(menu_cover);
			//
		}
		
		// MAIN-ACTION
		private function main_action():void {
			//main_action as3 hear
			
			var msg:String="POPS WEB KOUBOU";
			var mvtextColor:uint;
			var nAngle:Number = Math.PI * 2 / msg.length;
			var cAngle:Number = 0;
			//TextFormat
			var tfm:TextFormat = new TextFormat("_sans", 40, 0x666666, true);
			mvtf.defaultTextFormat = tfm;
			mvtf.autoSize = TextFieldAutoSize.LEFT;
			mvtf.text = msg;//msg.substr(i, 1)
			mvtf.textColor = 0x000000;
			mvtf.selectable = false;
			//個別に着色
			for (var i:int = 0; i < msg.length; ++i) {
				//虹色にそめる
				var hsv:ColorHSV = new ColorHSV(0, 1, 1, 1);
				hsv.h = cAngle / Math.PI * 180;
				//虹色を取得受け渡す
				mvtextColor = hsv.value;
				cAngle += nAngle;
				var tfm2:TextFormat = new TextFormat();
				tfm2.color = mvtextColor;
				mvtf.setTextFormat(tfm2, i);
			}
			//位置の確定
			mvtf.x = (stage.stageWidth - mvtf.width) / 2;
			mvtf.y = 410;
			//
		}
		
		//画像の表示
		//click-show-image/番号に注意、1番から始まる、配列は0番
		private function show_Image(no:int):void {
			
			//Transition動作中判定
			mv_flag = true;
			
			//画像説明文
			//tf.text = " 番号 " + no + " / URL " + imageUrls[no];
			tf.text = imageMess[no];
			
			//private番号/サムネール用
			active_no = no;
			//受け渡し番号
			show_no = no;
			
			//mainImage/BoxTransitionマスクを選定
			var mask_no:Number = int(Math.random() * maskmax);
			//マスクを選定2
			var mask_no2:int = int(Math.random() * 10);
			
			//myFunc/mvMaskからonFinishTweenを実行するためにFunctionを受け渡す
			//public private でもOK/受け渡さないと機能しない
			var myFunc:Function = onFinishTween;
			
			//mask_no2の確率でマスクを同じ画像に変える/白黒でなくとも使用できる
			var alpha_bitmap:BitmapData = bitmapMasks[mask_no];
			if (mask_no2 == 0) { alpha_bitmap = mainImages[no]; }
			
			//順次おもくなるので、処理がおわったら削除すること/bitmapMasks[mask_no]
			//トランジッション設定(第一引数:切り替えたい画像のbitmapdata 第二引数:切替に使う白黒画像 第三引数:切替速度1~10ぐらいまで)
			//切替速度 1遅い、10早い
			bitmap_base = new BitmapTransition(mainImages[no], alpha_bitmap, 6, myFunc);
			mainImageBox.addChild(bitmap_base);
			
			//ボタン赤色ラインカバーのセット activeな画像と同じ位置に移動
			menu_cover.x = thumbs[active_no].x;
			menu_cover.y = thumbs[active_no].y;
			
			keep_no = show_no;
			
		}
		
		//TweenonComplete
		private function onFinishTween():void {
			//tf.text = "onFinishTween";
			
			//Transition動作中判定
			mv_flag = false;
			
			//下画像表示用/bitmapData
			backImageBox.graphics.clear();
			backImageBox.graphics.beginBitmapFill(mainImages[show_no], null, false, false);
			backImageBox.graphics.drawRect(0, 0, image_W, image_H);
			backImageBox.graphics.endFill();
			//BitmapTransition削除
			mainImageBox.removeChild(bitmap_base);
		}
		
		//mouseClick 動作中または、同じ番号は拒否
		private function mouseClickHandler(e:MouseEvent):void
		{
			//currentTargetの位置番号を取得
			var no:int = menu_base.getChildIndex(e.currentTarget as DisplayObject);
			//動作中または、同じ番号は拒否
			if (show_no == no || mv_flag) { return }
			//show
			show_Image(no);
		}
	
		//ERROR(Image)
		private function ioErrorHandler(event:IOErrorEvent):void {
			//ERROR処理
			tf.text = "LOADING-EROOR";
			
			//画像が無いとその後の処理が出来なくなるのでダミーをいれて次ぎの処理にすすむ
			//特殊処理大きさ受け渡し、ダミーのBitmapDataを挿入する
			mainImages[countImage] = new BitmapData(image_W, image_H, false, 0x000000);
			
			//現在はサムネール用Sprite容器にBitmapを収納する方法をとっているので、黒のSpriteをいれる
			var s:Sprite = new Sprite();
			s.graphics.beginFill(0x000000, 1);
			s.graphics.drawRect(0, 0, thumb_W, thumb_H);
			s.graphics.endFill();
			thumbs[countImage] = s;
			
			//画像ERRORならカウントをすすめて次ぎ画像ロードに進む
			countImage ++;
			loadImage();
		}
		//ERROR2(Mask)
		private function ioErrorHandler2(event:IOErrorEvent):void {
			//ERROR処理
			tf.text = "LOADING-EROOR";
			//画像ERRORならカウントをすすめて次ぎ画像ロードに進む
			countMask ++;
			loadMask();
		}
		
		//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;
		}
		//create-MenuBox
		private function createMenuBox(x:Number, y:Number, width:Number, height:Number, width2:Number, height2:Number, color1:uint, color2:uint, linecolor:uint, linewidth:Number, round:Number):Sprite {
			//大きさ計算/スペース/right_spcは20を標準とするよう
			var right_spc:Number = int((width - width2) / 2);
			var left_spc:Number = int(width - width2 - right_spc);
			var top_spc:Number = int((height - height2) / 2);
			var under_spc:Number = int(height - height2 - top_spc);
			
			var matrix:Matrix = new Matrix;
			var colors:Array = [color1,color2];
			var alphas:Array = [1,1];
			var ratios:Array = [0, 255];
			
			//中抜き
			var mb:Sprite = new Sprite();
			matrix.createGradientBox(width, height, Math.PI / 2, height, 0);
			mb.graphics.beginFill(0x000000);
			mb.graphics.beginGradientFill(GradientType.LINEAR,colors,alphas,ratios,matrix,SpreadMethod.PAD);
			mb.graphics.drawRoundRect(0, 0, width, height, round);
			mb.graphics.drawRoundRect(right_spc, top_spc, width2, height2, round / 2);//外の半分の径
			mb.graphics.lineStyle(linewidth, linecolor, 1);
			mb.graphics.beginFill(0, 0);
			mb.graphics.drawRoundRect(right_spc, top_spc, width2, height2, round / 2);//外の半分の径
			mb.graphics.endFill();
			return mb;
		}
		//create-MenuBtn
		private function createMenuBtn(width:Number, height:Number, color1:Number, color2:Number):Sprite {
			var mbn:Sprite = new Sprite();
			//Circle
			mbn.graphics.beginFill(color1, 1);
			mbn.graphics.drawCircle(0, 0, width/2);
			mbn.graphics.endFill();
			//arrow
			mbn.graphics.beginFill(color2, 1);
			mbn.graphics.moveTo( -width / 5, -width / 5);
			mbn.graphics.lineTo( width / 4, 0);
			mbn.graphics.lineTo( -width / 5, width / 5);
			mbn.graphics.endFill();
			return mbn;
		}
		//
		private function createMenuBtn_base(width:Number, height:Number, color1:Number, color2:Number, round:Number):Sprite {
			//左右回転して使用するため中心補正 Sprite使用
			var mbn:Sprite = new Sprite();
			mbn.graphics.beginFill(color1, 1);
			mbn.graphics.moveTo(-width / 2, -height / 2);
			mbn.graphics.lineTo(width - round - width / 2, -height / 2);
			mbn.graphics.curveTo(width - width / 2, -height / 2, width - width / 2, round - height / 2);
			mbn.graphics.lineTo(width - width / 2, height - round - height / 2);
			mbn.graphics.curveTo(width - width / 2, height - height / 2, width - round - width / 2, height - height / 2);
			mbn.graphics.lineTo(-width / 2, height - height / 2);
			mbn.graphics.endFill();
			return mbn;
		}
		
		//LOADING回転
		private function step(evt:Event):void {
			indicator.rotation = (indicator.rotation + 360 / stage.frameRate) % 360;
		}
		//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.events.*;
import flash.geom.Matrix;
import flash.geom.Rectangle;
import flash.utils.getTimer;
//
class BitmapTransition extends Sprite {
	//private var _bmpTemp:BitmapData;
	private var _bmpAlpha:BitmapData;
	private var _bmpResult:BitmapData;
	private var _bmpMaster:BitmapData;
	private var _sizeMaster:Rectangle;

	private var _duration:Number;
	private var _delay:Number;
	private var _cnt:uint;

	private var cnt_b:int;
	private var bitmap_b:Bitmap;
	//受け渡しFunction
	private var _myFunc:Function

	//画像BitmapData、マスクBitmapData
	public function BitmapTransition(bmpMaster:BitmapData, bmpAlpha:BitmapData, delay:Number, myFunc:Function):void {
		//形式だけでもSpriteナイト不都合が起きるので配置、始めSpriteがなかったので苦労した
		//全体をWRAPする、baseを用意する
		var base:Sprite = new Sprite();
		//base.graphics.beginFill(0x000000, 0);
		//base.graphics.drawRect(0, 0, bmpMaster.width, bmpMaster.height);
		//base.graphics.endFill();
		addChild(base);
		_myFunc = myFunc;
		_cnt = 0;
		cnt_b = 0;
		//
		_bmpMaster = bmpMaster;
		_sizeMaster = new Rectangle(0, 0, bmpMaster.width, bmpMaster.height);
		_delay = delay;
		if (!_delay) { _delay = 8; }
		createResult();
		createAlpha(bmpAlpha);
		addEventListener(Event.ENTER_FRAME, reDraw);
	}

	private function createResult():void {
		//キャンパスcreateAlphaさせるためtrue
		//一度reDrawすると透明でなくなるのでその都度addChildしなければならないのが問題だ、使いまわしが出来ない
		_bmpResult = new BitmapData(_sizeMaster.width, _sizeMaster.height, true, 0x000000);
		bitmap_b = new Bitmap(_bmpResult);
		addChild(bitmap_b);
	}
	private function createAlpha(bmp:BitmapData):void {
		//マスク画像の大きさを主画像の大きさにする/falseでも変わらない
		_bmpAlpha = new BitmapData(_sizeMaster.width, _sizeMaster.height, false);
		//ここでは完全な bmpBitmapData がうけわたされているのでマトリックス処理はしない
		_bmpAlpha.draw(bmp);
		/*
		var mtx:Matrix = new Matrix();
		mtx.scale(_sizeMaster.width / bmp.width, _sizeMaster.height / bmp.height);
		_bmpAlpha.draw(bmp, mtx);
		*/
	}
	//
	private function reDraw(e:Event = null):void {
		//マスク画像のしきい値により画像をPixel32描画する
		var v:uint = _sizeMaster.height;
		var h:uint = _sizeMaster.width;
		var mydelay:uint;
		var color:uint
		//キャンパスロック
		_bmpResult.lock();
		
		//画像をキャンパスに描画
		for (var j:int = 0; j < v; j++) {
			for (var i:int = 0; i < h; i++) {
				mydelay = uint((_bmpAlpha.getPixel(i, j) >> 16) / _delay );//0~255までの値を吐く
				if ((mydelay <= _cnt && mydelay+10 >= _cnt)){
					color  = uint((_cnt - mydelay) / 10 * 255) << 24
					_bmpResult.setPixel32(i, j, color | uint(_bmpMaster.getPixel(i, j)));
				}
			}
		}
		//キャンパスロック解除
		_bmpResult.unlock();
		_cnt++;
		//終了処理
		if (_cnt > 255/_delay+10){
			removeEventListener(Event.ENTER_FRAME, reDraw);
			//削除などの処理に進む/受け渡したFunctionを使用
			_myFunc();
		}
	}
}

//LOADING-Shape
import flash.display.Shape;
class Indicator extends Shape {
	public function Indicator() {
		var i:uint,
		cx:Number, cy:Number,
		numNeedles:uint = 12,
		innerR:Number = 7,
		outerR:Number = 5,
		cAngle:Number = -Math.PI / 2,
		nAngle:Number;
		
		nAngle = Math.PI * 2 / numNeedles;
		for (i=0; i<numNeedles; i++) {
			cAngle += nAngle;
			cx = Math.cos(cAngle) * innerR;
			cy = Math.sin(cAngle) * innerR;
			graphics.moveTo(cx, cy);
			
			cx = Math.cos(cAngle) * outerR;
			cy = Math.sin(cAngle) * outerR;
			graphics.lineStyle(2, 0xffffff, i/numNeedles);
			graphics.lineTo(cx, cy);
		}
	}
}

画像は、Wonderfl さんのものを再利用しました。色々学習しているとたまちゃう。


参考記事 wonderfl BitmapTransition

【出典】wonderfl.net: wonderfl.net/c/ph57


以上です。



[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]