7 Replies Latest reply on Mar 23, 2011 9:01 AM by varunsud

    Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.

    varunsud Level 1

      Hi everyone,

       

      I am new to actionscript and Flash.

      I have been working on code updation project wherein initially we had an image and text as movieclips in fla library. The image and the text are read by the actionscript program which then creates an animation.

       

      For Example:

       

       

      // Picture

      // *******************************************************

      // _imageMC: Name of the Movie Clip in the libary which

      // contains the picture.

      var _imageMC:String = "polaroid";

       

       

      This is later on used by another actionscript class as follows to finally create the animation.

       

      var _mcPolaroid:MovieClip = this._mcBg.attachMovie(this._polaroid, "polaroid_mc", this._mcBg.getNextHighestDepth());

       

      Now the problem here is when one needs to update the image or text, one needs to go and open the fla file andmanually change the image attached to the movieClip (polaroid).

       

      I want to ease the updation process by giving the url of the image in an XML file. Read the image url from the xml and load this image in the library of the fla as movieclip. This, i think, will result in less code change and improve the updation of the final animation image.

       

      The problem i am facing is not been able to figure out how can i change the image (after fetching its URL) to a movieclip and then load it in the library?

       

      Thank you kindly in advance,

      Varun

        • 1. Re: Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.
          varunsud Level 1

          just to explain a bit more clearly,

          since the following code takes a string whose value is the name of the movieclip in the library, i want to automatically load the image (from xml) using actionscript and convert it to a movieclip symbol named 'polaroid'. This way i am just changing the xml file everytime i need to change the image in the animation. I am not touching FLA file to load the image as movieclip symbol in the library manually.

           

           

          // Picture

          // *******************************************************

          // _imageMC: Name of the Movie Clip in the libary which

          // contains the picture.

          var _imageMC:String = "polaroid";

          • 2. Re: Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.
            Ned Murphy Adobe Community Professional & MVP

            If you look up the loadMovie() function in the Flash help documentation it should have examples of how you can dynamically load an external file into a dynamically created movieclip using the createEmptyMovieClip() function.  You should read thru the entire section so that you gain a good understanding of how the tool you want to use works.

             

            In your case, instead of using the attachMovie code you could use something like...

             

            this.createEmptyMovieClip("polaroid", this.getNextHighestDepth());
            loadMovie("imagefile.jpg", polaroid);
            

             

             

            where you would end up substituting your xml variable for the "imagefile.jpg" url (no quotes for a variable)

             

            You should also be aware of the MovieClipLoader class and its loadClip() method, which is another means of loading external files dynamically.  The difference is that the MovieClipLoader class supports having listeners in the event you need to know where you are in the loading process and/or when it completes.

            1 person found this helpful
            • 3. Re: Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.
              varunsud Level 1

              Great! i will do that. Thanks a lot!  God bless you!

              • 4. Re: Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.
                varunsud Level 1

                The following was my attempt: (i created a new MovieClip)

                 

                this.createEmptyMovieClip("polaroidTest", this.getNextHighestDepth());
                loadMovie("imagefile.jpg", polaroidTest)

                var _imageMC:String = "polaroidTest";

                 

                This mentioned variable _imageMC is read by a MovieClip class(self created as follows)

                 

                /////////////////////////////// CODE STARTS //////////////////////////////////////

                 

                class as.MovieClip.MovieClipPolaroid {

                 

                private var _mcTarget:MovieClip;

                private var _polaroid:String;

                private var _mcBg:MovieClip;

                private var _rmcBg:MovieClip;

                private var _w:Number;

                private var _h:Number;

                private var _xPosition:Number;

                private var _yPosition:Number;

                private var _border:Number;

                 

                /**

                * Constructor

                */

                    function MovieClipPolaroid(mcTarget:MovieClip, polaroid:String) {

                 

                this._mcTarget = mcTarget;

                this._polaroid = polaroid;

                init();

                }

                 

                /**

                * initialise the polaroid movieclip and reflecting it

                */

                    private function init():Void {

                 

                this._border = 10;

                this.initSize();

                this.setPosition(48,35);

                this.createBackground();

                 

                var _mcPolaroid:MovieClip = this._mcBg.attachMovie(this._polaroid, "polaroid_mc", this._mcBg.getNextHighestDepth());

                _mcPolaroid._x = _border;

                _mcPolaroid._y = _border;

                 

                var _rmcPolaroid:MovieClip=this._rmcBg.attachMovie(this._polaroid,"rpolaroid_mc", this._rmcBg.getNextHighestDepth());

                 

                _rmcPolaroid._yscale *=-1;

                _rmcPolaroid._y = _rmcPolaroid._y + _h + _border ;

                _rmcPolaroid._x =_border;

                 

                 

                    }

                /**

                * create the background for the polaroid

                */

                private function createBackground():Void {

                this._mcBg = _mcTarget.createEmptyMovieClip("target_mc",_mcTarget.getNextHighestDepth());

                this._rmcBg = _mcTarget.createEmptyMovieClip("rTarget_mc", _mcTarget.getNextHighestDepth());

                 

                fill(_mcBg,_w+2*_border,_h+2*_border,100);

                fill(_rmcBg,_w+2*_border,_h+2*_border,10);

                 

                placeBg(_mcBg,_w+2*_border,_yPosition);

                placeBg(_rmcBg,_w+2*_border,_h+2*_border+_yPosition);

                }

                /**

                * position the background

                */

                private function placeBg(mc:MovieClip,w:Number,h:Number) : Void {  

                    mc._x = Stage.width - w - _xPosition;

                mc._y = h;

                 

                }

                /**

                * paint the backgound

                */

                private function fill(mc:MovieClip,w:Number,h:Number, a:Number): Void {

                mc.beginFill(0xFFFFFF);

                mc.moveTo(0, 0);

                mc.lineTo(w, 0);

                mc.lineTo(w, h);

                mc.lineTo(0, h);

                mc.lineTo(0, 0);

                mc.endFill();

                mc._alpha=a;

                }

                 

                /**

                * init the size of the polaroid

                */

                private function initSize():Void {

                var mc:MovieClip =_mcTarget.createEmptyMovieClip("mc",_mcTarget.getNextHighestDepth());

                mc.attachMovie(this._polaroid,"polaroid_mc", _mcTarget.getNextHighestDepth());

                this._h = mc._height;

                this._w = mc._width;

                removeMovieClip(mc);

                mc = null;

                }

                /**

                * sets the position of the polaroid

                */

                public function setPosition(xPos:Number,yPos:Number):Void {

                this._xPosition = xPos;

                this._yPosition = yPos;

                }

                 

                /**

                * moving in

                */

                public function moveIn():Tween {

                var mc:MovieClip = this._mcTarget;

                mc._visible=true;

                var tween:Tween = new Tween(mc, "_x", Strong.easeOut, 0, 0, 1, true);

                var tween:Tween = new Tween(mc, "_y", Strong.easeOut, 200, 0, 1, true);

                var tween:Tween = new Tween(mc, "_xscale", Strong.easeOut, 30, 100, 1, true);

                var tween:Tween = new Tween(mc, "_yscale", Strong.easeOut, 30, 100, 1, true);

                var tween:Tween = new Tween(mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

                return tween;

                 

                 

                }

                 

                /**

                * moving in

                */

                public function moveOut():Tween {

                var mc:MovieClip = this._mcTarget;

                var tween:Tween = new Tween(mc, "_alpha", Strong.easeIn, 99, 0, 1, true);

                var tween:Tween = new Tween(mc, "_x", Strong.easeIn,0, 1000, 1, true);

                var tween:Tween = new Tween(mc, "_y", Strong.easeIn, 0, -50, 1, true);

                var tween:Tween = new Tween(mc, "_xscale", Strong.easeIn, 100, 50, 1, true);

                var tween:Tween = new Tween(mc, "_yscale", Strong.easeIn, 100, 50, 1, true);

                 

                return tween;

                }

                }

                /////////////////////////////// CODE ENDS ///////////////////////////////////////
                As in the current case, the name of the movieclip which has the image (originally polaroid) is being read through the variable _imageMC which we hadd given the value "polaroidTest".
                The animation shows no image even when i have inserted the correct url (i m sure this step isn't wrong).
                Any clues?

                • 5. Re: Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.
                  Ned Murphy Adobe Community Professional & MVP

                  You appear to be trying to still use the attachMovie code, which I explained is not what you want.  The movieclip that you created with the first three lines replaces that.

                  • 6. Re: Loading an external image (from file system) to fla library as MovieClip symbol using ActionScript.
                    varunsud Level 1

                    Thank you for your reply.

                     

                    i have implemented the following after making the changes as per the understanding i have gathered. When i am trying to extract the value of 'polaroid_image'

                    and use it to dynamically load an image to the movieClip, the value i am getting is 'undefined'. I feel this is an out of scope problem. AM i right ? is there a workaround for this issue. I have tried ti delcare a _global.polaroid variable as well but it doesn't work.

                     

                    private function init():Void {

                     

                    var polaroid_image:String;

                    var myXML:XML = new XML();

                    myXML.ignoreWhite=true;

                    myXML.load("content.xml");

                    var myImage = myXML.firstChild.childNodes;

                    myXML.onLoad = function(success) {

                    if (success) {

                    myImage = myXML.firstChild.childNodes;

                    polaroid_image = myImage[1].firstChild.childNodes;

                    trace(polaroid_image);

                    }

                    }

                     

                    trace(polaroid_image);  // PROBLEM HERE : outputs 'undefined'

                    this._border = 10;

                    this.initSize();

                    this.setPosition(48,35);

                    this.createBackground();

                     

                    var _mcPolaroid:MovieClip = this._mcBg.createEmptyMovieClip("polaroid_mc", this._mcBg.getNextHighestDepth());

                    _mcPolaroid.loadMovie(polaroid_image, "polaroid_mc");

                     

                     

                    _mcPolaroid._x = _border;

                    _mcPolaroid._y = _border;

                     

                     

                    var _rmcPolaroid:MovieClip = this._rmcBg.createEmptyMovieClip("rpolaroid_mc", this._rmcBg.getNextHighestDepth());

                     

                     

                    _rmcPolaroid._yscale *=-1;

                    _rmcPolaroid._y = _rmcPolaroid._y + _h + _border ;

                    _rmcPolaroid._x =_border;

                     

                    }