Fountain

KAYACさんの、_level0.KAYACで「Flash制作に欠かせない3つのツール」というエントリが非常に面白かったので、僕も乗っかりました。

1.DeMonsterDebugger

http://demonsterdebugger.com/

おなじく_level0.KAYACのこのエントリが分かりやすいです。

(1)DeMonsterDebugger側から、デバッグ用ライブラリをエクスポートする
(2)ドキュメンクラスでimport、初期化をする。
(3)Flashでプレビュー

といった簡単な手順でDeMonsterDebuggerに情報がずらっと表示されます。
FirexfoxアドオンのFireBugのような感じでプロパティを書き換えたり、traceをモニタすることができます。

DeMonsterDebuggerはすごく便利なので、後日もう少し掘り下げて書きたいですね。

2.ASDoc

ActionScript 3.0 コンポーネントリファレンスガイド

これ本当に読んでて楽しいです。
知らなかったプロパティとかメソッドを見つけてはニヤニヤしてます。
pdf版とかあるとオフラインでも読めてうれしいんですが…

3.英字配列キーボード

自宅のMacBookも英字配列、会社のiMacは英字配列キーボード持ち込んでで作業してます。
cmd+Spaceで入力を切り替えれるのと、アンダースコアが打ちやすいのが特に気に入ってます。
あと、自宅だとparallels＋FlashDevelopでメインのコードを書いていますが、日本語キーボードだと面倒なキーの配列問題も特に発生せず、快適に使えています。
ちなみに会社のキーボードはこれです。
ストロークが浅めなので、パシパシとたたく感じです。

他のFlash制作者の方がどんなツールを使っておられるか気になりますねー。

このエントリを書いている間に独学ActionScriptさんがこのエントリで３つのツールを紹介されてました。

「演出は少ないけど画面遷移が膨大なFlashをつくってくれ、あと音を出したい」という案件が舞い込み、自分がアサインされました。
そこで、先日Betaが公開されたProgression4を使うことにしました。

結論：１週間程みっちりやれば、有る程度の遷移とかできるようになります。

あくまでBetaなので、今後変わる可能性もありますが、メモ程度に書き残しておきます。

manager、Scene、Castの関係

manager（Progressionクラス）

managerは画面遷移のすべてを統括。
addScene()されたSceneはすべてmanagerの管理下の置かれる。

Scene(SceneObject)

画面の大枠を担当。
この中にキャストをaddChildすることで表示を行う。

Cast(CastSprite,CastButtonなど)

表示オブジェクト。
Sceneとの関連性を持たない（直接Sceneを参照できない）
基本的にはDisplayObjectにmanagerへの参照＋独自の機能を持つように拡張したクラス、という認識。
独自の機能というのは、CastButtonであればSceneIdを指定することで画面を遷移する。という感じ。

ハマリポイント

Progressionには「お作法」のようなものがあり、それを理解するまでは思い通りに作れません。どこでハマったかをメモして、今後に役立てたいです。

1.シーンイベント

これはProgressionを始めた人であれば間違いなく一番最初にはまる壁。
あれ、表示されないとか、なんで２個も表示されてんの！とかはだいたいこれな気がします。
これこそProgressionのお作法で、一番重要な部分だと思います。

理解する一番の早道は、とりあえずシーンとボタンをいくつか作ってとりあえず遷移させてみて、出力パネルを監視することだと思います。
Progressionはシーンイベントを逐一表示してくれるのですごくたすかります。

あとはMurakenさんのエントリとか、gihyoのnorthprintさんのエントリが分かりやすいです。
だいたいはMurakenさんのエントリの通り、atSceneLoadとatSceneUnloadでいけたりします。atSceneInitとatSceneGotoはたまに使います。

2.コンストラクタではmanagerを参照できない。

たとえば、以下のようなコード、エラーが出ます。

public class MyScene extends SceneObject
{
     public function MyScene(){
          trace(manager.root);
     }    
}

scene:SceneObject=new SceneObject()した段階では、まだaddSceneされてない。
そのためmanagerを参照することができない、ということだと思っています。
こういう場合は、atLoadやatInitで参照すると回避できます。

