Progression Archive

非ProgのものをProg化するテストで、ExternalInterfaceを使ってJS通信するサンプルを加工してみました。
で、エラーが起こりまくるので頑張ってデバグしてみると、いろいろ見えてきたのでメモメモ。

ぶっちゃけブログパーツなんですが、
１．本体パーツをクリック
２．オーバーレイFlashが表示される
３．オーバーレイの閉じるボタンをクリック
４．オーバーレイ削除＆本体パーツも表示mc変更
という流れのもので、３→４の流れでつまづいていました。

Continue reading

via：コマンドについて色々書いてみる - Is It So Easy?

this.addCommand(
  new Trace("コマンドスタート"),
  function ():void{
    trace("コマンド2")
    this.parent.insertCommand(
      new Trace("コマンド3"),
      function(){
        this.parent.addCommand(
          new Trace("コマンド4")
        );
        this.parent.insertCommand(
          new Trace("コマンド5")
        )
      }
    )
    trace("コマンド6");  
  },
  new Trace("コマンド終わりよ")  
);

実行結果：
コマンドスタート
コマンド2
コマンド6
コマンド3
コマンド5
コマンド終わりよ
コマンド4

はてさて。
まず、コマンド2は上から来てるコマンドの最初なので、２番目に実行されるのはＯＫ。さらに、コマンド４がaddCommandなので、コマンド終わりの次にくるのはＯＫ。
コマンド６は、insertCommandの次ですが、functionの中身と考えると３番目に来るらしい（ここからややこしい）。その中でさらにinsertCommandしているのでコマンド５はfunctionの最後で実行される。ここまでがひとつの Func。で、コマンド終わりよ。と表示される。

すべてが一つのaddCommand内で、insertCommandを重ねて作るやり方をよくやるんですが、これがややこしやの元凶なのか！　というメモ。

１．XMLを読み込んで、質問を表示。（ＸＭＬには質問とYES/NOの答え全部載ってる）
２．YESボタン、NOボタンを画面に表示。
３．ボタンをクリックすると答えを表示。
４．一定時間、１～３を繰り返し。
５．条件を満たすとクリアの画面が出る。

というゲームを作っていて、「XMLを読むのがカンタンだからProgressionを使おう」「問題画面とクリア画面をシーンにすればいいかな」と思って（バカ）進めていたんですが、３，４，５でつまづきました。

以下、やっちまったことメモ。
まずXMLを読み込むのはLoadURLでサラッと完了。
XMLをパースして、問題を画面に表示。
で、画面にYESNOボタンを表示。new AddChildですよ。ここでつまづいた：このテクを見て、AddChildの次にfunctionでtimeOut=0;dispatcher=yesno_mc;eventType=MouseEvent.CLICK;を設定したんですが、yesno_mcのYESボタンとNOボタンのどっちがクリックされたのかが判定できません。致命的。なんとかstage.mouseXとmouseYでクリックエリアを取得して、まぁいいか、という感じで完了。

次に答えを表示する部分では、答えの表示は答えと説明を出したかったので、XMLをパースするつもりでwhile文中でyesタグまたはnoタグの内容を引っ張ろうとしました。ここでつまづいた：functionの中でinsertCommandが実行されるのはどうやら遅いっぽくて、ループでひとつずつ実行されるのかと思ってたらループが終わったときにまとめて実行されてるっぽいので、答えと説明が同時にテキストエリアを埋めるという怪奇現象に遭遇。ここはnew Wait(3000)とかで十分な時間を取り、なんとか完了。

そしてクリアするまで上記を繰り返す操作がしたかったんですが、ここでつまづいた：１～３のコマンドをコピーして延々実行するというところで、そのやり方がわからない。ほっとくとどんどん実行され続けるし。
で、この辺で気付きました。

これ、Progressionでやることじゃなくね？と。

そもそもクイズゲームを作ったことがないのでどんな構成にしたらいいのかが分かってないのが問題だとは思うんですが、クリック待ちはできるけどボタンを待つことができない、とか、ひとつのシーン内で同じ処理を繰り返すのが向いてなさそう、とか、どうやら間違ったことをやっていた、ということが分かりました。

タイムラインスタイルにて。

var xml:XML = new XML(
  <txml>
  <serif>あいうえお</serif>
  <serif>かきくけこ</serif>
   <serif>さしすせそ</serif>
  <serif>コニャニャチハ</serif>
  <serif>がっちゃまーん</serif>
  <serif>しょっきんぐ</serif>
  </txml>
);

