Introduccion al Lenguaje Actrion Script. Parte I

<!--sizeo:4--><span style="font-size:14pt;line-height:100%"><!--/sizeo--><b>ActionScript
Introducción al lenguaje.</b><!--sizec--></span><!--/sizec-->

ActionScript es un lenguaje desarrollado por Macromedia y con la única finalidad en sus inicios de agregarle interactividad a su creciente formato animación vectorial Flash SWF. Bien ActionScript se conoce como tal a partir de la versión 5 de Flash y a partir de esta es cuando los diseñadores se vieron en la necesidad de volverse programadores y le tuvieron que entrar al código pues las posibilidades que brindaba relativamente nueva tecnología era bastante.

En fin, después del obligado choro introductivo, comentare que actualmente la versión mas reciente es ActionScript 2.0 y en no mucho saldrán las betas de ActionScript 2.5 y posteriormente el ActionScript 3.0 según publico Macromedia hace un par de meses; pero eso por ahora no nos interesa y continuaremos este mini manual o extenso tutorial (como gusten apreciarlo mejor) directamente al grano o bien tratando de meter la menos teoría posible, aunque en momentos no habrá otra alternativa.

<b>Características Principales</b>

• ActionScript está basado en la especificación ECMA-262, al igual que otros lenguajes como Javascript y C++
• Es un lenguaje de script, esto quiere decir que no hará falta crear un programa completo para conseguir resultados, normalmente la aplicación de fragmentos de código ActionScript a los objetos existentes en nuestras películas nos permiten alcanzar nuestros objetivos.
• ActionScript 2.0 es un lenguaje de programación orientado a objetos, tiene similitudes, por tanto, con lenguajes tales como los usados en el Microsoft Visual Basic, en el Borland Delphi etc... y aunque, evidentemente, no tiene la potencia de un lenguaje puramente orientado a objetos derivado del C o del Pascal como los anteriores, cada versión se acerca más a un lenguaje de este tipo. Así, la versión 2.0 de Flash MX 2004 y Flash 8 es mucho más potente y mucho más "orientado a objetos" que su anterior versión 1.0
• ActionScript presenta muchísimos parecidos con el Javascript; si conoces Javascript, la sintaxis y el estilo de ActionScript le resultarán muy familiares. Las diferencias entre ambos lenguajes las puede encontrar en la ayuda que acompaña al Flash.
• En la mayor parte de las ocasiones, no será necesario "programar" realmente, Flash MX pone a nuestra disposición una impresionante colección de "funciones" (de momento entenderemos "funciones" como "código ActionScript que realiza una función determinada") ya implementadas que realizan lo que buscamos, bastará con colocarlas en el lugar adecuado.

<i>Fuente: <a href="http://www.aulaclic.es/flashmx_2004/t_17_1.htm" target="_blank">http://www.aulaclic.es/flashmx_2004/t_17_1.htm</a></i>

<b>Javascript y ActionScript</b>

• ActionScript no admite objetos específicos de navegador como Documento, Ventana y Anclaje.
• ActionScript no admite completamente todos los objetos incorporados de JavaScript.
• ActionScript no admite algunas construcciones sintácticas de JavaScript, como las etiquetas de sentencia.
• En ActionScript, la función eval() sólo puede realizar referencias de variables.
• ActionScript 2.0 admite diversas funciones que no se incluyen en la especificación ECMA-262, como las clases y la comprobación de tipos al compilar. Muchas de estas funciones se modelan a partir de la especificación del lenguaje ECMAScript (ECMA-262) edición 3 (consulte www.ecma-international.org/publications/standards/Ecma-262.htm).
• ActionScript no admite expresiones regulares mediante el objeto RegExp. No obstante, Macromedia Central sí es compatible con el objeto RegExp. Para más información sobre Macromedia Central, consulte www.macromedia.com/software/central.

<i>Fuente: Ayuda de Flash. Libro: Aprendizaje de ActionScript en Flash 2.0, “Diferencias entre Javascript y Actionscript”</i>

Bien entendido esto un poco, pasaremos directamente al código que es lo que nos interesa y comenzaremos por el estilo de programar, mejor conocido como sintaxis.

<b>Sintaxis</b>

La sintaxis de flash es como antes mencionaba un script y en particular muy, pero muy similar a los de java, aunque con sus respectivas diferencias, y aquí tratare de explicar como funciona.

En general el código se escribe de la siguiente manera

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->function nombrefuncion (){
&nbsp;&nbsp; instrucciones de la función
&nbsp;&nbsp; ...
}<!--c2--></div><!--ec2-->

Esto es, se declara siempre la variable u objeto, acción, método o función y las instrucciones que realizara cuando se cumplan los parámetros especificados. A continuación pongo un ejemplo un poco mas practico:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var a:Function = function (){
&nbsp;&nbsp;&nbsp;&nbsp;_root.onEnterFrame.play(movie_mc);
};<!--c2--></div><!--ec2-->

Si somos observadores veremos que hay más parámetros que los especificados en el ejemplo 1, y esto se debe a que en la practica entre mas especifico sea nuestro script, menos probabilidades de errores tendremos en el molesto tiempo de depuración.

En el script anterior encontramos que la función que se ejecuta, la define una variable, la cual es “a”. Las variables en flash al igual que en otros lenguajes de programación, representa la información o datos que son cambiantes a lo largo de la ejecución del programa, y en flash se definen por la palabra clave “var”. Aquí algunos ejemplos:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var casa:String = “Mi casa roja”;
var coche:String = “Mi coche es un BMW”;
var edad:Number = “25”;
vivo = “Mexico”;<!--c2--></div><!--ec2-->

Si ponemos atención a los ejemplos anteriores encontraremos que no todas las variables son iguales, y eso es un error del programador. En Flash y mas en especifico en ActionScript se declara una varible con la palabra clave “var”, hasta aquí todo esta bien, sin embargo todo lo que se encuentre a la izquierda de un signo de “=” es considerado una variable.

Entonces si funciona lo mismo escribir:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var casa:String = “Mi casa roja”;<!--c2--></div><!--ec2-->

Que escribir:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->vivo = “Mexico”;<!--c2--></div><!--ec2-->

Que caso tiene utilizar “var”, el asignador “:” y la palabra “String” para declarar mis variables. Pues esto tiene una explicación de logística que en un futuro nos evitara muchos dolores de cabeza; ya que el motor compilador de flash viene incluido a partir de la versión MX 2004 con un comprobador de tipos. ¿Esto para que nos sirve? Ahora lo muestro:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var edad:Number = “25”; //Correcto
var edad:Number = “Veinticinco”; //Incorrecto y genera error.<!--c2--></div><!--ec2-->

En el ejemplo anterior creo que mas claro no podría dejarlo. Cuando aplicamos un tipo a una variable, forzamos al compilador a que este reconozca exclusivamente el tipo de valor asignado, de lo contrario no se ejecutara y generara un mensaje de error, ejemplo:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var edad:Number = “Veinticinco”; //Incorrecto y genera error.<!--c2--></div><!--ec2-->

Flash nos responderá con el siguiente mensaje en el panel de salida:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->El tipo de la declaración de asignación no coincide: se encontró String donde se requiere Number.<!--c2--></div><!--ec2-->

Esto aparentemente es un problema, pero cuando comencemos a escribir códigos mas complejos, le daremos gracias con creces, pues el compilador nos esta diciendo donde esta nuestro error de lógica.

En conclusión, es bastante recomendable utilizar siempre la comprobación de tipos para nuestras variables, ya que esto nos ayudara mucho a evitar futuros errores en el momento de la compilación.

Nota: todos los tipos se comprueban, todos excepto el “object”, que flash hace caso omiso a el. Para más información., leer el manual de ayuda del programa. “Comprobaciones de tipo”.

