Question

I have a method that takes a few paramerters and dynamicly adds three images to the stage it also adds a background image to the three images.

I am trying to figure out the following: How can I tween in the background movieclip and on complete tween in the three dynamic movieClips? Can I have a function within a function that shares the same variables?

Something like the following:

public function addImages(BackGround:String,Image1:String,Image2:String,Image3:String):void
        {


           var symbol_class:Class = getDefinitionByName(BackGround);
           var image1_class:Class = getDefinitionByName(Image1);
           var image2_class:Class = getDefinitionByName(Image2);
           var image3_class:Class = getDefinitionByName(Image3);

                  var main_bg = new symbol_class();
                  var image_1 = new image1_class();
                  var image_2 = new image2_class();
                  var image_3 = new image3_class();

          main_box.addChild(main_bg);

                  var BGTween:Tween = new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
                  BGTween.addEventListener(TweenEvent.MOTION_FINISH, onFinish);

                   //WHEN BACKGROUND TWEEN IS COMPLETE NOW ADD THE OTHER IMAGES AND FADE THEM IN.
                  function onFinish(e:TweenEvent):void {
                    BGTween.removeEventListener(TweenEvent.MOTION_FINISH, onFinish);

               main_box.addChild(image_1);
                     var image_1_tween:Tween = new Tween(image_1, "alpha", Strong.easeIn, 0,1,0.5, true);

                main_box.addChild(image_2);
                   var image_2_tween:Tween = new Tween(image_2, "alpha", Strong.easeIn, 0,1,0.5, true);

                main_box.addChild(image_3);
                    var image_3_tween:Tween = new Tween(image_3, "alpha", Strong.easeIn, 0,1,0.5, true);

                    }

        }

Answer 1

You’re close there, you can’t define a function within a function quite like that, but you can do the following:

       public function addImages(BackGround:String,Image1:String,Image2:String,Image3:String):void
       {


              var symbol_class:Class = getDefinitionByName(BackGround);
              var image1_class:Class = getDefinitionByName(Image1);
              var image2_class:Class = getDefinitionByName(Image2);
              var image3_class:Class = getDefinitionByName(Image3);

              var main_bg = new symbol_class();
              var image_1 = new image1_class();
              var image_2 = new image2_class();
              var image_3 = new image3_class();

              main_box.addChild(main_bg);

              var BGTween:Tween = new Tween(my_thumb, "alpha", Strong.easeIn, 0,1,0.5, true);
              BGTween.addEventListener(TweenEvent.MOTION_FINISH, function(e:TweenEvent) {
                    //WHEN BACKGROUND TWEEN IS COMPLETE NOW ADD THE OTHER IMAGES AND FADE THEM IN.
                    (e.target as EventDispatcher).removeEventListener(e.type, arguments.callee);

                    main_box.addChild(image_1);
                     var image_1_tween:Tween = new Tween(image_1, "alpha", Strong.easeIn, 0,1,0.5, true);

                    main_box.addChild(image_2);
                   var image_2_tween:Tween = new Tween(image_2, "alpha", Strong.easeIn, 0,1,0.5, true);

                    main_box.addChild(image_3);
                    var image_3_tween:Tween = new Tween(image_3, "alpha", Strong.easeIn, 0,1,0.5, true);
              });
      }

This is called a closure because it’s an anonymous function that references values outside its immediate scope. You can read more about them on Wikipedia. Also note how the removeEventListener has changed, this is the way to remove an anonymous function because no name reference exists for it.