Aravid

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

Scaleform: Creación del Interfaz II

Continuamos desde el tutorial Scaleform: Creación del Interfaz I, primero tenemos que buscar una imagen bonita para nuestro cursor. También podemos crear nuestro propio cursor utilizando las herramientas de Flash para dibujarlo. Yo voy a explicar el uso de una imagen porque requiere un proceso añadido, y así aprovecho para explicarlo.

En la carpeta donde hemos guardado el fichero, tenemos que crear una carpeta con el mismo nombre del fichero. En mi caso, al tratarse de un menú de pausa, he llamado al fichero “PauseMenu.fla” y como consecuencia, el nombre de la carpeta que tendría que crear, es “PauseMenu”, que es donde hay que colocar los ficheros que tenemos que utilizar, siempre en formato PNG. El cursor que voy a gastar es gracias a http://www.totallyfreecursors.com/ y antes de usarlo, hay que eliminar la zona blanca que lo rodea, para que sea transparente.

Ahora, a los pasos para importar imágenes:

  1. Archivo -> Importar -> Importar a la biblioteca.
  2. Importar un fichero a nuestra biblioteca

  3. Seleccionamos el fichero que hemos guardado en la carpeta que hemos creado anteriormente.
  4. Botón derecho -> Propiedades sobre la imagen que ahora se encuentra en la biblioteca.
  5. Activamos el tick de Permitir suavizado si se encuentra desactivado, y en el desplegable de Compresión, seleccionamos Sin pérdida (PNG/GIF).
  6. Activamos los dos ticks de Exportar para Actionscript y Exportar en fotograma 1, y en el campo Identificador, ponemos el nombre del fichero sin la extensión.
  7. A partir de ahora, cuando importemos la película en UDK, además del fichero, se añadirá una Texture2D por cada una de las imágenes que estén añadidas a la biblioteca.

    Ya disponemos de la imagen en nuestra biblioteca, los siguientes pasos nos indicarán cómo conseguir que esa imagen, se convierta en un cursor:

    1. Creamos una nueva capa, para que el cursor siempre se encuentre por encima del resto de elementos. Si la capa se crea por debajo de la actual, subirla para que se encuentre por encima de la capa donde hemos añadido los elementos anteriormente. También modificamos su nombre por “Cursor” y la seleccionamos.
    2. Arrastramos la imagen que hemos seleccionado para hacer de cursor a la zona de trabajo.
    3. Aspecto de la zona de trabajo, añadiendo el cursor

    4. Seleccionamos la imagen en la zona de trabajo, y botón derecho -> Convertir en símbolo.
    5. En la ventana que ha aparecido, seleccionamos en el desplegable de Tipo la opción de Clip de película, y en el campo Nombre escribiremos el nombre que aparecerá en la biblioteca para este nuevo símbolo, que será añadido automáticamente.
    6. En el panel de Propiedades, le damos un nombre de instancia, porque trabajaremos con él desde el Actionscript. En mi caso, lo llamaré “Cursor”.
    7. Ahora tenemos que crear una capa para albergar nuestro código de Actionscript, le damos el nombre de “Actionscript” y nos colocamos en la primera celda del mismo, y botón derecho -> Acciones. Esto nos abrirá el editor de Actionscript.
    8. Ahí, tenemos que copiar el siguiente código, que será el encargado de ocultar el ratón habitual, y colocar en su posición, nuestra imagen que representa el cursor.
      var cursorListener:Object = new Object();
      
      Mouse.hide();
      
      Cursor._x = _root._xmouse;
      Cursor._y = _root._ymouse;
      
      cursorListener.onMouseMove = function ()
      {
      	Cursor._x = _root._xmouse;
      	Cursor._y = _root._ymouse;
      }
      
      Mouse.addListener(cursorListener);

    Nota: Lo que realiza el código es ocultar el ratón por defecto, crear un Listener que cada vez que se mueva el ratón, invoque a la función que coloca nuestro cursor en la posición del ratón, y como último paso, registrar ese Listener.

    Ahora podemos probar por primera vez nuestro fichero, y comprobar que funciona.

    Me estoy aficionando demasiado a esto de los pasos numerados, continuamos:

    1. Si no utilizamos ratón, necesitamos que un boton tenga la propiedad de focused a true. La razón, es que al utilizar teclas, nos moveremos entre los botones con respecto al que esté seleccionado, y para seleccionar uno, tenemos que activar la propiedad focused. El botón que lo tenga da igual, pero será el que esté resaltado al lanzar la película. Nos vamos a la capa de Actionscript, y en la primera celda, volvemos a darle botón derecho -> Acciones, y al comienzo del editor, añadimos la línea
      Btn_Continue.focused = true;
    2. Ahora tenemos que crear los métodos que van a ser llamados cuando hagamos click en nuestros botones, de momento, los métodos estarán vacíos porque su contenido está relacionado con la comunicación con UDK y aún no hemos hablado sobre ello. Destacar que no se pueden pasar parámetros a estas funciones que se invocan al realizar alguna acción. Añadimos al final del editor el siguiente código.
      function btn_continue_click()
      {
      
      }
      
      function btn_exit_click()
      {
      
      }
    3. Bien, ya disponemos de los cuerpos, que serán llamados cuando hagamos click en nuestros botones. Ahora tenemos que añadir los EventListener a nuestros botones. Si conocéis Flash, este no es el método habitual de añadir la funcionalidad del click a un botón, y el proceso se hace como se ve en las siguientes líneas de código.
      Btn_Continue.addEventListener("click",this,"btn_continue_click");
      Btn_Exit.addEventListener("click",this,"btn_exit_click");

    A parte de click, también podemos añadir un EventListener con otros eventos, como un over, por si queremos realizar alguna acción especial cuando el cursor esté por encima del botón. Es tan fácil como crear un método que será invocado, y cambiar la cadena que especifica la acción que invoca el método. De hecho, para mostrar esto, vamos a añadir algo de funcionalidad a nuestro menú de pausa.

    1. Siguiendo los pasos que están en Scaleform: Creación del Interfaz I para clonar un widget, clonamos el Label que tenemos en la biblioteca, para así poder modificar las características de la fuente y que sea distinto al título de “Menú de Pausa”. Añadimos el nuevo widget y modificamos su nombre de instancia a “Lab_Info” y en el panel de propiedades, el textValue a “Seleccione alguna de las opciones”.
    2. La colocamos de forma que quede debajo de los botones, y centrada. Hay que hacerla de un tamaño suficiente para que las distintas cadenas que mostrará entren, o se cortarán.
    3. La utilidad de este label es cambiar su texto cuando nos encontremos encima de uno de los botones, mostrando la frase “Pulse Continuar para seguir con el juego” en el botón Btn_Continue y la frase “Pulse Salir para salir del juego” en el Btn_Exit, creamos nuevos métodos que tendrán el siguiente aspecto.
      function btn_continue_over()
      {
      	Lab_Info.text ="Pulse Continuar para seguir con el juego";
      }
      
      function btn_exit_over()
      {
      	Lab_Info.text ="Pulse Salir para salir del juego";
      }
    4. Ahora hay que crear un nuevo método, que será el invocado cuando dejemos de estar encima de alguno de los dos botones, que volverá a dejar la Label con el texto inicial de “Seleccione alguna de las opciones”. Lo conseguiremos creando un nuevo método que se encargue de este trabajo.
      function btn_rollout()
      {
      	Lab_Info.text ="Seleccione alguna de las dos opciones";
      }
    5. Ahora que tenemos los métodos, tenemos que añadir los EventListener, que quedarán tal como se muestra a continuación.
      Btn_Continue.addEventListener("rollOver",this,"btn_continue_over");
      Btn_Exit.addEventListener("rollOver",this,"btn_exit_over");
      Btn_Continue.addEventListener("rollOut",this,"btn_rollout");
      Btn_Exit.addEventListener("rollOut",this,"btn_rollout");

    Ya hemos terminado, ahora si probamos de nuevo el fichero con el FxMediaPlayer, si pasamos el ratón por encima de los botones, veremos cómo cambia el texto de este Label que hemos creado. Ahora a por el último paso, rellenar los métodos que se invocan al hacer click, y explicar cómo se comunica desde Actionscript con UDK Script.

    Antes de comenzar con los pasos, voy a hablar sobre el funcionamiento de la comunicación Actionscript -> UDK.

    Para poder reproducir una película Flash en UDK, debemos de crear una clase que hereda de GFxMoviePlayer y en ella, especificar la película y algunas de las características de la misma, como el tamaño y la alineación de la misma. En ese fichero podemos especificar métodos, y cuando desde el código de Actionscript se invoca uno, se busca en su clase y desde el método en UDK podemos realizar las acciones consecuentes.

    1. En la capa de Actionscript, con la primera celda seleccionada, entramos en botón derecho -> Acciones.
    2. Bajamos todo el texto una línea, y en la primera línea, que ahora estará libre, importamos una librería que nos hará falta para poder comunicarse con UDK.
      import flash.external.ExternalInterface;
    3. Rellenamos los métodos que teníamos vacíos conforme a lo siguiente. El método ExternalInterface.callrealiza una llamada al método cuyo nombre es el primer parámetro y le pasa unos parámetros que se especifican a continuación. Tenemos que tener preparado un método en la clase que se encarga de la película que acepte esos parámetros y realice alguna acción.
      function btn_continue_click()
      {
      	ExternalInterface.call("ExitMenu");
      }
      
      function btn_exit_click()
      {
      	ExternalInterface.call("ExitGame");
      }

    Si ahora probamos la pelícla con el FxMediaPlayer y hacemos click en alguno de los botones, en la ventana de consola que se abre, aparecerá una línea de color azul que nos informa de qué método se invoca y en el caso de tener parámetros, también.

    Prueba final de nuestro menú, completamente funcional

    En el siguiente tutorial explicaremos cómo crear una clase para que cargue una película, y se escribirán los métodos que se invocan al hacer click.

    Antes de terminar, voy a poner todo el ActionScript que tenemos en nuestro archivo

    import flash.external.ExternalInterface;
    
    var cursorListener:Object = new Object();
    
    Mouse.hide();
    
    Cursor._x = _root._xmouse;
    Cursor._y = _root._ymouse;
    
    cursorListener.onMouseMove = function ()
    {
    	Cursor._x = _root._xmouse;
    	Cursor._y = _root._ymouse;
    }
    
    Mouse.addListener(cursorListener);
    
    function btn_continue_click()
    {
    	ExternalInterface.call("ExitMenu");
    }
    
    function btn_exit_click()
    {
    	ExternalInterface.call("ExitGame");
    }
    
    function btn_continue_over()
    {
    	Lab_Info.text ="Pulse Continuar para seguir con el juego";
    }
    
    function btn_exit_over()
    {
    	Lab_Info.text ="Pulse Salir para salir del juego";
    }
    
    function btn_rollout()
    {
    	Lab_Info.text ="Seleccione alguna de las dos opciones";
    }
    
    Btn_Continue.addEventListener("click",this,"btn_continue_click");
    Btn_Exit.addEventListener("click",this,"btn_exit_click");
    Btn_Continue.addEventListener("rollOver",this,"btn_continue_over");
    Btn_Exit.addEventListener("rollOver",this,"btn_exit_over");
    Btn_Continue.addEventListener("rollOut",this,"btn_rollout");
    Btn_Exit.addEventListener("rollOut",this,"btn_rollout");
    Anuncios

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: