En este artículo vamos a ver cómo deben encarar su primer proyecto en flash un diseñador y un programador, y entenderemos por qué una cosa no debe ir reñida con la otra. Además servirá como trampolín a una serie de tutoriales donde realizaremos un remake de un famoso juego de plataformas…

Es por su filosofía, admitámoslo. Desde que Flash empezó a integrar código dentro de las animaciones en sus versiones más tempranas consiguió detractores y admiradores por doquier; lo que originalmente empezó como un sencillo programa de animación poco a poco se fue convirtiendo en algo complejo y siempre relativamente potente. Actualmente la versión 9 de Flash con su flamante ActionScript 3 se convierte en una herramienta de uso obligado para muchos y emergentes sectores de la informática.

Y es que la rapidez de desarrollo que posibilita flash cada vez gana más batallas frente a sus competidores, aquellos que tiempo atrás se jactaban de las limitaciones de una herramienta a medio camino del diseño y la programación desorganizada, han visto cómo el mercado ha ido abriendo sus brazos a esta reciente tecnología.

Siempre los detractores, tenían más motivos para vencer en un pique friki sobre si era mejor tal cosa o tal otra. Admito que lo pasé mal, creo que soy algo friki, pero no de los que leen demasiado, y cuando tenía que discutir con alguien que Flash estaba bien y que se podían hacer cosas mejores que con Java (por ejemplo), no tenía demasiada argumentación. Ahora se que lo único que hay que hacer es elegir el campo de batalla adecuado, al final cada cosa ocupa su lugar.

Todos recordaremos la época del auge de los applets de Java, esas aplicaciones que iban empotradas en el navegador y que en cada nueva versión de Java iban ganando potencia, hasta el punto de usar 3 dimensiones de manera satisfactoria (para las limitaciones de un navegador). Pero el carácter de Java de “aplicaciones pequeñas” hechas por pocas personas y de forma más o menos sencilla hicieron que rápidamente empezaran a surgir applets de juegos de muy dudosa calidad, pero ¡que demonios!, podías jugarlo directamente en la web sin descargar nada.

Al mismo tiempo las animaciones flash que tímidamente empezaban a llegarnos por correo en forma de ejecutables o incluso en páginas web iban ganando más audiencia, más interactividad, llegando a su punto de inflexión en el 2001 con el resurgimiento de Flash 5. Esas animaciones surgidas de diseñadores que nada sabían de programación, paulatinamente se volvieron más serias, pasaron de mostrarnos historias eróticas lineales a películas interactivas al borde de la pornografía, y de animaciones de banners publicitarios a presentaciones interactivas en medios de prensa mostrándonos detalladamente cómo se habían caído las torres gemelas. Casi de la misma manera comenzó a desmoronarse el reinado de los Applets en el mundo del videojuego online y los links que ponían Java han ido desapareciendo mientras se multiplicaban los que ponían Flash.

Y durante estos 5 años han surgido si cabe más juegos aún y de peor calidad si cabe, aunque siempre gráficamente por encima de lo que estábamos acostumbrados.

Después de esta pequeña introducción vamos al grano, y empecemos con el primer tutorial que servirá como punto de inicio para el desarrollo de un remake del famoso arcade de plataformas / dispara y olvida : Gryzor o Contra

Requisitos: Necesitaremos tener instalado Flash 8 o Flash MX 2004. así como un leve conocimiento del interfaz de flash que se puede adquirir con los tutoriales que acompañan a Flash MX 2004

Hola mundo para diseñadores

En el menú abrimos la ventana de Archivo > Nuevo… , seleccionamos Documento Flash .

Seleccionamos la herramienta texto del panel Herramientas, hacemos clic sobre el área de trabajo y escribimos “Hola Mundo”.

