Activa JavaScript para disfrutar de los vídeos de la Mediateca.

03.03 Catrobat, escenas

Ajuste de pantalla

El ajuste de pantalla se aprecia al ver el vídeo en pantalla completa. Elige la presentación que más te guste:

Subido el 16 de junio de 2015 por tic.ismie

28 visualizaciones

Catrobat, escenas

Más información Transcripción

Descargar la transcripción

El procedimiento general para crear una app podría dividirse en las siguientes fases. 00:00:05

En primer lugar, tendríamos que concebir la aplicación, es decir, sentarnos con lápiz y papel, o bien con un editor gráfico, o bien con una aplicación específica de prototipado de aplicaciones, 00:00:10

para pensar, por un lado, cómo queremos que sea nuestra aplicación, es decir, su interfaz de usuario, y cómo queremos que se comporte, es decir, su guión multimedia. 00:00:19

A continuación pasaríamos a obtener los activos necesarios para desarrollar esta aplicación. Los activos son las imágenes, los textos, los vídeos y los sonidos que participarán en la aplicación. 00:00:27

En principio no es necesario utilizar desde el primer momento los activos finales sino que podemos trabajar con activos en fase de boceto y en el último paso del desarrollo incorporar los activos finales. 00:00:39

Sin embargo, sí suele ser aconsejable utilizar activos que sean lo más parecidos posibles a los finales, para tener una impresión más real de cuál será el aspecto final de nuestra aplicación. 00:00:50

A continuación, pasaríamos a componer las escenas, que consiste en colocar esos activos en las distintas escenas que compondrán la aplicación. 00:01:00

Generalmente, las aplicaciones se componen de una escena de presentación, otra de instrucciones, varias de desarrollo y posiblemente una de finalización. 00:01:09

En este video tutorial concretamente vamos a ver cómo desarrollar escenas con Pocket Code. 00:01:17

A continuación asignaríamos programas a los activos para definir su comportamiento. 00:01:23

Y después, aunque he colocado aquí la depuración, en realidad es un paso que deberíamos ir realizando constantemente durante el desarrollo de la aplicación, 00:01:28

en todo momento para comprobar que efectivamente la aplicación se comporta como nosotros deseamos. 00:01:36

Es más, si estuviera a nuestro alcance, convendría que pasásemos esta aplicación en fase de desarrollo a otras personas para así poder obtener su opinión. 00:01:41

Y por último, pasaríamos a distribuir la aplicación. 00:01:50

En este videotutorial vamos a desarrollar una aplicación muy sencilla con Pocket Code que está compuesta por varias escenas. 00:01:53

En la primera escena, que es esta que estamos viendo, se ofrecen dos opciones, carnívoros y herbívoros. 00:01:59

cuando el usuario hace clic sobre una de ellas se pasa por ejemplo en el caso de carnívoros a la 00:02:03

siguiente escena que lo que hace es animar este rótulo hacia la zona superior esta sería la 00:02:08

segunda escena y a continuación se muestra la tercera escena que es la que estamos viendo ahora 00:02:12

mismo en ella aparecen varios animales y cuando el usuario hace clic sobre uno de ellos se muestra 00:02:16

su nombre al hacer clic sobre otros se muestra su nombre y desaparece de la anterior esta sería la 00:02:21

tercera escena si se pulsa el botón volver regresamos nuevamente a la escena 1 si ahora 00:02:26

selecciono herbívoros estaríamos viendo ya la cuarta escena que es la animación de este segundo 00:02:31

rótulo y aquí tendríamos la quinta escena en la cual se muestran los animales herbívoros que tiene 00:02:36

exactamente el mismo funcionamiento que el anterior. Para hacer clic sobre un animal se muestra su 00:02:41

nombre, para hacer clic sobre otro se muestra el suyo y desaparece el del anterior. En este caso ya 00:02:45

tengo claro cómo quiero que sea y cómo quiero que se comporte mi aplicación así que voy a pasar 00:02:50

directamente a obtener los activos. Para ello voy a ejecutar el navegador web de mi dispositivo y con 00:02:55

él voy a acceder a la página web www.openclipart.org. En esta página web podemos obtener imágenes 00:03:01

de dominio público. Voy a empezar por obtener la del cocodrilo, para ello voy a escribir 00:03:13

cocodrilo en inglés y voy a añadir cartoon, que sería cocodrilo de dibujos animados o 00:03:17

de caricatura. Al hacer clic se me van a mostrar varias imágenes y la que yo voy a utilizar 00:03:24

por ejemplo es esta. Hago clic sobre ella, se muestra la imagen y si me desplazo hacia abajo en la zona inferior encuentro varias posibilidades de descargarla. 00:03:28

Yo voy a descargarla en tamaño pequeño. Generalmente la descargaría haciendo clic simplemente y el dispositivo la descargaría. Sin embargo en este caso voy a mantener 00:03:37

el dedo pulsado sobre esa opción para que se muestre este menú contextual porque mi navegador es capaz de mostrar estas imágenes PNG de tal modo que no me la descargaría 00:03:46

sino que directamente la mostraría, para descargarlo entonces selecciono la opción guardar enlace y de esta forma vemos aquí arriba que ya se ha descargado esta imagen, de igual forma procedería para el resto de las imágenes, voy a hacer una segunda por ejemplo en la zona superior voy a escribir en este caso por ejemplo Lion Cartoon, aparecen varios, yo voy a elegir por ejemplo utilizar este, 00:03:55

nuevamente en la zona inferior encuentro las opciones de descarga 00:04:22

mantengo el dedo pulsado sobre la opción pequeña 00:04:27

selecciono la opción guardar enlace 00:04:29

y de esta forma ya se ha descargado a mi dispositivo 00:04:31

voy a descargar el resto de las imágenes 00:04:34

y esto lo pasaré a cámara rápida 00:04:36

y voy a descargar ya la última de ellas 00:04:38

la cebra, hago clic sobre ella 00:05:19

y en la zona inferior igual que las anteriores 00:05:26

elijo descargar la opción pequeña 00:05:28

manteniendo el dedo pulsado sobre ella 00:05:31

y seleccionando la opción guardar enlace. 00:05:32

De esta forma ya he descargado todas las imágenes que voy a necesitar a mi dispositivo 00:05:35

y voy a pasar ya a Pocket Code para iniciar el desarrollo de la aplicación. 00:05:39

Lo primero que haré en Pocket Code es desde la interfaz inicial 00:05:44

indicar que quiero crear una aplicación nueva. 00:05:48

Aquí indico mediante nuevo que voy a aplicar crear un programa nuevo, 00:05:52

lo voy a llamar carnívoros herbívoros y voy a mantener pulsada la opción crear un programa vacío 00:05:57

para que no se añada ningún activo a este programa pulso el botón ok y de esta forma obtengo un fondo 00:06:07

vacío y la lista de objetos también vacía además de las imágenes que he obtenido de openclipart.org 00:06:14

voy a necesitar otros activos los otros carnívoros y herbívoros y el botón volver estos activos los 00:06:20

voy a crear con una aplicación que he instalado previamente que se llama Pixate. El problema de 00:06:26

esta aplicación es que su versión gratuita no permite crear imágenes sino solamente abrir 00:06:30

imágenes que hayan sido creadas previamente. De tal forma que tendré que crear esas imágenes por 00:06:34

ejemplo aquí en Pocket Code utilizando la herramienta Pocket Paint y a continuación 00:06:39

modificarlas en Pixate. Voy a empezar creando el rótulo carnívoros. Para ello hago clic en este 00:06:43

signo más para indicar que quiero crear un activo nuevo. Indico que lo voy a dibujar directamente 00:06:49

con pocket pen y se muestra la interfaz inicialmente transparente de la imagen que estoy creando. 00:06:53

Podría mantener este fondo transparente, pero en realidad existe un fallo en 4W que hace que este fondo transparente 00:07:00

se muestre de color negro en algunos dispositivos. Por eso en este caso voy a preferir elegir un color de fondo 00:07:06

y utilizarlo en todas las imágenes. Para ello voy a llenar esta imagen, para ello selecciono aquí la herramienta llenar 00:07:12

y a continuación voy a elegir como color de fondo mediante la paleta este tono de azul, pulso listo y a continuación hago clic en el interior de esta imagen. 00:07:19

Este va a ser el fondo que voy a utilizar en todas las imágenes de mi aplicación. 00:07:30

A continuación voy a exportar esta imagen, para ello accedo al menú contextual y elijo exportar de tal forma que la imagen quede guardada en la galería del dispositivo. 00:07:35

De este modo ahora cuando regrese a Pixay, es esta aplicación, podré obtener una imagen Get a Picture y aquí voy a indicar que quiero obtenerla de la galería y además de las imágenes que he descargado previamente de los animales me encuentro con ese fondo vacío que acabo de crear. 00:07:44

Hago clic sobre él y lo que hace Pixate es abrir esa imagen y ofrecerme aquí en la zona inferior opciones para aplicarle efectos y añadirle motivos. 00:08:04

Yo voy a seleccionar esta opción, Sticker, y lo que voy a hacer es indicar que quiero crear aquí un título. 00:08:14

Ofrece varias opciones de formato, voy a elegir por ejemplo esta de aquí y voy a escribir aquí el texto, Carnívoros. 00:08:24

haciendo clic sobre el propio texto tenemos la opción por ejemplo de cambiar los colores 00:08:31

yo voy a cambiar el color amarillo del relleno lo voy a cambiar por ejemplo por un tono anaranjado 00:08:40

pulso set color y ahora pulso la marca de verificación que hay arriba a la derecha para indicar que ya he terminado 00:08:46

y de esta forma tengo ya el rótulo creado y voy a pulsar el botón export para exportar esta imagen a un álbum 00:08:55

De esta forma la imagen quedará almacenada en la galería de mi dispositivo móvil. 00:09:03

Y a continuación voy a sustituir este carnívoros por herbívoros. 00:09:08

Para ello pulso dos veces sobre él, aparece el menú contextual en el que selecciono Edit. 00:09:12

Hago clic para cambiar el texto, lo borro inicialmente y escribo en su lugar herbívoros. 00:09:18

En este caso voy a hacer clic sobre el texto para cambiar el color de relleno a un tono de verde, 00:09:29

por ejemplo ese, pulso set color, confirmo con la marca de verificación de arriba a la derecha y nuevamente exporto esta segunda imagen a un álbum para tenerla disponible en mi galería de imágenes. 00:09:34

A continuación ya puedo regresar a Pocket Code, hago clic sobre el botón aplicaciones utilizadas recientemente, selecciono Pocket Code y lo que voy a hacer aquí es importar solo uno de los rótulos. 00:09:51

¿Por qué voy a importar solo uno? 00:10:04

Porque en realidad ambos van a tener un comportamiento muy similar. 00:10:05

De tal forma que lo que voy a hacer es completar uno de ellos, 00:10:09

a continuación duplicarlo y cambiarle solamente la apariencia, 00:10:13

de tal forma que pueda aprovechar su código. 00:10:16

Hago clic sobre el signo más, indico que quiero seleccionar una imagen 00:10:19

y por ejemplo voy a elegir la imagen del rótulo carnívoros. 00:10:22

Lo selecciono, le asigno el nombre a este objeto de carnívoros 00:10:26

y pulso el botón OK. 00:10:31

Ahora, Pocket Code me sugiere que empiece a añadir programas a este activo, 00:10:35

pero antes de eso se los voy a añadir al fondo. 00:10:39

Para ello, regreso a la página anterior y aquí selecciono el fondo. 00:10:41

Y en primer lugar, al fondo le voy a añadir una apariencia dibujando una imagen 00:10:47

que va a ser simplemente el mismo fondo completamente de color azul. 00:10:52

Selecciono aquí la herramienta llenar. 00:10:57

A continuación con la paleta selecciono el mismo tono de azul que he utilizado anteriormente, pulso listo y hago clic en cualquier posición. 00:10:59

Esta imagen tiene el centro de coordenadas en esta posición y las ordenadas cuentan hacia arriba hasta 552, hacia abajo hasta menos 552, a la derecha hasta 360 y a la izquierda hasta menos 360. 00:11:08

esto va a ser importante porque cuando yo quiera colocar los rótulos sobre este fondo por ejemplo el de carnívoros lo colocaré ligeramente por encima del centro por ejemplo en la ordenada 100 pulso que quiero regresar a pocket code me va a preguntar si quiero guardar los cambios selecciono guardar y ya tengo esa apariencia ahí guardada 00:11:24

ahora regreso a las propiedades de este objeto y voy a ir a líneas de comandos 00:11:47

en líneas de comandos lo que voy a hacer es pedir que cuando se inicie la aplicación 00:11:53

el fondo establezca una variable que voy a llamar escena con el valor 1 00:11:58

y que además envíe un mensaje a todos los objetos que sea el mensaje cambiar escena 00:12:03

esta es la forma de organizar las escenas en Pocket Code 00:12:09

los demás objetos recibirán el mensaje cambiar escena 00:12:13

y consultarán el valor de la variable escena para saber si deben mostrarse u ocultarse. 00:12:16

Hago clic sobre el signo más para iniciar este programa y en la categoría de control elijo el oyente de evento cuando comience el programa. 00:12:22

A continuación nuevamente sobre el signo más y también en la categoría de control voy a indicar que quiero difundir un mensaje. 00:12:30

Hago clic aquí y coloco este bloque debajo. 00:12:39

El mensaje que voy a difundir es un mensaje nuevo por lo que despliego este menú, selecciono nuevo y voy a escribir que el mensaje quiero que se llame cambiar escena. Esto es un nombre que yo elijo porque me gusta, no tiene ninguna motivación, puede llamarse de cualquier otra forma. Pulso ok y ya por último nuevamente en el signo más y en la categoría de variables voy a indicar que quiero establecer una nueva variable. 00:12:42

Este bloque en realidad lo voy a colocar antes de difundir el mensaje, despliego el nombre de la variable para indicar que quiero crear una variable nueva que la voy a llamar escena y que va a estar disponible para todos los objetos, es decir, va a ser una variable global. 00:13:05

Pulso el botón ok y a continuación en el dato para hago clic, aparece la calculadora, pulso 1 para indicar que quiero que inicialmente el valor de la variable escena sea 1. 00:13:20

Pulso ok para confirmar y ahora ya puedo regresar al listado de objetos y preocuparme del rótulo de carnívoros. 00:13:33

Lo primero que voy a hacer es recortarlo verticalmente para que no ocupe todo el fondo. 00:13:41

Para ello hago clic sobre él y en la sección apariencias hago clic nuevamente para acceder a su edición con Pocket Paint. 00:13:46

Aquí selecciono la herramienta recortar imagen y arrastro tanto por arriba como por abajo para reducir el tamaño de este rótulo. 00:13:55

Una vez hecho esto, confirmo el recorte con este icono y regreso a Pocket Code. Guardo los cambios y ahora regreso a las propiedades del objeto y me preocupo ya de sus líneas de comandos. 00:14:10

En este rótulo voy a crear dos programas, uno que se preocupe de escuchar el evento cambiar escena y otro que actúe cuando el usuario haga clic sobre este rótulo. 00:14:27

comienzo haciendo clic sobre el signo más y en la categoría de control selecciono el oyente de evento 00:14:37

y cuando reciba un mensaje aquí el mensaje ya está configurado como cambiar escena y lo que tendré 00:14:43

que hacer es decir que si la escena tiene el valor 1 o el valor 2 el valor 1 es la página inicial y 00:14:49

el valor 2 es en el que se ve el rótulo de carnívoros desplazándose hacia arriba pues si 00:14:56

tiene el valor 1 o 2 lo que quiero es mostrar este activo y en caso contrario quiero ocultarlo 00:15:00

Para ello voy nuevamente a la categoría de control y elijo en este caso un bloque de tipo sí, lo coloco debajo del anterior y lo que voy a hacer es configurar la condición, la condición la voy a configurar con variables indicando que quiero que si la escena es igual a 1 o bien voy a la categoría lógica, selecciono o, nuevamente a variables, la escena es igual a 2, pulso ok para confirmar. 00:15:05

Lo que quiero es mostrarlo. Pulso el signo más, voy a apariencias y en apariencias selecciono el bloque mostrar y lo coloco justo ahí. 00:15:33

Y en caso contrario lo que deseo es ocultarlo. Selecciono el signo más, nuevamente en apariencia, selecciono ocultar y coloco ocultar en la rama en caso contrario. 00:15:40

Nuevamente el signo más para el segundo programa. En este caso en la categoría de control selecciono la opción cuando pulse. 00:15:52

Lo coloco abajo del todo y lo que quiero es que cuando se pulse este objeto si acaso nos encontramos en la escena 1 lo que quiero es que el objeto se anime hacia arriba y además se pase a la escena 2. 00:15:58

Para ello voy nuevamente a la categoría de control selecciono un nuevo bloque de tipo sí lo coloco debajo de ese oyente de evento y en la condición voy a indicar que si la variable escena tiene el valor 1 lo que yo deseo es que ese objeto se anime hacia arriba. 00:16:12

Para ello lo que voy a hacer es en esta categoría de movimiento voy a indicar que quiero deslizarlo aquí dentro de la primera rama del sí, quiero deslizarlo en aproximadamente dos segundos hasta las coordenadas 0 para la x y vamos a poner aproximadamente 525 para la y que sería prácticamente arriba del todo. 00:16:35

pulso ok y además de esto lo que tendremos que hacer es cambiar el valor de escena 00:17:13

en este caso ya pasaríamos cuando hubiera terminado el deslizamiento a la escena tercera 00:17:22

en la que se muestran los animales carnívoros y enviar el mensaje de cambiar escena 00:17:27

de tal forma que en el signo más variables indico que quiero establecer la variable 00:17:32

lo coloco ahí debajo una vez terminado el deslizamiento la variable escena al valor 3 00:17:37

ok y de nuevo con el signo más en la categoría control voy a difundir el mensaje cambiar escena para que el resto de los objetos sepan que se ha cambiado la escena en la rama caso contrario no voy a hacer nada y ya por último lo que me faltaría es en la zona superior discriminar que si la escena es uno no solamente quiero mostrarlo sino que además quiero que se coloque en una posición centrada 00:17:43

para ello selecciono el icono más en la categoría de control voy a elegir nuevamente un bloque de tipo sí 00:18:08

y ese bloque lo voy a colocar justamente por encima del mostrar de tal forma que tengo este bloque sí anidado dentro del anterior 00:18:15

aquí me he preguntado si la escena es 1 o es 2 y aquí me voy a preguntar que si es 1 para ello voy a modificar esa condición 00:18:23

en variables voy a indicar que si la escena es 1, pulso ok, lo que quiero hacer en ese caso es colocar el activo aproximadamente en el centro, para ello con el signo más 00:18:31

en la categoría de movimiento selecciono la opción coloque x y y lo voy a colocar ahí en la rama así y lo voy a colocar en las coordenadas aproximadamente 0 para la x 00:18:42

6 y 100 para la i. Pulso ok y ahora vamos a ver la importancia de ir depurando la aplicación al 00:18:54

mismo tiempo que la vamos creando. Si yo hago clic aquí para probar esta aplicación vemos que 00:19:03

aparentemente todo va bien. Aparece el rótulo de carnívoros y al hacer clic sobre él inicia su 00:19:08

animación pero resulta que al final desaparece. ¿Por qué desaparece? Pues desaparece porque lo 00:19:13

que está haciendo es establecer la escena 3 pero nosotros solo nos hemos preocupado de que el rótulo 00:19:19

esté visible en las escenas 1 y 2, de tal forma que nos falta algo en el código. Regreso entonces con el botón atrás y aquí lo que tenemos es que 00:19:23

cuando yo he dicho que si quiero que la escena sea 1 o 2 se muestre, tengo que añadir al final nuevamente con lógica otro segundo O para indicar 00:19:34

mediante variables que si la escena es igual a 3 también quiero que permanezca visible pulso el 00:19:44

botón ok y ahora sí si lo probamos vemos que el funcionamiento es correcto se queda arriba y no 00:19:51

desaparece regreso entonces a la lista de objetos con el botón atrás nuevamente atrás y una vez más 00:20:00

y lo que voy a hacer ahora es duplicar este objeto carnívoros y cambiar su apariencia por la de rívoros 00:20:09

y luego realizar una pequeña modificación en sus programas para ello saco el menú contextual 00:20:15

indico que quiero copiar selecciono el rótulo carnívoros pulso esta marca de verificación y ya 00:20:21

tengo aquí el duplicado lo primero que voy a hacer con este duplicado es renombrarlo nuevamente 00:20:28

despliego el menú selecciono ahora renombrar marco este rótulo pulso el signo de verificación y 00:20:33

escribo como nombre herbívoros y pulso el botón ok de tal forma que ya lo tengo renombrado ahora 00:20:41

hago clic sobre él y lo primero que voy a hacer es modificar su apariencia para ello voy aquí 00:20:48

indico que quiero borrar la apariencia que tengo seleccionada actualmente me indica que no se puede 00:20:53

deshacer pulso el botón sí y con el signo más voy a crear una nueva apariencia. Selecciono una 00:21:01

imagen de mi galería, en este caso la del rótulo de herbívoros, la selecciono y lo primero que voy 00:21:07

a hacer como en el caso de los carnívoros es recortarla. Hago clic sobre ella para abrirla 00:21:13

con pocket paint, selecciono la herramienta cortar, arrastro por arriba y también por abajo para 00:21:18

reducir la altura de la imagen y ahora confirmo el recorte haciendo clic en este enlace y regreso 00:21:32

a Pocket Code con este icono guardando los cambios. Una vez recortada regreso a las propiedades del 00:21:40

objeto para acceder a su línea de comandos y aquí vemos que se han copiado las líneas de comando del 00:21:48

rótulo carnívoros de tal forma que vamos a tener que introducir modificaciones. Por ejemplo aquí 00:21:56

nos preguntamos si la escena es 1, 2 o 3 que era para el caso de los carnívoros pero en este caso 00:22:01

nos tenemos que preguntar si la escena es 1, 4 que sería la animación del rótulo de herbívoros o bien 00:22:07

5 que sería la escena que muestra a los animales herbívoros de tal forma que borro ese 2 y lo 00:22:15

cambio por un 4 y borro este 3 lo cambio por un 5 y confirmo. Además aquí queríamos que si la escena 00:22:21

era 1 se colocase en esta posición, en este caso nos sigue interesando colocarlo si la escena es 1 00:22:30

pero en lugar de colocarlo en 0 o 100 lo vamos a colocar por ejemplo en 0 menos 100 para que 00:22:35

aparezca ligeramente por debajo del centro, seguimos desplazándonos comprobando el código 00:22:42

y en el oyente de evento de cuando se pulse este objeto habíamos indicado que si la escena era 1 00:22:48

queríamos deslizarlo a esta posición, esto no cambia para el rótulo de los herbívoros lo que 00:22:54

sí que cambia es que tendremos que establecer la escena una vez que termine ese deslizamiento no 00:22:59

en la escena 3 sino en la escena 5 que es la que muestra los animales herbívoros selecciono 5 pulso 00:23:04

el botón ok voy a desplazar para ver el resto del código y ya no es necesario realizar ninguna 00:23:12

modificación más de tal forma que si probamos nuevamente la aplicación haciendo clic en este 00:23:18

icono y selecciono ahora herbívoros en lugar de carnívoros vemos que efectivamente el rótulo se 00:23:22

desplaza hacia arriba lo que hemos visto no obstante es que hay un problema y es que carnívoros no ha 00:23:29

desaparecido al seleccionar herbívoros y esto me indica que tengo un problema nuevamente en el 00:23:34

código vamos a depurarlo dónde está este problema vuelvo atrás y el problema está realmente en que 00:23:40

cuando yo detecto que se ha pulsado sobre un objeto bien sobre el rótulo herbívoros o bien 00:23:46

sobre el rótulo carnívoros no cambio la escena y debería cambiarlo directamente debería cambiar a 00:23:52

la escena 2 o bien a la escena 4 en este caso como estamos en herbívoros lo que voy a hacer es que 00:23:57

cuando se pulse si la escena es 1 antes de realizar la animación lo que voy a hacer es cambiar a la 00:24:02

escena 2 para ello con el signo más perdón a la escena 4 en este caso estoy con los herbívoros 00:24:10

en variables voy a establecer la escena y la voy a establecer al valor 4 además de establecer la 00:24:15

variable, siempre que establezca la variable lo que tengo que hacer a continuación es difundir el mensaje de la categoría control, difundir el mensaje cambiar escena y obviamente este mismo cambio lo tendré que hacer en el objeto carnívoros, selecciono carnívoros, voy a líneas de comandos y en el oyente de evento de pulsación nuevamente pasa lo mismo, antes de realizar la animación con el signo más en variables lo que voy a indicar es que quiero establecer la variable 00:24:23

escena en este caso al valor 2 y que también quiero en la categoría de control difundir el 00:24:52

mensaje cambiar escena lo coloco ahí justo antes de realizar la animación ahora ya sí si probamos 00:25:02

la aplicación veremos que todo funciona correctamente si pulso herbívoros desaparece 00:25:09

carnívoros y este rótulo se desplaza hacia arriba y permanece visible y a continuación voy a ocuparme 00:25:13

ya de los activos de los animales con cada animal voy a seguir un procedimiento de cinco pasos el 00:25:19

primer paso consistirá en crear una imagen con fondo azul directamente en pocket pen e importar 00:25:25

sobre ella la imagen del animal correspondiente a continuación exportaré esa imagen para tenerla 00:25:31

disponible en la galería a continuación la abriré con pixei añadiré un bocadillo con el nombre del 00:25:36

animal y volveré a exportarla con pixei de esta forma tendré en la galería dos imágenes la que 00:25:42

exporté inicialmente de Pocket Paint que contiene simplemente al animal y la que exporté a continuación de Pixate que además del animal contiene el bocadillo con su nombre. 00:25:48

Voy a empezar volviendo a la lista de objetos, pulso el botón atrás y una vez en la lista de objetos pulso el botón más para indicar este procedimiento. 00:25:58

Primer paso, crear una imagen, esa imagen va a tener un fondo de color azul, selecciono la herramienta llenar y a continuación con la paleta el tono azul, pulso listo, hago clic sobre el fondo y ya tengo ese fondo preparado. 00:26:10

A continuación voy a importar la imagen. Voy a empezar por ejemplo con la del cocodrilo. Hago clic aquí para seleccionar la herramienta, selecciono importar imagen, elijo que la quiero importar de la galería y en la galería tengo la imagen del cocodrilo, la selecciono y la voy a colocar. 00:26:27

Por ejemplo lo que voy a hacer es agrandar su tamaño y también voy a aprovechar para girarlo, lo coloco, puedo colocarlo así y hacerlo aún un poco más grande y ahora ya lo centro y por último lo estampo para que realmente la imagen quede fijada al fondo. 00:26:50

Hago clic en este icono y de esta forma ya he creado la imagen. Ahora saco el menú e indico que quiero exportar esta imagen y de esta forma ya la tengo en la galería. 00:27:21

Ahora regreso a la página inicial y voy a ejecutar Pixate. En Pixate voy a seleccionar esa imagen de la galería que es esta y le voy a añadir un bocadillo. Para añadir el bocadillo selecciono Sticker, a continuación World Balloon y aquí voy a escribir por ejemplo Cocodrilo. 00:27:33

A continuación voy a seleccionar por ejemplo este estilo de bocadillo y voy a hacer clic sobre el bocadillo para cambiar el tamaño del texto. En lugar de normal voy a elegir huge, enorme. De esta forma pulso el signo de verificación y aparece el bocadillo sobre el cocodrilo. 00:28:02

Lo que voy a hacer es colocarlo, por ejemplo, lo voy a colocar en este lateral, ahí, y aparece aquí un punto de control que puedo desplazar para cambiar la ubicación del origen. 00:28:23

Por ejemplo, lo puedo colocar ahí o podríamos colocar a cualquier otro lado, lo voy a dejar en este lateral. 00:28:36

Y por último, exporto de tal forma que ahora ya tengo, al pulsar Save Picture to Album, las dos imágenes en la galería. 00:28:44

Voy a regresar con las últimas aplicaciones utilizadas a Pocket Code y lo que haría en Pocket Code es regresar a la lista de objetos y en la lista de objetos indicar que quiero añadir un nuevo objeto con el signo más. 00:28:51

En este caso seleccionaría la imagen, seleccionaría en primer lugar la imagen sin el bocadillo, voy a darle el nombre cocodrilo a esta imagen, indicaría que quiero añadir líneas de comandos pero antes de eso voy a importar la otra apariencia, vuelvo atrás, selecciono apariencias y además de esa primera apariencia pulso el icono más para seleccionar una imagen y en este caso selecciono la que tiene el bocadillo. 00:29:07

Voy a aprovechar para renombrarla mediante el menú selecciono renombrar activo la segunda apariencia y marco esta casilla y voy a llamarla cocodrilo guión bajo bocadillo pulso ok para confirmar y antes de seguir este mismo procedimiento con los demás animales lo que voy a hacer es completar este. 00:29:40

Es decir le voy a añadir el código que necesita de tal forma que luego pueda duplicarlo y simplemente intercambiar estas apariencias por las del resto de los animales sin tener que volver a crear todo el código sino solamente modificar aquellos datos que sea necesario. 00:30:04

Para ello regreso nuevamente a las propiedades del objeto y en este caso voy a ir a las líneas de comandos y voy a empezar con un programa que cuando inicie la aplicación reduzca el tamaño de esta imagen al 40% y lo coloque aproximadamente en el primer cuadrante, es decir en esta zona de aquí. 00:30:20

pulso el signo más en control selecciono el oyente de evento cuando comience el programa 00:30:37

nuevamente signo más en apariencias voy a elegir la opción establecer el tamaño en 00:30:42

y voy a cambiar ese 60% por un 40% y a continuación nuevamente con el signo más 00:30:48

y en este caso en la categoría movimiento voy a seleccionar este bloque 00:30:55

para colocar la imagen del cocodrilo en las coordenadas menos 180 y en la ordenada 275. 00:31:00

Pulso el botón OK y una vez colocado voy a preocuparme de gestionar los mensajes de tipo cambiar escena. 00:31:14

Para ello hago clic en el signo más, nuevamente en la categoría control, selecciono el oyente cuando recibo cambiar escena. 00:31:23

Lo voy a colocar debajo y en este caso se trata de un carnívoro de tal forma que lo que queremos es que esté visible en la escena 3 y en cualquier otra escena que desaparezca, de tal forma que nuevamente con el signo más y en la categoría de control voy a elegir un bloque de tipo sí, lo coloco debajo del oyente de evento, configuro su condición, mediante variables voy a indicar que si la escena es igual a 3, entonces lo que quiero es que se muestre. 00:31:30

signo más apariencia mostrar y coloco este bloque en la primera rama del sí en caso contrario lo que 00:31:58

haré con el signo más nuevamente en apariencias es ocultarlo lo coloco en la segunda rama y de 00:32:08

esta forma habré conseguido que desaparezca ya solamente me falta gestionar que cuando se haga 00:32:14

clic sobre el animal se muestre su apariencia con el bocadillo pero además tiene que hacer otra cosa 00:32:20

y es que se comunique al resto de animales que se ha hecho clic sobre él para que el resto de los animales oculten su bocadillo si lo tuvieran mostrado. 00:32:27

De tal forma que vemos aquí nuevamente que estamos en la necesidad de enviar un mensaje al resto de los objetos. 00:32:36

Vamos a seguir exactamente la misma técnica que con las escenas. 00:32:42

Vamos a utilizar una variable que vamos a llamar animal en la que guardaremos un número para indicar que animal está seleccionado. 00:32:45

desafortunadamente pocket code no nos permite aún almacenar texto en las variables de tal forma 00:32:52

que tendremos que enumerar a nuestros animales por ejemplo el cocodrilo va a ser el número 1 00:32:58

una vez que haya guardado el número 1 en la variable animal enviaré un mensaje que va a ser 00:33:02

por ejemplo cambiar animal de tal forma que todos los objetos recibirán ese mensaje y cambiarán a 00:33:08

su apariencia sin bocadillo voy a empezar entonces con el signo más indicando en la categoría de 00:33:14

control que quiero configurar el evento cuando se pulse sobre este objeto y lo que haré cuando se 00:33:20

pulse este objeto es nuevamente con el signo más y en la categoría de variables establecer una 00:33:27

variable, lo coloco debajo y la variable que voy a establecer es nueva por eso despliego aquí el 00:33:33

menú, selecciono nuevo, le voy a asignar el nombre animal y va a ser global, pulso ok y en este caso 00:33:38

el cocodrilo le voy a asignar el número 1 de tal forma que ahora lo que tendré que hacer debajo es estar pendiente de que se envíe ese mensaje pulso el signo más categoría de control y voy a difundir un nuevo mensaje en este caso el mensaje que voy a difundir es un mensaje nuevo despliego selecciono nuevo y va a ser cambiar animal pulso el botón ok y ahora gestionaré este mensaje signo más categoría de control 00:33:46

Cuando recibo lo coloco justo debajo y lo que voy a decir es cuando recibo no cambiar escena sino cuando recibo te explico aquí y elijo cambiar animal lo que voy a hacer es que si el animal es el 1 es decir si se ha hecho clic sobre mí mismo sobre el cocodrilo mostraré mi apariencia con bocadillo y en caso contrario si se ha hecho clic sobre cualquier otro animal lo que haré será ocultar mi apariencia con bocadillo. 00:34:18

es decir hago clic en el más categoría de control selecciono un bloque de tipo sí lo coloco dentro de ese oyente de evento y voy a configurar la condición mediante una variable 00:34:42

la que me voy a preguntar si el animal es igual a 1 si el animal es igual a 1 lo que haré será cambiar a la apariencia con bocadillo para ello hago clic en el signo más 00:34:54

y en apariencias voy a seleccionar cambiar a apariencia, lo coloco ahí, en este caso no será a la apariencia cocodrilo sino a la apariencia cocodrilo con su bocadillo 00:35:04

y en caso contrario nuevamente signo más, categoría de apariencias, también cambiar a apariencia, en caso contrario sí que cambiaré a la apariencia cocodrilo sin más. 00:35:16

voy a probar la aplicación haciendo clic en este icono 00:35:27

vemos que aparecen los rótulos, la escena 1, hago clic en carnívoros, estoy en la escena 2 00:35:31

ahora paso a la escena 3 y ya veo un pequeño problema 00:35:38

y es que está solapando ligeramente la imagen del cocodrilo a el rótulo 00:35:42

vamos a probar a ver qué ocurre al hacer clic sobre el cocodrilo 00:35:47

vemos que efectivamente aparece y como no podemos hacer clic ahora sobre otro animal 00:35:50

no desaparece ese bocadillo 00:35:55

¿Cómo vamos a resolver este solapamiento? Lo vamos a hacer consiguiendo que el rótulo se vaya aún más arriba 00:35:57

para ello regreso con el botón atrás a la lista de objetos y en la lista de objetos voy a empezar con el rótulo carnívoros 00:36:05

y en su línea de comandos el desplazamiento en lugar de llevarlo simplemente hasta 525 lo voy a desplazar 00:36:15

prácticamente hasta arriba del todo que son 575 lo voy a poner 575 pulso ok y lo voy a probar 00:36:23

nuevamente para ver que está bien y si está bien haré lo mismo con el herbívoro voy con carnívoros 00:36:33

ahora el problema es que se pudiera salir fuera vemos que no se sale y que tampoco queda solapado 00:36:39

De tal forma que regreso y voy a aplicar esto mismo en la lista de objetos al rótulo herbívoros. En línea de comandos hacemos el desplazamiento hasta las coordenadas 575. Pulso el botón ok y regreso nuevamente a la lista de objetos. 00:36:43

voy a insertar ahora el leopardo pero en lugar de crear un activo nuevo lo que voy a hacer es 00:37:05

duplicar el del cocodrilo para tener ya todo el código creado para ello despliego el menú selecciono 00:37:10

copiar hago clic sobre la marca del cocodrilo y sobre este signo de verificación de tal forma que 00:37:16

ya tengo aquí una copia y voy a volver a sacar el menú para elegir renombrar y voy a renombrar 00:37:24

esta copia del cocodrilo como por ejemplo leopardo. Pulso el botón ok y a continuación lo que haré será 00:37:30

entrar en este objeto, ir a sus apariencias y haciendo clic sobre la papelera seleccionar 00:37:39

todas las apariencias que tiene y eliminarlas. Pulso el botón sí para confirmar y ahora lo que 00:37:46

tengo que hacer es añadir la nueva apariencia del leopardo. Esto lo voy a hacer exactamente igual 00:37:51

que antes es decir creo una imagen con fondo azul y la imagen del leopardo importada en él la exporto 00:37:56

esta será una de las apariencias a continuación la abro con pixel añado el bocadillo la vuelvo a 00:38:02

exportar esta será la segunda de las apariencias y luego importo ambas en pocket code hago clic en 00:38:08

el signo más indico que quiero dibujar una imagen selecciono la herramienta llenar elijo en la paleta 00:38:15

el tono de azul, pulso listo, hago clic en cualquier lugar para rellenarlo todo de azul, a continuación nuevamente despliego la paleta de herramientas 00:38:25

y selecciono importar imagen, voy a importar una imagen de la galería, selecciono en este caso la imagen del leopardo que es este, lo amplío para que ocupe 00:38:35

el máximo espacio posible, por ejemplo así lo centro y a continuación lo estampo y una vez estampado en el menú lo que hago es exportar esta imagen, una vez exportada 00:38:49

ya puedo ir con las últimas aplicaciones utilizadas a Pixate y en Pixate vuelvo atrás para salir de la imagen del cocodrilo, indico que quiero obtener una imagen nueva 00:39:05

de la galería y voy a elegir esta imagen que acabo de crear del leopardo, la selecciono y exactamente igual que antes elijo sticker, voy a crear un bocadillo, escribo aquí leopardo, selecciono este estilo, hago clic sobre el propio bocadillo para cambiar el tamaño de fuente a enorme, confirmo, 00:39:16

Voy a colocar el bocadillo, lo voy a colocar por ejemplo aquí debajo y ahora el origen, hago que salga aproximadamente de la boca y por último exporto, de tal forma que ya tengo las dos apariencias en la galería de mi dispositivo móvil. 00:39:47

Regreso nuevamente con las últimas aplicaciones utilizadas a Pocket Code 00:40:10

Y lo que voy a hacer ahora mismo es regresar a las propiedades de este objeto 00:40:14

A las apariencias y voy a añadir esas dos apariencias que acabo de crear 00:40:19

Elijo seleccionar una imagen 00:40:23

Comienzo por la que no tiene bocadillo, que es esta 00:40:25

A continuación pulso nuevamente el signo más 00:40:28

Selecciono la otra imagen, la que sí que tiene el bocadillo, que es esta 00:40:35

Y ahora lo que voy a hacer es renombrarlas con el menú 00:40:39

Elijo renombrar, marco la primera de ellas, la que no tiene bocadillo y la voy a llamar sin más leopardo. A continuación vuelvo a sacar el menú, renombro nuevamente, hago clic sobre la segunda y esta la voy a llamar leopardo bocadillo. 00:40:42

pulso el botón ok y ahora regreso a las propiedades del objeto y lo que tendré que hacer es cambiar 00:41:00

las instrucciones necesarias en su programa en este caso por ejemplo en el primer oyente de 00:41:08

evento en vez de ir a la cisa menos 180 vamos a ir a la cisa 180 para colocarlo a la derecha del 00:41:13

cocodrilo luego indicamos aquí cuando cambiamos la escena pues en este caso como también es un 00:41:20

carnívoro queremos que esté visible en la escena 1 ahí no tenemos nada que cambiar aquí sí cuando 00:41:26

se haga clic sobre este animal vamos a indicar por ejemplo que el leopardo sea el animal 2 00:41:32

seleccionamos aquí 2 y lo que haremos en tal caso es que cuando se reciba cambiar animal si el animal 00:41:37

al que se ha cambiado ya no es el 1 borro ese 1 sino un 2 lo que haré es cambiar a la apariencia 00:41:43

leopardo con bocadillo y en caso contrario solamente a la apariencia leopardo. Pruebo la 00:41:52

aplicación, selecciono carnívoros, vemos que aparecen ambos animales, hago clic sobre el 00:41:59

cocodrilo, hago clic sobre el leopardo y vemos que desaparece, hago clic sobre cocodrilo, desaparece 00:42:08

el de leopardo y aparece el de cocodrilo. Voy a regresar nuevamente a la lista de objetos y lo 00:42:14

que tendría que hacer ahora es repetir este mismo procedimiento con el resto de los animales lo voy 00:42:21

a hacer y cortar el vídeo y lo retomaré cuando esté terminando con el último ya ha llegado al 00:42:27

último animal que es la cebra voy a operar como el resto de los casos despliego el menú indico que 00:42:36

