Tutorial QMB (Quick Menu Builder )

[ronivenza]

Hola.
          En este tutorial voy a intentar explicar como hacer un menú con Quick Menu Builder (con un amplio abanico de opciones). Antes debo recordar que los menús hechos con QMB sólo se podrán usar para PC.

Paso 1: Importación de archivos aka. Cargar Imágenes



          Como podréis observar este paso no resultará complicado.

[1] La imagen “principal” será la imagen que nos saldrá al abrir el menú.
[2] La “selección o hover” es la imagen que saldrá en el menú cuando pasemos el cursor por encima de ciertos elementos del menú..
[3] La imagen “clica o click” es la que saldrá cuando hagamos clic en algún punto del menú.
[X] La imagen “filtro o filter” servirá para realizar menús no cuadrados/rectangulares. Simplemente hemos de cargar una imagen, obligatoriamente en formato .bmp, donde rellenaremos de negro la parte que queramos que pertenezca al menú mientras que en blanco la parte no deseada.

          Finalmente, en las pestañas de arriba podréis comprobar que se han cargado correctamente las imágenes. Mientras que en la ventana compresión podréis ajustar la ratio de compresión que queráis para vuestro menú (vigilar porque inicialmente se coloca automáticamente a un 35%).

          Nota: aunque pongáis una compresión del 0%, el programa la bajará automáticamente. Un consejo que doy es que una vez acabado el menú vayáis a la carpeta “src” y allí cambiéis los archivos Main.jpg, Hover.jpg y Clic.jpg por los archivos originales cambiándoles los nombres respectivamente.

A continuación pongo unos ejemplos de los diferentes archivos cargados y el resultado final:

Main:



Hover:



Clic:



Filtro:



Resultado final:



Paso 2: Creación de botones

Ahora nos encargaremos en crear las zonas “dinámicas” (véase las partes del menú que necesitaremos interactuar con ellas: título de los capítulos, salir del menú, música, submenús…).



[1] Cada vez que queramos crear un botón nuevo deberemos darle a este botón.
[2] Una vez añadido nos saldrá un cuadro que podremos modificar manualmente o usando los controles de selección de la zona [4] y pudiendo mostrar la grid para que nos ayude desde la zona [5]. Cuando vayamos ajustando las medidas del botón podremos ver que va apareciendo la imagen Hover que aparecería al pasar el cursor por encima
del botón. Una vez creado el botón podemos ponerle un nombre desde [3] para tenerlo mejor organizado.
Finalmente, desde [6] podremos borrar el botón seleccionado o cargárnoslos todos.

          Nota: si queremos crear un área de imagen o vídeo tendremos que crear un botón en la zona deseada. Quedando un botón creado de la siguiente manera: (más adelante ya se explicará como decirle al programa que hemos creado un área de imagen).



Paso 3: Asignación de acciones

Aquí es donde está la chicha del menú. En este paso indicaremos a cada uno de los botones que función deberá realizar. Comentaré como crear los botones más comunes con diferentes opciones. Intentaré ser los más claro posible. Primero veamos una captura de esta pantalla y hagamos una pequeña descripción.



[1] Aquí veremos una lista con todos los botones creados, los cuales iremos seleccionando individualmente para ir añadiéndoles funciones.
[2] Nos aparecerá el nombre del botón seleccionado. Si activamos la opción “Mostra Vista – Show as caption” veremos que el nombre se nos acopla al botón creado.
[3] Podremos hacer que ese botón tenga una forma diferente, como por ejemplo, un botón al estilo Windows:



Estas opciones de los botones no se suelen usar (al menos yo no he visto nadie que las use).
[4] Nos permitirá decirle la función principal de cada botón. Estas funciones son las siguientes:

          - None/Nada: el botón no realiza ninguna función esencial. Servirá para botones como Music: On/Off donde sus funciones las activaremos desde las pestañas inferiores.
          - Explore Fólder/Explorar carpeta: podremos acceder a una carpeta. Útil para botones como Extra donde a veces nos interesará abrir una carpeta donde estén guardados todos los Walls, OST, etc.
          - Execute…/Ejecutar…: sirve para ejecutar aplicaciones. Es el que usaremos para abrir los capítulos. Podremos hacer dos cosas: abrir un reproductor que tengamos en una carpeta conocida (la raíz del menú) y a partir de unos parámetros hacer que se nos abra el capítulo o abrir directamente el episodio. Explicación más adelante.
          - Open document/Abrir documento: como ya dice el nombre nos permitirá abrir un documento (como por ejmplo un pdf).
          - Open media file/Abrir archivo media: permitirá abrir un archivo de vídeo. Personalmente suelo usar más la función de Ejecutar ya que acabará haciendo lo mismo.

          Nota: veremos que al seleccionar una de estas acciones (abrir documento, ejecutar…) nos aparecerán unas casillas. En la primera de ellas (Select a file) veremos que aparece la palabra MenuDir%\. Esto significa que hace referencia a la carpeta raíz donde tenemos el menú.

          - Link URL/Enlaça URL: ya lo dice el nombre.
          - Send e-mail/Enviar mail: el nombre también habla por sí solo.
          - Minimize/Minimiza: acción para minimizar el menú.
          - Close/Cerrar: acción para cerrar el menú (obviamente útil para botones Exit).
          - Close – CD Eject/Cerrar – Expulsar CD: aparte de cerrar el menú también nos expulsará el CD (en principio).
          - Picture, Video, Flash Area/Área de Imagen, Vídeo, Flash: podremos indicarle que tipo de área será este botón. Útil para zonas del menú donde queramos que salga una imagen, una preview de vídeo, etc. al pasar el cursor por encima de algún elemento del menú (como por ejemplo por encima del botón de un capítulo).
          - Sub-menú: podremos indicarle que ese botón nos llevará a un submenú (nombre del cual deberemos indicarle en una casilla que aparecerá).

          Ahora hablaré un poco de las pestañas que aparecen en la parte central de la imagen:

- Acción: aquí deberemos rellenar los campos necesarios que nos indique el programa (carpeta a abrir, documento a cargar, nombre de submenú…).
- Fuente: podremos indicarle (en caso de que sea necesario) como queremos el formato de letra a usar.
- Sonidos: podremos cargar un archivo de audio (de hover i/o de clic) para cada uno de los botones.

          Nota: si queremos tener para todos los botones un sonido de Hover i Clic único no hará falta que los pongamos uno a uno. Esto lo haremos en Paso 4: Personalización.

- Información: nos permitirá cargar una nota de información al pasar por encima de un botón.
- Hover/Selección: nos permitirá añadirle funciones al botón al pasar el cursor por encima de él.
- Clic: nos permitirá añadirle funciones al botón al clicar encima del botón. Entraremos más en detalle al especificar que tipo de botón queramos hacer.
- Leave/Sin selección: nos permitirá añadirle funciones al botó al no tener el cursor encima del botón. Se usará sobretodo con las área de imagen que veremos más adelante.

          Ahora que ya hemos repasado por encima toda la galería de opciones que tenemos aquí centrémonos en como hacer los diferentes botones.

1. Botón de Exit

Este botón es el más senzillo, simplemente deberemos seleccionar la acción: Button action/Close y ya lo tendremos todo listo.



2. Botón de Music OFF

          Para tener un botón seguiremos los siguientes pasos (los cuales se podrán ver detallados en la siguiente imagen):
          [1] Button Action/None.
          [2] Ir a la pestaña Clic.
          [3] Añadir una nueva acción al hacer clic (en resumen clicar en Add).
          [4] Seleccionar de la lista desplegable la opción Music.
          [5] Clicar en la opción Stop y darle a OK.

          Cuando lo hayáis hecho todo veréis que os aparecerá en la lista de “On click do:” la de Music Stop.



3. Botón de Music ON

          Lógicamente será como el anterior pero cambiando el último paso.
          [1] Button Action/None.
          [2] Ir a la pestaña Clic.
          [3] Añadir una nueva acción al hacer clic (en resumen clicar en Add).
          [4] Seleccionar de la lista desplegable la opción Music.
          [5] Clicar en la opción Play y darle a OK.

          Cuando lo hayáis hecho todo veréis que os aparecerá en la lista de “On click do:” la de Music Play.



4. Botón simple de abrir un episodio

          En el botón deseado activaremos [1] Button Action/Execute… (como ya he dicho antes esto también podríamos hacerlo con Execute Media File). Nos aparecerán unas casillas que deberemos seleccionar de la siguiente manera:
          [2] En Select a file deberemos especificar donde tendremos la carpeta con los episodios (dentro del directorio raíz del menú), el nombre del episodio junto con la extensión (avi, mp4, mkv…).



          Vemos que nos aparece una opción que pregunta Close menú alter action?. Habitualmente seleccionamos que no ya que cuando nos ponemos a ver una serie nos estamos un rato delante de la pantalla y sería un rollo que el menú se nos cerrara cada vez que abrimos un episodio. Pero aún así, suponiendo que tengamos una música de fondo en el menú, vamos a querer que ésta se apague una vez empiece el capítulo, así pues deberemos hacer lo siguiente (básicamente haremos lo mismo que para el botón Music OFF. Como a partir de ahora esto lo haremos habitualmente lo llamaremos Quitar música de fondo al clicar un botón). Así que dejo la imagen y no hará falta que la explique ya que los pasos detallados están más arriba.



5. Botón para abrir un episodio con reproductor

          Éste es el método más habitual que he usado para abrir episodios (siempre que estén en .avi) desde un menú. La idea es ejecutar un reproductor predefinido que no necesite instalación (BSPlayer) que tendremos en la carpeta raíz del menú (os adjunto el programa con una lista de comandos que veremos más adelante). Usando unos parámetros haremos que el reproductor nos abra también el capítulo. Además, al usar este método, nos permitirá tener el episodio inicialmente en pantalla completa, hacer que el reproductor se cierre al finalizar el episodio entre varias otras cosas más. A continuación los pasos a seguir:

          [1] Button action/Execute…
          [2] Indicamos donde tenemos el reproductor a ejecutar (siempre debe estar dentro de la carpeta raíz del menú para poder compartirlo con otros usuarios): MenuDir%\Carpeta\Reproductor.exe
          [3] Indicamos donde tenemos guardados los capítulos en el apartado parámetros: ../Carpeta Episodios/”Episodio.avi” –parámetros del BSPlayer
          [4] Quitar música de fondo al clicar un botón.

          Nota: no es estrictamente necesario poner el nombre del capítulo entre comillas (salvo que este contenga espacios en cuyo caso sí que debemos ponerlo). Lo haremos para poder diferenciar mejor las diferentes partes de los parámetros a cargar.

          Nota: en la casilla parámetros podremos ponerle comandos del BSPlayer. Los más usados son (los guiones son necesarios):
          -fs: hará que el BSPlayer se abra en pantalla completa.
          -eend: hará que el BSPlayer se cierre al finalizar el episodio.

          Aquí tenéis una captura de cómo quedaría en la interfaz del QMB:



          Nota: como habéis podido comprobar este tipo de botón es para archivos en avi ya que el reproductor no incluye los códecs necesarios para cargar archivos mp4 o mkv. Si queréis hacer estos botones con estos archivos, en vez de usar el BSPlayer podéis emplear el MPlayer. La configuración que hay que poner en el QMB será exactamente la misma (obviamente cambiando los directorios de los archivos y sus extensiones).

6. Botón con área de imagen vinculado

          Este botón será aquel que al pasar el cursor por encima hará que en una parte del menú previamente seleccionada (ver Nota de Paso 2: Creación de botones). Este es uno de los efectos que más les gusta usar a los diseñadores en sus menús. Obviamente el área de imagen podrá ser lo que se os pase la cabeza, desde una imagen preview del capítulo o el nombre del episodio…
          Primero empezaremos con la creación del botón que hará de área de imagen:

          - Botón área de imagen:
                    Como ya hemos visto el Paso 2 crearemos un botón en la zona del menú donde queramos que aparezca nuestra imagen.
                    La configuración que hemos de darle a este botón es la siguiente:
                    [1] Sólo hará falta seleccionar Button action/Picture area



                   Como veis, no hace falta hacer nada más, todo lo demás lo haremos desde los botones encargados de abrir los capítulos.

           - Botón de episodio:
                   Para empezar a este botón le daremos las mismas funciones que los botones tipo 4 ó 5. Para hacer que nos aparezca la imagen “fantasma” tendremos que hacer las siguientes configuraciones:
           [2] Queremos que cuando pasemos el cursor por encima de este botón se nos aparezca, así que iremos a la pestaña Hover/Selección y haremos lo siguiente:
           [3] Le damos a Add/Añadir.
           [4] En la lista desplegable escogemos aquel botón que haga las funciones de Área de Imagen (en el caso del ejemplo mi botón se llama Área Imagen).
           [5] Seleccionaremos la opción Visible y cargaremos la imagen deseada. Lógicamente no seleccionaremos la imagen de nuestro disco duro, sino que pondremos un directorio dentro de la raíz del menú donde posteriormente guardaremos las imágenes. En concreto las guardaremos en la carpeta “src”, así que deberemos escribir el siguiente comando en la casilla Load an other image/Cargar en otra imagen: ..\src\Nombre_imagen.extensión.
           Una vez realizados todos estos pasos descritos antes veremos que en la tabla de On ‘hover’ do/En ‘selección’ hacer aparecerá la siguiente comanda: Nombre_botón_área_imagen/Show;Picture=..\src\Archivo_imagen.extensión



           Si dejáramos el botón con estas acciones veríamos que una vez cargada la imagen no se volverá a esconder. Así pues deberemos hacer que cuando el botón no esté seleccionado se vuelva a esconder. Para hacer esto posible iremos a la pestaña de Leave/Sin selección y haremos la siguiente configuración:
          [2] Le damos a Add/Añadir.
          [3] Escogemos de la lista desplegable el botón que hace la función deÁrea de imagen.
          [4] Deseleccionamos la opción Visible y la damos a Ok.
          Una vez realizados todos estos pasos veremos que en la tabla de On ‘leave’/Sin selección aparece la acción: Area_imagenàHide;Picture=Default.



         Ahora ya sólo hará falta realizar todos estos pasos en los botones que queramos. Veréis que este es el paso más largo que hay para hacer los menús, pero tiene la ventaja de que es algo totalmente mecánico así que no comportará ninguna dificultad cuando ya se lleven unos cuantos hechos.

7. Menú con botones que lleven a submenús

          Muchos menús incluyen un botón que permiten ir a un submenú (con una lista de los extras, los créditos, un submenú con los capítulos…). Como podréis comprobar no tienen ningún misterio. El primer paso será tener un botón el cual nos lleve a un submenú (en el ejemplo tenemos un botón que nos lleva a un submenú con los episodios). Los pasos a seguir serán los siguientes:

         [1] Button action/Sub-menu…
         [2] Le indicamos cual será el nombre del menú a llamar.



          Ahora ya sólo quedará crear un nuevo menú que haga las funciones de submenú. Para explicarlo usaremos opciones que aparecerán más adelante, pero que no supondrá ningún problema.
         [1] Creamos un nuevo archivo en el QMB
         [2] Creamos todos los botones, ponemos todas sus funciones, etc. tal y como haríamos con un menú normal.
         [3] Finalmente, el paso distinto al menú normal, será a la hora de exportarlo. En el último paso (Paso 5: Exportación del menú) deberemos indicarle que este nuevo proyecto se trata de un Submenú. Además tendremos que ponerle un nombre que será el que debe coincidir con el nombre que hemos puesto anteriormente en el menú principal.
         Finalmente, sólo queda exportar el submenú en la misma carpeta donde tengamos el menú principal.



          Nota: si desde un submenú queremos tener un botón que vaya al menú principal, debemos activar la acción de abrir un submenú ButtonAction/Submenu… y en el nombre del submenú deberemos poner un punto (.) tal y como se ve en la imagen adjunta.



Paso 4: Personalización

          En este paso lo que podremos hacer será darle efectos a nuestro menú. En la mayoría de los caso no me voy a explayar explicando ya que son cosas muy intuitivas. Veamos todas las pestañas que nos ofrece:

         - Sonidos: nos permitirá cargar archivos de audio para los diferentes tipos de eventos del menú:



         [1] Podemos abrir un sonido que sonará solamente al abrirse el menú.
         [2] Podremos cargar un sonido que suene cada vez que seleccionemos un botón.
         [3] Podemos abrir un sonido que sonará cada vez que cliquemos en un botón.
         [4] Podemos abrir una música para que suene de fondo en el menú. Si activamos la opción Loop/Bucle permitirá que una vez se haya acabado la canción empiece desde el principio.

          Nota: si estamos creando un menú con submenús y queremos que estos tengan la misma música de fondo, entonces en la personalización del submenú no pondremos ninguna música de fondo. Esto lo hacemos porque en caso de ponerla, la canción del menú principal (aunque sea la misma) durante la transición menú principal/submenú se pararía y volvería a empezar desde el inicio.

          - Icons: nos permitirá cambiar el cursor a utilizar en el menú, tanto el normal como el de selección. Además también podremos cargar un icono para el logotipo del Menú. El icono lo podremos ver una vez quemado el dvd. El resultado visible sería algo parecido a lo siguiente:



          - Hint/Información: nos permite cambiar las propiedades del panel de información (si lo hemos activado) que sale al pasar el cursor por encima de algún botón.
          - Transparency: permite crear un efecto de transparencia al abrir/cerrar el menú (Fade In/Fade Out). Podremos escoger el tiempo que tarde en abrirse/cerrarse. Además podremos escoger una opacidad para el menú.
          - Mode: podremos escoger entre tres modos diferentes de visualización del menú: tamaño de la imagen principal, con un borde de ventana o que se ponga en pantalla completa. Además también podremos escoger la posición donde queremos que aparezca el menú.
          - Splash: nos permitirá tener una imagen o vídeo introductorio antes del menú. Podremos escoger el tiempo que esté en activo y su opacidad.
          - Autor: nos permitirá añadir información personal sobre el autor del menú: nombre del diseñador, web, email y/o comentarios.

Paso 5: Exportación del menú

          Por fin el último paso de la creación de nuestro menú.
          [1] Escogemos el nombre que tenga nuestro menú. Si estamos guardando nuestro menú principal y queremos que al meter el dvd en el lector se abra el menú automáticamente, seleccionaremos la opción de Use this menú as CD-Autorun (Generate ‘auntorun.inf’ file).
          [2] Escogemos si se trata de un menú principal o de un submenú. En caso de ser un submenú le deberemos dar un nombre como ya vimos en los pasos de crear botones para menús con submenús.
          [3] Escogemos la carpeta donde queramos guardar nuestro menú principal. Si estamos guardando un submenú, recordad que hemos de guardarlo en la misma carpeta que tengamos el menú principal.
          [4] Finalmente exportamos. Además como último paso debemos recordar que en caso de haber usado áreas de imágenes, deberemos guardar las imágenes usadas en la carpeta “src”



          Aquí acaba el tutorial sobre QMB. Decir que el tutorial original fue creado por Mogu el 13/09/2009. Mi agradecimiento por su autorización para colocarlo en este foro.

          Si queréis tenerlo en PDF  podéis descargarlo desde aquí

Un saludo.

[riscking]

Gran trabajo, si señor!!! Espero que les sirva a muchos.

Un saludo.

[thalios]

Espero que con este gran trabajo la gente se anime a hacer menús!

Muchas gracias ronivenza

[VEGETA_Huelva]

hola wuenas, muy completo el tuto (supongo, ya es muy tarde y me esta sando morriña, y mañana lo estudiare).
el programa en cuestion de donde puedo descargarlo? y lo mas importante es freeware?
muchas gracias

[ronivenza]

Hola VEGETA_Huelva
El programa se puede conseguir en su web oficial y según pone hay una versión freeware.
Quick Menu Builder

Un saludo.

[VEGETA_Huelva]

Hola VEGETA_Huelva
El programa se puede conseguir en su web oficial y según pone hay una versión freeware.
Quick Menu Builder

Un saludo.

gracias, ahora mismo lo descargo