Tutorial flash

[ronivenza]

Aprende a crear tus propios menús para tus animes favoritos en flash con este tutorial

Programas Necesarios

         - Adobe Photoshop CS5 o cualquier otro programa de edición de imágenes. Nos servirá para preparar las imágenes y los botones.
         - Macromedia Flash MX o Flash 8. Para unir todo y crear el menú. Podeis descargar Macromedia Flash 8 desde Aquí

Antes de empezar quiero aclarar un par de cosas:
 
Primero: NO voy a explicar el funcionamiento del Photoshop… tampoco es que haga falta ser un genio, basta con saber recortar imágenes del fondo y algún que otro efecto si queréis hacer las imágenes más vistosas. Si necesitáis aprender desde 0, podéis buscar tutoriales por la red.
 
Segundo: El Flash permite utilizar 2 tipos de gráficos: imágenes normales y gráficos vectoriales. Los gráficos vectoriales son un tipo de imágenes que tienen la propiedad de que no se pixelan cuando se amplían, pero no los vamos a usar porque: A. No nos hace falta, y B. No se utilizarlos yo. (Como veréis, yo soy el primero que admite que no tiene ni idea de esto).

Nociones básicas de cómo funciona el Flash.

          Básicamente, el flash actúa como una película continua, es decir, empieza por el fotograma 1, luego pasa al 2, luego al 3… etc. Nosotros lo que vamos a hacer es decirle al flash “aquí, en el fotograma 5 mete este fondo, y ahora en el 30 haz visible esta imagen, y ahora muévelo…”. Es muy sencillo.

          Bien, en la imagen podemos ver 4 zonas:

La zona 1 es la barra de navegación, donde están los fotogramas y las capas.

          Las capas (LETRA B) funcionan exactamente igual que en el Photoshop. Usamos las capas para tener organizadas las imágenes, efectos, músicas… y no liarnos. Para hacerlo todo más fácil vamos a seguir la filosofía “una imagen, una capa”. Usaremos una capa para cada imagen para evitar líos con el flash, que a veces puede ser bastante perro. Recordad: las capas que están colocadas más altas se superponen a las más bajas. De este modo, en la imagen, el Mazinger está en una capa colocada más arriba que el fondo, o de lo contrario no se vería (estaría tapado por él). El icono correspondiente al “ojo” sirve para decirle al flash si “muestra la capa o la oculta”. Si pinchamos en la capa “botón 6”, en el punto que está a la altura del ojo, el botón 6 desaparecerá (seguirá estando, pero no lo veremos). El icono del “candado” sirve para “bloquear” la capa. Si lo seleccionamos, aparecerá un pequeño candado, y no podremos hacer modificaciones en la capa hasta que la liberemos. EL tercer icono es para ver las imágenes como bordes.

          Los botones de capas (LETRA A) son de izquierda a derecha: “añadir capa”, “poner guía”, “añadir carpeta” y “eliminar capa”. Ya iremos viendo las que necesitemos.
          La zona marcada con la LETRA C es la más importante. Cada uno de esos recuadritos (de izquierda a derecha) es un frame. Como veis, cada capa se lee de izquierda a derecha. El rectángulo rosa ese es el fotograma que estamos viendo actualmente. Cuando ejecutamos el flash, va avanzando el cuadrado rosa hacia la derecha, y va haciendo lo que indiquemos en cada capa.
          Ejemplo: al llegar al fotograma 238, comenzaría a aparecer el efecto de las capas “Botón 5” y “Botón 6”, y mientras están ocurriendo, al llegar al 255, empezarían los efectos de las capas “salir” y “volver”. Veréis como esto lo entendéis cuando vayamos haciendo el menú.
          La LETRA D nos muestra el fotograma actual.
          La LETRA E es la barra de Zoom, aquí podemos seleccionar la ampliación del área de trabajo.

La zona 2 es la barra de herramientas.

          Su funcionamiento es, en cierto modo, similar al del Photoshop pero no preocuparos mucho por ella, porque apenas las vamos a usar. Solo quedaros con la flecha negra (seleccionar) y con la letra A (poner texto).

La zona 3 es la zona de Propiedades. Allí definimos el tamaño del flash, el fondo, su velocidad… y cuando seleccionamos una imagen, su tamaño, su tipo, su posición…

La zona 4 (no, no estoy loco, ya sé que no hay zona 4), me refiero con ella a la zona central, donde se ve al mazinger, el fondo ese azul-sagredeangel tan mono y esos botones tan molones que se están moviendo. Ahí es donde vamos a trabajar y dado que tenemos tanto trabajo por delante… vamos al grano.

          Primer Paso

          Bueno, lo primero que necesitamos es definir cómo va a ser nuestro menú. El menú constará de 3 partes: Un fondo, una composición, y unos botones. Para calcular el tamaño máximo que puede ocupar nuestro menú, sumen los megas que sobran al CD… es decir, en este caso, un menú para los capítulos 5-8 de FLF (CD2) podría ocupar un máximo de 10 Mb (recordad, los CD de 80 min. tienen 703 megas, pero dejaremos uno libre por si acaso).

          Para el fondo, tenemos que elegir uno acorde con el tema que vayamos a hacer. En este caso, se trata de un menú de Gundam Seed, por lo tanto el fondo debe ser algo relacionado con la ciencia ficción, el espacio, etc. Un buen lugar de partida para elegir un fondo de este tipo puede ser esta página: www.deviantart.com De ahí he sacado yo el fondo que vamos a usar. Bueno, el fondo escogido es este:

http://s475.beta.photobucket.com/user/XxXNaikerXxX/media/fondo.jpg.html

          Sobre él colocaremos las imágenes que formarán el menú completo. Bien, lo primero que vamos a hacer es ajustarlo al tamaño adecuado… ¿Tamaño adecuado?

          Así es. Verán, el Flash es muy buen programa… pero siendo sincero… es malo ajustando el tamaño de las imágenes. Se pixelan que da gusto, dan problemas de capas… lo que vamos a hacer es que SOLO vamos a usar imágenes YA AJUSTADAS al tamaño necesario, y así evitaremos cualquier problema que pueda surgir. Y lo que es más… como sabrán, distintas personas utilizan distintas resoluciones de pantalla… y si hacemos un menú en 1024 y lo ve otra persona en 800x600, puede haber fallos, de igual forma, si hacemos un menú en 800x600, y alguien en 1024 lo abre, se le va a ver pixelado. Para evitar eso, vamos a hacer los menús en 800x600, y vamos a decirle más adelante al flash que NO ajuste el tamaño, de esta forma los que lo ejecuten en 800x600 lo verán normal, y los que lo ejecuten en 1024 lo verán más pequeño, con un borde negro alrededor, pero no dará ningún fallo.

          Bien, hemos decidido hacerlo en 800x600. Ahora verán que la imagen de fondo. Es de 1280x1024. Cuanto mayor sea una imagen, mejor, porque al reducirla en el Photoshop no se pierde calidad. Si usamos una imagen de 640x480 en Photoshop y la ampliamos, nos vamos a cortar con los píxel. Una vez que tengan la imagen, ábranla con el Photoshop, y lo que vamos a hacer es reducirla. Vamos a recortar un poco, para que no se vean las letras de las esquinas (si las queréis dejar, allá vosotros, pero queda de pena). Por ejemplo, en la imagen pueden observar lo que he hecho yo. Seleccionan un área de 1247x935 y la recortan, tras esto la reducen a 800x600 y la guardan como .jpg (a máxima calidad).

Ahora vamos a empezar con el Flash.

          Ejecútenlo. Lo primero que tenemos que hacer ahora es seleccionar el tamaño. Abajo, donde dice (seguro que lo adivinan) “tamaño”, clic. Ya dijimos que lo íbamos a hacer en 800x600, así que pongan ese tamaño. En esa ventana también vamos a definir el color de Fondo (en este caso, usen el negro), y la velocidad. La velocidad es lo rápido que el programa pasará de un frame (imagen) al siguiente. El número por defecto es 12. Eso significa que una animación que dure 12 frames durará 1 segundo, 24 frames = 2 segundos, etc. Cuanto más bajo sea el valor de Velocidad, más separación temporal habrá entre frames, por lo tanto las animaciones serán menos fluidas. 12 es un número algo bajo. Para que las animaciones sean nítidas, vamos a subirlo al doble, 24.

Ya sabrán, 24 frames = 1 segundo, 48 frames = 2 segundos, 12 frames = 500 mseg.

          Bien, para poder ver el área completa de trabajo, pueden usar la barra de “Zoom”, y seleccionando “mostrar fotograma”. Verán un rectángulo negro. Es nuestro flash… por ahora.

          Bien… lección de cómo importar imágenes. Es muy simple. Para añadir una imagen al flash, vamos a “archivo/Importar a biblioteca”. Una vez allí seleccionamos las imágenes (en este caso, Fondo.jpg), y damos aceptar. Ahora el flash ya tiene metido dentro la imagen que queremos usar. Para ver las imágenes, símbolos, etc. que tienen metidos en flash, pulsen “F11”. Se abrirá una ventana donde aparecen las imágenes importadas (por ahora solo el fondo).

          Bueno, vamos con las capas y frames. Presten atención, que esto es lo más importante.

          A ver, recuerden que hemos dicho que a cada imagen vamos a asignarle una capa, para evitar líos. Bien, lo primero que vamos a hacer es añadir una capa.
          Den clic en el icono “[b]insertar capa” (revisen el principio si no sabes dónde está). Verán que aparece otra capa, llamada “capa 2”. Para cambiar el nombre de la capa, doble clic en el nombre (así pues, dan doble clic en “capa 2”, y pongan de nombre “fondo”). En esa capa será donde insertaremos el fondo, pero antes… la capa control.
          La capa “control” es la capa donde vamos a ir poniendo las acciones del flash, en este caso los Stop y los Play. Ya lo entenderán cuando la usen. Por lo pronto, renombren la “capa 1” a “control”. La capa control la vamos a dejar siempre vacía, por ahora y, al no llevar imágenes ni nada, la vamos a dejar abajo del todo. Recuerden que las capas que están por encima se superponen, así que las próximas imágenes que inserten deben estar en capas superiores, o de lo contrario no se verán (estarán tapadas por el fondo). Pueden cambiar el orden de las capas arrastrándolas (pinchan, arrastran arriba o abajo, y sueltan).
          Ahora nos metemos con los frames. Veamos, a la altura de la capa “fondo”, donde equivale al fotograma 10, clic con el botón derecho, y en la ventana que nos sale clic en “Insertar fotograma clave”. Tras esto, clic en el 20 y le dan a “insertar fotograma” (NO clave).

Tras haber hecho eso, deberían ver esto:

Explico:
          - El 1 corresponde con las capas. Las superiores se superponen a las inferiores.
          - El 2 corresponde con fotogramas que están presentes, pero que están vacíos (porque están blancos, si estuvieran grises, querría decir que hay alguna imagen)
          - El 3 corresponde con un fotograma clave (ahora les explico)
          - El 4 corresponde con el fotograma seleccionado (pinchar con el botón izquierdo en cualquier fotograma le sitúan en él)
          - El 5 corresponde con el fotograma que se está viendo en este momento (es decir, si hacen clic ahí y arrastran a izquierda o derecha, podrán ver lo que llevan hecho de flash). Ahora mismo no se ve nada, porque no hemos hecho nada.
          - El 6 corresponde con fotogramas no presentes. No es que estén vacíos, es que ni siquiera le hemos dicho al flash que los tenga en cuenta.

          Bien, el flash funciona de forma sencilla: todo lo que esté entre 2 fotogramas clave es una unidad. Si ponemos una imagen en el fotograma 17 (donde estamos ahora), la imagen no saldría solo en el 17, sino en todos los fotogramas entre el 10 y el 20 (inclusive ambos). Los fotogramas 1-9 seguirían vacíos, porque están separados por un fotograma clave (el 10). Si quitamos el 10 (y lo convirtiéramos en un fotograma normal), al insertar una imagen en el 17, la imagen saldría en los fotogramas 1-20. ¿Lo entienden? Ok, una vez explicado esto, clic derecho en el fotograma 10, y le dan “borrar fotograma clave”. Verán que el fotograma clave desaparece, ahora es fotograma normal. Abran la biblioteca (F11), asegúrense de seleccionar cualquier fotograma de la capa “fondo”, y arrastren la imagen “fondo.jpg” de la biblioteca al área de trabajo. La imagen aparecerá allí. Ahora la van a colocar en su sitio. ¿Ven lo que he redondeado de rojo? Aparecerá siempre que seleccionen una imagen. Los 2 números de la izquierda son el tamaño, y los dos de la derecha son la posición (x e y). Hemos dicho que no vamos a tocar el tamaño de las imágenes, así que clic en los números de la derecha, y pongan X=“0” e Y=“0”, eso colocará el fondo cubriendo todo el área de trabajo. Recuerden que si se equivocan, pueden usar el comando “deshacer” (CTRL-Z).

