Aravid

Tutoriales, Gamer Sense, opinión y más

Scaleform: Creación del Interfaz I

Ahora que ya sabemos qué tenemos que hacer para crear un fichero, vamos a continuar con el siguiente aspecto: la creación de un interfaz en Flash para poder integrarlo en UDK.

Advertencia: Mi intención no es hacer un tutorial de Flash y Scaleform, sino sólo de Scaleform. Así que asumo que al menos, conocéis algo de Flash, como dónde están los paneles y algunas de las opciones más utilizadas, porque no entraré en detalle en algunos aspectos como dónde se encuentra el panel de propiedades o cómo mostrar la biblioteca.

Abrimos el fichero que vamos a utilizar para crear el interfaz, y lo guardamos como se comentaba en el artículo de UDK: Estructura de carpetas en \UDKGame\Flash\Nombre_Package sustituyendo el Nombre_Package por el nombre del paquete de assets al que queremos añadir el fichero de Flash, porque al importar la película, no podemos seleccionar a qué paquete lo añadimos, lo hace directamente en uno con el nombre de la carpeta en la que se encuentre. Para mantener la nomenclatura de todos los ficheros yo lo hago en \UDKGame\Flash\DCleanerAssets.

Ya tenemos el fichero guardado y, a continuación, tenemos que abrir en otra pestaña el fichero “CLIK_Components.fla” que se encuentra en \Development\Flash\CLIK\components. Ahí tenemos en la zona de trabajo todos los elementos preparados para trabajar directamente con ellos. Mi recomendación es la siguiente:

  1. Cogemos el elemento que nos interese de la biblioteca y botón derecho -> Copiar.

    Hemos seleccionado Button, y botón derecho -> Copiar

  2. En nuestro fichero, en la biblioteca, botón derecho -> Pegar.

    Ahora, en la biblioteca de nuestro archivo, botón derecho -> Pegar

Ahora, en nuestra biblioteca tenemos el widget, que para entendernos, es como tener la clase del botón. Cuando queramos añadir un botón, arrastramos el widget de la biblioteca a la zona de trabajo y le damos un nombre de instancia para poder identificarlo en el código.

Es importante destacar que si añadimos varias veces el mismo widget, aunque cada uno tenga un nombre de instancia distinto y actúe de manera independiente a nivel de código, si modificamos el aspecto del widget, todas las instancias del mismo serán modificadas a dicho aspecto. Para evitarlo, se puede realizar lo siguiente.

  1. Botón derecho -> Duplicar en la biblioteca sobre el widget que queremos duplicar. Por desgracia, algunos aspectos del widget no se duplican al realizar este proceso y hay que hacerlo a mano.

    Botón derecho sobre el widget a duplicar, y en el menú contextual, seleccionamos Duplicar

  2. Botón derecho -> Propiedades sobre el widget original y ahí copiamos el contenido del campo Clase.

    Propiedades del widget Botón que hay en la biblioteca

  3. Por último, botón derecho -> Propiedades sobre el widget duplicado, y en el campo Clase, que estará en blanco, copiamos el valor que hemos copiado anteriormente. En el campo de Nombre seleccionamos un nombre que será el mostrado en la biblioteca, para diferenciarlo de otros widgets, y activamos los dos ticks que están desactivados.

    Ejemplo de cómo debe de quedar la ventana de Propiedades de un Botón duplicado

Ahora que ya sabemos cómo conseguir los widgets necesarios para hacer nuestra interfaz, vamos a realizar una interaz de ejemplo, como puede ser un menú de pausa, con un Label y dos Buttons. Detallo el proceso y añadimos también la incrustación de las fuentes:

  1. Traemos un widget de Label del CLIK_Components a nuestra biblioteca.
  2. Traemos un widget de Button del CLIK_Components a nuestra biblioteca.
  3. Cambiamos el nombre de la capa que hay por uno que nos permita identificarla más fácilmente, como “Menú”
  4. Arrastramos a la parte superior el widget de Labe, y en el panel de propiedades de la instancia, en el campo de “text”, ponemos “Menú de pausa”. Es normal que el texto no cambie en la zona de trabajo, el cambio se verá cuando probemos la película.
  5. Arrastramos dos botones, que centraremos, y en el panel de propiedades, en el cuado de “Nombre de Instancia” ponemos un nombre para poder acceder a él desde el Actionscript. Yo voy a poner “Btn_Continue” a uno y “Btn_Exit” al otro. En el mismo panel, en “label”, ponemos “Continuar” y “Salir”.

    Así debería de quedar el botón de Continuar. El botón de Salir es similar, cambiando los valores de los campos en rojo

  6. Ahora si probamos la película usando el botón de “Test with FxMediaPlayer” como comentaba en el tutorial de configuración de Flash, veremos que las fuentes no funcionan correctamente (salen cuadraditos en vez de los caracteres), esto es porque no hemos incrustrado la fuente. Hacemos click en Texto -> Incrustación de Fuente.

    No se entiende nada de nada, parece escrito en Quenya

  7. Pulsamos en el “+” y seleccionamos la fuente que acabamos de crear. Ahora en el panel de la derecha podemos elegir la fuente y el estilo de la fuente.

    En la fuente que añadiré, seleccionaré la Trajan Pro, de estilo Regular, como muestra la imagen

  8. No es lo más recomendable, pero si no queréis tener problemas con los caracteres, podéis seleccionar de los rangos de caracteres, que incluya todos. Una mejor optimización sería Latín Base, Signos de puntuación y añadir a mano las vocales con tílde y la ñ en el cuadro dedicado a ello.

    En la imagen muestro la opción rápida y sucia, que es el incrustado de todos los glifos. Viviendo al límite

  9. Ya tenemos la fuente, ahora tenemos que especificar en nuestros widgets que tienen que utilizar esta fuente. Vamos al panel de biblioteca, botón derecho en el widget a modificar y a Editar.
  10. Seleccionamos la capa que contiene el texto, y la desbloqueamos (viene bloqueada por defecto). 
  11. Seleccionamos el texto y en el panel de propiedades debe de aparecer un desplegable para seleccionar la fuente. En él, seleccionamos la fuente que hemos creado. En este panel también podemos seleccionar el formato, yo especificaré que los textos estén centrados.

    Hacemos click en el desplegable, y a continuación, en nuestra fuente

  12. Ahora debemos repetir desde el paso 9 con cada uno de los widgets que tengamos en la biblioteca. Podemos crear varias fuentes para asociar a cada widget una fuente distinta, pero recordar que todas las instancias del mismo widget reflejaran los cambios.
Aviso: Al modificar la fuente, hay que tener en cuenta en qué rango de fotogramas lo modificamos. En el botón, por ejemplo, la fuente tiene 2 rangos, uno que es cuando el botón está en reposo, el cursor está sobre él y pulsado, y otro rango que es con el botón desactivado. Si vamos a tener en algún momento el botón desactivado, tendremos que seleccionar un fotograma de dicho rango y modificar la fuente ahí también.

Ya tenemos el esqueleto de nuestra interfaz con sus dos botones, y una etiqueta que nos informa que nos encontramos en el menú de pausa.

Mucho trabajo para tan poca cosa, ¿verdad?

Con algo de imaginación, podemos realizar casi cualquier tipo de interfaz. Pero ahora tenemos un problema, y es que no tenemos una manera de darle a los botones, necesitamos un puntero para poder hacer click en ellos. Este será nuestro siguiente paso. Lo veremos en el siguiente tutorial.

Anuncios

Una respuesta a “Scaleform: Creación del Interfaz I

  1. Pingback:Scaleform: Creación del Interfaz II « Aravid

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: