POPSブログ

FLASH-SLIDESHOW-2

61

  Category:  flash2012/03/23 pops 

FLASH AS3 による、画像をスライスした要素でマスク表示するスライドショーです。


FLASH-SLIDESHOW-2

FlashTest165c.swf

フルスクリーン対応「簡単なスライドショー」サンプル表示


FLASH表示テスト 専用のSWF FlashTest165c.swf 640x200


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


簡単な説明

「ページャー」等の無い「簡単なスライドショー」タイプです。

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

簡単なスクリプト説明


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

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

全体の大きさ
//大きさ
private var boxWidth:Number = 640;
private var boxHeight:Number = 200;

画像の大きさ
//main-imageのおおきさ
private var image_W:Number = 640;
private var image_H:Number = 200;

横、縦の分割数、原則正方形になるように
//画像分割数
private var split_h:int = 16;
private var split_v:int = 5;

表示時間間隔
private var auto_time:Number = 7000;//5000-100000

画像の登録
//画像URL 640x200
imageUrls = [
	"images/photo_m1.jpg",
	"images/photo_m2.jpg",
	"images/photo_m3.jpg",
	"images/photo_m4.jpg",
	"images/photo_m5.jpg"
];
//画像説明文
imageMess = [
	"画像説明 1",
	"画像説明 2",
	"画像説明 3",
	"画像説明 4",
	"画像説明 5"
];

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

画像はスライスしていません、相当の大きさのBOX要素によるマスク処理です
cacheAsBitmap=true
により透明化の場合でも、マスクが機能するようにしたものです
BOX要素には正方形以外の、角丸、円形なども使用可能です

delay値をパターン化することにより、色々な方向より表示するようにしています

1つのループで処理していますが、アニメ部分を分離して、delay値を配列にして
delay配列reverse反転処理などするとパターンがなお簡単有効に使用可能です
(FLASH-SLIDESHOW-1 はその手法をとっています)

画像処理部分は layer2 に集約されていますので、メニューなどを追加する場合は簡単です


AS3

as FlashTest165c.as

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


