参加者

約２０人でした。正確な数は受付表を確認すればわかります。（今会社にある）
そして一番の収穫は、ほぼ全員がPC持参したこと。 もともと自分の手を動かすハンズオン形式を取っていたので、PC持参できる人が集まったと言えばそうですが、この形式は今後も続けられそうだと感じました。
また、ざっと見渡したところ未経験者の方がかなり多く見受けられました。詳細はアンケート集計しなければわかりませんが、参加者の構成に合わせた企画を実施していくつもりです。

通信、インフラ

コンセントの数、ギリギリでした。もう１つ２つタップを用意する必要があったと反省。
さらに、この日のためにWiMAXの試用版を用意して社内LANを経由しないインターネットアクセスを提供したのですが、通信できない人が続出。事前準備の至らなさ、WiMAXルータの性能の限界など、色々と要因はありそうに思います。これも反省点。

Flex最初の一歩

Flexの未経験者向けハンズオンセミナー。
とりあえず時間が足りなかった。初めての講師という大役を任されたT-2の経験不足もあるけど、そもそも30分で意味のある内容を詰め込むことに無理があったか。結果としてはT-2が時間延長してでも丁寧に教えてくれたので、未経験者の人にとっては価値あるものになったんじゃないかと思う。結果はアンケート集計してのお楽しみ。

Flex/AIRのお仕事事情

hirossyさん、lecheさんに登壇いただく。
まずは、登壇といっても前で話すスペースが無かった、移動やモニターの切り替えが頻繁に起こって不便、という準備・企画不足は反省点。 内容はFlex/AIRにある程度取り組んでいる人、もしくは他の技術でバリバリやっている人にとってはかなり興味深い話が聞けたと思います。 お二人ともありがとうございました。

課題としては完全な未経験者の人やFlashでデザインはやったけどFlexも触ってみよう、という人にとっては、まだよくわからない話だったかもしれません。 この辺は他の企画にも共通する問題で、ターゲットを明確にすればするほど、それに合わない人をどうするかということを考えていこうと思います。

ライブコーディング

先述の２コーナーで登壇した３名（hirossyさん、lecheさん、T-2）が、その場で明かされた仕様のFlex/AIRアプリケーションを即興で作る、という作らされるほうにしたら鬼のような企画。しかもhirossyさんはコーディング経過をプロジェクターで公開。まさにライブコーディング。いきなりお願いして、よく引き受けてくれたと思います。

結果は見事にhirossyさんが完成させたという、企画者としては胸を撫で下ろす展開！面白かったのはhirossyさんの情報検索術がそのまま見れたこと。ネット上の色んな情報ソースが頭の中で整理されていれば、一つ一つの技術の詳細な中身までは憶えておく必要がないということを見事に体現してくれました。hirossyさんは懇親会に来れなかったのですが、来てたらヒーロー扱い間違いないというほど、この時の話題がよく出ました。

最後に

上記に色々と出てきた反省点・改善点は次回、次々回と回を重ねながら修正していきたいと思います。 言い忘れてましたけど、今後は毎月開催していくつもりです。１２月は皆忙しいと聞いていたのですが、少人数型の企画に変更してでも開催します。よろしければぜひ＾＾

つーわけで、京都でこれからFlex/AIRを覚えたいって方はぜひ参加してください。 うちの会社で行います。

Flex勉強会第92回@京都 - Flex User Group

前半は比較的初級者向けだけど、ライブコーディングはバリバリとこなしてる人にも参加してもらいたいですね。 集まった人のレベルに合わせてできるように、いくつかの準備はしておこうと思ってますけど。

もちろん興味のあるところだけ参加してもらって結構ですよ。

Eclipse 3.2.2、Eclipse 3.3 または Eclipse 3.4 上でのみサポートされています。

とのこと。 それならってことでEclipse3.4のAll-in-oneパッケージをダウンロードしたものの、なぜかインストールに失敗する。 どうも同様の現象は多数報告されているようだ。

Tipset » Eclipse 3.4.2にFlex Builder Plug-inを入れる

ここを参考にうまくいった手順を残しておくとする。

環境： WindowsXP / Flex Builder3.0.2

1. Eclipse Packages | Eclipse Packagesから Eclipse IDE for Java EE Developersをダウンロードし適当な場所に解凍（eclipseというフォルダが作成される）。ちなみに日本語化は念のため最後に行う。

2. Adobe - Flex 3から体験版としてFlex Builder Plug-inをダウンロード（バージョンは3.0.2）

3. Flex Builder Pluginをインストールし、途中でEclipseの場所を聞かれるので上記のeclipseフォルダを指定。正常に完了したら次へ。（うまくいかないときは「Eclipseのconfigurationフォルダが必要です。」みたいなメッセージが表示される。）

4. eclipseフォルダ内のeclipse.exeを実行し、左のプロジェクト・エクスプローラー上で「New」→「Project」としてFlex Builderの項目が存在することを確認する。確認できたらEclipse終了。

5. NTTデータグループ・オープンソーススクエア - nttdatagroup-oss-square Wiki - nttdatagroup-oss-square - SourceForge.JP からNLpackja-eclipse-jee-ganymede-SR2-blancofw.zipをダウンロードし、2と同じ場所で解凍。

6. 再度Eclipseを起動し日本語化されていたら完了。

どうも色んなプラグインが最初から入っていると失敗しやすいようなので、日本語化も最後に行った。Tomcatなど必要なプラグインは別途インストールする必要があるが、とりあえずこれで成功した。

Flex Builder “Gumbo” is Being Renamed Flash Builder | Ryan Stewart - Rich Internet Application Mountaineer

Flex Builderという名前をFlash Builderに改める予定とのこと。

僕がなぜFlexとFlashの区別がつけられなかったかというと、それはFlashの文化を知らずにFlex Builderを触ったから。 Flex BuilderはFlex SDKを使ったアプリケーションを手軽に構築できるが、Flex SDKを使わないFlashアプリケーションも作成できる。でもFlex Builderと言うからには、これを使って作ったアプリケーションは全てFlexじゃないの？なんて思ってた。

そこが違った。

Flex Builderを使ってもFlex SDKを使わなければそれは単なるFlashアプリケーションなのだ。 じゃあ自分の作ったアプリケーションがどれほどFlex SDKに依存しているのかは、それまでFlashの経験がない自分には区別が難しい。 さすがにMXMLとか使ってたら、ああこれはFlexだと思うが、AcstionScriptのみで作成したアプリケーションが内部的にFlex SDKで提供されているクラスを参照している場合なんかもあるのだろう。

ここから先は知識を増やして憶えていくしかないのだろうけど、今回の名前変更で最初の誤解をする人が減るのはいいことだと思う。

ということでよろしくお願いしますｗ

Adobe Flex Builder Standard 3.0 日本語版 Windows/Macintosh版

やってることは前回までのエントリーに加えて桜を斜め上から順番に表示しているだけ。 内部的にはかなりムチャやってて、実用的にしようと思ったらあと3倍くらいの時間がかかるでしょう。

ちゃんと本当に使えるライブラリに仕上げて5月30日の京都でのFlex勉強会で報告するつもりです。

MaskEffect - ActionScript 3.0 言語およびコンポーネントリファレンス

どうやらターゲットコンポーネントに対して、文字通りマスクとなる矩形を表示して部分的に隠し、そのマスクを時間の経過とともに移動したり拡大/縮小したりして様々なエフェクトを実現する、というものだった。

後日、いろいろ格闘して↑は少し違うことに気づいた。「矩形で隠す」のではなく、「矩形以外を隠す」なのだ。 つまり、のぞき穴からのぞき込んでいる状態だ。

実装するのは大きくわけると以下の３つになるようだ。

1. マスクとして使用される Sape オブジェクトを作成するメソッド
2. マスクの拡大/縮小率の From, To の指定
3. マスクの移動元/移動先の指定

読んでみたがよく分からない。 こういうときは似たサンプルを探す。

ってことでほぼ同じ処理（というかもっと高級な処理）を実現している mx.effects.WipeDown クラスのソースコードを見て作った。

MaskSample1Effect

package
{
    import mx.effects.IEffectInstance;
    import mx.effects.MaskEffect;

    public class MaskSample1Effect extends MaskEffect
    {

        public function MaskSample1Effect(target:Object=null)
        {
            super(target);
            instanceClass = MaskSample1EffectInstance;
        }

        override protected function initInstance(inst:IEffectInstance):void{
            super.initInstance(inst);

            MaskSample1EffectInstance(inst).createMaskFunction = MaskSample1EffectInstance(inst).createMask;
        }
    }
}

MaskSample1EffectInstance

package
{

    import flash.display.DisplayObject;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.geom.Rectangle;

    import mx.core.FlexShape;
    import mx.effects.effectClasses.MaskEffectInstance;

    public class MaskSample1EffectInstance extends MaskEffectInstance
    {
        private var sx:Number;
        private var sy:Number;

        public function MaskSample1EffectInstance(target:Object)
        {
            super(target);
        }

        override protected function initMaskEffect():void{

            super.initMaskEffect();

            xFrom = this.sx;
            yFrom = this.sy;
            xTo = -this.sx;
            yTo = -this.sy;
        }

        public function createMask(targ:Object, bounds:Rectangle):Shape{
            var newMask:Shape = new FlexShape();
            var angle:Number = Math.atan2(bounds.height, bounds.width);
            var cos:Number = Math.cos(angle);
            var sin:Number = Math.sin(angle);
            var targetWidth:Number = bounds.width / cos;
            var targetHeight:Number = cos * bounds.height + sin * bounds.width;

            var g:Graphics = newMask.graphics;
            g.beginFill(0xFFFF00);
            g.drawRect(0, 0, targetWidth, targetHeight);
            g.endFill();
            newMask.rotation = angle * 180 / Math.PI;

            sx = sin * sin * bounds.width;
            sy = - sin * cos * bounds.width;

            return newMask;
        }

        override public function finishEffect():void{
            super.finishEffect();

            DisplayObject(target).visible = false;
        }
    }
}

ほとんど WipeDown クラスからコード持ってきて、余計な部分や今の理解に必要のない部分を消去した。 そして、矩形を斜めにして右上から消えていくようにした。

MaskSample1Effect クラスは何もしていない。作っただけ。

MaskSample1EffectInstance クラスでは以下の２つのことをしている。

1. initMaskEffect メソッドでマスクの移動元と移動先の (x, y) 座標をセットする。
2. finishEffect メソッドでエフェクト終了後にオブジェクトを見えなくする。

ポイントは以下の部分だけ。

xFrom = (マスク移動元のx座標)
yFrom = (マスク移動元のy座標)
xTo = (マスク移動先のx座標)
yTo = (マスク移動先のy座標)

マスクの移動元と、移動先の (x, y) 座標を指定するだけで勝手に動いてくれる。 その他はマスクを斜めに向けたり、斜めのマスクが全体をスッポリと覆えるように大きさを調整したりしただけ。

できた。

文字の消え方がおかしいことを除けば今はこれくらいでいい。 厳密には消える対象のオブジェクトが回転とか拡大・縮小されてもちゃんと動作するようにしなければならない。 （WipeDown はそうなってた。） けど、今はそこまでやる段階ではないからいいっしょ。

まず、要求定義。

最終目標

• 桜の花びらが舞いながらオブジェクトがフワーッと消えていくようなエフェクト

うん、めっちゃ難しそう＼(＾o＾)／

もう少しハードルを下げる。

第２目標

• オブジェクトが端から徐々に消えていく。消えていくときの境界線に桜の花びらが表示される

このくらいか。 この要件を満たすために必要な要素を、自分の実現可能なパーツに分解しよう。 これは何もソフトウェア開発に限らず、あらゆる問題解決に有効なアプローチだ。

1. オブジェクトを端から徐々に消す
2. 桜の花びらを一か所に表示する
3. 画像を線上に均等に並べて表示する（2と組み合わせれば桜を線状に並べて表示できる）

細かいところをあげたらもう少し色々ありそうだけど、このくらいでよし。

さて、2はたぶん問題無い。 画像に(x, y)座標を指定して addChild してやればいいのだろう。

3は数学的アプローチ。 直線状の座標を均等に分割する点を計算してやれば2と組み合わせればできるだろう。 中学で習った1次関数の応用、もしくは高校で習うベクトルの問題に落としこめるので、たぶんできる。

問題は1だ。 これは今の自分ではできない。 これについて調査すればすべての問題が解決できるはず。

実はこれについては似たようなものを見たことがある。 いや、というか見たことがあるから、これならできると思って要求定義をこのようにしたと言ってもいい。 mx.effects.WipeDown というエフェクトクラスがあるのだ。 これはオブジェクトを上から下へスーッと描画する。

消していくのと描画するのとでは、動作としては逆だが部分的に表示し、部分的に隠すという意味ではどちらも同じだ。 このWipeDownについて調査することから始めた。

調査となれば、まずはAdobeのドキュメント。 Adobeは相当Flex/Flashに期待をかけているのか非常にドキュメントが充実している。日本語への直訳がわかりにくい、という欠点はあるけど、結果的にAdobeのドキュメントを調べることで問題解決することが経験的にも多い。

WipeDown - ActionScript 3.0 言語およびコンポーネントリファレンス

さて、ここで mx.effects.WipeDown のリファレンスを見て気づいたこと。それは

1. mx.effects.MaskEffect を継承している
2. mx.effects.WipeDown が独自に設定しているプロパティ、メソッドは無く全て MaskEffect からの継承

どうやら MaskEffect がオブジェクトの一部を Mask （隠す）するのに必要なインターフェースを提供しているようだ。 じゃあこいつを使えば一発解決かも？

ということで次にすべきことは MaskEffect を継承したエフェクトを作成すること。

進め、どんどん。

答えは簡単。

インスタンスクラスで createTween メソッドを実行するときに開始値, 終了値を指定するところに配列を指定してやればいい。

createTween(this, [開始値1, 開始値2, ...], [終了値1, 終了値2, ...]);

前回のサンプルでrotation と同時に scaleX , scaleY も変化するアニメーションに修正してみた。

TestEffect.as

package
{
    import mx.effects.Effect;
    import mx.effects.IEffectInstance;

    public class TestEffect extends Effect
    {
        public function TestEffect(target:Object=null)
        {
            super(target);
            instanceClass= TestEffectInstance;
        }

        override public function getAffectedProperties():Array{
            return ["rotation"];
        }

        override protected function initInstance(inst:IEffectInstance):void{
            super.initInstance(inst);
            TestEffectInstance(inst).angleFrom = 0;
            TestEffectInstance(inst).angleTo = 360;
            TestEffectInstance(inst).scaleFrom = 2;
            TestEffectInstance(inst).scaleTo = 1;
        }
    }
}

TestEffectInstance.as

package
{
    import mx.effects.effectClasses.TweenEffectInstance;

    public class TestEffectInstance extends TweenEffectInstance
    {
        public var angleFrom:Number;
        public var angleTo:Number;
        public var scaleFrom:Number;
        public var scaleTo:Number;

        public function TestEffectInstance(target:Object)
        {
            super(target);
        }

        override public function play():void {
            super.play();
            createTween(this, [angleFrom, scaleFrom], [angleTo, scaleTo], duration);
        }

        override public function onTweenUpdate(val:Object):void {
            target.rotation = val[0];
            target.scaleX = target.scaleY = val[1];
        }
    }
}

TestEffectInstance に scaleX , scaleY の変化を設定するプロパティ scaleFrom と scaleTo を追加。 そして createTween 実行時に以下のように二つの値のFromとToを配列にして実行。

createTween(this, [angleFrom, scaleFrom], [angleTo, scaleTo], duration);

onTweenUpdate メソッドでは引数valに配列が入るため、val[0], val[1]として使用する。 createTween を呼び出したときの配列と同じ順序で値が格納されているようだ。

ということで前回と全く同じMXMLで以下のようにアニメーションが変更された。

トゥイーンエフェクトについて

ファクトリクラス

TestEffect.as

package
{
    import mx.effects.IEffectInstance;
    import mx.effects.TweenEffect;

    public class TestEffect extends TweenEffect
    {
        public function TestEffect(target:Object=null)
        {
            super(target);
            instanceClass= TestEffectInstance;
        }

        override public function getAffectedProperties():Array{
            return ["rotation"];
        }

        override protected function initInstance(inst:IEffectInstance):void{
            super.initInstance(inst);
            TestEffectInstance(inst).angleFrom = 0;
            TestEffectInstance(inst).angleTo = 360;
        }
    }
}

ファクトリクラスを作成するときに最低限必要な4つのルール

1. コンストラクタの実装

   コンストラクタ内では必ずsuper()メソッドを実行すること。 引数に受け取ったターゲットオブジェクトも渡す。

2. instanceClassの設定

   通常はコンストラクタ内で実行する。インスタンスクラスとしてどのクラスを使うかの指定。 Classタイプのオブジェクトを指定するとのこと。（例のようにクラス名をそのまま代入するイメージ）

3. initInstanceメソッドのオーバーライド

   必ず最初にsuper.initInstance()メソッドを実行する。 引数として受け取ったインスタンスクラスをそのまま渡す。

   また、その他、事前に準備したい自分のエフェクト固有の値などはここでセットする。 例ではインスタンスクラスに回転の開始角度と終了角度を代入している。

4. getAffectedPropertiesメソッドのオーバーライド

   エフェクトのターゲットとなるオブジェクトに対して、どのパラメータを変更するかを指定する。 しかし、実際にはこのメソッドはなくても動いた。 どういうときに使われるかは不明だが、念のため指定しておいたほうがいいのだろう。 （何かの拍子にエラーが発生したりするのかもしれないため。） 今回はrotationプロパティを変更するため"rotation"という文字列を配列形式で返している。

インスタンスクラス

TestEffectInstance.as

package
{
    import mx.effects.Tween;
    import mx.effects.effectClasses.TweenEffectInstance;

    public class TestEffectInstance extends TweenEffectInstance
    {
        public var angleFrom:Number;
        public var angleTo:Number;

        public function TestEffectInstance(target:Object)
        {
            super(target);
        }

        override public function play():void {
            super.play();
            createTween(this, angleFrom, angleTo, duration);
        }

        override public function onTweenUpdate(val:Object):void {
            target.rotation = val;
        }

        override public function onTweenEnd(val:Object):void {
            super.onTweenEnd(val);
        }
    }
}

ファクトリクラスを作成するときに最低限必要な2+1つのルール

1. コンストラクタの実装

   受け取ったターゲットオブジェクトを引数にsuper()メソッドを実行するだけでいいみたい。

2. playメソッドのオーバーライド

   エフェクト開始時に呼び出されるメソッド。今回はTweenEffectInstanceを継承しているため、createTweenメソッドを実行する必要がある。createTweenメソッドの引数は通常以下のようになる。

   createTween(this, 開始値, 終了値 [, アニメーションの継続時間(ミリ秒), アニメーション実行の最小回数(/秒) ] )
   

   慣れないうちは createTween(this, 開始値, 終了値) でいいと思う。

3. TweenEffectInstance.onTweenUpdateメソッドのオーバーライド

   こちらはTweenEffectを継承したエフェクトを作成しているときのみの制約。 アニメーション更新のタイミングごとに呼び出されるので、ターゲットオブジェクトのプロパティを更新する。 今回の例ではrotationを更新すればよい。 これで回転処理のアニメーションが実行される。

また、TweenEffectInstanceにはonTweenEnd()メソッドのようにアニメーション終了後に呼び出されるメソッドもあり、後処理などが必要な場合は適時オーバーライドすればよい。

ここまでできれば後は以下のようにMXMLファイル内で上記で作ったTestEffectを指定してやればよい。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="400">
    <mx:Button x="150" y="150" label="回転します" width="100" height="100" mouseDownEffect="{TestEffect}"/>
</mx:Application>

できた。 思ってたよりも簡単だ。