Progressionでスライドショーを作り中その4「プロトタイプ(Progression De SlideShow)完成」
Progression De SlideShow一応できました。
http://bao-bao.net/bao_bao_blog/progression3/
画像をクリックすると、切り替わるだけという簡単な仕様。
画像がワイドに間延びしてしまうのは、僕のミスm(__)m
前回手こずっていたLoadChildコマンドは、克服?して使用しています。
今回のProgression De SlideShowは、シーン移動を一回しか使用していません。コマンドをとりあえず使ってみたいという思いからです。
という訳で以下がASのソース。コードが冗長になりすぎるため、埋込画像やサウンド関連は、割愛。
package {
import flash.display.Sprite;
import flash.net.URLRequest;
import flash.events.*;
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 {
[SWF(width="800",height="600",frameRate="30",backgroundColor="#FFFFFF")]
//コンストラクタ
public function IndexScene() {
container = new Sprite();
photoArr = new Array();
}
private var container:Sprite;
private var photoArr:Array;
//画像の番号
private var imgNum:uint = 0;
private var imgNumMax:uint;
private var imgNumMin:uint = 0;
private var clickNum:uint = 0;
/*======================================================================*/
protected override function _onLoad():void {
addCommand(
);
}
protected override function _onInit():void {
var comLoadURL:LoadURL = new LoadURL(new URLRequest("photoXML.xml"));
addCommand(
comLoadURL,
function ():void
{
//xml読み込み
var tempXML:XML = new XML(comLoadURL.data);
trace(tempXML)
//xml解析
imgNumMax = tempXML.entry.length();
for (var i:uint = 0; i < tempXML.entry.length(); i++)
{
//配列にXMLの内容を入れる
var tempObj:Object = { url:String(tempXML.entry[i].@url) };
photoArr.push(tempObj);
}
},
//画像を格納するcontainerを表示リストに追加
new AddChildAt(progression.container, container,1),
//イニシャル処理
function ():void
{
init();
}
);
}
//イニシャル処理
private function init(): void
{
onResize();
progression.container.stage.addEventListener(Event.RESIZE, onResize);
var comLoadChildAt:LoadChildAt = new LoadChildAt(container, new URLRequest(photoArr[0].url),0, { loader: { alpha:0 }});
//最初の画像を表示させる
addCommand(
comLoadChildAt,
//画像のリサイズ
function():void
{
imgResize();
},
//画像の表示
new DoTweener(comLoadChildAt.loader, { alpha:1, time:1 } ),
//イベント追加
function ():void
{
addEvent();
}
);
}
//イベントの追加
private function addEvent():void
{
//クリッくイベントを追加する
progression.container.stage.addEventListener(MouseEvent.CLICK, onClick);
}
//画像のリサイズ関連
private function imgResize():void
{
var containerWidth:Number=progression.container.stage.stageWidth;
var containerHeight:Number = progression.container.stage.stageHeight;
var rate:Number = container.width / container.height;
container.width = containerWidth;
container.height = containerWidth / rate;
if (container.height < containerHeight)
{
container.height = containerHeight;
container.width = container.height * rate;
}
}
//クリック時の処理
private function onClick(evt:MouseEvent=null):void
{
imgNum++;
if (imgNum >= imgNumMax)
{
imgNum = 0;
}
//LoadChildコマンドを定義する
var comLoadChildAt:LoadChildAt = new LoadChildAt(container, new URLRequest(String(photoArr[imgNum].url)),0);
var serialList:SerialList = new SerialList();
serialList.addCommand
(
//今表示されている画像のalphaを0にする
new DoTweener(container, { alpha:0, time:0.5 } ),
//今表示されている画像を消去する(removeChild)
function ():void
{
while (container.numChildren > 0)
{
container.removeChildAt(container.numChildren - 1);
}
},
//先ほど定義したLoadChildコマンドを使用する
comLoadChildAt,
//画像のリサイズをする
function ():void
{
imgResize();
},
//画像を表示する
new DoTweener(container, { alpha:1, time:2 } )
);
//コマンドを使用をする
serialList.execute();
}
//ステージリサイズ処理
private function onResize(evt:Event=null):void
{
imgResize();
}
}
}
以下が外部XMLファイル
<data> <entry url="img/photo000.jpg" /> <entry url="img/photo001.jpg" /> <entry url="img/photo002.jpg" /> <entry url="img/photo003.jpg" /> <entry url="img/photo004.jpg" /> <entry url="img/photo005.jpg" /> </data>
初級者の僕が思う、Progressionの凄いところはaddEventListenerメソッドが格段に減る事だと思います。
という処理も、
本来なら、
KARI_loader.load(new URLRequest("KARI_image.jpg"));
Kari_loader.addEventListener(Event.Complete,onLoadComplete);
function onLoadComplete(evt:Evemt){/*tweener処理*/}
みたいに書かないといけないけど、
addCommand(
new LoadChild(container,new URLRequest("KARI_img.jpg")),
new DoTweener(/*tweener処理*/)
)
こんなに簡単に書けるし、見通しがすごくよいです。
Commandクラスだけでもかなり作業量を減らす事が出来るのではないかなと思います。
他にも、いろいろなコマンドがリファレンスにはあるので、いろいろ試していきます。
とりあえず、スライドショーをもっと見てくれの良いもの仕上げます。
最近めっきりFlashCS3を起動さえしておらず、FlexSDK + FlashDevelopの体になってしまいました。
今週、kmxs講師によるコンポーネントベースのProgressionワークショップin大崎に参加予定です。
ちょっと予習を兼ねてFlashCS3を開かなけれゔぁ！！
<追記08.10.20.昼>
Progressionリファレンスを見ていたら、RemoveAllChildrenというコマンドを知りました。
RemoveAllChildren クラスは、対象の DisplayObjectContainer インスタンスに登録されている全てのディスプレイオブジェクトを削除するコマンドクラスです。
だそうです。
//今表示されている画像を消去する(removeChild) function ():void { while (container.numChildren > 0) { container.removeChildAt(container.numChildren - 1); } },
この部分は、以下のように書き直せるという事だと思います。
//今表示されている画像を消去する(removeChild) new RemoveChildren ( container ),
と。
あくまでメモです。