如何让此 actionscript 3 Flash 图片库显示图像、缩放和定位图像、使其可点击并转到 URL?

How do I get this actionscript 3 Flash Picture Gallery to display an image, scale and position it, make it clickable and go to URL?

我正在 Flash Builder 中构建,大约 1 小时前才开始学习 actionscript;我似乎无法找到一个很好的资源来快速学习这个主题。 Prime objective,应该是一个简单的任务:让这个东西显示图像。它似乎正确地加载了图像(它显然弄清楚了编码),并且编译得很好,但是当它加载到 firefox 中时我得到的只是一个空白的白色屏幕(Flash 已启用并且工作正常。)。有人能帮忙吗?在这里完成 n00b。我在 java、c#、c、html、php 等方面经验丰富,但完整 actionscript/flash n00b.

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.Bitmap;

    public class images extends Sprite
    {
        public function images()
        {
            drawIcon();
        }
        private var sp:Shape;

        [Embed(source="E:/Documents/Shapemakr/ebayPics/July29_TreeImagesForFBbuilding/IMG_3294.JPG")]
        private var contentIconClass:Class;
        private var contentIcon:Bitmap = new contentIconClass ();

        // ...

        private function drawIcon():void{
            sp.graphics.beginBitmapFill(contentIcon.bitmapData);
            sp.graphics.drawRect(20, 35, 13, 13);
            sp.graphics.endFill();
        }
    }
}

好的,这是我的新代码。似乎/应该/将其添加到 'movie',但我什么也看不到。似乎编译得很好(顺便说一句,这是一张 1600x1200 的图片。不确定编程中的 'small icon' 大小是否与它有关。)。

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;

    public class images extends MovieClip
    {
        public function images()
        {
            drawIcon();
            //var defaultImage:libraryImages = new libraryImages(469, 60);
            var myImage:Bitmap = contentIcon;
            addChild(myImage);
        }
        private var sp:Shape;

        [Embed(source="E:/Documents/Shapemakr/ebayPics/July29_TreeImagesForFBbuilding/IMG_3294.JPG")]
        private var contentIconClass:Class;
        private var contentIcon:Bitmap = new contentIconClass ();

        private function drawIcon():void{
            sp.graphics.beginBitmapFill(contentIcon.bitmapData);
            sp.graphics.drawRect(20, 35, 13, 13);
            sp.graphics.endFill();
        }
    }
}

编辑:感谢 badfeelings!将drawRect中的size参数改成图片大小后,就可以了!现在只需要缩小图片,从 URL 加载它,并使其可点击 URL。如果我能通过一些谷歌搜索来理解我现在所了解的基础知识,这似乎应该是可行的。

新代码:

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;

    public class images extends MovieClip
    {
        public function images()
        {
            /*
            drawIcon();
            //var defaultImage:libraryImages = new libraryImages(469, 60);
            var myImage:Bitmap = contentIcon;
            addChild(myImage);*/
            sp = new Shape(); //instantiate a new shape
            addChild(sp); //add it to the display so it can be seen
            drawIcon();
        }
        private var sp:Shape;

        [Embed(source="E:/Documents/Shapemakr/ebayPics/July29_TreeImagesForFBbuilding/IMG_3294.JPG")]
        private var contentIconClass:Class;
        private var contentIcon:Bitmap = new contentIconClass ();

        private function drawIcon():void{
            sp.graphics.beginBitmapFill(contentIcon.bitmapData);
            sp.graphics.drawRect(20, 35, 1600, 1200);
            sp.graphics.endFill();
        }
    }
}

编辑:哇,再次感谢!这段新代码正是我需要做的,现在我只需要弄清楚如何操纵加载器来改变大小和位置。 research/fiddling 应该可行,我确定!

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.events.*;
    import flash.net.*;
    import flash.display.*;

    public class images extends Sprite
    {

        public function images()
        {
            //to load an image, you can use the `Loader` class:
            var loader:Loader = new Loader();
            loader.load(new URLRequest("http://www.shapemakr.com/image/mturk/IMG_3282.JPG"));
            addChild(loader);

            //it's good practice though to listen for COMPLETE, IO ERROR, and SECURITY error events on the loader in case something goes wrong.

            //to listen for a click:
            loader.addEventListener(MouseEvent.CLICK, myClickHandler);
        }

        function myClickHandler(e:Event):void {
            navigateToURL(new URLRequest("http://www.adobe.com"), "_self");//do something, the image was clicked
        }

    }
}

