Este tutorial se lo tengo que agradecer a Jorge (alias Sabatico) que ha realizado una interesante aportación al tutorial Redimensionar con easing. Aprovecho para decir que cualquier colaboración es bienvenida y hará que poco a poco este sitio se convierta en una referencia útil para todos.
Demos paso al tutorial:
1.- Creamos un rectángulo que convertimos en clip de película y al que asignamos como nombre de instancia "caja_mc".
2.- Creamos tres botones a los que nombramos: "btn1", "btn2" y "btn3"
3.- En un fotograma (aquí está la modificación):
//Establecemos las variables,
//esta vez agregamos dos variables más para la posición
//horizontal y vertical, es decir, x e y
var FinAncho = caja_mc._width;
var FinAlto = caja_mc._height;
var FinX = caja_mc._x;
var FinY = caja_mc._y;
//Variando el valor de la variable var vel,
//podemos manejar la rapidez de nuestro efecto
var vel = 4;
//Creamos una funcion para cambiar
//el valor de las variables, pero esta vez con más valores y variables
function Redimensionar(w, h, x1, y1) {
FinAncho = w;
FinAlto = h;
FinX = x1;
FinY = y1;
}
// usamos una ecuación de "easing"
// para redimensionar y reposicionar la caja
// cuando las variables FinAncho, FinAlto ,FinX y Finy cambien.
caja_mc.onEnterFrame = function() {
this._width += (FinAncho-this._width)/vel;
this._height += (FinAlto-this._height)/vel;
this._x += (FinX-this._x)/vel;
this._y += (FinY-this._y)/vel;
}
// Usamos los botones para establecer los valores de
// ancho, alto, posición x y posición y repectivamente.
btn1.onRelease = function() {
Redimensionar(300, 100, 50, 20);
};
btn2.onRelease = function() {
Redimensionar(150, 150, 100, 50);
};
btn3.onRelease = function() {
Redimensionar(50, 50, 200, 150);
};
//Esta vez también hemos variado
//la cantidad de fotograma por segundo para hacer
//que el efecto se vea más suave. Hemos usado el valor de 30 fps.
Este sitio, http://www.ihookstudios.com, está hecho con esta técnica, eso sí que algo mejorada pero como idea puede ser un buen punto de partida.





