Redimensionar y posicionar con easing

0 - - 07/03/2006 00:00:00

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.

Descargar archivo: Descargar

Deja tu comentario

  • El comentario debe estar relacionado con el contenido de la entrada.
  • Comentarios ofensivos, con spam o con lenguaje inapropiado serán eliminados.

captcha