1
00:00:00,240 --> 00:00:00,610
DE ACUERDO.

2
00:00:00,690 --> 00:00:01,960
Así que comencemos aquí.

3
00:00:02,040 --> 00:00:07,390
Y este video se enfocará en configurar Paperchase y hacer algunas animaciones simples y simples.

4
00:00:07,440 --> 00:00:09,110
Así que no hay audio todavía.

5
00:00:09,120 --> 00:00:12,400
Lo primero que señalaré es que estoy en un nuevo directorio que creé.

6
00:00:12,720 --> 00:00:14,930
Agregué ese directorio de sonidos aquí.

7
00:00:14,940 --> 00:00:19,500
Así que asegúrese de no tener que hacerlo necesariamente para este video porque no estará reproduciendo

8
00:00:19,500 --> 00:00:19,970
los sonidos.

9
00:00:19,980 --> 00:00:25,950
Pero si quiere seguir un directorio, asegúrese de arrastrar o copiar esa carpeta de sonidos

10
00:00:25,950 --> 00:00:26,820
en él.

11
00:00:26,850 --> 00:00:33,960
Lo siguiente que debe hacer es crear nuestro archivo para que guarde el archivo en

12
00:00:34,740 --> 00:00:38,650
el directorio correcto y lo llamaré círculos cada vez.

13
00:00:39,810 --> 00:00:46,490
Bueno, yo en nuestro h tim L. esqueleto, por supuesto, así y lo dejaremos así por el momento.

14
00:00:46,800 --> 00:00:51,110
Así que vamos a abrirlo, realmente no deberíamos ver nada.

15
00:00:51,120 --> 00:00:53,710
Ahora vamos al genio del papel.

16
00:00:54,000 --> 00:00:55,370
De nuevo, realmente amo este.

17
00:00:55,560 --> 00:01:00,530
Pero vamos a alejarnos de esto y vamos a ir a descargar para comenzar.

18
00:01:01,350 --> 00:01:06,390
Y lo primero que haremos es simplemente descargar la versión más reciente que ya he hecho.

19
00:01:07,260 --> 00:01:10,810
Entonces, cuando termines con eso, se verá así.

20
00:01:11,010 --> 00:01:15,050
Y lo primero que podemos hacer es echar un vistazo en el directorio de ejemplos.

21
00:01:15,090 --> 00:01:19,600
Echemos un vistazo a la estrella animada animada.

22
00:01:19,860 --> 00:01:23,880
Bastante divertido jugar con esto me marea, así que voy a cerrar eso.

23
00:01:23,880 --> 00:01:26,280
Pero también puedes echar un vistazo a algunos de los otros.

24
00:01:26,280 --> 00:01:28,300
Choque de caramelos.

25
00:01:29,310 --> 00:01:32,010
Entonces hay una buena animación que puedes hacer.

26
00:01:32,130 --> 00:01:35,590
Hay un poco de física involucrada aquí.

27
00:01:35,610 --> 00:01:38,120
Qué más tenemos.

28
00:01:38,130 --> 00:01:45,110
Esta animación de línea genial y un montón de otros eres tú.

29
00:01:45,110 --> 00:01:49,290
Me gusta mucho este tipo de efecto de paralaje a medida que mueves el mouse.

30
00:01:49,830 --> 00:01:50,150
DE ACUERDO.

31
00:01:50,190 --> 00:01:52,400
Entonces puedes pasar horas haciendo esto.

32
00:01:52,410 --> 00:01:55,450
Hay muchos buenos ejemplos que puede abrir cualquiera de ellos si lo desea.

33
00:01:55,470 --> 00:01:56,980
Eche un vistazo a cómo funciona.

34
00:01:57,060 --> 00:02:04,500
Así que echemos un vistazo a ese espacio, una primera cosa que verás es que estamos incluyendo el papel J. S. Necesitamos ese archivo, por supuesto, la biblioteca, tal como lo necesitamos para Jay Querrey.