编辑:弄清楚如何定位图片并缩放它。哇,这个 Loader class 让事情变得简单。现在我只需要调整它以以某种方式加载图片列表、它们的 x/ys 和它们的关联 url。 (无论如何,是的,我很讨厌把我所有的代码都放在这里,这样它可能会在未来帮助其他一些 n00b。没有什么比不完整的部分代码不起作用并且无法弄清楚如何由于一些 n00bness 让它工作。有一个工作示例开始对学习过程有很大帮​​助,因为可以对其进行调整以从那里理解 better/learn。)

package
{
    import flash.display.Sprite;
    import flash.display.Shape;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.events.*;
    import flash.net.*;
    import flash.display.*;

    public class images extends Sprite
    {

        public function images()
        {
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;
            //to load an image, you can use the `Loader` class:

            var loader:Loader = new Loader();
            loader.x = 50; loader.y=100; loader.scaleX=.3; loader.scaleY=.3;
            //loader.mask = rect;
            loader.load(new URLRequest("http://www.shapemakr.com/image/mturk/IMG_3282.JPG"));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

            addChild(loader);

            //it's good practice though to listen for COMPLETE, IO ERROR, and SECURITY error events on the loader in case something goes wrong.

            //to listen for a click:
            loader.addEventListener(MouseEvent.CLICK, myClickHandler);
        }

        function myClickHandler(e:Event):void {
            navigateToURL(new URLRequest("http://www.adobe.com"), "_self");//do something, the image was clicked
        }

        private function loaderComplete(e:Event):void {
            // now your image is fully loaded
            trace(e.target.content.width);
            // etc etc, whatever you need to do with your image prior to 
            // addressing it from elsewhere.
        }

    }
}

编辑:刚刚创建了一个函数,可以轻松加载 Img-url 列表及其关联的 GOTO url。还发现您不能在 action-script3 中重载函数,至少不能按照惯例重载,便便。我猜是轻微的不便。

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.*;

    import flashx.textLayout.formats.Float;

    public class images extends Sprite
    {

        public function images()
        {
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;

            loadClickImage(50,100,"http://www.shapemakr.com/image/mturk/IMG_3282.JPG","http://adobe.com");
            //loadClickScaleImage(50,100,.5,.5,"http://www.shapemakr.com/image/mturk/IMG_3282.JPG","http://adobe.com");
        }

        function loadClickImage(x:int,y:int,imgurl:String,gotourl:String):void 
        {
            loadClickScaleImage(x,y,1,1,imgurl,gotourl);
        }

        function loadClickScaleImage(x:int,y:int,scx:Number,scy:Number,imgurl:String,gotourl:String):void 
        {
            //to load an image, you can use the `Loader` class:
            var loader:Loader = new Loader();
            loader.x = x; loader.y=y; loader.scaleX=scx; loader.scaleY=scy; loader.name = gotourl;
            //loader.mask = rect;
            loader.load(new URLRequest(imgurl));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

            addChild(loader);

            //to listen for a click:
            loader.addEventListener(MouseEvent.CLICK, myClickHandler);  
        }


        function myClickHandler(e:Event):void {
            navigateToURL(new URLRequest(e.target.name), "_self");//do something, the image was clicked
        }

        function loaderComplete(e:Event):void {
            // now your image is fully loaded
            trace(e.target.content.width);
        }

    }
}

编辑:对于 shitz 和 giggles,这里是具有适当鼠标光标效果的可点击图片库的完整源代码。我创建了一个漂亮的 C# 程序来为定位和 URLs(所有 "LoadClickImage()" 代码)创建适当的 AS3 代码,使其看起来整洁有序。图片库看起来绝对棒极了!

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.*;
    import flash.ui.MouseCursor;
    import flash.ui.Mouse;

    public class images extends Sprite
    {
        var mouseIsDown:Boolean = false;

        public function images()
        {
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;

            loadClickImage(0,0,"http://www.shapemakr.com/image/fotor/IMG_3294.JPG","http://adobe.com");
            loadClickImage(260,0,"http://www.shapemakr.com/image/fotor/IMG_3295.JPG","http://adobe.com");
            loadClickImage(520,0,"http://www.shapemakr.com/image/fotor/IMG_3296.JPG","http://adobe.com");
            loadClickImage(0,197,"http://www.shapemakr.com/image/fotor/IMG_3297.JPG","http://adobe.com");
            loadClickImage(260,197,"http://www.shapemakr.com/image/fotor/IMG_3298.JPG","http://adobe.com");
            loadClickImage(520,197,"http://www.shapemakr.com/image/fotor/IMG_3299.JPG","http://adobe.com");
            loadClickImage(0,394,"http://www.shapemakr.com/image/fotor/IMG_3300.JPG","http://adobe.com");
            loadClickImage(260,394,"http://www.shapemakr.com/image/fotor/IMG_3301.JPG","http://adobe.com");
            loadClickImage(520,394,"http://www.shapemakr.com/image/fotor/IMG_3302.JPG","http://adobe.com");
            loadClickImage(0,591,"http://www.shapemakr.com/image/fotor/IMG_3303.JPG","http://adobe.com");
            loadClickImage(260,591,"http://www.shapemakr.com/image/fotor/IMG_3304.JPG","http://adobe.com");
            loadClickImage(520,591,"http://www.shapemakr.com/image/fotor/IMG_3305.JPG","http://adobe.com");
            loadClickImage(0,788,"http://www.shapemakr.com/image/fotor/IMG_3306.JPG","http://adobe.com");
        }

        function loadClickImage(x:int,y:int,imgurl:String,gotourl:String):void 
        {
            loadClickScaleImage(x,y,1,1,imgurl,gotourl);
        }

        function loadClickScaleImage(x:int,y:int,scx:Number,scy:Number,imgurl:String,gotourl:String):void 
        {
            //to load an image, you can use the `Loader` class:
            var loader:Loader = new Loader();
            loader.x = x; loader.y=y; loader.scaleX=scx; loader.scaleY=scy; loader.name = gotourl;
            //loader.mask = rect;
            loader.load(new URLRequest(imgurl));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

            addChild(loader);

            //to listen for a click:
            loader.addEventListener(MouseEvent.CLICK, myClickHandler);  
            loader.addEventListener(MouseEvent.MOUSE_OVER, changeCursor);
            loader.addEventListener(MouseEvent.MOUSE_OUT, resetCursor);
        }


        function myClickHandler(e:Event):void {
            navigateToURL(new URLRequest(e.target.name), "_self");//do something, the image was clicked
            //Mouse.cursor = MouseCursor.
        }

        private function changeCursor(e:MouseEvent)
        {
            Mouse.cursor = MouseCursor.BUTTON;
        }

        private function resetCursor(e:MouseEvent)
        {   
            Mouse.cursor = MouseCursor.ARROW;
        }

        function loaderComplete(e:Event):void {
            // now your image is fully loaded
        //  trace(e.target.content.width);
        }

    }
}

编辑:在鼠标悬停时添加了一些 alpha 阴影。

