POPSブログ

FLASH-SLIDESHOW-6

66

  Category:  flash2012/03/28 pops 

FLASH AS3 による、透過マスク方式のスライドショー(アルバム)です。自動を削除して、スイッチボタン風ページャー付きにしました。
FLASH-SLIDESHOW-2の改造品です。


FLASH-SLIDESHOW-6

FlashTest169c.swf

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


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


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


簡単な説明

「ホーバーサムネール」「スイッチボタン風」ページャー付きの「簡単なスライドショー」タイプです。

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

簡単な動作の説明

説明図


FLASH-SLIDESHOW-2を改造したものです。基本的には同じになります。
ボタンホーバーで上にサムネールが表示されます。ボタンクリックで、ランダムに選定されたエフェクトを実行します。エフェクト途中での「ボタンクリック」は反応しません。必ずエフェクトが終了してから選定ください。
サムネール、ボタンの間隔などは変更可能です。またボタンの位置も画像の外に移動可能です。
当初、ボタンの間隔は広くしています。322行前後のコードで変更できます。
ボタンの色変更は、通常一般の方法ではなく、かなりズルした書き方になっています。


簡単なスクリプト説明


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

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

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

//thumbnailのおおきさ
private var thumb_W:Number = 64;
private var thumb_H:Number = 48;

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


-----------------------------------------------------

画像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"
];


AS3

as FlashTest169c.as

FlashDevelopで制作しました。中には使用していない変数もあります。画像URLなどは環境に合わせてください。