35
00:02:04,590 --> 00:02:08,060
Pero hay algo que no has visto

36
00:02:08,460 --> 00:02:14,670
antes, que es que tenemos un script script type equal slash paper script.

37
00:02:14,730 --> 00:02:16,070
Entonces, hay un tipo particular de

38
00:02:16,260 --> 00:02:22,620
archivo o script que podemos escribir, llamado script de papel, que es un lenguaje específico de dominio que básicamente es un lenguaje que está hecho específicamente para paperchase.

39
00:02:22,620 --> 00:02:29,240
Por lo tanto, no es algo que funcione a menos que tengamos Paperchase incluido.

40
00:02:29,250 --> 00:02:33,350
Y luego también ves que este lienzo de atributo del lienzo es igual al lienzo.

41
00:02:33,570 --> 00:02:37,960
Así que esto es un poco extraño lo que un lienzo es un elemento himnario envejecido.

42
00:02:37,980 --> 00:02:42,370
Entonces es en realidad donde todo lo que hacemos.

43
00:02:42,540 --> 00:02:45,550
Te mostraré que inspecciones esto ahora mismo.

44
00:02:45,600 --> 00:02:47,590
Esta es la versión de trabajo o la versión final.

45
00:02:47,730 --> 00:02:50,280
Si eché un vistazo primero para mostrarte cómo funciona.

46
00:02:50,380 --> 00:02:54,070
De nuevo, si echo un vistazo e inspecciono este fondo negro, no es el cuerpo.

47
00:02:54,070 --> 00:02:59,450
Es algo llamado lienzo y lienzo es un elemento

48
00:02:59,700 --> 00:03:06,900
HMO que básicamente actúa como un lugar para hacer animaciones y gráficos.

49
00:03:06,930 --> 00:03:08,040
Entonces, si voy a DN,

50
00:03:08,280 --> 00:03:15,990
un lienzo para buscar puede agregar que agregar un olor envejecido de cinco a cada elemento de fumar cannabis se puede utilizar para dibujar gráficos para que sean secuencias de comandos en Javascript.

51
00:03:16,020 --> 00:03:19,010
Entonces eso es todo lo que es.

52
00:03:19,290 --> 00:03:20,300
Es un elemento en el lienzo que por sí solo sin javascript, realmente no hace nada.

53
00:03:20,310 --> 00:03:26,000
Pero luego vamos y agregamos javascript para decir cosas como hacer que sea un rectángulo

54
00:03:26,280 --> 00:03:33,030
aquí, que sea verde, hacer una figura tridimensional aquí, hacer esta animación y lo hacemos todo con Javascript.

55
00:03:33,030 --> 00:03:37,140
Entonces, papel J. S. usa un elemento canvas

56
00:03:37,140 --> 00:03:40,830
Es el escenario donde se agrega en todas las animaciones en todos los gráficos.

57
00:03:40,920 --> 00:03:45,000
Entonces necesitamos tener un lienzo en nuestra página como puede ver para este ejemplo de espacio.

58
00:03:45,000 --> 00:03:49,140
Si voy al fondo, lo único que hay en el

59
00:03:49,560 --> 00:03:56,370
cuerpo es un lienzo que tiene una identificación igual al lienzo y también el fondo en negro.

60
00:03:56,370 --> 00:03:59,760
Entonces Id igual que el lienzo corresponde a esta línea aquí.

61
00:03:59,850 --> 00:04:04,500
Lienzo es igual a lienzo.

62
00:04:04,500 --> 00:04:06,300
Así que solo le estamos diciendo

63
00:04:06,300 --> 00:04:14,220
a este archivo de script en papel o a este script de script en papel qué ID buscar en el ejemplo que acabo de nombrar, pero que es canvas.

64
00:04:14,220 --> 00:04:16,460
Así que vamos a hacer algo muy similar a esto.

