A Flash Developer Resource Site

Results 1 to 7 of 7

Thread: A$&*%HFG SPRING effect!?! How!!??

  1. #1
    Member
    Join Date
    Apr 2006
    Posts
    49

    A$&*%HFG SPRING effect!?! How!!??

    Grrrrrr. This is driving me crazy. I've been searching high and low for a tutorial on how to achieve this awesome spring effect on the buttons/clips when you resize the screen.

    http://www.refune.com/index_main.html

    Does anyone have any idea how to do this?? It's the last bit I need to finish my project!!! Grrr. Thanks

  2. #2
    Senior Member
    Join Date
    Nov 2001
    Posts
    1,145
    I think that's the elastic tween class.

    Here's tut: http://www.kirupa.com/developer/actionscript/tween.htm

  3. #3
    Member
    Join Date
    Apr 2006
    Posts
    49
    Ahh, excellent.

    So far I've got this:

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.Bounce;
    
    // set stage scaling
    Stage.scaleMode = "noScale";
    Stage.align = "TL";
    
    // tween variables
    var tweenX:Tween;
    var tweenY:Tween;
    
    // resize event
    Stage.addListener(this);
    function onResize(){
    	// stop any tweens if playing
    	tweenX.stop();
    	tweenY.stop();
    	// set up new tweens to move to center of stage
    	tweenX = new Tween(mcRec, "_x", Bounce.easeOut, mcRec._x, Stage.width/2, 20, false);
    	tweenY = new Tween(mcRec, "_y", Bounce.easeOut, mcRec._y, Stage.height/2, 20, false);
    }
    
    // immediately fit to current size
    onResize();

    This will successfully get my movieClip to always stay centered in the screen, and bounce there nicely on a resize. But how do I specify the clip to start at, say, the upper left corner - then bounce back to that exact spot on a resize? I've tried various bits of code, but nothing works so far... Tnx.

  4. #4
    Member
    Join Date
    Apr 2006
    Posts
    49
    *bump*

    Can anyone point me in the right direction?

  5. #5
    :
    Join Date
    Dec 2002
    Posts
    3,518

    Maybe you can adapt this to what you are trying to do...

    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.Bounce;
    // set stage scaling
    Stage.scaleMode = "noScale";
    Stage.align = "TL";
    // tween variables
    var tweenX:Tween;
    var tweenY:Tween;
    // resize event
    Stage.addListener(this);
    function onResize() {
    	// stop any tweens if playing
    	tweenX.stop();
    	tweenY.stop();
    	// set up new tweens to move to center of stage
    	tweenX = new Tween(mcRec, "_x", Bounce.easeOut, mcRec._x, Stage.width * mcRec.perX, 20, false);
    	tweenY = new Tween(mcRec, "_y", Bounce.easeOut, mcRec._y, Stage.height * mcRec.perY, 20, false);
    }
    // immediately fit to current size
    onResize();
    mcRec.perX = mcRec._x / Stage.width;
    mcRec.perY = mcRec._y / Stage.height;

  6. #6
    Member
    Join Date
    Apr 2006
    Posts
    49
    Thanks. That's close to what I'm after, but the clips don't go back to their original position. They seem to go to a relative one. The site I posted above has exactly what I'm trying to achieve, but nothing I try seems to work: keeping the clips in exact the same spot. On a screen resize, the buttons should bounce back to their original XY distance from the edge of the screen. Man, this is tough. I've been pouring over threads for some way to do this but no luck.

  7. #7
    :
    Join Date
    Dec 2002
    Posts
    3,518
    Code:
    import mx.transitions.Tween;
    import mx.transitions.easing.*;
    stop();
    // set stage scaling
    Stage.scaleMode = "noScale";
    Stage.align = "TL";
    // tween variables
    var tweenX1, tweenX2;
    var tweenY1, tweenY1;
    mcBotLeft.pinX = mcBotLeft._x;
    mcBotLeft.pinY = Stage.height - mcBotLeft._y;
    mcBotRight.pinX = Stage.width - mcBotRight._x;
    mcBotRight.pinY = Stage.height - mcBotRight._y;
    // resize event
    Stage.addListener(this);
    function onResize() {
    	// stop any tweens if playing
    	tweenX1.stop();
    	tweenY1.stop();
    	tweenX2.stop();
    	tweenY2.stop();
    	tweenX1 = new Tween(mcBotLeft, "_x", Bounce.easeOut, mcBotLeft._x, mcBotLeft.pinX + 30, 0.5, true);
    	tweenY1 = new Tween(mcBotLeft, "_y", Bounce.easeOut, mcBotLeft._y, Stage.height - mcBotLeft.pinY - 30, 0.5, true);
    	tweenX1.onMotionFinished = function() {
    		tweenX1.continueTo(mcBotLeft.pinX, 0.5);
    	};
    	tweenY1.onMotionFinished = function() {
    		tweenY1.continueTo(Stage.height - mcBotLeft.pinY, 0.5);
    	};
    	tweenX2 = new Tween(mcBotRight, "_x", Bounce.easeOut, mcBotRight._x, Stage.width - mcBotRight.pinX - 30, 0.5, true);
    	tweenY2 = new Tween(mcBotRight, "_y", Bounce.easeOut, mcBotRight._y, Stage.height - mcBotRight.pinY - 30, 0.5, true);
    	tweenX2.onMotionFinished = function() {
    		tweenX2.continueTo(Stage.width - mcBotRight.pinX, 0.5);
    	};
    	tweenY2.onMotionFinished = function() {
    		tweenY2.continueTo(Stage.height - mcBotRight.pinY, 0.5);
    	};
    }
    // immediately fit to current size
    onResize();

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center