Twitterやってます。
2010.09.10

記事分類

新しいの

感想と推薦

UNISON SQUARE GARDEN － UNISON SQUARE GARDEN

THE BACK HORN、GRAPEVINEを聞いていたと言うだけあって、そのテイストが感じられる曲調。3ピースでも音にしっかりとした厚みがあって、バランスが良いと思った。

just A moment － 凛として時雨

その名の通り、切なくて冷たい雨が降る。TK（男性Vo）のハイトーンは好みが分かれるところだが、345（女性Vo）とのツインボーカルが生み出す緊迫感はとても狂おしく、破滅的で情緒に溢れている。

軌道－WARPHOLL

でもね、曲はめっちゃカッコイイス。そういう細かいところを気にするアホウは僕くらいなもんで、良いアルバムに仕上がってますよ。

衝撃の展開に思わず笑みがこぼれる一品 "Stick Stickly" Attack Attack!

いやはや、凄いの見てもーた。基本はスクリーモなんですが、エモが来たと思ったらいきなりエレクトロニカなん？４つ打ちなん？っていう最高の一品です。

On Fire－The Higher

1曲目の「insurance?」からいきなり「It's Only Natural」と似たテイストのノリノリナンバーで、一気に持ってかれてしまいました。全体的に気持ちよく聴けるアルバムに仕上がっています。

SO MANY MUSIC,SO MANY COLORS － Looking For

埼玉産インディーズバンドLooking For。同郷なら応援しないわけにはいかない。とにかくメロディック・メロディックなのであります。まさしく僕好み。ありがとうございます。

NIGHT FISHING － サカナクション

初めて聴いた感想はズバリ「つまらん」。 で、封印しようかと思いつつ、他に聴くものもないし・・・などとループ再生していたところ・・・4,5回目くらいから良くなってきました。

Music is the key－UNCHAIN

僕のファーストインプレッションは、 「んー、フライングキッズ？いや、オリジナルラヴ？」 でした。 前作 rapture が割とアップテンポで勢いのある印象だったので、アップテンポ好きな僕には少し物足りないというか、お子ちゃまな僕の好きな路線とはちょっと違うかなぁという感想。

air feel,color swim - school food punishment

女性Vo.なんですが、彼女の声と曲の世界観が絶妙です。彼女の声を聴いていると、切なくなるような、苦しくなるような、かと思えば一気に解放されるような、フワフワ浮かんでいるような。 クラムボンが好きな人とかすんなり聴けるんじゃないかと思います。

ALBO─Mistral

正統派J-popとでもいうべき非常に聴きやすい作品。メロディーも心地よく耳に残る感じ。無意識のうちに結構気に入っていたらしく、このまえ気付いたら4曲目のサビをひたすら口ずさんでました。
RSS
2010.02.27

[AS3] トップページでPRコンテンツを複数表示するFLASHを作ってみよう

お久しぶりぶりでございます。作ってみようシリーズ（？）でございます。

今回作る（作らなきゃいけない）のはこれ

えっと、サイトのトップページで、メインビジュアルエリアを使って特集が複数表示されるようなヤツ。・・・ってこんな言い方でわかりますかね？「○○キャンペーン」ってビジュアルが出た後、数秒して「××新発売！」に切り替わり・・・みたいなの。
今回はこれを作ります。

デザイン案を作りましょう

FLASHの見た目をデザインするところから始めます。同時にFLASHの大まかな仕様も考える事になります。
ということで、出来上がったのがこれ。

本当はキャンペーンとかの絵が入りますが、ここは個人サイトなので動物シリーズ（微笑）。

動作仕様

  • 最大4種類のネタを配置できる。
  • 指定秒数経過すると次のネタに切り替わる。
  • 下のサムネイルをクリックすると上部がそのネタに切り替わる。
  • サムネイルの上のバーが今見ているネタの位置を教えてくれる。
  • 左右の三角ボタンを押すと次or前のネタに切り替えられる。

ざっくりこんな感じです。
かわいいですね、ねこさん。

ステージとライブラリの準備

ステージの設定と必要な部品をライブラリに作ります。

ちょっとわかりにくいんですが、ステージはこうなっています。

部品毎にムービークリップにして配置。スクリプトから制御するものに関してはリンケージ（クラス名）を設定。
このようにしました。

三角ボタンや今の位置を教えるマーカーのマスクの構造をここで説明するのは面倒（すみません）なので、興味がある人はFLAファイルを見てみてください。CS3で作成してます。（top_main.fla）

XMLファイルを作る

読み込む内容はXMLファイルで管理するので、その仕様を決めないといけません。

このようにしました。