Verán que ahora los fotogramas 1-20 en la capa “fondo” son grises eso indica que hay alguna imagen.
          Por ahora, nuestro flash consiste en un precioso fondo que aparece durante 20 frames (algo menos de 1 segundo), y vuelve a empezar. Vamos a cambiar eso ahora mismo.

Empezamos a poner gráficos que se mueven y eso.

          Bien, veamos, ahora vamos a poner algo en el fondo. La idea es hacer una composición adecuada, que tenga relación. No basta con poner 2 imágenes cualesquiera, tienen que decir algo. En este ejemplo, vamos a poner 2 imágenes: Tomaremos al Gundam STRIKE y a su piloto (Kira). De este modo, si en el futuro hacen otros menús, podrían ir poniendo a cada Gundam y su piloto (el menú del siguiente CD podría ser por Ej. el Gundam AEGIS y su piloto (Asran)… y así sucesivamente.

De esta imagen vamos a sacar al Strike:
http://i475.photobucket.com/albums/rr119/XxXNaikerXxX/gundam.jpg

y de aquí a Kira Yamato:
http://i475.photobucket.com/albums/rr119/XxXNaikerXxX/bigshot3.jpg

          Bueno, pues nada, ahora a ponerse a trabajar… hay que recortar al Gundam del fondo. Cuando lo hayan recortado, tienen que hacer transparente el fondo, o sea, que solo sea visible el Gundam. Evidentemente no es cuestión de poner al gundam y un recuadro azul alrededor pegados sobre la imagen, ¿no? También tendrán que recortar a Kira, y borrar las letras que se superponen encima del hombro derecho (es muy fácil con la herramienta de clonar). En mi caso, también voy a invertir el eje horizontal de la imagen del Strike, para que quede mirando hacia la izquierda, en vez de la derecha.
          El tamaño… digamos que la imagen de Kira debe medir unos 400 Pixel de altura, y el strike también. Así da la impresión de que el piloto está en primer plano.

          Deben quedar más o menos así. Bien, ahora hay que guardarlas… Lo ideal sería guardarlas como una imagen .jpg, ya que ocupan poco… pero hay un problema: las imágenes .jpg no permiten guardar transparencias. Si guardan estas imágenes como .jpg, cuando las vayan a usar se darán cuenta que el fondo ya no es transparente, sino blanco… y habrían tirado a la basura el trabajo de recortarlas. Así que cuidado. El flash no permite importar imágenes .psd (Nota: versiones posteriores, una vez que Adobe adquiriera flash, si permiten su importación) así que van a usar el formato .png. También podrían usar .gif, pero las .gif solo permiten un máximo de 256 colores (se ve de pena).

          O sea, que van a “guardar cómo”, y seleccionan .png. En mi caso se llaman “kira.png” y “strike.png”.

          Segundo Paso

Bueno… señores, abran el flash, que vamos a ponernos serios ahora.

          Ahora mismo tenemos 2 capas, una control (vacía) y otra con 20 fotogramas, que es el fondo. Es justo ahora cuando tienen que plantearse 2 cosas: Primera, que van a hacer con las imágenes que han recortado, y segunda, que música van a usar en el menú.
          Empecemos con la música: Yo me he bajado la OST (Original Sound Track) de gundam, y de todas las canciones que hay, mi preferida es “Annani Issho Dattanoni”. Es la música del ending de la serie. La he elegido por 2 razones: en primer lugar es preciosa, y en segundo, porque se de See-Saw. ¿Habéis visto .Hack//SIGN? pues quien canta todas las canciones de esta serie es precisamente See-Saw. Creo que no hace falta que les recuerde que .hack//SIGN tiene una de las mejores bandas sonoras, y es precisamente por quien las canta…
          En el OST original, las canciones son de 256 Kbps, ocupando 8 megas y pico… una pasada. Yo la he reducido a 160 Kbps, y se oye de bien, ocupando solo 5.5 Mb. Recordad, el máximo del menú son 10Mb, nos quedan unos 4 megas para lo demás. Si fuera necesario reduciríamos la música a 128 Kbps.
          Bueno, vamos a hacer una capa nueva (ya saben, botón “añadir capa”). Esta capa la vamos a colocar entre el fondo y la capa control así nos organizamos un poco. Ya sabéis, pinchad sobre la nueva capa, y manteniendo pulsado, la movéis arriba o abajo hasta ponerla en medio. Ahora doble clic en el nombre y la llamamos “música”. Hora de importar el MP3. Ya sabrán como va: “Archivos/Importar a biblioteca/Seleccionáis el mp3”, y le dais “aceptar”.
         Poner la música es lo más fácil del mundo. Van al primer frame (bueno, a cualquier frame) de la recién creada capa “música”. Abajo, en la barra de propiedades (recuerden, zona 3), y donde dice “música” clic y seleccionáis el mp3 que acaban de importar. Donde dice “efecto” lo dejan en “ninguno”, donde dice “sinc” lo dejan en “evento”, y donde dice “bucle”… bien, es cuestión de gustos. Si ponen un numero aquí, cuando la música llegue al final, se repetirá X veces. En nuestro caso, vamos a poner 100, o sea, que se repite sin parar 100 veces. Verán que una línea aparece en esa capa… eso indica sonido (de hecho, es la forma de onda de la música). A diferencia de las
otras capas, no es necesario que la capa “música” dure hasta el final del flash, ya que una vez iniciada la música, solo se parará si le damos la orden, no porque se quede sin fotogramas en esa capa.
         Ahora vamos ya con lo complicado… vamos a hacer lo siguiente, a ver si os gusta: primero vamos a hacer que aparezca Kira Yamato bien grande, en primer plano… de color negro (oscurecido) y luego hacemos que una letras se coloquen formado GUNDAM, después el Strike aparece por la izquierda transparente mientras se va haciendo visible, y rematamos la faena haciendo que Kira se vuelva de color normal. No es muy original, pero nos basta por ahora. Mientras… vayan importando a la biblioteca las 2 imágenes .png que hemos hecho antes.
         Bien, empezamos creando una capa para Kira. La llamamos “Kira”, y la colocamos arriba del todo. Nos vamos hasta el fotograma… 72 (unos 3 segundos desde el principio del menú) y hacemos clic derecho, le damos “crear fotograma clave”. Veremos que desde el fotograma 1 hasta el 71 se crea un bloque (vacío), y en el 72 aparece un clave. También verán que el fondo desaparece… eso es porque la capa del fondo solo tiene fotogramas hasta el 20, y a partir del 21 ya no sale. Para arreglar eso, clic en el fotograma 72 (capa fondo) y den “insertar fotograma” (NO CLAVE). Veréis que la capa Fondo se alarga hasta el fotograma 72. Perfecto. Pinchad en el fotograma 72 de la capa “Kira”, abrís la biblioteca (F11), y arrastráis la imagen sobre el flash. Ahora vamos a colocarlo de forma que el límite inferior de la imagen de Kira (que está cortado) coincida con el límite inferior del flash. También lo vamos a pegar en el lado de la derecha, porque el brazo está cortado. Recordar que pueden usar la zona de los ejes X e Y en la barra de propiedades para colocar la imagen al milímetro.

          Bueno, eso hace que la imagen de Kira aparezca de golpe… pero eso queda muy feo. Vamos a convertirla en un símbolo y a trastear con ella.
          Veréis, ahora mismo, la imagen es un “mapa de bits”. Con ella no podemos hacer ningún efecto, así que la vamos a convertir en un símbolo. Vale, pinchad sobre la imagen con el botón derecho y pulsáis sobre “convertir en símbolo”. Os salen 3 opciones:

          - Gráfico: Esta es la opción más normal. Siempre que queráis trastear con una imagen (cambiar color, aumentar, reducirla…) tendremos antes que transformarla en un gráfico.
          - Botón: Creo que es evidente. Esta opción transforma la imagen en una zona señalable y pulsable.
          - Clip de película: Este símbolo sirve para transformar la imagen en un flash dentro del flash… ejemplo, si queremos que una imagen se vuelva negra, luego blanca y luego roja, solo tendremos que convertirla en clip de película, y haciendo doble clic sobre ella, aparecerá una              nueva línea de tiempo… allí podemos hacer lo que queramos. Ya lo veréis más adelante.

          - En este caso, pulsáis sobre “grafico” (si queréis cambiar el nombre podéis hacerlo), y aceptáis. Veréis que el borde de la imagen ahora es azul. Eso indica que es un símbolo. Pinchad sobre la imagen de “Kira”.

          ¿Veis la imagen? En la barra de propiedades han aparecido unas opciones que antes no estaban. Nos vamos a fijar solo en el grupo “Color”, que se ve desplegado en la imagen:

          - Ninguno: eso deja la imagen tal cual está.
          - Brillo: Esto nos permite definir el grado de brillo de la imagen, desde 0% (totalmente negra) hasta 100% (totalmente blanca)
         - Tinta: Esta opción nos permite definirle un color y el % de saturación del mismo a la imagen… en otras palabras, podemos elegir el rojo y poner un 50%, así que la imagen será parcialmente roja, o un 100%, y la imagen será totalmente roja.
          - Alfa: Nos permite definir el % de opacidad de la imagen. Si elegimos un 100%, la imagen será totalmente opaca, si ponemos un 50%, será translúcida, y si ponemos un 0%... será totalmente transparente (no se verá)
         - Avanzado: Permite unir a la vez las opciones Alfa y Tinta, lo que nos permite hacer que la imagen sea parcialmente roja y semitransparente (por ejemplo).

          Bien, habíamos dicho que la imagen iba a aparecer negra poco a poco. Seleccionamos “Avanzado” y pinchamos en configurar. Se nos aparece una ventana, donde elegimos el % de cada color y el % de opacidad. Como queremos que sea negra y transparente, tenemos que poner todos los colores a -100% (el negro es la ausencia de colores) y el alfa a -100% también. Echad un vistazo:

          Fijaos… la imagen ha desaparecido… no está mal, ¿eh? Ahora vamos a hacer que aparezca en… digamos… 18 frames. Es cerca de 1 segundo. Pues nada, pinchad con el botón derecho en el “frame 90” y dais “fotograma clave”.
¿Por qué Clave? Recordad: todo lo que está entre 2 fotogramas clave es un solo bloque… No podremos definir un nuevo estado de la imagen a no ser que hagamos un fotograma clave.
         Me cachis… el fondo ha vuelto a desaparecer… claro, solo hemos definido fondo hasta el fotograma 72… podéis volver a crear un fotograma en el 90 (no clave) en la capa fondo, o bien iros hasta el frame 300 y crearlo ahí para no tener que ir alargando cada vez que hacemos algo nuevo. No voy a volver sobre este tema. Bueno, volvemos a centrarnos en el fotograma 90 de la capa de la imagen de Kira. Pinchad en la imagen (aunque este transparente se puede), y abajo en color seleccionáis: “tinta”. Os aparecerá un cuadro de selección del color y una barra para ajustar el %. Elegimos el negro y 100%, con lo cual la imagen es totalmente negra (o sea, vamos a hacer que la imagen pase de negra y transparente a negra y opaca). Queda bien con el fondo, ¿verdad? (probad a ponerlo verde fosforito o rosa pasión, y veréis que no queda tan bien.
         Si ahora pincháis sobre el recuadro rosa que está en la barra del tiempo y lo movéis adelante y atrás, veréis que la imagen negra aparece de golpe (al llegar al fotograma clave del 90). Vamos a arreglar eso:
         Vamos a crear nuestra primera interpolación. (Aplausos de fondo). Si creáis un símbolo (ojo, no vale que sea solo mapa de bits, tenéis que hacerlo símbolo) en el fotograma clave A, luego creas un fotograma clave B y en él lo mueves de sitio, lo reduces/aumentas y lo cambias de color, al crear una interpolación de movimiento, el flash automáticamente hará el trabajo por vosotros.
         Bueno, pues vamos allá… es una tarea ardua y difícil, a muchos os costará horas conseguir crear la interpolación… pero vale la pena.
         Esto… pinchad con el botón derecho en la capa de “Kira”, en cualquier fotograma entre el 72(primer fotograma clave) y el 90 (segundo fotograma clave) y seleccionad “crear interpolación de movimiento”.
         Hecho. Moved ahora el cuadrado rosa y veréis que la imagen aparece suavemente en vez de a lo bestia. Vaya, pensaba que iba a ser más difícil.

          Como podrán ver en la imagen, los fotogramas de interpolación aparecen como una flecha sobre un fondo azul.

          Tercer Paso

          Ahora vamos a pasar a lo siguiente… creación de letras y uso de Máscaras. Las letras y las máscaras (y no estamos de carnaval). Bueno, ahora vamos a hacer que arriba aparezcan las letras GUNDAM y tras esto, colocaremos el logo debajo. Bien, si queremos, podemos usar alguna fuente para hacer el texto más espectacular. En este caso nos vendría bien alguna fuente futurista. Yo he elegido esta, llamada “Perfect Dark”, me parece que queda bien.
          Podéis encontrar miles de fuentes en internet. Esta puede ser una buena página para echar un vistazo:

http://www.1001fonts.com

          Para instalar la fuente, solo copiadla en el directorio “fonts” de Windows (al menos en XP). Creamos una “nueva capa” encima de las capa Kira, y la llamamos “letras”. Creamos un “fotograma clave” en el “frame 90”, y seleccionamos la herramienta de “texto (la A)”, pinchamos en la zona superior de nuestro menú y seleccionamos la
fuente “Perfect Dark” (o la que halláis escogido) y el tamaño (por ejemplo 70), junto con un color gris. Escribís “G U N D A M” y colocáis las recién creadas letras en la parte de arriba del menú, tal que así:

          Bueno, ahora mismo esas letras aparecen de pronto en el fotograma 90… vamos a usar una máscara. Básicamente una máscara es una capa asociada a otra. La máscara es una especie de filtro invisible de la capa asociada. De modo que solo se ve la parte de la capa asociada que está tapada por algún gráfico de la capa máscara. Para que nos entendamos, si ponemos una imagen en la capa asociada y en la capa máscara ponemos una imagen de una cruz, solo se verá la parte de la imagen asociada que está tapada por la cruz. El resto de la imagen será invisible. Bueno, cread una capa por encima de la capa de letras, y llamadla “máscara” (original, ¿no?). Ahora pinchad con el botón derecho sobre ella y seleccionad “Máscara”. Veréis esto:

          Como veis en la imagen, la capa marcada con la letra A es la capa máscara (que ahora mismo está vacía). La capa marcada con la letra B es la capa asociada, donde están las letras GUNDAM. Fijaos en que al crear la capa máscara, ambas se bloquean (el candadito). Antes de empezar a trabajar con ellas hay que desbloquearlas. Ahora cread un fotograma clave en el “frame 90 (capa máscara)”. Seleccionad la herramienta “rectángulo” (IMPORTANTE: al seleccionar esta herramienta, debajo, donde dice “color” aparecen 2 rectángulos: uno con un cubo y otro con un lápiz. El cubo es el color del rectángulo que vamos a crear, en este caso nos da lo mismo, y el lápiz es el color del recuadro que rodea el rectángulo. Pinchad en este último rectángulo y seleccionad el recuadro blanco con una raya roja, que significa que no queremos recuadro). Ahora poned un recuadro que cubra a las letras (aseguraos de estar haciendo el rectángulo en la capa “máscara”, no en la capa “letras”. Una vez que lo tengáis hecho, transformadlo en un gráfico. Ahora vamos a crear un fotograma clave en el “frame 110”.
          Nuestro objetivo es que el cuadrado vaya creciendo hasta cubrir las letras (o lo que es lo mismo, que las letras aparezcan desde el centro hasta afuera). Iros de nuevo al “fotograma 90”, seleccionáis el “recuadro”, pulsáis “CTRL+T” y en el recuadro que aparece, pincháis en el alto y ponéis 0% (el rectángulo se transforma en una línea).
Centrad la línea en las letras, y cread una interpolación de movimiento (ya sabéis pincháis en cualquier fotograma entre el 90 y el 110 “capa máscara” con el botón derecho, y le dais a “crear interpolación de movimiento”.

          ¿Veis ese efecto? Ahora las letras aparecen poco a poco desde el centro hacia arriba y abajo, porque la máscara hace que solo se vea lo que queda bajo el rectángulo. Bueno, ya sabéis poner letras y usar las máscaras.
          Veamos… ahora vamos a poner el logo de Gundam Seed. Lo que vamos a hacer es recortar el logo de alguna imagen, y limpiarlo dejando el fondo transparente. Podemos recortar el logo de esta imagen:

http://i475.photobucket.com/albums/rr119/XxXNaikerXxX/GS_Wallpaper.jpg

          Lo único que tenéis que hacer es, como ya hemos hecho antes, coger el logo y recortarlo (el tamaño adecuado está en torno a los 360 pixel de ancho, dejando transparente el fondo y salvándolo como una imagen .png (pese al riesgo de parecer original, yo la he llamado “logo.png”.

          Así pues, cread una “nueva capa” a la que llamaremos “logo”. Crearemos un “fotograma clave” en el “125” (para dejar un margen entre que aparecen las letras y el logo), y ahora importaremos la imagen .png que acabamos de crear (ya sabéis, Archivo/importar a Biblioteca). Nos vamos al fotograma clave que acabamos de hacer (capa logo), y abriendo la biblioteca (F11), arrastramos la imagen al menú. Ahora ya sabéis, la convertimos en un gráfico. Hacemos otro “fotograma clave” en el “135”, y vamos a trastear con el logo. A ver, en el fotograma 125 pincháis en el gráfico, pulsáis CTRL-T, lo que hará aparecer de nuevo la ventana de transformación. Pondremos tanto en el ancho como en el alto 0% (Eso reduce la imagen hasta hacerla desaparecer). Cread una “interpolación” entre los fotogramas “125 y 135”. Eso hace que el logo crezca. En el fotograma “138 otro clave”, seleccionáis el logo y en el grupo color (recordad, está en la barra de propiedades, abajo del todo) seleccionamos brillo, y lo ponemos al 100%.
O sea, el logo crece y luego se pone blanco… En el fotograma 145 creamos otro clave, y seleccionando la imagen, ponemos en Color: NINGUNO. Finalmente creamos una interpolación entre los fotogramas 138-145.

          Finalmente hemos conseguido que el logo crezca hasta hacerse grande, luego se vuelve blanco, y después vuelve a ponerse de color normal poco a poco. Para completar un poco, vamos a hacer que se oiga una pequeña explosión cuando el logo se pone blanco. Podéis encontrar de todo para flash en ciertas páginas, como http://www.flashkit.com/, de donde yo he sacado este sonido: Explosión.
          Simplemente bajáoslo e importadlo a la biblioteca. Situaros en el fotograma 139 de la capa “logo” (es decir, cuando el logo se hace blanco). Fijaos en la barra de “propiedades”. Veis que hay una pestaña que dice “Sonidos” pues ahí pinchad y seleccionad “boom.wav” (o vuestro sonido). Listo.
          Ahora vamos a poner al Strike. Si no recuerdo mal, ya importamos la imagen del Strike a la biblioteca… Bueno, pues cread una capa nueva encima de la capa de Kira, y la llamamos “Strike”. En esta capa vamos a crear un fotograma Clave en el frame 155, y arrastramos la imagen del Strike al área del menú. Lo convertimos en un gráfico, y lo colocamos fuera del área del menú, por Ejemplo a la izquierda, además vamos a seleccionarlo, y en la barra de propiedades, en color, vamos a elegir: Alfa---> 0%. Así tendremos la imagen del Strike fuera del menú por la izquierda, y transparente. Ahora, digamos 20 fotogramas más adelante (por ejemplo fotograma 175, ponemos otro clave, y en él movemos el gráfico del Strike dentro del área del menú, por ejemplo hasta colocarlo a la izquierda de Kira, y además en color ponemos “Alfa--->50%”. Cread una interpolación de movimiento entre los fotogramas 155 y 175.
          El efecto final es que el Strike entra en el menú por la izquierda mientras pasa de transparente a semiopaco. Lo vamos a dejar así porque queda bien, y porque vamos a poner los botones encima de él y de este modo evitamos que se líe la imagen con los botones.

          Finalmente, vamos a hacer que la imagen de Kira se vuelva de negra a normal. Vamos a hacer que ocurra a la vez que la entrada del Strike en el área del menú. Venga, que a estas alturas ya deberíais saber hacerlo: Iros a la capa “Kira”, y hacéis un fotograma clave en el frame 155, luego otro en el frame 175. En el frame 175 seleccionáis la imagen de Kira y en color ponéis “ninguno”. Ahora cread una interpolación de Movimiento entre los frames 155 y 175… y listo. Como veis, cada vez vamos más rápido, ¿no?
          Bueno, ya va siendo hora de ver cómo demonios está quedando nuestro menú, ¿no? Así que ahora voy a pasar a explicar las “pre visualizaciones”, o lo que es lo mismo, “a ver cómo me está saliendo este menú”. Después pasaré a explicar lo más divertido de todo: los Botones.

Pre visualizaciones, o como ver si el menú sale bien o mal.

          Básicamente, la pre visualización es exportar el menú a un fichero .swf (o lo que es lo mismo, un fichero de Flash), para ver lo que lleváis hecho hasta el momento. Es una opción muy útil, porque os permite ver posibles fallos en el menú, o simplemente, recrearos es vuestro propio ego diciendo “jope, soy un fenómeno”.
          A ver, iros en el flash a la pestaña de “Archivo”. Allí veréis dos opciones: “configuración de publicación…” y “vista previa de publicación”. Primero dadle a “configuración”. Allí veréis una pestaña “formatos”. En esa pestaña elegís los posibles formatos en que publicáis el trabajo. Así por encima, los más importantes son:
          - Flash (.swf): Estos ficheros son los más útiles. Los ficheros .swf son ficheros de Flash, que pueden ser vistos por 2 programas: El primero es el “Macromedia Flash Player”, que se encuentra (si tienes instalado el Macromedia Flash) en la carpeta “Players”. O sea, que si                     tienes instalado el Macromedia Studio, en la carpeta “C:/Archivos de programa/MacromediaFlash/MXPlayers” debería haber un archivo llamado “SAFlashPlayer.exe”. Con ese programa puedes ver cualquier fichero .swf. Recuerda, lo mejor es asociar los ficheros .swf al Flash                 Player. El segundo programa que permite ver estos ficheros es el propio Explorer de Windows (Siempre que tengas el plugin adecuado instalado, claro). Simplemente abre una ventana de Explorer y arrastra el fichero .swf dentro.
          - HTML: Esta opción creará un fichero .swf y un .html con un “embed” para ver el swf (un embed es la línea de código html que ejecuta un flash).
          - Proyector de Windows: Esta opción creará un fichero .exe para ver el fichero en cualquier ordenador, aunque no tenga el Macromedia Flash Player instalado. Evidentemente, los ficheros .exe ocupan un poquito más que los .swf, porque incluyen el visualizador.
          En nuestro caso, quitad todas las opciones salvo “Flash” (dejad solo esta señalada). Veréis que hay una pestaña al lado (Letra A) donde podéis seleccionar las opciones de los ficheros .swf que creéis. Pinchad ahí.

          De las opciones que salen ahora, lo único que es importante tocar es la calidad de las imágenes (Letra B), que os permite cambiar la calidad de todas las imágenes del flash, para reducir tamaño final. En este caso, ponedlo a 100, porque nos interesa calidad, no reducir tamaño. La otra opción es la del sonido y música (Letra C). Los ficheros .swf son ficheros pensados para páginas Web, así que por defecto el sonido vendrá en mp3 a una calidad muy mala. Pinchando en “Establecer” podéis cambiar la calidad. Podéis seleccionar 2 formatos de compresión, ADPCM y MP3. Probad a ver cuál os gusta más. En principio, el formato MP3 ocupa menos, pero tarda más en publicarse. Aseguraos de, elijáis el formato que elijáis, poner una buena calidad.

NOTA: si habéis incluido una música en el menú (como por ejemplo en este caso), el menú puede tardar bastante en publicarse, sobre todo en ordenadores lentos. Así que puede ser preferible, en caso de que pre visualicéis mucho, quitar la música del menú y ponerla cuando ya esté acabado, para no tiraros 30 segundos de espera cada vez que pre visualicéis.

          Una vez que habéis elegido las opciones correctas, iros a “vista previa de publicación”, y seleccionad “Flash” (o lo que es lo mismo, pulsad F12).
          Bueno, ya veis como va a quedar el menú… solo que (supongo os habéis dado cuenta) el menú vuelve a empezar al llegar al final, y la música también y se forma un cacao que no veas… por eso voy a hacer un inciso y voy a explicaros el primer comando de acción: El Stop.
          Iros a la capa “control” (esa que tenemos ahí aburrida, sin hacer nada, puesto que va a ser esta la capa que vamos a usar para controlar la película, decirle que pare, decirle que siga, etc.), y cread un clave en el fotograma 175 (donde queremos que se pare la reproducción). Vale, ahora pinchad con el botón derecho sobre ese fotograma clave, y seleccionad “Acciones”.
          Bueno, esto abre una nueva y desconocida ventana. A la izquierda tenéis las posibles acciones y abajo a la derecha tenéis las acciones asociadas a ese fotograma (hasta ahora ninguno). Bueno, pues en el árbol de la izquierda, os movéis hasta localizar el Stop: “Acciones/Control de Película/Stop” (Letra A) y dais doble clic, para que salga en la zona de la derecha (Letra C). También podéis hacer esto pinchando en el + que hay. Fijaos que en el fotograma clave ha aparecido una “a” (Letra B), indicando que a ese fotograma hay una acción asociada.

          ¿Para qué sirve eso? Pues cuando el Flash llega a ese fotograma, lee la acción STOP que hay asociada a ese fotograma… y se para en ese punto. Así evitamos que vuelva a empezar otra vez.

NOTA: No olvidéis que el Flash se para al llegar a ese punto. Conforme vayáis avanzando en el menú, no olvidéis ir moviendo el Stop a la derecha, o de lo contrario al pre visualizar el menú, se quedará parado en el fotograma 175

          Ahora viene lo más interesante… vamos a empezar con los botones.

          Cuarto Paso

          Antes de empezar voy a explicaros los dos tipos de botones que podemos usar en flash: Los botones simples y los complejos (se nota que los nombres se los he puesto yo, ¿verdad?).
          Los botones simples son aquellos compuestos por una sola imagen. Digamos que vuestro botón está compuesto por un triángulo azul, un círculo rojo y un cuadrado verde. Pues un botón simple es aquél que es una imagen .png hecha en Photoshop, de modo que a efectos prácticos es una sola unidad, las distintas partes que la componen son en realidad una sola, y por lo tanto, estáticas. La ventaja de este sistema es que es mucho más fácil de hacer que los complejos y sobre todo que si queremos hacer otro menú similar, con cambiar las imágenes .png, renombrarlas para que se llamen igual que los botones antiguos, e importarlas, el flash nos permite sustituir los antiguos, y a efectos prácticos tardas 5 segundos en cambiar un botón antiguo por uno nuevo… muy útil sobre todo cuando tienes que hacer menús en serie. Como desventaja, tenemos que estos botones son mucho menos “bonitos”, ya que en todo caso podremos cambiar el color del cuadrado si lo necesitamos, pero como sigue siendo una unidad, no podremos mover de sitio las figuras, ni cambiarlas de forma.
          Los botones complejos son aquellos en los que metes una serie de imágenes separadas en el Flash, y los animas usando el propio programa. En el ejemplo anterior, el botón seguiría siendo un triángulo etc., pero a diferencia del caso anterior, en vez de ser todo una imagen .png, serian un triángulo, un cuadrado y un circulo separados. Como ventaja, evidentemente son mucho más espectaculares, ya que al pasar el cursor sobre el botón, podemos hacer que el cuadrado se mueva de sitio, que el triángulo cambie de color y que el circulo se convierta en una estrella de 8 puntas… dado que son imágenes separadas, puedes actuar sobre ellas de forma separada. Como desventaja, pues lo contrario que en el punto anterior: son más difíciles de hacer.
          Como este es un tutorial para neófitos, voy a explicar los botones simples, que son fáciles y bastante vistosos.
          Bien, abrid el Photoshop, que vamos a hacer los botones en él para luego importarlos al Flash. Crearemos, por ejemplo, una nueva imagen de… 370x130, o similar. Recordad, esa va a ser el área del botón (a no ser que le digamos al flash otra cosa). Ahora vamos a pensar cómo van a ser los botones. Vamos a necesitar dos tipos de botones, uno para el estado normal del botón, y otro para cuando pasemos el cursor sobre él.
          Así pensando, podemos decidirnos por utilizar a los gundam en pequeñito, en el lado izquierdo del botón, luego un par de líneas oblicuas hacia la derecha (una hacia arriba y otra hacia abajo), seguidas de una línea horizontal, sobre la cual pondremos “capitulo 1” y debajo de la misma pondremos el título del capítulo correspondiente. Vamos a ir haciéndolo y veréis qué fácil es.
          La imagen que hemos usado para recortar a Kira Yamato (ver paso 1) pues también nos va a servir para los botones. ¿Ves los pequeños gundams que hay? Pues vamos a recortar 4, todos menos el Strike porque A: tiene la pierna casi tapada por la letra esa roja, y B: porque ya lo hemos usado para el fondo.
          Pues hala, ya podéis empezar a recortar los gundams, dejando el fondo bien limpito. Una vez que los tengáis recortados haremos los botones.

          Comenzamos con el botón 1: cogemos y pegamos el gundam rosa en el lado izquierdo del botón, reduciéndolo para que quepa. Luego ponemos un par de líneas oblicuas como se ve en la imagen, y otra horizontal. Luego, con la fuente que usamos antes, escribimos encima “capitulo 1”.
          Nótese que resulta evidente que estos botones son muy… cutres. Recordad que este es un tutorial para principiantes, y lo que tratamos de hacer aquí no es hacer virguerías, solo enseñaros para que vosotros hagáis las virguerías. Podéis hacer los botones como más os guste, yo aquí doy solo una guía.
          Una vez que tengáis hecho el primer botón, simplemente tenéis que usar esa misma base y sustituir los gundams y las letras… ¡No olvidéis quitar el fondo para que sea transparente!

          Ya sabéis, guardad las imágenes sin fondo como .png. Estos van a ser los botones en el estado “reposo”, es decir, son los botones que el Flash nos muestra normalmente, cuando el cursor no está sobre ellos. Por lo tanto, llamadlos “botón-1-reposo.png” o “botón1-normal.png” o algo así para no liarnos. También os recomiendo que guardéis los botones en formato .psd, porque nos van a venir luego muy bien para hacer otra versión de los botones. Una vez que los tengáis hechos, nos vamos otra vez al flash, que voy a explicaros cómo funcionan los botones.

          Empezamos creando una nueva capa, por encima de todas las demás. La vamos a llamar “botón 1”. Creamos un clave en el 185, y ahora tenemos que decidir cómo vamos a introducir el botón en el menú. Podemos hacer que entre por arriba, podemos hacer que crezca, que cambie de color, que aparezca haciéndose opaco… En este caso lo que vamos a hacer es que los botones entren uno por cada lado (el botón 1 por arriba, el 2 por la izquierda, el 3 por la derecha y el 4 por abajo.

          Importad a la biblioteca la imagen del botón 1. Ahora mismo es un mapa de bits, y nosotros queremos convertirlo en un símbolo. Podemos transformarlo en un botón y moverlo directamente como botón, pero entonces será un botón mientras se mueve, y por lo tanto se podrá pulsar sobre él incluso mientras se está colocando. A mí esto no me gusta, así que lo que yo hago es transformarlo en un gráfico, colocarlo, y entonces sí lo transformo en botón. Bueno, pues eso, pinchad en la imagen del botón 1 y transformadlo en un símbolo/Gráfico.

          Haced lo mismo con los otros botones (cada uno en su capa, fotograma clave en el 185, lo importáis, lo metéis en el menú y los transformáis en gráficos).

          Ahora creamos un fotograma clave en cada capa de los botones en el 200. El objetivo es colocar en el frame 200 los botones donde queráis que queden, y en el 185 de donde queráis que partan. Luego hacéis una interpolación de movimiento entre los fotogramas 185 y 200 para cada capa… y voilá, los botones se mueven hasta colocarse en la posición que les hayáis dicho.

NOTA: Dado que estamos usando botones compuestos por una sola imagen, si veis que alguno de los botones tiene algún fallo, o no os gusta como os ha quedado, lo único que debéis hacer es retocar el botón como más queráis, y luego salvar el nuevo botón con el mismo nombre y extensión que el botón anterior. Si ahora lo importáis a la biblioteca, os saldrá un dialogo diciendo que ese botón ya existe. Si pincháis en la opción “sobrescribir”, el botón antiguo será sustituido por el nuevo, incluidas las demás animaciones.

          ¿Lo tenéis? Ahora cread un fotograma clave en el 201, en cada capa de botón, pincháis sobre los gráficos y pulsáis con el botón derecho, escogéis Convertir en símbolo, y seleccionáis la opción “botón”. Hacedlo hasta haber convertido todos en botones.
          Si ahora pre visualizáis (recordad que si aún tenéis el STOP en el fotograma 175, el menú no pasará de ahí, tenéis que poner el stop en el fotograma 201), veréis que cuando los botones se colocan, al pasar el cursor sobre ellos, se transforma en una mano con el dedo extendido. Eso significa que son botones, y que podéis pinchar sobre ellos. Evidentemente, ahora mismo no sirve de nada pinchar, porque aún no hemos definido las acciones. Volved de nuevo al flash. Ahora iros al fotograma 201, y haced un doble clic sobre el botón 1. Veréis que el menú se vuelve gris salvo el botón 1. Eso quiere decir que ahora solo estáis trabajando sobre ese botón, al margen del resto del menú. Veréis también que la barra de tiempo ha sido sustituida por 4 estados:

          - Reposo: El estado reposo define el botón cuando el cursor NO está sobre él. Es como se ve el botón por defecto. (Letra A)
          - Sobre: Como su nombre indica, es el estado que define al botón cuando el cursor está situado sobre él. (Letra B)
          - Presionado: Es el estado que define al botón cuando se pulsa el botón izquierdo del ratón. (Letra C)
          - Zona Activa: Esto no es tanto un estado del botón como un área que lo define. En esencia, esta área define qué zona del botón es pulsable (o lo que es lo mismo, que área del botón el flash va a reconocer como tal). En este caso, el flash reconoce todo el botón como zona activa, así que el botón entero (el área del mismo, incluyendo el fondo transparente) es el área pulsable. Esta área es invisible. (Letra D)

          Voy a poneros un ejemplo práctico. Imaginad que hacemos un cuadrado azul y lo transformamos en botón. Esa sería la zona REPOSO, y normalmente el botón sería un cuadrado azul. Si ahora hacemos doble clic sobre él y en el área “sobre” creamos un fotograma clave y cambiamos el cuadrado de color (por ejemplo verde), cuando pasemos el cursor sobre el botón, el cuadrado azul se transformará en un cuadrado verde (porque es lo que está definido en el área Sobre). Si entonces hacemos un clave en el área PRESIONADO y quitamos el cuadrado, poniendo en su lugar un círculo rojo, al pasar el cursor sobre el cuadrado azul se transforma en verde… pero al pulsar sobre él, se transformará en un círculo rojo. Finalmente, si en la ZONA ACTIVA ponemos un triángulo (da igual el color), cuando pasemos el botón sobre el cuadrado azul, nos daremos cuenta de que solo nos reconoce como botón el área donde pusimos el triángulo (pero el triángulo no lo vemos).
          Podríamos dejar los botones como están ahora mismo, es decir, simplemente al pasar sobre ellos el cursor te permite pinchar… y punto. Pero nosotros lo que queremos hacer es algo más espectacular… por dios, si hasta los botones del cutre Quick Menu Builder pueden animarse mínimamente!. Si estuviéramos usando botones complejos podríamos decirle al flash que nos moviera el mini-gundam de sitio, que hiciera que las letras o las líneas se movieran al pasar el cursor… pero al estar usando botones simples, lo que vamos a hacer es crear otra versión del botón para el estado “Sobre”, y decirle al flash que sustituya el botón inicial por el segundo que vamos a crear. Bien, abrid el Photoshop e iros a las imágenes .psd que tenéis de los botones (las que aún mantienen las capas… porque las habéis guardado, ¿verdad?
          Vamos a elegir los efectos que queremos ponerle al botón… por ejemplo, vamos a rodear al mini-gundam con un aura amarilla, vamos a poner en 3D las letras de “capitulo x”, y vamos a ponerle el título de cada capítulo bajo la línea horizontal. Voy a explicar muy por encima como se ponen esos efectos en Photoshop. Primero elegís la capa del gundam (ojo, estoy hablando del Photoshop, no del Flash), y pinchando en la F pequeñita que hay en la parte de abajo del recuadro de las capas, elegís la opción “resplandor exterior”, elegís un color amarillento y luego la extensión, opacidad, y demás opciones como más os guste. Para las letras en 3D seleccionáis la capa de letras, y en la F elegís “Bisel y Relieve”. Podéis hacerlo eligiendo “relieve” en la nueva ventana que se os abre, o bien un bisel interior o exterior, al gusto de cada uno. Finalmente, bajo la línea horizontal ponéis el título de cada capítulo. Los títulos son:

          Capítulo 5-->Desplazamiento de fase Desactivado
          Capítulo 6-->El Desapareciente Gundam
          Capítulo 7-->Las Cicatrices del Espacio
          Capítulo 8-->La Cantante del Enemigo

          Cuando los tengáis listos, los llamáis “boton1-sobre.png” o algo así para diferenciarlos de los otros. Abrid de nuevo el Flash e importadlos a la biblioteca, que vamos a insertarlos.
          Bien, tenemos 2 opciones, una es simplemente abrir el botón (doble clic) y crear un fotograma clave en la zona “SOBRE”, para después borrar la imagen que hay, y arrastrar la nueva imagen. Esto hace que al pasar el cursor sobre el botón, el mismo cambie bruscamente. Pero nosotros lo vamos a hacer más bonito. Como he dicho, abrid el botón que queráis (recordad que debéis estar en el fotograma 201). Cread un fotograma clave en el área “SOBRE”, y entonces situaos en ella. Pinchad sobre la imagen del botón con el botón derecho y transformadla en un símbolo/clip de película. ¿Por qué clip de película? Porque vamos a hacer una animación. Ahora nos vamos a meter en ese recién creado clip de película y vamos a crear una interpolación dentro, es decir, una animación. Al decirle al Flash que es un clip de película, le estamos diciendo que lo que debe aparecer al pasar el cursor sobre el
botón (área sobre) es una animación que vamos a definirle ahora. Si lo transformáramos en un gráfico, la animación no aparecería, porque los gráficos no permiten que avancen los fotogramas. Es, por así decirlo, una mini-película dentro de la película principal, que se activa al pasar el cursor sobre el botón.
          Ahora que ya es un clip de película, haced de nuevo doble clic sobre él. Os aparecerá una nueva barra de tiempo, esta vez totalmente normal. Aquí es donde vamos a definir lo que queremos que ocurra al pasar el cursor sobre el botón. Por el momento solo hay una capa, la del botón original, que contiene al mismo. Cread 2 capas, una la vamos a usar como capa control, y otra la vamos a usar para superponer el nuevo botón al antiguo, progresivamente (esta capa debe ser, evidentemente, superior a la otra). Abrid la biblioteca (F11) y (aseguraos de que tenéis seleccionada la capa del nuevo botón) arrastrad el botón1-sobre.png (o como lo hayáis llamado) al menú. Transformadlo en un símbolo/Gráfico. Veréis que aparece un círculo en el centro, es el centro (nunca mejor dicho) de la imagen. Pinchando sobre él, arrastrad el gráfico sobre el círculo del antiguo botón hasta que encajen (el flash os lo autoajustará) y de este modo ambas imágenes quedarán perfectamente ajustadas. Ahora en color elegimos un Alfa del 0% (quedando la imagen transparente, y por lo tanto solo se ve el antiguo botón). Creamos un clave en el frame 12 (500 ms) y en color ponemos ninguno. Ahora una interpolación de movimiento. Alargamos la capa del botón antiguo hasta el fotograma 12, y para evitar que el efecto se repita indefinidamente, un fotograma clave en el frame 12 (Capa Control), donde pondremos como acción un Stop. Haced lo mismo con cada botón.
          Si ahora hacéis una pre visualización (recordad poner un Stop en el fotograma 201, capa Control), veréis que cuando pasáis el cursor sobre los botones, al botón antiguo se superpone el nuevo lentamente… dando un efecto bastante bonito, ¿no creéis?

NOTA: Si creáis un clave en la zona activa del botón, veréis que la imagen del botón está allí, indicando que todo el botón es zona sensible. Si por ejemplo cogéis la herramienta del pincel y pintáis por encima del mini-gundam, y tras ellos elimináis el grafico del botón (de forma que solo quede la silueta recién pintada del gundam), al pasar el cursor sobre el botón solo se activa el botón si lo pasáis sobre el gundam. Haced la prueba, a lo mejor os gusta más de este modo.

          Nos faltan un par de botones que suelen estar en muchos menús, como por ejemplo “Extras” (si queréis incluir algún otro contenido) que debe abrir una carpeta donde se encuentren los mismos, y “Créditos”, donde se suelen poner el realizador, los agradecimientos y tal, así como el botón de “Salir”… Estos botones son poco importantes, así que podemos hacerlos usando el propio flash. Elegid una fuente, cread 3 capas más para estos botones, y vamos con ello. Elegid un sitio donde ponerlos (por ejemplo un buen sitio puede ser en la esquina inferior Derecha). Creando un fotograma clave en estas 3 capas en el frame 195, usáis la herramienta de Letras para escribir los botones (usad un color que resalte sobre la ropa de Kira, por ejemplo un rojo).

NOTA: Al seleccionar la herramienta de texto, en la barra de propiedades aparece un botón que tiene dentro una a y una b dentro de un cuadrado negro. Ese es el botón de “seleccionable”, y si está activado quiere decir que el texto del flash se podrá seleccionar (manteniendo pulsado el botón de ratón y arrastrando sobre él) como si fuera un texto cualquiera de Windows. Esto no nos interesa, así que aseguraos de que ésta opción está desactivada.

          OK, ahora convertirlos en gráficos y después cread otro clave en esas 3 capas en el frame 200. En el frame 195 usáis la opción color/alfa 0% y en el 200 color/ninguno, hacéis una interpolación de movimiento y de este modo los botones aparecerán poco a poco. Ahora los transformáis en botones: Clave en el 201, y usáis “convertir en símbolo/Botón” con cada uno.

          Pre visualizad ahora: fijaos que solo os reconoce como botón las propias letras, no el espacio entre ellas (para pinchar tienes que acertar con el cursor en las líneas que forman la O, por ejemplo, pero no el agujero de la o). Eso es por lo ya dicho antes, para el flash solo es botón el propio gráfico, y en este caso no es una imagen cuadrada con el fondo transparente. Doble clic, por ejemplo, en el botón de “Extras”. Haced un clave en “Sobre”, y otro en “zona activa” de este botón. Colocaos en “zona activa”, y usando la herramienta del rectángulo (Letra B), cubrid las letras con un ídem (Letra A).

          Si ahora hacéis una pre visualización, veréis que ya reconoce como botón toda el área del rectángulo, incluso entre las letras. Haced lo mismo con los otros 2 botones. Finalmente, podemos hacer alguna animación en el área sobre… por ejemplo podemos hacer que el botón crezca y se haga semitransparente. Ya sabéis como, en el área sobre del botón lo transformáis en un clip de película, dentro simplemente hacéis los cambios que queráis… por ejemplo en el fotograma 12 (aseguraos de convertir las letras en un gráfico) hacéis que las letras aumenten de tamaño (CTRL-T) y que tengan un alfa del 50%. Si lo preferís, cambiadles el color, reducidlas… lo que más rabia os de. Recordad que si no queréis que la animación del botón se repita, tenéis que hacer una capa de Control donde colocareis un stop.

          Quinto paso

Zona de Créditos, muy por encimita que no tenemos tiempo que perder.

          Ahora vamos a pasar a la zona de Créditos. La voy a poner muy por encima, ya que esto es muy personal, y tampoco debe ser muy compleja. Además el menú ocupa por ahora casi 7 megas. Os enseñaría a insertar videos, pero no queda espacio en el menú para más virguerías. Si queréis, puedo hacer un anexo al final explicando cómo meter videos.
          Por ahora, tenemos el menú principal ya listo, con una acción/Stop en la capa Control, fotograma 201. De este modo, el menú se detiene en el frame 201, para que tú puedas mover el puntero, seleccionar los botones y demás. Ahora la sección de “créditos” la vamos a hacer a partir del fotograma 202. Pues bien, cread una nueva capa encima de todas las demás, llamadla “fondo2”, porque va a ser el fondo de la sección de créditos. Cread un clave en el 202. Fijaos que como de costumbre, todo lo demás ha desaparecido, porque no hemos definido fotogramas en el 202 para esas capas. Bueno, pues de ahora en adelante solo vamos a seguir alargando las capas de Kira, el Fondo (el primer fondo), el Strike, las letras de Gundam y el logo de Gundam. Eso quiere decir que los botones ya no van a estar. Usad la herramienta del rectángulo, seleccionando un color azul oscuro y sin borde (podéis pinchar en el icono de rectángulo redondeado, que se encuentra en la barra de herramientas, abajo del todo, para hacer que las esquinas del rectángulo sean redondeadas en vez de picudas) y cread un rectángulo.

          Ahora transformarlo en un gráfico, y poniendo un clave en el frame 210, le ponéis un alfa de 0% en el 202 y normal en el 210. Interpolación. De este modo el rectángulo aparece poco a poco. Sobre ese fondo vamos a poner los créditos. Esto ya es más cosa vuestra que mía, ya que esto es muy personal. Podéis hacer una capa donde poner letras y escribir lo que queráis, podéis poner a los mini-gundams dando vueltas… Yo en este caso he decidido simplemente poner letras y otra imagen del Strike:

http://i475.photobucket.com/albums/rr119/XxXNaikerXxX/03.jpg

          Podemos recortarlo de esta imagen. La verdad es que el tío que montó esta imagen hizo una chapuza… pero en fin, como el fondo es uniforme, resulta fácil recortarlo. Luego reducidlo a 353x486, y salvadlo como .png. Ahora hacéis una capa nueva por encima del recuadro azul, importáis la imagen del Strike y la ponéis sobre el recuadro, asegurándoos de que la ajustáis a la derecha y abajo del rectángulo, para que no se note que le falta un trozo de pie y de ala. Una vez que lo hayáis hecho, lo transformáis en un gráfico, y hacéis una interpolación de modo que pase de un alfa 0% en el fotograma clave 210 a un 70% en el fotograma clave 220. Como veis, cada vez voy dando menos detalles, porque se supone que esto lo domináis.
          Una vez listo eso, nueva capa (encima de las demás). En ella usando la herramienta del texto, escribimos lo que os dé la gana a la izquierda del gundam. El texto también lo podéis convertir en gráfico y hacerlo aparecer si queréis.
          Solos nos falta un detalle: un botón de “volver” para volver al menú. Para hacerlo, seguid las instrucciones que os di para los botones “extras”, “créditos” y “salir”. Hacedlo idéntico.
          Ahora, para finalizar la sección de créditos, haced un clave en el último frame de esta sección (220) en la capa Control, y ya sabéis. Botón derecho/Acciones y añadís un Stop. Así evitaremos que el menú vuelva a empezar.

          Ya hemos finiquitado la sección de créditos. El menú ya está casi listo. Solo nos falta la sección “salir”, poner voces a los botones, asignar funciones a los botones… y terminamos.

Diálogo de Salir, porque hasta este perfecto menú puede llegar a cansar.

          Normalmente se puede salir del menú pinchando en la X de cerrar ventana, o si está a pantalla completa, dándole a Esc. Nosotros hemos incluido un botón de “salir”, al cual podemos asignarle la orden “quit” (ya lo veremos) para que el menú finalice… pero queda muy cutre. Lo que vamos a hacer es un dialogo de confirmación (ya saben, ¿seguro que quieres salir?) que queda muy bien.

Lo primero es coger esta imagen:

http://i475.photobucket.com/albums/rr119/XxXNaikerXxX/GS_Wallpaper.jpg

         Los que veáis la serie, habréis reconocido las imágenes del ending, encadenadas de forma continua. Pues bien, usando el Photoshop, recortad esa imagen larga. Cuando lo tengáis, al final escribís algo como “¿seguro que deseas abandonar?” y debajo un “Soy un cobarde” y un “aún no ha terminado mi lucha” (o si se os ocurre algo más chorra, vosotros mismos).

          Lo salváis como .png y lo importáis a biblioteca. Creamos una nueva capa. Bien, recordad que la sección de créditos acaba en el frame 220. Pues ahora creamos un clave en el 221. Al igual que antes, solo tenemos que alargar las capas de Kira, el Fondo, el Strike, el Logo y las letras “GUNDAM”. La idea es que al pulsar el botón de salir, la película salte a este fotograma. Abrid la biblioteca y colocad la imagen a la izquierda del menú, transformándolo en gráfico. ¿Veis lo que pretendo, no? Simplemente haced un clave en el 430 y en él movéis la imagen hasta que coincida con el borde de la derecha.

          Un apunte: dado que solo nos interesa que se vea la imagen DENTRO del menú, no en el exterior, vamos a hacer una capa superior a ella y la transformamos en máscara. Hacemos un rectángulo en ella que cubra el área del menú (ajustándolo a izquierda y derecha). Así solo se ve la imagen en el menú, y no queda la ristra larga por la derecha o izquierda del menú. Si tenéis problemas, repasaos la lección de la capa.

          Ahora tenemos que hacer sendos botones para las 2 opciones… pero estos botones no deben verse, puesto que las letras ya están puestas. Es muy fácil. Cread 2 capas nuevas (botón salir y Botón quedarse). Hacemos en ambos un clave en el 430. Ahora en cada una con la herramienta del rectángulo, trazad uno que recubra a cada opción (quitadle el color del trazo, dejad solo de color en interior y da igual el color que decidáis.

          Ya estáis tardando en convertir los 2 rectángulos en botones. Podríamos dejar así los botones… pero creo que un rectángulo verde tapando las letras no es lo mejor que podemos hacer, ¿verdad? Pues ahora doble clic en uno de ellos, creáis un clave en la “zona activa”, y ahora seleccionando la zona “reposo”, borráis el botón. ¿Que hemos hecho? Pues hemos creado un botón que no se ve ni en reposo, ni al pasar el cursor sobre él, ni al pulsarlo, pero que la zona activa SI está definida, y por lo tanto se reconoce como tal el área del rectángulo. Haced exactamente lo mismo con el otro rectángulo.

          Para finalizar la sección “Salir”, ponemos un Clave en el 430 (Capa Control), y ponemos ahí un… ¡premio! Un Stop.

          Estamos a punto de acabar. Solo nos falta poner sonido a los botones y definir las acciones de los mismos.

          Sexto paso

Terminamos el menú: hacemos que esos botones tan monos sirvan para algo.

          Para terminar ya solo nos falta asignar las funciones a los botones del menú, es decir, decirles lo que tienen que hacer cuando son pulsados. Si hacemos memoria, recordaremos que los botones que hay en el menú son los siguientes:

          - 4 botones principales, que activan las películas.
          - Los botones Extras, Créditos y salir, que nos llevan a la sección correspondiente dentro de la película.
          - El botón volver dentro de la sección de Créditos, que nos debe llevar de nuevo al menú principal.
          - Los dos botones invisibles de la sección Salir. Uno de ellos debe llevarnos al menú principal, y el otro debe terminar el menú.
         
          Vamos a empezar por los más fáciles, las acciones “goto”.

          Situaros en el frame 201, que si recordáis, era el final del menú principal (ahí debe haber colocado un Stop en la capa de control). Si avanzáis un poco más, veréis que la sección “créditos” empieza justo después, en el frame 202. Lo que vamos a hacer es decirle al botón “créditos” que al pulsar sobre él, la película se “salte” el Stop colocado en el frame 201, pasando al 202. Bueno, colocándoos como os he dicho en el frame 201, seleccionáis el botón de “créditos” (1 solo clic, no 2), y pulsáis con el botón derecho sobre él, seleccionando “acciones”.

NOTA: NO debéis pinchar con el botón derecho sobre EL FOTOGRAMA (como cuando ponéis los Stop), sino que debéis pinchar sobre el propio botón “créditos”. Las acciones de los fotogramas son distintas de las de los botones.

          Se abrirá entonces el menú de las acciones. Ya os comenté que podéis o bien buscarlas en el árbol desplegable de la izquierda, o pinchando sobre la cruz.

          Como veis, nos movemos hasta “acciones/Control de película” y vemos las posibles opciones que tenemos:

          - goto: Es la acción que le dice al flash que debe ir al fotograma X y seguir (o no) reproduciendo desde ahí.
          - on: Esta acción define cuando se llevan a cabo otras (si es cuando el botón está siendo pulsado, si es cuando el botón se libera, si es cuando pasas el cursor sobre él… Normalmente el propio flash añade esta acción automáticamente, antes del goto en los botones.
          - play: Es la acción que hace que el flash siga reproduciendo, si por ejemplo está parada la película por un Stop, esta orden hace que la reproducción siga.
          - stop: Ya la conocéis, esta acción hace que la película se detenga dónde está.
          - stopallsounds: Pues como su nombre indica, detiene todo sonido en el flash. Lo utilizaremos para que al pulsar en un botón de película, se pare todo antes de empezar a reproducir el episodio, o de lo contrario el sonido de la música de fondo se superpondría al video.

          Ahora vamos a seleccionar “goto”. Al pinchar en él veréis que aparece esto:

          Marcado con la (Letra A) podéis ver las líneas de acción que se van creando. Las acciones se leen de arriba abajo. Como veis, antes del “goto” el flash automáticamente nos ha puesto un “on”. Pinchad en la primera línea (el on), y podréis ver las opciones del on (Letra B). No tenéis más que seleccionar las opciones que queráis. Esto define cuando se va a desencadenar las acciones que están por debajo. Las más corrientes son “presionar”, que hará que nada más pinchar el botón se ejecute el goto, y “liberar”, que hace que para activar el goto tengas que presionar, y luego soltar el botón. Elegid la opción que más os guste. También podéis seleccionar varias opciones juntas. Cuando hayas decidido, seleccionar la segunda línea de la zona marcada con la (Letra A), es decir, en la acción goto.

          Podéis ver en la imagen las opciones de la acción goto. La (Letra A) sirve para seleccionar si queréis que al moverse al nuevo fotograma la película se quede congelada en él, o si queréis que siga reproduciendo. Aseguraos de seleccionar la opción “Ir a y reproducir”, puesto que queremos que siga. En la pestaña de escena (Letra B) os permite saltar a otra escena. Dado que en este menú solo hay 1 escena, debe decir “escena actual”. En tipo (Letra C) podemos desplegar una serie de opciones. Las que más nos interesan son “número de fotograma” (que nos permite definir un fotograma específico), y “fotograma siguiente”-“anterior”, que hace que la película se desplace un fotograma adelante o atrás. A diferencia de la opción “número de fotograma”, las de “fotograma siguiente” y “anterior” no permiten definir si quieres que la película siga o pare (Letra A), que siempre se colocará en la opción “Ir y detener”. La (Letra D) nos permite definir cuál es el fotograma al que queremos saltar (siempre y cuando hayamos definido la opción “numero de fotograma” en la pestaña de Tipo (Letra C)
          Queremos que la película pase al fotograma 202 y siga. Podemos hacerlo de 2 formas, o bien con un “fotograma siguiente” en la pestaña tipo, y añadiendo un “play” justo detrás (en la línea 3), o bien seleccionado “número de fotograma” y poniendo 202 en la pestaña de fotograma (Letra D), y asegurándoos de que está seleccionado “Ir a y reproducir” en la (Letra A).
          Haced lo mismo con el botón “salir”. Puesto que la sección “salir” es a partir del fotograma 221, en este caso usaremos las opciones: “Ir a y reproducir/Escena actual/Número de fotograma/221”

          Ahora vamos a meternos con el botón de “extras”. Este botón lo que hace es abrir una ventana de Windows con el directorio seleccionado. La acción que hace esto es “GetURL”. Como podéis ver, esta acción no está en el grupo “control de película”, sino en el grupo “Navegador/Red”.

          Una vez elegida esta opción, en la pestaña “url” podremos “extras” (sin comillas), que es como se llamará la carpeta que contenga los extras. En la segunda pestaña “ventana” seleccionaremos “_top”, es decir, que la ventana de Windows se abra por encima de las demás, y no quede tapada por el menú. Resulta evidente que esta opción nos permite también, si quisiéramos abrir una ventana de Explorer, que nos dirija a una página determinada.

NOTA: hay que fijarse en que a no ser que haya una carpeta llamada “extras” en el mismo directorio que el menú, al pulsar este botón nos dará un error.

          Ahora vamos a pasar al siguiente botón. Iros al frame 220. Allí está situado el botón “Volver” que colocamos para volver al menú principal. Ya sabéis como se hace, botón derecho/Acciones y creáis un “goto”. Esta vez queremos que la película vuelva al fotograma cuando empiezan a entrar los gundams, que si no me equivoco, es el fotograma 185. Pues eso, “ir y reproducir” y fotograma 185. También podríamos ir directos al fotograma 201 (cuando ya los botones están colocados, pero yo creo que queda mejor así).

          Ya solo nos falta un par de botones antes de meternos con los botones de los capítulos. Colocaros en el fotograma 430. Allí os recuerdo que están colocados los 2 botones invisibles: uno para salir del menú y otro para volver al menú principal. Éste último (el botón encima de las letras “mi lucha no ha terminado aún” es exactamente igual que el de “Volver” que acabamos de hacer, así que ya sabéis, hacedlo igual. El otro botón (para salir) hay que hacerlo seleccionando “Fscommand” (está junto a “GetURL”).

Seleccionad esta opción, y voy a aprovechar para explicar el Fscommand.

Bien, en realidad Fscommand no es solo una acción, sino muchas juntas. Como veis hay 3 pestañas:

          En la pestaña marcada con la (Letra C) al ser desplegada aparecen los comandos que podemos usar. Si seleccionamos cualquiera de ellos, aparecerá colocada en la pestaña “Comando” (Letra A). La pestaña “Parámetros” (Letra B) sirve para asignar un ídem a los comandos. Como podéis ver en la imagen, los 4 primeros comandos tienen 2 posibles parámetros (True y False), mientras que los dos últimos comandos (exec y quit) no los tienen (a decir verdad, solo “quit” no tiene parámetro, porque “exec” sí que los tiene… pero no están definidos).

Los comandos son:

          - fullscreen: Si el parámetro asociado es “True”, hace que el menú se ponga a pantalla completa. Por defecto (es decir, si no pones este comando) es “false”. Eso quiere decir que todos los flash se reproducen SIN ponerse a pantalla completa a no ser que se especifique lo                contrario.
          - allowscale: Si el parámetro asociado es “False”, impide que al ejecutar un flash a pantalla completa éste se ajuste en caso de que la resolución de tu ordenador sea distinta que la del flash. Por defecto es “True”. Hablando claramente, significa que si ejecutas un flash de                  800x600 a pantalla completa en un ordenador que esté a 1024x768, a no ser que pongas este comando con el parámetro “False”, las imágenes van a estirarse para ocupar toda la pantalla… y por lo tanto se pixelarán.
          - showmenu: Si el parámetro asociado es “False”, impide que al pulsar el botón derecho en cualquier flash que se esté ejecutando aparezca un pequeño menú con diversas opciones (entre las que están algunas como “avanzar”, “rebobinar”, cambiar la calidad…) Por                        defecto está en “True”.
          - trapallkeys: Si el parámetro asociado es “True”, impide que se puedan pulsar teclas durante la reproducción del menú, tales como “CTRL-F” para pasar a modo pantalla completa, “CTRL-flecha derecha o flecha izquierda” para avanzar o retroceder fotograma a                          fotograma, o pulsar Esc. Por defecto está en “False”.
          - exec: Este comando no tiene parámetro definido. Sirve para ejecutar un archivo externo al flash. Hablaré más detenidamente de este comando dentro de un momento, cuando asignemos las acciones de los 4 botones de los capítulos.
          - quit: Este comando no tiene ningún parámetro. Simplemente sirve para terminar y cerrar el flash.

          Bien, una vez hecho este inciso, os recuerdo que estábamos a punto de asignarle al botón este la orden de “quit”. Así pues, pinchad en la pestaña marcada con la (Letra C), y seleccionad “quit”. Veréis que este comando aparece entonces en la pestaña de “comando” (Letra A). Pues ya está, al pulsar este botón, el menú se cerrará.
          Pasamos ahora a lo último: asignaremos las funciones a los 4 botones de los capítulos. Iros al fotograma 201 y vamos a ello.

          Hay 2 formas de ejecutar un video:

          La primera consiste en decirle al Windows que lo abra como si fuera una página Web. En esencia es como si abrieras el Windows Explorer y en la barra metieras la dirección del video en tu disco duro. El efecto final es el mismo de darle doble clic al fichero: se abre por el reproductor que esté por defecto (normalmente el Windows Media Player). Si no te importa que los videos se abran con el WMP, puedes usar este método: le asignas al botón la acción “GetURL”, y en la pestaña de “URL” ponéis la dirección del capítulo, desde la propia carpeta del menú. Por ejemplo, si el menú está en la carpeta X (la que sea, como en el directorio raíz de un CD), y el capítulo está dentro de un directorio llamado “capítulos” (en la misma localización que el menú), pues en la pestaña tendríamos que poner “capítulos/gundam01.avi”, sin las comillas, y cambiando “gundam01.avi” por el nombre del capítulo.

NOTA: Tal y como voy a explicar ahora, también hay que poner un “stopallsounds” antes del GetURL para que se paren los sonidos (como la música del fondo).

          La segunda forma, y preferida por mucha gente, es emplear un programa externo para ver el video. Normalmente el programa empleado es el BSplayer. Yo personalmente creo que es más manía hacia el WMP por ser de Microsoft que otra cosa, puesto que a mí el BSPlayer (salvo para algunas cosas como capturas de pantalla y cosas por el estilo) me ha dado más quebraderos de cabeza que otra cosa. Es cierto que el BSPlayer consume menos recursos que el WMP… pero yo que sé, apenas hay diferencia, la verdad. De todos modos, como casi todos prefieren este segundo método, es el que voy a explicar exhaustivamente. Haciendo clic con el botón derecho sobre el primer botón (el del capítulo 5), seleccionáis “Acciones”, y buscáis y pones “fscommad”. Entonces en la tercera pestaña pincháis en “exec” (que se colocará en la pestaña de “comandos”). Finalmente en la pestaña de parámetros escribimos “05.bat”. Nos olvidarnos de algo: hay que decirle al flash que pare la música de fondo. Por ello, o bien antes o bien después del “exec” tenemos que introducir la acción “stopallsounds”.

          Haced lo mismo con los otros 3 botones (pero en vez de 05.bat tenéis que poner 06.bat, 07.bat y 08.bat respectivamente).

          Os preguntareis que es eso de 05.bat, ¿no? Pues veréis, en el Macromedia flash MX los programadores han incluido un par de protecciones para el uso del comando “exec”. Para evitar que se ejecute un archivo que pueda tener virus sin que te enteres (abres una página Web que contiene un flash que ejecuta un “exec” obligando a tu ordenador a ejecutar un fichero “virus.exe” que contenga un virus, troyano o lo que sea), hay que cumplir unos requisitos:

          - Todos los ficheros que se ejecuten deben estar localizados en una carpeta llamada “fscommand” que esté en el mismo lugar que el flash ejecutado (si ejecutas el flash en c:/menu, el archivo debe estar en c:/menú/fscommand).
          - No se puede ejecutar ningún fichero .exe, puesto que podría ser un ejecutable pernicioso.
          - Para que el comando “exec” se lleve a cabo, el flash debe estar en formato proyector (.exe) y no en formato flash (.swf), puesto que los ficheros .swf se puede ejecutar automáticamente al abrir una página Web que lleve un EMBED a este .swf, y los .exe no se ejecutan sin pedirte permiso.

          Teniendo esto en mente, no puedes darle al flash la orden “abre el fichero bsplay.exe”, puesto que es un fichero .exe, y no os dejará. ¿La solución? Crear un fichero .bat (si, si, como en tiempos del MS-DOS) y dentro ya poner las líneas para ejecutar lo que queramos.
          Bien, normalmente los capítulos estarán en un directorio llamado “capítulos”, y el BSPlayer suele colocarse en un directorio llamado “Bsplayer”, así mismo debe haber un directorio llamado “fscommand” (si, con dos emes). Todos los directorios estarán en el mismo en que se encuentra el fichero .exe del menú. Cread estas carpetas que he dicho. Abrid ahora la carpeta “fscommand”. Dentro cread un fichero 05.txt y abridlo.
          Las líneas que vamos a escribir ahora son MS-DOS, así que si os acordáis no debéis tener problema. Partimos de que al ejecutarse el 05.bat, el Windows dirá “estoy ahora mismo en la carpeta “fscommand”. Por lo tanto la primera orden será:

          cd..

          Eso hace que nos situemos en el directorio inferior, es decir, en el mismo directorio donde está el menú. Ahora debemos ejecutar el fichero “bsplay.exe” que se encuentra en la carpeta “Bsplayer”, por lo tanto la siguiente línea será:

          cd bsplayer

          Ahora mismo el Windows dice “estoy en la carpeta bsplayer”, allí está el fichero bsplay.exe, y queremos ejecutarlo y decirle que abra el fichero “gundam05.avi” que está en la carpeta “capítulos” (la cual está en el mismo directorio que el menú). Por lo tanto la tercera y última línea debe decir:

          @start bplay.exe ../capítulos/gundam05.avi

          Tenéis que respetar los puntos y las barras. Esta orden le dice al Windows “ejecuta el fichero bsplay.exe y cierra esta ventana del .bat” (@start), “y abre el fichero llamado “gundam05.avi” que está en la carpeta capítulos un directorio por debajo del actual” (../ hace que baje un directorio hasta colocarse en el mismo que el menú; capítulos/ hace que suba al directorio del mismo nombre; y “gundam05.avi” es como se llama el capítulo que queremos que abra). Podemos también, si queremos, poner al principio del .bat la línea “@echo off”, que evita que se vean las líneas de código cuando se abra la ventana de DOS.
          Nótese que el nombre “gundam05.avi” podéis cambiarlo a vuestro gusto, siempre que los nombres del fichero .avi en la carpeta “capítulos” y en el fichero .bat coincidan. Una vez terminado el fichero 05.txt debería contener esto:

@echo off
cd..
cd bsplayer
@start bplay.exe ../capítulos/gundam05.avi

NOTA: Si el nombre del archivo .avi tuviese espacio, tendríamos que renombrarlo y eliminar esos espacios o introducir el nombre del archivo entre comillas al crear el .bat ya que, sino, el reproductor no lo abrirá quedando tal que así: @start bplay.exe ../capítulos/”gundam 05.avi”

NOTA 2: Durante la práctica he observado que el archivo .bat no debe contener caracteres acentuados (Tal como figura en el ejemplo de más arriba) y, por consiguiente, tampoco los archivos, carpetas o documentos a los que haga referencia pues, estos caracteres acentuados darán error al ejecutar el .bat

No obstante, existe un método por el cual podemos averiguar el carácter que deberíamos poner en el .bat, en el lugar del acentuado, ya que ese carácter sería para el .bat como su equivalente no teniendo que eliminar los acentos de los archivos a los que se hace referencia en el .bat

El método en cuestión es el siguiente:

          - 1. Vamos a Inicio>Ejecutar>Cmd
          - 2. Cambiamos al directorio que queramos. (cd nombre directorio)
          - 3. Escribimos "echo ñ > nombredelarchivo.txt" (Sin las comillas) (se nos crea un archivo .txt con el nombre que hallamos escogido y en el directorio en el que nos hallamos situado en el punto 2)
          - 4. Abrimos el archivo creado y en el veremos el carácter que nos corresponde al especificado tras la orden echo (en este caso la ñ). Ejemplo: Antaño En el .bat deberíamos poner: Anta¤o Ese símbolo viene a ser como una ñ para el .bat

          Guarda el fichero 05.txt y renombradlo a 05.bat.
          Haced lo mismo con los ficheros 06.bat, 07.bat y 08.bat, poniendo los nombres de los capítulos correctos en la última línea según convenga.
          Recapitulemos para no liarnos: el menú ya está terminado salvo por 2 detalles que explico enseguida. Hemos creado una carpeta “fscommand” (en el mismo directorio donde meteremos el menú), donde hemos metido una serie de ficheros .bat. También hemos creado una carpeta “bsplayer” donde hemos colocado el reproductor bsplayer (esta carpeta también está en el mismo directorio que el menú). Finalmente hemos creado una carpeta llamada “capítulos”, donde hemos metido los capítulos de gundam (en este caso, llamados gundam05, 06, 07 y 08.avi). Esta última carpeta también está metida en el mismo directorio en el cual pondremos el menú.
          Pues vamos a probarlo a ver si funciona. Recordad, no sirve ver el menú como “.swf”, así que tenéis que iros al flash: Archivos/Configuración de publicación y allí seleccionáis solo la opción “proyector de windows (.exe)”, y le dais a “publicar”. Debe haber aparecido un fichero .exe en el mismo directorio donde hayáis guardado el .fla de este menú. Coged este fichero .exe y situadlo en la misma carpeta donde están los recién creados directorios, y ejecutadlo. Si todo va bien, los botones de los menús deberían hacer que se abra el bsplayer con el capítulo correspondiente.

          Si a alguno no le sale (cosa que a más de uno le pasará) no os preocupéis, porque casi seguro que es un lío de directorios. Algo más adelante pondré unas capturas para aclararos.

NOTA ACLARATORIA DE COMANDOS

          Bien, el BSPlayer tiene una serie de comandos que si los añadís tras la ruta del archivo .avi, hará que el reproductor se ejecute con ciertas opciones especiales, como a pantalla completa, en el segundo XX del video, que se cierre el solo al acabar, que cargue subtítulos...

          Los comandos son los siguientes:

En línea de comando

bplay "my file.avi" ["my subtitles.txt"]

o

bplay "my playlist.bsl"

o

bplay "inifile.ini"

          En versiones modernas de bsPlayer (versión 1.0), el ejecutable se llama bsplay y no bplay así que tendremos que modificar la llamada al reproductor tal que así.

bsplay "my file.avi" ["my subtitles.txt"]

o

bsplay "my playlist.bsl"

o

bsplay "inifile.ini"

          El nombre del fichero debe ser siempre el primer argumento y el fichero de subtítulos el segundo (si no pones fichero de subtítulos no pasa nada, simplemente arrancará el video sin ellos).
Las opciones son:

-fs Abrir en Pantalla completa (Fullscreen)
-asx Abrir con x cadena de audio
          x=1-> 1ª Cadena de Audio
          x=2-> 2ª Cadena de Audio
          x=n-> nª Cadena de Audio
          x=0-> Semi's Directsound 3D
-stime=x Abrir video en el segundo x
-nsub No muestra los subtítulos aunque el archivo de subtítulos exista
-skin=s s=nombre de skin
-lang=l l=archivo de lenguaje sin extensión
-eend Salir de BsPlayer cuando el video termine
-pan Usar Pan-scan (reproduce en 4:3)
-res=WxHxD Comenzar con la resolución especificada
          W=Ancho, H=Alto, D=Profundidad de color
          EJ.: -res=1024x768x16
-ar=x:y Aspect ratio EJ.: -ar=16:9

Ejemplos:

          bplay "my movie.avi" "my subtitles.txt" -fs
          bplay "my movie.avi" "my subtitles.txt" -fs -as2
          bplay "my movie.avi" "my subtitles.txt" -as3 -lang=English

Subtítulos:

Los subtítulos deben estar en el mismo directorio que la película.

          EJ.: The Matrix.avi -> The Matrix.srt (.txt, .sub)

Puedes cargarlos desde el menú (del reproductor) o puedes enviarlos desde línea de comando.

Formatos de subtitulo soportados: MicroDVD, SubRip, Subviewer,

TMPlayer...

Lista de reproducción:

Un simple fichero de texto con extensión .bsl

Ejemplo:

--
c:/moviesThe Matrix.avi
c:/moviessomefile.avi
d:/videosmyvideo.mpg
--

TECLAS DE ACCESO RAPIDO
(Estas no vienen a cuento y por eso no las traduzco, las pongo solo porque son de interés general)

Up Volume up
Down Volume down
Ctrl+Up Dedynmic filter increase amplification
Ctrl+Down Dedynamic filter decrease amplification
Shift+Up Dedynmic filter increase pre-amplification
Shift+Down Dedynamic filter decrease pre-amplification
Left Seek backward
Right Seek forward
L Open...
Shift+L Open audio file
Ctrl+L Load subtitles
S Subtitles on/off
F Full screen switch
O Pan-scan
Shift+O Custom Pan-scan
Ctrl-A Always On Top
Z, X, C, V, B Prev, Play, Pause, Stop, Next
Ctrl+Z Prev chapter
Ctrl+B Next chapter
Shift+Z Prev CD
Shift+B Next CD
Alt+E Playlist
Ctrl+P Preferences
P Capture frame - original image size
Shift+P Capture frame - "What you see"
Ctrl+Left/Right Subtitles time correction -/+
VobSub subtitles dec/inc delay
Shift+Left/Right Subtitles time correction -/+ (small steps)
VobSub subtitles dec/inc speed
Ctrl+M Mute
Ctrl+J Jump to time
+/- Resize movie window or mouse wheel
Zoom in/out movie in full screen mode
1,2,3 Zoom 50%,100%,200%
Shift+1/2/3 Aspect ratio original/16:9/4:3
A Cycle aspect ratios
H Show/Hide main window
Ctrl+R Refresh current skin
Shift+V Switch wait for vertical-blank
Alt+I Add bookmark
Ctrl+Alt+I Edit bookmarks
Ctrl+V Chapter viewer
Alt+F4 Exit

Keys on Numeric keyboard in full screen mode
+/- Zoom in/out movie and keep it centered
4,6,8,2 Move picture left, right, up, down
Ctrl and +/- Zoom in/out movie
Ctrl+4/6/8/2 Free resize movie Left,Right,Up,Down
5 Reset

Mouse:

Mouse wheel Resize movie window in windowed mode
Volume control in full screen mode
Left button Pause/Resume movie
Right button Menu
Left button+wheel Volume control in windowed mode
Middle button Scroll movie in full screen, if Pan scan is active
(also Left button)
Show/Hide controls in full screen

RESUMIENDO: si, por ejemplo, quieres que se abra el video 1 de Gundam Seed a pantalla completa y quieres se cierre solo cuando acaba el video, la línea de comando que habría que poner en el .bat sería esta:

@echo off
cd..
cd bsplayer
@start bplay.exe ../capítulos/gundam05.avi -fs –eend

El -fs hace que se inicie a pantalla completa, y el -eend hace que se cierre solo al acabar. Nótese que ambos comandos se colocan justo detrás del nombre del fichero, dejando un espacio entre el mismo y entre ellos.

Un par de detalles y estructura del CD

          Vamos a acabar el menú de una vez por todas añadiendo un par de detalles, y vuelvo a explicar paso por paso la estructura del CD, con capturas para que quede todo claro. Iros al primer fotograma del menú, en la capa “control” allí vamos a pinchar con el botón derecho y seleccionar “acciones”.
          ¿Recordáis cuando os expliqué todos los comandos de Fscommand con sus respectivos parámetros? Pues ahora vamos a usarlos. Tenéis que añadir el “fscommand/fullscreen” y poner en parámetro “true”. Esto hará que el menú se ejecute en pantalla completa (si es que lo queréis así). Luego añadís otro “fscommand/allowscale” y en parámetro ponéis “false”, para evitar que el menú se pixele en resoluciones altas (solo si antes habéis añadido el parámetro fullscreen).
          Ahora es decisión vuestra si queréis permitir que se puedan usar las teclas y si queréis que se pueda usar el menú del botón derecho. En este menú no hay mayor problema en que lo dejéis como está, pero en menús que tienen secciones secretas (por ejemplo los de Mazinger Z) usando las teclas pueden moverse fotograma a fotograma hasta saltarse los Stop que hayáis puesto y entrar en las secciones secretas sin tener que buscar los botones adecuados. Yo por eso, personalmente, me gusta bloquear las teclas y el menú del botón derecho. Si queréis hacerlo añadid También:

          Fscommand/showmenu/false
          Fscommand/trapallkeys/true
         
          Como estamos poniendo esto al principio del menú, se cargará al iniciar el mismo.

          Ahora el menú ya sí que está terminado definitivamente. Ya sabéis, ahora lo tenéis que exportar como .exe. EL menú ha ocupado unos 7.30 megas, más o menos. Perfecto. Una vez que lo hayáis exportado vamos a montar la estructura del CD definitiva. Renombrad el fichero .exe recién creado a “menu.exe”, puesto que es así como debería llamarse. Este fichero estará en el directorio raíz del CD.
          Por ahora, cread un directorio (llamadlo como queráis) para montar el CD-DVD. Este directorio va a ser como si fuera el raíz del CD. Dentro cread las siguientes carpetas:

          - fscommand
          - capítulos
          - extras
          - bsplayer

          Bien, dado que este es el directorio raíz, traed aquí el fichero menú.exe. Cread también un fichero llamado “autorun.inf”. El autorun.inf es un fichero que hace que se cargue un archivo determinado cuando se mete el CD en la unidad. Dicho de otro modo: gracias al autorun.inf el menú se auto lanzará al meter el CD en la unidad.
          Abrid el autorun.inf como si fuera un archivo de texto, y meted esto:

          [Autorun]
          Open=menu.exe
          Icon=gundam.ico

          La línea OPEN indica cómo se llama el archivo que se va a auto ejecutar cuando metáis el CD en la unidad. En este caso yo he llamado al menú “menu.exe”, pero podéis ponerle el nombre que queráis. La línea ICON indica el icono que se va a poner al CD cuando lo metas. Yo he llamado al icono “gundam.ico”. Este archivo que ahora voy a explicar cómo se hace, lo colocaremos en el mismo directorio que el menú.
          El icono (fichero .ico) es simplemente una imagen .bmp renombrada. Muchos usan iconos de 32x32 pixel, ya que es el tamaño óptimo para los iconos tamaño "icono", pero se queda pequeño (y se pixela) en cuando el Windows muestra tamaño "mosaico". He visto iconos de 32x32 que quedan muy bien, y otros de 2x2 cm (unos 57x57 pixel) que quedan mejor... probad vosotros a ver. Yo voy a usar el icono de las releases de Frozen Layer Fansub, que son los que han ripeado la serie. Pero si vosotros preferís haceros vuestros propios iconos, simplemente podéis coger por ejemplo la cara de uno de los gundams que usamos antes, reducirlo al tamaño adecuado, y salvarlo como imagen .bmp. Una vez hecho esto, lo renombráis a “gundam.ico” y lo ponéis en el directorio raíz que hemos creado. O sea, el directorio raíz debería quedar así:

          Vamos a rellenar las carpetas. La carpeta “Bsplayer” debe contener el BSplayer. De hecho, basta con que tenga 2 ficheros: “bplay.exe” y “bsrendv.dll”.

          En la carpeta “capítulos” meteremos los mismos renombrados como “gundam05.avi, gundam06.avi, gundam07.avi y gundam08.avi”… pero, eso en caso de que vayamos a grabar el CD. Si lo que queremos es poner a compartir el menú, evidentemente dejaremos esta carpeta vacía.
         La carpeta de “Extras” es algo opcional, es decir, si queréis incluir algún extra, es aquí donde lo meteremos. Lo normal es incluir las carátulas del grupo de fansubers que ha ripeado la serie (pero FLF, si bien es un gran grupo de ripeo, su gran asignatura pendiente es precisamente la de los menús y carátulas, y no han hecho, que yo sepa, ninguna carátula para gundam. En casos como estos, un mínimo conocimiento del Photoshop nos permite crear nosotros mismos las carátulas). Otras cosas que se pueden incluir son imágenes, doujinshins (comics para adultos relacionados con la serie), pequeños videos… etc. En este caso voy a incluir algunas de las (escasas) imágenes de gundam que he conseguido recoger en internet… Recordad: Los extras cuentan para el máximo de tamaño del menú. Dado que el menú ha ocupado unos 7.5 Mb, no deberíamos añadir más de 2.5 Mb.

          Finalmente, la carpeta “fscommand” debe tener dentro los 4 ficheros .bat que creamos, en cuyo interior debemos poner las líneas que ya dijimos antes.

          Ahora ya solo falta crear un fichero .txt (leeme.txt o algo así y solo si vamos a compartir el menú) en el raíz, donde tienes que explicar el nombre que deben llevar los ficheros .avi para que el menú funcione. Si queréis poner algunas líneas de agradecimiento. Hecho esto ya solo Nos falta comprimir el menú y ponerlo a compartir.

          Bueno, me despido de todos. Ya está todo terminado y bien explicado. Espero que les haya servido este “pequeño” tutorial. Ahora ya no tienen excusas: elegir una serie, y empezar a hacer menús. Cuantos más hagas, mejor les saldrán, es cuestión de práctica.

          Gracias.

PD: Este tutorial no es del todo mío, lo he bajado hace algunos años y no recuerdo la fuente así que si alguien fuera tan amable de decirme con gusto lo pongo.

Un saludo, y disfruten de los menús

EL TUTORIAL HA SIDO EXTRAIDO DE:
http://www.taringa.net/posts/info/7464110/Tutorial-Menus-de-Anime-En-Flash-Parte-1.html
EN NINGÚN CASO PRETENDO ATRIBUIRME LA AUTORÍA DEL PRENSETE TUTORIAL

NOTA: Podeis descargar el presente tutorial en pdf junto con los archivos de imagen necesarios desde Aquí

[Perroloco]

MADRE!!! Que pedazo tutorial,    tenia ganas de cambiar de programa para hacer  menus por eso de seguir adelante y no estancarme, aunque flash no es que me guste mucho la verdad... pero creo que voy a darle un vistazo y intentar hacer algo potable. Aunque seguramente me salga un mal churro 

SAlud