protected override function atSceneLoad():void {
     addCommand(
          new Trace(manager.root)
     );
}

3.CastからSceneを参照

たとえば、indexSceneに配置されているindexPage（CastSprite）にsettingというプロパティを作り、他のSceneや他のCastから参照したい場合。

manager.root.page.setting

とすれば良さそうですが、うまく行きません。
いちいちキャスト（このキャストは強制型変換のこと。ややこしいですね。）してやる必要があります
上の例だとこんな感じ。

IndexPage(IndexScene(manager.root).page).setting

ここらへんはprogressionというより、AS自体ではまった所かもしれません。

4.リンクしないボタンの処理

CastButtonはすごく便利です。
自分でaddEventListenerしなくてもすでにoverrideしてありますし（重要）
だけどsceneIdプロパティが必須です。


sceneId=""
sceneId＝"実際に存在しないId"


とかするとエラーで怒られます。
なのでその場合は普通にCastSpriteで作ってaddEventListenerする、という従来通りの作り方をします。

managerへの参照を持たないオブジェクトの中に配置したCastはmanagerを参照できない
なにを言っているんだという感じですか、コードだとこんな感じです。


sp:Sprite=new Sprite();
cast:CastSprite=new CastSprite();
sp.addChild(cast);


とした場合、Castはマネージャーに参照できません。
spもCastSpriteにする必要があります。

rootの定義

シーンからドキュメントクラスにアクセスするときは注意が必要です。


SceneObject.root
CastSprite.root


上記は同じようにrootを参照していますが実体は違います。
SceneObjectのrootはmanager.rootと同じです。
Castのrootはindex。いわゆるドキュメントクラスです。
CastからindexSceneを参照したい場合は、manager.rootとすればよいですが、SceneObjectからドキュメントクラスを参照したい場合


Index(manager.container.root)


追記
↑これちがうよ！ただしくはIndex(manager.root.container)だよ！

こんな感じで参照できます。

Progressionの便利ポイント

さんざんはまったポイントを書いてきましたが、それよりも便利な部分が多すぎる！
ということでProgressionのナイスなポイントも。

1.コード量が最小限ですむ。

ほんとうに作りたいところだけ作れます。
こーいう構造でー、こーいう遷移でー、これ読み込んでーというのがかなり直感的にできます。

2.Command

めちゃくちゃ便利です。とくにLoader周り。
とりあえず最初に読んどいて、それから表示して。みたいなことが簡単にできます。
SeriaLList万歳。

3.超協力な参照力。

だいたいmanager.rootとか、manager.currentとかすると必要なプロパティやシーン情報が取れます。
なのでとりあえずindexとか子シーンで設定系を定義しておいて、孫シーンとかでそれを参照して処理。とかってやってます。
先ほどのはまりポイント２でやったような強制型変換で強引に、というようになりがちですが、こういう強引なコードでもちゃんと取れるのはうれしい。

これから勉強したいポイント

Progressionは機能がてんこもりなフレームワークです。
１回使っただけじゃ機能を一通り試すこともできませんでした。
今後は以下の部分に注意して使ってみたいと思っています。

initObjectとResource

一応なんとなく分かってはいるつもりなんですけど、実際使ってないのでなんとも。という感じ。
ちょうどdokeさんがlevel0でエントリを書いておられました！これを読んで勉強します。

Command

serialListでばんばん直列なcommandを発行しているだけなので、あまりよろしくないですね。。

XMLまわり

ページ情報をXMLで記述できるみたいなので、今度やってみたいです。

先日α版が公開されたBetweenAS3ですが、昨日から少しずつ触ってみました。
Tweenerしか使ってなかったので、BetweenAS3をTweenerレベルまで使えるようになったら移行しようと思ってます。アップデート終了しましたし。

impot周り

いわゆるcaurina.transitions.Tweenerにあたるもの（tweenの発行とeasing）を使おうとしたときに必要なのは以下。


org.libspark.betweenas3.BetweenAS3
org.libspark.betweenas3.easing.*