<?xml version="1.0" encoding="utf-8" ?> 
<slide>
	<setting>
		<interval>3</interval>
	</setting>
	<items>
		<item>
			<mainImg src="images/top_main/001.jpg" href="http://www.two-hearts.net/2005/05/marble.html" target="_blank" />
			<thumbnail src="images/top_main/001s.jpg" />
		</item>
		<item>
			<mainImg src="images/top_main/002.jpg" href="http://www.two-hearts.net/2005/07/post-36.html" target="_blank" />
			<thumbnail src="images/top_main/002s.jpg" />
		</item>
		<item>
			<mainImg src="images/top_main/003.jpg" href="http://www.two-hearts.net/2009/12/post-640.html" target="_blank" />
			<thumbnail src="images/top_main/003s.jpg" />
		</item>
		<item>
			<mainImg src="images/top_main/004.jpg" href="http://www.two-hearts.net/2010/01/post-684.html" target="_blank" />
			<thumbnail src="images/top_main/004s.jpg" />
		</item>
	</items>
</slide>

 

setteingのところで切り替わる秒数を指定、itemでメインの画像とリンク先のパス、サムネイル画像を指定できるようになっています。

いざ、ActionScript

ここからが本番ですな。スクリプト部分を作ります。
今回のファイル構成はドキュメントクラスに指定したApp.asといつも使っている 大重本 のXMLloaderクラスをそのまま使っています。

処理の流れ

  1. xmlを読み込む
  2. xmlから値を取り出す
  3. サムネイルボタンをセット
  4. メインイメージをセット
  5. タイマーを発動させて指定秒数で切り替わるように設定し、動作開始

以下、ソースコード。ちょっと長いですがそのまま貼ってしまいます。結構頑張ってコメント入れているので上から読んでいけばなんとなく何しているかは分かるかと思います。
あ、あと、トウィーンにはTweenerを使っています。

package 
{
	import caurina.transitions.SpecialProperty;
	import flash.display.*;
	import flash.events.*;
	import flash.net.URLRequest;
	import flash.net.navigateToURL;
	import caurina.transitions.Tweener;
	import caurina.transitions.properties.ColorShortcuts;
	import flash.utils.Timer;
	import XMLloader;

	public class  App extends Sprite
	{
		private static const XMLURL:String = "top_main.xml";
		private var interval:int;	//タイマー秒数
		private var xmlLoader:XMLloader;
		private var xmlData:XML;
		private var setting:XMLList;
		private var itemList:XMLList;
		private var itemNum:int;
		private var currentItemNum:int = 0;
		private var timerObj:Timer;
		private var _mainContainer:Sprite = new Sprite();
		private var _marker:Sprite = new Marker();
		private var _btn:Sprite = new Button();
		//コンストラクタ
		public function App()
		{
			ColorShortcuts.init();
			//XMLloaderクラスを呼んでXMLを読み込む
			xmlLoader = new XMLloader(XMLURL, true);
			//読み込み終わったらonXMLloadedに行く
			xmlLoader.addEventListener(XMLloader.LOAD_COMPLETE, onXMLloaded);
		}
		//XML読み込み完了
		private function onXMLloaded(event:Event):void
		{
			//XMLを格納
			xmlData = xmlLoader.getXML();
			//XMLの中からsettingを取り出し、インターバル秒数を格納
			setting = xmlData.setting;
			interval = setting[0].interval;
			//XMLの中からitemを取り出す
			itemList = xmlData.items.item;
			//itemの個数を数える
			itemNum = itemList.length();
			//Max4個のデザインなので、4個以上だったら4に設定、それ以下ならそのまま
			if (itemNum > 4)
			{
				itemNum = 4;
			}
			//サムネイルセッティング
			thumbnailSetting();
			//メインイメージセッティング
			mainImageSetting();
			//左右ボタンセッティング
			btnSetting();
			//ライブラリの部品をステージに置く。
			_marker.x = 20;
			_marker.y = 284;
			addChild(_marker);
			addChild(_btn);
			//タイマー動作開始
			startTimer();
		}
		//画像を読み込む関数
		private function imgLoader(urlStr:String):Loader
		{
			//URL定義
			var url:URLRequest = new URLRequest(urlStr);
			//ロード用オブジェクトのインスタンスをnewする
			var loader:Loader = new Loader();
			loader.load(url);
			return loader;
		}
		/**
		 * サムネイルボタン関連
		 */
		private function thumbnailSetting():void
		{
			//サムネイル画像をitemNum分読み込む
			for (var i:int = 0; i < itemNum; i++)
			{
				//読み込む画像のURLを定義
				var urlStr:String = itemList[i].thumbnail.@src;
				//画像を格納するコンテナ
				var imgContainer:Sprite = new Sprite();
				imgContainer.name = "btn" + i;
				//画像を読み込んでコンテナに入れる（imgLoader関数呼び出し）
				imgContainer.addChild(imgLoader(urlStr));
				//クリックアクションの設定
				imgContainer.buttonMode = true;
				imgContainer.addEventListener(MouseEvent.CLICK, thumbnailClick);
				//ロールオーバー＆アウト
				imgContainer.addEventListener(MouseEvent.ROLL_OVER, thumbnailOver);
				imgContainer.addEventListener(MouseEvent.ROLL_OUT, thumbnailOut);
				//コンテナをステージに配置する
				imgContainer.x = 130 * i + 16;
				imgContainer.y = 290;
				addChild(imgContainer);
			}
		}
		//サムネイル画像がクリックされたときの動作
		private function thumbnailClick(event:MouseEvent):void
		{
			var num:String = event.currentTarget.name;
			currentItemNum = int(num.charAt(num.length - 1));
			scroll();
		}
		//サムネイル画像のロールオーバー＆アウト
		private function thumbnailOver(event:MouseEvent):void
		{
			Tweener.addTween(event.currentTarget, 
			{ 
				_color_redOffset:40,
				_color_greenOffset:20,
				time:0.5
			} );
		}
		private function thumbnailOut(event:MouseEvent):void
		{
			Tweener.addTween(event.currentTarget, { _color:null, time:1 } );
		}
		/**
		 * メインイメージ関連
		 */
		private function mainImageSetting():void
		{
			//メインイメージマスク用矩形
			var square:Shape = new Shape();
			square.graphics.lineStyle(1, 0x000000);
			square.graphics.beginFill(0xff0000);
			square.graphics.drawRect(0, 0, 502, 266);
			square.graphics.endFill();
			_mainContainer.mask = square;
			_mainContainer.x = square.x = 24;
			_mainContainer.y = square.y = 8;
			//メインイメージ画像をitemNum分読み込む
			for (var i:int = 0; i < itemNum; i++)
			{
				//読み込む画像のURLを定義
				var urlStr:String = itemList[i].mainImg.@src;
				var linkStr:String = itemList[i].mainImg.@href;
				var linkTarget:String = itemList[i].mainImg.@target;
				//画像を格納するコンテナ
				var imgContainer:Sprite = new Sprite();
				imgContainer.name = "main" + i;
				//画像を読み込んでコンテナに入れる（imgLoader関数呼び出し）
				imgContainer.addChild(imgLoader(urlStr));
				//クリックアクションの設定（リンク先URLも一緒に渡す）
				imgContainer.addEventListener(MouseEvent.CLICK, mainItemClick(linkStr, linkTarget));
				imgContainer.buttonMode = true;
				//コンテナをステージに配置する
				imgContainer.x = 502 * i;
				imgContainer.y = 0;
				_mainContainer.addChild(imgContainer);
			}
			addChild(_mainContainer);
		}
		//メインイメージがクリックされたときの動作
		private function mainItemClick(linkStr:String, linkTarget:String):Function
		{
			return function(event:MouseEvent):void
			{
				var url:URLRequest = new URLRequest(linkStr);
				navigateToURL(url, linkTarget);
			}
		}
		/**
		 * 左右ボタン
		 */
		private function btnSetting():void
		{
			_btn["mainBtn_L"].addEventListener(MouseEvent.CLICK, btnClick);
			_btn["mainBtn_R"].addEventListener(MouseEvent.CLICK, btnClick);
		}
		//左右ボタンがクリックされた
		private function btnClick(event:MouseEvent)
		{
			if (event.currentTarget.name == "mainBtn_L")
			//左のボタンがクリックされた
			{
				currentItemNum -= 1;
			}
			else
			//右のボタンがクリックされた
			{
				currentItemNum += 1;
			}
			scroll();
		}
		/**
		 * タイマー制御
		 */
		private function startTimer():void
		{
			//タイマーオブジェクトを定義
			timerObj = new Timer(interval * 1000);
			//時間が来たらscrollを呼び出すようにする
			timerObj.addEventListener(TimerEvent.TIMER, upDate);
			//タイマー開始
			timerObj.start();
		}
		//タイマーで呼び出された
		private function upDate(event:TimerEvent):void
		{
			currentItemNum++;
			scroll();
		}
		/**
		 * スクロール時
		 */
		private function scroll():void {
			//タイマーリセット
			timerObj.reset();
			//アイテム総数を超えてたら0に戻し、逆方向なら最後をセット
			if (currentItemNum > itemNum -1)
			{
				currentItemNum = 0;
			}
			else if (currentItemNum < 0) {
				currentItemNum = itemNum - 1;
			}
			//サムネイルのマーカーを動かす
			var marker:Sprite = _marker["target"];
			Tweener.addTween(marker, { x:currentItemNum*130, time:1 } );
			//メインイメージ動かす
			Tweener.addTween(_mainContainer, { x:currentItemNum * 502 * -1 + 24, time:1 } );
			//タイマースタート
			timerObj.start();
		}
	}
	
}

これで完成！

 

カテゴリ:

トラックバック(0)

トラックバックURL:

コメントする

お名前 Eメイル
ＵＲＬ ログイン情報を記憶