65
00:04:16,800 --> 00:04:18,890
Pero antes de llegar allí debemos asegurarnos de incluir el papel sí.

66
00:04:18,930 --> 00:04:22,820
Entonces cuando vas a la descarga.

67
00:04:23,220 --> 00:04:26,250
Y en lugar de abrir ejemplos, vamos a

68
00:04:26,250 --> 00:04:32,190
ver indexados y luego podemos elegir papel o papel lleno de hombres y entender el completo aquí.

69
00:04:32,190 --> 00:04:35,870
Así que voy a copiar eso en

70
00:04:35,910 --> 00:04:45,450
nuestro directorio para que Dasch esté completo, pero entonces, en nuestra propia aplicación, debemos asegurarnos de incluir eso.

71
00:04:45,450 --> 00:04:47,410
Así que Source es igual al papel Dasch full japes así como así y ahorra.

72
00:04:47,670 --> 00:04:55,200
Y luego lo que haremos es actualizar la página en Chrome.

73
00:04:55,620 --> 00:04:59,760
Asegúrate de que no obtenemos un error.

74
00:05:00,120 --> 00:05:01,630
Estupendo.

75
00:05:01,740 --> 00:05:02,390
Entonces encontró el archivo bien.

76
00:05:02,430 --> 00:05:04,590
Ahora vamos a los documentos de genio de papel y miramos los tutoriales, así que en realidad no hice esto al principio.

77
00:05:04,590 --> 00:05:11,580
Pero sí quiero leer la descripción de qué papel JSA es.

78
00:05:12,120 --> 00:05:15,490
Así que es un marco de scripting de gráficos vectoriales de código abierto que se ejecuta en la parte superior de la edad en mis cinco lienzos.

79
00:05:15,780 --> 00:05:21,290
cantidad de funcionalidades poderosas para crear y trabajar con gráficos vectoriales y curvas

80
00:05:22,080 --> 00:05:28,200
de Bezier perfectamente envueltos en una interfaz de programación limpia y consistente bien diseñada.

81
00:05:28,230 --> 00:05:33,540
Ofrece un modelo de objetos de documento de barra oblicua y una gran

82
00:05:33,540 --> 00:05:35,950
Tan amable de un bocado.

83
00:05:36,000 --> 00:05:37,540
Básicamente es una biblioteca de gráficos de biblioteca de animación de biblioteca de dibujo de trasero.

84
00:05:37,560 --> 00:05:42,120
Eso es realmente muy popular.

85
00:05:42,120 --> 00:05:43,560
Hay algunos de ellos

86
00:05:43,560 --> 00:05:50,250
por ahí, así que no es como una consulta en la que es prácticamente la única biblioteca de manipulación de DOM.

87
00:05:50,250 --> 00:05:52,270
El único evento que maneja la biblioteca.

88
00:05:52,290 --> 00:05:54,030
es el más popular.

89
00:05:54,030 --> 00:05:59,400
Hay muchas animaciones en gráficos, pero el papel es que confío en que

90
00:05:59,400 --> 00:06:00,790
De acuerdo, volvamos a los tutoriales y veamos cómo empezar.

91
00:06:01,110 --> 00:06:06,660
Creo que sí, comencé a trabajar con papel.

92
00:06:06,660 --> 00:06:09,000
Sí.

93
00:06:09,020 --> 00:06:09,900
Y nos desplazaremos hacia abajo y echaremos un vistazo a su ejemplo aquí.

94
00:06:10,470 --> 00:06:14,280
Entonces, lo que podríamos hacer es copiar todo esto.

95
00:06:14,820 --> 00:06:17,380
Pero quiero hacerlo una pieza a la vez para que veas cómo funciona.

96
00:06:17,400 --> 00:06:21,290
Comencemos copiando este lienzo solo copiemos toda la línea y lo pondremos en nuestro cuerpo.

97
00:06:21,540 --> 00:06:29,270
Así que lienzo I. RE. es igual a mi lienzo y si actualizo la página no veremos nada en absoluto.