//TM_SlideShow
//FlashTest169c
//Hover-Thumbnail

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;
	//Tween
	import com.greensock.*;
	import com.greensock.easing.*;
	/*	
	import org.libspark.betweenas3.BetweenAS3;
	import org.libspark.betweenas3.easing.Linear;
	import org.libspark.betweenas3.tweens.ITween;
	*/
	
	[SWF(width="465", height="465", frameRate="30", backgroundColor="0x000000")]

	public class FlashTest169c extends Sprite {
		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		private var layer3:Sprite;
		private var layer4:Sprite;
		//Text
		private var tf:TextField;
		private var mvtf:TextField;
		//大きさ/上で設定している
		private var boxWidth:Number = 465;
		private var boxHeight:Number = 465;
		//hover-box
		private var hover_box:Sprite;
		//Menu収納ベース
		private var menu_base:Sprite;
		private var menu_tf1:TextField;
		//Menu収納ベースのY方向位置/X方向は中央に割り振り
		private var menu_Y:Number = 360;
		//サムネールX位置を保存
		private var photomax:int = 0;
		private var countImage:int = 0;//現在表示配列番号
		//private番号サムネール処理用途
		private var active_no:int = 0;
		//thumbnailのおおきさ
		private var thumb_W:Number = 64;//64
		private var thumb_H:Number = 48;//48
		//LOADER
		private var loader: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;//画像BOX
		private var backImageBox:Sprite;//背景用画像BOX
		private var show_no:int = 0;//現在表示番号
		//
		private var bitmapImages:Array = [];//Array-Bitmap未使用
		private var imageUrls:Array = [];
		private var thumbs:Array = [];//Array-thumbnail
		private var arry_xs:Array = [];//ボタン位置保存未使用
		private var hoverbtns:Array = [];//Array-hoverbtn
		//サムネール収容パネル
		private var thumbPanel:Sprite;
		//分割
		private var rectBase:Sprite;
		private var cx:int;
		private var cy:int;
		//分割要素の大きさ正方形
		private var r_size:Number = 31;//31
		//画像分割数
		private var split_h:int = Math.ceil(image_W/r_size);
		private var split_v:int = Math.ceil(image_H/r_size);;
		private var rectParts:Array = [];//保存
		private var split_total:int = split_v * split_h;//分割合計
		private var twn_count:int = 0;//分割合計カウント比較
		private var tweenflag:Boolean = false;//tweenの終了判定		
		private var ptn_no:int = 0;// パターン番号		
		//画像の説明文の保存
		private var imageMess:Array = [];
		//FullScreenButton
		private var fullScreenBtn:Sprite;
		
		public function FlashTest169c ():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);
			
			//layer1/backImageBox
			layer1 = new Sprite();
			addChild(layer1);
			backImageBox = createSquare(0, 0, image_W, image_H, 0x000000, 1);
			layer1.addChild(backImageBox);
			layer1.visible = false;
			
			//layer2をベースにして画像BOXを作る
			layer2 = createSquare(0, 0, stage.stageWidth, 0, 0x000000, 0);
			addChild(layer2);
			mainImageBox = createSquare(0, 0, image_W, image_H, 0x000000, 0);
			layer2.x = (stage.stageWidth - image_W) / 2;
			layer2.y = 30;//25-40
			layer2.addChild(mainImageBox);
			//空のマスクベースを用意する
			rectBase = new Sprite();
			layer2.addChild(rectBase);
			//マスク透明度を有効にする1
			mainImageBox.cacheAsBitmap = true;
			//マスク透明度を有効にする2
			rectBase.cacheAsBitmap = true;
			//マスクをかける設定
			mainImageBox.mask = rectBase;
			
			//title
			mvtf = new TextField();
			addChild(mvtf);
			
			//hover-menu
			layer3 = new Sprite();
			addChild(layer3);
			
			//hover-menuサムネール用/サムネール位置算出が簡単なようにlayer3の位置とあわせる
			layer4 = new Sprite();
			addChild(layer4);
			
			//text
			tf = createTextField(25, 5, stage.stageWidth - 60, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "文字表示";
			addChild(tf);
			
			//下画像BOXを画像BOX位置にあわせる
			layer1.x = layer2.x;
			layer1.y = layer2.y;
			layer1.visible = true;

			//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 640x480
			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"
			];
			
			//カウント
			countImage = 0;
			//画像数
			photomax = imageUrls.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);//
			loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);//Error
			loader.load(new URLRequest(imageName));//loader
		}

		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)を参照する
			var bd:BitmapData = new BitmapData(thumb_W, thumb_H, false);
			var ratio2:Number = thumb_W / cliploader.width;//縮尺比率
			var matrix2:Matrix = new Matrix();
			matrix2.scale(ratio2, ratio2);
			//縮小操作したloaderをBitmapData容器に流しこむ/位置を移動してもその形態で保存はしないので注意
			bd.draw(cliploader, matrix2);
			
			//サムネール中心補正流し込み
			var matrix3:Matrix = new Matrix();
			matrix3.translate( -thumb_W / 2, -thumb_H / 2);
			//サムネール用Sprite容器にBitmapを収納する
			var thumb:Sprite = new Sprite();
			thumb.graphics.beginBitmapFill(bd,matrix3);
			thumb.graphics.drawRoundRect(-thumb_W/2, -thumb_H/2, thumb_W, thumb_H, 5);
			thumb.graphics.endFill();
			thumbs.push(thumb);
			//
			countImage ++;
			
			//全て読み込んだらinitにまだなら残り画像をロードする
			if (countImage >= photomax) {
				//LOADING非表示
				indicator.visible = false;
				//画像をロード終了goto-init
				init();
			} else {
				//残り画像をLoad
				loadImage();
			}
		}
		
		// INIT
		private function init():void{
			//init
			//goto-MakeHoverMenu
			make_HoverMenu();
			//サムネールを仮セット
			set_imageBox();
			//マスク要素を作る
			make_rect();
			//最初の画像を表示
			loadImage2(0);
			//goto-main
			main_action();
		}
		//menu_baseに全サムネールを仮セット、Listenerセット
		private function set_imageBox():void {
			//DropShadowFilter加工サムネール表示パネル
			//(w:Number,h:Number,r:Number,h2:Number,color1:uint,color2:uint,line_w:Number)
			//幅 高さ R アロー高さ 内部色 線色 線幅
			//少し大きめに作る
			thumbPanel = createThumbPanel(thumb_W + 4, thumb_H + 4, 5, 5, 0xFFFFFF, 0xCCCCCC, 0);
			thumbPanel.x = 100;
			thumbPanel.y = 100;
			layer4.addChild(thumbPanel);
			thumbPanel.visible = false;
			
			//初期の配置、現在ページ1対応、複数ページはまだ処理していない
			var i:int = 0;
			for (i = 0; i < photomax; ++i) {
				//サムネール00セット非表示
				thumbs[i].x = 0;
				thumbs[i].y = 0;
				thumbs[i].visible = false;
				//thumbPanel
				thumbPanel.addChild(thumbs[i]);
				//layer4をlayer3menu_baseと同じ位置にする
				layer4.x = layer3.x;
				layer4.y = layer3.y;
			}
			//
		}
		
		//Menu
		private function make_HoverMenu():void {
			//hoverボタン20x20サイズとした場合/現在実際はボタンは小さいので大きい間隔になる
			var btn_w:Number = 20;//ボタン直径
			menu_base = new Sprite();//背景なし
			menu_base.y = 0;
			
			//ボタン作成、ベースに固定
			var i:int = 0;
			for (i = 0; i < photomax; ++i) {
				var hb:Sprite = new HoverBtn() as Sprite;
				hoverbtns.push(hb);
			}
			var btnsX:Number = 0;
			for (i = 0; i < photomax; ++i) {
				hoverbtns[i].x = btnsX;
				hoverbtns[i].y = 0;
				//ボタン位置保存
				arry_xs.push(btnsX);
				//間隔のスペース
				btnsX += (btn_w + 5);
				//ボタン mouseOverOut-Listener
				hoverbtns[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
				//ボタン mouseOut-Listener
				hoverbtns[i].addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
				//ボタン CLICK-Listener
				hoverbtns[i].addEventListener(MouseEvent.CLICK, mouseClickHandler);
				//
				menu_base.addChildAt(hoverbtns[i], i);
			}
			//layer3に表示/中央補正
			layer3.x = (stage.stageWidth - menu_base.width) / 2;
			layer3.y = menu_Y;//高さ決定
			layer3.addChild(menu_base);
			//
		}
		
		// 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 = 390;
			//
		}
		
		//画像の表示
		//click-loadImage/番号に注意、1番から始まる、配列は0番
		private function loadImage2(no:int):void {
			//tweenの終了判定
			tweenflag = false;
			//画像説明文
			tf.text = imageMess[no];
			//tf.text = " 番号 " + no + " / URL " + imageUrls[no];
			
			//private番号/サムネール用
			active_no = no;
			
			//受け渡し現在表示番号 / noはローカル
			show_no = no;
			//mainImageBoxエフェクトの準備/Cross-Fadeのため一旦非表示にして処理
			mainImageBox.visible = false;
			
			//mainImageBox
			//画像表示用流し込み/bitmapData
			mainImageBox.graphics.clear();
			mainImageBox.graphics.beginBitmapFill(mainImages[no], null, false, false);
			mainImageBox.graphics.drawRect(0, 0, image_W, image_H);
			mainImageBox.graphics.endFill();
			
			//ボタン赤色カバーのセット
			var i:int = 0;
			for (i = 0; i < photomax; ++i) {
				if (i == active_no) {hoverbtns[i]._cover.visible = true;}
				else {hoverbtns[i]._cover.visible = false;}
			}
			
			mainImageBox.alpha = 1;
			mainImageBox.visible = true;
			
			//カウント比較クリア
			twn_count = 0;
			rect_effect();
			
		}
		
		//TweenonComplete
		private function onFinishTween():void {
			//tweenの終了
			tweenflag  = false;
			
			//終了処理/受け渡し番号show_noで処理
			//BACK画像表示用/layer1流し込み/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();
			//上画像はそのままにしておく
			//removeChild(rectBase);
			//mainImageBox.mask = null;	
			
		}
		
		//make_rect
		private function make_rect():void {
			
			var i:uint = 0;
			var j:uint = 0;
			var k:int = 0;
			
			for (i = 0; i < split_h; i++) {         
				for (j = 0; j < split_v; j++) {
					//マスク要素SpriteをRectクラスで作る/mtflag=0
					var rect_part:Sprite = new Rect(cx, cy, r_size);
					rect_part.x = i * r_size + r_size / 2;
					rect_part.y = j * r_size + r_size / 2;
					//画像全体にマスク生成配置
					rectBase.addChild(rect_part);
					//保存
					rectParts[k] = rect_part;
					k ++;
				}
			}
		}
		
		//rect_effect
		private function rect_effect():void {
			
			//Even奇数偶数の判定
			var even_v:int = 1;
			if (split_v % 2 != 0) {even_v = 0;}
			
			//tweenの終了判定・tweenの途中
			tweenflag = true;
			var mtflag:int = Math.random() * 23;//パターン番号/defaultが少し多くなる
			var sflag:Number = Math.random() * 3;//xスケール
			var aflag:Number = Math.random() * 3;//透明度
			var rflag:Number = Math.random() * 8;//回転
			//
			var evenflag:int = Math.random() * 5;//市松パターン確率
			var flag3:int = 1;//市松パターン用判定
			
			//マスク要素tween標準時間
			var tweenTime:Number = 0.5;//0.5
			//全て同時の場合早すぎので遅くする スケール1
			if (mtflag == 5) {
				tweenTime = 2.0;
				sflag = 0;
			}
			//透明度1の場合はスケール0
			if (aflag <= 1) {
				aflag = 0;
			}else {
				sflag = 0;
			}
			//回転はあまり設定しない
			if (rflag > 5) { rflag = 0; }
			
			ptn_no = mtflag;
			var g:Number = 0;
			var delay_time:Number;
			var r:Number = r_size;//分割幅
			var i:uint = 0;
			var j:uint = 0;
			var k:int = 0;
			//計算の簡易化のため先にマイナス
			var sh:Number = split_h - 1;//横分割
			var sv:Number = split_v - 1;//縦分割
			
			for (i = 0; i < split_h; i++) {
				for (j = 0; j < split_v; j++) {
					
					rectParts[k].alpha = aflag;//0 1
					rectParts[k].scaleX = 0.5 * sflag;//0 0.5 1
					rectParts[k].scaleY = 0.5 * sflag;//0 0.5 1
					rectParts[k].rotation = 60 * rflag;//0 60 120 180 240 0が多い
					
					//パターン作成/FLASHの場合は時間が重なってもほぼ動いてくれる
					//画像が正方形の場合はキレイになる/簡易計算
					switch (mtflag) {
						case 0:
  							g = Math.abs(i - (sh / 2)) + Math.abs(j - (sv / 2));//中心より広がる
						break;
						case 1:
  							g = k * 0.2;//配列の順序に
						break;
						case 2:
							g = Math.abs(i + 0.5 - sh / 2) + j * 0.01;//内から外
						break;
						case 3:
  							g = Math.abs(i - j);//対角線状に広がる、ずれるが簡単
							/*g = Math.abs((i - sh / 2) - (j - sv / 2)) * 2;//同じ*/
							/*g = Math.abs( j -  Math.abs(i - sh));//左右反転の対角線状*/
						break;
						case 4:
  							g = (j + i) / 4 + 2 * i;//左から右へ
						break;
						case 5:
  							g = 2;//全て同時
						break;
						case 6:
  							g = Math.abs(sv - j) + Math.abs(sh - i);//右下から左上へ
						break;
						case 7:
  							g = 2 + Math.abs(sh - i);//右から左へ
						break;
						case 8:
							g = (Math.abs(Math.abs(i - sh / 2) - sh) + Math.abs(Math.abs(j - sv / 2) - sv)) * 0.75;//外から中心へ、時間調整
						break;
						case 9:
							g = Math.abs(i - sh / 2) + j * 0.01;//縦状、内から外2
						break;
						case 10:
  							g = 2 + Math.abs(sv - j);//下から上へ
						break;
						case 11:
  							g = 2 + j;//上から下へ
						break;
						case 12:
  							g = (2 + j) + (Math.abs(Math.abs(i - sh / 2) - sh));//上から閉じるように
						break;
						case 13:
  							g = Math.floor(Math.random()*20)+1;//ランダム
						break;
						case 14:
							g = Math.abs(k - (split_h * split_v) / 2) / 2;//中から外に3
						break;
						case 15:
							g = Math.abs(k / 2 - j) / 2;//右から左に下からあがる、7番変形
						break;
						case 16:
							g = Math.abs(i - (sh / 2)) - Math.abs(j - (sv / 2));//0番 中心からの位相ずれ
						break;
						case 17:
							g = split_v - Math.abs(i - j);//対角線状に外から内側に、3番の反対/余り良くない
							/*g = Math.abs((i + j) - Math.abs(i - j))/2;//カギ状に*/
						break;
						case 18:
							g = Math.abs(j + Math.abs(i - sh));//右上から左下に、斜め
						break;
						case 19:
							g = Math.abs(i + Math.abs(j - sv));//左下から右上に、斜め、18番の上下反転
						break;
						case 20:
							g = 2 + Math.abs(sv - j) + (Math.abs(Math.abs(i - sh / 2) - sh));//下から閉じるように
						break;
						default:
							g = (i + j) * 0.5;//要素の展開TIMEパターン標準 左上から右下へ、斜め最適化
					}
					
					//BetweenAS3.delay(BetweenAS3.tween(rectParts[k],{ alpha:1, scaleY:1, scaleX:1, rotation: 0}, null, tweenTime), g / 10).play();
					//市松パターン遅延/確率20%
					if (flag3 == -1 && evenflag == 0) { g += 10; }
					//代入
					delay_time = g / 10;
					TweenMax.to(rectParts[k], tweenTime, { delay:delay_time, alpha:1, scaleY:1, scaleX:1, rotation: 0, onComplete:delay_time_check } );
					
					k ++;
					flag3 *= -1;
					
				}
				if (even_v) {flag3 *= -1;}//偶数なら処理
			}
		}
		
		//全てのdelay	が終了したかチェック	
		private function delay_time_check():void {
			//delay終了カウント
			twn_count ++;
			//分割合計に達したらTween終了処理に進む
			if (split_total == twn_count) {
				onFinishTween();
			}
		}
		
		//mouseClick
		private function mouseClickHandler(e:MouseEvent):void {
			//tweenの終了まで処理時間が長いので終了していないならClickを受け付けない
			if (tweenflag) {return}
			//currentTargetの位置番号を取得
			var no:int = menu_base.getChildIndex(e.currentTarget as DisplayObject);
			loadImage2(no);
		}
		//mouseOver表示位置
		///グローバル位置変換修正、完全では無いのでMENU位置と位置をあわせて計算した
		private function mouseOverHandler(event:MouseEvent):void {
			//currentTargetの位置番号を取得
			var no:int = menu_base.getChildIndex(event.currentTarget as DisplayObject);
			/*
			//サムネールは中心補正をしている
			//表示位置/保存位置よりわりだす、レーヤーはあわせている
			thumbs[no].x = arry_xs[no] - thumb_W / 2;
			//thumbs[no].x = hoverbtns[no].x;//これでも同じ
			thumbs[no].y = -20;//ボタンの上に表示
			*/
			thumbs[no].visible = true;
			thumbPanel.x = hoverbtns[no].x;
			thumbPanel.y = hoverbtns[no].y -thumbPanel.height/2 - 20;
			thumbPanel.visible = true;
			
			hoverbtns[no]._cover.visible = true;
		}
		//mouseOut
		private function mouseOutHandler(event:MouseEvent):void {
			//currentTargetの位置番号を取得
			var no:int = menu_base.getChildIndex(event.currentTarget as DisplayObject);
			
			thumbPanel.visible = false;
			thumbs[no].visible = false;
			
			//サムネールprivate番号ならボタン処理しない
			if (active_no == no) {
				hoverbtns[no]._cover.visible = true;
			} else {
				hoverbtns[no]._cover.visible = false;
			}
		}
		
		//ERROR
		private function ioErrorHandler(event:IOErrorEvent):void {
			//ERROR処理
			tf.text = "LOADING-EROOR";
			
			//画像が無いとその後の処理が出来なくなるのでダミーをいれて次ぎの処理にすすむ
			//特殊処理大きさ受け渡し、ダミーのBitmapDataを挿入する
			mainImages[countImage] = new BitmapData(image_W, image_H, false, 0x00000000);
			
			//現在はサムネール用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;
			*/
			
			//サムネール中心補正流し込み用
			var s:Sprite = new Sprite();
			s.graphics.beginFill(0x000000, 1);
			s.graphics.drawRoundRect(-thumb_W/2, -thumb_H/2, thumb_W, thumb_H, 5);
			s.graphics.endFill();
			thumbs[countImage] = s;
			
			//画像ERRORならカウントをすすめて次ぎ画像ロードに進む
			countImage ++;
			loadImage();
		}
		
		//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;
		}
		
		//DropShadowFilter加工サムネール表示パネル
		private function createThumbPanel(w:Number,h:Number,r:Number,h2:Number,color1:uint,color2:uint,line_w:Number):Sprite {
			var Dshadow:DropShadowFilter = new DropShadowFilter();
			Dshadow.distance = 2.0;
			Dshadow.alpha = 0.5;
			var p:Sprite = new Sprite();
			p.graphics.lineStyle(line_w, color2, 1);
			p.graphics.beginFill(color1, 1);
			p.graphics.moveTo( -w / 2 + r, -h / 2);
			p.graphics.lineTo(w / 2 - r, -h / 2);
			p.graphics.curveTo(w / 2, -h / 2, w / 2, -h / 2 + r);
			p.graphics.lineTo(w / 2, h / 2 - r);
			p.graphics.curveTo(w / 2, h / 2, w / 2 - r, h / 2);
			p.graphics.lineTo(2, h / 2);
			p.graphics.lineTo(0, h / 2 + h2);
			p.graphics.lineTo( -2, h / 2);
			p.graphics.lineTo( -w / 2 + r, h / 2);
			p.graphics.curveTo( -w / 2, h / 2, -w / 2, h / 2 - r);
			p.graphics.lineTo( -w / 2, -h / 2 + r);
			p.graphics.curveTo( -w / 2, -h / 2, -w / 2 + r, -h / 2);
			p.graphics.endFill();
			p.filters = [Dshadow];
			return p;
		}
		
		//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;
		}
		
	}
	
}

