Navegación con peliculas externas en Flash

Los conceptos basicos de botoneras de navegación, loadMovie y peliculas externas son repasados en este tutorial de sistemas de navegación donde se creara una pelicula completa y se mostrara

Bueno aqui estoy para entregar mi primer tutorial, todo sea por ayudar y aportar a nuestra gran comunidad. Lo que haremos es o intentaremos :S hacer es esto:

Primero aclarar que este tutorial esta dirigido a utilizar un poco de ActionScript (no..no!!! no se vayan!!! si es solo un poquito), especificamente con loadMovie, ademas de utilizar botones para poder navegar a traves de nuestra pelicula principal, los cuales llamaran a peliculas externas. Los requisitos de conocimiento para llevar a cabo este tutorial son muy pocos ya que se debe saber como trabaja loadMovie, creacion de botones, y obviamente conocer el manejo de Flash (reconocer las Herramientas, paneles de Acciones, Propiedades, Biblioteca etc...), por eso les recomiendo que tengan "aprobados" XD los siguientes tutos de los amigos ICEM4N y flasher de aqui de CLab...y vamos que yo igual que uds. empece desde 0...a echarle manos!!! ;) : ^^

Sin mas rodeos comencemos:
Primero debemos tener creadas por separado cuatro peliculas de 550x400 pixeles de tamaño cada una, dejando libre sin ningun objeto la parte vertical izquierda de estas para poder dejar la botonera que las llamara a cada una, mas bien en lo posible no utilizar el espacio donde estara nuestra botonera si no ¿como navegaran los felices usuarios de su estupenda y bellisima web? JEJE!! ;) (Por cierto, las peliculas creadas por mi no tienen nada de especial, ni interpolaciones, ni animaciones espectaculares, solo quiero demostrar la navegacion completamente con Flash, ustedes tendran la oportunidad de "crear" segun su conocimiento, habilidad y talento, por lo pronto vuelvo a decir que en este caso el objetivo no es realizar una gran animacion :P despues ustedes podran agregar otros ejemplos en tutoriales de CLab ok??? ;) )

Estas peliculas seran nuestras secciones en nuestra web, las cuales le daremos nombres de archivo como sigue:

principal.swf
segunda.swf
tercera.swf
cuarta.swf

Estas peliculas las tomaremos en cuenta mas adelante, solo asegurarse de tenerlas creadas.
Entonces ejecutamos nuestro Flash MX 2004 (los archivos del tutorial no abren en Flash MX, pero si lo deseas crear en esta version, siguiendo los pasos correctamente no deberias tener problemas), y comenzamos con Crear un nuevo documento de Flash, y ya se presenta el Escenario Principal. Procedemos a crear nuestro menu con sus respectivos botones...nos colocamos en la barra principal de Flash MX 2004 especificamente en Insertar -->Nuevo Simbolo (o Ctrl+F8), y aparecerá una ventanita donde escribiremos "botonera" como nombre del simbolo y seleccionamos la opcion Clip de pelicula, despues de esto Aceptar. La ventanita es esta:

Despues de esto deberia quedar algo como esto encima de la linea de tiempo:

Estando en el escenario de este clip de pelicula llamado"botonera", crearemos nuestros botones los cuales llamaran a las secciones de la web, a traves de 4 rectangulos con su texto estatico correspondiente (los cuales pueden hacerlos a su gusto, yo los hice sumamente basicos). Dichos rectangulos deben alinearse para que posean un aspecto mas ordenado (para sacar herramienta de Alineamiento presionar Ctrl+K), y por ultimo seleccionar con la Herramienta de Seleccion (puntero negro) de a uno para convertirlos en simbolo como botones, darles click derecho y elegir Convertir en simbolo como sigue:

Lo cual nos dara una ventanita donde nombraremos el simbolo como "bt_principal", y obviamente marcar opcion de Comportamiento Boton

En los tres rectangulos restantes haremos el mismo procedimiento nombrando a cada uno como : "bt_segunda", "bt_tercera", y "bt_cuarta" (ya saben a quien direccionan) =D
Una vez hecho esto volvemos al Escenario Principal (click en Escena1 arriba de la linea de tiempo... se acuerdan? bien sigamos), estando en escenario crearemos un clip de pelicula vacio que nombraremos "llamando" (Insertar--->Nuevo Simbolo o Ctrl+F8).