<b>Los Operadores</b>

Una vez entendida una de las principales bases del lenguaje que son las variables, ahora entraremos a otro de mayor importancia y son los operadores.

Puede que se pregunten por el uso de símbolos matemáticos en el código. Los símbolos se denominan operadores en ActionScript. Los operadores calculan un valor nuevo a partir de uno o varios valores y un operador le permite asignar un valor a una variable del código, por ejemplo el operador de igualdad (=) permite asignar un valor a una variable:

Los operadores son caracteres que especifican cómo combinar, comparar o cambiar los valores de una expresión. Una expresión es cualquier sentencia para la que Flash puede calcular el resultado y que devuelve un valor. Puede crear una expresión combinando operadores y valores, o bien llamando a una función.

El lenguaje ActionScript está formado por clases incorporadas, por lo que se deberá utilizar la sintaxis correcta para formar sentencias de manera que el código se compile y funcione correctamente en Flash. En este caso, la sintaxis se refiere a la gramática y la ortografía de un lenguaje que le permite programar. El compilador no comprende la sintaxis incorrecta, por lo que observará errores o advertencias en el panel Salida cuando intentes comprobar el documento en el entorno de prueba o no se ejecutara cuando se haya exportado a SWF el contenido. Por consiguiente, la sintaxis es un conjunto de reglas y directrices que le ayudan a formar código ActionScript correcto.

Una sentencia es una instrucción que se da al archivo FLA para que haga algo, como, por ejemplo, ejecutar una acción concreta. Por ejemplo, puede utilizar una sentencia condicional para determinar si algo es verdadero o si existe. Posteriormente, podría ejecutar las acciones que especifique, como, por ejemplo, funciones o expresiones, en función de si la condición es verdadera o no. La sentencia if es una sentencia condicional que evalúa una condición para determinar la siguiente acción que debe tener lugar en el código.

<strike><i>Operadores de sufijo </i></strike>
Los operadores de sufijo toman un operador y aumentan o reducen el valor del operador. Aunque estos operadores son unarios, se clasifican independientemente del resto de operadores unarios debido a su mayor precedencia y a su comportamiento especial.

<blockquote>++ Incremento (sufijo)
-- Decremento (sufijo</blockquote>

Ejemplo:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var suma:Number = 1;
cantidad = ++suma;
trace(suma);
<!--c2--></div><!--ec2-->
En el ejemplo anterior la variable “suma” tiene un valor numérico asignado de 1, en la instrucción siguiente aparece otra variable no asignada (object por defecto) con el operador de incremento “++” y ese se asigna a la variable suma y en una tercera instrucción le decimos que trace la variable suma. En nuestro panel de salida obtendremos “2” como resultado de este script.

Al “traducir al español” este script le dice al programa que “suma” tiene un valor de 1, pero cantidad tiene una instrucción que incremente en uno a “suma” y en la tercera línea le decimos a flash que escriba la variable “suma” la cual tiene un valor de 1 mas 1 agregado en la segunda instrucción, nos mostrara un resultado de 2.

<strike><i>Operadores unarios </i></strike>
Los operadores unarios utilizan un operando. Los operadores de incremento (++) y decremento (--) de este grupo son operadores de prefijo, lo que significa que aparecen delante del operando en una expresión. También pueden aparecer tras el operando, en cuyo caso son operadores de sufijo.

<blockquote>++ Incremento (prefijo)
-- Decremento (prefijo)
+ + unario
! - unario (negación)
typeof Devuelve información de tipo
void Devuelve un valor no definido</blockquote>

Ejemplo:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var f:Number = 1;
var g:Number = 1;
var h:Number = f + g;
var i:Number = h;
trace(i);<!--c2--></div><!--ec2-->

Con esto flash nos devolverá un valor de 2. Explico el porque. Asignamos que un valor de 1 a “f”, y lo definimos como tipo “Number” al igual que lo hicimos con “g”; por el contrario a la variable “h” no le asignamos un valor numérico directamente, pero si especificamos que es un valor de tipo “Number” ¿Qué pasa aquí? ¿Por qué no genera error? ¿Y lo mismo para la variable “i”? Esto sucede porque al momento de la compilación flash solo entenderá que 1+1 es igual 2 y ese valor le asignara a “h” por lo tanto no contraviene con la declaración de tipo que le asignamos a esta; sucede lo mismo con la variable “i” la cual flash entiende que “i” es igual a “h” y si “h” tiene un valor de “2” entonces “i” también lo tiene, por lo que en la ultima instrucción trazara 2 en el panel de salida.

<strike><i>Operadores multiplicativos </i></strike>
Los operadores multiplicativos toman dos operandos y realizan cálculos de multiplicación, división o módulo. Entre los operadores numéricos también figuran los operadores aditivos.

Todos los operadores de esta tabla tienen idéntica precedencia:

<blockquote>* Multiplicación
/ División
% Módulo</blockquote>

Ejemplo:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var f:Number = 2;
var g:Number = 2;
var h:Number = f*g;
var i:Number = h;
trace(i);<!--c2--></div><!--ec2-->

Este ejemplo nos devolverá un valor numérico de 4 en el panel de salida.

Operadores relacionales
Los operadores relacionales toman dos operandos, comparan sus valores y devuelven un valor booleano (verdadero o falso). Todos los operadores de esta tabla tienen idéntica precedencia:
<blockquote>
< Menor que
> Mayor que
<= Menor o igual que
>= Mayor o igual que
instanceof Comprueba una cadena prototipo
in Comprueba las propiedades de objetos</blockquote>

Ejemplo:
<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var f:Number = 2;
var g:Number = 2;
var h:Boolean = f<=g;
var i:Boolean = h;
trace(i);<!--c2--></div><!--ec2-->

Este ejemplo devolverá en el panel de salida “true" (verdadero) porque “f” es menor o igual a “g”. En este ejemplo si sois observadores, verán que ha cambiado la asignación de tipos de “h” e “i” de Number a “Boolean"; esto forzara al compilador a solo recibir valores verdadero o falso, y estos operadores relacionales solo devuelven de esta forma.
<strike>
<i>Operadores de igualdad </i></strike>
Los operadores de igualdad toman dos operandos, comparan sus valores y devuelven un valor booleano. Todos los operadores de esta tabla tienen idéntica precedencia:

<blockquote>== Igualdad
¡= Desigualdad
=== Igualdad estricta
¡== Desigualdad estricta</blockquote>

Ejemplo:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var f:Number = 2;
var g:Number = 2;
var h:Boolean = f==g;
var i:Boolean = h;
trace(i);<!--c2--></div><!--ec2-->

Este ejemplo devolverá “true” (verdadero) en el panel de salida.

<u><strike>Operadores de Asignación</strike></u>
Los operadores de asignación toman dos operandos y asignan un valor a un operando en función del valor del otro operando. Todos los operadores de esta tabla tienen idéntica precedencia:

<blockquote>= Asignación
*= Asignación de multiplicación
/= Asignación de división
%= Asignación de módulo
+= Asignación de suma
-= Asignación de resta
<<= Asignación de desplazamiento a la izquierda en modo bit
>>= Asignación de desplazamiento a la derecha en modo bit
>>>= Asignación de desplazamiento a la derecha en modo bit sin signo
&= Asignación de AND en modo bit
^= Asignación de XOR en modo bit
|= Asignación de OR en modo bit</blockquote>

Ejemplo

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var f:Number = 2;
var g:Number = 10;
var h:Number = f*=g;
var i:Number = h;
trace(i);<!--c2--></div><!--ec2-->

Este ejemplo devolverá 20 como resultado de la multiplicación de f * g.

Existen muchos mas operadores, los cuales podemos encontrar mucha información detallada en la Ayuda, Operadores. del programa. Estos otros son un tanto mas complejos

<b>Las Propiedades y Tipos de Objetos Principales</b>

Todos los símbolos de botón, símbolo o MovieClip de un archivo SWF son instancias del objeto y se pueden asignar nombres de instancia en el inspector de propiedades y utilizar los métodos y propiedades de la clase Button, MovieClip y Simbol para manipularlos con ActionScript. Los nombres de instancias de Button, MovieClip o Simbol se muestran en el explorador de películas y en el cuadro de diálogo Insertar ruta de destino del panel Acciones.

Estas tres clases son practicante la base de nuestros archivos SWF, y mas en claro de nuestras películas y programas flash; pues en 80% de las veces trabajaremos con ellos para crear interactividades y dinamismo a nuestros programas.

Enlistar aquí todas las propiedades aplicables cada una de estas clases me llevaría muchísimo tiempo, además de que de momento no utilizaremos todas, pero para consultas detalladas, todas las funciones se encuentran en la ayuda el programa en el libro Aprendizaje de ActionScript. 2.0

Si deseas que algo funcione en el archivo SWF, deberás hacer referencia a la instancia en cuestión y luego indicarle que haga algo, como asignarle una acción o cambiar su propiedades. Normalmente deberá definir el lugar en el que se encuentra dicha instancia en el archivo SWF (por ejemplo, en qué línea de tiempo se encuentra o en qué instancia está anidada) mediante la creación de la ruta de destino, al hacer esto, está haciendo referencia a dicha instancia en particular e indicándole que haga algo (por ejemplo, mover la cabeza lectora o abrir una página Web).

Ejemplo:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->var a:Function = function () {
&nbsp;&nbsp;&nbsp;&nbsp;_root.mianime_mc._alpha = 35; //esta linea escribe la ruta de accion
&nbsp;&nbsp;&nbsp;&nbsp;if (b="activado") {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_root.miamine_mc._alpha = 100;
&nbsp;&nbsp;&nbsp;&nbsp;} else {
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;_root.mianime_mc._alpha = 35;
&nbsp;&nbsp;&nbsp;&nbsp;}
};<!--c2--></div><!--ec2-->

En este ejemplo hay un función simple (mas compleja de lo antes visto pero no importa) que le dice al compilador que la variable “a” asignara la propiedad “alpha” a el objeto “mianime_mc” el cual es un MoviClip y se asigna la ruta mediante un “target” que el compilador le de la siguiente manera:

<!--c1--><div class='codetop'>CÓDIGO</div><div class='codemain'><!--ec1-->_root.mianime_mc.alpha = 35;<!--c2--></div><!--ec2-->

<u>_root:</u> define el nivel donde funcionara la instrucción; este puede ser _root el nivel principal; _this, mismo nivel o _parent, relativo.

<u>mianime_mc:</u> es el nombre de instancia que asignamos a nuestro objeto MovieClip.

<u>_alpha:</u> propiedad aceptada y validad de la Clase Object aplicada a la clase heredada MovieClip.

<i>Nota: No importa si hasta el momento no se entiende mucho el script y los términos, mas delante veremos cada uno a detalle, solo deseo que se entienda la estructura en general.</i>

Bien, retomando; los tres elementos nombrados previamente actuaran y se “enlazaran” entre si por medio del operador “.” el cual en Flash tiene la función de unir argumentos, instancias y propiedades.

En conclusión las propiedades en ActionScript representan las definiciones que aplicaremos a los objetos afectados por ellas; tamaño, color, forma, etc.; y trabajaremos con estas a lo largo de todos nuestros programas, entre mejor definidas estén, mejores serán mejor los resultados.


<!--coloro:#FFFFFF--><span style="color:#FFFFFF"><!--/coloro--><b>Nota:</b>Estare editanto este mensjae hasta terminar con la parte introductoria.<!--colorc--></span><!--/colorc-->

 

Muy buena !!!, ya hacia falta una teoria de Action Script a ver si se animan a seguirnos algunos valientes del foro

 

Gracias Kitsch, hacía falta ya

 

siempre he querido aprender el lenguaje de actionscritps

 

MºTUNE esta es tu oportunidad esto se viene bueno !!!

 

yo lo voy a seguir impaciente

 

Muy bueno kitsch, a ver si por fin me pongo ....

 

La idea es que se pongan y que posteen aca mismo las dudas sobre este mismo capitulo y a las ordenes para postear ejemplos practicos cuando haga falta.

Esto recien comienza y segun se siguen nuevos capitulos a ver donde llegamos.

 

Si de hecho aun no termino con este; me falta todavia mensionar las clases, la estructura de las funciones y ecuaciones y algunas de las propiedades mas comunes.

El siguiente "capitulo" seria sobre la combinacion del entorno y el lenguaje y algunas "tecnicas" de como combiarlo. En el tercero, haber si podemos empezar a construir un sitio web simple, pero dinamico en todos su contenidos y en el ultimo y si esto va bien; Clases y su orientacion directamente a objetos, asi como integraciones MySQL y XML y/o bien otros lenguajes. Pero vere como nos va con esta intro

 

a mayor feedback de los lectores mas ganas le dan al autor para seguir hechandole ganas excelente kitsch !!!

 

gracias kitsch.. que me hace falta aprender action script a ver si sigues la saga

 

Muchisimas gracias kitsch, otro alumno que se apunta a las clases. (Ya estoy con lapiz y papel para coger apuntes )


:clapping: ¡BRAVO!.

 

<!--quoteo(post=92916:date=Mar 29 2006, 04:47 PM:name=kitsch)--><div class='quotetop'>CITA(kitsch @ Mar 29 2006, 04:47 PM) [snapback]92916[/snapback]</div><div class='quotemain'><!--quotec-->
Si de hecho aun no termino con este; me falta todavia mensionar las clases, la estructura de las funciones y ecuaciones y algunas de las propiedades mas comunes.

El siguiente "capitulo" seria sobre la combinacion del entorno y el lenguaje y algunas "tecnicas" de como combiarlo. En el tercero, haber si podemos empezar a construir un sitio web simple, pero dinamico en todos su contenidos y en el ultimo y si esto va bien; Clases y su orientacion directamente a objetos, asi como integraciones MySQL y XML y/o bien otros lenguajes. Pero vere como nos va con esta intro
<!--QuoteEnd--></div><!--QuoteEEnd-->


Caya caya, que se me está callendo la baba, xD

 

que interesante INTRO AL -=ACTION SCRIPT=-

 

Que pasada no me enterado de nada, me lo voy a imprimir para leermelo mas tranquilamente

sigue posteando más

 

Gracias amigo, te agradeceria si tienes entre tus apuntes o documentos el scritp para elaborar una calculadora para graficar en el plano cartesiano

 

Gracias Kitsch, espero impaciente los demas capitulos
Salu2!

 

a ver, yo estoy entrando en el AS y me he quedao con una duda:
que diferencia hay entre el == y el ===?
gracias
al

 

creo que de esta me engancho definitivamente al tema del flash y el action porque era bastante reacio a ello,ya que me imponia un poco. Gracias por los sabios consejos que nos dais y sobre todo por querer compartir con los demas los mismos,por desgracias sabeis que eso de compartir no esta muy de moda en nuestros dias.

 

<!--quoteo--><div class='quotetop'>CITA</div><div class='quotemain'><!--quotec-->creo que de esta me engancho definitivamente al tema del flash y el action porque era bastante reacio a ello,ya que me imponia un poco. Gracias por los sabios consejos que nos dais y sobre todo por querer compartir con los demas los mismos,por desgracias sabeis que eso de compartir no esta muy de moda en nuestros dias.<!--QuoteEnd--></div><!--QuoteEEnd-->



Concuerdo con ello, es grato saber que hoy en día todavía existen personas que ayudan a los demás y comparten sus conocimientos.

¡¡Salu2 a todos!!