[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.75,0:00:03.03,Default,,0000,0000,0000,,Hay varias maneras de hacer que algo se vea animado,
Dialogue: 0,0:00:03.03,0:00:05.23,Default,,0000,0000,0000,,Pero el principio básico es el mismo.
Dialogue: 0,0:00:05.24,0:00:07.13,Default,,0000,0000,0000,,Si tomas un conjunto de fotos
Dialogue: 0,0:00:07.13,0:00:09.73,Default,,0000,0000,0000,,en la que cada una es sólo un poco diferente de la anterior
Dialogue: 0,0:00:09.73,0:00:11.46,Default,,0000,0000,0000,,y te mueves entre ellas lo mas rápido posible
Dialogue: 0,0:00:11.46,0:00:13.27,Default,,0000,0000,0000,,se verá como si tu dibujo se estuviera moviendo.
Dialogue: 0,0:00:13.27,0:00:16.17,Default,,0000,0000,0000,,Allá en los viejos tiempos estos dibujos se hacían a mano,
Dialogue: 0,0:00:16.17,0:00:19.63,Default,,0000,0000,0000,,y se tardaban mucho tiempo en hacer 3 segundos de animación.
Dialogue: 0,0:00:19.63,0:00:22.63,Default,,0000,0000,0000,,Afortunadamente, vivimos en el futuro.
Dialogue: 0,0:00:22.63,0:00:26.06,Default,,0000,0000,0000,,Es muy fácil hacer una animación sencilla con código.
Dialogue: 0,0:00:26.06,0:00:27.74,Default,,0000,0000,0000,,¡Y les mostraré como!
Dialogue: 0,0:00:27.74,0:00:31.34,Default,,0000,0000,0000,,A la derecha ves un carrito hermoso y un color de fondo amarillo encantador.
Dialogue: 0,0:00:31.34,0:00:34.27,Default,,0000,0000,0000,,Y sí, yo diseñe este carrito, gracias.
Dialogue: 0,0:00:34.27,0:00:38.26,Default,,0000,0000,0000,,Bueno, aquí arriba ves que estamos configurando este bello color de fondo
Dialogue: 0,0:00:38.26,0:00:42.33,Default,,0000,0000,0000,,Y el carro no tiene ningún contorno, porque estamos llamando a esta función "noStroke()".
Dialogue: 0,0:00:42.33,0:00:47.43,Default,,0000,0000,0000,,Y aquí estamos haciendo esta nueva variable "x", que es la posición del carro y le asignamos el valor 10.
Dialogue: 0,0:00:47.43,0:00:49.44,Default,,0000,0000,0000,,y puedes ver que si cambiamos el valor
Dialogue: 0,0:00:49.44,0:00:51.62,Default,,0000,0000,0000,,entonces el carro se mueve hacia atrás y hacia adelante.
Dialogue: 0,0:00:51.62,0:00:53.10,Default,,0000,0000,0000,,Lo vamos a traer hasta 10.
Dialogue: 0,0:00:53.10,0:00:55.21,Default,,0000,0000,0000,,Y luego aquí estamos estableciendo el color de relleno del carro
Dialogue: 0,0:00:55.21,0:00:57.60,Default,,0000,0000,0000,,y dibujando dos rectángulos para la carrocería.
Dialogue: 0,0:00:57.60,0:01:00.07,Default,,0000,0000,0000,,Así que este primer rectángulo es para la parte de abajo,
Dialogue: 0,0:01:00.07,0:01:02.37,Default,,0000,0000,0000,,y este rectángulo es para la parte superior.
Dialogue: 0,0:01:02.40,0:01:04.90,Default,,0000,0000,0000,,Y entonces aquí estamos haciendo lo mismo con las ruedas.
Dialogue: 0,0:01:04.90,0:01:06.97,Default,,0000,0000,0000,,Establecemos el color de relleno y dibujamos dos elipses.
Dialogue: 0,0:01:06.97,0:01:08.43,Default,,0000,0000,0000,,Una en "x + 25",
Dialogue: 0,0:01:08.45,0:01:10.08,Default,,0000,0000,0000,,y en "x + 75".
Dialogue: 0,0:01:10.08,0:01:12.53,Default,,0000,0000,0000,,Y finalmente llegamos a las cosas nuevas.
Dialogue: 0,0:01:12.53,0:01:15.00,Default,,0000,0000,0000,,A esto que está aquí le llamamos definición de una función.
Dialogue: 0,0:01:15.00,0:01:16.69,Default,,0000,0000,0000,,Tú lo aprenderás más adelante.
Dialogue: 0,0:01:16.69,0:01:19.33,Default,,0000,0000,0000,,Así que por ahora basta con memorizar lo que tenemos aquí.
Dialogue: 0,0:01:19.33,0:01:24.13,Default,,0000,0000,0000,,Las cosas importantes en que debes poner atención son: esta palabra 'draw' y estas llaves.
Dialogue: 0,0:01:24.14,0:01:25.41,Default,,0000,0000,0000,,Esta de aquí es la llave de apertura.
Dialogue: 0,0:01:25.41,0:01:26.76,Default,,0000,0000,0000,,Y esta es la llave de cierre.
Dialogue: 0,0:01:26.76,0:01:29.96,Default,,0000,0000,0000,,Todo esto es lo que llamamos el ciclo "draw", o el ciclo de animación.
Dialogue: 0,0:01:29.96,0:01:34.91,Default,,0000,0000,0000,,Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rápido.
Dialogue: 0,0:01:34.91,0:01:36.34,Default,,0000,0000,0000,,Es por eso que se llama ciclo.
Dialogue: 0,0:01:36.36,0:01:41.42,Default,,0000,0000,0000,,Y entonces todo lo que está fuera de estas llaves se ejecuta sólo una vez al comienzo del programa.
Dialogue: 0,0:01:41.42,0:01:45.16,Default,,0000,0000,0000,,Así que el primer paso de la animación es poner todo el código dentro de las llaves
Dialogue: 0,0:01:45.16,0:01:47.49,Default,,0000,0000,0000,,Para que las imágenes se repitan una y otra vez.
Dialogue: 0,0:01:47.49,0:01:48.49,Default,,0000,0000,0000,,Así que vamos a hacer eso.
Dialogue: 0,0:01:48.49,0:01:51.29,Default,,0000,0000,0000,,Lo que haré será jalar todo el código del dibujo,
Dialogue: 0,0:01:51.29,0:01:53.74,Default,,0000,0000,0000,,y lo pondré aquí abajo dentro del ciclo.
Dialogue: 0,0:01:53.86,0:01:58.22,Default,,0000,0000,0000,,Y para recordarme que este bloque del código va dentro de estas llaves,
Dialogue: 0,0:01:58.22,0:02:02.19,Default,,0000,0000,0000,,voy a indentar todo esto, seleccionándolo y presionando la tecla "Tab".
Dialogue: 0,0:02:02.19,0:02:05.36,Default,,0000,0000,0000,,Y ahora sé que todo este código está dentro de las llaves.
Dialogue: 0,0:02:05.42,0:02:08.80,Default,,0000,0000,0000,,Pero podrías decir que todo esto está exactamente igual,
Dialogue: 0,0:02:08.80,0:02:10.16,Default,,0000,0000,0000,,nada ha cambiado.
Dialogue: 0,0:02:10.16,0:02:12.18,Default,,0000,0000,0000,,Porque la primera vez que se ejecuta el ciclo "draw",
Dialogue: 0,0:02:12.18,0:02:14.62,Default,,0000,0000,0000,,la computadora va a decir: "Ok, haz una nueva variable 'x',
Dialogue: 0,0:02:14.62,0:02:16.47,Default,,0000,0000,0000,,asígnale el valor 10, dibuja dos rectángulos,
Dialogue: 0,0:02:16.47,0:02:17.67,Default,,0000,0000,0000,,y dibuja dos elipses".
Dialogue: 0,0:02:17.67,0:02:19.09,Default,,0000,0000,0000,,Y luego se va a ir otra vez hasta arriba,
Dialogue: 0,0:02:19.09,0:02:19.96,Default,,0000,0000,0000,,y va a decir:
Dialogue: 0,0:02:19.96,0:02:21.79,Default,,0000,0000,0000,,"Haz una nueva variable 'x', configúrala con el valor 10,
Dialogue: 0,0:02:21.79,0:02:24.19,Default,,0000,0000,0000,,dibuja dos rectángulos, dibujar dos elipses"
Dialogue: 0,0:02:24.19,0:02:26.59,Default,,0000,0000,0000,,Y luego, '" haz una nueva variable "x", configúrala con el valor 10,
Dialogue: 0,0:02:26.59,0:02:27.76,Default,,0000,0000,0000,,exactamente lo mismo.
Dialogue: 0,0:02:27.76,0:02:31.02,Default,,0000,0000,0000,,No ha cambiado nada, claro, no vamos a ver ninguna animación.
Dialogue: 0,0:02:31.03,0:02:34.61,Default,,0000,0000,0000,,Y es que dibuja los rectángulos y elipses encima de los anteriores.
Dialogue: 0,0:02:34.61,0:02:37.30,Default,,0000,0000,0000,,Recuerda lo que dijimos: si queremos hacer algo que parezca animado,
Dialogue: 0,0:02:37.30,0:02:40.10,Default,,0000,0000,0000,,necesitamos cambiar el dibujo un poquito cada vez.
Dialogue: 0,0:02:40.10,0:02:42.58,Default,,0000,0000,0000,,Entonces si quiero que mi carro avance,
Dialogue: 0,0:02:42.58,0:02:45.16,Default,,0000,0000,0000,,debería cambiar el valor de esta variable "x", ¿cierto?
Dialogue: 0,0:02:45.16,0:02:47.72,Default,,0000,0000,0000,,Sí, sólo déjame igualarla a 11.
Dialogue: 0,0:02:47.72,0:02:50.100,Default,,0000,0000,0000,,¡Ah! ¡No! Pero ahora ésta sólo va a ser 11 cada vez.
Dialogue: 0,0:02:50.100,0:02:54.41,Default,,0000,0000,0000,,¿Cómo rayos se supone que voy a hacer para que el valor de "x" esté cambiando,
Dialogue: 0,0:02:54.41,0:02:57.41,Default,,0000,0000,0000,,cuando la computadora ejecuta el mismo código una y otra vez?
Dialogue: 0,0:02:57.41,0:02:59.40,Default,,0000,0000,0000,,Ok, observen este truco de magia.
Dialogue: 0,0:02:59.40,0:03:02.56,Default,,0000,0000,0000,,Recuerden, esta instrucción "var x" crea una nueva variable.
Dialogue: 0,0:03:02.56,0:03:04.57,Default,,0000,0000,0000,,Cuando la tenemos dentro de un ciclo "draw" como éste,
Dialogue: 0,0:03:04.57,0:03:08.11,Default,,0000,0000,0000,,crea una nueva variable "x" cada vez.
Dialogue: 0,0:03:08.11,0:03:10.86,Default,,0000,0000,0000,,Lo que tenemos que hacer es crear esta variable fuera del ciclo "draw".
Dialogue: 0,0:03:10.86,0:03:13.34,Default,,0000,0000,0000,,De esa manera sólo la creará una vez.
Dialogue: 0,0:03:13.34,0:03:17.57,Default,,0000,0000,0000,,Y luego, cada vez que la computadora ejecute este código y vea la variable "x",
Dialogue: 0,0:03:17.57,0:03:22.73,Default,,0000,0000,0000,,va a volver a utilizar la misma variable que antes, usando el último valor que le asignamos.
Dialogue: 0,0:03:22.73,0:03:25.26,Default,,0000,0000,0000,,Así que sólo voy a hacer eso, voy a tomar esta variable,
Dialogue: 0,0:03:25.26,0:03:27.11,Default,,0000,0000,0000,,y la vamos a crear fuera del ciclo "draw".
Dialogue: 0,0:03:27.11,0:03:30.87,Default,,0000,0000,0000,,Así que ahora sólo la está creando una sola vez.
Dialogue: 0,0:03:30.87,0:03:33.24,Default,,0000,0000,0000,,Y cada vez que pase por esta variable "x",
Dialogue: 0,0:03:33.24,0:03:35.28,Default,,0000,0000,0000,,va a usar nuevamente esta misma variable.
Dialogue: 0,0:03:35.28,0:03:37.82,Default,,0000,0000,0000,,Y en este momento, el último valor que le asignamos fue 11,
Dialogue: 0,0:03:37.82,0:03:39.27,Default,,0000,0000,0000,,entonces siempre va a ser 11.
Dialogue: 0,0:03:39.27,0:03:41.52,Default,,0000,0000,0000,,Y aquí es donde entra la magia .
Dialogue: 0,0:03:41.52,0:03:44.44,Default,,0000,0000,0000,,En algún lugar del ciclo "draw", vamos a cambiar el valor de "x",
Dialogue: 0,0:03:44.44,0:03:47.20,Default,,0000,0000,0000,,para que sea un poco más grande que lo que solía ser, como esto:
Dialogue: 0,0:03:47.20,0:03:52.88,Default,,0000,0000,0000,,a "x" le asignamos el valor anterior de "x", más 1.
Dialogue: 0,0:03:52.88,0:03:54.82,Default,,0000,0000,0000,,¡Sí! ¡Está funcionando!
Dialogue: 0,0:03:54.82,0:03:57.01,Default,,0000,0000,0000,,Excepto que se ve tan grotesco.
Dialogue: 0,0:03:57.01,0:03:58.95,Default,,0000,0000,0000,,Y si te estás preguntando por qué se ve de esa manera,
Dialogue: 0,0:03:58.95,0:04:02.44,Default,,0000,0000,0000,,es porque nos olvidamos de dibujar el fondo en el interior del ciclo "draw".
Dialogue: 0,0:04:02.44,0:04:04.56,Default,,0000,0000,0000,,Así que está dibujando el carro una y otra vez,
Dialogue: 0,0:04:04.56,0:04:06.85,Default,,0000,0000,0000,,pero se puede ver todos los coches viejos por debajo del nuevo.
Dialogue: 0,0:04:06.85,0:04:11.70,Default,,0000,0000,0000,,Así que si jalo esta línea a la parte superior del ciclo "draw",
Dialogue: 0,0:04:11.70,0:04:15.76,Default,,0000,0000,0000,,y luego presiono "Restart" para que pueda ver mi carro de nuevo,
Dialogue: 0,0:04:15.76,0:04:18.03,Default,,0000,0000,0000,,¡Sí! ¡Es perfecto!
Dialogue: 0,0:04:18.03,0:04:19.60,Default,,0000,0000,0000,,Y si queremos hacer que el carro vaya más rápido,
Dialogue: 0,0:04:19.60,0:04:22.06,Default,,0000,0000,0000,,sólo debemos cambiar la cantidad en que aumentamos "x" cada vez.
Dialogue: 0,0:04:22.06,0:04:25.06,Default,,0000,0000,0000,,Así que si lo hacemos 10, ¡uuh! ¡se sale de la pantalla!
Dialogue: 0,0:04:25.06,0:04:28.50,Default,,0000,0000,0000,,Incluso puedo hacer que sea negativo, así que "x - 10" y,
Dialogue: 0,0:04:28.50,0:04:30.09,Default,,0000,0000,0000,,¡Aquí viene!
Dialogue: 0,0:04:30.09,0:04:33.32,Default,,0000,0000,0000,,Lo hacemos positivo de nuevo, ¡woo!
Dialogue: 0,0:04:33.32,0:04:34.52,Default,,0000,0000,0000,,¡Ahí va!
Dialogue: 0,0:04:34.52,0:04:36.57,Default,,0000,0000,0000,,Así que aquí están las cosas importantes para recordar:
Dialogue: 0,0:04:36.57,0:04:39.56,Default,,0000,0000,0000,,Esto que tenemos aquí se llama el ciclo "draw".
Dialogue: 0,0:04:39.56,0:04:41.42,Default,,0000,0000,0000,,Deben poner su código de dibujo dentro de este ciclo,
Dialogue: 0,0:04:41.42,0:04:43.57,Default,,0000,0000,0000,,para que sea ejecutado una y otra vez.
Dialogue: 0,0:04:43.57,0:04:46.51,Default,,0000,0000,0000,,Y luego, van a querer crear una variable fuera del ciclo "draw".
Dialogue: 0,0:04:46.51,0:04:49.38,Default,,0000,0000,0000,,Es super importante crear la variable fuera del ciclo "draw",
Dialogue: 0,0:04:49.38,0:04:51.84,Default,,0000,0000,0000,,para que puedan usar la misma variable cada vez.
Dialogue: 0,0:04:51.84,0:04:52.84,Default,,0000,0000,0000,,Luego, dentro del ciclo "draw", justo aquí
Dialogue: 0,0:04:52.84,0:04:55.75,Default,,0000,0000,0000,,vamos a cambiar la variable un poco,
Dialogue: 0,0:04:55.75,0:04:58.69,Default,,0000,0000,0000,,por lo general la vamos a igualar a su valor anterior,
Dialogue: 0,0:04:58.69,0:05:02.14,Default,,0000,0000,0000,,más algún número, más o menos algún número.
Dialogue: 0,0:05:02.14,0:05:05.12,Default,,0000,0000,0000,,Y por último, van a querer usar su variable en algún lugar de su código de dibujo
Dialogue: 0,0:05:05.12,0:05:08.12,Default,,0000,0000,0000,,para que su dibujo se vea diferente cada vez.
Dialogue: 0,0:05:08.12,0:05:09.88,Default,,0000,0000,0000,,Y, ¡eso es todo!