Creación de una animación interactiva mediante la API de tiempo de ejecución de WebGL   

A continuación se incluye un tutorial paso a paso para ayudarle a empezar a trabajar con la API de tiempo de ejecución de WebGL de Flash para añadir interactividad a la animación. En este tutorial, empezará con un archivo FLA simple y utilizará la API para añadir instancias de clip de película al escenario.

  1. Descargue el archivo night_webgl.fla y ábralo en Adobe Flash Professional CC 2014. Puede ver que el archivo contiene una imagen de mapa de bits de un cielo nocturno en el escenario.

  2. Para probar la película, pulse CTRL+Intro (en Windows) o Cmd+Intro (en Mac). Una ventana de navegador mostrará el mapa de bits.

  3. Desplácese a la carpeta que contiene el archivo .fla. Tras la publicación, encontrará los siguientes archivos y carpetas:

    • El archivo night_webgl.html 
    • La carpeta “libs” que contiene la biblioteca JavaScript de tiempo de ejecución de WebGL
    • La carpeta “Recursos” que contiene los recursos necesarios para procesar la animación
  4. Vuelva a Flash Professional. En el panel Biblioteca, puede ver un clip de película “Star”, que contiene la animación de una estrella modulada con transparencia.  

  5. En el panel Biblioteca, haga doble clic en la columna “vinculación” junto al clip de película Star y escriba “star”. Este paso especifica el nombre de vinculación con el que se pueden crear instancias de este clip de película en tiempo de ejecución usando la API. También garantiza que este clip de película se publique incluso si no se utiliza en el escenario.

  6. Abra el archivo HTML y añada estas tres líneas después de la línea que contiene la etiqueta . Esta acción añade un botón al HTML y crea un marcador de posición para mostrar el número de estrellas creadas.





  7. Añada el código siguiente después de la función handleComplete ():

    var count = 0; function onAdd() { var sgf = player.getScenegraphFactory(); var star = sgf.createMovieClipInstance("star"); player.getStage().addChildAt(star, 0); var x = Math.random() * 540; var y = Math.random() * 180; var s = Math.random(); var mat = new flwebgl.geom.Matrix([s, 0, 0, s, x, y]); star.setLocalTransform(mat); count++; document.getElementById("count").innerHTML = count + (count > 1 ? " stars" : "star"); }

    Aquí suceden varias cosas:

    • La variable “player” hace referencia a una instancia del reproductor de WebGL y es la fachada de la API.
    • Se obtiene una referencia a SceneGraphFactory. Se utiliza para crear instancias de clip de película.
    • Se crean instancias de clip de película con la función createMovieClipInstance() y transfiriendo el nombre de vinculación especificado en Flash. 
    • Se obtiene una referencia al escenario (línea de tiempo raíz) del reproductor.
    • La nueva instancia de clip de película se añade como elemento secundario del escenario mediante la función addChildAt(). La transferencia de 0 a esta función añade el elemento secundario por encima del resto de elementos secundarios del escenario (por encima del mapa de bits).
    • La posición y el tamaño de la estrella se definen con la clase Matrix. 
  8. Guarde los cambios realizados en el archivo HTML.

  9. Para evitar que Flash sobrescriba los cambios realizados en el archivo HTML al publicarlo, desactive la casilla “Sobrescribir HTML” en el cuadro de diálogo Configuración de publicación.

  10. Vuelva a probar la película. Esta vez, el navegador muestra el botón Añadir por debajo de la imagen de fondo. Haga clic en Añadir varias veces para añadir estrellas en el escenario.

Nota:

Puede descargar el ejemplo finalizado aquí.

Descargar

night_webgl

Nota:

  • Como la animación de WebGL se procesa en un canvas dentro de HTML, puede modificar el HTML circundante. En este ejemplo, se contarán las estrellas creadas.
  • El ejemplo anterior se ha diseñado para que pueda empezar a crear animaciones y juegos interactivos. Visite la página de documentación de la API de tiempo de ejecución de WebGL para obtener más información sobre otras formas de controlar los elementos de su escena.
  • Al publicar contenido, Flash convierte la ilustración a un formato adecuado para GPU. Como requiere muchos cálculos, la tarea puede tardar unos minutos. Se recomienda minimizar el número de líneas y curvas de la ilustración. Si optimiza, suaviza y endereza las ilustraciones mediante las opciones del menú Modificar > Forma, podrá simplificar la ilustración. Esto ayuda a mejorar el rendimiento de procesamiento y reduce el tiempo de publicación.

Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea