P2Pnews.org FAQ (Preguntas más Frecuentes)

Pregunta

• 01.- Introducción
• 02.- Primeros pasos (tamaño, fondo.)
• 03.- Empezamos a poner gráficos que se mueven y eso
• 04.- Las letras y las máscaras (y no estamos de carnaval)
• 05.- Previsualizaciones, o como ver si el menú sale bien o mal
• 06.- Weno, nos ponemos con los botones, que wai, no
• 07.- Zona de Créditos, muy por encimita que no tenemos tiempo que perder
• 08.- Diálogo de Salir, porque hasta este perfecto menú puede llegar a cansar
• 09.- Terminamos el menú hacemos que esos botones tan monos sirvan para algo
• 10.- Un par de detalles y estructura del CD

Respuesta

01.- Introducción

(Manual realizado por Vortax_Wyvern)

Para hacer los menús vamos a utilizar 2 programas: El Macromedia Flash MX y el Adobe Photoshop 7.0 (o cualquier otro programa de edición de imágenes).

El Adobe nos servirá para preparar las imágenes y los botones, y el Flash para unirlos todos y crear el menú.

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, mi colega Xeros_Metallium hizo un tutorial de photoshop, similar a este. Podéis hechar un vistazo Aquí.
- 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 y tal… pero no los vamos a usar porque A. No nos hace falta, y B. No se utilizarlos yo. (como veis, yo soy el primero que admite que no tiene ni idea de esto).

Vamos a empezar con las 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 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 1 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ía (seguiría estando, pero no lo vemos). El icono del candado sirve para “bloquear” la capa. Si lo seleccionamos, aparecerá un pequeño candado, y no podremos hacer modificaciones de 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 izq. 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 ejecutas el flash, va avanzando el cuadrado roza hacia la izquierda, y va haciendo lo que indiques 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 a las 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 B nos muestra el fotograma actual.
- La LETRA D es la barra de Zoom, aquí podéis 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 ellas, 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 chocheando, se que no hay Zona 4), me refiero a 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 trabar… y dado que tenemos tanto trabajo por delante… vamos al tajo.

Arriba

---

02.- Primeros pasos (tamaño, fondo.)

Bueno, lo primero que necesitamos es definir como 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ú, sumad 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 CDs 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 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.
- El fondo escogido es este: Fondo de Gundam.
- Bueno, este fondo mola, verdad? Es perfecto para Gundam. 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éis, el Flash es muy buen programa… pero siendo sincero… es una MIERDA ajustando el tamaño de las imágenes. Se pixelan que da gusto, dan problemas de capas… lo que vamos a hacer pues 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 sabéis, distintas personas utilizan distintas resoluciones de pantalla… y si hacemos un menú en 1024 y lo ve otra persona en 800x600, pueden haber fallos (y eso Cyrus lo sabe mejor k nadie :P ), 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 mas 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 mas pequeño, con un borde negro alrededor, pero no dará ningún fallo.

Bien, hemos decidido hacerlo en 800x600. Ahora bajáos la imagen de fondo. Es de 1280x1024.
- Cuanto mayor sea una imagen, mejor, porque al reducirla en el photoshop no se pierde calidad. Si usas una imagen de 640x480 en photoshop y la amplias, te vas a cortar con los píxels.
- Una vez que tengáis la imagen, abridla 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 Ej. en la imagen podéis observar lo que he hecho yo.
- Seleccionas un área de 1247x935 y la recortas, tras esto la reduces a 800x600 y la salváis a .JPG (máxima calidad, no me seáis cazurros).

Ahora vamos a empezar con el Flash. Abridlo.
- Lo primero que tenemos que hacer ahora es seleccionar el tamaño.
- Abajo, donde dice (seguro que lo adivinas) “tamaño”, pues pincháis.
- Ya dijimos que lo íbamos a hacer en 800x600, así que poned ese tamaño.
- En esa ventana tb vamos a definir el color de Fondo (en este caso, usad 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 etc. Cuanto mas 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 numero algo bajo. Para que las animaciones sean nítidas, vamos a subirlo al doble, 24.
- Ya sabéis, 24 frames = 1 segundo, 48 frames = 2 segundos, 12 frames = 500 mseg.

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

Lección de cómo importar imágenes. Es muy simple.
- Para añadir una imagen al flash, iros a “archivo”-->“Importar a biblioteca”.
- Una vez allí seleccionáis las imágenes (en este caso, Fondo.jpg), y dais aceptar.
- Ahora el flash ya tiene metido dentro la imagen que queremos usar.
- Para ver las imágenes, símbolos, etc etc que tenemos metidos en flash, pulsamos “F11”.
- Se abrirá una ventana donde aparecen las imágenes importadas (por ahora solo el fondo).

Vamos con las capas y frames. Prestad atención, que esto es lo más importante.
- Recordad que hemos dicho que cada imagen vamos a asignarle una capa, para evitar líos.
- Lo primero que vamos a hacer es añadir una capa.
- Pinchad en el icono “insertar capa” (revisa el principio si no sabes donde está).
- Veréis que aparece otra capa, llamada “capa 2”.
- Para cambiar el nombre de la capa, doble clic en el nombre (así pues, dad doble click en “capa 2”, y poned “fondo”).
- Esa capa será donde insertamos 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éis cuando lo usemos. Por lo pronto, renombrad la capa 1 a “control”.
- La capa control la vamos a dejar siempre vacía, por ahora.
- La capa control, al no llevar imágenes ni nada, la vamos a dejar abajo del todo.
- Recordad que las capas que están por encima se superponen, así que las próximas imágenes que insertemos deben estar en capas superiores, o de lo contrario no se verían!!! (estarían tapadas por el fondo).
- Podéis cambiar el orden de las capas arrastrándolas (pinchas, arrastras arriba o abajo, y sueltas).

Ahora nos metemos con los frames.
- Veamos, a la altura de la capa “fondo”, donde equivale al fotograma 10, pinchad con el botón derecho, y en la ventana que os sale pinchad en “Insertar fotograma clave”.
- Tras esto, pinchad en el 20 y le dais a “insertar fotograma” (NO clave).



- Tras haber hecho eso, deberíais ver esto:



- Vale, os 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 os explico).
>> El 4 corresponde con el fotograma seleccionado (pinchar con el botón IZQ en cualquier fotograma te sitúa en él).
>> El 5 corresponde con el fotograma que se está viendo en este momento (es decir, si pinchas ahí y arrastras a izq. o derecha, podrás ver lo que llevas 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.

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 estoy ahora), la imagen no saldría solo en el 17, sino en todos los fotogramas entre el 10 y el 20 (inclusives ambos).
- Los fotogramas 1-9 seguirían vacíos, porque están separados por un fotograma clave (el 10).
- Si quitáramos 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 entendéis?

Una vez explicado esto, pinchad con el derecho en el fotograma 10, y le dais “borrar fotograma clave”. Veréis que el fotograma clave desaparece, ahora es fotograma normal.
- Abrid la biblioteca (F11), aseguraos de seleccionar cualquier fotograma de la capa “fondo”, y arrastráis la imagen “fondo.jpg” de la biblioteca al área de trabajo. La imagen aparecerá allí.
- Ahora la vamos a colocar en su sitio. Veis lo que he redondeado de rojo? Aparece siempre que seleccionéis una imagen.
- Los 2 números de la IZQ 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 pinchad en los números de la derecha, y poned X=“0” e Y=“0”, eso colocara el fondo cubriendo todo el área de trabajo.
- Recordad que si la pifiáis, podéis usar el comando “deshacer” (CTRL-Z).



- Veréis que ahora los fotogramas 1-20 en la capa “fondo” son grises: 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.

Arriba

---

03.- 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 cualquiera, tienen que decir algo. En este ejemplo, vamos a poner 2 imágenes:
>>Cogeremos al Gundam STRIKE y a su piloto (Kira). De este modo, si en el futuro hacemos otros menús, podríamos 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: Gundam Strike

y de aquí a Kira Yamato: Kira y Asran

Bueno, pues nada, ahora os toca poneros a trabajar… hay que recortar al Gundam del fondo. Cuando lo hayáis recortado, tenéis k hacer transparente el fondo, o sea, k solo sea visible el Gundam.
- Evidentemente no es cuestión de poner al gundam y un recuadro azul alrededor pegados sobre la imagen, ¿no?
- Tendréis 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, Tb. 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 Pixels de altura, y el strike Tb. Así da la impresión de que el piloto está en primer plano.



- Deben quedar más o menos asi.

Bien, ahora hay que guardarlas… Lo ideal seria guardarlas como una imagen .JPG, ya que ocupan poco… pero hay un problema: las imágenes .jpg no permiten guardar transparencias.
- Si guardáis estas imágenes como .jpg, cuando las vayáis a usar os daréis cuenta que el fondo ya no es transparente, sino blanco… y habréis tirado a la basura el trabajo de recortarlas!! Así que cuidado.
- El flash no permite importar imágenes .psd… así que vamos a usar el formato .PNG. Tb. podríamos usar .Gif, pero las .Gif solo permiten un máximo de 256 colores (se ve de pena).
- Vais a “guardar como”, y seleccionáis .PNG. En mi caso se llaman “kira.png” y “strike.png”.

Abrid 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 tenemos que plantearnos 2 cosas:
>> Primera, que vamos a hacer con las imágenes que hemos recortado.
>> Segunda, que música vamos a usar en el menú.

Empecemos con la música:
- Yo me he bajado la OST de gundam, y de todas las canciones que hay, mi preferida es Annani_Isshodattanoni.mp3.
- 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 os recuerde que .hack//SIGN tiene una de las mejores bandas sonoras, y es precisamente por quien las canta… ^_^
- En la 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 PM, 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 sabéis, boton 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 click en el nombre y la llamamos “música”.
- Hora de importar el MP3. Ya sabéis 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.
- Os vais al primer frame (bueno, a cualquier frame) de la recién creada capa “música”.
- Abajo, en la barra de propiedades (recordad, zona 3), y donde dice “música” pincháis y seleccionáis el mp3 que acabáis de importar.
- Donde dice “efecto” lo dejáis en “ninguno”, donde dice “sinc” lo dejáis en “evento”, y donde dice bucle… bien, es cuestión de gustos.
- Si ponéis un numero aquí, cuando la música llegue al final, se repetirá X veces.
- En nuestro caso, vamos a poner 100, o sea, k se repite sin parar 100 veces. Veréis 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 parara 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… id importando a la biblioteca las 2 imágenes PNG que hemos hecho antes. ^_^

Vale, 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 pinchando con el 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.
- Tb. veréis 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, pinchad en el fotograma 72 (capa fondo) y dadle “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, abrid 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 (k esta cortado) coincida con el límite inferior del flash.
- Tb. lo vamos a pegar en el lado de la derecha, porque el brazo Tb. queda cortado.
- Recordar k podéis 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 muy feo.
- Vamos a convertirla en un símbolo y a trastear con ella.
- 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 grafico.
>> 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 k una imagen se vuelva negra, luego blanca y luego roja, solo tendremos que convertirla en clip de película, y haciendo doble click sobre ella, aparecerá una nueva línea de tiempo… allí podemos hacer lo que queramos. Ya lo veréis mas 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 poco a poco negra.
- 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% Tb. Hechad un vistazo:

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 esta 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.
- Cagendios! 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 XD ).
- 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 tu creas un SIMBOLO (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 el 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 ti.
- 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.
- 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”.
- 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 mas difícil ^_^



- Como podéis ver en la imagen, los fotogramas de interpolación aparecen como una flecha sobre un fondo azul.

Ahora vamos a pasar a lo siguiente… creación de letras y uso de Máscaras.

Arriba

---

04.- 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.
- 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” y el tamaño (por Ej. 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 ralla 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. ^_^

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: Wallpaper
- 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 pixels 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” XD ).

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 en el menú.
- Ahora ya sabéis, la convertimos en un gráfico.
- Hacemos otro fotograma clave en el 135, y vamos a trastocar con el logo.
- A ver, en el fotograma 125 pincháis en el grafico, 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.



- 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 esta.
- Simplemente bajáros uno 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 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 Ej. 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 Ej. Fotograma 175, ponemos otro clave, y en él movemos el gráfico del Strike dentro del área del menú, por Ej. 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 suya, 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 como demonios esta quedando nuestro menú, ¿no?
- Así que ahora voy a pasar a explicar las “previsualizaciones”, o lo que es lo mismo, “a ver cómo me está saliendo esta mierdecilla de menú”.
- Después pasaré a explicar lo más divertido de todo: los Botones ^_^

Arriba

---

05.- Previsualizaciones, o como ver si el menú sale bien o mal

Básicamente, la previsualizació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 en vuestro propio ego diciendo “joder, soy la puta oxtia”.

- Iros en el flash a la pestaña de “Archivo”. Allí veréis dos opciones: “configuración de publicación” y “previsualizar 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:
-1º 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\Macromedia\Flash MX\Players” 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.
-2º 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 cual 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 previsualicéis mucho, quitar la música del menú y ponerla cuando ya esté acabado, para no tiraros 30 segundos de espera cada vez que previsualicéis.

- Una vez que habéis elegido las opciones correctas, iros a previsualizar 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 Tb.… 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 etc-).
- 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 izq. 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). Tb. 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 previsualizar el menú, se quedará parado en el fotograma 175!!!!

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

Arriba

---

06.- Weno, nos ponemos con los botones, que wai, no

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? :-P )

Los botones simples son aquellos compuestos por una sola imagen.
- Digamos que tu botón está compuesto por un triangulo azul, un circulo 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 importarlos, 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 (por Ej.), pero como sigue siendo una unidad, no podremos mover de sitio las figuras, ni cambiarlas de forma, por Ej.

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 triangulo etc etc, pero a diferencia del caso anterior, en vez de ser todo una imagen .PNG, serian un triangulo, 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 triangulo 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.

- Abrid el Photoshop, que vamos a hacer los botones en él para luego importarlos al Flash.
- Crearemos por Ej. 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 como van a ser los botones.
- Vamos a necesitar tipos de botones, uno para el estado normal del botón, y otro para cuando pasemos el cursor sobre él.

Podemos decidirnos por utilizar a los gundam en pequeñito, en el lado izq. 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.

Kira y Asran

- Esta es la imagen que hemos usado para recortar a Kira Yamato. Pues Tb. nos va a servir para los botones.Veis 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 izq. 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.
- Tb. os recomiendo que guardéis los botones en formato .PSD (es decir, con las capas, 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 como 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 como 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 izq. 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 mi esto no me gusta, así que lo que yo hago es transformarlo en un grafico, 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 antiguo, incluidas las demás animaciones.

hora 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--->Convertir en símbolo, y seleccionáis la opción “BOTÓN”. Hacedlo hasta haber convertido todos en botones.
- Si ahora previsualizáis (recordad que si aun 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 click 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 Tb. 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 que 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 seria 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 (Ej. 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 triangulo (da = 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 triangulo (pero el triangulo 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 mas 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.
- 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 poner las el título de cada capitulo 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 titulo de cada capitulo. 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 click) 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.
- Porqué 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 grafico, 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 click 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 (asegurad 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 circulo 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 el la capa del botón antigua 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 previsualizació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 cojé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 Ej. “Extras” que debe abrir una carpeta donde se encuentren los mismos, y “Créditos”, donde se suelen poner el realizador y 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 Ej. Un buen sitio puede ser en la esquina inf. 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 Ej. 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.



- Previsualizad 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 Ej., 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 click por Ej. 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 previsualizació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 Ej. 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 PELICULA, dentro simplemente hacéis los cambios que queráis… por Ej. 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 colocaréis un stop.

Arriba

---

07.- 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 tp 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 como 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).



- Ahora transformadlo 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.

Strike, visión frontal

- 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 de la gana a la izquierda del gundam.
- El texto Tb. lo podéis convertir en gráfico y hacerlo aparecer si queréis.

Solo 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!!!.

Arriba

---

08.- 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 sabes, seguro que quieres salir? Etc etc) que queda muy bien.

- Lo primero es coger esta imagen: Wallpaper

- Los que veáis la serie, habréis reconocido las imágenes del ending, encadenadas de forma contínua. 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 :-P ).



- 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 salta a este fotograma. Abrid la biblioteca y colocad la imagen a la izquierda del menú, transformándolo en gráfico.
- Véis 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 izq. 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 = 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 click 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.

Arriba

---

09.- 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 click, no 2), y pulsáis con el botón derecho sobre él, seleccionando “acciones”.

NOTA: NO debéis pinchar el botón derecho sobre EL FOTOGRAMA (como cuando ponéis los Stops), 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 acabo otras (si es cuando el botón esta 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 Ej. 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 donde 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 el 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 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. Tb. podéis seleccionar varias opciones juntas. Cuando hayas decidido, seleccionar la segunda línea de la zona marcada con la (Letra A), es decir, el 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 cual 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”.



y 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 Tb. 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. Tb. 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 aun” 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 ellas, 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 si 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é mas 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 click 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 capitulo, desde la propia carpeta del menú. Por Ej., si el menú esta en la carpeta X (la que sea, por Ej. 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, Tb. 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 mi el BSPlayer (salvo para algunas cosas como capturas de pantalla y cosas por el estilo) me ha dado mas quebraderos de cabeza que otra cosa. Es cierto que el BSPlayer consume menos recursos que el WMP… pero yo que se, apenas hay diferencia, la verdad. De todos modos, como casi todos prefieren este segundo método, es el que voy a explicar exhaustivamente. Haciendo click 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 olvidamos 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:

1) 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:\menu\fscommand).
2) No se puede ejecutar ningún fichero .exe, puesto que podría ser un ejecutable pernicioso.
3) 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 “capitulos”, 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 ../capitulos/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ú; capitulos/ hace que suba al directorio del mismo nombre; y “gundam05.avi” es como se llama el capítulo que queremos que abra). Podemos Tb. si queremos poner al ppo 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 “capitulos” 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 ../capitulos/gundam05.avi

salvad 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. Tb. hemos creado una carpeta “bsplayer” donde hemos colocado el reproductor bsplayer (esta carpeta Tb. está en el mismo directorio que el menú). Finalmente hemos creado Tb. una carpeta llamada “capitulos”, donde hemos metido los capítulos de gundam (en este caso, llamados gundam05, 06, 07 y 08.avi). Esta última carpeta Tb. 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. 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 k si los añadís tras la ruta del archivo .avi, hará k el reproductor se ejecute con ciertas opciones especiales, como a pantalla completa, en el segundo XX del video, k se cierre el solo al acabar, k cargue subtítulos...

Los comandos son los siguientes:

En linea de comando

bplay "my file.avi" ["my subtitles.txt"] [opciones]
o
bplay "my playlist.bsl" [opciones]
o
bplay "inifile.ini" [opciones]

En versiones modernas de bsPlayer (version 1.0), el ejecutable se llama bsplay y no bplay asi que tendremos que modificar la llamada al reproductor tal que asi.

bsplay "my file.avi" ["my subtitles.txt"] [opciones]
o
bsplay "my playlist.bsl" [opciones]
o
bsplay "inifile.ini" [opciones]

El nombre del fichero debe ser siempre el primer argumento y el fichero de subtitulos el segundo
(si no pones fichero de subtitulos no pasa nada, simplemente arrancara 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 subtitulos aunque el archivo de subtitulos 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 (no se que demonios es eso)
-res=WxHxD Comenzar con la resolucion especificada
W=Ancho, H=Alto, D=Profundidad de color
EJ.: -res=1024x768x16
-ar=x:y Aspect ratio, EJ.: -ar=16:9


EJ.: 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


Subtitulos:

Los subtitulos deben estar en el mismo directorio que la pelicula
EJ.: The Matrix.avi -> The Matrix.srt (.txt, .sub)
Puedes cargarlos desde el menu (del reproductor) o puedes enviarlos desde linea de comando
Formatos de subtitulo soportados: MicroDVD, SubRip, Subviewer,
TMPlayer...


Lista de reproducción:

Un simple fichero de texto con extension .bsl

EJ.:

--
c:\movies\The Matrix.avi
c:\movies\somefile.avi
d:\videos\myvideo.mpg
--

TECLAS DE ACCESO RAPIDO
(Estas no vienen a cuento y por eso no las traduzco, aparte se me esta enfriando la comida, las pongo solo por que son de interes 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
Citrl+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 kieres k se abra el video 1 de Gundam Seed a pantalla completa y k se cierre solo cuando acaba el video, la linea de comando k habría k poner en el .bat sería esta:


@echo off
cd..
cd bsplayer

@start bplay.exe ../capitulos/gundam05.avi -fs -eend

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

Arriba

---

10.- 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.
Luego añadís otro fscommand-->allowscale y en parámetro ponéis “false”, para evitar que el menú se pixele en resoluciones altas.

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 Ej. los de Mazinger Z) usando las teclas pueden moverse fotograma a fotograma hasta saltarse los Stops que hayáis puesto y entrar en las secciones secretas si 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 Tb.:

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. Este directorio va a ser como si fuera el raíz del CD. Dentro cread las siguientes carpetas:

fscommand
capitulos
extras
bsplayer



Bien, dado que este es el directorio raíz, traed aquí el fichero menú.exe. Cread Tb. un fichero llamado “autorun.inf”. El autorun.inf es un fichero que hace que se cargue un fichero determinado cuando se mete el CD en la unidad. Dicho de otro modo: gracias al autorun.inf el menú se autolanzará 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 como se llama el archivo que se va a autoejecutar 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 fichero que ahora voy a explicar como 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 pixels, 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 pixels) 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 el directorio 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.



Bueno, ya no me queda nada más que contaros. Ahora ya solo os falta crear un fichero .txt (leeme.txt o algo así) en el raíz, donde TENÉIS QUE EXPLICAR el nombre que deben llevar los ficheros .avi para que el menú funcione. Si queréis poner algunas líneas de agradecimiento al grupo que ha ripeado la serie o a vuestros moderadores por enseñaros a hacer menús (ejem), podéis añadirlas aquí. Hecho esto ya solo os falta comprimir el menú y ponerlo a compartir.

Bueno, me despido de todos vosotros. Ya está todo terminado y bien atado. Espero que os haya servido este pequeño tutorial. Ahora ya no tenéis excusas: elegid una serie, y empezad a hacer menús. Cuantos más hagáis, mejor os saldrán, es cuestión de práctica.
Os recuerdo que si tenéis alguna duda (y teniendo en cuenta como me explico, es más que probable), podéis plantearla en el propio foro, ya que este post está cerrado. Asimismo si queréis el fichero .Fla del menú para echarle un vistazo, no tenéis más que pedírmelo. Creedme, se aprende más probando y viendo menús ya hechos que en tutoriales (ejem). ^_^

Una última cosa: Este f.a.q. está pensado para enseñar a hacer menús, no solo de flash, sino Tb. de Quick Menu Builder, de Multimedia Menu Builder o cualquier otro programa. El problema es que yo no los uso, y por lo tanto no se manejarlos, ergo no puedo hacer tutorial.

Si alguno de vosotros se siente con ganas de echar una mano y sabe manejar alguno de estos programas, que se ponga en contacto conmigo o con cualquier otro moderador o administrador y vamos completando el f.a.q. con otros tutoriales, para que haya donde elegir. Cualquier ayuda es bien recibida.

Un saludo, y disfrutad de los menús!. ;)

Manual realizado por Vortax_Wyvern

Arriba

---