Crear un entrenador de idioma con App Inventor - Parte 2

Screen1

La pantalla 1 será usada como Splashconfiguramos algunas propiedades, como Alineación Vertical (AlignVertical) y Horizontal (AlignVertical), algunos efectos de apertura (OpenScreenAnimationy cierre (CloseScreenAnimation), su orientación (ScreenOrientation), que en nuestro ejemplo la fijamos a Vertical. Y por último las propiedades de dimensionamiento (Sizing) y título (Title)Los componentes usados se pueden apreciar en la imagen siguiente:

Fig. 1 Componentes Splash Screen

Usamos el componente Canvas, renombrado adecuadamente y el cual configuramos sin fondo y con dimensiones de alto y anchos iguales a la pantalla. También usamos tres componentes Sprite, los cuales llamaremos sprMy, sprTrainer y sprLogo. Una vez configuradas sus propiedades (Ver Vídeodebe tener la apariencia que se muestra en la fig. 2.

Fig. 2 Splash Screen

Los recursos para esta pantalla son imágenes para el título de nuestra aplicación y el logo correspondiente. Los asignamos a cada uno de los sprites, sin preocuparnos por ahora de la posición. También agregamos un componente reloj y configuramos su propiedad intervalo con el valor de 5000, es decir los 5 segundos de vida que tendrá nuestra pantalla Splash.

Paso 1. Manejador de eventos para Inicializar la pantalla 1

La funcionalidad de la pantalla Splash consiste en asignarle un color de fondo y ubicar adecuadamente cada uno de los tres sprites utilizados. Para el color de fondo (Screen1.BackgroundColor) utilizamos el esquema RGB (Rojo, Verde, Azul) con los valores de nuestro gusto. Aunque los sprites se ubican en el canvas con coordenadas X, Y y Z, para nuestro ejemplo solo usamos las coordenadas X e Y calculando las coordenadas X e Y de cada uno de nuestros sprites con la expresión aritmética:

X = (ancho del screen - ancho del sprite) / 2
Y = (alto del screen - alto del sprite) / 2

Fig. 3 Manejador de eventos para Screen1.Initialize

Paso 2. Manejador de Eventos para Canvas.Touched y Clock1.Timer

La segunda parte de la funcionalidad consiste en definir lo que hará cuando el usuario toque la pantalla, es decir el canvas y en caso de no tocarlo, lo que ocurrirá cuando transcurra un tiempo determinado. En ambos casos, se debe detener el temporizador y abrir la pantalla Trainer. Para ello creamos el procedimiento openTrainer y colocamos el bloque para abrir la pantalla Trainer y el bloque para desactivar el temporizador.

Fig. 4 Procedimiento openTrainer

Este procedimiento lo vamos a llamar en el evento Tocar del Canvas (Canvas.Touched), es decir, cuando el usuario toque la pantalla. También en el evento Timer del temporizador (Clock1.Timer), es decir, cuando transcurran los 5000 milisegundos configurados en él. Ver figura siguiente.

Fig. 5  Evento Canvas Touched
Fig. 6  Evento Clock1 Timer

Aquí te dejo el vídeo de la parte I



نموذج الاتصال