« AS3 Technical Bible - vol.05
2Dアクションゲーム ブロックくずし Part.2
| DEEP KICK.com Blog | ハヤシカオルの最新刊「Papervision3Dではじめる Flash 3Dアニメーション」 »

2008年12月31日

AS3 Technical Bible - vol.06
TweenMaxを使ったフォトギャラリー

このエントリーをはてなブックマークに追加

w86cover.jpg web creators 2009年2月号 に掲載の連載「ActionScript 3 Technical Bible」のテーマは、「TweenMaxを使ったフォトギャラリー」になります。本連載でもって、わたくしハヤシカオルの執筆はひとまず終了することになりました。「Flash Creative Technicque」時代を含めると、3年にわたって「web creators」の連載を担当してまいりました。毎月4ページの連載を続けるのは、それなりに大変でしたが、ここまで継続することができました。この場を借りまして、読者のみなさまに御礼申し上げます。ご愛読いただきありがとうございました。またどこかでお会いしませう。

deepphotogrid.jpg できあがりのサンプルはこちらをクリック。

TweenMaxは、ActionScriptのモーション系ライブラリのひとつで、GreenSockを運営しているJack Doyle氏が提供しています。最新版のTweenMaxはGreenSockのサイトからダウンロードできるので、そちらから手に入れるようにしてください。なお、ここでは執筆時点(2008年11月)での最新版「TweenMax (AS3) version 3.4」を使用しており、それ以外のバージョンでは仕様上の変更の可能性があることをご承知おきください。TweenMaxの使い方に関する詳細は、誌面および「gs/TweenMax.as」の冒頭部分にコメントとして記述されているので、そちらに譲りたいと思いますが、ここでは誌面では詳しくとりあげられなかったフォトギャラリーとTweenMaxの連携について、若干補足したいと思います。なおサンプルのソース一式は、誌面に掲載されているパスワードを使用して、web creatorsのサイトからダウンロードすることができます。

完成したサンプル「DEEP PHOTO GRID GALLERY」を見てください。サムネイルが表示されるモードと、クリックして選択したサムネイルが大きく表示されるメイン画像表示モードのふたつのモードがあります。いずれのモードも、画面を左右にドラッグするか、左右にある矢印ボタンを使って、スクロールすることができるようになっています。

TweenMaxを使っているのは、
・初期起動時にサムネイルが順に表示されるモーション
・サムネイルやメイン画像を左右にスクロールするときのモーション
・サムネイルをマウスオーバーしたときのハイライトモーション
の各部分です。これらの機能をTweenMaxを組み合わせてどのように実現しているのかが、重要なポイントになります。

まずはTweenMaxのクラスをインポートします。これをしておかないと、何も始まりません。

TweenMaxクラスのインポート

// TweenMaxAS3 のクラス
import gs.TweenMax;
import gs.easing.*;

「DEEP PHOTO GRID GALLERY」は、画像管理用XMLドキュメント「xml/photo.xml」をロードし、外部JPEGファイルをロードする仕様になっています。XMLは下記のような形式にしています。

xml/photo.xml

< ?xml version="1.0" encoding="UTF-8"?>:
< photo>:
	< imageData bImage="img/img_01.jpg" />:
	< imageData bImage="img/img_02.jpg" />:
	< imageData bImage="img/img_03.jpg" />:
	?省略?
< /photo>:

処理の流れとしては、
0. コンテナの準備

1. XMLドキュメントのロード

2. 画像読み込み

3. メイン画像コンテナとサムネイル画像コンテナへの画像の配置

4. 最後の画像の読み込み完了後に、オープニングのサムネイル表示アニメーションを開始

5. サムネイル表示モード完了後、静止
といったものになります。
特に難しいことはしてませんが、ポイントとしてはonCompleteHandler() メソッドにおいての画像の配置処理と、最後の画像のロード完了後にonLastImageLoaded() を実行するあたりになるでしょうか。カウンタ変数counterを使って、if文で最後の画像の読み込み時に下記のスクリプトを実行します。Loaderクラスのインスタンス「imgLoader」のcontentLoaderInfoプロパティを使って、リスナー関数を登録しているところがポイントです。

onLastImageLoaded() の呼び出し

if(imageMaxNum == counter) {
	//最後に読み込む画像に読み込み完了のイベントリスナーを登録する
	imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLastImageLoaded);
}

誌面の【D-4】で解説しているように、TweenMax.to() メソッドを使って、0.2秒ずつ遅らせるサムネイル表示用のモーションを実行します。こうすることで、初期起動時にサムネイルが順に表示されるモーションが実現する仕掛けとなっています。

ここまでが、オープニング時の処理になりますが、どのようにして画面をドラッグして画像やサムネイルをスクロールさせているのでしょうか?関連するスクリプトを下記に抜粋しましたので、見てください。

画面をドラッグするためのスクリプト

//画面ドラッグ関連
private var MouseDownX:Number;
private var MouseUpX:Number;
private var MouseUpFlagMain:Boolean = false;
private var MouseUpFlagThumb:Boolean = false;

//イベントリスナーを登録する
stage.addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);
mainImageContainer.addEventListener(MouseEvent.MOUSE_DOWN, mainImageContainerMouseDown);
mainImageContainer.addEventListener(MouseEvent.MOUSE_UP, mainImageContainerMouseUp);
thumbContainer.addEventListener(MouseEvent.MOUSE_DOWN, thumbContainerMouseDown);
thumbContainer.addEventListener(MouseEvent.MOUSE_UP, thumbContainerMouseUp);

//ドラッグ処理を監視
private function onEnterFrameHandler(event:Event):void {
	var Speed:Number = MouseUpX - MouseDownX;
	if(MouseUpFlagMain){
		MouseUpFlagMain = false;
		if(Speed == 0) {
			//クリックとみなす
			onClickMainImage();
		} else if (Speed < 0) {
			//左方向へドラッグ
			showNextMainImage();
		} else {
			//右方向へドラッグ
			showPreviousMainImage();
		}
	} else if(MouseUpFlagThumb) {
		MouseUpFlagThumb = false;
		if (Speed < 0) {
			//左方向へドラッグ
			showNextThumbPage();
		} else if (Speed > 0) {
			//右方向へドラッグ
			showPreviousThumbPage();
		}
	}
}

private function mainImageContainerMouseDown(event:MouseEvent):void {
	MouseDownX = mouseX;
}

private function mainImageContainerMouseUp(event:MouseEvent):void {
	MouseUpX = mouseX;
	MouseUpFlagMain = true;
}

private function thumbContainerMouseDown(event:MouseEvent):void {
	MouseDownX = mouseX;
}

private function thumbContainerMouseUp(event:MouseEvent):void {
	MouseUpX = mouseX;
	MouseUpFlagThumb = true;
}

長くなってしまいますが、おおよそ何をしようとしているのか、分かりますよね?早い話がonEnterFrameHandler() を毎フレーム実行して、マウスの動きを監視しているわけです。で、サムネイル表示モードおよびメイン画像表示モードそれぞれにおいて、マウスダウンしたときとマウスアップしたときのマウスのX座標の差をもとめて、左右どちらの方向にドラッグしたのかを判定しています。Boolean型フラグ変数を使って、ドラッグ時とそれ以外の処理を分けています。他にももっといろいろな処理方法があるかと思いますが、今回私はこのようにしてみました。

他にもいくつか関数を定義し、それらを組み合わせて構成されていますが、ここで解説するのは以上です。サンプルのソース一式は、誌面に掲載されているパスワードを使用して、web creatorsのサイトからダウンロードすることができます。ご参考ください。

第6回を迎えた「ActionScript 3 テクニカルバイブル」ですが、冒頭で述べたように、ハヤシカオルの執筆はひとまず終了し、次の執筆者の方にバトンタッチします。つい先日Flash CS4が発売され、さらに高度に進化を続けるFlash & ActionScriptで、ご紹介したいテクニックやアイデアなどもいろいろあるのですが、連載はいずれ区切りがきます。私の連載を読んで勉強されてこられたみなさま、長い間応援いただき、ありがとうございました。おかげさまで、「Flash Creative Technique」時代に執筆したものを一冊の書籍「ActionScript クリエイティブテクニック」にまとめ、出版することもできました。3年間続いた連載の仕事なので、何やら学校を卒業するような気分になっておりますが、ひとまず毎月の締め切りのプレッシャーから解放されて安堵するとともに、非常にいい仕事ができたと満足しております。しばらく充電期間かと思ったのも束の間、今はFlash CS4 + ActionScript3に関する書籍に取り組んでいるところです。いい本になると思います。Flashテクノロジーはまだまだ進化を続け、Youtubeをはじめとし、Webにはなくてはならないさまざまな可能性をもたらす素晴らしいテクノロジーになっていくでしょう。私もイチFlashユーザーとして、楽しみながら今後も研究を続けていきたいと思います。

投稿者 kaoru : 2008年12月31日 12:38

このエントリーをはてなブックマークに追加

contents
about
contact
Photo Gallery
blog
iPhone/iPad アプリ
Kindle book
portfolio