Esto provocara que nos habra la pelicula "llamando" en una ventana para editar, pero volvemos al Escenario Principal, acuerdense del click sobre la linea de tiempo, estando ahi presionaremos Ctrl+L para poder abrir la biblioteca (esquina inferior a la derecha) donde se encuentra esta pelicula vacia.

Damos click sin soltar, y arrastramos hacia el Escenario (para mantener el orden todo esto lo hacemos en una capa que etiquetaremos como "peli_vacia" en el Escenario Principal), se vera un circulito pequeño, el cual debemos mantener seleccionado e irnos a la paleta Propiedades (en caso de no ver, teclear Ctrl+F3), OJO que veremos las propiedades del circulito que es nuestra pelicula vacia "llamando". En dicho panel debemos darle un nombre de instancia que sera "inst_llam", ademas de darle la posicion, es decir en X e Y, los valores deben ser 0, quedaria algo asi:

Vamos bien hasta aca???? Pues bien...estando en Escenario Principal creamos otra capa en la linea de tiempo que etiquetamos como "capabotonera" y nuevamente vamos la biblioteca (Ctrl+L), para al fin sacar nuestra botonera, y colocarla en la posicion 0,0 de dicho Escenario (si!!... igual a la pelicula "llamando" a través del panel Propiedades), le hacemos doble click para poder editar la botonera en la misma posicion, y por fin hemos llegado a lo que les gusta a todos: ActionScript!!!!!!!. Al ver ya nuestra botonera, seleccionamos el primer boton, que tiene por nombre "bt_principal", despues de esto abrir el panel Acciones (tecla F9), para escribir el script. En este panel, deberemos escribir el siguiente script para el boton "bt_principal":

on(release) { //accion que define cuando el boton del mouse es liberado.
	_root.inst_llam.loadMovie("principal.swf");
	// _root: ruta que se refiere al escenario ; inst_llam: instancia de la pelicula vacia "llamando" ; loadMovie: permite la carga de archivos externos ;
}

Debiera verse algo como esto, denotar lo que encierran los circulos rojos:

Ahora se debe realizar el mismo procedimiento para los demas botones, es decir ir seleccionando boton por boton, ir al panel de Acciones, y solo cambiar el nombre del archivo al que desean llamar, con dicho boton...¿Preocupados?...aqui estan los codigos para cada (SI PARA CADA) boton.

"bt_segunda":

on(release) { 
	_root.inst_llam.loadMovie("segunda.swf");
}

"bt_tercera":

on(release) { 
	_root.inst_llam.loadMovie("tercera.swf");
}

"bt_cuarta":

on(release) { 
	_root.inst_llam.loadMovie("cuarta.swf");
}

Posibles Problemillas :P
1 - Antes de seguir con los pasos finales debemos mirar bien en nuestra linea de tiempo de nuestro Escenario Principal, se acuerdan de las capas?? pues bien la "capabotonera" debe estar sobre la capa "peli_vacia", ya que si ocurre lo adverso, siempre lo que se cargue, lo hara por encima de nuestra linda botonera (es decir la de ustedes, porque la mia :S), debiera verse asi:

Pues bien ya esta todo listo para tu primera prueba de fuego, exportas lo que has hecho, y a primera vista solo veremos nuestra "botonera", lo que no puede ser ya que debemos mostrar la intefaz principal de la web...y para nosotros los novatos esto es lo que ocurre (nos demandamos al fracaso, pateamos etc...despues de haber seguido paso a paso un tonto tutorial como este no?? XD)
Pero tranquis usaremos una carga de la seccion principal (archivo "principal.swf") en la ejecucion de nuestro trabajo, ¿para eso que debemos hacer?...exacto!!! recurrir a ActionScript!! :D entonces seleccionamos el primer fotograma de la capa "peli_vacia" en el Escenario Principal y colocamos el siguiente script

_root.inst_llam.loadMovie("principal.swf");

Pues bien ahora ya deberian tener listo este tutorial, que por cierto espero les sirva de mucho como a mi me han servido los tutoriales de otros amigos de aqui de Cristalab...Tambien decirles que disculpen por lo poco en cuanto a imaginacion y diseño :P
Agradecer a cada uno de uds. muchachos, ya que esto lo pude realizar solo gracias a cada integrante de CLab.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Descargar Archivo

Navegación con peliculas externas en Flash

Publica tu comentario

o puedes...