Guía de ActionScript 2 para Novatos / Dummies - Episodio 1

Lima-PERU 13/01/2007 //--> 04:11 (otra noche sin dormir)

Holas este es la 1ra entrega de mi guía para Dummies (novatos) en Action Script 2 (AS2)
Me tomó más tiempo del que creí hacerlo pero bueno ya está a ver si les sirve de ayuda como es mi deseo.

No se necesita ser programador para aprender sobre action script, es como aprender palabritas en inglés para poder entender algunas cosas, ya saben "pollito chiken, gallina hen..." claro que si sabes algún lenguaje de programación (html no es lenguaje de programación) entonces te será más fácil aprender Action Script.

A ver, cuando empecé, en ese tiempo usaba el Flash 5, lo primero que hice para comprenderlo fue revisar el tutor del mismo programa, allí me enteré de algunos conceptos fundamentales para manejar el programa (en orden de aprendizaje):

• Línea de tiempo y los tipos de fotograma (fotograma, fotograma clave, fotograma clave vacío)
• Los símbolos (los objetos) y sus tipos (botón, movie clip , gráfico)
• Las interpolaciones (formas de animar los objetos)
• La biblioteca
• Las instancias (nombres de instancia)
• Y obviamente el Action Script

Como esta guía es de action script, no trataremos otra cosa, pero eso si, tienen que manejar bien estos conceptos para programar en Flash con el AS2.

Empezaremos con...

ACCIONES PARA UN BOTÓN

¿Cómo programar un botón?
Iniciamos creando el botón: dibujamos un círculo en el escenario, lo seleccionamos, lo convertimos en símbolo y lo nombramos como “botonmc”

Apartir de ahora clic en las imágenes para ampliarlas

Luego agregamos un fotograma clave en el fotograma 5 de la línea de tiempo haciendo clic derecho sobre el fotograma y luego clic en "insertar fotograma clave"

Otra forma de agregar fotogramas clave es hacer clic en menú de opciones / insertar / línea de tiempo / fotograma clave.

Sigamos... para ver el cambio de fotogramas, en el fotograma 5 escribo "Dummies"
Para mantener orden, creamos otra capa en la línea de tiempo (fig 1) la llamaremos "AS" (Action Script)
Si no sabes renombrar capas, Haz doble clic sobre el nombre de la capa y escribe el nombre que se propuso: "AS"... (fig 2)

Así tendremos el código (script) en un solo lugar

Ahora la idea va asi:
Estamos en el fotograma 1 de la línea de tiempo, al hacer clic en el botón nos debe llevar y detenernos en el fotograma 5.

Es por ello que pondremos código en el fotograma 1 donde está el botón que nos llevará al fotograma 5

Para esto:
Colocamos el puntero en el fotograma 1 de la capa AS y hacemos clic derecho e insertamos un fotograma clave (fig 3), luego colocamos el puntero en el fotograma 5 de la misma capa, clic derecho e insertamos otro fotograma clave (fig 4).

Por fin el Action Script!
Bueno, la primera orden (código o script) será quedarse quieto en el fotograma 1
¿Por qué?
Porque si no lo hacemos, al momento de reproducir la película (Ctrl + Enter o Menú / Control / Probar película) la cabeza lectora de la línea de tiempo correrá hasta llegar al fotograma 5 y volverá la fotograma1 y nuevamente se moverá hasta el fotograma 5 para volver otra vez al fotograma 1 y así sin parar (un loop o repetición contínua)
Para insertar código en el fotograma 1, ponemos el cursor en dicho fotograma, hacemos clic derecho y clic en "acciones"

También se puede pulsar la tecla F9 o en todo caso: Menú / Ventana / Acciones

Aparecerá el panel de Acciones y dentro de él escribiremos:
stop(); --> es recomendable terminarlo con un ";" pero no indispensable.

Aprovechamos que tenemos abierto el panel de acciones para colocar la orden para el botón azul que tenemos en el escenario, en el fotograma 1...

Pero para programar un símbolo del escenario (sea del tipo botón, movie clip o gráfico) tenemos que darle un nombre de instancia, en este caso el símbolo es el botón azul.
Nos dirigimos al panel de Propiedades; accedemos a este panel a través de Menú / Propiedades / Propiedades

Una vez abierto el Panel de Propiedades, hacemos clic sobre el botón azul del escenario y en el Panel Propiedades veremos que en su extremo izquierdo hay un casillero que dice "" en letras grises; hacemos clic dentro y escribimos el nombre de instancia para el botón azul--> el nombre será: azulito, luego pulsamos "Enter" para aplicar el nombre de instancia al botón.

Finalmente hacemos de nuevo clic en el fotograma 1 de la capa AS en la línea de tiempo y abrimos el Panel de Acciones, pulsando la tecla F9.

Escribimos el código para el botón azul cuyo nombre de instancia es "azulito"

azulito.onPress = function(){
gotoAndStop(5);
}

¿Te parece chino?, entonces vamos interpretarlo con calma:

azulito--> se refiere al botón azul

. --> para indicar que lo que sigue es una orden, evento o una ruta respecto al símbolo o instancia*: azulito (botón azul), en este caso será una evento sobre azulito

onPress -->es el evento “al Precionar”

Hasta aquí tenemos:

azulito.onPress que significa “al precionar el botón azul (azulito)”

Sigamos interpretando:

= --> es igual, equivale a...

function --> una función, engloba una o más ordenes para el símbolo o instancia es por eso que usa llaves, lo que está entre las llaves son las ordenes que forman parte de esa función. El parentesis lo explicaremos en el siguiente tutor por ahora lo dejaremos como parte de la sintaxis (forma de escribir) del Action Script.

GotoAndStop(5) --> significa “ir a...y detenerse en...” lo que vez entre parentesis (5), es el fotograma a donde “ira y se detendrá” la cabeza lectora en la linea de tiempo

;--> indica el fin de la orden

Finalmente tenemos que:

azulito.onPress = function(){ --> “al presionar el botón azul” “se cumplirá la siguiente orden”

gotoAndStop(5); --> “ir y detenerse en el fotograma 5 de la línea de tiempo”

} --> “hasta aquí es la orden”

Para ver como funciona esto probamos nuestra película pulsando las teclas “Control + Enter” o menú / Control / Probar Película

Hacemos clic sobre el botón azul y nos debe llevar al fotograma donde se escribió Dummies

Ahora la misión Dummie:
Hacer que al presionar botón azul del fotograma 5 me lleve al fotograma 1 nuevamente

descargar el archivo FLA de: http://www.box.net/public/ks4omlnrt8

Ojala les sirva esto.
Espero sus comentarios y sugerencias para saber en que mejorar esto asi como sus consultas

Bytes!

Este tutorial está bajo una licencia Creative Commons <-- no se permite para fines lucrativos, si haz de usarlo contáctate conmigo, gracias por respetar mi trabajo.

ACTUALIZACION (4/marzo/2010)
Por fin hice después, de mucho, el episodio 2: Load Movie - Parte 1