1
00:00:05,360 --> 00:00:09,619
El procedimiento general para crear una app podría dividirse en las siguientes fases.

2
00:00:10,039 --> 00:00:19,160
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,

3
00:00:19,579 --> 00:00:27,420
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.

4
00:00:27,420 --> 00:00:38,560
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.

5
00:00:39,200 --> 00:00:50,500
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.

6
00:00:50,500 --> 00:01:00,000
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.

7
00:01:00,700 --> 00:01:09,500
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.

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

9
00:01:17,579 --> 00:01:22,840
En este video tutorial concretamente vamos a ver cómo desarrollar escenas con Pocket Code.

10
00:01:23,319 --> 00:01:27,959
A continuación asignaríamos programas a los activos para definir su comportamiento.

11
00:01:28,579 --> 00:01:35,900
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,

12
00:01:36,340 --> 00:01:41,340
en todo momento para comprobar que efectivamente la aplicación se comporta como nosotros deseamos.

13
00:01:41,859 --> 00:01:49,599
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.

14
00:01:50,180 --> 00:01:52,359
Y por último, pasaríamos a distribuir la aplicación.

15
00:01:53,420 --> 00:01:59,040
En este videotutorial vamos a desarrollar una aplicación muy sencilla con Pocket Code que está compuesta por varias escenas.

16
00:01:59,099 --> 00:02:03,879
En la primera escena, que es esta que estamos viendo, se ofrecen dos opciones, carnívoros y herbívoros.

17
00:02:03,879 --> 00:02:08,520
cuando el usuario hace clic sobre una de ellas se pasa por ejemplo en el caso de carnívoros a la

18
00:02:08,520 --> 00:02:12,840
siguiente escena que lo que hace es animar este rótulo hacia la zona superior esta sería la

19
00:02:12,840 --> 00:02:16,560
segunda escena y a continuación se muestra la tercera escena que es la que estamos viendo ahora

20
00:02:16,560 --> 00:02:21,539
mismo en ella aparecen varios animales y cuando el usuario hace clic sobre uno de ellos se muestra

21
00:02:21,539 --> 00:02:26,759
su nombre al hacer clic sobre otros se muestra su nombre y desaparece de la anterior esta sería la

22
00:02:26,759 --> 00:02:31,500
tercera escena si se pulsa el botón volver regresamos nuevamente a la escena 1 si ahora

23
00:02:31,500 --> 00:02:36,080
selecciono herbívoros estaríamos viendo ya la cuarta escena que es la animación de este segundo

24
00:02:36,080 --> 00:02:41,300
rótulo y aquí tendríamos la quinta escena en la cual se muestran los animales herbívoros que tiene

25
00:02:41,300 --> 00:02:45,340
exactamente el mismo funcionamiento que el anterior. Para hacer clic sobre un animal se muestra su

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

27
00:02:50,860 --> 00:02:55,379
tengo claro cómo quiero que sea y cómo quiero que se comporte mi aplicación así que voy a pasar

28
00:02:55,379 --> 00:03:01,259
directamente a obtener los activos. Para ello voy a ejecutar el navegador web de mi dispositivo y con

29
00:03:01,259 --> 00:03:13,080
él voy a acceder a la página web www.openclipart.org. En esta página web podemos obtener imágenes

30
00:03:13,080 --> 00:03:17,699
de dominio público. Voy a empezar por obtener la del cocodrilo, para ello voy a escribir

31
00:03:17,699 --> 00:03:24,340
cocodrilo en inglés y voy a añadir cartoon, que sería cocodrilo de dibujos animados o

32
00:03:24,340 --> 00:03:28,919
de caricatura. Al hacer clic se me van a mostrar varias imágenes y la que yo voy a utilizar

33
00:03:28,919 --> 00:03:37,800
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.

34
00:03:37,960 --> 00:03:46,680
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

35
00:03:46,680 --> 00:03:55,879
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

36
00:03:55,879 --> 00:04:22,439
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,

37
00:04:22,439 --> 00:04:27,079
nuevamente en la zona inferior encuentro las opciones de descarga

38
00:04:27,079 --> 00:04:29,600
mantengo el dedo pulsado sobre la opción pequeña

39
00:04:29,600 --> 00:04:31,379
selecciono la opción guardar enlace

40
00:04:31,379 --> 00:04:34,740
y de esta forma ya se ha descargado a mi dispositivo

41
00:04:34,740 --> 00:04:36,899
voy a descargar el resto de las imágenes

42
00:04:36,899 --> 00:04:38,519
y esto lo pasaré a cámara rápida

43
00:04:38,519 --> 00:05:19,290
y voy a descargar ya la última de ellas

44
00:05:19,290 --> 00:05:26,110
la cebra, hago clic sobre ella

45
00:05:26,110 --> 00:05:28,089
y en la zona inferior igual que las anteriores

46
00:05:28,089 --> 00:05:31,230
elijo descargar la opción pequeña

47
00:05:31,230 --> 00:05:32,889
manteniendo el dedo pulsado sobre ella

48
00:05:32,889 --> 00:05:34,769
y seleccionando la opción guardar enlace.

49
00:05:35,170 --> 00:05:39,970
De esta forma ya he descargado todas las imágenes que voy a necesitar a mi dispositivo

50
00:05:39,970 --> 00:05:44,410
y voy a pasar ya a Pocket Code para iniciar el desarrollo de la aplicación.

51
00:05:44,790 --> 00:05:48,230
Lo primero que haré en Pocket Code es desde la interfaz inicial

52
00:05:48,230 --> 00:05:51,189
indicar que quiero crear una aplicación nueva.

53
00:05:52,730 --> 00:05:57,069
Aquí indico mediante nuevo que voy a aplicar crear un programa nuevo,

54
00:05:57,069 --> 00:06:07,829
lo voy a llamar carnívoros herbívoros y voy a mantener pulsada la opción crear un programa vacío

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

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

57
00:06:20,009 --> 00:06:26,069
voy a necesitar otros activos los otros carnívoros y herbívoros y el botón volver estos activos los

58
00:06:26,069 --> 00:06:30,209
voy a crear con una aplicación que he instalado previamente que se llama Pixate. El problema de

59
00:06:30,209 --> 00:06:34,689
esta aplicación es que su versión gratuita no permite crear imágenes sino solamente abrir

60
00:06:34,689 --> 00:06:39,230
imágenes que hayan sido creadas previamente. De tal forma que tendré que crear esas imágenes por

61
00:06:39,230 --> 00:06:43,529
ejemplo aquí en Pocket Code utilizando la herramienta Pocket Paint y a continuación

62
00:06:43,529 --> 00:06:49,149
modificarlas en Pixate. Voy a empezar creando el rótulo carnívoros. Para ello hago clic en este

63
00:06:49,149 --> 00:06:53,629
signo más para indicar que quiero crear un activo nuevo. Indico que lo voy a dibujar directamente

64
00:06:53,629 --> 00:06:59,589
con pocket pen y se muestra la interfaz inicialmente transparente de la imagen que estoy creando.

65
00:07:00,170 --> 00:07:06,750
Podría mantener este fondo transparente, pero en realidad existe un fallo en 4W que hace que este fondo transparente

66
00:07:06,750 --> 00:07:12,769
se muestre de color negro en algunos dispositivos. Por eso en este caso voy a preferir elegir un color de fondo

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

68
00:07:19,430 --> 00:07:30,009
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.

69
00:07:30,529 --> 00:07:34,709
Este va a ser el fondo que voy a utilizar en todas las imágenes de mi aplicación.

70
00:07:35,250 --> 00:07:44,290
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.

71
00:07:44,290 --> 00:08:04,629
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.

72
00:08:04,629 --> 00:08:14,629
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.

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

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

75
00:08:31,480 --> 00:08:40,389
haciendo clic sobre el propio texto tenemos la opción por ejemplo de cambiar los colores

76
00:08:40,389 --> 00:08:46,149
yo voy a cambiar el color amarillo del relleno lo voy a cambiar por ejemplo por un tono anaranjado

77
00:08:46,149 --> 00:08:55,759
pulso set color y ahora pulso la marca de verificación que hay arriba a la derecha para indicar que ya he terminado

78
00:08:55,759 --> 00:09:03,500
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

79
00:09:03,500 --> 00:09:08,139
De esta forma la imagen quedará almacenada en la galería de mi dispositivo móvil.

80
00:09:08,620 --> 00:09:11,940
Y a continuación voy a sustituir este carnívoros por herbívoros.

81
00:09:12,120 --> 00:09:17,139
Para ello pulso dos veces sobre él, aparece el menú contextual en el que selecciono Edit.

82
00:09:18,639 --> 00:09:27,250
Hago clic para cambiar el texto, lo borro inicialmente y escribo en su lugar herbívoros.

83
00:09:29,720 --> 00:09:34,820
En este caso voy a hacer clic sobre el texto para cambiar el color de relleno a un tono de verde,

84
00:09:34,820 --> 00:09:50,929
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.

85
00:09:51,429 --> 00:10:03,889
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.

86
00:10:04,389 --> 00:10:05,590
¿Por qué voy a importar solo uno?

87
00:10:05,730 --> 00:10:08,889
Porque en realidad ambos van a tener un comportamiento muy similar.

88
00:10:09,330 --> 00:10:12,669
De tal forma que lo que voy a hacer es completar uno de ellos,

89
00:10:13,090 --> 00:10:16,429
a continuación duplicarlo y cambiarle solamente la apariencia,

90
00:10:16,590 --> 00:10:18,409
de tal forma que pueda aprovechar su código.

91
00:10:19,070 --> 00:10:22,590
Hago clic sobre el signo más, indico que quiero seleccionar una imagen

92
00:10:22,590 --> 00:10:26,870
y por ejemplo voy a elegir la imagen del rótulo carnívoros.

93
00:10:26,870 --> 00:10:31,730
Lo selecciono, le asigno el nombre a este objeto de carnívoros

94
00:10:31,730 --> 00:10:34,269
y pulso el botón OK.

95
00:10:35,289 --> 00:10:39,470
Ahora, Pocket Code me sugiere que empiece a añadir programas a este activo,

96
00:10:39,610 --> 00:10:41,710
pero antes de eso se los voy a añadir al fondo.

97
00:10:41,710 --> 00:10:46,909
Para ello, regreso a la página anterior y aquí selecciono el fondo.

98
00:10:47,389 --> 00:10:52,990
Y en primer lugar, al fondo le voy a añadir una apariencia dibujando una imagen

99
00:10:52,990 --> 00:10:56,710
que va a ser simplemente el mismo fondo completamente de color azul.

100
00:10:57,370 --> 00:10:59,490
Selecciono aquí la herramienta llenar.

101
00:10:59,490 --> 00:11:08,230
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.

102
00:11:08,809 --> 00:11:24,649
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.

103
00:11:24,649 --> 00:11:47,009
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

104
00:11:47,009 --> 00:11:53,049
ahora regreso a las propiedades de este objeto y voy a ir a líneas de comandos

105
00:11:53,049 --> 00:11:58,149
en líneas de comandos lo que voy a hacer es pedir que cuando se inicie la aplicación

106
00:11:58,149 --> 00:12:03,730
el fondo establezca una variable que voy a llamar escena con el valor 1

107
00:12:03,730 --> 00:12:09,509
y que además envíe un mensaje a todos los objetos que sea el mensaje cambiar escena

108
00:12:09,509 --> 00:12:13,090
esta es la forma de organizar las escenas en Pocket Code

109
00:12:13,090 --> 00:12:16,690
los demás objetos recibirán el mensaje cambiar escena

110
00:12:16,690 --> 00:12:22,190
y consultarán el valor de la variable escena para saber si deben mostrarse u ocultarse.

111
00:12:22,789 --> 00:12:30,610
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.

112
00:12:30,610 --> 00:12:38,870
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.

113
00:12:39,389 --> 00:12:42,570
Hago clic aquí y coloco este bloque debajo.

114
00:12:42,570 --> 00:13:05,450
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.

115
00:13:05,450 --> 00:13:20,470
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.

116
00:13:20,470 --> 00:13:33,190
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.

117
00:13:33,590 --> 00:13:41,549
Pulso ok para confirmar y ahora ya puedo regresar al listado de objetos y preocuparme del rótulo de carnívoros.

118
00:13:41,549 --> 00:13:46,169
Lo primero que voy a hacer es recortarlo verticalmente para que no ocupe todo el fondo.

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

120
00:13:55,490 --> 00:14:10,169
Aquí selecciono la herramienta recortar imagen y arrastro tanto por arriba como por abajo para reducir el tamaño de este rótulo.

121
00:14:10,169 --> 00:14:24,750
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.

122
00:14:27,299 --> 00:14:37,279
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.

123
00:14:37,279 --> 00:14:43,419
comienzo haciendo clic sobre el signo más y en la categoría de control selecciono el oyente de evento

124
00:14:43,419 --> 00:14:49,379
y cuando reciba un mensaje aquí el mensaje ya está configurado como cambiar escena y lo que tendré

125
00:14:49,379 --> 00:14:56,259
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

126
00:14:56,259 --> 00:15:00,399
el valor 2 es en el que se ve el rótulo de carnívoros desplazándose hacia arriba pues si

127
00:15:00,399 --> 00:15:05,519
tiene el valor 1 o 2 lo que quiero es mostrar este activo y en caso contrario quiero ocultarlo

128
00:15:05,519 --> 00:15:33,559
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.

129
00:15:33,559 --> 00:15:40,860
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í.

130
00:15:40,860 --> 00:15:51,539
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.

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

132
00:15:58,059 --> 00:16:12,720
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.

133
00:16:12,720 --> 00:16:35,009
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.

134
00:16:35,009 --> 00:17:13,890
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.

135
00:17:13,890 --> 00:17:22,859
pulso ok y además de esto lo que tendremos que hacer es cambiar el valor de escena

136
00:17:22,859 --> 00:17:27,740
en este caso ya pasaríamos cuando hubiera terminado el deslizamiento a la escena tercera

137
00:17:27,740 --> 00:17:32,220
en la que se muestran los animales carnívoros y enviar el mensaje de cambiar escena

138
00:17:32,220 --> 00:17:37,339
de tal forma que en el signo más variables indico que quiero establecer la variable

139
00:17:37,339 --> 00:17:43,220
lo coloco ahí debajo una vez terminado el deslizamiento la variable escena al valor 3

140
00:17:43,220 --> 00:18:08,700
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

141
00:18:08,700 --> 00:18:15,579
para ello selecciono el icono más en la categoría de control voy a elegir nuevamente un bloque de tipo sí

142
00:18:15,579 --> 00:18:23,779
y ese bloque lo voy a colocar justamente por encima del mostrar de tal forma que tengo este bloque sí anidado dentro del anterior

143
00:18:23,779 --> 00:18:31,940
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

144
00:18:31,940 --> 00:18:42,759
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

145
00:18:42,759 --> 00:18:54,359
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

146
00:18:54,359 --> 00:19:03,440
6 y 100 para la i. Pulso ok y ahora vamos a ver la importancia de ir depurando la aplicación al

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

148
00:19:08,440 --> 00:19:13,039
aparentemente todo va bien. Aparece el rótulo de carnívoros y al hacer clic sobre él inicia su

149
00:19:13,039 --> 00:19:19,059
animación pero resulta que al final desaparece. ¿Por qué desaparece? Pues desaparece porque lo

150
00:19:19,059 --> 00:19:23,779
que está haciendo es establecer la escena 3 pero nosotros solo nos hemos preocupado de que el rótulo

151
00:19:23,779 --> 00:19:34,720
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

152
00:19:34,720 --> 00:19:44,559
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

153
00:19:44,559 --> 00:19:51,779
mediante variables que si la escena es igual a 3 también quiero que permanezca visible pulso el

154
00:19:51,779 --> 00:20:00,480
botón ok y ahora sí si lo probamos vemos que el funcionamiento es correcto se queda arriba y no

155
00:20:00,480 --> 00:20:09,200
desaparece regreso entonces a la lista de objetos con el botón atrás nuevamente atrás y una vez más

156
00:20:09,200 --> 00:20:15,579
y lo que voy a hacer ahora es duplicar este objeto carnívoros y cambiar su apariencia por la de rívoros

157
00:20:15,579 --> 00:20:21,980
y luego realizar una pequeña modificación en sus programas para ello saco el menú contextual

158
00:20:21,980 --> 00:20:28,599
indico que quiero copiar selecciono el rótulo carnívoros pulso esta marca de verificación y ya

159
00:20:28,599 --> 00:20:33,880
tengo aquí el duplicado lo primero que voy a hacer con este duplicado es renombrarlo nuevamente

160
00:20:33,880 --> 00:20:41,619
despliego el menú selecciono ahora renombrar marco este rótulo pulso el signo de verificación y

161
00:20:41,619 --> 00:20:48,140
escribo como nombre herbívoros y pulso el botón ok de tal forma que ya lo tengo renombrado ahora

162
00:20:48,140 --> 00:20:53,759
hago clic sobre él y lo primero que voy a hacer es modificar su apariencia para ello voy aquí

163
00:20:53,759 --> 00:21:01,480
indico que quiero borrar la apariencia que tengo seleccionada actualmente me indica que no se puede

164
00:21:01,480 --> 00:21:07,339
deshacer pulso el botón sí y con el signo más voy a crear una nueva apariencia. Selecciono una

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

166
00:21:13,720 --> 00:21:18,099
a hacer como en el caso de los carnívoros es recortarla. Hago clic sobre ella para abrirla

167
00:21:18,099 --> 00:21:32,460
con pocket paint, selecciono la herramienta cortar, arrastro por arriba y también por abajo para

168
00:21:32,460 --> 00:21:40,140
reducir la altura de la imagen y ahora confirmo el recorte haciendo clic en este enlace y regreso

169
00:21:40,140 --> 00:21:48,569
a Pocket Code con este icono guardando los cambios. Una vez recortada regreso a las propiedades del

170
00:21:48,569 --> 00:21:56,869
objeto para acceder a su línea de comandos y aquí vemos que se han copiado las líneas de comando del

171
00:21:56,869 --> 00:22:01,690
rótulo carnívoros de tal forma que vamos a tener que introducir modificaciones. Por ejemplo aquí

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

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

174
00:22:15,369 --> 00:22:21,410
5 que sería la escena que muestra a los animales herbívoros de tal forma que borro ese 2 y lo

175
00:22:21,410 --> 00:22:30,109
cambio por un 4 y borro este 3 lo cambio por un 5 y confirmo. Además aquí queríamos que si la escena

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

177
00:22:35,910 --> 00:22:42,109
pero en lugar de colocarlo en 0 o 100 lo vamos a colocar por ejemplo en 0 menos 100 para que

178
00:22:42,109 --> 00:22:48,009
aparezca ligeramente por debajo del centro, seguimos desplazándonos comprobando el código

179
00:22:48,009 --> 00:22:54,609
y en el oyente de evento de cuando se pulse este objeto habíamos indicado que si la escena era 1

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

181
00:22:59,730 --> 00:23:04,990
sí que cambia es que tendremos que establecer la escena una vez que termine ese deslizamiento no

182
00:23:04,990 --> 00:23:12,190
en la escena 3 sino en la escena 5 que es la que muestra los animales herbívoros selecciono 5 pulso

183
00:23:12,190 --> 00:23:18,109
el botón ok voy a desplazar para ver el resto del código y ya no es necesario realizar ninguna

184
00:23:18,109 --> 00:23:22,690
modificación más de tal forma que si probamos nuevamente la aplicación haciendo clic en este

185
00:23:22,690 --> 00:23:29,430
icono y selecciono ahora herbívoros en lugar de carnívoros vemos que efectivamente el rótulo se

186
00:23:29,430 --> 00:23:34,470
desplaza hacia arriba lo que hemos visto no obstante es que hay un problema y es que carnívoros no ha

187
00:23:34,470 --> 00:23:40,130
desaparecido al seleccionar herbívoros y esto me indica que tengo un problema nuevamente en el

188
00:23:40,130 --> 00:23:46,029
código vamos a depurarlo dónde está este problema vuelvo atrás y el problema está realmente en que

189
00:23:46,029 --> 00:23:52,130
cuando yo detecto que se ha pulsado sobre un objeto bien sobre el rótulo herbívoros o bien

190
00:23:52,130 --> 00:23:57,470
sobre el rótulo carnívoros no cambio la escena y debería cambiarlo directamente debería cambiar a

191
00:23:57,470 --> 00:24:02,569
la escena 2 o bien a la escena 4 en este caso como estamos en herbívoros lo que voy a hacer es que

192
00:24:02,569 --> 00:24:10,049
cuando se pulse si la escena es 1 antes de realizar la animación lo que voy a hacer es cambiar a la

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

194
00:24:15,450 --> 00:24:23,670
en variables voy a establecer la escena y la voy a establecer al valor 4 además de establecer la

195
00:24:23,670 --> 00:24:52,490
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

196
00:24:52,490 --> 00:25:02,490
escena en este caso al valor 2 y que también quiero en la categoría de control difundir el

197
00:25:02,490 --> 00:25:09,150
mensaje cambiar escena lo coloco ahí justo antes de realizar la animación ahora ya sí si probamos

198
00:25:09,150 --> 00:25:13,789
la aplicación veremos que todo funciona correctamente si pulso herbívoros desaparece

199
00:25:13,789 --> 00:25:19,990
carnívoros y este rótulo se desplaza hacia arriba y permanece visible y a continuación voy a ocuparme

200
00:25:19,990 --> 00:25:25,309
ya de los activos de los animales con cada animal voy a seguir un procedimiento de cinco pasos el

201
00:25:25,309 --> 00:25:31,190
primer paso consistirá en crear una imagen con fondo azul directamente en pocket pen e importar

202
00:25:31,190 --> 00:25:36,849
sobre ella la imagen del animal correspondiente a continuación exportaré esa imagen para tenerla

203
00:25:36,849 --> 00:25:42,670
disponible en la galería a continuación la abriré con pixei añadiré un bocadillo con el nombre del

204
00:25:42,670 --> 00:25:48,710
animal y volveré a exportarla con pixei de esta forma tendré en la galería dos imágenes la que

205
00:25:48,710 --> 00:25:58,569
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.

206
00:25:58,730 --> 00:26:10,269
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.

207
00:26:10,269 --> 00:26:27,970
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.

208
00:26:27,970 --> 00:26:50,420
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.

209
00:26:50,420 --> 00:27:21,559
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.

210
00:27:21,559 --> 00:27:33,079
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.

211
00:27:33,079 --> 00:28:02,299
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.

212
00:28:02,299 --> 00:28:23,250
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.

213
00:28:23,250 --> 00:28:36,480
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.

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

215
00:28:44,440 --> 00:28:51,480
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.

216
00:28:51,480 --> 00:29:07,359
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.

217
00:29:07,359 --> 00:29:40,180
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.

218
00:29:40,180 --> 00:30:04,789
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.

219
00:30:04,789 --> 00:30:20,349
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.

220
00:30:20,349 --> 00:30:37,269
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í.

221
00:30:37,269 --> 00:30:42,650
pulso el signo más en control selecciono el oyente de evento cuando comience el programa

222
00:30:42,650 --> 00:30:48,230
nuevamente signo más en apariencias voy a elegir la opción establecer el tamaño en

223
00:30:48,230 --> 00:30:55,910
y voy a cambiar ese 60% por un 40% y a continuación nuevamente con el signo más

224
00:30:55,910 --> 00:31:00,009
y en este caso en la categoría movimiento voy a seleccionar este bloque

225
00:31:00,009 --> 00:31:13,750
para colocar la imagen del cocodrilo en las coordenadas menos 180 y en la ordenada 275.

226
00:31:14,410 --> 00:31:22,930
Pulso el botón OK y una vez colocado voy a preocuparme de gestionar los mensajes de tipo cambiar escena.

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

228
00:31:30,430 --> 00:31:58,910
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.

229
00:31:58,910 --> 00:32:08,130
signo más apariencia mostrar y coloco este bloque en la primera rama del sí en caso contrario lo que

230
00:32:08,130 --> 00:32:14,190
haré con el signo más nuevamente en apariencias es ocultarlo lo coloco en la segunda rama y de

231
00:32:14,190 --> 00:32:20,809
esta forma habré conseguido que desaparezca ya solamente me falta gestionar que cuando se haga

232
00:32:20,809 --> 00:32:27,109
clic sobre el animal se muestre su apariencia con el bocadillo pero además tiene que hacer otra cosa

233
00:32:27,109 --> 00:32:35,849
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.

234
00:32:36,210 --> 00:32:41,549
De tal forma que vemos aquí nuevamente que estamos en la necesidad de enviar un mensaje al resto de los objetos.

235
00:32:42,289 --> 00:32:45,410
Vamos a seguir exactamente la misma técnica que con las escenas.

236
00:32:45,630 --> 00:32:52,569
Vamos a utilizar una variable que vamos a llamar animal en la que guardaremos un número para indicar que animal está seleccionado.

237
00:32:52,569 --> 00:32:58,849
desafortunadamente pocket code no nos permite aún almacenar texto en las variables de tal forma

238
00:32:58,849 --> 00:33:02,730
que tendremos que enumerar a nuestros animales por ejemplo el cocodrilo va a ser el número 1

239
00:33:02,730 --> 00:33:08,710
una vez que haya guardado el número 1 en la variable animal enviaré un mensaje que va a ser

240
00:33:08,710 --> 00:33:14,490
por ejemplo cambiar animal de tal forma que todos los objetos recibirán ese mensaje y cambiarán a

241
00:33:14,490 --> 00:33:20,990
su apariencia sin bocadillo voy a empezar entonces con el signo más indicando en la categoría de

242
00:33:20,990 --> 00:33:27,690
control que quiero configurar el evento cuando se pulse sobre este objeto y lo que haré cuando se

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

244
00:33:33,089 --> 00:33:38,890
variable, lo coloco debajo y la variable que voy a establecer es nueva por eso despliego aquí el

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

246
00:33:46,509 --> 00:34:17,730
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

247
00:34:18,530 --> 00:34:42,150
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.

248
00:34:42,150 --> 00:34:54,260
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

249
00:34:54,260 --> 00:35:04,760
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

250
00:35:04,760 --> 00:35:16,559
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

251
00:35:16,559 --> 00:35:27,099
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.

252
00:35:27,099 --> 00:35:31,760
voy a probar la aplicación haciendo clic en este icono

253
00:35:31,760 --> 00:35:38,599
vemos que aparecen los rótulos, la escena 1, hago clic en carnívoros, estoy en la escena 2

254
00:35:38,599 --> 00:35:42,400
ahora paso a la escena 3 y ya veo un pequeño problema

255
00:35:42,400 --> 00:35:47,059
y es que está solapando ligeramente la imagen del cocodrilo a el rótulo

256
00:35:47,059 --> 00:35:50,380
vamos a probar a ver qué ocurre al hacer clic sobre el cocodrilo

257
00:35:50,380 --> 00:35:55,320
vemos que efectivamente aparece y como no podemos hacer clic ahora sobre otro animal

258
00:35:55,320 --> 00:35:57,800
no desaparece ese bocadillo

259
00:35:57,800 --> 00:36:05,739
¿Cómo vamos a resolver este solapamiento? Lo vamos a hacer consiguiendo que el rótulo se vaya aún más arriba

260
00:36:05,739 --> 00:36:15,480
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

261
00:36:15,480 --> 00:36:23,440
y en su línea de comandos el desplazamiento en lugar de llevarlo simplemente hasta 525 lo voy a desplazar

262
00:36:23,440 --> 00:36:33,539
prácticamente hasta arriba del todo que son 575 lo voy a poner 575 pulso ok y lo voy a probar

263
00:36:33,539 --> 00:36:39,639
nuevamente para ver que está bien y si está bien haré lo mismo con el herbívoro voy con carnívoros

264
00:36:39,639 --> 00:36:43,659
ahora el problema es que se pudiera salir fuera vemos que no se sale y que tampoco queda solapado

265
00:36:43,659 --> 00:37:05,059
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.

266
00:37:05,059 --> 00:37:10,900
voy a insertar ahora el leopardo pero en lugar de crear un activo nuevo lo que voy a hacer es

267
00:37:10,900 --> 00:37:16,679
duplicar el del cocodrilo para tener ya todo el código creado para ello despliego el menú selecciono

268
00:37:16,679 --> 00:37:24,079
copiar hago clic sobre la marca del cocodrilo y sobre este signo de verificación de tal forma que

269
00:37:24,079 --> 00:37:30,039
ya tengo aquí una copia y voy a volver a sacar el menú para elegir renombrar y voy a renombrar

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

271
00:37:39,500 --> 00:37:46,000
entrar en este objeto, ir a sus apariencias y haciendo clic sobre la papelera seleccionar

272
00:37:46,000 --> 00:37:51,760
todas las apariencias que tiene y eliminarlas. Pulso el botón sí para confirmar y ahora lo que

273
00:37:51,760 --> 00:37:56,199
tengo que hacer es añadir la nueva apariencia del leopardo. Esto lo voy a hacer exactamente igual

274
00:37:56,199 --> 00:38:02,559
que antes es decir creo una imagen con fondo azul y la imagen del leopardo importada en él la exporto

275
00:38:02,559 --> 00:38:08,920
esta será una de las apariencias a continuación la abro con pixel añado el bocadillo la vuelvo a

276
00:38:08,920 --> 00:38:15,559
exportar esta será la segunda de las apariencias y luego importo ambas en pocket code hago clic en

277
00:38:15,559 --> 00:38:25,670
el signo más indico que quiero dibujar una imagen selecciono la herramienta llenar elijo en la paleta

278
00:38:25,670 --> 00:38:35,530
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

279
00:38:35,530 --> 00:38:49,260
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

280
00:38:49,260 --> 00:39:05,159
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

281
00:39:05,159 --> 00:39:16,980
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

282
00:39:16,980 --> 00:39:47,980
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,

283
00:39:47,980 --> 00:40:10,489
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.

284
00:40:10,489 --> 00:40:14,550
Regreso nuevamente con las últimas aplicaciones utilizadas a Pocket Code

285
00:40:14,550 --> 00:40:19,170
Y lo que voy a hacer ahora mismo es regresar a las propiedades de este objeto

286
00:40:19,170 --> 00:40:23,269
A las apariencias y voy a añadir esas dos apariencias que acabo de crear

287
00:40:23,269 --> 00:40:25,309
Elijo seleccionar una imagen

288
00:40:25,309 --> 00:40:28,949
Comienzo por la que no tiene bocadillo, que es esta

289
00:40:28,949 --> 00:40:35,619
A continuación pulso nuevamente el signo más

290
00:40:35,619 --> 00:40:39,460
Selecciono la otra imagen, la que sí que tiene el bocadillo, que es esta

291
00:40:39,460 --> 00:40:42,679
Y ahora lo que voy a hacer es renombrarlas con el menú

292
00:40:42,679 --> 00:41:00,119
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.

293
00:41:00,119 --> 00:41:08,159
pulso el botón ok y ahora regreso a las propiedades del objeto y lo que tendré que hacer es cambiar

294
00:41:08,159 --> 00:41:13,679
las instrucciones necesarias en su programa en este caso por ejemplo en el primer oyente de

295
00:41:13,679 --> 00:41:20,840
evento en vez de ir a la cisa menos 180 vamos a ir a la cisa 180 para colocarlo a la derecha del

296
00:41:20,840 --> 00:41:26,500
cocodrilo luego indicamos aquí cuando cambiamos la escena pues en este caso como también es un

297
00:41:26,500 --> 00:41:32,880
carnívoro queremos que esté visible en la escena 1 ahí no tenemos nada que cambiar aquí sí cuando

298
00:41:32,880 --> 00:41:37,239
se haga clic sobre este animal vamos a indicar por ejemplo que el leopardo sea el animal 2

299
00:41:37,239 --> 00:41:43,500
seleccionamos aquí 2 y lo que haremos en tal caso es que cuando se reciba cambiar animal si el animal

300
00:41:43,500 --> 00:41:52,340
al que se ha cambiado ya no es el 1 borro ese 1 sino un 2 lo que haré es cambiar a la apariencia

301
00:41:52,340 --> 00:41:59,300
leopardo con bocadillo y en caso contrario solamente a la apariencia leopardo. Pruebo la

302
00:41:59,300 --> 00:42:08,280
aplicación, selecciono carnívoros, vemos que aparecen ambos animales, hago clic sobre el

303
00:42:08,280 --> 00:42:14,360
cocodrilo, hago clic sobre el leopardo y vemos que desaparece, hago clic sobre cocodrilo, desaparece

304
00:42:14,360 --> 00:42:21,579
el de leopardo y aparece el de cocodrilo. Voy a regresar nuevamente a la lista de objetos y lo

305
00:42:21,579 --> 00:42:27,119
que tendría que hacer ahora es repetir este mismo procedimiento con el resto de los animales lo voy

306
00:42:27,119 --> 00:42:36,369
a hacer y cortar el vídeo y lo retomaré cuando esté terminando con el último ya ha llegado al

307
00:42:36,369 --> 00:42:41,630
último animal que es la cebra voy a operar como el resto de los casos despliego el menú indico que

308
00:42:41,630 --> 00:42:48,250
quiero copiar el actor del cocodrilo y una vez que lo tengo copiado aquí abajo lo que hago es

309
00:42:48,250 --> 00:42:54,610
renombrarlo nuevamente con el menú contextual selecciono renombrar activo la copia del cocodrilo

310
00:42:54,610 --> 00:43:04,070
hago clic sobre el signo de verificación y escribo cebra pulso ok y ahora accedo a este actor y lo

311
00:43:04,070 --> 00:43:09,949
primero que voy a hacer es eliminar las dos apariencias que tiene selecciono todos hago

312
00:43:09,949 --> 00:43:15,530
clic en el signo de verificación y confirmo la eliminación y ahora añado una nueva apariencia

313
00:43:15,530 --> 00:43:32,320
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

314
00:43:32,320 --> 00:43:42,719
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

315
00:43:42,719 --> 00:44:07,199
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.

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

317
00:44:19,349 --> 00:44:30,789
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.

318
00:44:30,789 --> 00:44:52,480
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.

319
00:44:52,599 --> 00:45:05,000
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.

320
00:45:05,000 --> 00:45:26,000
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.

321
00:45:26,000 --> 00:45:33,800
nuevamente signo más, seleccionar imagen y ahora elijo la que tiene el bocadillo

322
00:45:33,800 --> 00:45:40,849
voy a renombrar ambas con el menú contextual, renombrar, empiezo con la primera

323
00:45:40,849 --> 00:45:45,230
la selecciono, hago clic sobre la marca de verificación y escribo Zebra

324
00:45:45,230 --> 00:45:51,389
vuelvo a extraer el menú contextual, selecciono renombrar, ahora elijo la segunda

325
00:45:51,389 --> 00:45:55,969
nuevamente la marca de verificación y escribo Zebra bocadillo

326
00:45:55,969 --> 00:46:04,909
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

327
00:46:04,909 --> 00:46:15,949
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

328
00:46:15,949 --> 00:46:24,070
porque tiene que estar colocado en el cuadrante inferior derecho pulso ok y ya tengo las coordenadas establecidas

329
00:46:24,070 --> 00:46:32,170
este animal como pertenece a los herbívoros ya no tendrá que aparecer en la escena 3 sino la escena 5

330
00:46:32,170 --> 00:46:36,769
borro ese 3 e introduzco un 5 pulso ok para confirmar sigo bajando

331
00:46:36,769 --> 00:46:45,610
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

332
00:46:45,610 --> 00:46:54,010
pulso ok y ya aquí abajo cuando se reciba el cambio de animal no tendré que preocuparme de que el animal sea 1

333
00:46:54,010 --> 00:47:04,909
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

334
00:47:04,909 --> 00:47:21,139
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

335
00:47:21,139 --> 00:47:25,679
y vemos que van apareciendo los bocadillos a la vez que desaparecen los de los anteriores.

336
00:47:26,420 --> 00:47:31,760
Pulso volver atrás y reiniciar la aplicación para probar también la sección de los herbívoros.

337
00:47:32,679 --> 00:47:38,260
Selecciono ahora herbívoros, vemos que aparecen los cuatro, voy haciendo clic sobre ellos

338
00:47:38,260 --> 00:47:41,699
y efectivamente aparecen todos los bocadillos.

339
00:47:41,699 --> 00:47:45,559
De tal forma que ya tenemos la parte principal de la aplicación terminada.

340
00:47:46,019 --> 00:47:50,519
Me faltaría ahora introducir el botón volver para regresar a la escena 1.

341
00:47:51,139 --> 00:48:04,659
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.

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

343
00:48:10,760 --> 00:48:25,630
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.

344
00:48:25,630 --> 00:48:57,440
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.

345
00:48:57,440 --> 00:49:12,579
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.

346
00:49:12,579 --> 00:49:17,699
podríamos elegir ese o bien este que es similar al que hemos usado al principio

347
00:49:17,699 --> 00:49:24,619
así es que voy a mantener este, confirmo, exporto la imagen a la galería

348
00:49:24,619 --> 00:49:31,679
y ahora con las últimas aplicaciones utilizadas regreso a Pocket Code

349
00:49:31,679 --> 00:49:40,940
y lo que voy a hacer es importar esa apariencia, elijo seleccionar una imagen

350
00:49:40,940 --> 00:49:44,539
selecciono esa apariencia

351
00:49:44,539 --> 00:49:48,219
le asigno el nombre volver

352
00:49:48,219 --> 00:49:50,579
pulso ok

353
00:49:50,579 --> 00:49:53,320
y ahora lo que tendré que hacer

354
00:49:53,320 --> 00:49:55,739
antes de escribir su programa

355
00:49:55,739 --> 00:49:57,260
es recortarlo

356
00:49:57,260 --> 00:49:58,480
por eso vuelvo atrás

357
00:49:58,480 --> 00:49:59,739
selecciono apariencias

358
00:49:59,739 --> 00:50:01,400
hago clic sobre ellas

359
00:50:01,400 --> 00:50:05,619
y elijo la herramienta recortar

360
00:50:05,619 --> 00:50:09,639
y voy a recortar por todos los laterales

361
00:50:09,639 --> 00:50:53,809
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.

362
00:50:53,809 --> 00:50:59,349
regreso a las propiedades del objeto y ahora ya sí me voy a preocupar de sus líneas de comandos

363
00:50:59,349 --> 00:51:02,869
este actor va a necesitar tres programas

364
00:51:02,869 --> 00:51:07,289
uno que al comenzar la aplicación lo coloque en el centro del escenario

365
00:51:07,289 --> 00:51:14,590
otro que cuando reciba un clic fije la variable escena al valor 1 y envíe el mensaje cambia de escena

366
00:51:14,590 --> 00:51:21,989
y un tercero que solamente muestre este actor en caso de que la escena sea la número 3 o la número 5

367
00:51:21,989 --> 00:51:46,789
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.

368
00:51:46,789 --> 00:52:12,780
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.

369
00:52:12,780 --> 00:52:21,519
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

370
00:52:21,519 --> 00:52:27,880
lo coloco debajo y elijo el mensaje que quiero enviar que es el mensaje cambiar escena

371
00:52:27,880 --> 00:52:38,019
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

372
00:52:38,019 --> 00:53:06,719
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.

373
00:53:06,719 --> 00:53:28,159
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.

374
00:53:28,159 --> 00:53:38,219
y en caso contrario también de la categoría apariencias lo que quiero es ocultarlo de esta

375
00:53:38,219 --> 00:53:49,699
forma ya tengo el programa completo y voy a probar la aplicación hago clic sobre carnívoros y vemos

376
00:53:49,699 --> 00:53:55,760
que aparece efectivamente volver hago clic sobre volver aparece la escena 1 si hago clic sobre el

377
00:53:55,760 --> 00:54:00,539
víboros exactamente igual aparece volver en el medio y vemos que tenemos aquí un pequeño problema

378
00:54:00,539 --> 00:54:09,619
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

379
00:54:09,619 --> 00:54:22,579
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

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

381
00:54:33,440 --> 00:54:51,679
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%

382
00:54:51,679 --> 00:55:08,019
y ahora ya sí imagino que al probar la aplicación seleccionando herbívoros será suficiente para que no solape a la jirafa

383
00:55:08,019 --> 00:55:22,599
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.

384
00:55:22,599 --> 00:55:32,639
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.

385
00:55:32,639 --> 00:55:48,840
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.

386
00:55:49,300 --> 00:55:56,940
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.

387
00:55:56,940 --> 00:56:15,460
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.

388
00:56:15,460 --> 00:56:21,340
y ahora solamente tendría que buscar aquí una palabra, por ejemplo voy a buscar cocodrilo

389
00:56:21,340 --> 00:56:28,400
y lo que hará este sistema es ofrecerme pronunciaciones de palabras similares,

390
00:56:28,539 --> 00:56:35,199
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,

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

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

393
00:56:44,559 --> 00:56:56,159
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.

394
00:56:56,320 --> 00:57:07,059
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,

395
00:57:07,059 --> 00:57:30,980
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.

396
00:57:30,980 --> 00:57:51,059
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.

397
00:57:51,059 --> 00:58:13,579
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.

398
00:58:13,579 --> 00:58:30,550
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.

399
00:58:31,190 --> 00:58:37,849
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.

400
00:58:37,849 --> 00:58:55,690
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.

401
00:58:55,690 --> 00:59:06,590
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.