POPSブログ

FLASH-SLIDE-MENUの応用

70

  Category:  as32012/03/31 pops 

開閉式の画像挿入のスライドメニュー(Horizontal-Slide-Menu)をスライドショー、アルバムなどに応用しました。


FLASH-SLIDE-MENUの応用

FlashTest172c.swf

サンプル表示


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


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


簡単な説明

マウスホーバーで画像がスライドして開く「ホリゾンタルスライドメニュー」です。角丸を設定しています。

  • FlashDevelopで作りました。AS3表記です。
  • スクリプトだけの資料です。書き換えなどは自由です。
  • 画像URLはスクリプト内部に記載します。
  • 開閉形のメニューをスライドショーアルバムなどに応用しました。
  • 画像を角丸処理できます。処理しない普通の設定にもできます。
  • 簡単なスライドショーにページャー部分を応用しただけです。
  • 当方のFlashDevelopの設定により、as swf クラスの名前は同じです。環境にあわせてください。

簡単な動作の説明

1. 基本的に中央表示になります。表示する位置の高さを設定できます。勿論メニュー本体とステージが同じ大きさであってもかまいません。
2. 表示する画像の大きさとメニュー本体の大きさを指定できます。メニュー本体の高さは自動的に画像の高さになります。
3. マウスホーバーするズレ部分の幅は等分されます。画像数に応じて幅などを変更ください。小さなものでしたら20-30枚ならびます。
4. 最初に1番目の画像が自動で表示されますので、最初に開いておくサムネール画像は1番目になります。
5. 画像は指定の大きさに、整形されて使用されます。画像が取得出来ない場合は除外されます。
6. containerが使用されていますので、メニュー部分はcontainer2に収容しました。


簡単なスクリプト説明


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

アルバム関連

//Menu収納ベースのY方向位置/X方向は中央に割り振り
private var menu_Y:Number = 385;
//main-imageのおおきさ
private var image_W:Number = 465;
private var image_H:Number = 349;
//アニメエフェクト時間/
private var tween_time:Number = 2;

画像表示位置は 168行前後
container.y = 30;//25-40 で変更できます

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

メニュー関連

//最初に開いたままにするアイテム番号
//1 にしてください
private var itemOpen_no:int = 1;

//slideMenu全体の幅、位置は自動で中央補正
private var slideMenu_W:Number = 250;//値は必ず記入

//Rount=true Rect=false
private var roundtype:Boolean = true;//true false
private var rounsize:Number = 5;//値は必ず記入

//slideMenuのセット位置/Y値
private var slideMenu_set_H:Number = 40;//値は必ず記入
//サムネール収容数/URL記載部分とあわせる/自動で修正されます
private var thumb_max:int = 10;//値は必ず記入

//挿入するthumbnailのおおきさ
private var thumb_W:Number = 64;//値は必ず記入
private var thumb_H:Number = 48;//値は必ず記入

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

画像URLの登録は使用者の環境にあわせてください

//画像URL
imageUrls = [
	"/main/images/cat11.jpg",
	"/main/images/cat12.jpg",
	"/main/images/cat13.jpg",
	"/main/images/cat14.jpg",
	"/main/images/cat15.jpg",
	"/main/images/cat16.jpg",
	"/main/images/cat17.jpg",
	"/main/images/cat18.jpg",
	"/main/images/cat19.jpg",
	"/main/images/cat20.jpg"
];

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

あとはサムネールがクリックされた場合に
該当の画像番号で画像をLOADするように変更しただけです


AS3

as FlashTest172c.as

FlashDevelopで制作しました。中には使用していない変数もあります。画像URLなどは環境に合わせてください。
注意、FlashTest172c、は角丸処理のため BitmapData で処理していますので、FlashTest170c(ラベル、タイトル付き)、とは異なります。


//MenuBoxテンプレート
//FlashTest172c
//画像クロスフェードと合体させた
//使用しない変数なども含む

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 gs.easing.*;
	import gs.TweenLite;
		
	[SWF(width="465", height="465", frameRate="30", backgroundColor="0x000000")]

	public class FlashTest172c extends Sprite
	{
		//layer
		private var layer1:Sprite;
		private var layer2:Sprite;
		//コンテナ画像BOX
		private var container:Sprite;
		//Text
		private var tf:TextField;
		private var mvtf:TextField;
		//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;
		//最初である
		private var startflag:Boolean = true;
		//tween処理を実行している途中を判定
		private var tweenflag:Boolean = false;
		//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 = 349;
		//上画像mainImage収容
		private var mainImageBox:Sprite;
		//下画像backImage収容/使用しない場合もある
		private var backImageBox:Sprite;
		private var bitmapImages:Array = [];//Array-Bitmap
		private var imageUrls:Array = [];
		//画像の説明文の保存
		private var imageMess:Array = [];
		//FullScreenButton
		private var fullScreenBtn:Sprite;
		//アニメエフェクト時間/
		private var tween_time:Number = 2;
		
		//MENU MENUコンテナ画像BOX
		private var container2:Sprite;
		//slideMenu収納ベース
		private var slideMenu_base:Sprite;
		private var menu_base_mask:Sprite;
		private var menu_base_inner:Sprite;
		//配置のタイプ
		//全体の幅、挿入する画像の大きさを固定して、その他は可変にする形式
		//true アイテムを開いたままにする、falseの場合は均等割りの位置にもどります
		private var itemOpen:Boolean = false;//true false
		//最初に開いたままにするアイテム番号 1-サムネール収容数番号
		//1 以上はitemOpen trueに変更されます
		private var itemOpen_no:int = 1;//0は処理しない
		//slideMenu全体の幅、位置は自動で中央補正
		private var slideMenu_W:Number = 250;//値は必ず記入
		private var slideMenu_H:Number;//挿入するアイテムおおきさが使用されます
		//Rount=true Rect=false
		private var roundtype:Boolean = true;//true false
		private var rounsize:Number = 5;//値は必ず記入
		//slideMenuのセット位置/Y値
		private var slideMenu_set_H:Number = 390;//値は必ず記入
		//サムネール収容数/URL記載部分とあわせる
		private var thumb_max:int = 0;//
		//アイテムのおおきさ、自動/thumbnailのおおきさになる
		private var item_W:Number;
		private var item_H:Number;
		//挿入するthumbnailのおおきさ
		private var thumb_W:Number = 64;//値は必ず記入
		private var thumb_H:Number = 48;//値は必ず記入
		//アイテムの重なりの余白/自動計算
		private var menu_space_W:Number;
		//アイテムのスペース幅/色がでる部分自動計算
		private var item_space_W:Number;
		//LOADE失敗の場合の代替画像の色
		private var bitmap_color:uint = 0x000000;//必要なら変更
		//保存配列
		private var thumbs:Array = [];//Array-thumbnail
		//リンク先URL保存配列
		private var linkUrls:Array = [];
		//SlideサムネールX位置を保存
		private var open_Points:Array = [];
		private var close_Points:Array = [];
		private var center_Points:Array = [];
		
		public function FlashTest172c ():void
		{
			//アイテムのおおきさサムネールと同じに修正
			item_W = thumb_W;
			item_H = thumb_H;
			
			//ステージ、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);
			
			//containerをベースにして画像BOXを作る
			container = createSquare(0, 0, stage.stageWidth, 0, 0x000000, 1);
			addChild(container);
			//下画像
			backImageBox = createSquare(0, 0, image_W, image_H, 0x000000, 1);
			container.addChild(backImageBox);
			//上画像
			mainImageBox = createSquare(0, 0, image_W, image_H, 0x000000, 1);
			container.x = (stage.stageWidth - image_W) / 2;
			container.y = 30;//25-40
			container.addChild(mainImageBox);
			
			//title
			mvtf = new TextField();
			addChild(mvtf);
			
			//containerをベースにして画像表示BOXを作る、中が出来ていないのでまだ非表示
			//全体の位置移動用
			container = new Sprite();
			addChild(container);
			container.y = 0;
			container.visible = false;
			
			//Menu-container2
			container2 = new Sprite();
			addChild(container2);
			container2.visible = false;
			
			//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 465x349
			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"
			];
			
			//カウント
			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)を参照する
			//loaderのBitmapを縮小操作する/BitmapDataを直接縮小操作できないから
			var thumb_bitmap:Bitmap = Bitmap(cliploader.content) as Bitmap;
			thumb_bitmap.width = thumb_W;
			thumb_bitmap.height = thumb_H;
			
			//BitmapData化/bitmapDataを作り収納する/縮小されている
			var bd:BitmapData = new BitmapData(thumb_W, thumb_H, false);
			//縮小操作したloaderをBitmapData容器に流しこむ
			bd.draw(cliploader);
			//収納する
			drow_bitmap_data(bd);
			
			//BitmapDataを配列に入れる
			bitmapImages[countImage] = bd;
			
			countImage ++;
			
			//全て読み込んだらinitにまだなら残り画像をロードする
			if (countImage >= photomax) {
				//LOADING非表示
				indicator.visible = false;
				//画像をロード終了goto-init
				init();
			} else {
				//残り画像をLoad
				loadImage();
			}
			
		}

		// INIT
		private function init():void
		{
			//init
			tf.text = "";
			//画像数再計算
			photomax=mainImages.length;
			//goto-MakeHoverMenuサムネールを仮セット
			//make_HoverMenu();
			//サムネール収容数/URL記載部分とあわせる
			thumb_max = photomax;
			//サムネールBOX
			//大きさ位置などレイアウト詳細計算設定
			set_type();
			//サムネールを仮セット
			set_imageBox();
			//SlideMenuの大きさなどの計算
			make_SlideMenu();
			//最初の画像を表示
			show_Image(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", 20, 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 = 0;
			//
		}
		
		//画像の表示
		//click-show_Image/番号に注意、1番から始まる、配列は0番
		private function show_Image(no:int):void
		{
			
			//上画像はけす
			mainImageBox.visible = false;
			//画像説明文
			//tf.text = " 番号 " + no + " / URL " + imageUrls[no];
			
			//最初なら実行する
			if (startflag) {
				//現在何も実行しない
			}
			//最初判定終了falseにする
			startflag = false;
			
			//表示事前処理
			//private番号/サムネール用
			active_no = no;
			//現在表示番号
			show_no = no;
			//tween処理等を実行している途中を判定
			tweenflag = true;
			
			//上画像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 = 0;
			mainImageBox.visible = true;
			//アニメエフェクト時間で処理、TweenLiteは軽いので使用している
			TweenLite.to(mainImageBox, tween_time, {alpha: 1,onComplete:onFinishTween});
			
			//保存番号
			keep_no = no;
			
		}
		
		//TweenonComplete
		private function onFinishTween():void
		{
			//Cross-Fade終了処理/受け渡し番号show_noで処理
			//BACK画像表示用/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();
			//上画像はけす
			mainImageBox.visible = false;
			//tween処理等の実行終了
			tweenflag = false;
		}
		
		//bitmap_data操作に変えた
		private function drow_bitmap_data(bd:BitmapData):void {
			
			//サムネール用Sprite容器にBitmapDataを収納する
			var thumb:Sprite= new Sprite();
			
			//画像表示用/bitmapData
			thumb.graphics.clear();
			thumb.graphics.beginBitmapFill(bd, null, false, false);
			
			//Round/Rect/rounsize
			if (roundtype) { thumb.graphics.drawRoundRect(0, 0, item_W, item_H, rounsize); }
			else { thumb.graphics.drawRect(0, 0, item_W, item_H); }
			
			thumb.graphics.endFill();
			//配列に登録
			thumbs.push(thumb);
		}
		
		//全体と挿入画像の大きさを指定値にして、その他は可変にする
		//指定アイテムの大きさ優先で計算
		private function set_type():void {
			
			var ratio:Number;//縮尺比率
			//アイテムの重なりの余白で計算/ラベルがないのでthumb_max-1で計算
			item_space_W = menu_space_W = int((slideMenu_W - item_W) / (thumb_max - 1));
			//誤差があるので、全体を再計算/ラベルがないのでthumb_max-1で計算
			slideMenu_W = item_space_W * (thumb_max - 1) + item_W;
			
			//container2をベースにしてmenu_boxを作る/Roundのため透過した
			//slideMenu_base/menu_base_mask/menu_base_inner
			slideMenu_base = createSquare(0, 0, slideMenu_W, item_H, 0xFFFFFF, 0);
			slideMenu_base.x = 0;
			slideMenu_base.y = 0;
			container2.addChild(slideMenu_base);
			//mask
			menu_base_mask = createSquare(0, 0, slideMenu_W, item_H, 0x000000, 1);
			slideMenu_base.y = 0;
			slideMenu_base.addChild(menu_base_mask);
			//inner
			menu_base_inner = createSquare(0, 0, slideMenu_W, item_H, 0x000000, 0);
			slideMenu_base.y = 0;
			slideMenu_base.addChild(menu_base_inner);
			//mask
			menu_base_inner.mask = menu_base_mask;
			//
		}
		
		//構造を構築する、menu_baseに全サムネールを仮セット、Listenerセット
		private function set_imageBox():void {
			//初期の配置
			var i:int = 0;
			for (i = 0; i < thumb_max; ++i) {
				//menu_base欄外に仮セット
				thumbs[i].x = slideMenu_W;
				thumbs[i].y = 0;
				thumbs[i].buttonMode = true;
				//サムネール位置を調べられるようにaddChildAtを使用
				menu_base_inner.addChildAt(thumbs[i], i);
				//サムネール mouseOverOut-Listener
				thumbs[i].addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
				//サムネール CLICK-Listener
				thumbs[i].addEventListener(MouseEvent.CLICK, mouseClickHandler);
			}
			
			//menu_base-Listener
			menu_base_inner.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
			//
		}
		
		//位置など配置する/移動の配列を計算
		private function make_SlideMenu():void {
			//計算
			//等分に配置 見える部分の幅、BASEの幅による、四捨五入
			var sMenu_W2:Number = Math.round(slideMenu_W / thumb_max);
			//containerの位置決定し表示する、slideMenuのベースは事前に作られている
			container2.x = int((stage.stageWidth - slideMenu_W) / 2);
			container2.y = slideMenu_set_H;
			container2.visible = true;
			//photomax2補正
			var i:int = 0;
			for (i = 0; i < thumb_max; ++i) {
				//全てのサムネールをmenu_base欄外に仮セット
				thumbs[i].x = slideMenu_W;
			}
			
			//必要なもののみページ数により表示する
			//サムネール位置の計算/左端はいつも同じ位置
			for (i = 0; i < thumb_max; ++i) {
				//OPEN時
				open_Points[i] = menu_space_W * i;
				if (i == 0) { open_Points[i] = 0; }
				//CLOSE時
				close_Points[i] = item_W + menu_space_W * (i - 1);
				if (i == 0) { close_Points[i] = 0; }
				//等分に配置
				center_Points[i] = sMenu_W2 * i;
			}
			
			//複数ページに対処するため、該当のページのみをセット
			//ページによる画像番号修正変数を考慮する
			for (i = 0; i < thumb_max; ++i) {
				//menu_base_innerに等分に配置/画像番号修正変数
				thumbs[i].x = center_Points[i];
				//該当画像のみ表示
				thumbs[i].visible = true;
			}
			
			//指定アイテムをOpenさせる
			if (itemOpen_no > 0) {
				//番号違いに注意
				open_menu_item(itemOpen_no - 1);
			}
			
		}
		
		//OPEN-MENU-ITEM/アニメ移動
		private function open_menu_item(no:int):void {
			//HOVER位置により移動させる/ページ修正
			var i:int = 0;
			for (i = 0; i < thumb_max; ++i) {
				//
				if (i <= no ) {
					//OPEN
					//アニメ、TweenLiteは軽いので使用している
					TweenLite.to(thumbs[i], 0.5, {x: open_Points[i]});
				} else {
					//CLOSE
					TweenLite.to(thumbs[i], 0.5, {x: close_Points[i]});
				}
			}
		}
		//CLOSE-MENU-ITEM/center_Points[i]
		private function close_menu_item():void {
			//CENTE位置に移動させる/itemOpen=trueは開いたまま
			var i:int = 0;
			if (!itemOpen) {
				for (i = 0; i < thumb_max; ++i) {
					thumbs[i].x = center_Points[i];
					//アニメ、TweenLiteは軽いので使用している
					TweenLite.to(thumbs[i], 0.5, {x: center_Points[i]});
				}
			}
		}
		
		//mouseClick
		private function mouseClickHandler(event:MouseEvent):void
		{
			//currentTargetの位置番号を取得
			var no:int = menu_base_inner.getChildIndex(event.currentTarget as DisplayObject);
			//現在表示番号なら機能させない/また時間が長い場合はtweenflagとくみあわせる
			if (show_no == no) { return };
			//表示に進む
			show_Image(no);
		}
		
		//mouseOver
		private function mouseOverHandler(event:MouseEvent):void {
			//currentTargetの位置番号を取得
			var no:int = menu_base_inner.getChildIndex(event.currentTarget as DisplayObject);
			open_menu_item(no);
		}
		//mouseOut
		private function mouseOutHandler(event:MouseEvent):void {
			//close
			//close_menu_item();
			//active-no-open
			open_menu_item(active_no);
		}
		
		//ERROR
		private function ioErrorHandler(event:IOErrorEvent):void {
			//ERROR処理
			tf.text = "LOADING-EROOR";
			
			//画像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;
		}
		//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;
		}

	}
}

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

【参考】当方のスライドメニュー記事: FLASH-SLIDE-MENU-2


以上です。



[ この記事のURL ]


 

ブログ記事一覧



[1]