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






lunes, noviembre 24, 2008

Flash as3 - Tutorial I - Bases

Si estás leyendo esto seguro ya has visto alguna animación en flash y quieres hacer algo por que te ha emocionado desde hace tiempo, así que no perdamos tiempo, empecemos.

En flash se trabaja en dos conceptos separados que se pueden unir dependiendo de tanto tiempo tengas para hacer una o la otra, estas son:

  • animación: Esto es lo que nos atrae por primera vez a flash, una buena animación con increíbles efectos. Diseñadores y cualquier persona en general toman la decisión de aprender flash por estas razones.
  • programación: esta es la menor de las razones, pero es la razón por las cuales los que se decidieron por la primera claudican rápidamente, ya que la van a necesitar, pero es la razón por las cuales muchas personas pueden ver el potencial más allá de una simple animación.
Así que si para este punto ud no sabe programación, mejor le interesará hacer cosas con Photoshop o Corel Draw.

Cosas Basicas de flash

En flash el escenario es su universo, cada layer representa un plano en donde usted puede colocar objetos como dibujos en una hoja de papel, cada layer ocupa una posición desde abajo hacia arriba, y cada layer puede ser cambiada de posición, la logica de esto va desde, una animación en la que un árbol va frente a una montaña, y en programación con el hecho ejemplo base de que no puedes hacerle click a un botón si el cursor está abajo.


Cada objeto que dibujemos o pongamos en el escenario puede tener su propio universo manipulable de la misma forma o parecida que el escenario raíz, dependiendo de que tipo de objeto le digamos que sea, asi tenemos

  • Shapes: dibujos hechos a mano alzada con el flash, figuras, formas, rectángulos, que se ven afectados unos a otros si cada shape se toca entre si.
Flash shapes fig 1
Flash shapes fig 1
  • Groups: presionando CTL-G tomamos uno o mas objetos y podemos agruparlos para manipularlos en modo de diseño como uno solo{atención que solo dije modo de diseño}. Al seleccionar un grupo se crea un marco de color alrededor que simboliza la unión de estos; su contenido puede ser accesado haciendo doble click.
Flash graphics group Fig 2
Flash graphics group Fig 2


  • Graphics: es un objeto especial con la propiedad de contener una animación sin interactuar este objeto con el código, seleccionamos un objeto y presionamos F8, y seleccionamos Graphic y damos aceptar, ahora puedes elegir cambiarle el color a este objeto en tiempo de diseño, si la animación se puede reproducir una vez, indefinidamente, o si solo es un fotograma estático.Cambiando color a un Graphic Fig 3
Cambiando color a un Graphic Fig 3
  • Button: un tipo con mas propiedades, se puede llamar a cada uno específicamente desde el código, se pueden establecer estados de comportamiento, como que pasará cuando se pone el mouse encima, o que pasará cuando se quita el mouse, o se presiona este, esto en animación, otros comportamientos se pueden establecer por medio de código. Selecciona un shape, presiona F8 selecciona Button y ya tienes un botón.
Dentro de un Button Fig 4


  • MovieClip: El objeto mas usado en flash, puede tener todas la propiedades que has leído en los objetos anteriores, incluso su propio universo como el escenario( stage) donde puedes poner otros objetos como los anteriores. Se puede accesar por codigo al igual que un button. Selecciona un shape, presiona F8 selecciona MovieClip y ya tienes uno.

Creando un MovieClip a partir de un Shape Fig 5


Buttons y MovieClips se pueden llamar desde el código, y manipular todas sus propiedades según la ocasión.

Propiedades de un Button Fig 5Propiedades de un Button Fig 6

Cada que creas un Symbol de estos se agrega a la Biblioteca (F11), puedes hacer copias de estos en el escenario arrastrandolos a este, pero cada que haces esto puede ser una ventaja o desventaja segun la ocasion, cada symbol por debajo es el mismo, asi que si lo modificas por debajo se reflejará en todos, asi que se debe pensar con anterioridad.

Cambiando al Button internamente
Cambiando al Button internamente
todos los demás se modifican. Fig 7

Esta ha sido la primera parte del tutorial, cualquier duda será bien recibida, y podrá también servir para crear la siguiente parte del tutorial.
Cada vez iremos progresando en animación, código básico y avanzado.

Espero haya sido de utilidad.