Programación del juego de colores en bombo

• Abril 28, 2024

En el tutorial anterior, importamos las imágenes para un juego de colorear para iBooks Author^R que estamos haciendo en Hype Pro. Ahora agregaremos los elementos interactivos al juego.

Abra su documento Hype y comencemos.

Nuestro primer paso es agregar una identidad a cada una de las capas que deben desaparecer al hacer clic. Esto incluye las capas de arte lineal para el cuerpo del pato, el ala y el pico. Al asignar a cada una de estas capas un ID de elemento único, podemos programar la visibilidad de estas capas con JavaScript.

1. Abra el inspector de identidad.
   
   
2. Seleccione la capa duck_body_line en la línea de tiempo principal.
   
   
3. En el Inspector de identidad, agregue una ID de elemento único. Usemos la ID de Cuerpo.
   
   
4. Seleccione la capa duck_wing_line y agregue Ala como ID de elemento único.
   
   
5. Seleccione la capa duck_beak_line y agregue Pico como ID de elemento único.
   
   

Ahora que las capas tienen ID de elementos únicos, podemos agregar la acción a estas capas. Utilizaremos JavaScript y la propiedad Display para controlar la visibilidad de estas capas. El valor predeterminado de la propiedad Display para una imagen es en línea, lo que significa que la imagen se muestra en el resto del HTML y no comienza en una nueva línea.

Para ocultar las imágenes, utilizaremos JavaScript para cambiar el valor de la propiedad de visualización de en línea a ninguna para cada una de las capas de arte lineal. Esto revelará las capas de relleno de color a continuación.

object.style.display = "none"

1. Abra el Inspector de acciones.
   
   
2. Seleccione la capa duck_body_line.
   
   
3. En la sección Al hacer clic con el mouse (Tap), haga clic en el ícono Más.
   
   
4. En el menú desplegable Acción, elija Ejecutar JavaScript.
   
   
5. Como se trata de un JavaScript personalizado, configure el menú desplegable Función en Nueva función. Esto abrirá una nueva ventana de pestañas con el código JavaScript predeterminado y una función llamada función sin título.
   
   
6. Cambiar el nombre de la función de Función sin título a Función del cuerpo. Verá que el nombre de la pestaña cambia a BodyFunction ().
   
   A continuación, agregaremos el código para establecer la propiedad de visualización en ninguna Para el Cuerpo elemento. Agregue el siguiente código en la línea vacía 5.
   
   hypeDocument.getElementById ("Body"). style.display = "none";
   
   
7. Vuelva a la ventana de la pestaña Escena sin título y seleccione la capa duck_wing_line.
   
   
8. Repita el paso anterior para cambiar el nombre de la función a WingFunction y agregue el siguiente JavaScript.
   
   hypeDocument.getElementById ("Wing"). style.display = "none";
   
   
9. Seleccione la capa duck_beak_line, cambie el nombre de la función a Función de pico y agregue el siguiente JavaScript.
   
   hypeDocument.getElementById ("Beak"). style.display = "none";
   
   Eso es. Probemos en el navegador. Si todo va bien, exporte el proyecto como un widget de autor de iBooks.
   
   
10. Desde el menú, haga clic en Archivo - Exportar como HTML5 - Panel de instrumentos / Widget de autor de iBooks.
    
    

Instrucciones De Vídeo: Aguaelulo - Aguaelulo Trío (Abril 2024).