3 Replies Latest reply on Aug 12, 2006 6:21 PM by Newsgroup_User

    tween onresize of browser window

    microes
      attempting to reposition contents of swf on resize of browser window with tween class

      Stage.align = "TL";
      Stage.scaleMode = "noScale";
      stageListener = new Object();
      stageListener.onResize = function() {
      moveIt();
      };
      Stage.addListener(stageListener);
      moveIt = function () {
      dash.onEnterFrame = function() {
      this._x += ((Stage.width/2)-this._x)/5;
      this._y += ((Stage.height/2)-this._y)/5;
      };
      };

      examples -
      http://www.rigsbydesign.com
      http://www.dunwoodie-architectureanddesign.co.uk/main.php
        • 1. Re: tween onresize of browser window
          Level 7
          microes,

          > attempting to reposition contents of swf on resize of
          > browser window with tween class

          Okay.

          > Stage.align = "TL";
          > Stage.scaleMode = "noScale";

          So far, so good. You're choosing the upper left corner of the screen as
          your "anchor," which is by far the most common, then you're keeping contents
          from resizing.

          > stageListener = new Object();
          > stageListener.onResize = function() {
          > moveIt();
          > };
          > Stage.addListener(stageListener);

          Good. You've created your listener object, the one that acts as the
          "proxy" or "ambassador" for the Stage.onResize event. You've added this
          listener to the Stage. Whenever the Stage is resized -- which occurs when
          the browser or Projector window is resized -- the custom moveIt() function
          will be executed. Note, you could have also done this ...

          stageListener.onResize = moveIt;

          ... which is more concise, but the way you chose works just fine.

          > moveIt = function () {

          Here, you're defining your moveIt() function. I'm curious why you
          didn't use the following construction ...

          function moveIt() {
          ...
          }

          By doing it in reverse, as you've done, it means the moveIt() function
          doesn't exist *as a function* until after your declaration. That's part of
          your problem, here: when moveIt() is invoked earlier, in that
          Stage.onResize handler, it doesn't exist it.

          When declaring a named function, use the "function" statement first, as
          as you use the "var" statement first when declaring a variable. Look at the
          following little experiment. In a brand new FLA, type the following into
          keyframe 1 and test your SWF:

          test();
          test = function() {
          trace("Hello, world!");
          }

          Note that nothing happens. Why? Because you're calling a function --
          test() -- that doesn't exist yet. Now, reverse those ...

          test = function() {
          trace("Hello, world!");
          }
          test();

          ... and see that the trace() output becomes visible.

          Pretty important thing to know, right?!

          Next, declare the function with the "function" statement first, as
          follows:

          test();
          function test() {
          trace("Hello, world!");
          }

          Note that even though the function is invoked before its declaration,
          the declaration *in this format* means the function "exists" even
          beforehand.

          Okay, back to your code.

          > dash.onEnterFrame = function() {

          This is a bit odd. What you're doing here is assigning a new
          MovieClip.onEnterFrame event handler (the same one, every time) to your dash
          MovieClip instance -- *every time* the Stage resizes. But that's the point
          of the Stage.onResize handler! Forget the onEnterFrame business. If you
          want dash to be centered to the Stage every time the Stage resizes, just do
          this:

          function moveIt() {
          dash._x = (Stage.width/2)-dash._x)/2;
          dash._y = (Stage.width/2)-dash._y)/2;
          }

          Well ... I used different numbers -- I can see that now. But use what
          numbers you like. The point is that you move that dash movie clip when the
          *Stage resizes,* rather than every time dash enters a timeline frame. Make
          sense?

          In closing, I'm curious, actually, where the Tween class is, here? You
          mentioned the Tween class but haven't used it.


          David Stiller
          Adobe Community Expert
          Dev blog, http://www.quip.net/blog/
          "Luck is the residue of good design."


          • 2. tween onresize of browser window
            microes Level 1
            i see the confusion in my first try - i wondering how to use this function with an easing tween class, drop the onEnterFrame.
            thanks
            • 3. Re: tween onresize of browser window
              Level 7
              microes,

              > i wondering how to use this function with a easing
              > tween class
              > drop the onEnterFrame
              > thanks

              Well, for starters, how about importing and using the Tween class? ;)

              I recommend you experiment with the Tween class on its own first --
              without the added complexity of Stage.onResize. Once you "get" the Tween
              class and understand how to use it, *then* introduce that concept to the
              other.


              David Stiller
              Adobe Community Expert
              Dev blog, http://www.quip.net/blog/
              "Luck is the residue of good design."