Screen1
La pantalla 1 será usada como Splash y configuramos algunas propiedades, como Alineación Vertical (AlignVertical) y Horizontal (AlignVertical), algunos efectos de apertura (OpenScreenAnimation) y 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ídeo) debe 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) / 2Fig. 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