miércoles, noviembre 26, 2008

Flash as3 - Tutorial II - Propiedades y Programacion Basica

Avanzando más en el código, nos dispondremos a ver las características principales de los objetos de Flash, los cuales debemos tener en mente al momento de programar, e incluso de hacer una animación por código.

Básicamente, cuando estamos en Flash, tenemos la capacidad de modificar las propiedades de cada objeto, por medio del código; esto será visible en tiempo de ejecución, y no durante el tiempo de diseño; estas propiedades pueden ser tan simples como la coordenada X y Y, o el color del objeto, o en algo más complicado, utilizando el MatrixTransformer para obtener otros resultados.

Considero que la forma más rápida de aprender el código, es utilizando los objetos Flash que han existido por un largo tiempo, y luego se puede ir a las classes superiores, o luego heredar de estas. Los objetos son Button en as2 y SimpleButton en as3, y MovieClip.

Antes de empezar con un ejemplo, tengo que hacer referencia sobre donde se coloca el código de action script, y esto se hace en un solo layer, que se deja en blanco solo para que esté el código, no debe existir ningún objeto de ningún tipo en esta layer.


Layer Actions y Panel de Código Fig 1

Para ingresar el código en esta layer, seleccione con el mouse el primer fotograma o keyframe, indicado en la Fig 1 en color negro y bajo el numero 1 de la linea de tiempo o timeline, y luego presione la tecla F9. El panel aparece como una ventana de tab adherible al escenario, y con una leyenda que dice Actions-Fotograma dependiendo del idioma.

Si necesita ingresar una nueva layer, presione el primer botón indicado en la Fig 2, y aparecerá una nueva capa sobre la capa existente, por costumbre, la layer actions, va sobre todas las layers, para fácil ubicación, asi que la layer se puede seleccionar y arrastrar con el mouse sobre la nueva layer.


Insertar Nueva Layer Fig 2


Para nuestro ejemplo haremos dos objetos, un Button o SimpleButton, y un MovieClip, agregaremos funcionalidad al Button, para que modifique al MovieClip. El Button será a base de un shape cuadrado azul y convertido con F8, y el MovieClip será a base de un shape cuadrado rojo y convertido con la tecla F8; el Button se llamará my_btn, y el MovieClip my_mc; estos sufijos son necesarios para cada instancia (_mc, _btn) para forzar al Flash a desplegar las propiedades inherentes a cada Class, si bien se pueden intercambiar, la idea es tener el que corresponde para obtener las propiedades correctas.

El nombre de cada objeto se coloca en el panel de propiedades (Fig 3), primero se selecciona el objeto y luego se presiona Ctrl-F3 si el panel no está visible, y el nombre que usaremos en el código se coloca en la caja de texto que dice en color gris claro.


Insertando nombre de instancia Fig 3

Colocados los nombres desplegamos el panel de código de actionscript, seleccionado el primer frame del layer actions y presionando F9, luego digitamos el siguiente código, de acuerdo a la versión que manejemos, as2, o as3:

Ambos códigos hacen lo mismo, pero desde puntos de vista a futuro, el código as3 es mas útil para un programador, pero el código as2, es más útil para un diseñador, ya que es más cercano a nuestro lenguaje.


Aquí, al boton le decimos que cuando el Event de Mouse Click se realice sobre él, se ejecute la function onClick.

Luego la function onClick tiene un parametro e de tipo MouseEvent, éste carga con un monton de propiedades necesarias que hacen referencia al objeto que realizó y sobre el que se realiza la accion, por ejemplo, currentTarget, es el boton al que hicimos click.

En la definición del Function llamamos directamente a my_mc, y variamos una de sus propiedades (rotation), la incrementamos cada vez en 25;
  • as3


my_btn.addEventListener(MouseEvent.CLICK,onClik)

function onClik(e:MouseEvent){
var boton:SimpleButton = e.currentTarget as SimpleButton
trace(boton.name)
my_mc.rotation += 25;
}


Aqui es casi lo mismo, antes, en as2, para definirse al objeto que llama a la Function, usamos this, y el evento está dentro del mismo botón, así que asignamos una Function sin nombre y dentro ponemos lo que necesitamos que deba suceder.
  • as2


my_btn.onPress = function(){
trace(this)
my_mc._rotation += 25;
}


Presione Control Enter y vea el resultado al presionar el botón.

Descargar Archivos del tutorial






2 comentarios:

aquiles dijo...

Hoy me pusieron a programar en AS2 y casi me pego un tiro! Nooooo No lo soporto!

curso paginas web dijo...

Muy interesante. Hoy en día donde todas las empresas necesitan de un web para promocionar sus productos o servicios, aprender a programar puede brindar los conocimientos para encontrar trabajo rápidamente aprovechando lo requerida que es la labor del programador profesional en la actualidad.