//MenuBoxなしテンプレート
//FlashTest165c
//TM_SlideShow
//

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
	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="640", height="200", frameRate="30", backgroundColor="0x000000")]

	public class FlashTest165c extends Sprite {
		
		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		private var layer3:Sprite;
		//textlayer
		private var textlayer:Sprite;
		private var square2:Sprite;
		//Text
		private var tf:TextField;
		private var mvtf:TextField;
		//大きさ
		private var boxWidth:Number = 640;
		private var boxHeight:Number = 200;
		private var photomax:int = 0;
		private var countImage:int = 0;//現在表示配列番号	
		//LOADER
		private var loader:Loader;
		//Loading
		private var indicator:DisplayObject;
		//main
		private var mainImages:Array = [];//Array-Bitmap
		//main-imageのおおきさ
		private var image_W:Number = 640;
		private var image_H:Number = 200;
		private var mainImageBox:Sprite;//画像BOX
		private var backImageBox:Sprite;//背景用画像BOX
		private var show_no:int = 0;//現在表示番号
		//画像bitmap url保存
		private var bitmapImages:Array = [];//Array-Bitmap未使用
		private var imageUrls:Array = [];
		
		//分割
		private var rectBase:Sprite;
		//分割要素の大きさ正方形
		private var r_size:Number = 40;//使用しない
		//分割数により大きさを変える
		private var r_sizeX:Number;
		private var r_sizeY:Number;
		//画像分割数
		private var split_h:int = 16;
		private var split_v:int = 5;
		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 autoTimer:Timer;
		private var auto_time:Number = 7000;//5000-100000
		
		//画像の説明文の保存
		private var imageMess:Array = [];
		//FullScreenButton
		private var fullScreenBtn:Sprite;
		
		public function FlashTest165c ():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);
			
			//メニュー配置グラデ背景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 = 0;
			layer2.addChild(mainImageBox);
			//空のマスクベースを用意する
			rectBase = new Sprite();
			layer2.addChild(rectBase);
			//マスク透明度を有効にする1
			mainImageBox.cacheAsBitmap = true;
			//マスク透明度を有効にする2
			rectBase.cacheAsBitmap = true;
			//マスクをかける設定
			mainImageBox.mask = rectBase;
			
			//下画像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;
			
			//textlayer-hover収容BOX
			textlayer = new Sprite();
			addChild(textlayer);
			textlayer.visible = false;
			
			//TEXT背景Spriteボックス作成1/alpha=0.4
			square2 = createSquare(0, 0, stage.stageWidth, 30, 0x000000, 0.4);
			textlayer.addChild(square2);
			
			//text
			tf = createTextField(25, 5, stage.stageWidth - 60, 20);
			tf.textColor = 0xFFFFFF;
			tf.text = "";
			square2.addChild(tf);
			
			//FullScreenButton
			fullScreenBtn = createFullScreenButton();
			fullScreenBtn.x = stage.stageWidth - 35;
			fullScreenBtn.y = 2;
			square2.addChild(fullScreenBtn);
			
			//title
			mvtf = new TextField();
			addChild(mvtf);
			
			//FULLSCREEN-ACTION
			fullScreenBtn.addEventListener(MouseEvent.CLICK, fullClickHandler);
			
			//textlayer-Listener
			stage.addEventListener(MouseEvent.MOUSE_OVER, openTextLayer);
			stage.addEventListener(MouseEvent.MOUSE_OUT, closeTextLayer);
			
			//GOTO-Url_Set
			loadImage_Url_Set();
		}
		// 画像URL-SET
		private function loadImage_Url_Set():void {
			
			//画像URL 640x200
			imageUrls = [
				"/main/images/photo_m1.jpg",
				"/main/images/photo_m2.jpg",
				"/main/images/photo_m3.jpg",
				"/main/images/photo_m4.jpg",
				"/main/images/photo_m5.jpg"
			];
			//画像説明文
			imageMess = [
				"画像説明 1",
				"画像説明 2",
				"画像説明 3",
				"画像説明 4",
				"画像説明 5"
			];
			
			//カウント
			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);
			
			countImage ++;
			
			//全て読み込んだらinitにまだなら残り画像をロードする
			if (countImage >= photomax) {
				//LOADING非表示
				indicator.visible = false;
				//画像をロード終了goto-init
				init();
			} else {
				//残り画像をLoad
				loadImage();
			}
		}
		
		// INIT
		private function init():void {
			//init
			//マスク要素を作るドットをあわせている
			make_rect();
			//タイマーセット
			timer_set();
			//最初の画像を表示
			loadImage2(0);
			//goto-main
			main_action();
		}
		
		// 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 = (stage.stageHeight - mvtf.height) / 2;
			
			//Fade-Out
			TweenMax.to(mvtf, 2, { delay:10, alpha:0, onComplete:function ():void {
				mvtf.y = -200;
				mvtf.visible = false;
			}});
			
		}
		
		//画像の表示
		//click-loadImage/番号に注意、1番から始まる、配列は0番
		private function loadImage2(no:int):void {
			//tweenの終了判定
			tweenflag = false;
			//画像説明文
			tf.text = imageMess[no];
			//tf.text = " 番号 " + no + " / URL " + imageUrls[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();
			
			//Cross-Fade/TweenonComplete
			mainImageBox.alpha = 1;
			mainImageBox.visible = true;
			
			//カウント比較クリア
			twn_count = 0;
			rect_effect();
			
		}
		
		//TweenonComplete
		private function onFinishTween():void {
			//tweenの終了
			tweenflag  = false;
			
			//Cross-Fade終了処理/受け渡し番号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();
			//上画像はそのままにしておく
			
			//タイマースタート
			autoTimer.start();
		}
		
		//make_rect/大きさの補正あり
		private function make_rect():void {
			
			//平均の大きさ/round floorで少し違ってくるが
			r_sizeX = Math.ceil(image_W / split_h);
			r_sizeY = Math.ceil(image_H / split_v);
			//最後の大きさを調整/そのときの条件により大きさに差がでます
			var r_sizeX2:Number = image_W - (r_sizeX * (split_h - 1));
			var r_sizeY2:Number = image_H - (r_sizeY * (split_v - 1));
			
			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++) {
					//中で宣言しないと正確に算出しない
					var px:Number;
					var py:Number;
					var pw:Number = r_sizeX;
					var ph:Number = r_sizeY;
					
					//最後の要素は大きさが異なる、ドットをあわせる
					if (i == split_h-1) { pw = r_sizeX2; px = image_W - r_sizeX2 / 2; }else {px = pw * i + pw / 2;}
					if (j == split_v-1) { ph = r_sizeY2; py = image_H - r_sizeY2 / 2; }else {py = ph * j + ph / 2;}
					
					//マスク要素SpriteをRectクラスで作る/mtflag=0
					var rect_part:Sprite = new Rect(pw, ph);
					rect_part.x = px;
					rect_part.y = py;
					//画像全体にマスク生成配置
					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() * 10;//回転
			//
			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 > 4) { 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の場合は時間が重なってもほぼ動いてくれる
					//delay配列reverse反転が出来ないので反対方向も書くことになる、分離すればできる
					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 =Math.abs((sh - sv) / 2 - ( i - j));//対角線状に外から内側に2
							/*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の場合はすり変える/TweenMaxのほうが軽い
					//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();
			}
		}
		
		//タイマーセット
		private function timer_set():void {
			autoTimer = new Timer(auto_time, 1);
			autoTimer.addEventListener(TimerEvent.TIMER_COMPLETE, completeTimerHandler);
		}
		//タイマーcomplete
		private function completeTimerHandler(e:TimerEvent):void {
			//タイマーは1回のみ有効
			autoTimer.stop();
			//次ぎ画像表示に進む 受け渡し現在表示番号のチェック
			//現在番号加算
			show_no ++;
			if (show_no > photomax - 1) { show_no = 0; }
			loadImage2(show_no);
		}
		//TextLayer
		private function openTextLayer(e:MouseEvent):void {
			textlayer.visible = true;
		}
		private function closeTextLayer(e:MouseEvent):void {
			textlayer.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);
						
			//画像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;
		}
		
		//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.Sprite;
class Rect extends Sprite {
	public function Rect(w:Number,h:Number) {
		//中心補正 透明度の設定も可能
		this.graphics.beginFill(0x000000);
		this.graphics.drawRect(-w/2, -h/2, w, h);
		this.graphics.endFill();
		this.scaleX = 1;
		this.scaleY = 1;
		this.rotation = 0;
		this.alpha = 1;
	}
}

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

以上です。



[ この記事のURL ]


 

ブログ記事一覧

年別アーカイブ一覧



[1]