98
00:06:29,970 --> 00:06:36,180
Si esperábamos, veríamos que hay un lienzo

99
00:06:36,270 --> 00:06:44,100
allí, pero si volvemos, copiemos este texto o tipo de letra, porque el lienzo de escritura de papel de tamaño de texto es mi lienzo.

100
00:06:44,100 --> 00:06:48,260
Y pongámoslo aquí y peguemos.

101
00:06:48,260 --> 00:06:52,850
Entonces, si miramos lo que está sucediendo aquí, hay algunos buenos

102
00:06:53,130 --> 00:06:59,150
comentarios que dicen que crea una ruta en papel G-S para trazar una línea.

103
00:06:59,170 --> 00:07:00,000
Entonces hacemos un camino y verán mucha sintaxis aquí que nunca han visto.

104
00:07:00,120 --> 00:07:04,400
Y de nuevo ese es el punto.

105
00:07:04,410 --> 00:07:05,730
El punto es que te estoy obligando a ver algunas cosas nuevas para leer los documentos.

106
00:07:05,940 --> 00:07:09,740
Puede insensibilizarlo a esta sensación de que no sé

107
00:07:09,800 --> 00:07:16,470
lo que estoy haciendo. Nunca he visto este código antes de no saber cómo funciona.

108
00:07:16,480 --> 00:07:17,890
Ese es el punto de la biblioteca.

109
00:07:17,940 --> 00:07:19,370
No tiene que saber cómo funciona especialmente para algo como animaciones.

110
00:07:19,380 --> 00:07:23,310
Simplemente alégrate de que alguien más se ocupe de eso por ti.

111
00:07:23,310 --> 00:07:26,120
Definitivamente me salvó la vida muchas veces.

112
00:07:26,130 --> 00:07:28,700
Entonces creamos una nueva ruta aquí, guárdela en una variable.

113
00:07:28,920 --> 00:07:33,070
Cambiamos el color de trazo a negro y luego creamos un punto para el

114
00:07:33,070 --> 00:07:40,800
inicio en 100 coma 100 y luego movemos nuestro camino hasta ese comienzo y luego trazamos una línea para comenzar más 100 X y 50 y negativa.

115
00:07:40,800 --> 00:07:50,960
Así que le mostraré exactamente lo que hace, pero dibuja una línea que comienza en 100 100 y luego

116
00:07:51,210 --> 00:07:57,780
mueve esa línea o conecta el primer punto con 300 coma 50.

117
00:07:57,780 --> 00:08:04,800
Entonces, si echamos un vistazo, asegúrese de que todo esté funcionando si estamos frescos.

118
00:08:04,800 --> 00:08:09,260
Terminamos con una línea.

119
00:08:10,260 --> 00:08:12,160
Entonces, lo mejor que puedes hacer cuando tienes algo nuevo como este es jugar.

120
00:08:13,170 --> 00:08:16,730
Intenta cambiar esto

121
00:08:17,040 --> 00:08:18,480
Entonces es rojo y el comienzo ahora es 0 100.

122
00:08:18,630 --> 00:08:25,980
Ahí vamos, solo movimos nuestra línea o vamos a cambiar esto para que sea algo más drástico, como 500.

123
00:08:25,980 --> 00:08:33,250
Entonces puedes jugar con esto todo el día.

124
00:08:33,510 --> 00:08:36,070
Pero lo que realmente quiero señalar es

125
00:08:36,420 --> 00:08:43,140
que estamos creando un script de script en papel, no texto, por lo que es un script de JavaScript

126
00:08:43,140 --> 00:08:50,340
y estamos configurando este lienzo de atributo canvas como mi lienzo, que es el nombre o el ID que le asignamos.

127
00:08:50,340 --> 00:08:51,580
Así que estos tienen

128
00:08:51,660 --> 00:08:58,110
que coincidir y el objetivo de esto es simplemente decirle a este archivo de script en papel dónde dibujar las cosas.

129
00:08:58,110 --> 00:08:58,530
Qué lienzo para usar

130
00:08:58,560 --> 00:09:00,040
Entonces podemos jugar un poco más.

131
00:09:00,300 --> 00:09:02,360
Y le recomiendo encarecidamente

132
00:09:02,460 --> 00:09:09,990
que pare el video y eche un vistazo a los tutoriales y pruebe otras cosas.

133
00:09:09,990 --> 00:09:10,890
Así que solo te indicaré las formas predefinidas de la ruta, que es lo que vamos a usar.

134
00:09:11,100 --> 00:09:17,720
Vamos a hacer círculos con nuestra aplicación aquí.

135
00:09:17,820 --> 00:09:21,280
Entonces esto es lo que necesitaremos hacer.

136
00:09:21,690 --> 00:09:24,270
debe darle un punto para hacer un círculo.

137
00:09:24,690 --> 00:09:30,510
Copiemos este código aquí, así que Pat, haga clic en un nuevo círculo de puntos, y luego

138
00:09:30,630 --> 00:09:31,820
Y luego el radio se parece.

139
00:09:32,160 --> 00:09:34,240
Para que pueda ver que

140
00:09:34,320 --> 00:09:43,770
hay una explicación, necesita un punto central x 100 y 70 y un radio de 50 y luego un color de relleno.

141
00:09:43,770 --> 00:09:44,690
Así que echemos un vistazo solo copie esto al final de nuestro código y vea qué pasa.

142
00:09:45,000 --> 00:09:51,120
Que es algo de lo que haces mucho con JS y bibliotecas similares.

143
00:09:51,720 --> 00:09:56,160
Simplemente experimentas.

144
00:09:56,340 --> 00:09:57,340
Así que cambiemos el radio a 10.

145
00:09:57,480 --> 00:10:01,520
Ahí tienes.

146
00:10:01,530 --> 00:10:02,880
Entonces también podríamos tratar de hacer otro círculo copiando esto a otra línea.

147
00:10:03,540 --> 00:10:09,000
Vamos a llamarlo var circle 2 es igual a new path dot.

148
00:10:09,150 --> 00:10:15,610
Y vamos a hacer que este sea realmente grande y morado.

149
00:10:15,840 --> 00:10:18,340
Entonces, punto nuevo y pongámoslo en 50.

150
00:10:18,630 --> 00:10:22,250
Ven a 50 y va a ser enorme.

151
00:10:22,250 --> 00:10:25,740
Entonces le da un radio de 300 y luego el círculo para llenar el color es igual a púrpura.

152
00:10:25,740 --> 00:10:34,730
Solo como esa actualización.

153
00:10:34,830 --> 00:10:38,180
Y puede ver que terminamos con ese círculo gigantesco que realmente no

154
00:10:38,670 --> 00:10:43,650
puede decir qué tan grande es porque nuestro lienzo no ha ocupado todo el ancho de nuestra pantalla.

155
00:10:43,710 --> 00:10:46,740
Entonces hagamos eso a continuación porque queremos que nuestro lienzo ocupe todo el ancho.

156
00:10:46,950 --> 00:10:52,860
Así que voy a crear una nueva hoja de estilo, así que agregué

157
00:10:52,860 --> 00:11:00,660
una etiqueta de enlace aquí. Tref es igual al punto SS del círculo, que no existe.

158
00:11:00,660 --> 00:11:01,790
Y luego

159
00:11:02,430 --> 00:11:10,870
guardemos un archivo llamado Circle Stut see assess y lo que haremos será agregar lienzos al 100 por ciento.

160
00:11:10,900 --> 00:11:12,210
Y también vamos a darle un fondo de negro.

161
00:11:12,840 --> 00:11:17,930
Y si estamos frescos, puedes ver que estamos cerca, pero tenemos algunas cosas.

162
00:11:17,930 --> 00:11:21,880
El primero de ellos es que nuestro cuerpo en realidad no baja por completo.

163
00:11:21,870 --> 00:11:25,210
Entonces nuestro lienzo ocupa el 100% del ancho.

164
00:11:25,230 --> 00:11:28,860
Pero incluso si le damos una altura del 100 por ciento en este momento, en

165
00:11:28,980 --> 00:11:31,830
realidad no va a cambiar la forma en que lo queremos.

166
00:11:35,490 --> 00:11:38,840
Entonces también tenemos este margen del que queremos deshacernos.

167
00:11:38,850 --> 00:11:41,570
Entonces, en lugar de pasar demasiado tiempo revisando eso, solo te mostraré lo que tenemos que hacer.

168
00:11:42,000 --> 00:11:46,390
Bien, simplemente configure la altura para que sea 100 por ciento y el margen sea cero.

169
00:11:46,770 --> 00:11:54,500
Y si actualizo la página ahora, ocupará toda la pantalla.

170
00:11:54,810 --> 00:11:58,490
Entonces, si quiere entrar más en detalle y entender exactamente por qué

171
00:11:58,860 --> 00:12:05,160
lo hicimos, inspeccione el cuerpo antes de agregar este código y luego comente el cuerpo nuevamente y verá lo que sucede.

172
00:12:05,190 --> 00:12:10,440
Básicamente, solo nos aseguramos de que el cuerpo ocupe todo el ancho y la altura, y no

173
00:12:10,560 --> 00:12:15,570
hay margen, lo que significa que nuestro lienzo se expandirá para ocupar también todo ese espacio.

174
00:12:15,630 --> 00:12:20,020
DE ACUERDO.

175
00:12:20,250 --> 00:12:20,910
Así que creamos un lienzo ahora, eso es lo último que haré en este video.

176
00:12:20,910 --> 00:12:24,680
Solo quería presentarte cómo papeleo tenemos scripts de script en papel.

177
00:12:24,690 --> 00:12:30,420
Le damos un lienzo y luego ponemos un código aquí que nunca has visto antes.

178
00:12:30,420 --> 00:12:35,140
Mucho de esto que nunca había visto hasta que hice este video o hasta que hice este proyecto para este video.

179
00:12:35,190 --> 00:12:40,770
Definitivamente lo he visto antes.

180
00:12:41,100 --> 00:12:42,380
Este video exacto.

181
00:12:42,390 --> 00:12:43,820
Pero el punto es que es nuevo.

182
00:12:43,830 --> 00:12:46,580
Y es por eso que estamos haciendo esto.

183
00:12:46,650 --> 00:12:48,130
Es una habilidad realmente importante poder tomar código redox y básicamente copiarlo y cambiarlo.

184
00:12:48,150 --> 00:12:54,200
Estupendo.

185
00:12:54,330 --> 00:12:54,980
Entonces, en el

186
00:12:54,990 --> 00:12:59,940
próximo video, les daré un ejercicio opcional rápido, de modo que si solo quieren ingresar al proyecto y omitir la experiencia de aprendizaje educativo como quieran llamarlo.

187
00:12:59,940 --> 00:13:05,980
Pero si solo llega a la recompensa, salte el siguiente video.

188
00:13:06,000 --> 00:13:11,170
Sin embargo, recomendaría que lo hagas.

189
00:13:11,190 --> 00:13:13,040
No vamos a hacer la cosa

190
00:13:13,050 --> 00:13:17,070
más impresionante, pero voy a hacer que hagas un ejercicio con algunos círculos.

191
00:13:17,070 --> 00:13:17,860
Muy emocionante.

192
00:13:17,940 --> 00:13:18,500
Lo sé.

193
00:13:18,510 --> 00:13:18,960
DE ACUERDO.

194
00:13:19,200 --> 00:13:19,480
Te veré luego.

195
00:13:19,500 --> 00:13:20,360