easingがlinerでいいよーという場合にはorg.libspark.betweenas3.BetweenAS3のみで問題ないはずです（あんまりないと思いますが。）
あと後述するイベントハンドラへの登録まで行う場合はさらに以下の内容のクラスが必要です。


org.libspark.betweenas3.tweens.ITween
org.libspark.betweenas3.events.TweenEvent

または

org.libspark.betweenas3.tweens.IObjectTween
org.libspark.betweenas3.events.TweenEvent


という感じでTweenEventと、ITweenもしくはIObjectTweenが必要。
ITweenと、iObjectTweenの違いも後述。

Tweenさせる。

本題です。どう書くか。

1

BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut).play();

第一引数：ターゲットとなるオブジェクト
第二引数：tween先（Tweenerと同じように指定する）
第三引数：tween元（Tweenerにはなかった！）
第四引数：時間（BetweenAS3のデフォルトだと1.0、Tweenerだと0だったはず）
第五引数：easing（タイプを指定して、そのプロパティでin,outなどを指定）

注意：play()ってちゃんと書きましょう。

これで、Tweenerと同じようにtweenはできたはず。

TweenEvent

これが個人的に一番うれしいところ。
TweenerでもonCompleteはあるんだけど、コードが煩雑になってしまうので、あんまり使いたくなかったんです。（使ってたけど）

BeTweenAS3では、イベントハンドラへ登録することができるようになったのでかなりいい感じです。

1
2
3
4
5
6
7
8

var myTween:ITween = BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut);
myTween.addEventListener(TweenEvent.COMPLETE, onComplete);
myTween.play();
 
private function onComplete(e:TweenEvent):void 
{
    trace("COMPLETE");
 }

非常にスッキリでわかりやすい！すてき！
これ、かなり好きなんですが、ITweenだとBetweenAS3.tween()でtweenをつくったときのターゲットとなるオブジェクトにアクセスできないみたいです。
なので、ターゲットにアクセスしたいときは、ITweenじゃなくて、IObjectTweenをつかいます。

1
2
3
4
5
6
7
8

var objTween:IObjectTween = BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut);
objTween.addEventListener(TweenEvent.COMPLETE, onComplete);
objTween.play();
 
private function onComplete(e:TweenEvent):void 
{
    trace(e.target.target);
 }

TweenEvent.target.targetでターゲットとなるオブジェクト（mc）にアクセスできます。
あとは、かなりお世話になっていたColorShortcutsとか、fladdictさん制作のMatrixShortcutの絶対座標でのTweenあたりをフォローできるようになれば完全に乗り換えができる気がします。
以上をふまえて、完全に個人的なテンプレコードを。
これ元に改変していけばTweenの発行、イベントリスナへの登録、ターゲットへの参照が楽ちんです。

1
2
3
4
5
6
7
8
9
10
11
12
13

import org.libspark.betweenas3.BetweenAS3;
import org.libspark.betweenas3.tweens.IObjectTween;
import org.libspark.betweenas3.easing.*
import org.libspark.betweenas3.events.TweenEvent;
 
var objTween:IObjectTween =  BetweenAS3.tween(mc, { x:100 }, null, 1.0, Cubic.easeOut);
objTween.addEventListener(TweenEvent.COMPLETE, onComplete);
objTween.play();
 
private function onComplete(e:TweenEvent):void 
{
    trace(e.target.target);
}

まとめ

BetweenAS3は、まだアルファ版なのでまだ修正が有ると思いますが、期待しつつ待ちたいと思います。
また、去年の今頃Tweenerに出会ってASを書く楽しさを知りました。
いろんなサイトを検索しまくって、それでもうまくいかなくて、Tweenできた時はすごくうれしかったです。
今後そういうBetweenAS3はそういう初心者が入門的する際に使ってもらえるライブラリになるんじゃないかな、と勝手に思っていたりもしています。
僕が体験したようなうれしい！みたいな感動を最初はコピペでもなんでもいいので体験できるとAS書く人がどんどん増えるんじゃないかなーと思います。
最後のテンプレコードはそういう意味も含めて書きました（半分は自分のためです）