Vamos a crear una pantalla de carga para nuestras aplicaciones.

1. Lo primero que tenemos que hacer es crear un nuevo proyecto en App inventor.

2. Colocamos el nombre del proyecto y en este caso voy a seleecionar el tema clásico

3. En las propiedades de Screen1, seleccionaré ‘Centro’ para la alineación horizontal.

4. Agregamos el elmento reloj a nuestra pantalla. Al tratarse de un elemento invisible, se colocará abajo de la pantalla.

5. Configuramos el intérvalo de tiempo del reloj en 50.

6. Agregamos una imagen a nuestra pantalla.

7. Subimos una foto para mostrar en el elmento imagen.

8. Modificamos el ancho y el alto en las propiedades de la imagen.

9. Agreagmos tres arreglos horizontales

10. Modificamos el ancho de los arreglos horizontales de modo que el primero tengo un 60% del ancho de la pantalla, el segundo un 80% y el tercero un 60%.

11. Agregamos una etiqueta en el primer arreglo, un etiqueta en el segundo y dos etiquetas en el tercero.

12. Modificamos el texto de la primera etiqueta, cambiamos el tamaño a 32, estilo negrita y cambiamos el color.

13. En las propiedades del arrego horizontal, centramos.

14. Cambiamos el texto de la etiqueta que se encuentra en el segundo arreglo por una l minúscula.

15. Cambiamos el color de fondo del texto a negro.

16. Cambiamos el texto de la primera etiqueta del tercer arreglo por Cargando…

17. Cambiamos el texto de la segunda etiqueta del tercer arreglo por 0.

18. En las propiedades del tercer arreglo, centramos horizontalmente.

19. Agregamos una segunda pantalla

20. Regressamos a la primer pantalla.

21. Hacemos clic en Bloques

22. Vamos a crear un procedimiento llamado RestablecerCarga.

23. Hacemos clic en la segunda etiqueta del tercer arreglo y seleccionamos la propiedad de texto y lo ensamblamos en el bloque anterior.

24. Hacemos clic en los bloques de matemáticas y elegimos el bloque de número. Lo ensamblamos en el bloque anterior.

25. En los bloques de matemáticas buscamos una suma y lo insertamos donde está el cero.

26. Hacemos de nuevo clic en la segunda etiqueta del tercer arreglo y ahora seleccionamos el bloque que nos da el texto de la etiqueta y lo incertamos en la primera entrada de la suma.

27. El bloque de número que teniamos suelto, lo insertamos en la segunda entrada de la suma y cambiamos el 0 por un 1.

28. Duplicamos el procedimiento y cambiamos el nombre del nuevo procedimiento a AumentarAncho.

29. Cambiamos Texto por Ancho.

30. Cambiamos la suma por una multiplicación y el 1 por un 2.

31. Hacemos clic ahora en Screen1 y seleccionamos el evento que nos permite cargar procedimientos cuando la pantalla inicia. Ensambalamos el procedimiento de RestablecerCarga.

32. Ahora vamos a agregar los eventos al reloj.

33. Necesitamos agregar acciones para que ocurran cuando la carga aún no se ha completado y otras acciones para que ocurran para cuando la carga se ha completado. Vamos primero a agregar cuando la carga está en proceso. Si la carga está en proceso, entonces el texto de la segunda etiqueta del tercer arreglo debe de ser menor a 100, por lo que agregmos la siguiente condición.

34. Ahora nos falta agregar las acciones que ocurrirán cuando no se cumpla la condición. Es decir, cuando la carga se complete. Para ello vamos a crear un procedimiento llamada AbrirPantalla2. vamos a ir los bloques de control y vamos a seleccionar el bloque que nos permite abrir otra pantalla. Lo vamos a ensamblar y vamos a seleccionar Screen2. Finalmente vamos a insertar ese procemiento en else de nuestro bloque anterior.

35. Finalmente corregimos un error.