Web動画表現 2010
Picasa Webアルバムを表示する(2)
今日の授業では、引き続きPiacaウェブアルバムを使用したフォトギャラリーの制作について解説します。
先週の授業では、写真の表示と情報の表示までを行いましたが、今回はこの仕組みをさらに応用して、よりフォトギャラリーらしいFlashムービーになるようにデザインしていきます。
サムネイルと、拡大画面をデザインする
前回のサンプルでは、サムネイルと拡大画像はLoaderを画面に配置して、そこにPicasaからダウンロードしてきた画像を配置していただけでした。この状態ではデザインの工夫をするにも限界がありました。
このサンプルでは、サムネイルと拡大画像のためにFLAファイルのライブラリに2つのムービークリップシンボルを作成しています。
- Thumbnail – サムネイル画像を表示するためのMovieClipシンボル。書き出しクラス：Thumbnail
- PhotoZoom – 拡大写真画像を表示するためのMovieClipシンボル。書き出しクラス：PhotoZoom
この2つのムービークリップを、サムネイル、拡大画像を表示する際にまず読み込んで土台として使用します。また、それぞれのムービークリップには、タイトルの表示欄や、説明の表示欄がダイナミックテキストとして配置されているので、情報を読み込んで適切な場所に表示することが可能となっています。
[sourcecode language=”as3″]
package {
import sk.prasa.webapis.picasa.PicasaResponder;
import sk.prasa.webapis.picasa.PicasaService;
import sk.prasa.webapis.picasa.events.PicasaDataEvent;
import flash.system.Security;
import flash.display.*;
import flash.events.*;
import flash.net.*;
public class Main extends Sprite {
//ユーザIDとアルバムIDを指定
private var userID:String=’tadokoro’;
private var alubumID:String=’5560743918853662497′;
private var selectNum:int;
//Pivasa APIサービス
private var service:PicasaService;
//写真データ
private var picasaData:PicasaDataEvent;
public function Main() {
//クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
init();
//ステージ設定(ブラウザ全画面表示)
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;
}
private function init():void {
//Picasa APIのサービスを新規に生成
service = new PicasaService();
//使用可能な画像サイズ一覧 (Pixel)
//32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576,
//640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
//最大の幅
service.imgmax="800";
//サムネイルのサイズ
service.thumbsize="64";
//最大読込枚数
service.max_results=100;
//ユーザIDとアルバムIDを指定して、情報を読み込み
var responder:PicasaResponder=service.photos.list(userID,alubumID);
//情報の読込みが完了した際に発生するイベントリスナーの登録
responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
}
private function onCompleteHandler(_picasaData:PicasaDataEvent):void {
picasaData=_picasaData;
var slideRowCount:int = stage.stageWidth / (int(service.thumbsize) + 12);
for (var i:int = 0; i < picasaData.data.entries.length; i++) {
//サムネイルとコンテントのURLを引数に
showThumbail(i, (i%slideRowCount)*76 + 4, int(i/slideRowCount)*90 + 4);
}
}
private function showThumbail(num:int, posX:int, posY:int):void {
//サムネール読込のベースとなるムービーを配置
var thumbnailMc:Thumbnail = new Thumbnail();
addChild(thumbnailMc);
//ムービに情報を付加
thumbnailMc.x=posX;
thumbnailMc.y=posY;
thumbnailMc.num=num;
thumbnailMc.buttonMode=true;
thumbnailMc.media=picasaData.data.entries[num].media;
trace(thumbnailMc.media);
thumbnailMc.title=picasaData.data.entries[num].media.title;
thumbnailMc.description=picasaData.data.entries[num].media.description;
thumbnailMc.credit=picasaData.data.entries[num].media.credit;
//サムネイルにタイトル表示
thumbnailMc.titleText.text=thumbnailMc.title;
//Loaderを配置
var imageLoader:Loader = new Loader();
var imageURLreq:URLRequest=new URLRequest(picasaData.data.entries[num].media.thumbnails[0].url);
var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
thumbnailMc.loader.addChild(imageLoader);
imageLoader.load(imageURLreq);
//クリックで拡大画像表示;
imageLoader.addEventListener(MouseEvent.CLICK, clickThumbnailHandler);
}
private function clickThumbnailHandler(event:MouseEvent):void {
var thumbnailMc:Thumbnail=event.target.parent.parent;
//ズーム表示のベースとなるムービーを配置
var photoZoomMc:PhotoZoom = new PhotoZoom();
addChild(photoZoomMc);
photoZoomMc.backScreen.width=stage.stageWidth;
photoZoomMc.backScreen.height=stage.stageHeight;
photoZoomMc.x=int(stage.stageWidth/2);
photoZoomMc.y=int(stage.stageHeight/2);
photoZoomMc.buttonMode=true;
//拡大した写真をロードする
var num:int=int(thumbnailMc.num);
var contentUrl:String=picasaData.data.entries[num].media.content.url;
var imageLoader:Loader = new Loader();
var imageURLreq:URLRequest=new URLRequest(contentUrl);
var imgInfo:LoaderInfo=imageLoader.contentLoaderInfo;
photoZoomMc.addChild(imageLoader);
//拡大画像のローダー配置
imageLoader.load(imageURLreq);
imageLoader.x=- thumbnailMc.media.content.width/2;
imageLoader.y=- thumbnailMc.media.content.height/2;
//場所と大きさを写真にあわせて補正
photoZoomMc.photobase.width=thumbnailMc.media.content.width+20;
photoZoomMc.photobase.height=thumbnailMc.media.content.height+60;
photoZoomMc.photobase.y=20;
//写真のタイトルと説明を表示
photoZoomMc.titleText.text=thumbnailMc.title;
photoZoomMc.descriptionText.text=thumbnailMc.description;
//クリックで消去
photoZoomMc.addEventListener(MouseEvent.CLICK, clickZoomHandler);
}
private function clickZoomHandler(event:MouseEvent):void {
removeChild(event.target.parent);
}
}
}
[/sourcecode]
応用1：サムネイルをランダムに配置
最初の例では、サムネイル画像をタイル状にきれいに配置していました。この例ではサムネイルの表示で少し工夫しています。
サムネイルを読み込んだら、ランダムな場所と角度で画面に撒き散らすように配置しています。さらにサムネイルにドロップシャドウのフィルターを適用することで立体的に重なっているように見せています。これらの工夫により、机の上に写真をばら撒いたような効果を演出しています。
サムネイルにマウスでロールオーバーすると、最前面に表示されるように設定しています。また、最初の例と同様にサムネイル写真をクリックすると、拡大写真が表示されます。
[sourcecode language=”as3″]
package
{
import sk.prasa.webapis.picasa.PicasaResponder;
import sk.prasa.webapis.picasa.PicasaService;
import sk.prasa.webapis.picasa.events.PicasaDataEvent;
import flash.system.Security;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.filters.*;
public class Main extends Sprite
{
//ユーザIDとアルバムIDを指定
private var userID:String = ‘tadokoro’;
private var alubumID:String = ‘5560743918853662497’;
private var selectNum:int;
//Pivasa APIサービス
private var service:PicasaService;
//写真データ
private var picasaData:PicasaDataEvent;
public function Main()
{
//クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
init();
//ステージ設定(ブラウザ全画面表示)
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
private function init():void
{
//Picasa APIのサービスを新規に生成
service = new PicasaService();
//使用可能な画像サイズ一覧 (Pixel)
//32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576,
//640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
//サムネイルのサイズ
service.thumbsize = "120";
//拡大写真のサイズ
service.imgmax = "800";
//最大読込枚数
service.max_results = 100;
//ユーザIDとアルバムIDを指定して、情報を読み込み
var responder:PicasaResponder = service.photos.list(userID,alubumID);
//情報の読込みが完了した際に発生するイベントリスナーの登録
responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
}
private function onCompleteHandler(_picasaData:PicasaDataEvent):void
{
picasaData = _picasaData;
var slideRowCount:int = stage.stageWidth / (int(service.thumbsize) + 12);
for (var i:int = 0; i < picasaData.data.entries.length; i++)
{
//ランダムな場所に配置
var randX:int = Math.random()*stage.stageWidth/1.6 + stage.stageWidth/8;
var randY:int = Math.random()*stage.stageHeight/1.6+ stage.stageHeight/8;
showThumbail(i, randX, randY);
}
}
private function showThumbail(num:int, posX:int, posY:int):void
{
//サムネール読込のベースとなるムービーを配置
var thumbnailMc:Thumbnail = new Thumbnail();
addChild(thumbnailMc);
//ムービに情報を付加
thumbnailMc.x = posX;
thumbnailMc.y = posY;
thumbnailMc.num = num;
thumbnailMc.buttonMode = true;
thumbnailMc.media = picasaData.data.entries[num].media;
trace(thumbnailMc.media);
thumbnailMc.title = picasaData.data.entries[num].media.title;
thumbnailMc.description = picasaData.data.entries[num].media.description;
thumbnailMc.credit = picasaData.data.entries[num].media.credit;
//ドロップシャドウ
thumbnailMc.filters = [new DropShadowFilter(0,0,0×000000,0.6,8,8,0.5,3)];
//サムネイルにタイトル表示
thumbnailMc.titleText.text = thumbnailMc.title;
//ランダムに傾ける
thumbnailMc.rotation = Math.random() * 60 – 30;
//Loaderを配置
var imageLoader:Loader = new Loader();
var imageURLreq:URLRequest = new URLRequest(picasaData.data.entries[num].media.thumbnails[0].url);
var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
thumbnailMc.loader.addChild(imageLoader);
imageLoader.load(imageURLreq);
//ロールオーバーで最前面に
imageLoader.addEventListener(MouseEvent.ROLL_OVER, rolloverThumbnailHandler);
//クリックで拡大画像表示;
imageLoader.addEventListener(MouseEvent.CLICK, clickThumbnailHandler);
}
private function rolloverThumbnailHandler(event:MouseEvent):void
{
addChild(event.target.parent.parent);
}
private function clickThumbnailHandler(event:MouseEvent):void
{
var thumbnailMc:Thumbnail = event.target.parent.parent;
//ズーム表示のベースとなるムービーを配置
var photoZoomMc:PhotoZoom = new PhotoZoom();
addChild(photoZoomMc);
photoZoomMc.backScreen.width = stage.stageWidth;
photoZoomMc.backScreen.height = stage.stageHeight;
photoZoomMc.x = int(stage.stageWidth / 2);
photoZoomMc.y = int(stage.stageHeight / 2);
photoZoomMc.buttonMode = true;
//拡大した写真をロードする
var num:int = int(thumbnailMc.num);
var contentUrl:String = picasaData.data.entries[num].media.content.url;
var imageLoader:Loader = new Loader();
var imageURLreq:URLRequest = new URLRequest(contentUrl);
var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
photoZoomMc.addChild(imageLoader);
//拡大画像のローダー配置;
imageLoader.load(imageURLreq);
imageLoader.x = – thumbnailMc.media.content.width / 2;
imageLoader.y = – thumbnailMc.media.content.height / 2;
//場所と大きさを写真にあわせて補正
photoZoomMc.photobase.width = thumbnailMc.media.content.width + 20;
photoZoomMc.photobase.height = thumbnailMc.media.content.height + 60;
photoZoomMc.photobase.y = 20;
//写真のタイトルと説明を表示
photoZoomMc.titleText.text = thumbnailMc.title;
photoZoomMc.descriptionText.text = thumbnailMc.description;
//クリックで消去
photoZoomMc.addEventListener(MouseEvent.CLICK, clickZoomHandler);
}
private function clickZoomHandler(event:MouseEvent):void
{
removeChild(event.target.parent);
}
}
}
[/sourcecode]
応用2：アニメーションで演出
さらに応用したサンプルを作成します。サムネイルが表示される際や、拡大画像を表示する際に、場所や透明度をアニメーションしながら表示するようにしています。
アニメーションの効果には、Tweenライブラリを使用しています。これは、変化させる対象と変化に要する時間を指定すると簡単にアニメーションを作成してくれるライブラリです。詳細は、「Webアニメーション」の授業の「Tweenライブラリの利用(1)」「Tweenライブラリの利用(2)」を参照してください。
[sourcecode language=”as3″]
package
{
import com.greensock.*;
import com.greensock.easing.*;
import sk.prasa.webapis.picasa.PicasaResponder;
import sk.prasa.webapis.picasa.PicasaService;
import sk.prasa.webapis.picasa.events.PicasaDataEvent;
import flash.system.Security;
import flash.display.*;
import flash.events.*;
import flash.net.*;
import flash.filters.*;
public class Main extends Sprite
{
//ユーザIDとアルバムIDを指定
private var userID:String = ‘tadokoro’;
private var alubumID:String = ‘5560743918853662497’;
private var selectNum:int;
//Pivasa APIサービス
private var service:PicasaService;
//写真データ
private var picasaData:PicasaDataEvent;
public function Main()
{
//クロスドメインポリシーファイルの読み込み
Security.loadPolicyFile("http://photos.googleapis.com/data/crossdomain.xml");
init();
//ステージ設定(ブラウザ全画面表示)
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
}
private function init():void
{
//Picasa APIのサービスを新規に生成
service = new PicasaService();
//使用可能な画像サイズ一覧 (Pixel)
//32, 48, 64, 72, 144, 160, 200, 288, 320, 400, 512, 576,
//640, 720, 800, 912, 1024, 1152, 1280, 1440, 1600
//サムネイルのサイズ
service.thumbsize = "120";
//拡大写真のサイズ
service.imgmax = "800";
//最大読込枚数
service.max_results = 100;
//ユーザIDとアルバムIDを指定して、情報を読み込み
var responder:PicasaResponder = service.photos.list(userID,alubumID);
//情報の読込みが完了した際に発生するイベントリスナーの登録
responder.addEventListener(PicasaDataEvent.DATA, onCompleteHandler);
}
private function onCompleteHandler(_picasaData:PicasaDataEvent):void
{
picasaData = _picasaData;
var slideRowCount:int = stage.stageWidth / (int(service.thumbsize) + 12);
for (var i:int = 0; i < picasaData.data.entries.length; i++)
{
//ランダムな場所に配置
var randX:int = Math.random() * stage.stageWidth / 1.2 + stage.stageWidth / 24;
var randY:int = Math.random() * stage.stageHeight / 1.2 + stage.stageHeight / 24;
showThumbail(i, randX, randY);
}
}
private function showThumbail(num:int, posX:int, posY:int):void
{
//サムネール読込のベースとなるムービーを配置
var thumbnailMc:Thumbnail = new Thumbnail();
addChild(thumbnailMc);
//ムービに情報を付加
thumbnailMc.x = stage.stageWidth / 2;
thumbnailMc.y = stage.stageHeight + 100;
thumbnailMc.num = num;
thumbnailMc.buttonMode = true;
thumbnailMc.media = picasaData.data.entries[num].media;
trace(thumbnailMc.media);
thumbnailMc.title = picasaData.data.entries[num].media.title;
thumbnailMc.description = picasaData.data.entries[num].media.description;
thumbnailMc.credit = picasaData.data.entries[num].media.credit;
//アニメーションしながら表示
TweenLite.to(thumbnailMc, 1, {delay:num*0.2, x:posX, y:posY, rotation:Math.random() * 90 – 45, ease:Expo.easeOut});
//ドロップシャドウ;
thumbnailMc.filters = [new DropShadowFilter(0,0,0×000000,0.6,8,8,0.5,3)];
//サムネイルにタイトル表示
thumbnailMc.titleText.text = thumbnailMc.title;
//Loaderを配置
var imageLoader:Loader = new Loader();
var imageURLreq:URLRequest = new URLRequest(picasaData.data.entries[num].media.thumbnails[0].url);
var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
thumbnailMc.loader.addChild(imageLoader);
imageLoader.load(imageURLreq);
//ロールオーバーで最前面に;
imageLoader.addEventListener(MouseEvent.ROLL_OVER, rolloverThumbnailHandler);
//クリックで拡大画像表示;
imageLoader.addEventListener(MouseEvent.CLICK, clickThumbnailHandler);
}
private function rolloverThumbnailHandler(event:MouseEvent):void
{
addChild(event.target.parent.parent);
}
private function clickThumbnailHandler(event:MouseEvent):void
{
var thumbnailMc:Thumbnail = event.target.parent.parent;
//ズーム表示のベースとなるムービーを配置
var photoZoomMc:PhotoZoom = new PhotoZoom();
photoZoomMc.backScreen.width = stage.stageWidth;
photoZoomMc.backScreen.height = stage.stageHeight;
photoZoomMc.backScreen.alpha = 0;
photoZoomMc.x = int(stage.stageWidth / 2);
photoZoomMc.y = int(stage.stageHeight / 2);
photoZoomMc.buttonMode = true;
photoZoomMc.alpha = 0;
addChild(photoZoomMc);
//ドロップシャドウ
photoZoomMc.filters = [new DropShadowFilter(0,0,0×000000,0.6,8,8,0.5,3)];
//アニメーションしながら拡大
TweenLite.to(photoZoomMc, 1, {alpha:1.0});
TweenLite.to(photoZoomMc.backScreen, 3, {delay:1.0, alpha:1.0});
//拡大した写真をロードする
var num:int = int(thumbnailMc.num);
var contentUrl:String = picasaData.data.entries[num].media.content.url;
var imageLoader:Loader = new Loader();
var imageURLreq:URLRequest = new URLRequest(contentUrl);
var imgInfo:LoaderInfo = imageLoader.contentLoaderInfo;
photoZoomMc.addChild(imageLoader);
//拡大画像のローダー配置;
imageLoader.load(imageURLreq);
imageLoader.x = – thumbnailMc.media.content.width / 2;
imageLoader.y = – thumbnailMc.media.content.height / 2;
//場所と大きさを写真にあわせて補正
photoZoomMc.photobase.width = thumbnailMc.media.content.width + 20;
photoZoomMc.photobase.height = thumbnailMc.media.content.height + 60;
photoZoomMc.photobase.y = 20;
//写真のタイトルと説明を表示
photoZoomMc.titleText.text = thumbnailMc.title;
photoZoomMc.descriptionText.text = thumbnailMc.description;
//クリックで消去
photoZoomMc.addEventListener(MouseEvent.CLICK, clickZoomHandler);
}
private function clickZoomHandler(event:MouseEvent):void
{
removeChild(event.target.parent);
}
}
}
[/sourcecode]
サンプルファイルのダウンロード
今日とりあげたサンプルは下記からダウンロードすることができます。