Pulsamos el atajo de teclado Control + Intro y en nuestra ventana aparecerá el resultado de lo que hemos conseguido con estos tres simples pasos.
Veremos que se ha generado un archivo .swf de 109 bytes que podremos visualizar con el proyector de Flash si lo tenemos instalado o con cualquier navegador que disponga de los plugins de Adobe.
Si hemos configurado adecuadamente los valores de publicación podremos incluso generar un archivo ejecutable que podrá ser visualizado en cualquier PC. Dicho archivo .swf podrá ser empotrado sin problemas en una página web.

Al más puro estilo de las herramientas de programación visuales hemos insertado un componente de texto, una vez insertado se han introducido un valor inicial que nos requiere el programa, en este caso era el texto. Habremos observado que en la ventana de propiedades nos ha aparecido toda la información necesaria para gestionar dicho objeto, tipo de texto: Estático, Dinámico o Entrada. Fuente, color, y otra serie de propiedades que escapan a la finalidad de este tutorial.

Si vamos a hacer hincapié en las herramientas de debug que nos ofrece Flash, que nos permiten durante la ejecución del script ver el estado de los objetos y de las variables. En el menú seleccionamos Debug > Listar variables. En el panel de salida donde usualmente vemos los mensajes de error o trazados del código, aparecerán todas las variables del script en ese instante.
De la lectura de esta información sacaremos conclusiones muy interesantes para aprender un poco más cómo gestiona Flash la información.

Level #0:
Variable _level0.$version = “WIN 7,0,14,0″
Edit Text: Target=”_level0.instance1”
variable = null,
text = “Hola Mundo”,
htmlText = “Hola Mundo”,
html = false, textWidth = 77, textHeight = 16, maxChars = null,
borderColor = 0x000000, backgroundColor = 0xFFFFFF, textColor = 0x000000, border = false,
background = false, wordWrap = false, password = false, multiline = false,
selectable = true, scroll = 1, hscroll = 0, maxscroll = 1,
maxhscroll = 0, bottomScroll = 1,
type = “dynamic”,
embedFonts = false, restrict = null, length = 10, tabIndex = undefined,
autoSize = “none”,
mouseWheelEnabled = true, condenseWhite = false, styleSheet = undefined

En la primera línea nos muestra el nivel de las variables que se van a mostrar a continuación, ( como veremos en próximos tutoriales, flash organiza la información en niveles y subniveles).

A continuación vienen las variables y objetos existentes, en nuestro caso vemos la variable $version, que nos indica el Sistema Operativo y la versión de Flash; datos importantes para que los plugins puedan saber si son capaces de ejecutar dicho código.

Seguidamente vemos que se ha instanciado un objeto Edit Text con el nombre instance1, y todas las propiedades de este con los valores por defecto.

Hola mundo para programadores

Un programador tradicional no querría ni oír hablar de un panel de herramientas, un programador tradicional sólo necesita saber la estructura de la jerarquía de clases del lenguaje que va a usar, todos sus métodos y propiedades, que, o bien, habrá memorizado (con el consecuente deterioro de su estabilidad mental), o bien, tendrá a mano en un libro de referencia o integrado en el entorno de programación (con la herramienta de desarrollo de Macromedia no debemos preocuparnos, ya que todo está bien documentado y con ayudas suficientes).
Con todos esos conocimientos irá directamente al panel de acciones y escribirá el siguiente código:

createTextField("mi_texto", 1, 100, 100, 70,20);
mi_texto.text="Hola Mundo";

Y pulsará el atajo de teclado Control+Intro. Obteniendo el mismo resultado que el diseñador.
Aunque el resultado sea el mismo, no da igual, ya que el programador ha tardado muchísimo más tiempo, necesario para poder conocer el funcionamiento de ActionScript.

La ayuda de Flash nos dice que createTextField se usa de la siguiente manera,

my_mc.createTextField(instanceName, depth, x, y, width, height)

es un método de un objeto MovieClip y necesita los siguientes parámetros:
instanceName: Nombre de instancia del objeto.
depth: Profundidad. (en próximos tutoriales lo veremos)
x,y: Posición x e y en la pantalla
width,height: Ancho y alto del objeto.

