13 Replies Latest reply: May 4, 2012 4:22 PM by jdhughen RSS

    Can't get onRelease to work for an image mc

    jdhughen Community Member

      on on of my pages I have 5 thumbnail images that I've turned into buttons (b1-b5). What I want is to click on an image button and display a large version on the screen then then I click on the large image it goes away. Both the thumbnail and large images are loaded dynamic. each thumbnail button sends it's consponding large image address to a function when pressed. This is the code that I have. in this example "home_img1" = images/home01.jpg (var loaded at runtime from a html text file. the buttons (and all page 1 content) are "nested" 1 level in a mc named "pg1" but this code in on the root timeline. btw this is a actionscript 2 project.

       

      pg1.b1.onRelease = function()

      {

          loadPic(home_img1);

          trace("load "+home_img1);

      };

      pg1.b2.onRelease = function()

      {

          loadPic(home_img2);

          trace("load "+home_img2);

      };

      pg1.b3.onRelease = function()

      {

          loadPic(home_img3);

          trace("load "+home_img3);

      };

      pg1.b4.onRelease = function()

      {

          loadPic(home_img4);

          trace("load "+home_img4);

      };

      pg1.b5.onRelease = function()

      {

          loadPic(home_img5);

          trace("load "+home_img5);

      };

      function loadPic(myPic) {

          loadMovie(myPic, lg_pic.lg_cont1);

          trace(myPic + "_loaded");

       

          lg_pic.lg_cont1.onRelease = function() { //everything seems to work fine to this point then nothing

           unloadMovie(lg_pic.lg_cont1) 

            trace("remove image");

          };

         

      };

       

      I wnat to be able to click the on the large image that came up and have it go away. What Im' I doing wrong ??

       

      thanks

       

      Joel

        • 1. Re: Can't get onRelease to work for an image mc
          Ned Murphy CommunityMVP

          You are assigning the onRelease to the object that exists before the image is loaded, not the one that replaces it afterwards.  Use the MovieClipLoader class to wait until the object is loaded before assigning the onRelease to it.

           

          If you are not familiar with using the MovieClipLoader class with a listener for load completion, look up MovieClipLoader.addListener in the help documentation and you will find an example there that shows how to set it up.

          • 2. Re: Can't get onRelease to work for an image mc
            sinious Community Member

            You're using MovieClip.loadMovie() which loads an external asset into a MovieClip. It's a method of the MovieClip class.

             

            http://help.adobe.com/en_US/AS2LCR/Flash_10.0/help.html?content=Part2_AS2_LangRef_1.html

             

            Here's how you use it:

             

            someExistingMovieclip.loadMovie("somefile.png");

             

            What you appear to want to do is MovieClip.attachMovie() which will take a MovieClip with a linkage ID from the library to attach it to a specified MovieClip.

             

            Although..

             

            You specified a MovieClips path, e.g.: lg_pic.lg_cont1. Does this item already exist? Are you trying to "duplicate" something that already exists? If so then you want MovieClip.duplicateMovieClip(). Examples are provided in the links.

             

            Feel free to include more info on your issue, like if it exists in the library, already on the screen or external to the file.

            • 3. Re: Can't get onRelease to work for an image mc
              jdhughen Community Member

              Ned,

               

              thanks for pointing me in the right direction, I got that part figured out and it's all working now I just can't figure out where/how to add my Fade in/out (in RED)  this is what I have. I had to disable all my other navigation cause you could click cause if the user click on it it would do it's thing but still leave the image displayed. Anyway the fade in/out is what I'm stunped with.

               

              Thanks

               

              [CODE]

              stop();

              //Main Nav bar buttons

              _root.b0.b.enabled = 1;

              _root.b1.b.enabled = 1;

              _root.b2.b.enabled = 1;

              _root.b3.b.enabled = 1;

              _root.b4.b.enabled = 1;

              _root.b5.b.enabled = 1;

              _root.b6.b.enabled = 1;

              //

              // Image Thumbnail buttons

              pg1.b1.onRelease = function()

              {

                  loadPic(home_img1);

                  trace(home_img1);

              };

              pg1.b2.onRelease = function()

              {

                  showMe(home_img1);

                  trace(home_img1);

              };

              pg1.b3.onRelease = function()

              {

                  showMe(home_img1);

                  trace(home_img1);

              };

              pg1.b4.onRelease = function()

              {

                  showMe(home_img1);

                  trace(home_img1);

              };

              pg1.b5.onRelease = function()

              {

                  showMe(home_img1);

                  trace(home_img1);

              };

              function loadPic(myPic)

              {// disable main navigation

                  _root.b0.b.enabled = 0;

                  _root.b1.b.enabled = 0;

                  _root.b2.b.enabled = 0;

                  _root.b3.b.enabled = 0;

                  _root.b4.b.enabled = 0;

                  _root.b5.b.enabled = 0;

                  _root.b6.b.enabled = 0;

                  //disable thumb buttons

                  _root.pg1.b1.enabled = 0;

                  _root.pg1.b2.enabled = 0;

                  _root.pg1.b3.enabled = 0;

                  _root.pg1.b4.enabled = 0;

                  _root.pg1.b5.enabled = 0;

                  // Setup empty clip

                  this.createEmptyMovieClip("image_mc",this.getNextHighestDepth());

                  var mclListener:Object = new Object();

                  mclListener.onLoadInit = function(target_mc:MovieClip)

                  {

                      target_mc._x = 201;

                      target_mc._y = 110;

                      // FADE IN

                      new Tween(target_mc, "_alpha", Strong.easeOut, 0, 100, 0.5, true);

                      //

                      var w:Number = target_mc._width;

                      var h:Number = target_mc._height;

                      target_mc.lineStyle(10,0xD1D8E0);

                      target_mc.lineTo(w,0);

                      target_mc.lineTo(w,h);

                      target_mc.lineTo(0,h);

                      target_mc.lineTo(0,0);

                      target_mc.onRelease = function()

                      {

                         // FADE OUT

                          new Tween(image_mc, "_alpha", Strong.easeOut, 100, 0, 0.5, true);

                          //

                          image_mcl.unloadClip(target_mc);

                          //re-enable main navigation

                          _root.b0.b.enabled = 1;

                          _root.b1.b.enabled = 1;

                          _root.b2.b.enabled = 1;

                          _root.b3.b.enabled = 1;

                          _root.b4.b.enabled = 1;

                          _root.b5.b.enabled = 1;

                          _root.b6.b.enabled = 1;

                          //re-enable thumb buttons

                          _root.pg1.b1.enabled = 1;

                          _root.pg1.b2.enabled = 1;

                          _root.pg1.b3.enabled = 1;

                          _root.pg1.b4.enabled = 1;

                          _root.pg1.b5.enabled = 1;

                      };

                  };

                  //Load pic into empty clip

                  var image_mcl:MovieClipLoader = new MovieClipLoader();

                  image_mcl.addListener(mclListener);

                  image_mcl.loadClip(myPic,image_mc);

               

              }

               

              *****************************************************

               

              Thanks

              Joel

              • 4. Re: Can't get onRelease to work for an image mc
                jdhughen Community Member

                Sinious,

                 

                Thanks for the reply. originaly I created a empty_mc (lg_cont1) and had it in another mc (lg_pic) where I had an overlay border. After following Neds advice and looking at the MovieClipLoader class more closely I saw where it seem to be just as easy to just create the mc when I needed it an draw a border around it on load, when just delete the whole thing when it wasn't needed any more. Then I wouldn't have to deal with hiding it when it wasn't being used. All my pic are being loaded dynamicaly referenced to by vars loaded from a html text file at runtime. at some point I'm going to swtich over to XML for all the images I use. I checked into attachMovieClip earlier but from what i saw it had to be already in your lib to use that. I've got tons of pics used throughout the site that will change from time to time and I certinly didn't want to embed them in the swf so I decided against attachMovie .  I'm a animator/AE guy most of the time and a noob to this flash/actionscript stuff. I can usually figure out just enough to take way too long and get me in trouble, but I think I'm begining to get some of the concepts. 

                 

                I posted the script (above) where it is now. It all works but I want the images to fade in/out. I've seen examples ot the Tween class being used to do this but I can't get the syntax, object, or something in the right place to get it to work.

                 

                thanks

                 

                Joel

                • 5. Re: Can't get onRelease to work for an image mc
                  sinious Community Member

                  Your tweens look somewhat ok. Get any errors from them? I presume you're importing the Tween class and its easing counterpart so you don't get errors.

                   

                  Outside that make sure the properties of the object you're about to tween are set up to make sense. For example if some objects alpha is already 100, don't tween it to 100 or it won't look like it's doing anything.

                   

                  You'd want to:

                   

                  target_mc._alpha = 0; // make sure its alpha=0

                  new Tween(target_mc, "_alpha", Regular.easeInOut, 0, 100, 0.5, true);

                   

                  Same thing with fading out. Make sure to set it to 100.

                   

                  Outside that on your "onRelease" event you're removing the image with image_mcl.unloadClip(this); (remember you're already inside target_mc, so you don't say target_mc, you say 'this'). But you try to tween it. That tells you that you need to wait until it fades out before you remove it or it will just disappear.

                   

                  That invites you to look into TweenEvent. You can set up the tween to call another method once it's complete and THEN you get rid of the image and load another image.

                   

                  edit:

                   

                  In all honesty you should look up mx.utils.Delegate; because "scope" is an extremely ridiculos subject when it comes to coding in AS2. You need to know where exactly the code is firing off. Most people get into a lot of trouble because they think it's all executing from the frame script they wrotes scope, but it's not.

                   

                  e.g.:

                   

                  _root.createEmptyMovieClip('moo_mc', 1);

                  moo_mc.attachMovie('someLibraryID');

                  trace(moo_mc); // traces moo_mc

                   

                  moo_mc.onPress = function() { trace(moo_mc); } // traces undefined

                   

                  Inside that function it's a whole different "scope". You're not at the level of the frame script anymore. You're inside that onPress events object, or inside moo_mc. And there is no "moo_mc" inside of itself. That's why AS2 sucks balls, amongst other things.

                   

                  To make it work, I know once I press moo_mc I am inside it. So 'this' will refer to itself.

                   

                  moo_mc.onPress = function() { trace(this); } // traces moo_mc

                   

                  Stupid AS2..

                  • 6. Re: Can't get onRelease to work for an image mc
                    Ned Murphy CommunityMVP

                    Be sure to include the import lines...

                     

                    import mx.transitions.Tween;

                    import mx.transitions.easing.Regular;

                    • 7. Re: Can't get onRelease to work for an image mc
                      jdhughen Community Member

                      Yes I have these lines in my frame 1 code that loads the vars ...

                      [CODE]

                      Stage.scaleMode = "noScale"

                      Stage.align = "TC"

                      import mx.transitions.Tween;

                      import mx.transitions.easing.*;

                      stop();

                      _root.current_p = 1;

                      _root.g_page = 0;

                      _root.page = 0;

                      _root.flag = 0;

                      magnet = 400;

                      magic = 6;

                      loadVariablesNum("inc/text.html", 0);

                      trace(_root.page)

                      [/CODE]

                       

                      I asume if I import them there that they are avaliable any time? I don't have to import on the same frame do I ?

                       

                      I've been messing with it for a while and still can't get the tweens to work. If I set the alpha = 0 before the tween then I get nothing on screen, I can tell it's there cause the mouse works in the area where the image goes and my traces are all firing. So I'm not sure what I'm missing.

                       

                      Joel

                      • 8. Re: Can't get onRelease to work for an image mc
                        Ned Murphy CommunityMVP

                        I would try placing the imports in the frame where they are used.  You should also try tracing the objects you are trying to tween to make sure that you are actually targeting them.

                        • 9. Re: Can't get onRelease to work for an image mc
                          jdhughen Community Member

                          All,

                           

                          thanks for your help on this.

                           

                          Putting the "imports" on the same frame as the script instead of _root frame 1 of the fla fixed the fadeIn. Go figure, that seems very odd, does that mean that everytime I want to use the tween class that I have to import the class for that frame of script ?? why wouldn't that be a global thing ?? anyway....

                           

                          then adding a onMotionFinish() function cured the clip being deleted before it had time to fade out.

                           

                          I posted the end product below.

                           

                          I'm not really sure if I have all the scope stuff right but it works. for example I don't understand why I could use "this", "target_mc", or "image_mc" in the

                           

                          var myFadeOut = new Tween(this, "_alpha", Strong.easeOut, 100, 0, 1, true);

                           

                          section and they all worked. is one "more" correct that the other and why ?? ..

                          yet only image_mc works in the removeMovieClip section.

                           

                          myFadeOut.onMotionFinished = function() {

                                         image_mc.removeMovieClip();

                           

                           

                          Just one more question. Is there any "clean-up" I need to do, like deleting anything else etc ??

                           

                          thanks again for your help

                           

                          Joel

                           

                          [CODE]

                          import mx.transitions.Tween;

                          import mx.transitions.easing.*;

                          stop();

                          _root.b0.b.enabled = 1;

                          _root.b1.b.enabled = 1;

                          _root.b2.b.enabled = 1;

                          _root.b3.b.enabled = 1;

                          _root.b4.b.enabled = 1;

                          _root.b5.b.enabled = 1;

                          _root.b6.b.enabled = 1;

                          //

                          pg1.b1.onRelease = function()

                          {

                              loadPic(home_img1);

                          // "home_img1" is var loaded at runtime, holds url of the image

                          };

                          pg1.b2.onRelease = function()

                          {

                              loadPicMe(home_img2);

                          };

                          pg1.b3.onRelease = function()

                          {

                              loadPic(home_img3);

                          };

                          pg1.b4.onRelease = function()

                          {

                              loadPic(home_img4);

                          };

                          pg1.b5.onRelease = function()

                          {

                              loadPic(home_img5);

                          };

                          // START

                          function loadPic(myPic)

                          {// disable main navigation

                              _root.b0.b.enabled = 0;

                              _root.b1.b.enabled = 0;

                              _root.b2.b.enabled = 0;

                              _root.b3.b.enabled = 0;

                              _root.b4.b.enabled = 0;

                              _root.b5.b.enabled = 0;

                              _root.b6.b.enabled = 0;

                              //disable thumb buttons

                              _root.pg1.b1.enabled = 0;

                              _root.pg1.b2.enabled = 0;

                              _root.pg1.b3.enabled = 0;

                              _root.pg1.b4.enabled = 0;

                              _root.pg1.b5.enabled = 0;

                              // Setup empty clip

                              this.createEmptyMovieClip("image_mc",this.getNextHighestDepth());

                              var mclListener:Object = new Object();

                              mclListener.onLoadInit = function(target_mc:MovieClip)

                              {

                                  target_mc._x = 201;

                                  target_mc._y = 110;

                                  target_mc._alpha = 0;

                                  var w:Number = target_mc._width;

                                  var h:Number = target_mc._height;

                                  target_mc.lineStyle(10,0xD1D8E0);

                                  target_mc.lineTo(w,0);

                                  target_mc.lineTo(w,h);

                                  target_mc.lineTo(0,h);

                                  target_mc.lineTo(0,0);

                                  // FADE IN

                              new Tween(target_mc, "_alpha", Strong.easeOut, 0, 100, 1, true);

                              //

                           

                                  target_mc.onRelease = function()

                                  {

                                      // FADE OUT and remove clip

                                      var myFadeOut = new Tween(this, "_alpha", Strong.easeOut, 100, 0, 1, true);

                                      myFadeOut.onMotionFinished = function() {

                                         image_mc.removeMovieClip();

                                          trace("fade out complete");

                                      };

                                      //re-enable navigation

                                      _root.b0.b.enabled = 1;

                                      _root.b1.b.enabled = 1;

                                      _root.b2.b.enabled = 1;

                                      _root.b3.b.enabled = 1;

                                      _root.b4.b.enabled = 1;

                                      _root.b5.b.enabled = 1;

                                      _root.b6.b.enabled = 1;

                                      //re-enable thumb buttons

                                      _root.pg1.b1.enabled = 1;

                                      _root.pg1.b2.enabled = 1;

                                      _root.pg1.b3.enabled = 1;

                                      _root.pg1.b4.enabled = 1;

                                      _root.pg1.b5.enabled = 1;

                                  };

                              };

                              //Load pic into empty clip

                              var image_mcl:MovieClipLoader = new MovieClipLoader();

                              image_mcl.addListener(mclListener);

                              image_mcl.loadClip(myPic,image_mc);

                           

                          }

                          // END

                          • 10. Re: Can't get onRelease to work for an image mc
                            sinious Community Member

                            Your var myFadeOut.... and then myFadeOut.onMotionFinished isn't working. I told you about the horrific 'scope' issues of AS2. Inside the onMotionFinished, why don't you do this:

                             

                            trace(image_mg); // if it worked it would say image_mc, if not UNDEFINED

                             

                            You need to assign the listener, BTW, or it won't fire off.

                             

                            Bottom line, trace() is your friend. Sprinkle it everywhere in your code. trace() everywhere you go so you can watch your code execute. More importantly where you "think" something should exist, trace() it and if it doesn't return undefined, it exists.

                             

                            For example, trace anything on your onMotionFinished function above. See if it's even firing off.

                            • 11. Re: Can't get onRelease to work for an image mc
                              jdhughen Community Member

                              "Your var myFadeOut.... and then myFadeOut.onMotionFinished isn't working"

                               

                              It's all working fine here. I was just wondering about the whole scope thing and why I was able to use "this", "target_mc", or "image_mc" in the "var myFadeOut = new Tween(this, "_alpha", Strong.easeOut, 100, 0, 1, true);" statement and only "image_mc" would work in the onMotionFinished function.

                               

                              anyway it's all working, I don't fully understand the why and how it's all working, but I'm moving on.

                               

                              Thanks

                               

                              Joel

                              • 12. Re: Can't get onRelease to work for an image mc
                                sinious Community Member

                                It's the terrible nature of AS2. Variables should never exist outside their scope.

                                 

                                e.g.

                                 

                                function foo() {

                                     var a = "Hello";

                                }

                                 

                                foo(); // 'a' is created in the function but once it exits it's gone

                                trace(a); // undefined

                                 

                                That's obvious to understand. The function runs, creates a variable inside the function but when the function exists the variable is discarded.

                                 

                                Now, as a convenience the look ahead compiler will let you get away with something like this:

                                 

                                function foo()

                                {

                                    var a = "something"; // at timeline scope in a frame script but inside a function so 'a' will be nuked at the end

                                 

                                 

                                   myButton.onPress = function() {

                                        // inside myButton function which has nothing to do with foo()s scope so it shouldn't exist

                                         myButton.a = a;  // assign a property to myButton (which should be 'this') and set it to "something"

                                                                   // just using myButton here (from inside itself) should error, it makes no sense, but flash "fixes" it for you

                                   };

                                }

                                 

                                foo();

                                trace(a); // undefined

                                myButton.onPress();

                                trace(a); // undefined

                                trace(myButton.a); // "something"

                                 

                                AS2 is just wacky with this stuff. Even though you go in and out of scopes the compiler figures out what you meant (sometimes) and lets you think that it was kosher to do what you did when in general programming it isn't.

                                 

                                Ditch it and run to AS3 as soon as possible. You're only 6 or so years off . Not much of this wacky scope crap exists anymore.

                                • 13. Re: Can't get onRelease to work for an image mc
                                  jdhughen Community Member

                                  sinious wrote:

                                   

                                  Ditch it (AS2) and run to AS3 as soon as possible. You're only 6 or so years off . Not much of this wacky scope crap exists anymore.

                                  Yea, the only reason I'm using AS2 is because this project was originally done by someone else in AS2. Unforunatley the fla is poorly documented and I've spent more time trying to figure out how to make what he did do what I want than I would have if I had just start from scratch porting it to AS3. Thanks for your help

                                   

                                  Joel