quiero copiar el actor del cocodrilo y una vez que lo tengo copiado aquí abajo lo que hago es 00:42:41

renombrarlo nuevamente con el menú contextual selecciono renombrar activo la copia del cocodrilo 00:42:48

hago clic sobre el signo de verificación y escribo cebra pulso ok y ahora accedo a este actor y lo 00:42:54

primero que voy a hacer es eliminar las dos apariencias que tiene selecciono todos hago 00:43:04

clic en el signo de verificación y confirmo la eliminación y ahora añado una nueva apariencia 00:43:09

con el signo más, que la creo con Pocket Paint, selecciono la herramienta rellenar, elijo el color azul, hago clic en cualquier lugar para rellenarlo todo 00:43:15

y a continuación nuevamente seleccionando la herramienta importar imagen, selecciono que quiero importar una imagen de la galería y elijo la imagen de la cebra 00:43:32

que está por aquí abajo, es esta de aquí, la amplío para ocupar todo el espacio disponible, la centro y la estampo con este icono para que quede fijada al fondo. 00:43:42

Ahora en el menú contextual exporto esta imagen para que esté disponible en la galería y en las últimas aplicaciones utilizadas selecciono Pixate, 00:44:07

Vuelvo atrás para elegir una imagen nueva, selecciono Get a Picture, de la galería, elijo la imagen que acabo de crear de la cebra. 00:44:19

Y ahora en Sticker, selecciono crear un bocadillo, escribo cebra, selecciono este estilo, hago clic sobre el bocadillo para cambiar su tamaño de fuente a enorme y confirmo haciendo clic en esta marca de la zona superior derecha. 00:44:30

Ahora coloco el bocadillo, lo voy a colocar por ejemplo aquí debajo y el punto de origen cerca de la boca y nuevamente exporto esta imagen a la galería. 00:44:52

Ahora ya con las últimas aplicaciones utilizadas regreso a Pocket Code y voy a importar estas dos apariencias. Regreso a la lista de apariencias con este icono, pulso el signo más, selecciono una imagen y empiezo con la que no tiene el bocadillo. 00:45:05

nuevamente signo más, seleccionar imagen y ahora elijo la que tiene el bocadillo 00:45:26

voy a renombrar ambas con el menú contextual, renombrar, empiezo con la primera 00:45:33

la selecciono, hago clic sobre la marca de verificación y escribo Zebra 00:45:40

vuelvo a extraer el menú contextual, selecciono renombrar, ahora elijo la segunda 00:45:45

nuevamente la marca de verificación y escribo Zebra bocadillo 00:45:51

ahora ya solamente me falta modificar el código para ello vuelvo atrás a las propiedades de este actor y accedo a las líneas de comando 00:45:55

voy a ir revisando desde arriba este actor tiene que estar situado en las coordenadas 180 para la x y la y sería menos 275 00:46:04

porque tiene que estar colocado en el cuadrante inferior derecho pulso ok y ya tengo las coordenadas establecidas 00:46:15

este animal como pertenece a los herbívoros ya no tendrá que aparecer en la escena 3 sino la escena 5 00:46:24

borro ese 3 e introduzco un 5 pulso ok para confirmar sigo bajando 00:46:32

este animal le corresponde el número 8 así es que cuando se haga clic sobre él tendré que establecer en la variable animal el valor 8 00:46:36

pulso ok y ya aquí abajo cuando se reciba el cambio de animal no tendré que preocuparme de que el animal sea 1 00:46:45

sino nuevamente de que el animal sea 8, pulso ok y por último lo que tendré que hacer es que si el animal es el número 8 se tendrá que mostrar la apariencia de la cebra con bocadillo 00:46:54

y en caso contrario la cebra normal. Una vez hecho esto voy a probar la aplicación haciendo clic en este icono, selecciono carnívoros, hago clic sobre cada uno de ellos 00:47:04

y vemos que van apareciendo los bocadillos a la vez que desaparecen los de los anteriores. 00:47:21

Pulso volver atrás y reiniciar la aplicación para probar también la sección de los herbívoros. 00:47:26

Selecciono ahora herbívoros, vemos que aparecen los cuatro, voy haciendo clic sobre ellos 00:47:32

y efectivamente aparecen todos los bocadillos. 00:47:38

De tal forma que ya tenemos la parte principal de la aplicación terminada. 00:47:41

Me faltaría ahora introducir el botón volver para regresar a la escena 1. 00:47:46

Voy a regresar entonces a la lista de objetos y el procedimiento para crear el botón volver es muy similar al que hemos utilizado para los animales. 00:47:51

Hago clic sobre el signo más para crear un objeto nuevo, indico que lo quiero dibujar con Pocket Paint. 00:48:05

Nuevamente voy a crear sencillamente una imagen con el fondo de color azul, selecciono la herramienta de llenar, elijo el color azul y hago clic en cualquier posición. 00:48:10

y ahora en lugar de importar ningún elemento como no dispongo del rótulo lo que voy a hacer es directamente exportar esta imagen con el menú contextual, la exporto de tal forma que esté disponible en la galería y ahora con las últimas aplicaciones recientes paso a Pixate y en Pixate lo que voy a hacer es elegir esta imagen que acabo de exportar de la galería, la selecciono y ahora voy a crear sobre ella un título. 00:48:25

Para ello selecciono sticker y aquí voy a elegir la opción title. Voy a elegir, voy a escribir primero volver y ahora voy a elegir un formato, por ejemplo vamos a probar varios, a ver cuándo nos gusta más. 00:48:57

podríamos elegir ese o bien este que es similar al que hemos usado al principio 00:49:12

así es que voy a mantener este, confirmo, exporto la imagen a la galería 00:49:17

y ahora con las últimas aplicaciones utilizadas regreso a Pocket Code 00:49:24

y lo que voy a hacer es importar esa apariencia, elijo seleccionar una imagen 00:49:31

selecciono esa apariencia 00:49:40

le asigno el nombre volver 00:49:44

pulso ok 00:49:48

y ahora lo que tendré que hacer 00:49:50

antes de escribir su programa 00:49:53

es recortarlo 00:49:55

por eso vuelvo atrás 00:49:57

selecciono apariencias 00:49:58

hago clic sobre ellas 00:49:59

y elijo la herramienta recortar 00:50:01

y voy a recortar por todos los laterales 00:50:05

Por aquí, por aquí, porque de otro modo se solaparía con las imágenes que ya tengo de los animales. Voy a colocarlo aproximadamente así. Voy a recortar un poco más de abajo. Una vez hecho esto, para confirmar, hago clic aquí y directamente vuelvo a Pocket Code guardando los cambios y de esta forma ya tengo creada la apariencia de este botón volver. 00:50:09

regreso a las propiedades del objeto y ahora ya sí me voy a preocupar de sus líneas de comandos 00:50:53

este actor va a necesitar tres programas 00:50:59

uno que al comenzar la aplicación lo coloque en el centro del escenario 00:51:02

otro que cuando reciba un clic fije la variable escena al valor 1 y envíe el mensaje cambia de escena 00:51:07

y un tercero que solamente muestre este actor en caso de que la escena sea la número 3 o la número 5 00:51:14

Es decir, un programa que estará pendiente de recibir el mensaje cambiar escena. Voy a empezar pulsando el signo más y en la categoría de control indico que quiero utilizar el oyente cuando comience el programa y a continuación nuevamente en el signo más, en la categoría movimiento voy a colocar este objeto en las coordenadas 0, 0, 0 y para la I 0 también. 00:51:21

A continuación nuevamente pulso el signo más y en la categoría de control voy a elegir ahora el evento cuando se pulse este objeto, lo coloco debajo y ahora nuevamente en el signo más en este caso de la categoría de variables voy a elegir el bloque para establecer la variable y la variable que voy a establecer no es animal sino escena y voy a establecerla al valor 1. 00:51:46

pulso ok y una vez establecida la variable lo que haré será de la categoría de control enviar o difundir el mensaje cambiar escena 00:52:12

lo coloco debajo y elijo el mensaje que quiero enviar que es el mensaje cambiar escena 00:52:21

ahora ya solo me falta estar pendiente de recibir este mensaje para ello selecciono el signo más y en la categoría de control selecciono cuando recibo 00:52:27

Lo coloco justo debajo y el mensaje al que quiero estar pendiente es el mensaje cambiar escena y lo que voy a hacer a continuación es mediante un control de tipo sí, lo voy a colocar justo debajo, voy a establecer una condición que sea que si la escena es la número 3 o la número 5 se muestre este botón y en caso contrario que se oculte. 00:52:38

Voy a variables, elijo escena, escena igual a 3 y de la categoría lógica elijo un O. Variables nuevamente, escena igual a 5. Si la escena es 3 o la escena es 5, correcto, pulso OK. En tal caso lo que quiero es de la categoría apariencias mostrar este actor. 00:53:06

y en caso contrario también de la categoría apariencias lo que quiero es ocultarlo de esta 00:53:28

forma ya tengo el programa completo y voy a probar la aplicación hago clic sobre carnívoros y vemos 00:53:38

que aparece efectivamente volver hago clic sobre volver aparece la escena 1 si hago clic sobre el 00:53:49

víboros exactamente igual aparece volver en el medio y vemos que tenemos aquí un pequeño problema 00:53:55

y es que volver solapa ligeramente a la jirafa por eso lo que vamos a hacer ahora para resolver esto es reducir un poquito el tamaño de este botón 00:54:00

voy a volver atrás y en las propiedades cuando comience el programa de este actor además de colocarlo en las coordenadas 0,0 00:54:09

lo que voy a hacer previamente es con la categoría de apariencia establecer su tamaño por ejemplo vamos a establecerlo al 80% 00:54:22

80% pulso ok y vuelvo a probarlo selecciono directamente herbívoros y vemos que aún así sigue solapando ligeramente así es que voy a reducirlo por ejemplo al 60% 00:54:33

y ahora ya sí imagino que al probar la aplicación seleccionando herbívoros será suficiente para que no solape a la jirafa 00:54:51

De esta forma ya tendríamos la aplicación terminada. ¿Qué mejoras podríamos incluir? Pues una muy sencilla sería por ejemplo añadir que los animales además de mostrar su nombre en un bocadillo lo dijesen o lo pronunciasen en inglés. 00:55:08

Para ello tendríamos que obtener las locuciones de los nombres de estos animales. Podríamos grabarlas nosotros mismos o bien podríamos obtenerlas de algún servicio online. 00:55:22

Por ejemplo, yo voy a utilizar el diccionario de pronunciación online forbo.com. Para ello, voy a la página inicial de mi dispositivo, inicio el navegador y accedo a la dirección worldwideweb.forbo.com. 00:55:32

Se trata de un diccionario online en el que podemos buscar palabras y descargarnos su pronunciación en un archivo mp3 que está libre de todo derecho. 00:55:49

Podemos utilizarlo libremente en nuestras aplicaciones. Entonces lo que vamos a hacer a continuación sería registrarnos con este icono o bien como yo ya estoy registrado en este servicio hago clic directamente aquí y voy a escribir mis credenciales. Pulso entrar. Digo que no quiero recordar esta contraseña. 00:55:56

y ahora solamente tendría que buscar aquí una palabra, por ejemplo voy a buscar cocodrilo 00:56:15

y lo que hará este sistema es ofrecerme pronunciaciones de palabras similares, 00:56:21

la que a mí me interesa es esta primera, hago clic sobre ella y voy a encontrar que varias personas han grabado esta locución, 00:56:28

por ejemplo la tenemos con voz de mujer de Estados Unidos, de hombre del Reino Unido y demás. 00:56:35

Vemos además que están valoradas por otros usuarios, por ejemplo yo voy a elegir descargar esta primera, 00:56:39

Podría escucharla haciendo clic aquí. Si me gusta pulso el enlace descargar mp3 y lo que veremos es que el archivo se descargará a nuestro sistema. 00:56:44

Si desplegamos arriba la bandeja vemos que la descarga ya ha finalizado. Regreso entonces a Pocket Code y lo que haría en Pocket Code es en la lista de objetos, 00:56:56

Voy a regresar a ella, elegir el actor del cocodrilo y en sus líneas de comandos lo que haría es indicar que quiero que cuando se haga clic sobre él se detenga cualquier otro sonido que pudiera estar sonando y que pase a sonar el sonido cocodrilo. 00:57:07

Para ello hago clic sobre el signo más y en sonido selecciono la opción para todos los sonidos, la coloco justo aquí antes de mostrar el bocadillo y a continuación lo que voy a hacer es nuevamente de la categoría de sonido voy a indicar que quiero iniciar un sonido. 00:57:30

Lo voy a colocar justo debajo de mostrar el bocadillo y el sonido va a ser un sonido nuevo. Hago clic aquí, selecciono nuevo y en la lista de sonidos elijo File Manager en mi caso para poder localizar rápidamente en la carpeta de descargas el archivo MP3 que acabo de descargar. 00:57:51

Lo selecciono y de esta forma ya tengo el sonido introducido de tal forma que si pruebo la aplicación selecciono carnívoros y hago clic sobre el cocodrilo suena la locución y aparece el bocadillo. 00:58:13

Otras mejoras que podríamos hacer serían por ejemplo que aquí además de aparecer esto pues se mostrase nuestro nombre en la zona inferior. 00:58:31

Esto sería tan sencillo como crear un actor nuevo y una vez concluida la aplicación regresaríamos a la interfaz inicial de Pocket Code y en esta interfaz inicial lo que podríamos hacer es subir nuestra aplicación al servicio de Catrobat. 00:58:37

Con esta opción subir podríamos colocar nuestra aplicación públicamente mediante la licencia AGPL a disposición de todos los usuarios de Pocket Code. 00:58:55

Valoración:

Eres el primero. Inicia sesión para valorar el vídeo.

Idioma/s:

Autor/es:

Juan Félix Mateos Barrado

Subido por: