1
00:00:01,106 --> 00:00:02,703
Hay varias maneras de hacer que algo se vea animado,

2
00:00:03,193 --> 00:00:05,233
Pero el principio basico es el mismo.

3
00:00:05,243 --> 00:00:07,133
Si tomas un conjunto de fotos

4
00:00:07,133 --> 00:00:09,733
en la que cada una es solo un poco diferente a la primera

5
00:00:09,733 --> 00:00:11,463
y moverte entre ellas lo mas rapido posible

6
00:00:11,463 --> 00:00:13,273
se vera como si tu dibijo se estuviera moviendo

7
00:00:13,273 --> 00:00:15,893
Alla en los viejos tiempos,se hacian estos dibijos a mano.

8
00:00:16,166 --> 00:00:19,626
y se tardaban tanto tiempo en hacer 3 segunods de animacion.

9
00:00:19,703 --> 00:00:22,113
Agraciadamente, vivimos en el futuro.

10
00:00:22,826 --> 00:00:25,776
Es bien facil hacer una animacion sencilla haciendolo con codigos.

11
00:00:26,126 --> 00:00:27,516
Y les mostraré como!

12
00:00:27,785 --> 00:00:30,995
A la derecha ves un carrito hermoso y un trasfondo amarillo encantador

13
00:00:31,474 --> 00:00:34,294
y si, si yo diseñe este carrito, gracias.

14
00:00:34,933 --> 00:00:38,113
Bueno, aqui ves en este bellos trasfondo

15
00:00:38,570 --> 00:00:42,080
Y el coche no tiene ningún contornos, por lo que estamos llamando a esta función noStroke ().

16
00:00:42,518 --> 00:00:47,248
y aqui en la variable de "x" le damos la posicion de 10

17
00:00:47,467 --> 00:00:49,441
y cambiamos el valor

18
00:00:49,441 --> 00:00:51,371
y hace que el carro se mueva de atras adelante.

19
00:00:51,863 --> 00:00:52,803
Traelo hasta el 10

20
00:00:53,516 --> 00:00:57,406
Y entonces aquí estamos estableciendo el color de relleno del coche y dibujando dos rectángulos de la carrocería del coche.

21
00:00:57,603 --> 00:01:00,073
Así, parece que este primer rectángulo es para el fondo

22
00:01:00,073 --> 00:01:01,853
Y este rectángulo es para la parte superior.

23
00:01:02,401 --> 00:01:04,901
Y entonces aquí estamos haciendo lo mismo con las ruedas

24
00:01:04,901 --> 00:01:06,971
Establecemos el color de relleno y dibujamos dos elipses

25
00:01:06,971 --> 00:01:08,431
Uno en x 25

26
00:01:08,629 --> 00:01:10,099
Y en x + 75

27
00:01:10,187 --> 00:01:12,527
Y finalmente llegamos a las cosas nuevas.

28
00:01:12,672 --> 00:01:15,002
Esta cosa aquí se llama definición de una función.

29
00:01:15,002 --> 00:01:16,692
Tú lo aprenderás más adelante

30
00:01:16,692 --> 00:01:19,332
Así que por ahora basta con memorizar lo que tenemos aqui.

31
00:01:19,332 --> 00:01:23,392
Las cosas importantes que anotar son esta palabra 'draw' y estas llaves.

32
00:01:24,142 --> 00:01:25,042
Esta llave de apertura aqui.

33
00:01:25,062 --> 00:01:26,092
Y esta llave de cierre aqui.

34
00:01:26,746 --> 00:01:29,956
Todo esto es lo que llamamos el draw loop, o el bucle de animación.

35
00:01:29,956 --> 00:01:34,916
Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rapido

36
00:01:35,000 --> 00:01:36,340
Es por eso que se llama bucle

37
00:01:36,480 --> 00:01:41,470
Y entonces todo lo que este fuera de estas llaves se ejecuta solo una ves al comienzo del programa.

38
00:01:41,520 --> 00:01:45,090
Asi que el primer paso de la animación es poner todo el codigo dentro de las llaves

39
00:01:45,300 --> 00:01:47,510
Para que las imagenes se repitan una y otra vez.

40
00:01:47,600 --> 00:01:51,290
Asi que vamos a hacer eso. Lo que are sera mover todo el codigo del dibujo.

41
00:01:51,290 --> 00:01:53,470
Y plop hacia abajo dentro de mi bucle

42
00:01:53,863 --> 00:02:01,453
Y para recordarme que este bloque del código va dentro de estas llaves, voy a sangrar o separar todo esto seleccionando todo y presiono "tab"

43
00:02:02,193 --> 00:02:05,363
Y ahora se que todo este codigo esta dentro de las llaves

44
00:02:05,754 --> 00:02:09,754
Pero tu dirás, todo esto esta exactamente lo mismo, nada ha cambiado.

45
00:02:10,157 --> 00:02:17,477
Debido a que es la primera vez que se ejecuta el bucle draw, 'está bien? , vamos a hacer una nueva variable x, ajústelo a 10, dibujar dos ellipsis

46
00:02:17,477 --> 00:02:24,187
Y luego se va a ir todo el camino de regreso a la cima y decir, 'hacer una nueva variable x, ajústelo a 10, dibuja dos , dibujar dos circulos

47
00:02:24,187 --> 00:02:28,177
Y luego, 'hacer una nueva variable x, establézcalo en 10, dibujar su re...' Exactamente lo mismo

48
00:02:28,177 --> 00:02:30,677
No ha cambiado nada, claro, no vamos a ver ninguna animación.

49
00:02:31,030 --> 00:02:34,150
Y es que dibuja los rectangulos y circulos encima de los anteriores.

50
00:02:34,606 --> 00:02:39,806
Recuerda lo que dijimos: si queremos hacer algo parecer animado, tenemos que cambiar el dibujo un poquito a la vez.

51
00:02:40,305 --> 00:02:42,055
Si quiero que mi coche avance

52
00:02:42,565 --> 00:02:45,165
Yo debería cambiar el valor de esta variable x, verdad?

53
00:02:45,165 --> 00:02:47,245
SI, justo como lo hace... 11

54
00:02:47,696 --> 00:02:50,846
¡¡Ah!! ¡¡No!! Pero ahora esto sólo va a ser 11 solo una vez.

55
00:02:50,979 --> 00:02:57,109
¿como rayos se supone que yo consigo que el valor de x siga cambiando cuando la computadora sólo dirige el mismo código una y otra vez?

56
00:02:57,413 --> 00:02:59,103
Bien, miren este truco de magia

57
00:02:59,366 --> 00:03:02,286
Recuerde, esta 'var x' hace una nueva variable.

58
00:03:02,556 --> 00:03:07,836
Cuando tenemos dentro de un bucle Draw como esta, que hace una nueva variable "x" cada vez.

59
00:03:08,110 --> 00:03:12,640
Lo que tenemos que hacer es hacer esta variable fuera del bucle empate. De esa manera sólo hará que sea una vez.

60
00:03:13,343 --> 00:03:22,553
Y luego, cada vez que el ordenador ejecuta este código y ve a la variable x, que va a volver a utilizar la misma variable desde antes de usarla

61
00:03:22,729 --> 00:03:29,739
así que sólo voy a hacer eso, voy a tomar esta variable, y vamos a hacer fuera del bucle draw por lo que ahora sólo está haciendo esa variable una vez,

62
00:03:30,869 --> 00:03:37,999
y cada vez esto entra corriendo en esta variable x esto va a reutilizar la misma variable. Y ahora mismo el último valor que le asignamos era '11',

63
00:03:38,270 --> 00:03:41,190
entonces esto siempre va a ser 11. Y aquí está donde entra la magia .

64
00:03:41,517 --> 00:03:51,577
En algún sitio del bucle draw, vamos a cambiar el valor de x para ser un poco más que esto solía ser, como este: el x consigue el viejo valor de x más, digamos, 1.

65
00:03:52,885 --> 00:03:54,375
Si!! esta funcionando!!

66
00:03:54,796 --> 00:04:02,436
Excepto, ajá, es tan graso. Y si te estás preguntando por qué se ve de esa manera, es porque nos olvidamos de dibujar este fondo en el interior del bucle draaw

67
00:04:02,436 --> 00:04:06,846
Así que es dibujar el coche una y otra vez, pero se puede ver todos los coches viejos por debajo del nuevo.

68
00:04:06,846 --> 00:04:11,096
Así que si me pongo esta línea en la parte superior del bucle draw, al igual que,

69
00:04:11,954 --> 00:04:15,554
y luego presione 'restart' para que pueda ver mi coche nuevo ...

70
00:04:15,900 --> 00:04:17,820
Hurra! Esta perfecto!

71
00:04:18,174 --> 00:04:22,014
Y si queremos hacer que el coche vaya más rápido, sólo podemos cambiar la cantidad que aumentamos x por cada vez,

72
00:04:22,064 --> 00:04:27,824
así que si lo hacemos 10, whoo! Es fuera de la pantalla! Y yo ni siquiera puedo hacer que sea negativo, por lo que 'x - 10' y ...

73
00:04:28,504 --> 00:04:32,264
Aquí esta! Que sea positivo de nuevo, gritos

74
00:04:33,320 --> 00:04:34,480
... ahí va.

75
00:04:34,637 --> 00:04:36,277
Así que aquí están las cosas importantes para recordar

76
00:04:36,552 --> 00:04:42,832
Esta cosa aquí se llama el 'draw bucle'. Usted debe poner su código de dibujo dentro de aquí, así que pondremos dibuja una y otra vez

77
00:04:43,568 --> 00:04:49,218
Y entonces, ¿quieres hacer una variable fuera de su bucle draw. Es super importante para que la variable fuera del bucle draw

78
00:04:51,838 --> 00:04:55,554
A continuación, dentro del bucle draw aquí, vamos a cambiar la variable un poco

79
00:04:55,747 --> 00:05:01,277
por lo general mediante el establecimiento a su valor anterior, además de un número, más o menos un número.

80
00:05:02,137 --> 00:05:07,840
Y, por último, ¿quieres usar las variables en algún lugar de su código de dibujo para que su dibujo se ve diferente cada vez.

81
00:05:08,120 --> 00:05:11,000
Y, eso es todo!