MATERIAL PROMOCIONAL

En este captulo aprender:

Las caractersticas esenciales de ActionScript.
La historia y evolucin del lenguaje.
Las ventajas de ActionScript 3.0.
Dnde escribir el cdigo de ActionScript y cmo ejecutarlo.
La utilidad del panel Acciones y sus herramientas.
Los conceptos bsicos de la programacin y las prcticas recomendadas.
Captulo 1
Introduccin
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 24
La programacin, vista
desde otra perspectiva
Para muchos, la programacin se reduce meramente al aspecto tcnico detrs
de una aplicacin. Una parte no visible aunque fundamental en el proceso de
automatizacin de datos, tan crptica para la mayora de los usuarios finales
como lo es el funcionamiento de un motor para el conductor sin conocimien-
tos de mecnica.
Sin embargo, la programacin no est exenta de ciertos matices "personales"
que evidencian que hay algo ms detrs de la aparente frialdad de unas cuan-
tas lneas de cdigo. No hay ms que visitar cualquier foro sobre programa-
cin en Internet para identificar las diferentes formas de abordar un mismo
problema que surgen desde la ptica particular de cada individuo, en verda-
deras sesiones de brainstorming donde los participantes imprimen sutilmente
su forma de ser y de pensar en las soluciones que proponen.
Las distintas maneras de reaccionar ante un problema y codificar su solucin
sugieren en cierto modo que existen otras cualidades humanas implicadas en
el proceso de programar, ms all del razonamiento lgico y la capacidad de
abstraccin. Dependiendo del cristal con el que se la mire, la programacin
puede ser considerada como una actividad elitista reservada para mentes fras
y calculadoras, o como un medio para estimular la imaginacin y dar rienda
suelta a la creatividad.
ActionScript, el lenguaje de Flash
Por sobre todas las cosas, ActionScript es un lenguaje divertido y ameno.
Desde su aparicin, la web se ha visto enriquecida con incontables muestras
de originalidad y creatividad, reflejadas en innovadoras formas de presen-
tar el contenido de un sitio web o interactuar con el mismo. Una relativa
facilidad de uso e implementacin del lenguaje de Flash frente a otras al-
ternativas orientadas a incrementar la funcionalidad de las pginas web,
permiti la implicacin de un gran nmero de diseadores en el proceso
de desarrollo, a la vez que los programadores se iban involucrando cada
vez ms con el diseo. El resultado de esta verdadera simbiosis entre dise-
o y desarrollo puede apreciarse a lo largo y ancho de la red, en numerosos
ejemplos del potencial de Flash y ActionScript cuando se complementan
con sabidura y criterio.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Introduccin 25
Historia y evolucin
ActionScript fue introducido en Flash 5 a mediados del ao 2000, aunque la
versin predecesora de la entonces herramienta de Macromedia ya ofreca la
posibilidad de aadir interacciones simples con las llamadas "acciones". La
sintaxis de ActionScript 1.0 estaba notablemente influenciada por JavaScript,
y las sentencias que antes se insertaban desde un men desplegable ya podan
escribirse libremente en un editor de texto.
En la siguiente versin de Flash (MX, 2002) se introdujeron algunos cambios me-
nores en el lenguaje, hacindolo ms compatible con el estndar ECMA-262.
La primera actualizacin importante se produjo con la aparicin de Macromedia
Flash MX 2004. En su versin 2.0, ActionScript incorporaba un modelo ms
fiel a la programacin orientada a objetos (previamente basado en prototipos)
y caractersticas como la escritura estricta de datos, que lo convertan en un
lenguaje ms potente y profesional.
Pero la verdadera revolucin llegara en el ao 2006 con la aparicin de
ActionScript 3.0, una completa reestructuracin del lenguaje que ofreca un
modelo ms eficiente para el manejo de eventos (DOM), adems de soporte
para expresiones regulares, sintaxis E4X para el trabajo con XML, una nueva
arquitectura para la representacin de los elementos visuales y compatibili-
dad total con la especificacin ECMAScript. Gracias a la incorporacin de la
nueva mquina virtual AVM2, el cdigo de ActionScript 3.0 se ejecutaba hasta
10 veces ms rpido que el de ActionScript 2.0.
ActionScript 3.0 debut junto a la plataforma de desarrollo Adobe Flex 2.0, in-
cluyndose finalmente en Adobe Flash CS3 (2007). Con la aparicin de Adobe
Flash CS4 (un ao ms tarde), las capacidades del lenguaje se extendieron
notablemente, al incorporarse rutinas especiales para trabajar con cinemtica
inversa, manipular objetos en tres dimensiones, crear filtros grficos perso-
nalizados y generar sonidos sintetizados.
ActionScript 3.0 en Flash CS5
Adobe Flash CS5 incorpora una serie de mejoras en su interfaz que permiten
trabajar de forma ms amena con ActionScript 3.0. El soporte a la escritura
del cdigo ha sido mejorado con la incorporacin de nuevas utilidades, como
la insercin automtica de llaves de cierre (}) y la activacin de sugerencias
de cdigo para funciones personalizadas. Otro avance significativo de cara a
la productividad consiste en la posibilidad de almacenar fragmentos de c-
digo (snippets) para reutilizarlos en diferentes proyectos. El reporte de erro-
res tambin ha sido perfeccionado, permitiendo al programador desplazarse
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 26
fcilmente entre las lneas conflictivas para agilizar el proceso de depuracin
del cdigo.
En cuanto a las mejoras en ActionScript, se destaca la inclusin de funcio-
nes especiales para trabajar con el nuevo sistema de representacin y orga-
nizacin del texto que incorpora Flash CS5, denominado TLF (Text Layout
Framework).
Caractersticas esenciales de ActionScript
ActionScript pertenece a la categora de los denominados lenguajes inter-
pretados (o de script), que a diferencia de los lenguajes compilados (como C,
Delphi o Visual Basic), requieren de la ejecucin lnea por lnea del cdigo por
parte de un intrprete. En esta categora se encuentran otros lenguajes muy
conocidos, como JavaScript, VBScript, Ruby, Perl y PHP.
Como lenguaje orientado a objetos, ActionScript 3.0 responde adems a un
modelo de programacin en el que cada elemento que interviene en el cdi-
go es en esencia un objeto con atributos y funciones que le permiten a su vez
comunicarse con otros objetos.
Conceptos bsicos
A continuacin se describen algunos conceptos fundamentales para com-
prender la naturaleza de ActionScript y reconocer las ventajas de su imple-
mentacin.
En qu consiste un script?
En un contexto tradicional, la palabra inglesa script hace referencia a un guin
teatral o cinematogrfico, donde se definen entre otras cosas los dilogos y el
comportamiento a seguir por los actores. En el mbito informtico, se deno-
mina script al conjunto de instrucciones que son ejecutadas por el intrprete
de un lenguaje, y que se encuentran generalmente almacenadas en un archivo
de texto sin formato (o texto "plano").
La ejecucin de un script se lleva a cabo de forma secuencial (las lneas de
cdigo se interpretan una por una, en orden descendente), aunque como se
ver ms adelante existen sentencias especiales que permiten alterar este
orden predeterminado.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Introduccin 27
Algunos scripts se ejecutan del lado del cliente (el equipo del usuario que in-
teracta con un sitio o aplicacin web), mientras que otros lo hacen del lado
del servidor. Aunque ActionScript trabaja del lado del cliente, dispone de fun-
ciones que le permiten conectarse con otros lenguajes de script (como PHP o
ASP) para hacer posible el intercambio de datos entre cliente y servidor.
Nota:
Si bien existen similitudes ms que evidentes entre un script y un pro-
grama, no es del todo correcto utilizar estos trminos indistintamente.
Mientras los scripts son ejecutados en tiempo real por intrpretes, los
programas requieren ser compilados en archivos binarios ejecutables.
De igual modo, no debe confundirse un lenguaje de programacin
(como Java) con un lenguaje de script (como JavaScript).
Qu son los contenidos dinmicos?
A diferencia de los contenidos estticos, que permanecen invariables desde su
creacin o incorporacin, los contenidos dinmicos son generados y/o modi-
ficados durante la ejecucin de un script. En el mbito de Flash resulta muy
sencillo distinguir el contenido esttico del dinmico, ya que muchas de las
acciones u operaciones que pueden llevarse a cabo desde la interfaz de dise-
o (dibujar figuras, animar objetos, insertar texto, etc) tienen su equivalente
en cdigo de ActionScript.
El siguiente ejemplo ilustra las principales diferencias entre contenidos es-
tticos y dinmicos, permitiendo reconocer las ventajas de estos ltimos en
determinadas aplicaciones.
Ejemplo: Galera de imgenes
Se requiere inicialmente crear una matriz de 5 filas y 4 columnas con 20 im-
genes. Posteriormente, se necesita cambiar la disposicin de las imgenes en
4 filas y 5 columnas, adems de aumentar la distancia entre las mismas.
Solucin con contenidos estticos: Las 20 imgenes son importadas en
Flash y redimensionadas con ayuda del panel Transformar. A continua-
cin, son alineadas y distribuidas con las opciones del panel Alinear para
obtener la matriz requerida. Dado el requerimiento posterior de cambiar
la disposicin de las imgenes y el espacio entre las mismas, se emplean
una vez ms las herramientas citadas para redistribuir el contenido.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 28
Solucin con contenidos dinmicos: Se programa un script para que las
imgenes se carguen desde una carpeta, se redimensionen y se distribuyan
automticamente en tiempo de ejecucin. Se modifican posteriormente
tres valores (correspondientes al nmero de filas, el nmero de columnas,
y el espacio entre las imgenes) en el cdigo para adaptar la galera a los
nuevos requerimientos.
Aprovechando la naturaleza dinmica de la aplicacin, se aade una
pequea interfaz para permitir al usuario modificar la distribucin de las
imgenes.
Nota:
En el ejemplo puede apreciarse claramente la ventaja de automatizar
procesos con cdigo para dar lugar a contenidos que puedan ser
fcilmente reestructurados, incluso en tiempo de ejecucin.
Qu se entiende por sintaxis?
La sintaxis de un lenguaje de programacin (o de script) corresponde a un
conjunto de reglas que deben aplicarse para escribir correctamente el cdigo.
La sintaxis afecta a diversos elementos del lenguaje, tales como sentencias,
expresiones o asignaciones.
La sintaxis de ActionScript 3.0 se ir descubriendo paulatinamente en este
libro, a medida que se vayan introduciendo los diferentes elementos que
componen el lenguaje.
Antes de empezar
Es sabido que cada persona es un mundo, y lo que funciona para una no tiene
por qu resultar igual de efectivo para otra. Sin embargo, existen hbitos co-
munes que se encuentran arraigados en un gran nmero de programadores
por una sencilla razn: suelen dar buenos resultados.
Cmo enfocar la programacin
La programacin es un proceso que debe enfocarse con mentalidad abierta y
positiva. Por ejemplo, un simple accidente puede derivar en un descubrimiento
importante o proporcionar una va alternativa para resolver un problema.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Introduccin 29
Para aumentar las posibilidades de xito al iniciar un proyecto, se debe aban-
donar la idea de que existe un nico camino a seguir para lograr los objetivos
propuestos. En una amplia mayora de casos, existirn mltiples alternativas
igualmente eficaces pero con distintos grados de eficiencia. Es decir, se podr
resolver un problema de varias maneras, pero la opcin ms eficiente (y por lo
tanto, la ms recomendable) ser en cualquier caso la que involucre la menor
cantidad de cdigo posible, liberando de esta manera al procesador de tareas
innecesarias o redundantes.
La motivacin es otro factor clave para tener una experiencia positiva con la
programacin. Es muy fcil perder el inters cuando no se logran resultados
en el acto, pero tambin es necesario entender que tanto en sta como en otras
disciplinas existe una curva de aprendizaje que depende de diversos facto-
res. Para no perder la motivacin, es importante aprender a reconocer estas
limitaciones y plantear desafos que puedan cumplirse a corto plazo. La clave
est en perseverar, aprender de los errores y aprovechar cada proyecto para
seguir adquiriendo experiencia.
Prcticas recomendadas
Para programar de forma eficiente y productiva con ActionScript, es necesa-
rio adquirir una cierta disciplina a la hora de estructurar el contenido de los
scripts. Un cdigo ms limpio y compacto no slo ser ms sencillo de inter-
pretar o depurar, sino que adems se ejecutar ms rpido.
Documentar bien el cdigo
Cuando se revisan proyectos antiguos con cientos (y hasta miles) de lneas de
cdigo involucradas, es probable que no se recuerde con demasiada lucidez
la funcin de cada sentencia o conjunto de instrucciones que en el momento
de escribirse tenan un sentido bien claro y definido. Por esta razn es im-
portante adquirir la costumbre de comentar cada paso relevante de un script,
procurando hacerlo siempre de forma breve y concisa (ya que tampoco se re-
quiere escribir un ensayo sobre cada lnea del cdigo).
Se debe tener en cuenta adems que no todos los programadores poseen los
mismos conocimientos o son capaces de reproducir las asociaciones mentales
del autor del cdigo. Por una cuestin no slo de organizacin personal sino
tambin de empata con otros programadores, documentar apropiadamente
el cdigo de un proyecto resulta de vital importancia. En ActionScript, exis-
ten dos formas de introducir comentarios en el cdigo:
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 30
Para insertar un comentario breve (por ejemplo, una pequea descripcin
que preceda a una sentencia o instruccin), se colocan dos barras inclinadas
o slashes (//) delante del texto del comentario:
// Ejemplo de comentario en una lnea
Para introducir indicaciones ms extensas, es posible insertar comentarios que
abarquen dos o ms lneas sin necesidad de comentar cada una de estas lneas
por separado. Los comentarios en mltiples lneas comienzan con una barra in-
clinada seguida de un asterisco (/*), y finalizan con la secuencia inversa (*/):
/* Ejemplo de comentario en mltiples lneas,
ideal para describir procesos ms complejos o
insertar indicaciones ms detalladas */
Nota:
Los comentarios no son tenidos en cuenta por el intrprete de
ActionScript, razn por la que estos operadores suelen utilizarse
tambin para omitir o anular temporalmente una lnea o bloque de
cdigo en la ejecucin de un script.
Elegir identificadores representativos
Tanto en proyectos ambiciosos con cantidades ingentes de cdigo como en
aplicaciones de relativa simplicidad, se debe poder identificar claramente la
funcin de cada elemento que interviene en el proceso. Por ejemplo, en una
aplicacin desarrollada para un catlogo de productos, el identificador ar-
ticulos podra hacer referencia a los artculos disponibles en stock, a los
artculos en trnsito, o a todos los artculos sin importar su condicin. Para
eliminar este tipo de ambigedad se deben utilizar nombres ms especficos
para los identificadores (articulosStock, articulos_transito, etc),
aunque resulten ms extensos.
Cuidar la consistencia y el formato del cdigo
Otro importante factor a considerar para obtener un cdigo mejor estructurado
y ms fcil de depurar consiste en tabular todas las lneas que se encuentren
entre llaves ({}), y colocar espacios entre los operadores.
// Cdigo sin tabulaciones ni espacios
function f(x){
if (x<=0){return 1;}
else{
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Introduccin 31
return x*f(x-1);
}
}
// Cdigo con tabulaciones y espacios
function f(x) {
if (x <= 0) {
return 1;
} else {
return x * f(x - 1);
}
}
De esta manera resulta mucho ms sencillo identificar cundo comienza y
termina cada bloque de cdigo (lneas delimitadas por llaves), y los elemen-
tos se distinguen mejor.
En el primer cdigo del ejemplo se echa de menos otro elemento clave: la con-
sistencia. La primera sentencia entre llaves (return 1;) se sita en la misma
lnea donde se encuentran las llaves de apertura y de cierre, mientras que la
segunda (return*xf(x-1);) se encuentra separada de ambas llaves por
saltos de lnea.
Cualquiera sea el formato elegido para estructurar el cdigo, es importante
que ste se aplique homogneamente en todo el script para asegurar su con-
sistencia.
Entorno de programacin
Una vez sentadas las bases tericas necesarias para entender el funciona-
miento bsico de un lenguaje como ActionScript, el siguiente paso consiste
en examinar las herramientas que permiten implementarlo.
Dnde escribir el cdigo y cmo ejecutarlo
El cdigo de ActionScript puede introducirse en fotogramas clave de cualquier
lnea de tiempo, o en archivos externos con extensin .as. En cualquier caso
se trata de contenido que podra insertarse con ayuda de cualquier editor de
texto plano, aunque lo habitual es recurrir a editores de cdigo especialmente
acondicionados para el lenguaje, como el que ofrece la plataforma de desa-
rrollo Flex o, sin ir ms lejos, el propio editor incorporado en Flash. Ambas
opciones cuentan con un soporte especial de autocompletado y resaltado de
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 32
sintaxis, adems de un conjunto de herramientas que facilitan considerable-
mente la escritura del cdigo.
La ejecucin de los scripts est a cargo de la mquina virtual AVM2, una apli-
cacin que se encuentra integrada en Flash Player y que se utiliza exclusiva-
mente con ActionScript 3.0. Para que esta aplicacin sea capaz de interpretar
el cdigo de un script, es necesario convertirlo a un formato binario espec-
fico conocido como bytecode, que a su vez ser insertado en un contenedor
(el archivo SWF que se genera al publicar un proyecto, y que ser finalmente
reproducido por Flash Player).
Nota:
Cabe aclarar que aunque se lleve a cabo una compilacin previa del
cdigo para hacerlo compatible con la aplicacin que se encarga de
ejecutarlo, el mismo ser finalmente interpretado lnea por lnea, tal
como se ha afirmado anteriormente.
El panel Acciones
El panel Acciones incorpora todas las herramientas necesarias para trabajar
con ActionScript en el entorno de Flash.
Figura 1.1. El panel Acciones.
A continuacin se describe la funcin de cada una de las herramientas que
componen el panel:
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Introduccin 33
Figura 1.2. Herramientas del panel Acciones.
1. Aadir un nuevo elemento al script. Esta herramienta consiste en un
men desplegable que abarca todos los elementos de cdigo disponibles,
y permite incorporarlos fcilmente en un script.
Figura 1.3. Men desplegable con elementos de cdigo.
2. Buscar. Al activar esta opcin aparecer un cuadro de dilogo con dos
campos de insercin de texto; en el primero se colocar la palabra o cadena
a buscar y (opcionalmente) en el segundo se insertar la cadena de reem-
plazo. Se podr elegir entre reemplazar nicamente la primera instancia
encontrada de la palabra buscada (Reemplazar), o todas las instancias
de la misma que se encuentren en el script (Reemplazar todo). Se deber
activar la casilla Coincidir maysculas y minsculas para lograr un ajuste
exacto con la cadena buscada.
Figura 1.4. Buscar y reemplazar cadenas.
3. Insertar una ruta de destino. Con esta opcin se obtendr automticamente
la ruta de destino a cualquier objeto que se haya incorporado previamente
al escenario, directamente o contenido a su vez en otro objeto.
4. Revisar sintaxis. Esta opcin permite comprobar si la sintaxis del cdigo
es correcta. En caso de error, aparecer el mensaje correspondiente en el
panel Errores de compilador, indicando la ubicacin exacta del mismo.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 34
5. Formato automtico. Esta herramienta aplica un formato automtico al
cdigo, tabulando el texto o generando espacios de acuerdo al formato defi-
nido en las opciones de preferencia de Flash (Edicin>Preferencias>Formato
automtico):
Figura 1.5. Preferencias de formato automtico.
6. Mostrar consejos sobre cdigos. Activando esta herramienta en determi-
nadas partes del cdigo, aparecer un mensaje emergente con informacin
adicional sobre el elemento actualmente seleccionado.
7. Opciones de depuracin. Esta herramienta permite la insercin de puntos
de quiebre para llevar a cabo la depuracin del cdigo, permitiendo adems
desactivarlos o eliminarlos definitivamente.
8. Contraer entre llaves. Activando esta herramienta se contraern todas las
lneas de cdigo que se encuentren agrupadas entre llaves ({ }).
9. Contraer seleccin. Con esta opcin es posible contraer dos o ms lneas
de cdigo seleccionadas. Si se presiona adems la tecla Alt (PC) / Option
(Mac), se contraer todo el cdigo que se encuentre fuera de la seleccin.
10. Expandir todo. Esta herramienta permite expandir todo el cdigo que
haya sido previamente contrado.
11. Aplicar comentario en bloque. Activando esta opcin, previa seleccin
de un bloque de cdigo, el mismo quedar delimitado por los operadores
de comentario (/* */).
12. Aplicar comentario de lnea. Activando esta opcin se aadirn autom-
ticamente las dos barras inclinadas (//) delante de cada lnea de cdigo
seleccionada.
13. Quitar comentario. Activando esta opcin se eliminarn todos los operadores
de comentario que se encuentren en las lneas de cdigo seleccionadas.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Introduccin 35
14. Mostrar/ocultar caja de herramientas. Esta accin mostrar u ocultar
la caja de herramientas y el navegador de scripts, dos secciones que se
encuentran en el apartado lateral izquierdo del panel Acciones.
Hola Mundo!
Haciendo honor al propio nombre del lenguaje, ha llegado el momento de
pasar a la "accin" y escribir el primer script. El modesto objetivo inicial de
este manual ser imprimir una frase en el panel Salida de Flash.
stos son los pasos a seguir:
1. Crear un nuevo documento (para ActionScript 3.0) en Flash.
2. Situarse sobre el primer (y nico) fotograma clave de la lnea de tiempo
principal.
3. Abrir el panel Acciones (Ventana>Acciones o F9)
4. Escribir el siguiente cdigo: trace ("Hola Mundo!");
5. Presionar Ctrl+Enter (PC) / Control+Return (Mac)
Al ejecutar el cdigo, se obtendr el siguiente resultado en el panel Salida:
Figura 1.6. Hola Mundo!
Nota:
La impresin del mensaje "Hola Mundo!" ("Hello World!") es un
ejercicio clsico de introduccin a la programacin, y una forma de
demostrar tambin que todos los lenguajes parten de la misma base.
En este sencillo script, consistente en una nica lnea de cdigo, se ha utili-
zado la funcin global trace() de ActionScript para imprimir un valor en
el panel Salida de Flash. El valor es en este caso una cadena (texto expresado
entre comillas) que se coloca entre los parntesis de la funcin para conver-
tirse en un dato que ser procesado por la misma.
Ariel Calderone | Anaya Multimedia
MATERIAL PROMOCIONAL
Captulo 1 36
El punto y coma final es un elemento de la sintaxis de ActionScript que se
utiliza para separar sentencias o instrucciones. No obstante, su uso no es obli-
gatorio, a menos que se trate de sentencias que se encuentran en una misma
lnea, como las del siguiente ejemplo:
var mensaje:String = "Hola Mundo!"; trace(mensaje)
Si se introdujera un salto de lnea entre las sentencias del script anterior, el
punto y coma ya no sera necesario, porque en este caso se interpretara cada
lnea como una instruccin diferente:
var mensaje:String = "Hola Mundo!"
trace (mensaje)
Cabe aclarar que en estos ejemplos intervienen elementos y conceptos que
sern explicados con ms detalle en sus respectivos captulos.
Resumen
En este captulo introductorio se han comentado las caractersticas principales
de ActionScript, con especial nfasis en la versin 3.0 del lenguaje. Se han ex-
plicado adems conceptos bsicos inherentes a la programacin, describiendo
algunas de las prcticas que permiten programar con elegancia y disciplina.
Por ltimo, se han introducido las herramientas necesarias para trabajar con
ActionScript en el entorno de Flash, y se ha detallado paso a paso el procedi-
miento a seguir para crear y ejecutar el cdigo de un script.
Ariel Calderone | Anaya Multimedia