2009.04.13
FlashDevelopの使い方 (8)進化したスニペット機能
(2009.04.22 16:33 追記) addTween()メソッドのtransitionプロパティのコード補完に関して、定数が用意されているEquationsクラスをインポートする方法をコメント欄にてアドバイスしていただきましたので、その方法を加筆しました。
以前スニペット機能の基本的な使い方を調べてエントリーしたのですが、RC2のバージョンからそのスニペット機能が進化して便利になっているので、その使い方をメモ。※このエントリーで使用しているバージョンはFlashDevelop-3.0.0-RC2です。
基本的な使い方
以前のエントリー、FlashDevelopの使い方 (2)スニペット機能をご覧ください。設定方法、使い方などの基本的な部分はほとんど変わっていません。
進化したスニペット機能
RC2からのスニペット機能では、複数の値をあらかじめ設定しておくことが可能になりました。この情報はもちろん、バージョンアップのたびにいつも翻訳してくれている馬鹿全さんのFlashDevelop更新情報記事で知りました。また、flabakaさんのところでもfor文を使った解説記事があって参考になりました。素敵情報に感謝!
というわけで、馬鹿全さんとflabakaさんのところでfor文での新しいスニペット機能の使い方はばっちりマスターできるので、ここでは個人的に今のところ一番便利だと思っているTweenerのaddTween()メソッドでのやり方を書いていこうと思います。とりあえずaddTween()メソッド用のスニペットを「addTween」の名前でこんな感じで登録しておいて、
addTween($(EntryPoint)object$(ExitPoint), { alpha:$$(alpha=1,0), delay:$$(delay=0), time:$$(time=1), transition:$$(transition="linear","easeInExpo","easeOutExpo") })
下記の画像くらいのタイミングでCtrl+Bでスニペットを呼び出してEnterキーを押すと、
RC2のバージョンから使えるようになった、あらかじめ設定した複数の値を選択できるダイアログボックスが表示されます。
左側が初期状態です。各項目はTabキーとShift+Tabキーで上下移動することができます。また、あらかじめ設定してある値は上下の矢印キーで選択*1することができます。それぞれの項目で値を選択または入力してEnterキーもしくはOKボタンで確定すると、以下のようなコードが挿入されます。
Tweener.addTween(object, { alpha:1, delay:0, time:1, transition:"easeInExpo" })
上記は変数「object」が選択(反転)された状態でコードが挿入されるので、そのままそこに対象となるオブジェクト名を入力します。このオブジェクト名の入力をダイアログボックスで行わなかったのは、こちらのやり方であれば補完が有効になるからです。ただし、この指定した部分を選択(反転)状態にすることは現状1つしかできません。*2 このあとは通常通りにプロパティを必要に応じて修正して、最後に文末にセミコロンを入力して自動コード整形*3をしています。個人的にこのaddTween()メソッドが便利だと思うのは、以下の不便だと思っていた点が緩和されるからです。
- addTween()メソッドは、設定するプロパティが多くなりがちな気がする。
- しかもオブジェクトで指定するから補完が効かなくて、プロパティ名が思い出せない。
- さらにtransitionプロパティの値が、補完が効かない上に、文字列指定で、単語が長めで、種類が多くて覚えられない。→後述の「transitionプロパティのコード補完は、Equationsクラスをインポートして定数を使う」で解決しました!
3つめが特に重要ですw FlashDevelopの素晴らしい補完に慣れきったヘタレな私には、なんの候補リストも表示されず色も変わらない文字列を入力するのはすごく不安なので、addTween()メソッドで自分がよく使うプロパティ*4とよく使うtransitionプロパティの値をあらかじめ設定しておいて、スニペットで全部自動入力してから、そのあとに手動で使わないものを消すという手順にしています。
今のところ自分にとってはこういう使い方が便利だな〜と思うんですが、「こんな使い方もあるよ!」とか「こうした方がいいよ!」とかあればぜひ教えてください。また今回のスニペット機能に限らず、FlashDevelopに関する素敵情報は何でも知りたいのでよろしければ教えてもらえるとすごく嬉しいです。
transitionプロパティのコード補完は、Equationsクラスをインポートして定数を使う
(2009.04.22 16:33 追記) この方法はコメント欄にてikekouさんがアドバイスしてくださいました。素敵情報に感謝!
transitionプロパティの文字列指定の部分には、ちゃんと定数が用意されていました。目から鱗。これにより、その定数が用意されている「Equations」(方程式?)というクラス名の最初の4文字くらいだけ覚えておけば、transitionプロパティの値は全部コード補完が出来るようになります。最高です。以下はFlashDevelopでのその手順の例です。
Tweener.addTween(object, { alpha:1, delay:0, time:1, transition:equa
まず、Equationsクラスをインポートするために、「equa」と4文字くらい打ちます。で、使用可能なクラスのリストを表示するためにCtrl+Alt+Spaceキーを押します。クラスリストの中から「caurina.transitions.Equations」を選択してEnterキーを押します。
import caurina.transitions.Equations; // インポート文が自動で生成される! Tweener.addTween(object, { alpha:1, delay:0, time:1, transition:Equations // クラス名が補完される!
これでtransitionプロパティの値の定数があるEquationsクラスがインポートされ、transitionプロパティの値をコード補完する準備が整ったので、上記に続けて「.」(ドット)を入力して、transitionプロパティの一覧を表示させます。で、この一覧の中から好きな値を選択します。
こちらのTransition Typesにも載っている文字列指定での値の名称と、定数指定での値の名称は基本的に同じですが、初期値に相当する文字列「"linear"」は、定数では「Equations.easeNone」になるようです。
参考ページ
今回の件を調べるに当たって以下のページがとても参考になりました。素敵情報に感謝。
- 馬鹿全 - FlashDevelop 3.0.0 RC2 リリースされてた
- flabaka - FlashDevelopのSnippet(for編)
- Tweener Documentation and Language Reference
まとめ
このシリーズのエントリーは、「FlashDevelopの使い方」のまとめにまとめてあります。
*1:残念ながらインクリメンタルサーチにはなっていません。
*2:以前のスニペット機能のエントリーでも書きましたが、jEditやTextMateではこの選択状態での移動を複数設定することができてものすごく便利なので、ぜひFlashDevelopでも採用してほしい機能ですね。(以前作者の方が「将来的には追加予定」的なことをおっしゃっていたのですごく期待してます。)
*3:私は今のところコード整形をする方法をセミコロン入力しか知りません。例えば決められたショートカットキーでその行のコード整形をできたりするとすごく便利なんですが、もしそういった方法があってご存じの方がいらっしゃいましたら教えてもらえると嬉しいです。
*4:上記以外にも、scaleX, scaleY, rotation, onComplete, Specialプロパティなど思いつく限り設定してあります。
- 27 http://www.google.co.jp/search?q=スニペット機能&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox-a&as_qdr=y15
- 26 http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla:ja:official&hs=jQj&q=wonderfl&btnG=検索&lr=lang_ja
- 13 http://search.yahoo.co.jp/search?p=flashdevelop+使い方&ei=UTF-8&fr=top_ga1_sa&x=wrt
- 12 http://www.google.co.jp/search?hl=ja&q=flashdevelop+スニペット&btnG=検索&lr=
- 12 http://www.google.co.jp/search?q=flashdevelop+スニペット&lr=lang_ja&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&client=firefox-a
- 11 http://reader.livedoor.com/reader/
- 10 http://search.yahoo.co.jp/search?p=tweener+使い方&search_x=1&tid=top_ga1_sa&ei=UTF-8&yuragi=off&pstart=1&fr=top_ga1_sa&b=11&qrw=0
- 10 http://www.google.co.jp/search?sourceid=chrome&ie=UTF-8&q=flashdevelop+単語 選択
- 10 http://www.google.co.jp/search?sourceid=navclient&hl=ja&ie=UTF-8&rlz=1T4GZEZ_jaJP260JP260&q=flashdevelop+actionscript
- 8 http://www.google.co.jp/search?hl=ja&q=スニペット機能&sourceid=navclient-ff&rlz=1B3GGGL_jaJP232JP233&ie=UTF-8