scene.onInit = function():void {
  this.addCommand(
    function():void{
    for(var i:uint=0; i<xml.serif.length(); i++){
      this.parent.insertCommand(
        new Trace(i),
        new Trace(xml.serif[i]),
        new Wait(600)
      )
    }//end for
    }
 );
};

みたいなことをやってみたとき、Trace結果はこのようになります。

5
しょっきんぐ
4
がっちゃまーん
3
コニャニャチハ
2
さしすせそ
1
かきくけこ
0
あいうえお

本当は０から順に表示したかったのです。
つまり、コマンドを追加するときにforループを使うと、大きいものから実行されてしまうんですね。
var i:uint=xml.serif.length()-1; while(i-- >=0){...}でやってみると順番になりました。

ループの落とし穴でした。

Progressionでタイムラインスタイルを使っていて、のaddCommand内で、たとえばこう書いたときの話。
やってることは、p1というシーンを表示したときにp1ページ内のボタンの処理を追加しているんですが、問題はここでの「function()」の使い方。

var p1:SceneObject =new SceneObject()
p1.name ="p1"
p1.onInit =function():void{
  this.addCommand(
    new AddChild(prog.container.p1Page),
    function(){
      p1Page._page.btn.addEventListener(MouseEvent.MOUSE_DOWN,function(){
        prog.goto(new SceneId("/index/p2"))
        //本当はここでif使って、条件によって飛ばすシーンを変えてる
    }
  );
}

p1.onGoto =function():void{
  this.addCommand(
      p1Page._page.btn.removeEventListener(MouseEvent.MOUSE_DOWN,arguments.callee);
  );
}

addCommand内のfunctionは、無名関数っつーか、関数リテラルとして実行される、と考えると納得できる。こういうのはその場で１回実行される（言い方はわからないけど、クロージャっていうの？）と理解してるんだけど。

javascriptでいう関数リテラルはこんな感じ。↓

(function(v)
  {alert(v)}("aho")
);

これだと、jsはすぐに実行されて、画面にアラートが出ます。

今日の発見

• addCommand内のfunctionは関数リテラル
• 無名関数でaddEventListenerしたときは、arguments.calleeでremoveできる

ふと思い立ったのでメモメモ。

よくFlasherの人がイベントで、凝ったプレゼンを披露して会場が「うおー！！」とテンション上がることがあるんですが、それってよく考えると自作プレゼンクラスを総動員してるんですよね。

それ、Progressionでやったら、超カンタンじゃないすか？

Progressionでプレゼンを作るメリット

• プレゼンのページをシーンと考えれば、「前へ」「次へ」がコンポーネントで出来る
• 当然、最初のページに戻るにもルートボタンを使えば一発
• ページ切り替えは用意されたエフェクトを使える
• あとでwebで公開するときも簡単
• つまり、プレゼンの中身だけ作ればいい。

まさに「作りたいものは楽しいところだけ作る」じゃないっすか。

※よく知らずに書いてたんだけど、Slidesっていう拡張を使えばそこら辺もちゃんとカバーしてくれるっぽいですね。さすが！！

※このエントリは、Progression初心者向けです。コマンドって何じゃ？　addCommandの中には何を書けばいいんじゃ？　というレベルの僕がだいたいの概念を理解したいがために書きなぐるものです。

こちらのサンプルをガン見しながらProgressionのお作法というのを学ぼうと思い立ちました。サンプル自体の紹介記事（cellfusion先生）はこちら。

本当なら「Progressionを使わないとこんな感じになる」という自作サンプルを提示した上で見ていくべきなんですが、とにかくProgressionを把握するためにそのまーんま追っていきます。
さらに言うと、こういうのは頭の中でやってればいいことです。アホ丸出しなので周回遅れの気がします。

構成

・最初のページを表示（overview/news/showcase/supportを読み込むボタンがあるページ）
・画面左にナビゲーションを表示（固定）

構成から考える処理の流れ

・最初のページを表示
・グローバルナビはそれぞれのページのコンテンツリンクと、ブログなどのアンカーリンク
・ナビのボタンを押すとそれぞれのページを表示
・newsではindex.swfと同階層のnews.xmlを読み込んで表示
・showcaseではindex.swfと同階層のshowcase.xmlを読み込んで表示

Continue reading

Progressionには「コンポーネント」「タイムライン」「クラス」の3スタイルがありますが、今まではクラスでちゃんとやろう、やろう、と思いながらもハードルが高い気がしてました。
それに、作るものがサイト形式ならともかく、ゲームには向かないんじゃないかなぁ、など思ったら「また今度でいいか」と後回しにしてました。

だけど、この3スタイルあるのがポイントだと気付きました。

Progressionを理解し使いこなすには：
１．まずコンポーネントスタイルでグローバルナビがあるサイトみたいなのを作ってみる
　（ROボタンやIOムービーを使って、何ができるかを把握する）

２．タイムラインスタイルで流れをつかむ
　（シーンの概念と、onLoad/onInit/onGoto/onUnloadのタイミングや意味を把握する）

３．クラススタイルで作りこむ
　（あとはもう、お好みで）

個人的な感想ですが、↑のようなステップでやってみると理解が早いのではと思います。
このステップはそのまま「守・破・離」でもあると思いました。
まずコンポーネントでProgressionとは何かを学び、タイムラインでお手本に自分なりのアクセントを入れてみて、クラスで自分のスタイルを確立する。型があるから型破り、型がなければ形無し。とは歌舞伎でも何でも言われていることですね。
で、コンポーネントはなんとなく出来るとして、タイムラインで何ができるのかは次のエントリで勉強します！

すっげぇ違うのでメモ。Easycastingモードです。

今まで、2.0.22でいくつか作っていたものを3.1にアップデートしてみました。
Progressionプロジェクトパネルから「アップデート」でフォルダを選んでやろうとしたら変なエラーが出てアップデートできなかったので自力でやりました。

まず、index.flaのフレームが違います。2系はloadフレームとinitフレームがあったところが、EasycastingLoaderだけになってます。でもコンポーネントは基本的に変わってないから大丈夫。ライブラリからコピーして「置き換える」を選びました。

それから2系では気にも止めなかったPreloader.flaも置き換えておきます。ここのコンポーネントも3系になって進化したみたい。
ちなみに、Preloaderコンポーネントのパラメータから stage.StageAlign を変更できました。プロジェクトを「中央に表示する」にしちゃってから、StageAlignをTL(T)にしたくなったときはこれを触ればいいんですね。それから、htmlで表示したときの背景色はPreloader.flaの背景色らしいので、白をしていたものをグレーとかにしたいときもここですね。意外と重要だった。

そしてかなりイイ機能が、コンポーネント「Progression Effects」に入ってるエフェクトの数々。2系までは「InOutMovie」でinフレーム、stopフレーム、outフレームを指定してトゥイーンを作っていたものを、1フレームだけのシンボルにエフェクトコンポーネントをぴょいと配置するだけでシーン移動時にエフェクト実行してくれます。これはクール。

EasyCastingで欠かせないのが（っていうかほとんどのボタンがこれになる）RollOverコンポーネントですが、2系の初期からみるとすごくシンプルで洗練されてます。以前は[down点]、[over点]、[up点]、[ツールチップの内容]、[移動先タイプ（scene/http/mailto)]、[移動先（/index/testScene　とか）]、[対象ウィンドウ]、とたくさんあったものが、[accessKey]、[navigatePath（/index/testScene　とか）]、[toolTipText]の3つになっちゃってます。Rootボタン、Prev/Nextボタンも同じようにシンプルになってます。
mcを作って「up/over/down」のフレームだけ作っちゃえばすぐに使える仕組みですね。

っていうか、EasyCastingなら、EasyCastingLoaderコンポーネント（最初だけ）、RollOverボタン、Rootボタンだけでサイトが作れちゃいます。
僕はシーンわけしたいがためにEasyCasting使って、classes/フォルダに自作クラス作って、変数の受け渡し用にstatic変数を用意する、という、アホな書き方なんですが、これでも意外としっくり来ますよ。
クラスベースは怖いのでおいといて、タイムラインベースにも移行したいと思っているんですが、プロジェクトを作って最初に開かれたindex.flaに「//コマンドを書く」みたいなコメントだけが書いてあって、そこに自作の関数を書くとコンパイルエラーになって、じゃあコマンドって何やねん、分からんわ、と思ったので手をつけずにいます。タイムラインベースでたくさん作ってるサンプルがあればそれを見て覚えようと思います。

ところでProgressionはHTMLを書かせないことを謳っているらしいですが、僕はHTML、CSS大好きなので真っ先にHTML開きます。するとSWFObjectをJSのprogオブジェクトから呼ぶという手間がかかることをやってました。これはバージョン指定を10以上にも対応させた、という意味ですね。わかります。progression.jsを読むと、代替表示の div#attention を直接指定してる部分があるので、Progressionを使うときはdiv#attentionに代替を書くようにしましょう。

あと、、、最強の裏技。
触ってて分からないとき、Twitterに独り言をつぶやくと、@指定してないのにnium様からお返事をいただけます。夜中の2時でも仕事中でも、僕みたいなみのむしの独り言に付き合ってくれるnium様はまさに神です。