Comunidad de diseño web y desarrollo en internet

Contenedores escalables en Actionscript 2

Me pidieron hacer una herramienta para escalar o modificar el tamaño de unos clips jalando unos puntos que estarían en cada una de las 4 esquinas de estos clips, igual que como se hace en paint, illustrator o con la herramienta transformación libre de flash para escalar elementos. En Cristalab encontré un ejemplo muy interesante, que nos puede ayudar a solucionar este problema, analizaremos el código y explicaré el proceso de diseño paso por paso.

Este ejemplo solo sirve para escalar desde el cuadro de la esquina inferior derecha. Como ya tenemos parte del trabajo hecho, vamos a tratar de entender el código y desmenuzarlo todo para que quede entendido

Creamos un nuevo documento .fla Actionscript 2.0


Ahora en el escenario, creamos un clip de película vacío ( CTRL+F8 ), y lo llamaremos "mc1”. Dentro de este, con la herramienta rectángulo (R), dibujamos un cuadrado, lo seleccionamos y lo convertimos en símbolo de película (para ello, Modificar>convertir en símbolo ó ( F8 ). Lo llamaremos “mc2”, ahora tenemos a dos mcs, mc2 envasado dentro de mc1, luego sin salirnos del mc1, crearemos otro símbolo (que puede ser un cuadrado de 6x6), lo llamaremos “mc3”, pero especificaremos el tipo como botón para que actúe como tal.

Luego hacemos 4 copias del mc3, y los ubicamos en las esquinas del cuadrado (mc2). Luego los nombramos desde la esquina superior izquierda en sentido de las manecillas del reloj (Propiedades>Nombre de instancia), así: izA_btn, deA_btn, deB_btn, izB_btn. A la instancia del mc2 lo nombraremos “contenedor”, que será como el recuadro donde se enmarca la foto.

Ya nombrados los cuatro botones y la instancia del mc2, volvemos al escenario (Doble click fuera del espacio del clip ó Escena1), como veras no hay nada en el escenario, pero no te preocupes que lo que hemos creado lo hicimos para la biblioteca, de allí, arrastraremos la instancia del mc1 hacia el escenario, lo nombraremos “char”, insertamos una nueva capa y en su primer fotograma insertamos el siguiente código:

Código con comentarios del ejemplo

Código :

function scale(char) {
   char.onEnterFrame = function() {
      char._width = char._parent._xmouse;
      char._height = char._parent._ymouse;
      charie._parent.deB_btn._x = char._width;
      char._parent.deB_btn._y = char._height;
      char._parent.deA_btn._x = char._width;
      char._parent.deA_btn._y = char._y-6;
      char._parent.izB_btn._y = char._height;
   };
}
 function stopScale(char) {
   delete char.onEnterFrame;
}
char.contenedor.onPress = function() {
   this._parent.startDrag();
};
char.contenedor.onRelease = function() {
   stopDrag();
};
char.deB_btn.onPress = function() {
   scale(char.contenedor);
};
char.deB_btn.onRelease = char.deB_btn.onReleaseOutside=function () {
   stopScale(char.contenedor);
}; //Código completo, fotograma 1: [copiar/pegar]


La función (método) llamada scale, se encarga de ubicar cada uno de los botones en la esquina correspondiente del “contenedor”, y dimensiona al envase char, cada vez que se repite el evento onEnterFrame.

Código :

// funcion escalar
function scale(char) {
    //evento onEnterFrame
   char.onEnterFrame = function() {
      char._width = char._parent._xmouse;
      char._height = char._parent._ymouse;
      char._parent.deB_btn._x = char._width;
      char._parent.deB_btn._y = char._height;
      char._parent.deA_btn._x = char._width;
      char._parent.deA_btn._y = char._y-6;
      char._parent.izB_btn._y = char._height;
   };
}//Cierre de la funccion scale


La función stopScale, quiebra el ciclo del evento onEnterFrame del objeto char, lo cual detiene el proceso de iterado.

Código :

//función stopScale
function stopScale(char) {
   delete char.onEnterFrame;
}//cierre de la function stopScale


Al presionarse el “mc2” que está contenido dentro del “mc1”, nombrado “contenedor”, se llama el método startDrag(); que sirve para que se puedan mover con el mouse de un lugar a otro.

Código :

char.contenedor.onPress = function() {
   this._parent.startDrag();
};//cirre del detector de evento onPress del objeto cha.contenedor


Al darle clic sobre el contenedor el detector del evento onRelease del objeto char.contenedor, llama al método stopDrag(); que detiene el efecto de moverse del startDrag();

Código :

char.contenedor.onRelease = function() {
   stopDrag();
};


El detector del evento onPress que se destina al boton char.deB-btn llama a la función Scale(argumento); y le pasa al objeto char.contenedor como argumento para efectuar las sentencias sobre este, y el evento onRelease, que llama a la función stopScale(argumento), que se encarga de detener el ciclo del onEnterFrame de la función Scale(argumento);

Código :

char.deB_btn.onPress = function() {
   scale(char.contenedor);
};
char.deB_btn.onRelease = char.deB_btn.onReleaseOutside=function () {
   stopScale(char.contenedor);
};


Por último, solo queda probar la película y ver cómo funciona el ejemplo. Control > Probar película ó (CTRL+ENTER).

Hasta aquí termina la primera lección sobre contenidos escalables con ActionScript 2.0. En la lección # 2, estaremos analizando la forma de complementar el ejemplo, y cumplir con los requerimientos deseados.

¿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.

Publica tu comentario

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