programando las imágenes

1. APRENDE A CREAR TU APP
EDUCATIVA
TEMA 3: Creando contenidos

2. Creando contenidos
• Vamos a empezar a crear contenidos para
nuestra app, para ello tengo que tener
abierto el programa de app inventor y el ppt
que quiero utilizar

3. Creando contenidos
• A continuación he de ir recortando cada una
de las diapositivas que voy a utilizar y las iré
guardando como imagen .
• Para ello seguiremos el procedimiento que
aprendimos en el tema 2 sobre como
recortar imágenes

4. Creando contenidos
• Utilizaré el programa que viene incorporado
en Windows que se llama recortes

5. Creando contenidos
• Seleccionaré ,cortaré y guardaré como
imagen la parte de la diapositiva que quiero
utilizar.

6. Creando contenidos
• Volvemos a la aplicación app inventor y
seleccionaré la pestaña “layout”

7. Creando contenidos
• Selecciono la segunda opción:

8. Creando contenidos
• Arrastraré hasta el centro de la pantalla :

9. Creando contenidos
• Y regresaré a la pestaña “interface” allí haré
clic en “image” y como hemos aprendido en
el tema 2, seleccionaré las imágenes que
quiero subir .

10. Creando contenidos
• Lo ideal es utilizar 3 imágenes por pantalla ,
ahora ya tenemos los 3 controles de imagen
listos .

11. Creando contenidos
• Seleccionaré ahora la pantalla 2

12. Creando contenidos
• Y allí la pestaña “scrollable “ y la marcaré,
que es la que me permitirá mover el cursor
de mi pantalla .Si no lo hago cuando abra mi
pantalla no podré desplazarme de una
pantalla a otra del app.

13. Creando contenidos
• Y relacionando cada una de las imágenes con
su control siguiendo este paso :

14. Creando contenidos
• Debo seleccionar esta propiedad que hará
que la imagen se ajuste al tamaño de la
pantalla .

15. Creando contenidos
• Finalmente iré a la pestaña de “buttons” y de
ahí arrastraré un primer botón a mi pantalla y
después , repetiré la operación para tener 2

16. Creando contenidos
• Haré clic en el primero y en la parte de texto
escribiré “next” ( siguiente ) y realizaré la
misma operación con el segundo botón al
que llamaré “back “ y me permitirá regresar a
la pantalla anterior

17. Creando contenidos
• Vamos a programar estos botones otra vez tal
como hicimos en el tema anterior . Así que
seleccionaremos la pestaña blocks e
iniciaremos el proceso

18. Creando contenidos
• Haremos clic en la pestaña “button 1”
entonces se abrirá un desplegable y de ahí
nos quedará la opción “When button one
opens ….. “ “cuando pulso el botón uno….”

19. Creando contenidos
• Hago clic ahora en la pestaña “control “ y se
abrirá otro desplegable y ahí seleccionaré
“another screen opens “ “se abre otra
ventana” Arrastraré esa pestaña hasta el
hueco del button 1

20. Creando contenidos
• Entonces seleccionaré “text” y se abrirá otro
desplegable

21. Creando contenidos
• Moveré la pieza del puzzle la encajaré en el
hueco y escribiré dentro “screen 3” para
indicar que al apretar en Next se abrirá la
pantalla 3 .

22. Creando contenidos
• Y ahora seguiremos el mismo proceso con el
botón 2 que recordad que decía “back “ para
atrás así que cuando escribamos hemos de
poner “screen 1”

23. GRACIAS
¿PREGUNTAS ?