1
00:00:00,510 --> 00:00:01,740
Escucha que son bienvenidos.

2
00:00:02,070 --> 00:00:06,180
Entonces en esta unidad estamos haciendo mi cosa favorita.

3
00:00:06,180 --> 00:00:08,630
Es este juguete simple pero divertido.

4
00:00:09,120 --> 00:00:15,170
Usando animación y una biblioteca de animación, algunos gráficos incluyen una biblioteca de audio y audio.

5
00:00:15,270 --> 00:00:20,970
Y vamos a hacer un simple clon simple de ese pad una aplicación de toque que te mostré desde

6
00:00:21,150 --> 00:00:29,220
el principio donde puedes presionar las teclas de tu teclado y cada tecla corresponde a un sonido que se reproduce y un poco de animación, y solo

7
00:00:29,340 --> 00:00:30,700
vamos a ser simple.

8
00:00:30,720 --> 00:00:32,390
No vamos a tener muchas animaciones diferentes.

9
00:00:32,400 --> 00:00:33,700
Te mostraré cómo se ve.

10
00:00:33,840 --> 00:00:35,690
Cada tecla tiene su propio sonido.

11
00:00:35,850 --> 00:00:41,370
Y cuando presiono esa tecla, el sonido se reproduce y obtenemos un círculo de color a través de cada tecla que

12
00:00:41,370 --> 00:00:43,710
tiene su propio color y luego animan los círculos.

13
00:00:43,710 --> 00:00:44,900
Básicamente se encogen.

14
00:00:44,910 --> 00:00:54,990
Entonces te mostraré lo que quiero decir y lo subiré un poco.

15
00:00:55,640 --> 00:00:59,560
Vamos a hacer que esta película no sea el mismo sonido aquí.

16
00:00:59,610 --> 00:01:02,370
Sí, es bastante divertido, pero.

17
00:01:02,400 --> 00:01:06,190
Pero la razón por la que estamos haciendo esto no es solo porque es un proyecto divertido.

18
00:01:06,390 --> 00:01:11,870
Lo estamos haciendo porque tenemos que usar las bibliotecas aquí y vamos a usar dos bibliotecas, una mencionada

19
00:01:11,880 --> 00:01:15,310
se llama Paper genius y otra se llama How they're genius.

20
00:01:15,720 --> 00:01:20,760
Y solo quiero que veas cómo es el proceso cuando incorporas una biblioteca en tu código.

21
00:01:20,760 --> 00:01:26,460
Y cada vez que escribo un plan de estudios, ya sea para un curso vespertino o un

22
00:01:26,460 --> 00:01:32,820
curso de seis meses o tres meses o un curso en línea siempre me aseguro de que haya

23
00:01:32,850 --> 00:01:39,330
algún proyecto o tarea que obligue a los estudiantes a profundizar un poco los muelles de una biblioteca o

24
00:01:39,330 --> 00:01:42,810
averiguar cómo incorporar algún código externo en su propia aplicación.

25
00:01:42,810 --> 00:01:48,570
Y por lo general trato de convertirlo en algo que sea divertido como un juguete o una divertida

26
00:01:48,570 --> 00:01:49,210
demostración interactiva.

27
00:01:49,320 --> 00:01:55,260
Así que he hecho cosas con audio antes con animaciones, pero también con la cámara web, el seguimiento de rostros y

28
00:01:55,260 --> 00:01:56,640
el seguimiento de la cabeza.

29
00:01:56,820 --> 00:02:01,050
Hay bibliotecas que pueden hacer casi cualquier cosa ahora con el navegador, es realmente impresionante.

30
00:02:01,440 --> 00:02:03,750
Aunque este es realmente divertido.

31
00:02:03,990 --> 00:02:10,380
Nuevamente tomamos dos bibliotecas de Paperchase y lo lúgubres que usamos paperchase para ayudar con

32
00:02:10,380 --> 00:02:11,490
gráficos y animaciones.

33
00:02:11,790 --> 00:02:15,330
Entonces tienen algunos ejemplos realmente divertidos.

34
00:02:15,480 --> 00:02:23,490
Si hace clic en Showcase en realidad y en el papel Jasc dot showcase, le muestran algunos casos de uso real en los que la gente

35
00:02:23,490 --> 00:02:27,110
ha usado el papel solo en la naturaleza de los ejemplos claros.

36
00:02:27,270 --> 00:02:32,930
Hay algunos juguetes divertidos que realmente amo. Aquí probablemente jueguen con esto durante horas.

37
00:02:33,060 --> 00:02:36,910
Algo es muy relajante para mí.

38
00:02:37,260 --> 00:02:40,360
Tan divertidas cosas que podemos hacer con paperchase.

39
00:02:40,470 --> 00:02:48,210
Una vez más, todo lo que Paperchase puede hacer por nuestra cuenta sin Paperchase, pero es mucho trabajo.

40
00:02:48,360 --> 00:02:50,460
Entonces te mostraré lo que quiero decir.

41
00:02:50,460 --> 00:02:51,680
El código aquí.

42
00:02:51,690 --> 00:02:57,990
Así que presiono una tecla en este caso la letra P para hacer ese círculo y reducirlo así para

43
00:02:57,990 --> 00:03:01,830
hacer esa animación y también noto que cambia de color un poco.

44
00:03:02,040 --> 00:03:05,970
No sé si puedes ver eso, pero va de púrpura o azul a púrpura.

45
00:03:06,060 --> 00:03:09,870
O si hago otro, esto va del amarillo al verde.

46
00:03:10,200 --> 00:03:16,890
Esa animación y esa transición sin papel J us podrían ser 50 líneas.

47
00:03:17,040 --> 00:03:19,920
Tal vez podríamos arreglarnos con 20 o más líneas con papel.

48
00:03:19,950 --> 00:03:20,280
Sí.

49
00:03:20,280 --> 00:03:21,550
Son menos de cinco.

50
00:03:21,690 --> 00:03:23,240
Es realmente muy simple.

51
00:03:23,250 --> 00:03:26,960
Lo mismo con Hausler, Howler nos ayuda a reproducir audio.

52
00:03:27,120 --> 00:03:33,030
Podemos hacer todo esto sin embargo, al igual que podemos hacer todo J queery todo lo que hace

53
00:03:33,030 --> 00:03:37,940
y podemos pasar sin j queery a menudo significa que tenemos que escribir más código.

54
00:03:38,070 --> 00:03:43,230
Así que esto reproduce un sonido. Aquí hay un ejemplo de que vamos a hacer algo muy

55
00:03:43,230 --> 00:03:48,090
similar a esto, donde vamos a reproducir un sonido cuando tocas una tecla y cada tecla

56
00:03:48,700 --> 00:03:57,070
tiene su propio sonido único, así que estoy golpeando. Q siempre juega. ese ruido y siempre es esa transición de color azul claro a un azul más oscuro.

57
00:03:57,120 --> 00:04:02,520
Una última nota es que los círculos están en una respuesta aleatoria en una ubicación aleatoria cada vez que

58
00:04:02,520 --> 00:04:03,390
presionas esa tecla.

59
00:04:03,510 --> 00:04:09,300
Entonces, la ubicación no está configurada, no corresponde a la clave, solo el color y el sonido que se reproduce.

60
00:04:10,180 --> 00:04:11,430
Bien, excelente.

61
00:04:11,430 --> 00:04:13,560
Entonces en el siguiente video comenzaremos.

62
00:04:13,560 --> 00:04:18,580
Una cosa que quiero señalar antes de comenzar es que todos estos sonidos

63
00:04:19,080 --> 00:04:21,670
que escuchas los tocan a todos realmente.

64
00:04:23,630 --> 00:04:26,940
Sí, algunos sonidos realmente agradables.

65
00:04:27,060 --> 00:04:29,560
De hecho, podemos usarlos en este proyecto juntos.

66
00:04:29,970 --> 00:04:31,600
Los he incluido como descarga.

67
00:04:31,770 --> 00:04:36,660
Te mostraré aquí si descargas el archivo zip de sonido.

68
00:04:36,690 --> 00:04:37,740
Hay muchos sonidos.

69
00:04:37,740 --> 00:04:40,260
Veinte algo suena en ese archivo.

70
00:04:40,290 --> 00:04:44,550
Entonces hay algunos sonidos realmente agradables allí y realmente podemos usarlos todos.

71
00:04:44,580 --> 00:04:46,970
Son de un proyecto de código abierto y gueto.

72
00:04:47,310 --> 00:04:52,270
En realidad, es lo que Patta usa o lo que Pedda Tap es en realidad.

73
00:04:52,590 --> 00:04:54,680
Es esta sincronía neuronal en atraparla.

74
00:04:54,690 --> 00:04:58,900
Entonces tiene animaciones si quieres ver esas animaciones que no vamos a hacer.

75
00:04:58,970 --> 00:05:02,410
Es mucho más complejo pero también tiene todos los sonidos.

76
00:05:02,640 --> 00:05:08,730
Entonces, lo que hice fue tomar el sonido de esta carpeta, todos estos sonidos, y

77
00:05:08,730 --> 00:05:09,570
comprimirlos juntos.

78
00:05:09,570 --> 00:05:14,330
Hay mucho más si quieres elegir diferentes sonidos para obtener y no

79
00:05:14,760 --> 00:05:19,160
descargar esto, pero me gustan los sonidos que están en esa carpeta.

80
00:05:19,330 --> 00:05:21,750
También señale la licencia aquí.

81
00:05:21,750 --> 00:05:25,030
Podemos usarlo licencia MIT echar un vistazo si lo desea.

82
00:05:25,320 --> 00:05:29,790
Sonido realmente agradable, así que no estoy seguro de quién los hizo si el creador los creó.

83
00:05:29,790 --> 00:05:33,690
Pero hay algunos sonidos realmente buenos que usaremos y son idénticos a lo que usa el

84
00:05:33,690 --> 00:05:34,250
grifo patta.

85
00:05:34,410 --> 00:05:35,620
Así que descarga esos.

86
00:05:35,640 --> 00:05:38,600
Parece que es solo un directorio con muchos sonidos.

87
00:05:38,640 --> 00:05:40,860
Y lo usaremos en las próximas lecciones.

88
00:05:41,160 --> 00:05:46,970
siguiente video y les dejaré los últimos segundos aquí y haré algo en este CD.

89
00:05:46,990 --> 00:05:50,010
Así que seguimos adelante y comenzamos en el