8 Replies Latest reply: Sep 3, 2011 12:20 AM by kglad RSS

    Tween to TweenLite and null references

    StoneChameleon Community Member

      Boy, it feels like I'm here a lot more than I used to be.

       

      I'm currently switching tweens to use TweenLite and what happens is I now have a null reference.

       

      What I don't understand is how to switch this code appropriately.  The object begin tweened then has to be capable of being dragged again once it's scaled back down and incapble of being dragged while it's scaled up.

       

      function photoStartDrag(e:MouseEvent):void {
          e.target.parent.startDrag();
      }
      
      function photoStopDrag(e:MouseEvent):void {
          e.target.parent.stopDrag();
      }
      
      function clickAndScale(e:MouseEvent):void {
          if (! scaled && clickable) {
              /* Avoid unwanted clicks */
              
              clickable = false;
              addChild(imgScaleBg);
              
              /* Cant drag when scaled or zooming */
              
              e.target.parent.getChildAt(0).removeEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
              
              /* Get next highest depth */
              
              setChildIndex(e.target.parent as Sprite, (numChildren - 1));
              
              /* Get position */
              
              positionX = e.target.parent.x;
              positionY = e.target.parent.y;
              
              TweenLite.to(e.target.parent, 1, {
                  x: stage.stageWidth / 4 - e.target.parent.width + 10,
                  y: stage.stageHeight / 4 - e.target.parent.height + 10,
                  scaleX: 1,
                  scaleY: 1,
                  ease: Bounce.easeOut,
                  overwrite: false,
                  onComplete: scaleUp});
              
              //tween = new Tween(e.target.parent, "scaleX", Strong.easeOut, e.target.parent.scaleX, 1, 0.8, true);
              //tween = new Tween(e.target.parent, "scaleY", Strong.easeOut, e.target.parent.scaleY, 1, 0.8, true);
              
              //tween = new Tween(e.target.parent, "x", Strong.easeOut, e.target.parent.x, stage.stageWidth / 4 - e.target.parent.width + 10, 0.8, true);
              //tween = new Tween(e.target.parent, "y", Strong.easeOut, e.target.parent.y, stage.stageHeight / 4 - e.target.parent.height + 10, 0.8, true);
              
              //addEventListener(TweenEvent.MOTION_FINISH, scaleUp);
              
          } else if (scaled && clickable) {
              e.target.parent.getChildAt(2).visible = false;
              
              TweenLite.to(e.target.parent, 1, {
                  x: positionX,
                  y: positionY,
                  scaleX: 0.2,
                  scaleY: 0.2,
                  ease: Bounce.easeOut,
                  overwrite: false,
                  onComplete: scaleDown});
              
              //tween = new Tween(e.target.parent, "scaleX", Strong.easeOut, e.target.parent.scaleX, 0.2, 1, true);
              //tween = new Tween(e.target.parent, "scaleY", Strong.easeOut, e.target.parent.scaleY, 0.2, 1, true);
              
              //tween = new Tween(e.target.parent, "x", Strong.easeOut, e.target.parent.x, positionX, 0.2, true);
              //tween = new Tween(e.target.parent, "y", Strong.easeOut, e.target.parent.y, positionY, 0.2, true);
              
              //addEventListener(TweenEvent.MOTION_FINISH, scaleDown);
          }
      }
      
      function scaleUp():void {
          scaled = true;
          clickable = true;
          tween.obj.getChildAt(2).visible = true;
      }
      
      function scaleDown():void {
          scaled = false;
          removeChild(imgScaleBg);
          
          tween.obj.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
      }
      
        • 1. Re: Tween to TweenLite and null references
          StoneChameleon Community Member

          Um, the above should have read: "The object being" not "The object begin"

          • 2. Re: Tween to TweenLite and null references
            kglad CommunityMVP

            click file/publish settings/flash and tick "permit debugging".  retest.

             

            the problematic line number with the non-existant object will be in the top-most error message.

            • 3. Re: Tween to TweenLite and null references
              StoneChameleon Community Member

              Hi, kglad,

               

              I know where the null reference is coming from. I'm probably not being clear. I have the problem from time to time.

               

              I have my file and I originally used the flash built in tween to tween an object from one scale and x/y position to another, then back down again.

               

              I've switched the tween to TweenLite and now when I publish I end up with the null reference. The null reference is coming from what's line 260 and 267 in my file. Since switching to TweenLite I don't know how to the object of the TweenLite tween like I did with the built in tween so that I can make it draggable once again when it's scaled back down to size. Does any of that make sense?  I'll post the entire file with the original tween commented out.

               

              import com.greensock.*;
              
              import flash.display.Loader;
              import flash.display.MovieClip;
              import flash.display.Sprite;
              import flash.events.Event;
              import flash.events.MouseEvent;
              import flash.filters.BitmapFilter;
              import flash.filters.DropShadowFilter;
              import fl.motion.easing.*
              import flash.net.URLLoader;
              import flash.net.URLRequest;
              import flash.text.AntiAliasType;
              import flash.text.TextField;
              import flash.text.TextFormat;
              import fl.transitions.Tween;
              import fl.transitions.easing.Strong;
              import fl.transitions.TweenEvent;
              
              stage.scaleMode = StageScaleMode.NO_SCALE;
              stage.align = StageAlign.TOP_LEFT;
              stage.addEventListener(Event.RESIZE, tileStage);
              
              var preloader:Preloader = new Preloader();
              
              
              var gradientMtx:Matrix = new Matrix();
              var gradientBG:Graphics = this.graphics;
              
              var xml:XML;
              var photos:Array = new Array();
              var photosLoaded:int = 0;
              var photosTitle:Array = new Array();
              var tween:Tween;
              var scaled:Boolean = false;
              var clickable:Boolean = true;
              var positionX:int;
              var positionY:int;
              
              var textformat:TextFormat = new TextFormat();
              var formatFont:Nobile = new Nobile();
              
              var imgScaleBg:Sprite = new Sprite();
              
              textformat.color = 0xFFFFFF;
              textformat.font = formatFont.fontName;
              textformat.size = 14;
              
              
              initFunctions();
              
              function initFunctions():void {
                  tileStage();
                  drawShapes();
                  xmlLoader("xml/gallery.xml");
              }
              
              
              function tileStage(event:Event=null):void {
                  
                  var tile:Sprite = new Sprite();
                  
                  tile.graphics.beginBitmapFill(new PatternTile(0, 0));
                  tile.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
                  tile.graphics.endFill();
              
                  addChildAt(tile, 0);
              }
              
              // Call the function
              
              function drawShapes():void {
                  
                  // Draw image fill screen background
                  imgScaleBg.graphics.beginFill(0x111111, .5);
                  imgScaleBg.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
                  imgScaleBg.graphics.endFill();
                  
                  // Draw stage background
                  gradientMtx.createGradientBox(this.stage.stageWidth, this.stage.stageHeight, Math.PI / 2);
                  gradientBG.beginGradientFill(GradientType.LINEAR, [0xffffff, 0xd6e3eb], [1, 1], [0, 255], gradientMtx);
                  gradientBG.drawRect(0, 0, this.stage.stageWidth, this.stage.stageHeight);
                  gradientBG.endFill();
              }
              
              function xmlLoader(file:String):void {
                  
                  preloader.x = (stage.stageWidth - preloader.width) / 2;
                  preloader.y = (stage.stageHeight - preloader.height) / 2;    
                  addChild(preloader);
                  
                  var urlLoader:URLLoader = new URLLoader();
                  var urlReq:URLRequest = new URLRequest(file);
                  
                  urlLoader.load(urlReq);
                  urlLoader.addEventListener(Event.COMPLETE, xmlHandler);
              }
              
              function xmlHandler(e:Event):void {
                  xml = new XML(e.target.data);
              
                  for (var i:int = 0; i < xml.children().length(); i++) {
                      var loader:Loader = new Loader();
                      
                      loader.load(new URLRequest(String(xml.children()[i].@src)));
                      
                      
                      photos.push(loader);
                      photosTitle.push(xml.children()[i].@title);
                      
                      loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loaded);
                  }
              }
              
              function loaded(e:Event):void {
                  photosLoaded++;
                  
                  if (xml.children().length() == photosLoaded) {
                      removeChild(preloader);
                      photoProperties();
                  }
              }
              
              function photoProperties():void {
                  for (var i:int = 0; i < photos.length; i++) {
                      
                      var photoFrame:Sprite = new Sprite();
                      var photoCasing:Sprite = new Sprite();
                      var photoBorder:Sprite = new Sprite();
                      var photoDetails:Sprite = new Sprite();
                      var photoTxt:TextField = new TextField();
                      // DropShadowFilter(distance:Number = 4.0, angle:Number = 45, color:uint = 0, alpha:Number = 1.0, blurX:Number = 4.0, blurY:Number = 4.0, strength:Number = 1.0, quality:int = 1, inner:Boolean = false, knockout:Boolean = false, hideObject:Boolean = false)
                      var photoDropshadow:BitmapFilter = new DropShadowFilter(2, 90, 0x333333, .8, 2, 2, .5, 15);
                      var shadowArray:Array = [photoDropshadow];
              
                      photoCasing.graphics.beginFill(0xFFFFFF);
                      photoCasing.graphics.drawRect(-20, -20, photos[i].width + 40, photos[i].height + 80);
                      photoCasing.graphics.endFill();
                      
                      photoBorder.graphics.beginFill(0x000000);
                      photoBorder.graphics.drawRect(-2, -2, photos[i].width + 4, photos[i].height + 4);
                      photoBorder.graphics.endFill();
                      
                      /* Info Area  */
                      
                      photoDetails.graphics.beginFill(0x111111, 0.75);
                      photoDetails.graphics.drawRect(0, 0, photos[i].width, 60);
                      photoDetails.graphics.endFill();
                      photoDetails.y = photos[i].height - 60;
                      
                      photoTxt.defaultTextFormat = textformat;
                      photoTxt.embedFonts = true;
                      photoTxt.antiAliasType = AntiAliasType.ADVANCED;
                      photoTxt.width = photos[i].width - 5;
                      photoTxt.height = 20;
                      
                      photoTxt.text = photosTitle[i];
                      
                      // Resize
                      
                      photoFrame.scaleX = 0.2;
                      photoFrame.scaleY = 0.2;
                      
                      // Position
                      
                      photoFrame.x = stage.stageWidth / 3 + Math.floor(Math.random() * (stage.stageWidth / 3));
                      photoFrame.y = stage.stageHeight / 4 + Math.floor(Math.random() * (stage.stageHeight / 4));
                      
                      /* Filter */
                      
                      photoFrame.filters = shadowArray;
                      
                      photoDetails.addChild(photoTxt);
                      
                      photoFrame.addChild(photoCasing);
                      photoCasing.addChild(photoBorder);
                      photoFrame.addChild(photos[i]);
                      
                      photoDetails.visible = false;
                      photoFrame.addChild(photoDetails);
                      
                      photoFrame.getChildAt(1).addEventListener(MouseEvent.MOUSE_UP, clickAndScale);
                      photoFrame.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
                      photoFrame.getChildAt(0).addEventListener(MouseEvent.MOUSE_UP, photoStopDrag);
                      
                      addChild(photoFrame);
                  }
              }
              
              function photoStartDrag(e:MouseEvent):void {
                  e.target.parent.startDrag();
              }
              
              function photoStopDrag(e:MouseEvent):void {
                  e.target.parent.stopDrag();
              }
              
              function clickAndScale(e:MouseEvent):void {
                  if (! scaled && clickable) {
                      /* Avoid unwanted clicks */
                      
                      clickable = false;
                      addChild(imgScaleBg);
                      
                      /* Cant drag when scaled or zooming */
                      
                      e.target.parent.getChildAt(0).removeEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
                      
                      /* Get next highest depth */
                      
                      setChildIndex(e.target.parent as Sprite, (numChildren - 1));
                      
                      /* Get position */
                      
                      positionX = e.target.parent.x;
                      positionY = e.target.parent.y;
                      
                      TweenLite.to(e.target.parent, 1, {
                          x: stage.stageWidth / 4 - e.target.parent.width + 10,
                          y: stage.stageHeight / 4 - e.target.parent.height + 10,
                          scaleX: 1,
                          scaleY: 1,
                          ease: Bounce.easeOut,
                          overwrite: false,
                          onComplete: scaleUp});
                      
                      //tween = new Tween(e.target.parent, "scaleX", Strong.easeOut, e.target.parent.scaleX, 1, 0.8, true);
                      //tween = new Tween(e.target.parent, "scaleY", Strong.easeOut, e.target.parent.scaleY, 1, 0.8, true);
                      
                      //tween = new Tween(e.target.parent, "x", Strong.easeOut, e.target.parent.x, stage.stageWidth / 4 - e.target.parent.width + 10, 0.8, true);
                      //tween = new Tween(e.target.parent, "y", Strong.easeOut, e.target.parent.y, stage.stageHeight / 4 - e.target.parent.height + 10, 0.8, true);
                      
                      //addEventListener(TweenEvent.MOTION_FINISH, scaleUp);
                      
                  } else if (scaled && clickable) {
                      e.target.parent.getChildAt(2).visible = false;
                      
                      TweenLite.to(e.target.parent, 1, {
                          x: positionX,
                          y: positionY,
                          scaleX: 0.2,
                          scaleY: 0.2,
                          ease: Bounce.easeOut,
                          overwrite: false,
                          onComplete: scaleDown});
                      
                      //tween = new Tween(e.target.parent, "scaleX", Strong.easeOut, e.target.parent.scaleX, 0.2, 1, true);
                      //tween = new Tween(e.target.parent, "scaleY", Strong.easeOut, e.target.parent.scaleY, 0.2, 1, true);
                      
                      //tween = new Tween(e.target.parent, "x", Strong.easeOut, e.target.parent.x, positionX, 0.2, true);
                      //tween = new Tween(e.target.parent, "y", Strong.easeOut, e.target.parent.y, positionY, 0.2, true);
                      
                      //addEventListener(TweenEvent.MOTION_FINISH, scaleDown);
                  }
              }
              
              function scaleUp():void {
                  scaled = true;
                  clickable = true;
                  tween.obj.getChildAt(2).visible = true;
              }
              
              function scaleDown():void {
                  scaled = false;
                  removeChild(imgScaleBg);
                  
                  tween.obj.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
              }
              
              • 4. Re: Tween to TweenLite and null references
                StoneChameleon Community Member

                Apparantly, I can't put a sentence together properly today, either. I apologize for the awful grammar going on around my fingers today.

                • 5. Re: Tween to TweenLite and null references
                  StoneChameleon Community Member

                  Ah ha! I did it!

                   

                  So, I kept thinking: If I can't figure out how to target my clips properly while inside another function, then I simply make an if statement inside the master function. Then I thought, well, I already have an if statement, yes? Yes. And essentially, all it says is if in this state do this otherwise if it's in the other state, do the other thing.

                   

                  So this is all I did:

                   

                  if (! scaled && clickable) {
                          
                          clickable = false;
                          addChild(imgScaleBg);
                          
                          e.target.parent.getChildAt(0).removeEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
                          
                          setChildIndex(e.target.parent as Sprite, (numChildren - 1));
                          
                          positionX = e.target.parent.x;
                          positionY = e.target.parent.y;
                          
                          TweenLite.to(e.target.parent, 1, {
                              x: stage.stageWidth / 4 - e.target.parent.width + 10,
                              y: stage.stageHeight / 4 - e.target.parent.height + 10,
                              scaleX: 1,
                              scaleY: 1,
                              ease: Bounce.easeOut,
                              overwrite: false
                              });//onComplete: scaleUp
                              
                          scaled = true;
                          clickable = true;
                          e.target.parent.getChildAt(2).visible = true;
                          
                      } else if (scaled && clickable) {
                          
                          e.target.parent.getChildAt(2).visible = false;
                          
                          TweenLite.to(e.target.parent, 1, {
                              x: positionX,
                              y: positionY,
                              scaleX: 0.2,
                              scaleY: 0.2,
                              ease: Bounce.easeOut,
                              overwrite: false
                              });//onComplete: scaleDown
                          
                          scaled = false;
                          removeChild(imgScaleBg);
                          e.target.parent.getChildAt(0).addEventListener(MouseEvent.MOUSE_DOWN, photoStartDrag);
                      }
                  
                  • 6. Re: Tween to TweenLite and null references
                    kglad CommunityMVP

                    so, this issue is resolved?

                    • 7. Re: Tween to TweenLite and null references
                      StoneChameleon Community Member

                      It is, thank you.

                      • 8. Re: Tween to TweenLite and null references
                        kglad CommunityMVP

                        you're welcome.