Cristalab

Objetos elásticos con propiedades de ancho y alto dinámico

Por: Cep + Otros tutoriales de Cep + 9 de Septiembre del 2004

Autor
avatar
Cep
clabLevel: 1221
1 Tutoriales
1 Ejemplos
Antes de empezar es necesario saber el manejo de los Componentes UI.
Usaremos solo los componetes NumericStepper y Button

Recordemos que la propiedad scale (_xscale, _yscale) no es lo mismo que _height y _width. La propiedad _height y _width alteran el ancho y el alto de tu clip. En cambio la propiedad _xscale e _yscale es en porcentaje.

Dibujamos cualquier cosa, en mi caso, un cuadrado y lo convertimos a MovieClip seleccionandolo y oprimiendo F8

Le damos nombre de instancia en el escenario: en este caso se llamara cuadro

Luego, del panel de componentes arrastramos el componente Button y el componente NumericStepper y los borramos del escenario; esto con el fin de tenerlos en nuestra libreria para que funcione el siguiente codigo.

En el primer frame de nuestra pelicula ponemos este codigo

//Aqui estamos creando la funcion
cambiarXY = function () {
	/* Lo que hace el evento "onEnterFrame es que en cada cuadro (frame) de
	tu pelicula hara las acciones indicadas*/
this.onEnterFrame = function() { /* this.cuadro._xscale se refiere a el objeto, en este caso MovieClip y su nombre de instancia es "cuadro" y a su propiedad _xscale. Esta es la formula del efecto easing: objeto._propiedad += (valor+objeto._propiedad)/velocidad */
this.cuadro._xscale += (X-this.cuadro._xscale)/3; /*Aqui hacemos que revise si el el valor de la propeidad del objeto es la misma de la variable */
this.cuadro._yscale += (Y-this.cuadro._yscale)/3; //Si el valor de la propiedad es igual a la variable quitamos el evento "onEnterFrame"
if (Math.abs(X-this.cuadro._xscale)<3 && Math.abs(Y-this.cuadro._yscale)<3) {
delete this.onEnterFrame;
}
};
};
Ahora vamos con los componentes
/* attachamos los componentes (mandamos llamar a los componentes que estan en la libreria) y les
	asignamos un nombre y un nivel (no pueden estar en el mismo nivel) */
attachMovie("Button", "btn", 1);
//attachtMovie (El nombre del objeto que esta en nuestra biblioteca, el nuevo nombre, el nivel);
attachMovie("NumericStepper", "num1", 2);
attachMovie("NumericStepper", "num2", 3);
//Aqui cambiamos sus propiedades
btn._x = 135;
btn._y = 174;
btn.setSize(54, 20);
btn.fontFamily = "_sans";
btn.fontSize = 10;
btn.label = "Cambiar!";
num1._x = 9;
num1._y = 173;
num1.setSize(55, 13);
num2._x = 74;
num2._y = 173;
num2.setSize(55, 13);
num1.maximum = 150;
num1.minimum = 0;
num1.stepSize = 1;
num1.value = 100;
num2.maximum = 150;
num2.minimum = 0;
num2.stepSize = 1;
num2.value = 100;
Ahora lo mas importante el listener
//Creamos un nuevo objeto; miClick
miClick = new Object();
//Al objeto lo hacemos funcion en el evento "click" (este evento solo funciona en los componentes UI)
miClick.click = function() {
/* Tomamos el valor de los numericsteppers y se los pasamos a las variables X e Y (son las que indicaran el valor que queremos darle a la propiedad del objeto) */
X = num1.value;
Y = num2.value;
//Aqui llamamos al a función cambiarXY
cambiarXY();
};
//Y ahora le añadimos la funcion a nuestro boton
btn.addEventListener("click", miClick);
Espero que les sirva de algo esto :P
Y por favor mandenme un email a cep@nodani.com o a cepina@gmail.com si tienen cualquier comentario
Un Saludo Cep

Información adicional

Ejemplo del tutorial
Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Tutoriales relacionados