Comunidad de diseño web y desarrollo en internet online

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

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

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate