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.

No hay comentarios.: