28 febrero 2010

Guía de Action Script 2 para Novatos / Dummies - Episodio 2

Como dice la cancion de Pedrito: "...después de tiempo..." asi es que empecemos:

Esta guía es SOLO para aprender lo básico de Action Script 2. Si estas viendo por primera vez esta guía te invito a ver el Episodio 1: Acciones para un Botón, que te ayudará a entender mejor este episodio y los que sigan - No cuestiones, solo hazme caso -.

Antes de empezar te recuerdo algunos conceptos fundamentales que debes conocer previamente para manejar el programa y entender esta guía (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

Si desconoces estos conceptos, te recomiendo el Curso en Línea de Flash (gratuito).

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

EPISODIO 2 - 1ra parte: loadMovie (cargando un SWF dentro de otro SWF)

El método loadMovie nos va a permitir hacer lo siguiente:

1- Cargar un SWF dentro de otro SWF.
2- Colocar el SWF cargado en un nivel que elijamos...

Ahora...
¿Qué significa cargar un SWF dentro de otro SWF?
Imagínate que tienes dos cajas: una gigante y otra enana - minúscula, casi microscópica, prácticamente invisible... jejeje ¿se entiende la idea no? -.
as2-LEXtutor-loadmovie1
Ahora, cuando digo "cargar" me refiero a meter una dentro de otra... - Obvio que la caja enana va dentro de la gigante, que si estás pensando hacerlo al revés... podrías pero... bueno no nos desviemos -.
as2-LEXtutor-loadmovie2
Si vemos cada caja como un SWF, entonces tedríamos un SWF (caja gigante) que contiene (carga) a otro SWF (caja enana) <-- ¿Y cómo se hace eso? pues con el maravilloso método: ¡¡¡loadMovie!!!

Si hasta aquí no has entendido, tienes dos caminos:
- Re-leer detenidamente o
- Colocar tu consulta escribiendo un comentario en este post...

Pero, si hasta aquí has entendido la idea <-- ¡Genial! ¿ya vez que no es difícil?... todavía :D Continuemos... - Por cierto en esta ocasión estoy usandoFlash CS4, no es necesario esta versión pero si la tuvieses mucho mejor -.

En Flash, creamos un nuevo documento, luego vamos a cambiar el tamaño de nuestro documento, las medidas serán: 500 píxeles de ancho por 500 píxeles de alto (ver imágenes debajo).
- A partir de ahora: click en las imágenes para ampliarlas -
01-redimensionando

Una vez que terminamos de cambiar las medidas o tamaño de nuestro documento Flash, lo guardamos con el nombre: gigante.fla, de inmediato vamos a generar el SWF para este, es así que tenemos dos caminos:
- Presionar, al mismo tiempo, las teclas CONTROL y ENTER, o...
- Menú CONTROL/opción Test Movie (Probar película)
02-probar-pelicula

Flash nos mostrará nuestro SWF tal cual lo tenemos hasta el momento: Vacío, en blanco, sin ningún elemento <-- hasta aquí tenemos hecha nuestra "caja Gigante"... Ahora repetiremos casi los mismos pasos de gigante.fla para hace la "caja Chica":

- Abrimos un nuevo documento Flash.
- Dibujamos un circulo rojo.
- Guardamos el archivo con el nombre: enana.fla
- Generamos el SWF de enana.fla
Después de estos pasos, enana.swf debería verse así (ver imagen debajo)
02-probar-pelicula-3

Hasta este momento ya tenemos nuestras dos cajas, la Gigante (gigante.fla) y la Enana (enana.fla)

Ahora viene el truco para colocar (cargar) la Enana dentro de la Gigante, es hora de la magia del Action Script...
03-cargar-swf

En gigante.fla aplicaremos el método Loadmovie.
Hacemos clic en el primer fotograma, luego vamos a menú Windows (Ventana) / Actions (Acciones) <-- esto abrirá el panel de Acciones, también puedes usar el atajo por defecto presionando la tecla F9.
04-loadmovie1

En el panel de acciones colocaremos "las palabras mágicas" (el código):
loadMovie("enana.swf", 1); <-- Vamos a descifrar que significa cada palabra y signo...
05-loadmovie1

loadMovie significa cargarPelícula... - está escrito sin espacio entre ambas palabras porque así es la sintaxis (forma de escribir) del Action Script -

"enana.swf" <-- es la "Caja Enana" que irá DENTRO de la "Caja Gigante". No olvides que estamos haciendo esto en gigante.fla, Las comillas también son parte de la sintaxis.

, <-- La coma está allí por sintaxis, está para separar el nombre del SWF a cargar del número de Nivel donde se cargará dicho SWF.

1 <-- Es el número de nivel en donde va la caja - Este asunto del NIVEL lo veremos en el próximo episodio para no enredarnos con tanto concepto, así que por ahora lo dejaremos así -

; <-- El punto y coma indica el final del código. Finalmente, traduciendo loadMovie("enana.swf", 1); dice: Cargar la película "enana.swf" en el nivel 1

Y ahora para poder ver el resultado final, 1ro vamos a guardar los cambios (nunca olvides guardar los cambios recientes), luego volveremos a generar el SWF a gigante.fla, debería verse así...
07-loadmovie-final

Tal cual en el episodio anterior, veamos la Misión Dummie de ahora:
Usando el método loadMovie (¿cuál más?) lograr esto:
08-desafio-dummie

Descarga los archivos de este episodio.

En el siguiente episodio veremos el punto 2: Colocar el SWF cargado en un nivel que elijamos...

Espero que sirva de guía para todos los que no somos programadores pero que queremos aprender apoyados en nuestra persistencia y práctica.

Hasta la próxima...

Este tutorial, que toma tiempo y esfuerzo hacer, está bajo una licencia Creative Commons (está indicado en el sidebar del blog) <-- no se permite para fines lucrativos, gracias por respetar mi trabajo.

7 comentarios:

soyellobo dijo...

está perfect el tutorial. aunque ya sabía como realizar la carga, este tutorial en especial explica de manera sencilla que cualquiera pueda entenderlo. sigan así. felicitaciones.

victor dijo...

gracias! muy bien explicado.

PROYECTO LADO B dijo...

Miki dice: Muchas gracias por el tutorial, ojalá hayas hecho uno sobre como llamar un archivo swf desde un boton en Action Script 2.0, soy medio bruto para eso :) Saludos desde Lima, Perú

Anónimo dijo...

hola me queda una duda amigo como ago para que lo cargado quede en una ubicación x en la pantalla?

Alex Ramirez B. dijo...

Hola, ya no haré más tutoriales de Flash porque esta dejando de ser usado. De momento solo lo estoy usando para animar sin action script.

Hay muy buenos tutoriales aun en la internet sigue buscando.

Suerte.

copa dijo...

Qué pena que ya no hagas más, todavía se pueden hacer muchas cosas hasta con actionScript 2, se entienden súperbien tus tutoriales!

Alex Ramirez B. dijo...

Hola Copa, me apenó no continuar con los tutoriales pero en verdad toma tiempo que cada vez tengo menos porque trabajo para una empresa. Te cuento que me meti a parende EDGE, el supuesto sucesor de FLASH, son muy similares pero Edge es mas limitado por un lado y mas practico por otro lado, si puedes aprenderlo genial.
Hasta en el blog ya no escribo tanto, se extraña un poco pero hay responsabilidades que cumplir.
Además lo he dejado tan de lado que ya ni se si alguien lee todo esto, tu mensaje ha sido un recordatorio que todabia hay alguine por alli <-- gracias por eso.