CODEWITHSUNDEEP
flashactionscript-3transformtween
user359519
user359519

Reputation: 711

Shape tween/transform while maintaining bottom (Y) position?

I'm trying to shape tween a movie clip of a rocket blasting off. I want it to "squash" before liftoff, and then "stretch" as it lifts off.

When I tween this on the timeline with the transform tool, I can "squash" the rocket, and the base of the rocket stays on the "ground". This is what I want. However, for reasons I won't go into, I need to do this in AS3, as opposed to on the timeline. When I use a "height" tween, though, the movieclip height changes, but it shrinks/stretches at the bottom (locked at the top).

Is it possible to do what I want with the tween class? Do I need to use something besides "height"?

Should I use a transform matrix, instead? If I use a transform matrix, can I tween it? (I don't have very much experience with transform matricies.)

Here's the tween I'm using for the stretch:

var tweenPlayer1:Tween = new Tween(mc_player, "height", Strong.easeOut, mc_player.height, mc_player.height+100, 2, true);

Upvotes: 0

Views: 794

Answers (3)

user359519
user359519

Reputation: 711

Here's another approach, as I described, above. This has the same effect as changing the registration point without the headache of dealing with child components and layers.

Based on the tutorial that I found here: http://theflashconnection.com/content/how-to-change-registration-point-as3#viewSource

var heightChange:int = 200;

setRegPoint(mc_player, 0, mc_player.height);

var myTween:Tween = new Tween(mc_player,"height",Strong.easeOut,mc_player.height,mc_player.height - heightChange,2,true);

function setRegPoint(obj:DisplayObjectContainer, newX:Number, newY:Number):void {
    //get the bounds of the object and the location 
    //of the current registration point in relation
    //to the upper left corner of the graphical content
    //note: this is a PSEUDO currentRegX and currentRegY, as the 
    //registration point of a display object is ALWAYS (0, 0):
    var bounds:Rectangle = obj.getBounds(obj.parent);
    var currentRegX:Number = obj.x - bounds.left;
    var currentRegY:Number = obj.y - bounds.top;

    var xOffset:Number = newX - currentRegX;
    var yOffset:Number = newY - currentRegY;
    //shift the object to its new location--
    //this will put it back in the same position
    //where it started (that is, VISUALLY anyway):
    obj.x += xOffset;
    obj.y += yOffset;

    //shift all the children the same amount,
    //but in the opposite direction
    for(var i:int = 0; i < obj.numChildren; i++) {
        obj.getChildAt(i).x -= xOffset;
        obj.getChildAt(i).y -= yOffset;
    }
}

Upvotes: 0

The_asMan
The_asMan

Reputation: 6402

There probably is a better way to handle startingYandHeight but this will work for you

import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

var startingYandHeight:Number = mc_player.y + mc_player.height;

var myTween:Tween = new Tween(mc_player, "height", Strong.easeOut, mc_player.height, mc_player.height + 100, 2, true);
myTween.addEventListener( TweenEvent.MOTION_CHANGE, onChange);

function onChange( e:TweenEvent ):void{
    mc_player.y = startingYandHeight - mc_player.height;
}

Upvotes: 1

vanhornRF
vanhornRF

Reputation: 326

The issue probably lies with the where you have the graphic anchored inside of your movieclip object in your FLA. If you adjusted the graphic so that is was bottom justified, for example graphic.y = -graphic.height inside of the movieclip, scaling on the Y axis should simply push the graphic from the bottom and not from the top.

Upvotes: 0

Related Questions