Technote

<!– more –>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。

第八回は、画像を重ね合わせる手法を整理します。

■今回サンプルの完成イメージ

画像をクリックしながら、左右に動かしたり、勢い良く左右に動かしたりすると、CoverFlowのように加速効果付きでスクロールします。

前回は画像を掴んで勢い良く放したり、掴みながらスクロールさせるといった動作を、マウスイベントを取得して実装してみました。今回は、画像を重ね合わせていきます。

■ファイルの準備

プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。

• reflector.as3proj
• reflector.mxml
• ImageReflector.as
• TransformUtil.as
• CoverFlowLayout.as
• RepeaterHBox.as

新しいファイルCoverFlowLayoutとRepeaterBoxの2つが追加になっています。追加になったファイルは後ほど詳しく解説します。

reflector.as3projをダブルクリックすると、FlashDevelopが実行されます。

■選択している画像以外の表示幅を狭くする

画像を重ね合わせるときに、まずはじめに考える方法は、標記のとおりだと思います。そこで、今回はoverrlapWidthをいう変数を使って、重ね合わせの幅を定義してみました。実際に適用する箇所は、

• measure() – 実際に描画する縦横サイズを返す処理
• transformImage() – 画像を斜めに描画する処理
• animateTransform() – アニメーション描画を開始する処理

です。画像は左右の両側から重なるイメージなので、重なり幅が20とすると、実際の画像幅は倍の40必要となりますので、画像の幅として*2をしています。

measuredWidth = overrlapWidth*2;

このように修正してプレビューしてみるとどうなるでしょうか？

残念ながら赤丸で囲ったように、選択画像より右側の並びが変になってしまいます。

■要素のZ順序を入れ替える

Window操作のプログラミングをした経験のある人なら、この状況を標記のとおり解決できる、と推測するでしょう。そしてもちろんFlexでも同様の機能を持っています。

そこで以下のようにmxmlのonCreationComplete()を変更してみました。

private function onCreationComplete(event:FlexEvent):void {
    if(event.currentTarget.repeaterIndex >= (dp.length - 1)){
        // 最初の重なりは一番右の項目が下になるよう（逆順）にする。
        for(var i:int = 0; i < (dp.length/2); i++) {
            h_frame.swapChildren(imageReflector[i], imageReflector[dp.length-i-1]);
        }
        h_frame.invalidateProperties();
        // 重なりスワップ終了
        initScroll();
    }
}

このように修正してプレビューしてみるとどうなるでしょうか？

うわぁーーーーーー、なぜか表示する順番が変になってしまいました。なぜこうなるのでしょうか？

■Flexはオープンソースだから、ソースを読めばいいじゃないか

Flexの各クラスはcoreでない限りソースが提供されています。ともかくh_frameのクラスであるHBOXの描画について調べてみましょう。

frameworks/source/mx/containers/HBox.asにはほとんど処理はないので、親クラスであるBoxのコードを見ます。

override protected function updateDisplayList(unscaledWidth:Number,
                                                  unscaledHeight:Number):void
{
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    layoutObject.updateDisplayList(unscaledWidth, unscaledHeight);
}

描画のコードはこのようになっていて、実際の描画はどうもlayoutObjectがやっているようです。そこでmx.containers.utilityClasses.BoxLayoutのupdateDisplayListを見てみると、

for (i = 0; i < n; i++)
{
    obj = IUIComponent(target.getChildAt(i));
    top = (h - obj.height) * verticalAlign + paddingTop;
    obj.move(Math.floor(left), Math.floor(top));
    if (obj.includeInLayout)
        left += obj.width + gap;
}

のように、getChildAtを使って、子要素の順番（=Z順）に表示位置の計算をしているのがわかります。swapChildrenは子要素の順番を変更することで描画の重なりを変更しようとしているので、2番目のプレビューのようになるのはやもえません。ではどのようにHBoxに定義された順番（レイアウト計算順序）とZ順（表示順序）を別々に管理し、描画したら良いのでしょうか？

■Repeaterを使うHBox、RepeaterHBoxを作る

つまりこういうことです。HBox内に要素を並べるとき、通常は要素の並びを持っている訳ではありませんが、HBox内でRepeaterを使っているなら、要素の順番はRepeater自信が保持しています。

そこでRepeaterHBoxを作ることにします。今回は簡単に要素の並びを取得できるように、mxml上のパラメータrepeaterArray=“{imageReflector}"でクラス変数に配列を渡すことにしました。

<local:RepeaterHBox id="h_frame" height="400" width="500" backgroundColor="0x000000" paddingLeft="200" paddingRight="200" verticalScrollPolicy="off" scroll="onScroll(event)" mouseUp="onMouseUp(event)" mouseDown="onMouseDown(event)" mouseMove="onMouseMove(event)" mouseOut="onMouseOut(event)"  initialize="onInitialize()" repeaterArray="{imageReflector}" >
    <Repeater id="rp" dataProvider="{dp}">
        <local:ImageReflector id="imageReflector" asinId="{rp.currentItem}" creationComplete="onCreationComplete(event)" click="changeSelect(event)" />
    </Repeater>
</local:RepeaterHBox>

RepeaterHBoxの特徴は、HBoxを継承しHBoxである機能はもちろん、前節で問題となっていた、BoxLayoutを変更することです。RepeaterHBoxでは独自のレイアウト処理CoverFlowLayoutを使っています。CoverFlowLayoutはBoxLayoutの一部を変更したいだけなので、BoxLayoutのソースコードを丸ごとコピーしてきて、前記のコードを下記 のように修正します。

for (i = 0; i < n; i++)
{
    obj = IUIComponent(target.repeaterArray[i]);
    top = (h - obj.height) * verticalAlign + paddingTop;
    obj.move(Math.floor(left), Math.floor(top));
    if (obj.includeInLayout)
        left += obj.width + gap;
}

表示順を変更しても、リピーターの定義（target.repeaterArray）順に要素の表示位置（レイアウト）を計算すれば問題は解決します。

■mx_internal::で内部要素にアクセスする

RepeaterHBoxクラスでは見慣れない記述mx_internalがあると思います。

mx_internal::layoutObject = new CoverFlowLayout();

実はこのmx_internalは、Flexの内部クラスに直接アクセスするために、重要な記述です。今回のように標準コンポーネントをカスタマイズする場合、通常のメソッドオーバーライドだけでは、どうしてもうまくカスタマイズできない場合があります。例えば、coreの中の変数だったり、以下のように内部名前空間に変数が定義されている場合です。

/**
 *  @private
 */
mx_internal var layoutObject:BoxLayout = new BoxLayout();

これはBoxクラスで、レイアウトオブジェクトを定義している例ですが、要はprivate変数として扱っているものなのです。ただこれだと独自レイアウトによる描画ができないので、上記のようにmx_internal::layoutObjectと書くことで、内部スコープの変数値を上書きできるのです。

■クロスドメインの注意事項

amazonの画像サーバのcrossdomain.xmlは画像サーバ内からだけしか参照できないので、ここで作成したSWFファイルをサーバにアップロードしてもうまく表示できません。

本記事上の完成イメージは、PHPサイトでプロキシしています。

まずPHPのコードは過去記事を参考にしてください。

■次回予告

次回で最終回、最後にamazonからタイトル、著者を取り出して表示する機能を実装してみます。

<!– more –>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。

第七回は、マウスイベントを取得する手順を整理します。

■今回サンプルの完成イメージ

画像をクリックしながら、左右に動かしたり、勢い良く左右に動かしたりすると、CoverFlowのように加速効果付きでスクロールします。

前回はスクロール処理とアニメーション効果を付けてみました。今回は画像を掴んで勢い良く放したり、掴みながらスクロールさせるといった動作を、マウスイベントを取得して変更していきます。今回は、mxmlファイルのみ修正していきます。

■ファイルの準備

プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。

• reflector.as3proj
• reflector.mxml
• ImageReflector.as
• TransformUtil.as

前回から修正したのは、reflector.mxmlだけです。

reflector.as3projをダブルクリックすると、FlashDevelopが実行されます。

■マウスの基本動作はクリックと移動

Flexではマウスを操作した結果は、マウスイベントをフックすると知ることができます。例えばmxmlで以下のように書いてみます。

<HBox id="h_frame" height="400" width="500" backgroundColor="0x000000" 
      paddingLeft="200" paddingRight="200" verticalScrollPolicy="off" scroll="onScroll(event)" 
      mouseUp="onMouseUp(event)" mouseDown="onMouseDown(event)" mouseMove="onMouseMove(event)"  
      mouseOut="onMouseOut(event)" initialize="onInitialize()" >

このコードが今回修正したCoverFlow表示領域のボックス記述です。それぞれ

1. mouseUp : マウスのボタンが押された後、放されたときに発生する

2. mouseDown : マウスとボタンが押されたときに発生する

3. mouseMove : マウスポインターが動いたときに発生する

4. mouseOut : マウスポインターがHBOXから出たときに発生する

のような意味を持っています。

■マウスがどこで操作されたのか調べる

マウスイベントは表示領域で取得しますが、対象のHBOXには様々な子コントロールが含まれています。本サンプルで使っているのは

• カバー写真
• 横スクロールバー

です。マウスイベント(MouseEvent)がどこで発生したのかを調べるには、MouseEvent#targetで判断できますが、mxmlで定義されているクラス名を判断材 料にする場合は、MouseEvent#target.parentを使います。これは、target自体は表示リストノードであるため、

if(event.target.parent is HScrollBar)

のように記述する必要があります。ちょっと面倒ですね。。

■マウスが領域外に出たときを考慮する

マウス操作を実装していて、忘れがちになるのが、この処理です。全画面表示で操作しているようなケースでは無縁ですが、実際はドラッグしながらウィンドウの外でマウスを放した、というケースは珍しくありません。このときイベントを拾っておかないと、再度マウスが領域に戻ったとき、マウスが押されたままと間違って判断してしまうことがあります。マウスが領域から出たら、一旦マウスを放した、という仮定が必要となります。マウスが領域外に出たかどうかはステージオブジェクトのマウスイベントをフックします。これは前述のMouseOutでHBOXから出たのか判断していますが、勢い良くマウスを動かして、一気にFlashPlayerから出てしまうと、MouseOutが呼ばれないことがあります。

そのため、FlashPlayerからマウスが出た場合も想定して、

h_frame.stage.addEventListener(Event.MOUSE_LEAVE, onMouseOut);

のように、記述します。

似たイベントで、MouseEvent.ROLL_OUTがありますが、これはHTMLの:hoverのような実装をする際に使うイベントです。つまり対象のコントロールの上に来た・離れたというのを制御します。

■クロスドメインの注意事項

amazonの画像サーバのcrossdomain.xmlは画像サーバ内からだけしか参照できないので、ここで作成したSWFファイルをサーバにアップロードしてもうまく表示できません。

本記事上の完成イメージは、PHPサイトでプロキシしています。

まずPHPのコードは過去記事を参考にしてください。

■次回予告

画像間の隙間をなくして、ホンモノのように画像が重なって表示されている効果を実装してみます。

<!– more –>「Webアプリケーションテスト手法」という本を共著しました。「SimpleTestによるPHPのテスト」というお題で、PHPの自動テストについて書きました。実はこの本は紆余曲折あったのですが、まさに”無事”という言葉が当てはまります。何はともあれ拍手！パチパチ　:cheers:

で、SimpleTestとはxUnit系のテスティングフレームワークなんで。assertEqual()とかあるわけですが、本家のWebサイトや自身のテストコードが

assertEqual($hoge, 'Hello');

みたいになってるんで、本もそのとおりにしています。

本当なら、

assertEqual('Hello', $hoge);

とassertEqual(期待値, 戻り値);みたいに書きたいわけですが、まぁ大きな問題ではないです。

と、思ってCakePHPのテストコードを見てみたら、やっぱりassertEqual(戻り値, 期待値);のほうになってるんですね。SimpleTestベースに使っているから、そのままなんだと思います。

PHPUnitは、assertEqual(期待値, 戻り値);になってますね。テストコード見ると、SimpleTestベースなのかPHPUnitベースなのかわかるという副作用もありますが。。。。

<!– more –>現在、オブジェクト倶楽部のメールマガジンで連載している「Flexで体験するリッチクライアント」を補足するTechnoteです。

第六回は、アニメーション効果を付けて表示する手順を整理します。

■今回サンプルの完成イメージ

画像をクリックしたり、スクロールバーを動かすと、CoverFlowのようにアニメーションで動きます。

前回は画像を台形加工して表示するサンプルを紹介しました。今回はその画像を左右にスクロールさせながら、アニメーションで選択・非選択の表示を変更していきます。今回も、カスタムコントロール(ImageReflector.as)とmxmlファイルの両方を修正していきます。

■ファイルの準備

プロジェクトファイルをダウンロードして、任意のディレクトリで解凍します。

• reflector.as3proj
• reflector.mxml
• ImageReflector.as
• TransformUtil.as

reflector.as3projをダブルクリックすると、FlashDevelopが実行されます。

■アニメーション効果を簡単にするAnimateProperty

Flashでは、AnimatePropertyを使うと簡単にアニメーション効果を実現することができます。AnimatePropertyには、指定したプロパティの値を開始値から終了値まで変化させる機能があります。つまり位置を移動させたり、定型的に図形を変形したい場合など、特定のプロパティを非同期に操作することができるのです。

refrector.mxmlでは以下のように記述しています。

// アニメーションを開始する
private function startAnimation(to:int):void
{
    if(_animation != null && _animation.isPlaying) {
        _animation.end();
    }
    _animation = new AnimateProperty(h_frame);
    _animation.property = "horizontalScrollPosition";
    _animation.toValue = to;
    _animation.target = h_frame;
    _animation.duration = Math.max(300,Math.abs(to - h_frame.horizontalScrollPosition));
    _animation.easingFunction = mx.effects.easing.Quadratic.easeOut;
    _animation.play();
}

_animation.propertyに指定したhorizontalScrollPositionという変数を、toの値まで変化させると記述することができます。しかもアニメーションはhorizontalScrollPositionが１ずつ加算されていくといった単純なものでなく、easingFunctionに値を指定することで増減する値をコントロールできます。easingFunctionにはFlexが用意してくれているものがあり、イーズアウト・イーズインと呼ばれています。これは変数の変化が加速なのか減速なのかといった指定ができ、イーズアウトはtoValueに近づくと値の変化が少なくなり減速感を与え、イーズインは変化が大きくなっていくことで加速感を与えることができます。AnimatePropertyクラスの値を設定したら、play()関数を呼ぶだけで勝手にhorizontalScrollPositionの値が変化していきます。

このアニメーション効果は、表示領域を滑らかにスクロールするために使用しています。具体的には、

• 最初に中央の画像を選択状態にして、センターに表示する
• 画像がクリックされたら、その位置を選択状態にして、センターに表示する

という機能で使っています。

// 表示領域をスクロールする
private function scrollItem(pos:int):int
{
    var scrollValue:int = 0;
    // 選択された画像の左端位置に、選択画像の幅/2を足して、表示領域の半分の幅戻ると、センターになる。
    scrollValue = imageReflector[pos].x + (imageReflector[pos].getChildAt(0).width / 2) - (h_frame.width / 2);
    startAnimation(scrollValue);
    return pos;
}

■最初に中央の画像を選択状態にして、センターに表示する

各ImageReflectorが描画されたときに呼ばれるonCreationCompleteでは、これまで最後のImageReflectorが描画されたときに、中央の選択画像を決定していました。今度のサンプルでは、initScroll()関数を呼ぶように変更しています。initScroll()関数は、中央の画像を選択状態にして、そこまでスクロールさせる役割があるのですが、中央までスクロールさせるのには、そこまでの位置が確定していなければなりません。つまり、画像の横幅が固定であれば良いのですが、CoverFlowの中で縦横サイズがバラバラな写真に対応しようと思うと、描画が完了していなければ、位置を取得することができません。そこで、

for(var i:int = 0; i < dp.length; i++) {
    if(!imageReflector[i].isCompleted()) {
        return callLater(initScroll); // まだ描画が終わってないので、遅延呼び出しする。
    }
}
selectedIndex = scrollItem(dp.length / 2);

と書くことで、全てのImageReflectorが描画完了するまで、待つことができます。callLaterはイベントキューの最後に、再度関数呼び出しを入れることで後で処理をさせることができます。そして、すべて描画できていたらscrollItemを呼んで、中央までスクロールしてやれば良いのです。

ImageReflectorの中でisCompleted関数は、

public function isCompleted():Boolean {
    if (!_invalidatedReflection) return false

    return true;
}

と書くことで、invalidatedReflectionフラグがonになるまで待ってくれます。invalidatedReflectionフラグは、amazonより画像を呼び出して、実際の描画が開始されたときにonとなるので、この時点で画像サイズなどが決定しています。

■選択画像が変わったら、パラパラ漫画のように

選択画像がカーソルで前後にしか変化しないのであれば、中央位置と左右の画像だけを変化させれば良いのですが、マウスで２つ先、３つ先が選択されるケースを想定すると、現在位置から選択位置までパラパラ漫画のように画像をめくっていく必要があります。まず移動先が右なのか、左なのか判断して、どちら方向へスクロールを展開するか決めてやります。

public function set selectedIndex(value:Number):void
{
    if(!initFlag) {
        if(_selectedIndex > value) {
            leftScroll(_selectedIndex, value);
        }
        if(_selectedIndex < value) {
            rightScroll(_selectedIndex, value);
        }
    }
}

後は実際にleftScrollやrightScroll関数で処理させます。例えば、右方法へアニメーションするには、

// 右方向へアニメーションスクロールする
private function rightScroll(from:int, to:int):void
{
    var oldSelectIndex:int = from;
    for(var i:int = from+1; i <= to; i++) {
        _selectedIndex = i;
        imageReflector[0].selectedIndex = i;
        imageReflector[oldSelectIndex].doAnimate(i - oldSelectIndex);
        imageReflector[i].doAnimate(i-i);
        oldSelectIndex = i;
    }
}

のように記述し、選択位置を変更（imageReflector[0].selectedIndex = i;）し、１つ前の選択画像（oldSelectIndex）を台形へ変形させ、新しい選択画像を台形から正面表示画像へ変形させます。変形させるときもアニメーション効果を付けるため、ImageReflectorクラスにdoAnimate()関数を用意しました。

doAnimate()関数では、mxmlの横スクロールと同じように、AnimatePropertyを使っています。ただし台形を正面表示に変更したりといった、ある変数の値を単純に変更するだけではうまくいかないケースは多々あります。そこで、ここでのギミックは、animateTransformというプロパティのsetter/getterをfunctionで定義してしまうというものです。これは前回（第５回）でもふれましたが、クラスのメンバ変数を直接操作させないための手段である一方で、トゥーイングで変化する値を受け取って処理させることもできるのです。具体的に、animateTransformの値が変化するときには、以下の関数が呼ばれます。

public function set animateTransform(value:Number):void
{
    _animateTransform = value;

    if (repeaterIndex == selectedIndex) {
        measuredWidth = value;
    }
    else {
        measuredWidth = tiltingWidth;
    }
    invalidateSize();
    transformImage(value);

}

選択画像なら、横幅をアニメーション値にし、そうでなければ台形変化後の幅にしてしまいます。後は、前回作成したtransformImage()関数へ値をアニメーション変化値を渡します。

■実際に描画する

transformImage関数を修正して、アニメーション描画を行います。

前回までと違うこところは、

var percent:Number = (contentWidth - value) / (contentWidth - tiltingWidth);

のように、どのくらいの割合で値が変化しているか%値であらわし、それをtiltingMarginにかけて変化させています。

実際、個別の描画シーンで、

x1 = xm;
x2 = value;
y1 = (maxImageSize - contentHeight) + tiltingMargin * percent;
y2 = (maxImageSize - contentHeight) + tiltingMargin * 2 * percent;
y3 = (maxImageSize - contentHeight) + contentHeight - tiltingMargin * 2 * percent;
y4 = (maxImageSize - contentHeight) + contentHeight - tiltingMargin * percent;
y5 = y3 + _reflectionShapeBitmap.height - tiltingMargin * 2 * percent;
y6 = y4 + _reflectionShapeBitmap.height - tiltingMargin;

のように、%値をかけてy1からy6までの高さを制御しています。横幅は関数の引数（アニメーション値）をそのまま使用します。 選択画像の場合は、どちらからめくったかという効果を出すために、前回の選択画像位置を_prevSelectに覚えておき、左から中央、右から中央といった分岐をします。

■クロスドメインの注意事項

前回も書いたのですが、amazonの画像サーバのcrossdomain.xmlは画像サーバ内からだけしか参照できないので、ここで作成したSWFファイルをサーバにアップロードしてもうまく表示できません。

本記事上の完成イメージは、PHPサイトでプロキシしています。

まずPHPのコードは過去記事を参考にしてください。

■次回予告

マウスイベントを取得して、画像をめくる方法を増やしてみたいと思います。

<!– more –>投げていたパッチが全て取り込まれていた版になったけど、fixtureのcreateとdropにはまだ対応していないようだ。

オレオレ解決策はみつけたのだけれど、コードがかなり汚くなるし、思想的に微妙なので、これではパッチにはできない・・・

でもあのチケット見つからないので、自動create機能は将来のバージョンアップ項目になったのかしらね？