Y lo que hace es crear una instancia de un campo de texto en el clip de película que queramos, en nuestro caso, al no haber especificado ningún clip de película coge por defecto el clip _root, que es la raíz de la película, es el objeto que contiene todo lo que nuestro programa en Flash haga.

También antes de usarlo tendremos que haber sabido que el método createTextField pone los siguientes valores por defecto al objeto que instancia, son:

type = "dynamic"
border = false
background = false
password = false
multiline = false
html = false
embedFonts = false
variable = null
maxChars = null

Y también tendríamos que haber sabido que el estilo por defecto que pone al texto esta función es:

font = "Times New Roman"
size = 12
textColor = 0x000000
bold = false
italic = false
underline = false
url = ""
target = ""
align = "left"
leftMargin = 0
rightMargin = 0
indent = 0
leading = 0
bullet = false
tabStops = [] (empty array)

Después ya sólo nos queda modificar la propiedad text, que tiene como valor la cadena de texto a mostrar. Como la cadena se ha creado como objeto dentro de _root, para modificar el valor usaremos el código con direccionamiento absoluto:




_root.mi_texto.text=”Hola Mundo”;

Pero como el código se encuentra encapsulado al mismo nivel de profundidad podemos usar direccionamiento relativo:




mi_texto.text=”Hola Mundo”;

Es muy importante tener presente en que nivel se encapsula el código que vamos a usar, ya que a la hora de acceder a un método o propiedad tendremos que hacer un direccionamiento adecuado.
Usar el direccionamiento absoluto es efectivo, pero dificulta la lectura del código.

Si miramos el .swf generado vemos que ocupa 124 bytes, frente a los 109 bytes del código del diseñador; y si hacemos un listado de variables nos encontramos el siguiente resultado:




Level #0:
Variable _level0.$version = “WIN 7,0,14,0″
Edit Text: Target=”_level0.mi_texto”
variable = null,
text = “Hola Mundo”,
htmlText = “Hola Mundo”,
html = false, textWidth = 62, textHeight = 15, maxChars = null,
borderColor = 0x000000, backgroundColor = 0xFFFFFF, textColor = 0x000000, border = false,
background = false, wordWrap = false, password = false, multiline = false,
selectable = true, scroll = 1, hscroll = 0, maxscroll = 1,
maxhscroll = 0, bottomScroll = 1,
type = “dynamic”,
embedFonts = false, restrict = null, length = 10, tabIndex = undefined,
autoSize = “none”,
mouseWheelEnabled = true, condenseWhite = false, styleSheet = undefined

Podemos comprobar que el código es idéntico, salvo por un pequeño detalle. El objeto que hemos insertado ahora tiene un nombre de instancia diferente mi_texto, es decir, a partir de ahora tenemos control absoluto sobre el objeto que hay en pantalla, ya que conocemos su nombre, cosa que el diseñador desconoce.

El diseñador no lo tiene todo perdido, ya que un simple vistazo al listado de variables le puede bastar para saber que el objeto se llama instance1, y podrá crear código que haga referencia a ese nombre de instancia. Pero eso puede durar poco tiempo, ya que

si sigue introduciendo elementos en la película se crearan nuevos nombres de variable, y si introducimos algún elemento en un nivel más bajo que instance1, rápidamente este le quitará el nombre, dejando al diseñador otra vez totalmente perdido.

A menos que sea un elemento superfluo del diseño, intentaremos saber en todo momento el nombre de las instancias de objetos que manejamos.

En el próximo Tutorial conseguiremos algunas imágenes del juego que pretendemos rehacer, y desde el punto de vista del diseñador veremos cómo hacer un clip animado que nos haga la funcionalidad de sprite de juego, también veremos cómo instanciarlo en tiempo de ejecución. Espero que os haya resultado interesante este artículo y os animéis a realizar un remake de un videojuego en flash conmigo.

Fuente: Ludosofía