package
{
    import flash.display.*;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.MovieClip;
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.net.*;
    import flash.ui.MouseCursor;
    import flash.ui.Mouse;

    public class images extends Sprite
    {
        var mouseIsDown:Boolean = false;

        public function images()
        {
            stage.scaleMode=StageScaleMode.NO_SCALE;
            stage.align=StageAlign.TOP_LEFT;

            loadClickImage(0,0,"http://www.shapemakr.com/image/fotor/IMG_3294.JPG","http://adobe.com");
            loadClickImage(260,0,"http://www.shapemakr.com/image/fotor/IMG_3295.JPG","http://adobe.com");
            loadClickImage(520,0,"http://www.shapemakr.com/image/fotor/IMG_3296.JPG","http://adobe.com");
            loadClickImage(0,197,"http://www.shapemakr.com/image/fotor/IMG_3297.JPG","http://adobe.com");
            loadClickImage(260,197,"http://www.shapemakr.com/image/fotor/IMG_3298.JPG","http://adobe.com");
            loadClickImage(520,197,"http://www.shapemakr.com/image/fotor/IMG_3299.JPG","http://adobe.com");
            loadClickImage(0,394,"http://www.shapemakr.com/image/fotor/IMG_3300.JPG","http://adobe.com");
            loadClickImage(260,394,"http://www.shapemakr.com/image/fotor/IMG_3301.JPG","http://adobe.com");
            loadClickImage(520,394,"http://www.shapemakr.com/image/fotor/IMG_3302.JPG","http://adobe.com");
            loadClickImage(0,591,"http://www.shapemakr.com/image/fotor/IMG_3303.JPG","http://adobe.com");
            loadClickImage(260,591,"http://www.shapemakr.com/image/fotor/IMG_3304.JPG","http://adobe.com");
            loadClickImage(520,591,"http://www.shapemakr.com/image/fotor/IMG_3305.JPG","http://adobe.com");
            loadClickImage(0,788,"http://www.shapemakr.com/image/fotor/IMG_3306.JPG","http://adobe.com");
        }

        function loadClickImage(x:int,y:int,imgurl:String,gotourl:String):void 
        {
            loadClickScaleImage(x,y,1,1,imgurl,gotourl);
        }

        function loadClickScaleImage(x:int,y:int,scx:Number,scy:Number,imgurl:String,gotourl:String):void 
        {
            //to load an image, you can use the `Loader` class:
            var loader:Loader = new Loader();
            loader.x = x; loader.y=y; loader.scaleX=scx; loader.scaleY=scy; loader.name = gotourl;
            //loader.mask = rect;
            loader.load(new URLRequest(imgurl));
            loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaderComplete);

            addChild(loader);

            //to listen for a click:
            loader.addEventListener(MouseEvent.CLICK, myClickHandler);  
            loader.addEventListener(MouseEvent.MOUSE_OVER, changeCursor);
            loader.addEventListener(MouseEvent.MOUSE_OUT, resetCursor);
        }


        function myClickHandler(e:Event):void {
            navigateToURL(new URLRequest(e.target.name), "_self");//do something, the image was clicked
            //Mouse.cursor = MouseCursor.
        }

        private function changeCursor(e:Event)
        {
            (e.target as Loader).alpha=.85;
            Mouse.cursor = MouseCursor.BUTTON;
        }

        private function resetCursor(e:Event)
        {   
            (e.target as Loader).alpha=1;
            Mouse.cursor = MouseCursor.ARROW;
        }

        function loaderComplete(e:Event):void {
            // now your image is fully loaded
        //  trace(e.target.content.width);
        }

    }
}

据我所知,您需要将该图像放入影片剪辑中才能通过 addChild 将其添加到舞台上。

目前您在 'Library' 中拥有它,但还没有将它调用到舞台上。

2 个我看到的问题:

  1. 你还没有实例化你的形状。如果您使用过 C#/Java,那么该过程应该非常熟悉。

  2. 你绘制了形状,但它不在显示器上,所以你什么也看不到。在 Flash 中,您需要明确地将内容添加到屏幕上。所以要让它工作,你只需要做:

    public function images()
    {
        sp = new Shape(); //instantiate a new shape
        addChild(sp); //add it to the display so it can be seen
    
        drawIcon();
    }
    

您所做的其他一切看起来都不错。但请记住,它不会像那样缩放您的位图。

您可能会发现最好放弃形状,直接使用位图:

    public function images()
    {
        addChild(contentIcon); //add it to the display so it can be seen
        contentIcon.width = 200; //or whatever you want the width to be
        contentIcon.scaleY = contentIcon.scaleX; //make the aspect ratio match
        //to load an image, you can use the `Loader` class:
        var loader:Loader = new Loader();
        loader.load(new URLRequest("http://someplace.com/myImage.jpg"));
        addChild(loader);

        //it's good practice though to listen for COMPLETE, IO ERROR, and SECURITY error events on the loader in case something goes wrong.

       //to listen for a click:
       loader.addEventListener(MouseEvent.CLICK, myClickHandler);
    }

    function myClickHandler(e:Event):void {
        //do something, the image was clicked
    }