11 Replies Latest reply on Dec 13, 2007 11:01 AM by Newsgroup_User

    Stretch the Stage to Fill the Browser Window??

    kitster79 Level 1
      Could someone let me know how this is done.....

      http://www.chevaldetroie.net/

      How do you make the stage fill the entire window and scale? Also, How do you position the objects in on the sides, such as the menu bar which rolls in and out of the side of the screen. It seems like there are MOST of the top designers are doing this now.

      I would appreciate your help.

      Thanks

      Kit
        • 1. Re: Stretch the Stage to Fill the Browser Window??
          Level 7
          kitster79,

          > How do you make the stage fill the entire window and scale?

          All you have to do to achieve scaling is to set the width and height of
          your SWF to 100% in the HTML. That alone will allow the SWF to fit the
          entire window -- use CSS to get rid of the body margins, if you like --
          though the site you showed has more going on that just that.

          > Also, How do you position the objects in on the sides, such as
          > the menu bar which rolls in and out of the side of the screen.

          In ActionScript 1.0 and 2.0, you'll access the Stage class to get what
          you need. The Stage.width and Stage.height properties let Flash know how
          wide and high the browser has been stretched. The Stage.onResize event lets
          Falsh know when the stretching occurs. If you write a function, or series
          of functions, to handle the Stage.onResize event, you'll be able to instruct
          movie clips and other scriptable objects on how they should behave.

          Here's a brief article on the topic:

          http://www.quip.net/blog/2006/flash/how-to-position-movie-clips-browser-resizing

          > It seems like there are MOST of the top designers are doing this
          > now.

          The Stage.onResize event has been available since Flash Player 6, so
          designers who are comfortable with a bit of programming have been doing this
          for quite some time. ;) It can get a bit complicated, depending on how
          many items you want to (re)position, but the basic principle isn't too
          tough.


          David Stiller
          Co-author, Foundation Flash CS3 for Designers
          http://tinyurl.com/2k29mj
          "Luck is the residue of good design."


          • 2. Re: Stretch the Stage to Fill the Browser Window??
            kitster79 Level 1
            Awsome, thanks David.

            So to what dimensions do I actually set my stage size to? Does it even matter since objects are going to adjust according to the browser window size?
            • 3. Re: Stretch the Stage to Fill the Browser Window??
              kitster79 Level 1
              Also, I have turned my background image into a movie clip - but how do I make it stretch to fill the entire stage size and scale up and down as you rezise the file when exported?

              Thanks
              • 4. Re: Stretch the Stage to Fill the Browser Window??
                Level 7
                kitster79,

                > Awsome, thanks David.

                Sure thing. :)

                > So to what dimensions do I actually set my stage size to? Does
                > it even matter since objects are going to adjust according to the
                > browser window size?

                Bingo. Doesn't matter. Just make sure to set the Stage.scaleMode and
                Stage.align properties as shown in the article.

                > Also, I have turned my background image into a movie clip - but
                > how do I make it stretch to fill the entire stage size and scale up
                > and down as you rezise the file when exported?

                Everything in ActionScript can be described as an object. The
                properties of the Stage, for example, can be accessed via the Stage class,
                as you've seen -- and because there's only one Stage, that class is what's
                known as a static class: you get and set object values by way of the
                class's name itself -- Stage -- followed by a dot, then the desired element.
                Movie clips are not static, because you can have as many copies of a movie
                clip (and as many movie clips in general) as you like. So to make use of
                MovieClip class members, you need to give your movie clip an instance name,
                which you can do via the Property inspector. Once that movie clip has an
                instance name, ActionScript can speak to it directly.

                How do you know what the movie clip is capable of? That's listed in the
                MovieClip class entry of the ActionScript 2.0 Language Reference. Objects
                are defined by classes (usually namesake classes), which establish their
                characteristics (properties), things the object can do (methods), and things
                the object can react to (events). In the Stage example, you're assigning a
                function to the Stage.onResize event. In this movie clip addition, you'll
                adjust the MovieClip._width and _height properties (or _xscale and _yscale)
                properties by way of the movie clip's instance name.

                Here's an example:

                Stage.scaleMode = "noScale";
                Stage.align = "TL";
                var stageListener:Object = new Object ();
                stageListener.onResize = positionContent;
                Stage.addListener(stageListener);

                function positionContent():Void {
                if (Stage.width > Stage.height) {
                mcLogo._width = Stage.width;
                mcLogo._yscale = mcLogo._xscale;
                } else {
                mcLogo._height = Stage.height;
                mcLogo._xscale = mcLogo._yscale;
                }
                mcLogo._x = Stage.width/2 - mcLogo._width/2;
                mcLogo._y = Stage.height/2 - mcLogo._height/2;
                }
                positionContent();

                Everything here is the same as shown in my blog -- until the
                positionContent() function. This assumes your movie clip has the instance
                name mcLogo (but it can be whatever you like, of course). First, it checks
                of the Stage is wider than it is tall. If so, it sets the width of the
                movie clip to the Stage's width. Let's say this hypothetically makes the
                clip twice its normal size. At this point, its _xscale property is 200
                (that is, 200%), and the next line sets its _yscale property by the same
                amount. That ensures that the movie clip scales equally (no squash or
                stretch). If the Stage happens to be taller than wide, the opposite occurs.
                Finally, the movie clip is centered by setting its _x property to half the
                Stage's width minus half its own width -- and same for the y axis.


                David Stiller
                Contributor, How to Cheat in Flash CS3
                http://tinyurl.com/2cp6na
                "Luck is the residue of good design."


                • 5. Re: Stretch the Stage to Fill the Browser Window??
                  kitster79 Level 1
                  Thank you so much for taking the time to respond. This is starting to make sense to me!

                  I have another question. How do you make movie clips animate in and then animate out when another button is clicked? I have tried to acheive this for so long now, and I just can't figure it out. The closest I got was in this site I created a while back...

                  http://www.corduroyblues.com

                  As you can see, when you click on one of the buttons an animated movie clip is externally loaded in. However when you click on another button it just dissapears instead of animating out (which is what I would like it to do before the next movie clip is loaded in.

                  I have struggled with this for a long time...any help would be MUCH appreciated.

                  Kit
                  • 6. Re: Stretch the Stage to Fill the Browser Window??
                    Level 7
                    Kit,

                    > This is starting to make sense to me!

                    Cool!

                    > I have another question. How do you make movie clips animate
                    > in and then animate out when another button is clicked? ... The
                    > closest I got was in this site I created a while back...
                    >
                    > http://www.corduroyblues.com

                    Aha. Okay, for something like that -- and there are usually half a
                    dozen ways to do things -- I would probably use keyframe scripts, along with
                    a variable, in the movie clips that animate in and out.

                    I don't know how you coded up or arranged that site, of course, but my
                    guess is that your nav buttons each tell a particular movie clip to load and
                    start playing. That's why these clips suddenly disappear: because you're
                    simply loading them into the same container, and as soon as the new one
                    comes in, the other vanishes. Makes sense. So you may want to shift part
                    of the responsbility of this loading onto the movie clips themselves. I'll
                    try to explain this in a way that makes sense.

                    Rather than having your button simply load a movie clip, have it set a
                    variable instead. Maybe your variable is called clipToLoad. It could be a
                    variable that sits in the main timeline and starts out empty.

                    var clipToLoad:MovieClip;

                    It's eventually going to refer to a movie clip, but it doesn't yet.

                    Now your buttons need to do a couple things: a) check if clipToLoad has
                    a value yet and b) set a value, then maybe load a movie clip. The first
                    time around, your variable will be undefined. That makes sense, because it
                    hasn't been given a value yet; it's only been declared. So if it doesn't
                    have a value, load a clip:

                    someButton.onRelease = function():Void {
                    if (clipToLoad == undefined) {
                    // clip loading code here
                    }
                    }

                    With me so far? Outside of the if() statement, you may very well be
                    doing something along these lines. From this point forward, you don't want
                    buttons to load movie clips on their own, you only want them to let Flash
                    know which movie clip to load *next*. The trigger to make this decision is
                    that if() statement, and the if() statement looks to the value of
                    clipToLoad, so ... to make sure the button knows better next time, give
                    clipToLoad a value. Watch how the event handler updates:

                    someButton.onRelease = function():Void {
                    if (clipToLoad == undefined) {
                    // clip loading code here
                    }
                    clipToLoad = movieClipA;
                    }

                    movieClipA is just a hypothetical instance name for the movie clip
                    associated with this button. You want that new part outside of the if()
                    statement, so that it happens every time. So, again ... the first time this
                    button is clicked, it loads the associated movie clip (movieClipA) and sets
                    the value of clipToLoad so that it *won't* load the movie clip next time.
                    So now we need an else.

                    someButton.onRelease = function():Void {
                    if (clipToLoad == undefined) {
                    // clip loading code here
                    } else {
                    clipToLoad.play();
                    }
                    clipToLoad = movieClipA;
                    }

                    So what's the play() about? At this point, we're on the second click.
                    This button -- or one the others in this nav (which have all been coded
                    similarly) -- will check clipToLoad and see that it's no longer undefined,
                    so it'll tell the relevant clip to play. How does it know which clip to
                    play? Well, the value of clipToLoad tells it so. (This variable, after
                    all, is a reference to one of the movie clips.)

                    Every one of these clips will have an animate-out sequence that ends in
                    a keyframe script. The keyframe script will contain whatever ActionScript
                    you're using to load these clips. There, again, it'll know which clip to
                    load because it will check the value of clipToLoad to find out. Perhaps
                    something like ...

                    this._parent.loadMovie(clipToLoad);

                    ... or whatever ActionScript you're using to load these movie clips.

                    Here's the sequence. First time around, the user clicks the button for
                    movieClipA. The if() statement checks clipToLoad, finds that it's
                    undefined, and loads movieClipA on its own, then sets the value of
                    clipToLoad to movieClipA. At this point, movieClipA loads and animates in.
                    movieClipA has a stop() action in the keyframe immediately after its
                    animate-in sequence ends. The second time around, the user clicks the
                    button for movieClipB. movieClipB's button checks the value of clipToLoad
                    and finds that it is *not* undefined: it has a value. Okay, so it goes to
                    its else clause and executes the expression clipToLoad.play(). Since the
                    value of clipToLoad is currently movieClipA, that's the clip that starts
                    playing. Then the button changes the value of clipToLoad to movieClipB.

                    someButtonA.onRelease = function():Void {
                    if (clipToLoad == undefined) {
                    // clip loading code here
                    } else {
                    clipToLoad.play();
                    }
                    clipToLoad = movieClipA;
                    }
                    someButtonB.onRelease = function():Void {
                    if (clipToLoad == undefined) {
                    // clip loading code here
                    } else {
                    clipToLoad.play();
                    }
                    clipToLoad = movieClipB;
                    }

                    After movieClipA animates out, it hits the last frame in its timeline.
                    That frame ias a script that references clipToLoad (which is now movieClipB)
                    and tells that movie clip to load.

                    Don't know if I made that clear as mud. Hope that made enough sense
                    that you can start experimenting with it. :)


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


                    • 7. Re: Stretch the Stage to Fill the Browser Window??
                      kitster79 Level 1
                      Thank you again David.

                      I thought I was following your very well explained method at first, but I have been pulling my hair out all night trying to make this work:) no fault of yours!:)...I think I'm nearly there - just not quite. The movie clips's open just fine, but they do not animate out.

                      Here is the script for two of the buttons I have so far...

                      btnServices.onRollOver = over;
                      btnServices.onRollOut = out;
                      btnServices.onRelease = function():Void {
                      if (clipToLoad == undefined) {
                      loadMovie("services.swf", "_root.services");
                      } else {
                      clipToLoad.play();
                      }
                      clipToLoad = services;
                      }

                      btnConcept.onRollOver = over;
                      btnConcept.onRollOut = out;
                      btnConcept.onRelease = function():Void {
                      if (clipToLoad == undefined) {
                      loadMovie("concept.swf", "_root.concept");
                      } else {
                      clipToLoad.play();
                      }
                      clipToLoad = concept;
                      }

                      The script I have on in the last frame of each of these external swf files is this...

                      this._parent.loadMovie(concept);

                      and...

                      this._parent.loadMovie(services);

                      Just In case you needed to look at the files, I emailed them to your
                      "stiller@quip.net" account

                      Thanks David

                      Kit

                      • 8. Re: Stretch the Stage to Fill the Browser Window??
                        Level 7
                        Kit,

                        > I thought I was following your very well explained method at first,
                        > but I have been pulling my hair out all night trying to make this
                        > work:) no fault of yours!:)...I think I'm nearly there - just not quite.

                        You were pretty close! Honestly, as detailed as I was, I could have
                        been clearer in what I was trying to communicate. I hope my previous
                        instructions didn't cause you too much grief. Here's what I saw when I
                        looked at your files -- and I hope these current observations give you
                        better insight into how this particular approach is supposed to work. I
                        think it really can make sense once you get it. I just didn't do a very
                        good job of explaining.

                        I noticed that your clipToLoad variable was in the main timeline, but
                        your nav button code was inside a movie clip with the instance name navBar.
                        Already, there's a potential disconnect here, because the variable and code
                        referring to it are in two different locations. In order for navBar's
                        keyframe code (child of the main timeline) to see the main timeline's
                        keyframe code, you could have to use something like this:

                        this._parent.clipToLoad;

                        Does that make sense? Because, from navBar's point of view, clipToLoad
                        is located in the parent timeline (the parent movie clip) to the timeline
                        it's in.

                        Rather than deal with that, I just moved the clipToLoad variable
                        declaration inside navBar.

                        Next, I gave you a misleading suggestion by declaring clipToLoad as a
                        MovieClip (var clipToLoad:MovieClip), and further, by suggesting the line
                        this._parent.loadMovie(clipToLoad); in your loaded clips ... that
                        loadMovie() line simply wouldn't work, because the loadMovie() method
                        excepts a string as its parameter, and clipToLoad isn't a string. My
                        apologies for that.

                        There are two different versions of loadMovie() in AS2. One of them is
                        the stand-alone function, which requires two parameters: loadMovie("SWF to
                        load", "movie clip to load it into"). The other is a method of the
                        MovieClip class, which only needs one parameter, because the part about
                        "movie clip to load it into" is specified by the object reference prefix.
                        Meaning, you call the method *on* something. For example ...

                        movieClipReference.loadMovie("some SWF");

                        ... rather than ...

                        loadMovie("some SWF", movieClipReference);

                        I personally prefer the method approach. Take a look at the following
                        changes:

                        var clipToLoad:String = "";

                        btnServices.onRollOver = over;
                        btnServices.onRollOut = out;
                        btnServices.onRelease = function():Void {
                        if (clipToLoad == "") {
                        this._parent._parent.container.loadMovie("services.swf");
                        } else {
                        this._parent._parent.container.play();
                        }
                        clipToLoad = "services.swf";
                        }

                        This time, clipToLoad is declared as an empty string. Sort of the same
                        concept as before, but instead of undefined, the variable has an initial
                        value; it's just an empty value. You already have custom over() and out()
                        functions for the onRollOver and onRollOut events. The onRelease event has
                        the revisions. Notice that the if() checks for an empty string. If it's
                        empty, none of the buttons has been clicked yet, so it loads a particular
                        SWF (in this case, services.swf).

                        A big difference is the term "container" in the mix. You don't need
                        more than one movie clip symbol to act as your container. I deleted the
                        extras in your file and left one intact, giving it the instance name
                        container. From the point of view of this button, container is two objects
                        up. That is, "this" refers to the btnServices itself. The expression
                        "this._parent" refers to the timeline in which the button sits -- navBar.
                        Therefore, "this._parent._parent" refers to the timeline in which navBar
                        sits, and that's the timeline that has container. That's why the necessary
                        object reference here is this._parent._parent.container. That's the object
                        reference needed to invoke MovieClip.loadMovie() on container, and also the
                        object reference needed to tell container to play. (When container loads
                        services.swf and services hits that stop() action in its own timeline,
                        container.play() gets services' timeline rolling again.) Finally,
                        clipToLoad is set to the relevant string, services.swf.

                        In services's timeline, the last keyframe goes like this:

                        this.loadMovie(this._parent.navBar.clipToLoad);

                        Why? Because once services.swf loads, it *becomes* the timeline of
                        container. Therefore, from its point of view, it (container) needs to load
                        a new SWF when it hits this last frame. The SWF to load is specified in the
                        variable clipToLoad, and from container's point of view, clipToLoad lives in
                        this._parent.navBar, where it was declared.


                        David Stiller
                        Co-author, Foundation Flash CS3 for Designers
                        http://tinyurl.com/2k29mj
                        "Luck is the residue of good design."


                        • 9. Re: Stretch the Stage to Fill the Browser Window??
                          kitster79 Level 1
                          Fabulous! I really appreciate your time and patience.

                          Could you tell me how to keep the loaded clips centered to the stage when the browser window resizes?

                          Thanks

                          Kit
                          • 10. Re: Stretch the Stage to Fill the Browser Window??
                            kitster79 Level 1
                            Never mind David. I got it:)
                            • 11. Re: Stretch the Stage to Fill the Browser Window??
                              Level 7
                              Sweet! :)


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


                              "kitster79" <webforumsuser@macromedia.com> wrote in message
                              news:fjqhun$3ib$1@forums.macromedia.com...
                              > Never mind David. I got it:)