POPSブログ

FLASH-SLIDE-MENU-2

69

  Category:  as32012/03/30 pops 

FLASH-SLIDE-MENU-2 / Horizontal-Slide-Menu 2(角丸画像使用)、
開閉式の画像挿入のスライドメニューです。画像だけで、角丸処理も可能です。


FLASH-SLIDE-MENU-2 (Horizontal-Slide-Menu 2)

FlashTest171c.swf

「ホリゾンタルスライドメニュー」画像のみ、サンプル表示


FLASH表示テスト 専用のSWF FlashTest171c.swf 465x330


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


簡単な説明

マウスホーバーで画像がスライドして開く「ホリゾンタルスライドメニュー」です。ラベル、タイトルはありません。

  • FlashDevelopで作りました。AS3表記です。
  • スクリプトだけの資料です。書き換えなどは自由です。
  • 画像URLはスクリプト内部に記載します。
  • 画像クリックで指定のURLにリンクする開閉形のメニューです。
  • 画像を角丸処理できます。処理しない普通の設定にもできます。
  • 当方のFlashDevelopの設定により、as swf クラスの名前は同じです。環境にあわせてください。

簡単な動作の説明

説明図


開く位置と、閉じる位置の関係

画像を着色して並べて見ます。
1. 開く位置と、閉じる位置はそれぞれ決まっていますので、計算して配列に収容しておきます。1番目の画像の閉じる位置だけが違うので修正する。ずれる数は、(ずれる数 = 画像枚数 - 1) の計算になります。画像の大きさとアイテムの大きさは同じです。図のようになりますので各画像の位置は事前に計算できますネ。
2. 指定した番号の画像を開くには、指定番号画像と、番号の若いものは左に開き、それ以外は閉じることになります。
3. 画像のズレの幅は画像枚数により変わりますので、丸め補正などをするか、しないかによって、全体の幅が違ってきます。最後の画像を隠すのにマスク処理をしますので、私の場合はマスク幅を修正しています。これらは個人により処理が違うと思います。


動作

1. 基本的に中央表示になります。表示する位置の高さを設定できます。勿論メニュー本体とステージが同じ大きさであってもかまいません。
2. 表示する画像の大きさとメニュー本体の大きさを指定できます。メニュー本体の高さは自動的に画像の高さになります。
3. マウスホーバーするズレ部分の幅は等分されます。そのままの状態で 1、2枚画像が増減しても使用できます。正確を期すならローカルで十分テストしてください。
4. また最初に開いておく画像を指定できます。間違いで画像枚数以上の数値を指定すると、最後の画像が開きます。0指定の場合、常に等分割の位置にもどります。
5. リンク先にジャンプする際には新しいウインドウを開いて表示されます。
6. 画像は指定の大きさに、整形されて使用されます。画像が取得出来ない場合は黒に着色されます。リンクは可能です。

ご注意、リンク先URL登録には javascript を使用しないでください。最悪ブラウザがクラッシュします。


簡単なスクリプト説明


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

//最初に開いたままにするアイテム番号 1-サムネール収容数番号
//1 以上はitemOpen trueに変更されます
private var itemOpen_no:int = 1;//0は処理しない

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

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

//slideMenuのセット位置/Y値
private var slideMenu_set_H:Number = 40;//値は必ず記入
//サムネール収容数/URL記載部分とあわせる
private var thumb_max:int = 5;//値は必ず記入

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

//LOADE失敗の場合の代替画像の色
private var bitmap_color:uint = 0x000000;//必要なら変更

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

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

//画像URL
imageUrls = [
	"/main/images/cat13m.jpg",
	"/main/images/cat14m.jpg",
	"/main/images/cat17m.jpg",
	"/main/images/cat18m.jpg",
	"/main/images/cat20m.jpg"
];

//リンク先URL
linkUrls = [
	"",
	"",
	"",
	"",
	""
];

ご注意、リンク先URL登録には javascript を使用しないでください。

AS3

as FlashTest171c.as

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


//MenuBoxテンプレート
//FlashTest171c
//SlideMenu/ラベルなし/BitmapData処理

package
{
	import flash.display.*;
	import flash.events.*;
	import flash.net.*;
	import flash.geom.*;
	import flash.system.*;
	import flash.utils.*;
	import flash.text.*;
	//Tween
	import com.greensock.TweenLite;
	
	[SWF(width="465", height="330", frameRate="30", backgroundColor="0x000000")]

	public class FlashTest171c extends Sprite {
		//layer
		private var layer1:Sprite;
		//container
		private var container: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 = 450;//値は必ず記入
		private var slideMenu_H:Number;//挿入するアイテムおおきさが使用されます
		
		//Rount=true Rect=false
		private var roundtype:Boolean = true;//true false
		private var rounsize:Number = 20;//値は必ず記入
		
		//slideMenuのセット位置/Y値
		private var slideMenu_set_H:Number = 40;//値は必ず記入
		//サムネール収容数/URL記載部分とあわせる
		private var thumb_max:int = 5;//値は必ず記入
		
		//アイテムのおおきさ、自動/thumbnailのおおきさになる
		private var item_W:Number;
		private var item_H:Number;
		
		//挿入するthumbnailのおおきさ
		private var thumb_W:Number = 333;//値は必ず記入
		private var thumb_H:Number = 250;//値は必ず記入
		
		//アイテムの重なりの余白/自動計算
		private var menu_space_W:Number;
		//アイテムのスペース幅/色がでる部分自動計算
		private var item_space_W:Number;
		//LOADER
		private var loader:Loader;
		private var countImage:int = 0;//カウント
		
		//LOADE失敗の場合の代替画像の色
		private var bitmap_color:uint = 0x000000;//必要なら変更
		
		//保存配列
		private var imageUrls:Array = [];
		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 FlashTest171c ():void {
			
			//アイテムのおおきさサムネールと同じに修正
			item_W = thumb_W;
			item_H = thumb_H;
			//itemOpen_no設定補正
			if (itemOpen_no > 0) { itemOpen = true; }
			//ステージ
			stage.align = StageAlign.TOP_LEFT;
			stage.quality = StageQuality.HIGH;
			//BASE/黒背景
			var square:Sprite = new Sprite();
			square.graphics.beginFill(0xFFFFFF);//0x000000
			square.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
			square.graphics.endFill();
			addChild(square);
						
			//containerをベースにしてmenu_boxを作る、中が出来ていないのでまだ非表示
			//全体の位置移動用
			container = new Sprite();
			addChild(container);
			container.y = 0;
			container.visible = false;
			//GOTO-Url_Set
			loadImage_Url_Set();
		}
		// 画像URL-SET
		private function loadImage_Url_Set():void {
			//画像URL
			imageUrls = [
				"/main/images/cat13m.jpg",
				"/main/images/cat14m.jpg",
				"/main/images/cat17m.jpg",
				"/main/images/cat18m.jpg",
				"/main/images/cat20m.jpg"
			];
			//リンク先URL
			linkUrls = [
				"",
				"",
				"",
				"",
				""
			];
			
			//カウントクリア
			countImage = 0;
			//画像数/画像取得エラーの場合はダエガエ画像が入ります
			//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
		}
		//正常にLOADされたときの処理
		private function onComplete_img(event:Event):void {
			loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onComplete_img);
			//サムネール用に加工保存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);
			
			countImage ++;
			
			//全て読み込んだらinitにまだなら残り画像をロードする
			if (countImage >= thumb_max) {
				//画像をロード終了goto-init
				init();
			} else {
				//残り画像をLoad
				loadImage();
			}
			
		}
		
		//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);
		}
		
		// INIT
		private function init():void {
			//init
			//画像数の再度チェック/LOAD失敗したものは含まない
			thumb_max = thumbs.length;
			//大きさ位置などレイアウト詳細計算設定
			set_type();
			//サムネールを仮セット
			set_imageBox();
			//SlideMenuの大きさなどの計算
			make_SlideMenu();
		}
		
		//全体と挿入画像の大きさを指定値にして、その他は可変にする
		//指定アイテムの大きさ優先で計算
		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;
			
			//containerをベースにして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;
			container.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のベースは事前に作られている
			container.x = int((stage.stageWidth - slideMenu_W) / 2);
			container.y = slideMenu_set_H;
			container.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(e:MouseEvent):void {
			//currentTargetの位置番号を取得
			var no:int = menu_base_inner.getChildIndex(e.currentTarget as DisplayObject);
			// URLRequestを設定
			var url:URLRequest = new URLRequest(linkUrls[no]);
			// 実際にページに飛ぶ/新しいウインドウをひらく
			navigateToURL(url);
		}
		//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();
		}

		//ERROR/bitmap_data操作に変えた
		private function ioErrorHandler(event:IOErrorEvent):void {
			//ERROR処理
			//特殊処理大きさ受け渡し、ダミーのBitmapDataを挿入する/指定色
			var bd:BitmapData = new BitmapData(thumb_W, thumb_H, false, bitmap_color);
			//ダミーbitmapDataを作り収納する
			drow_bitmap_data(bd);
			
			//画像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;
		}

	}
}

以上です。



[ この記事のURL ]


 

ブログ記事一覧



[1]