Groups | Blog | Home
all groups > flash actionscript > march 2004 >

flash actionscript : Tween _width and _height independently


willet2
3/21/2004 9:28:39 PM
Given the scenario below, how would I use the Tween class to update the _width
and _height property of a MovieClip independently? I can make both update to
the same value, but I want these properties to be adjusted independently.



import mx.effects.*
import mx.transitions.easing.*

listenerObject = new Object();
listenerObject.click = function(eventObject) {
_root.tw = new Tween(_root, _root.canvas_mc._width, eventObject.target.label,
700);
_root.tw.easingEquation = Bounce.easeOut;
}
btn0.addEventListener("click", listenerObject);
btn1.addEventListener("click", listenerObject);
btn2.addEventListener("click", listenerObject);

this.onTweenUpdate = function(value) {
for (var i=0; i<80; i++) {
this.canvas_mc._width = value;
this.canvas_mc._height = value;
}
}
David Stiller
3/22/2004 11:07:57 AM
willet2,

[quoted text, click to view]

It's totally up to you. :) You've written a function that accepts one
argument (in this case, "value"). You could write this function to accept
two arguments (eg., valueW and value H) ...

this.onTweenUpdate = function(valueW, valueH) {
for (var i=0; i<80; i++) {
this.canvas_mc._width = valueW;
this.canvas_mc._height = valueH;
}
}

.... or use math to adjust one of them ...

this.onTweenUpdate = function(value) {
for (var i=0; i<80; i++) {
this.canvas_mc._width = value;
this.canvas_mc._height = value * 2;
}
}

.... or, heck, you could write two functions altogether ...

this.onTweenUpdateWidth = function(value) {
for (var i=0; i<80; i++) {
this.canvas_mc._width = value;
}
}

this.onTweenUpdateHeight = function(value) {
for (var i=0; i<80; i++) {
this.canvas_mc._height = value;
}
}


David
stiller ( at ) quip ( dot ) net

willet2
3/22/2004 4:31:55 PM
The callback isn't specified; I wrote this function becasue the Tween class
defaults to this as the callback. Is there a way to specify the callback that
should be executed upon completion? Then I could call separate functions for
each property, _width and _height.

Mike
David Stiller
3/22/2004 4:35:46 PM
Sorry, man,

At the moment, looking at this code is hurting my head. -- I'm reading
through the mx.effects and mx.transitions classes.

I've used these transitions -- many of which (if not all) are taken
directly from Robert Penner (http://www.robertpenner.com/easing/) -- but
haven't used the mx.effects.Tween class myself.

Check out this UltraShock article
(http://forums.ultrashock.com/forums/showthread.php?s=&threadid=5009&highlig
ht=Penner+easing). Penner spells out his easing equations and provides a
simple example for how to implement them ...

onClipEvent (load) {
start = this._x;
change = 100;
duration = 20;
t = 0;
}

onClipEvent (enterFrame) {
t++;
if (t <= duration) this._x = Math.easeInOutQuad(t, start, change,
duration);
}

.... note: this is an old example which uses the AS1 version of the
equasions, but this out to give you a start. No need to use MM's Tween
class if it's too restrictive. Try some variation of the above example (no
callbacks, just whatever you want -- direct functions).


David
stiller ( at ) quip ( dot ) net



[quoted text, click to view]

David Stiller
3/22/2004 5:19:26 PM
Good deal!


David
stiller ( at ) quip ( dot ) net


[quoted text, click to view]

willet2
3/22/2004 9:50:50 PM
In my quest to rid my view code of complexity better reserved for the model, I
searched for and found an elegant solution that uses Penner's equations:

http://proto.layer51.com/d.aspx?f=1142

It's possible to specify a callback, delay time, etc. Very flexible. Check
it out if you want to avoid reinventing the wheel.

Thanks for your time on this,

Mike

AddThis Social Bookmark Button