1

私は画像ギャラリーを作成しています。画面の下部に、マウスが動いたときに左右にスムーズにスライドするサムネイルをたくさん表示したいと考えています。

コンテナー (Tiles) のカスタム クラスとサムネイル (ImageIcon) のカスタム クラスを使用しています。

ユーザーがギャラリーを選択できる ComboBox があります。ユーザーがギャラリーを選択すると、次のコードが実行され、サムネイルが再読み込みされます。ここでの問題は、アイコンが横並びではなく重なり合って表示されることです。また、カテゴリを切り替えると古いものは削除されますが (最初の for ループを参照)、削除されません。また、アイコンが適切にアニメーション化されていません。アニメーション コードも以下に示します。現在、移動するアイコンは 1 つだけです。アイコンは左右に順番に移動し、最後のいくつかのアイコンが画面の端に当たったときに停止する必要があるため、横のどこかで「失われる」ことはありません。

ギャラリー ローダー コード: 

public function loadCategory(xml:XML = null) {
    if (xml != null) {
        dp = new DataProvider(xml);
        for (var k:int = 0; k < this.numChildren; k++) {
            this.removeChild(this.getChildAt(k));
        }

        var black:DropShadowFilter = new DropShadowFilter(0, 45, 0x000000, 1, 3, 3, 1, 1);
        var white:DropShadowFilter = new DropShadowFilter(0, 45, 0xFFFFFF, 1, 2, 2, 1, 1);

        for (var i:int = 0; i < dp.length; i++) {
            var imgicon:ImageIcon = new ImageIcon();
            imgicon.addEventListener(MouseEvent.CLICK, showImage);
            imgicon.width = 100;
            imgicon.x = (i * (imgicon.width + 20));
            imgicon.path = dp.getItemAt(i).data;
            imgicon.loadIcon();
            imgicon.filters = [black, white];

            stage.addEventListener(Event.ENTER_FRAME, moveIcon);
            this.addChild(imgicon);
        }
    } else {
        //Failed to load XML
    }
}

アイコン アニメーション コード:

public function moveIcon(e:Event){
    var speed = 0;
    speed = Math.floor(Math.abs(this.mouseX/20));

    var image = this.getChildAt(k);

    var imagebox = image.width + 20;

    var edge:Number = (800/2);

    if (this.mouseX > 0) {
        for (var k:int = 0; k < this.numChildren; k++) {
            if (image.x - (imagebox/2) + speed < -edge + (k * imagebox)) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x -= Math.floor(speed);
        }
    } else {
        for (var j = this.numChildren; j >= 0; j--) {
            if (image.x + speed > edge - ((imagebox * j) )) {
                speed = 0;
            }

            image.rotationY = Math.floor(image.x/20);
            image.x += Math.floor(speed);
        }
    }
}
4

1 に答える 1

2

私が見たように、あなたには 3 つの質問があります (「私のコードの何が問題なのですか?」ではなく、これらを質問の最後に置くべきでした)。プログラミングの主な原則の 1 つは、問題を小さな部分に分割することです。

  1. ImageIcon横に並べるにはどうしたらいいですか？
  2. ImageIconカテゴリを切り替えるときに、古い , を削除するにはどうすればよいですか?
  3. ImageIconマウスの位置に基づいて、いずれかの側に制約を付けて、すべての を一緒にアニメーション化するにはどうすればよいですか?

質問1

何も問題はありませんが、設定しているときに実際に設定されていることを確認してimgicon.xくださいimgicon.width。

質問2

numChildrenandに依存する代わりにgetChildAt()、currentIcons 配列メンバー変数を作成し、新しい を作成するときに、ImageIconそれを配列にプッシュするだけです。次に、それらを削除する場合は、次のように配列をループできます。

for each (var cIcon:ImageIcon in currentIcons) 
{
    cIcon.removeEventListener(MouseEvent.CLICK, showImage);
    removeChild(cIcon);
}
currentIcons = [];

ご覧のとおり、追加したリスナーもすべて削除しています。これはベスト プラクティスです。すべてのアイコンを削除したら、配列をクリアします。

質問 3

あなたのコードにいくつか問題があることがわかります。まず、セットされている行imageはkまだセットされていません！

ここでもcurrentIcons配列を使用できますが、おそらくfor each inループを使用することはできません。通常のforループだけの方が良いでしょう。

このコードの moveIcon メソッドについてはまだテストしていませんが、アイデアはうまくいくはずです。ただし、微調整する必要がある場合があります。

public function moveIcon(e:Event):void 
{
    var speed:Number = Math.floor(this.mouseX / 20); // Removed "abs".
    var imageBox:Number = currentIcons[0].width;
    var edge:Number = 800 / 2;

    for (var i:int = 0; i < currentIcons.length; i++) 
    {
        var image:ImageIcon = currentIcons[i] as ImageIcon;
        image.x += speed;
        image.rotationY = Math.floor(image.x / 20);

        var min:int = -edge + (i * imagebox);
        if (image.x < min) image.x = min;

        var max:int = edge - (imagebox * i);
        if (image.x > max) image.x = max;
    }
}

EDIT* 申し訳ありませんが、最後の if ステートメントではより大きなものになるはずでしたが、偶然よりも小さくなりました。

于 2010-11-16T20:12:22.580 に答える