Groups | Blog | Home
all groups > flash actionscript > august 2006 >

flash actionscript : tween onresize of browser window


microes
8/12/2006 6:27:04 PM
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

David Stiller
8/12/2006 7:27:26 PM
microes,

[quoted text, click to view]

Okay.

[quoted text, click to view]

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.

[quoted text, click to view]

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.

[quoted text, click to view]

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.

[quoted text, click to view]

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."

David Stiller
8/12/2006 9:23:49 PM
microes,

[quoted text, click to view]

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."

microes
8/13/2006 12:44:47 AM
i wondering how to use this function with a easing tween class
drop the onEnterFrame
AddThis Social Bookmark Button