BLOG ENTRY

Progressionを使ったフォトギャラリーのサンプル[as3]

image1

Progressionの理解にと簡易フォトギャラリーのサンプルを作ってみました。

装飾やエフェクトは極力なしで必要最低限な超ベーシックな部分のみです。
もしかしたら誰かの役に立つかもと思ってソースコードを載せておきます
(progressionのバージョンは3系の最新版、3.1.62)

内容としては
・画像は埋め込みではなく外部読み込み
・PRML形式のXMLファイルで画像パスや画像名などを管理
な感じです。

ASが3ファイル、XMLが1ファイル、jpg5枚です

deploy/contents/xml/scene_prml.xml
deploy/contents/images/photo/
image1.jpg
image2.jpg
image3.jpg
image4.jpg
image5.jpg

src/classes/myproject/IndexScene.as
src/classes/myproject/scenes/ImageScene.as
src/classes/myproject/buttons/ThumbnailButton.as

ではコードを。

src/classes/myproject/IndexScene.as
[as3]
package myproject {
import myproject.buttons.*;
import myproject.scenes.*;

import flash.net.URLRequest;
import flash.trace.Trace;

import jp.nium.utils.XMLUtil;
import jp.progression.casts.*;
import jp.progression.commands.*;
import jp.progression.events.*;
import jp.progression.loader.*;
import jp.progression.*;
import jp.progression.scenes.*;

/**
* IndexScene クラス
*/
public class IndexScene extends SceneObject {
private var _buttonArray:Array = new Array;
private var _imageScene:ImageScene;
/**
* コンストラクタ
*/
public function IndexScene() {
// ブラウザ同期時に出力したいタイトルを設定します。
//title = "";
}

/**
* シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onLoad():void {
// 実行したいコマンドを登録します。
addCommand(
new LoadURL( new URLRequest( "contents/xml/scene_prml.xml" ) ),

function():void {
// PRML データからシーン構造を作成
addSceneFromXML( new XML( this.latestData ) );

// ParallelList を作成
var _pList:ParallelList = new ParallelList();

//ボタンの作成
for ( var i:int = 0; i < numScenes; i++ ) {
var _xmlData:XMLList = new XMLList( scenes[i].sceneInfo.data );
var _obj:Object = XMLUtil.xmlToObject( _xmlData );
//new Trace(_xmlData);
var thumbBtn:ThumbnailButton = new ThumbnailButton();
with (thumbBtn) {
loadImage(_obj.imageurl);
x = 10;
y = ( 110 * i ) + 120;
id = i;
}
thumbBtn.sceneId = scenes[i].sceneId;

_pList.addCommand(
new AddChild( progression.container, thumbBtn )
);
}

this.parent.insertCommand(
_pList,
new Goto( scenes[0].sceneId )
);
}
);
}

/**
* シーンオブジェクトが目的地だった場合に、到達した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onInit():void {
// 実行したいコマンドを登録します。
addCommand(

);
}

/**
* シーンオブジェクトが出発地だった場合に、移動を開始した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onGoto():void {
// 実行したいコマンドを登録します。
addCommand(

);
}

/**
* シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更された瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onUnload():void {
// 実行したいコマンドを登録します。
addCommand(

);
}
}
}
[/as3]

src/classes/myproject/scenes/ImageScene.as
[as3]
package myproject.scenes {
import flash.display.Loader;
import flash.net.URLRequest;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.text.TextFormat;

import jp.nium.utils.XMLUtil;
import jp.progression.casts.*;
import jp.progression.commands.*;
import jp.progression.events.*;
import jp.progression.loader.*;
import jp.progression.*;
import jp.progression.scenes.*;

public class ImageScene extends SceneObject
{

private var _imageLoader:CastLoader;
private var _txt:TextField;

/*======================================================================*//**
* コンストラクタ
*/
public function ImageScene( name:String = null, initObject:Object = null )
{
super( name, initObject );
title = ”;
}

/*======================================================================*//**
* シーン移動時に目的地がシーンオブジェクト自身もしくは子階層だった場合に、階層が変更された瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onLoad():void
{
var _xmlData:XMLList = new XMLList(this.sceneInfo.data);
var obj:Object = XMLUtil.xmlToObject(_xmlData);

_imageLoader = new CastLoader(this);
var _imageUrlRequest = new URLRequest("contents/images/photo/" + obj.imageurl);
with (_imageLoader) {
load(_imageUrlRequest);
x = 120;
y = 10;
}

//text表示
var _format = new TextFormat();
with (_format) {
size = 26;
color = 0xcccccc;
}

_txt = new TextField();
with (_txt) {
mouseEnabled = false;
text = obj.caption;
autoSize = TextFieldAutoSize.RIGHT;
x = 540;
y = 626;
alpha = 0;
setTextFormat(_format);
}

addCommand(
// 任意のコマンドを記述してください。
);
}

/*======================================================================*//**
* シーンオブジェクトが目的地だった場合に、到達した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onInit():void
{
with (_imageLoader) {
y = -800;
alpha = 0;
}
addCommand(
// 任意のコマンドを記述してください。
[
new AddChild( progression.container, _imageLoader ),
new DoTweener(_imageLoader, { alpha:1, time:1, y:120 } ),
new AddChild( progression.container, _txt ),
new DoTweener(_txt, { alpha:1, time:1} )
]
);
}

/*======================================================================*//**
* シーンオブジェクトが出発地だった場合に、移動を開始した瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onGoto():void
{
addCommand(
// 任意のコマンドを記述してください。
[
new RemoveChild( progression.container, _imageLoader ),
new RemoveChild( progression.container, _txt )
]

);
}

/*======================================================================*//**
* シーン移動時に目的地がシーンオブジェクト自身もしくは親階層だった場合に、階層が変更された瞬間に送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onUnload():void
{
addCommand(
// 任意のコマンドを記述してください。
);
}
}
}
[/as3]

src/classes/myproject/buttons/ThumbnailButton.as
[as3]
package myproject.buttons
{
import flash.net.URLRequest;
import jp.progression.casts.*;
import jp.progression.commands.*;
import jp.progression.events.*;
import jp.progression.loader.*;
import jp.progression.*;
import jp.progression.scenes.*;

/**
* …
* @author
*/
public class ThumbnailButton extends CastButton
{

/*======================================================================*//**
* コンストラクタ
*/
public function ThumbnailButton( initObject:Object = null )
{
super( initObject );

}

/*ImageのLoad*/
public function loadImage(_ImageUrl:String):void {
var _ImageLoader:CastLoader = new CastLoader(this);
var _ImageUrlRequest = new URLRequest("contents/images/photo/" + _ImageUrl);
with (_ImageLoader) {
addEventListener(CastEvent.CAST_LOAD_COMPLETE, ImageLoadComp);
load(_ImageUrlRequest);
}
function ImageLoadComp(e:CastEvent):void {
with (_ImageLoader) {
width = 100;
height = 100;
}
addChild(_ImageLoader);
}
}

/*======================================================================*//**
* Flash Player ウィンドウの CastButton インスタンスの上でユーザーがポインティングデバイスのボタンを押すと送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastMouseDown():void
{
addCommand(
// 任意のコマンドを記述してください。
);
}

/*======================================================================*//**
* ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastMouseUp():void
{
addCommand(
// 任意のコマンドを記述してください。
);
}

/*======================================================================*//**
* ユーザーが CastButton インスタンスにポインティングデバイスを合わせたときに送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastRollOver():void
{
addCommand(
// 任意のコマンドを記述してください。
new DoTweener(this, {
alpha : 0.8,
time : 0.4
} )
);
}

/*======================================================================*//**
* ユーザーが CastButton インスタンスからポインティングデバイスを離したときに送出されます。
* このイベント処理の実行中には、addCommand() メソッド、及び insertCommand() メソッドによるコマンドの同期処理が行えます。
*/
protected override function _onCastRollOut():void
{

addCommand(
// 任意のコマンドを記述してください。
new DoTweener(this, {
alpha : 1.0,
time : 0.4
} )

);
}
}
}
[/as3]

deploy/contents/xml/scene_prml.xml
[xml]
<?xml version="1.0" encoding="UTF-8" ?>
<prml version="2.0.0" type="text/prml">
<scene name="photo_001" cls="myproject.scenes.ImageScene">
<caption>avater | movie</caption>
<imageurl>image1.jpg</imageurl>
</scene>
<scene name="photo_002" cls="myproject.scenes.ImageScene">
<caption>ikemen | actor</caption>
<imageurl>image2.jpg</imageurl>
</scene>
<scene name="photo_003" cls="myproject.scenes.ImageScene">
<caption>ossan | general</caption>
<imageurl>image3.jpg</imageurl>
</scene>
<scene name="photo_004" cls="myproject.scenes.ImageScene">
<caption>beethoven | musician</caption>
<imageurl>image4.jpg</imageurl>
</scene>
<scene name="photo_005" cls="myproject.scenes.ImageScene">
<caption>ossan 2 | soldier</caption>
<imageurl>image5.jpg</imageurl>
</scene>
</prml>
[/xml]

とにかくaddSceneFromXML()の威力にびっくりです。

WRITE COMMENT


(required)


(required)


(required)

MENU

veltica creative of twitter