Todas las apps suelen tener una pantalla de bienvenida con una imagen o logotipo que dura unos segundos hasta que se muestra el menú y la página principal del programa. Esta pantalla recibe el nombre de Splash Screen y es lo que vamos a crear hoy con App Inventor:

1.- Lo primero que necesitamos es tener un proyecto creado. Una vez lo tengamos, desplegamos la opción “Basic” que está en el menú de la columna de la izquierda y arrastramos un elemento “Canvas” dentro de nuestra pantalla.

Elemento canvas

Elemento canvas

2.- A continuación, lo seleccionamos en la columna de la derecha y modificamos sus propiedades “Width” y “Height” para que tengan el valor “Fill parent”. Además, en la propiedad “BackgroundImage” subimos el archivo de imagen que queremos (es importante que la imagen elegida ocupe toda la pantalla, de lo contrario no quedará bien) y nos aseguramos de que la propiedad “visible” tiene el valor “showing”.

Propiedades canvas

Propiedades canvas

3.- El siguiente paso es arrastrar “clock” de la columna de la izquierda dentro del menú “Basic” dentro de nuestra pantalla y cambiar su propiedad “TimerInterval” a los mili segundos que queremos que dure el splash screen. En mi caso yo pongo 5000.

Elemento clock

Elemento clock

4.- Ahora es momento de acceder al editor de bloques. Lo primero que haremos será ir a la pestaña “My Blocks”, coger el evento “screen.Initialize” y arrastrarlo al centro de la pantalla. Dentro introducimos los bloques de “canvas.Visible” y “clock.TimerEnabled” (cada uno los obtenemos desde su propia sección), y junto a ellos les indicamos el valor lógico “true” el cual podemos encontrar en la pestaña “Built-in -> Logic” o haciendo click con el ratón en cualquier sitio de la pantalla y seleccionando “logic -> true”.

5.- El ultimo paso consiste en programar el temporizador. Para ello cogemos el bloque “clock.Timer” de su propia sección y dentro, al igual que hemos hecho en el punto 4, añadimos los bloques “canvas.Visible” y “clock.TimerEnabled” pero esta vez indicaremos los valores “false”.

Bloques splash screen

Bloques splash screen

Con esto ya tenemos listo un splash screen muy básico. Ahora ya todo depende de la imaginación de cada uno para modificarlo a su gusto.

8 Thoughts on “Crear splash screen en App Inventor

  1. ¿Es posible que el splash screen se adapte a las distintas resoluciones móviles?.

  2. ivillarroel on 16 septiembre, 2013 at 9:57 said:

    Hola buenas,

    Si quieres asegurarte de que se va a ver en las distintas resoluciones móviles yo te recomiendo que hagas la imagen más grande y como le indicas que sea “fill parent” se ajustará al tamaño de la pantalla de cada dispositivo móvil.

    Espero que te haya servido.

    Gracias!

  3. guido on 17 marzo, 2014 at 4:14 said:

    usando el app inventor 2, no encuentro en blocks la opcion de “when screen initialize”

    • ivillarroel on 27 marzo, 2014 at 15:51 said:

      Hola guido,

      Antes de nada perdona la tardanza, supongo que ya habrás encontrado la solución pero bueno por si acaso la comento para quien tenga el mismo problema:

      En el App Inventor 2 para acceder a la opción de “when screen initialize” hay que hacer click en la pantalla sobre la que queremos programar. Se encuentra justo debajo de todos los distintos bloques de colores.

      Gracias

  4. Alenkar on 28 abril, 2014 at 5:58 said:

    Hola, ¿ésto sustituirá a lo que contenga la pantalla principal? Tengo un proyecto ya avanzado con muchos botones en la pantalla principal, pero no sé si el splash debe hacerse con la pantalla principal vacía, o se puede crear una pantalla extra para el splash y configurar que inicia ahí la app.

    • ivillarroel on 29 abril, 2014 at 12:11 said:

      Hola Alenkar,

      He estado mirando y no existe una opción para indicar a una pantalla que cargue esa como la primera. Lo que si puedes hacer es crear una nueva pantalla con el splash y en el editor de bloques sacar el bloque de “When Screen1. Initialize”, después añadirle el bloque “open another screen” indicandole el nombre de la pantalla donde tienes tu splash.

      No se si me he explicado bien, si tienes dudas me dices y te explico mejor y paso a paso si hace falta ok?

      Espero haberte ayudado.

      Gracias!

  5. hola me ayudas porfa jajaja mira yo Tengo un proyecto ya avanzado con botones en la pantalla principal, pero no sé si el splash debe hacerse con la pantalla principal vacía, o se puede crear una pantalla extra para el splash y configurar que inicia ahí la app. y no te entendi en el comentario pasado me lo pedes explicar paso a paso :)

    • ivillarroel on 29 noviembre, 2014 at 9:29 said:

      Hola lobo,

      La aplicación se inicia por defecto en la pantalla1, eso tiene que ser así. Para no tener que deshacer todo lo que ya tienes en esa pantalla, lo que puedes hacer es tener todos los objetos ocultos por defecto (en las propiedades de cada objeto lo puedes poner) )excepto el canvas que será donde aparezca la imagen. El proceso es el mismo, utilizas un temporizador (clock) para que se active nada más iniciar la pantalla1 y cuando termine ocultas el canvas y visualizas todos los objetos.

      No se si me he explicado bien. Si no es así me dices y te envío un email o algo para explicártelo mejor ok?

      Saludos!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Post Navigation

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies