1

外部画像をロードして、それをズームおよびパンする方法を見つけました。（メイン画像）

メイン画像の特定の場所に情報アイコンを実装したいのですが、画像はズームおよびパンできるため、これらのアイコンは以前の位置にとどまる必要があります。

理解を深めるために、下の画像を参照してください。アイコンがある場所はすべて製品であり、アイコンをクリックすると、外部の .SWF が製品情報とともにロードされます。完璧な世界では、アイコンはズームせず、パンするだけです。

私の基本的な理解は、各アイコンは個別のムービークリップでなければならないということです。それぞれに独自のリスナーのセットがあります。メイン画像がパンおよびズームされているときに、アイコンを関連する製品にとどめる方法がわかりません。

どんな助けやアドバイスも大歓迎です。

( http://www.marketingfanatics.co.za/images/example.jpg )

package  {

import flash.display.MovieClip;
import fl.motion.MatrixTransformer;
import flash.display.Sprite;
import flash.display.Shape;
import flash.display.Bitmap;
import flash.display.Loader;
import flash.net.URLRequest;
import flash.events.ProgressEvent;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
import flash.geom.Matrix;
import flash.geom.Point;
import flash.events.KeyboardEvent;
import flash.ui.Mouse;

public class Main extends MovieClip {


    public function Main() {

        mcIn.visible = false;
        mcOut.visible = false;
        infoBox.wordWrap = true;
        infoBox.mouseEnabled = false;

        var board:Sprite = new Sprite();
        addChild(board);

        var boardWidth:int = 690;
        var boardHeight:int = 489;

        board.x = 0.0;
        board.y = 0.0;


        board.graphics.beginFill(0xDDDDDD);
        board.graphics.drawRect(0, 0, boardWidth, boardHeight);
        board.graphics.endFill();

        var spImage:Sprite = new Sprite();
        board.addChild(spImage);

        var boardMask:Shape = new Shape();
        boardMask.graphics.beginFill(0xDDDDDD);
        boardMask.graphics.drawRect(0, 0, boardWidth, boardHeight);
        boardMask.graphics.endFill();
        board.addChild(boardMask);
        spImage.mask = boardMask;

        var scaleFactor:Number = 0.8;
        var minScale:Number = 0.25;
        var maxScale:Number = 2.0;
        var image:Bitmap;

        var loader:Loader = new Loader();
        loader.load(new URLRequest("source_material/Irrigation_1195X847.jpg"));
        loader.contentLoaderInfo.addEventListener(Event.COMPLETE, initPic);
        loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, updateInfo);
        infoBox.text = "Loading the Image";

        function updateInfo(e:ProgressEvent):void {
            infoBox.text = "Loading: " + String(Math.floor(e.bytesLoaded/1024)) + " KB of " + String(Math.floor(e.bytesTotal/1024)) + " KB.";
        }

        function initPic(e:Event):void {
            infoBox.text = "";
            infoBox.visible = false;
            image = Bitmap(loader.content);
            minScale = boardWidth/image.width;
            image.scaleX = minScale;
            image.scaleY = minScale;

            spImage.addChild(image);
            spImage.addChild(mcIn);
            spImage.addChild(mcOut);

            spImage.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
            stage.addEventListener(MouseEvent.MOUSE_UP, stopDragging);

            loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, initPic);
            loader.contentLoaderInfo.removeEventListener(ProgressEvent.PROGRESS, updateInfo);
            loader = null;

            board.filters = [ new DropShadowFilter() ];
            spImage.addEventListener(MouseEvent.CLICK, zoom);
        }

        function startDragging(mev:MouseEvent):void {
            spImage.startDrag();
        }

        function stopDragging(mev:MouseEvent):void {
            spImage.stopDrag();
        }

        function zoom(mev:MouseEvent):void {
            if ((!mev.shiftKey) && (!mev.ctrlKey)) {
                return;
            }

            if ((mev.shiftKey) && (mev.ctrlKey)) {
                return;
            }

            var mat:Matrix;

            var externalCenter:Point = new Point(spImage.mouseX, spImage.mouseY);
            var internalCenter:Point = new Point(image.mouseX, image.mouseY);

            if (mev.shiftKey) {
                image.scaleX = Math.max(scaleFactor * image.scaleX, minScale);
                image.scaleY = Math.max(scaleFactor * image.scaleY, minScale);

            }

            if (mev.ctrlKey) {
                image.scaleX = Math.min(1 / scaleFactor * image.scaleX, maxScale);
                image.scaleY = Math.min(1 / scaleFactor * image.scaleY, maxScale);

            }

            mat = image.transform.matrix.clone();

            MatrixTransformer.matchInternalPointWithExternal(mat, internalCenter, externalCenter);

            image.transform.matrix = mat;
        }

        stage.addEventListener(KeyboardEvent.KEY_DOWN, keyHandler);
        stage.addEventListener(KeyboardEvent.KEY_UP, keyHandler);

        function keyHandler(ke:KeyboardEvent):void {
            mcIn.x = spImage.mouseX;
            mcIn.y = spImage.mouseY;

            mcOut.x = spImage.mouseX;
            mcOut.y = spImage.mouseY;

            mcIn.visible = ke.ctrlKey;
            mcOut.visible = ke.shiftKey;

            if (ke.ctrlKey || ke.shiftKey) {
                Mouse.hide(); } else {
                    Mouse.show();
            }
        }
    }
}

}

4

2 に答える 2

0

あなたの質問: Actionscript 3 で複数の画像/ムービークリップをズームおよびパンすることは可能ですか?

そのサイズの画像をパンしたりズームしたりできます...画像のサイズが原因でフレームが緩むので、必要なことを正確に行う緑色の靴下BlitMaskを使用することをお勧めします。使用方法の例があります。

    http://www.greensock.com/blitmask/

また、複数の画像をスクロールして画像をコンテナーに入れる場合は、movieClip でムービークリップをスクロールするか、スケールを変更するか、深度 Z 位置を変更するか、または何を持っているかを変更します。

于 2013-04-17T14:21:41.300 に答える
0

SpriteLets say objectのメイン画像の上に説明を追加します。メイン画像がステージに追加されたら、次のことを行います。setChildIndex(descriptionObject,numChildren-1);これにより、説明がすべての上にあることが保証されます。

于 2013-04-17T11:35:43.707 に答える