世間はProgression4の話題でもちきりですが、いまだProgression3の話題を書こうとしている流行にうとい男、正宗です。
以前紹介した「Progressionでコンポーネントスタイルにクラスを連携させる」の続きです。
今回から進めて全3回の予定でやってみます。
以前紹介したやり方は「まずコンポーネントスタイルで作ってみて、ちょっとずつクラスを混ぜ込んでみよう」というものでしたが、今回からは「いかにスクリプトを書かずにすむようにスクリプトを書くか」です。
一見、矛盾してそうなコンセプトですが、前回よりも研究結果がだいぶ洗練されてきたので、スクリプトアレルギーの方も、よりコピペだけでまともに動かせるようにはなっていったかなと思います(^^;
(続きを読む...)
こんにちは。徳田です。
【Flasherが始めるAE】第2弾は、AfterEffects(以下AE) のCS3から搭載されたという「パペットツール」です。 下記のアニメーションを作るのも本当にとっても簡単。ちょwwwこれさえあればアノ案件とか超役に立ったのに…！と身悶えすること必至。
こんにちは。徳田です。
バージョンアップごとにそれぞれ連携しやすくなったという、AfterEffectsとFlashの２製品を使って、なんぞ面白い事はできないかと試行錯誤してゆくコーナーです。
とはいえ、AfterEffectsは数年前にかじっただけで、全体的に記憶の彼方…。改めて触って感じたことやつまづいたところを覚え書きがてら順にメモしていきます。3日継続もままならない私だと全然説得力ないですがシリーズ予定。
大変お待たせしました! 2009年4月4日に行われたFPS lite vol.1「CS4キラキラかわいいアニメーション術」の寝かせすぎたフォローアップです。
当日来ていただいた方はほんとスイマセン…！
通常win使いの私が、急遽初めてMacを会場で使うことになり、私の操作はもう見てられない位不細工でしたので、要点が伝わりにくかったのではないかと心苦しく思っております。
以下に補足を添えて再度紹介させていただいていますので、皆さんの制作の参考になれば幸いです。
CSS Nite in OSAKA, Vol.16に使用したサンプルとスライドです。
こちらからダウンロードして下さい。
CSS_Nite_OSAKA_vol16_masamune_sample.zip
サンプルはご本人の学習目的での使用においてご自由に使って頂いて結構ですが、むやみな転載や再配布はお控え下さい。
皆様、CSS Nite in OSAKA, Vol.16 「これから始めるFlashActionScriptツボのツボ」にお越し頂きありがとうございました。ActionScriptをこれから始めてみようというきっかけになれば幸いです。
セミナーでは「とにかくこう書いてみれば動くので始めてみるきっかけになれば」という部分のみに焦点を当てて紹介しておりますので、なるべくかみ砕いて幾つかの部分であえて簡略的な表現をこころがけています。
はじめて触るぶんには必要としないであろう知識ですが、これから本格的に学習される方に向けて出来るだけ詳細な情報を補足という形でここにまとめさせていただきます。
(続きを読む...)
CSS Nite in OSAKA, Vol.16
6月9日、18:30～20:30
アップルストア心斎橋 2F
CSS Nite in OSAKA, Vol.16に出演します。
詳細はバナーリンクか、こちらのページでご確認下さい。
CSS Nite in OSAKA, Vol.16
僕のしゃべる内容としては、「これから始めるFlashActionScriptツボのツボ」と題しまして、今までActionScriptに触れたことがない方を対象として「こう書けばすぐ動く」スクリプトをご紹介したいと思います。
僕は今までも大阪でFPSというイベントを行ったりしてきましたが、FPSはもともとFlash好きが集まる前提で開催されますが今回CSSNiteというWEB標準技術を追求する方々の前でお話しさせて頂くと言うこともあり、皆さんが全員Flashに精通されてる方ばかりでもないと思い、FlashActionScriptのかなり初歩的なところの紹介になるかと思います。
ActionScriptを駆使すれば高度なモーションやWEBアプリケーションの作成が可能になることは既に皆さんもご存じですが、今回は「WEBサイトに必要なActionScript」に絞ってボタンインタラクション（ボタンを押したときどう動かすか）だったり、デザインやモーションに必要なXY座標とWidth（幅）Height（高さ）のコントロールについてズバリそのもののScriptをご提供します。
もしかしたら既にActionScriptを学ばれてる方にとっては退屈かもしれませんが、これから挑戦したいという方にとっては、先ずは書いて動かして覚えられる良い機会になれば幸いです。
そのほか、AS2までを学ばれてる方にとって最低これだけは覚えておけばいいAS3との違いなどもまとめる予定です。こちらは以前このブログにまとめておこうと思ってほったらかしにしていた部分なので今回が蔵出しになります。
それでは当日お会いできることを楽しみに準備を進めていきます。お時間のある方はどうぞお越し下さい。
（もちろん懇親会も出る予定です。というかセミナーは出なくても飲み会には必ず顔を出す派）
こんにちは。最近引っ越しましたが取引先にまだ挨拶を済ませていない正宗です。前回に引き続きProgressionの話題をしたいと思います。
Progressionではスクリプトを一切使わない「コンポーネントスタイル」やタイムラインスクリプト派の「タイムラインスタイル」、クラスでわしわし書きたい人向けの「クラススタイル」など制作者のスタイルにあわせたとても柔軟な開発スタイルが用意されていますが、今回はその中でも「コンポーネントスタイル」と「クラススタイル」を連携させた開発手法についてまとめてみました。
こんにちは。
正宗です。
今日はProgressionのCommandのお話をしたいと思います。
毎度ながら僕個人の備忘録となっているので、誰も役に立たない情報ですが僕が便利だと感じるならそれでいいんです。
Flashサイト制作の上でもはや手放せないフレームワーク、その名も「Progression」
Scene管理も秀逸ですが僕がProgressionを使ってて何よりも惚れ惚れするのがCommandがよく練られていてとっても使いやすいところなのです。
「こういうこともCommandで出来ないかな？」とリファレンスを読み読みしてると必ず上手いやり方が用意されていて、どんどん使っていくうちにいわゆる「Progression的な」コードの書き方に身が染まっていって毎日新しい発見があってコードを書くのがとても楽しいです。
（もちろん、Progression的な書き方を強制されるわけでは無くって、我流の書き方も完全に許容されているところもこのフレームワークを好きな理由の一つです）
ということで、今まで勉強してきたCommandの使い方の途中段階までをまとめておきたいと思います。
まずCommandがどこで実行されるかですが、一番簡単なのは
SceneObjectでしたら_onLoad、_onInit、_onGoto、_onUnloadの関数の中に直接addCommandしておく方法。
CastSpriteやCastMovieClipなどは_onCastAddedや_onCastRemovedなんかに直接addCommandしておきます。
このへんのシーン管理やイベント管理もとっても面白いんでいろいろとまとめたいところなんですが、今日のまとめはあくまでCommandだけにとどめておきたいと思います。
こんなところでしょうか。
使い方はこんな感じ。
private function test():void { var list:SerialList = new SerialList(); list.addCommand( new LoadURL(new URLRequest("hoge.xml")),//XMLの読み込みを開始 function():void { trace(new XML(this.latestData));//読み込んだXMLを出力 }, [ new DoTweener(front, { alpha:0, time:1 } ),//前面のMCを1秒かけて透明に new DoTweener(back, { alpha:1, time:1 } )//背面のMCも同時に1秒かけて不透明に ] ); list.execute();//SerialListを実行 }
最初にSerialListで実行させているので、XMLの読み込みを待って完了したら自動的に次の処理に移ります。
その後配列で登録してあるのでクロスフェードの処理はParallelListとして同時に実行されることになります。
そうめんもそうなんですが、もうaddEventListenerだらけで「えっと、ここが完了したら次こうなって…」と悩まされなくて済むようになりました。
こんだけイケてるCommandなのですから、シーンの読み込みの際に外部swfを取得してそこからクラスを参照するやり方も何か用意されているのではないかと思って調べてたら、やっぱりありました。
LoadObjectといって、CastLoaderを監視するコマンドがありました。
さすがtaka:nium先生！もう俺は一生Progressionについていくぜー！
package { import flash.display.Sprite; import jp.progression.casts.*; import jp.progression.commands.*; import jp.progression.commands.display.LoadObject; import jp.progression.events.*; import jp.progression.loader.*; import jp.progression.*; import jp.progression.scenes.*; import flash.net.URLRequest; import flash.system.LoaderContext; import flash.system.ApplicationDomain; public class Test extends CastSprite { private var _loader:CastLoader; private var _context:LoaderContext; public function Test( initObject:Object = null ) { super( initObject ); _loader = new CastLoader(); _context = new LoaderContext(); _context.applicationDomain = ApplicationDomain.currentDomain; } protected override function _onCastAdded():void { addCommand( new DoTweener(this, { alpha:0 } ), new LoadObject(_loader, new URLRequest("hoge.swf"), { context:_context, onCastLoadComplete:function():void { var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain; var myClass:Class = _myDomain.getDefinition("onigiri") as Class; var mc:Sprite = new myClass(); addChild(mc); } }), new DoTweener(this, { alpha:1, time:1 } ) ); } } }
実際にはLoadObjectのonCastLoadCompleteに登録しなくっても、そのままシリアルリストに次の処理を書いていってもよさげ。
だけどここで少しばかり問題が。
上に挙げたサンプルはCastなにがしで処理を行っているので問題ないんだけれど、SceneObjectでこれをやろうとするとCommandの参照の問題が出てくるような気がする。
例えばある特定のScene以下からは"hoge.swf"を読み込んでその階層以下からのSceneでは"hoge.swf"を使い回したい場合
package { import jp.progression.casts.*; import jp.progression.commands.*; import jp.progression.events.*; import jp.progression.loader.*; import jp.progression.*; import jp.progression.scenes.*; import jp.progression.commands.display.LoadObject; import flash.net.URLRequest; import flash.system.LoaderContext; import flash.system.ApplicationDomain; import HogePage; public class HogeScene extends SceneObject { private var _page:HogePage; private var _singleton:Singleton; private var _loader:CastLoader; private var _context:LoaderContext; public function HogeScene( name:String = null, initObject:Object = null ) { super( name, initObject ); title = "hogehogeシーン"; _loader = new CastLoader(); _context = new LoaderContext(); _context.applicationDomain = ApplicationDomain.currentDomain; } private function init():void { var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain; _page = new HogePage(myDomain); removeAllScenes(); var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain); fugaHelp.name = "help"; addScene(fugaHelp); } protected override function _onLoad():void { addCommand( new LoadObject(_loader, new URLRequest("dressshop.swf"), { context:_context }), init, new AddChild(progression.container, _page) ); } protected override function _onInit():void { addCommand( ); } protected override function _onGoto():void { addCommand( ); } protected override function _onUnload():void { addCommand( new RemoveChild(progression.container, _page), function():void { _loader.unload(); } ); } } }
こんなふうに書くと動かなくなる。
何故これがだめなのかは
package { import jp.progression.casts.*; import jp.progression.commands.*; import jp.progression.events.*; import jp.progression.loader.*; import jp.progression.*; import jp.progression.scenes.*; import jp.progression.commands.display.LoadObject; import flash.net.URLRequest; import flash.system.LoaderContext; import flash.system.ApplicationDomain; import HogePage; public class HogeScene extends SceneObject { private var _page:HogePage; private var _singleton:Singleton; private var _loader:CastLoader; private var _context:LoaderContext; public function HogeScene( name:String = null, initObject:Object = null ) { super( name, initObject ); title = "hogehogeシーン"; _loader = new CastLoader(); _context = new LoaderContext(); _context.applicationDomain = ApplicationDomain.currentDomain; } private function init():void { var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain; _page = new HogePage(myDomain); removeAllScenes(); var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain); fugaHelp.name = "help"; addScene(fugaHelp); trace(this, _page); } protected override function _onLoad():void { addCommand( new LoadObject(_loader, new URLRequest("dressshop.swf"), { context:_context }), init, new Trace(this), new Trace(_page), new AddChild(progression.container, _page) ); } protected override function _onInit():void { addCommand( ); } protected override function _onGoto():void { addCommand( ); } protected override function _onUnload():void { addCommand( new RemoveChild(progression.container, _page), function():void { _loader.unload(); } ); } } }
こう書いてみるとなんとなくわかるんだけれど、じゃあどうすればいいかというと僕はこうしました。
package { import jp.progression.casts.*; import jp.progression.commands.*; import jp.progression.events.*; import jp.progression.loader.*; import jp.progression.*; import jp.progression.scenes.*; import jp.progression.commands.display.LoadObject; import flash.net.URLRequest; import flash.system.LoaderContext; import flash.system.ApplicationDomain; import HogePage; public class HogeScene extends SceneObject { private var _page:HogePage; private var _singleton:Singleton; private var _loader:CastLoader; private var _context:LoaderContext; public function HogeScene( name:String = null, initObject:Object = null ) { super( name, initObject ); title = "hogehogeシーン"; _loader = new CastLoader(); _context = new LoaderContext(); _context.applicationDomain = ApplicationDomain.currentDomain; _page = new HogePage(myDomain); } private function init():void { var myDomain:ApplicationDomain = _loader.contentLoaderInfo.applicationDomain; //_page = new HogePage(myDomain); _page.myDomain; removeAllScenes(); var fugaHelp:DressHelpScene = new fugaHelpScene(myDomain); fugaHelp.name = "help"; addScene(fugaHelp); trace(this, _page); } protected override function _onLoad():void { addCommand( new LoadObject(_loader, new URLRequest("dressshop.swf"), { context:_context }), init, new Trace(this), new Trace(_page), new AddChild(progression.container, _page) ); } protected override function _onInit():void { addCommand( ); } protected override function _onGoto():void { addCommand( ); } protected override function _onUnload():void { addCommand( new RemoveChild(progression.container, _page), function():void { _loader.unload(); } ); } } public class HogePage extends CastSprite { private var _myDomain:ApplicationDomain; public function set myDomain(value:ApplicationDomain):void { _myDomain = value; } } }
他にもどうしても_onLoadのときに動的にクラスを生成しなければならなかったりした場合はもうちょっと違う書き方をするんだけど、僕の書いたどれもが根本的にCommandで処理できる流れになってなくて、ものすごい気持ち悪いです。
ひとえに僕がCommand内のthisの参照をよくわかっていないからだとは思いますが、もうちょっとCmmandだけで完結できる方法を勉強してみたいと思います。
目指せ！ProgressionのCommandマスター！
Adobeデベロッパーセンターで野中さんによるActionScript 3.0におけるパフォーマンス向上のヒント が掲載されています。 いろいろとかなり有用なテクニックをまとめられていますので、いつもながらかなり勉強になります。