//Rect
import flash.display.Sprite;
class Rect extends Sprite {
	public function Rect(x:int, y:int, r:Number = 31) {
		//中心補正 透明度の設定も可能
		this.graphics.beginFill(0x000000);
		this.graphics.drawRect(-r/2, -r/2, r, r);
		this.graphics.endFill();
		this.scaleX = 1;
		this.scaleY = 1;
		this.rotation = 0;
		this.alpha = 1;
	}
}

//HoverBtn
import flash.display.*;
import flash.events.*;
class HoverBtn extends Sprite {
	public var _btn:Sprite;
	public var _cover:Sprite;
	public function HoverBtn() {
		//Circle
		_btn = new Sprite();
		_cover = new Sprite();
		makeBtn();
	}
	//ボタンを塗り替えるのではなく カバーを表示非表示で切り替えるようにした
	public function makeBtn():void {
		//BASE-Circle
		_btn.graphics.lineStyle(1,0x888888);
		_btn.graphics.beginFill(0xFFFFFF, 1);
		_btn.graphics.drawCircle(0, 0, 6);
		_btn.graphics.endFill();
		_btn.graphics.beginFill(0x000000, 1);
		_btn.graphics.drawCircle(0, 0, 4);
		_btn.graphics.endFill();
		//ボタンモード設定
		_btn.buttonMode = true;
		addChild(_btn);
		//COVER-Circle
		_cover.graphics.beginFill(0xF6BF00, 1);
		_cover.graphics.drawCircle(0, 0, 4);
		_cover.graphics.endFill();
		_cover.visible = false;
		_btn.addChild(_cover);
	}
}

//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 さんのものを再利用しました。色々学習しているとたまちゃう。


当方の参考記事 FLASH-SLIDESHOW-2

【参考】: FLASH-SLIDESHOW-2


以上です。



[ この記事のURL ]


 

ブログ記事一覧



[1]