[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.11,0:00:02.70,Default,,0000,0000,0000,,Hay varias maneras de hacer que algo se vea animado,
Dialogue: 0,0:00:03.19,0:00:05.23,Default,,0000,0000,0000,,Pero el principio basico 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 solo un poco diferente a la primera
Dialogue: 0,0:00:09.73,0:00:11.46,Default,,0000,0000,0000,,y moverte entre ellas lo mas rapido posible
Dialogue: 0,0:00:11.46,0:00:13.27,Default,,0000,0000,0000,,se vera como si tu dibijo se estuviera moviendo
Dialogue: 0,0:00:13.27,0:00:15.89,Default,,0000,0000,0000,,Alla en los viejos tiempos,se hacian estos dibijos a mano.
Dialogue: 0,0:00:16.17,0:00:19.63,Default,,0000,0000,0000,,y se tardaban tanto tiempo en hacer 3 segunods de animacion.
Dialogue: 0,0:00:19.70,0:00:22.11,Default,,0000,0000,0000,,Agraciadamente, vivimos en el futuro.
Dialogue: 0,0:00:22.83,0:00:25.78,Default,,0000,0000,0000,,Es bien facil hacer una animacion sencilla haciendolo con codigos.
Dialogue: 0,0:00:26.13,0:00:27.52,Default,,0000,0000,0000,,Y les mostraré como!
Dialogue: 0,0:00:27.78,0:00:30.100,Default,,0000,0000,0000,,A la derecha ves un carrito hermoso y un trasfondo amarillo encantador
Dialogue: 0,0:00:31.47,0:00:34.29,Default,,0000,0000,0000,,y si, si yo diseñe este carrito, gracias.
Dialogue: 0,0:00:34.93,0:00:38.11,Default,,0000,0000,0000,,Bueno, aqui ves en este bellos trasfondo
Dialogue: 0,0:00:38.57,0:00:42.08,Default,,0000,0000,0000,,Y el coche no tiene ningún contornos, por lo que estamos llamando a esta función noStroke ().
Dialogue: 0,0:00:42.52,0:00:47.25,Default,,0000,0000,0000,,y aqui en la variable de "x" le damos la posicion de 10
Dialogue: 0,0:00:47.47,0:00:49.44,Default,,0000,0000,0000,,y cambiamos el valor
Dialogue: 0,0:00:49.44,0:00:51.37,Default,,0000,0000,0000,,y hace que el carro se mueva de atras adelante.
Dialogue: 0,0:00:51.86,0:00:52.80,Default,,0000,0000,0000,,Traelo hasta el 10
Dialogue: 0,0:00:53.52,0:00:57.41,Default,,0000,0000,0000,,Y entonces aquí estamos estableciendo el color de relleno del coche y dibujando dos rectángulos de la carrocería del coche.
Dialogue: 0,0:00:57.60,0:01:00.07,Default,,0000,0000,0000,,Así, parece que este primer rectángulo es para el fondo
Dialogue: 0,0:01:00.07,0:01:01.85,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,,Uno en x 25
Dialogue: 0,0:01:08.63,0:01:10.10,Default,,0000,0000,0000,,Y en x + 75
Dialogue: 0,0:01:10.19,0:01:12.53,Default,,0000,0000,0000,,Y finalmente llegamos a las cosas nuevas.
Dialogue: 0,0:01:12.67,0:01:15.00,Default,,0000,0000,0000,,Esta cosa aquí se llama 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 aqui.
Dialogue: 0,0:01:19.33,0:01:23.39,Default,,0000,0000,0000,,Las cosas importantes que anotar son esta palabra 'draw' y estas llaves.
Dialogue: 0,0:01:24.14,0:01:25.04,Default,,0000,0000,0000,,Esta llave de apertura aqui.
Dialogue: 0,0:01:25.06,0:01:26.09,Default,,0000,0000,0000,,Y esta llave de cierre aqui.
Dialogue: 0,0:01:26.75,0:01:29.96,Default,,0000,0000,0000,,Todo esto es lo que llamamos el draw loop, o el bucle de animación.
Dialogue: 0,0:01:29.96,0:01:34.92,Default,,0000,0000,0000,,Y todo lo que pones dentro de esta llaves se ejecuta una y otra ves muy muy rapido
Dialogue: 0,0:01:35.00,0:01:36.34,Default,,0000,0000,0000,,Es por eso que se llama bucle
Dialogue: 0,0:01:36.48,0:01:41.47,Default,,0000,0000,0000,,Y entonces todo lo que este fuera de estas llaves se ejecuta solo una ves al comienzo del programa.
Dialogue: 0,0:01:41.52,0:01:45.09,Default,,0000,0000,0000,,Asi que el primer paso de la animación es poner todo el codigo dentro de las llaves
Dialogue: 0,0:01:45.30,0:01:47.51,Default,,0000,0000,0000,,Para que las imagenes se repitan una y otra vez.
Dialogue: 0,0:01:47.60,0:01:51.29,Default,,0000,0000,0000,,Asi que vamos a hacer eso. Lo que are sera mover todo el codigo del dibujo.
Dialogue: 0,0:01:51.29,0:01:53.47,Default,,0000,0000,0000,,Y plop hacia abajo dentro de mi bucle
Dialogue: 0,0:01:53.86,0:02:01.45,Default,,0000,0000,0000,,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"
Dialogue: 0,0:02:02.19,0:02:05.36,Default,,0000,0000,0000,,Y ahora se que todo este codigo esta dentro de las llaves
Dialogue: 0,0:02:05.75,0:02:09.75,Default,,0000,0000,0000,,Pero tu dirás, todo esto esta exactamente lo mismo, nada ha cambiado.
Dialogue: 0,0:02:10.16,0:02:17.48,Default,,0000,0000,0000,,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
Dialogue: 0,0:02:17.48,0:02:24.19,Default,,0000,0000,0000,,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
Dialogue: 0,0:02:24.19,0:02:28.18,Default,,0000,0000,0000,,Y luego, 'hacer una nueva variable x, establézcalo en 10, dibujar su re...' Exactamente lo mismo
Dialogue: 0,0:02:28.18,0:02:30.68,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.15,Default,,0000,0000,0000,,Y es que dibuja los rectangulos y circulos encima de los anteriores.
Dialogue: 0,0:02:34.61,0:02:39.81,Default,,0000,0000,0000,,Recuerda lo que dijimos: si queremos hacer algo parecer animado, tenemos que cambiar el dibujo un poquito a la vez.
Dialogue: 0,0:02:40.30,0:02:42.06,Default,,0000,0000,0000,,Si quiero que mi coche avance
Dialogue: 0,0:02:42.56,0:02:45.16,Default,,0000,0000,0000,,Yo debería cambiar el valor de esta variable x, verdad?
Dialogue: 0,0:02:45.16,0:02:47.24,Default,,0000,0000,0000,,SI, justo como lo hace... 11
Dialogue: 0,0:02:47.70,0:02:50.85,Default,,0000,0000,0000,,¡¡Ah!! ¡¡No!! Pero ahora esto sólo va a ser 11 solo una vez.
Dialogue: 0,0:02:50.98,0:02:57.11,Default,,0000,0000,0000,,¿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?
Dialogue: 0,0:02:57.41,0:02:59.10,Default,,0000,0000,0000,,Bien, miren este truco de magia
Dialogue: 0,0:02:59.37,0:03:02.29,Default,,0000,0000,0000,,Recuerde, esta 'var x' hace una nueva variable.
Dialogue: 0,0:03:02.56,0:03:07.84,Default,,0000,0000,0000,,Cuando tenemos dentro de un bucle Draw como esta, que hace una nueva variable "x" cada vez.
Dialogue: 0,0:03:08.11,0:03:12.64,Default,,0000,0000,0000,,Lo que tenemos que hacer es hacer esta variable fuera del bucle empate. De esa manera sólo hará que sea una vez.
Dialogue: 0,0:03:13.34,0:03:22.55,Default,,0000,0000,0000,,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
Dialogue: 0,0:03:22.73,0:03:29.74,Default,,0000,0000,0000,,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,
Dialogue: 0,0:03:30.87,0:03:37.100,Default,,0000,0000,0000,,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',
Dialogue: 0,0:03:38.27,0:03:41.19,Default,,0000,0000,0000,,entonces esto siempre va a ser 11. Y aquí está donde entra la magia .
Dialogue: 0,0:03:41.52,0:03:51.58,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:52.88,0:03:54.38,Default,,0000,0000,0000,,Si!! esta funcionando!!
Dialogue: 0,0:03:54.80,0:04:02.44,Default,,0000,0000,0000,,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
Dialogue: 0,0:04:02.44,0:04:06.85,Default,,0000,0000,0000,,Así que es dibujar el coche una y otra vez, pero se puede ver todos los coches viejos por debajo del nuevo.
Dialogue: 0,0:04:06.85,0:04:11.10,Default,,0000,0000,0000,,Así que si me pongo esta línea en la parte superior del bucle draw, al igual que,
Dialogue: 0,0:04:11.95,0:04:15.55,Default,,0000,0000,0000,,y luego presione 'restart' para que pueda ver mi coche nuevo ...
Dialogue: 0,0:04:15.90,0:04:17.82,Default,,0000,0000,0000,,Hurra! Esta perfecto!
Dialogue: 0,0:04:18.17,0:04:22.01,Default,,0000,0000,0000,,Y si queremos hacer que el coche vaya más rápido, sólo podemos cambiar la cantidad que aumentamos x por cada vez,
Dialogue: 0,0:04:22.06,0:04:27.82,Default,,0000,0000,0000,,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 ...
Dialogue: 0,0:04:28.50,0:04:32.26,Default,,0000,0000,0000,,Aquí esta! Que sea positivo de nuevo, gritos
Dialogue: 0,0:04:33.32,0:04:34.48,Default,,0000,0000,0000,,... ahí va.
Dialogue: 0,0:04:34.64,0:04:36.28,Default,,0000,0000,0000,,Así que aquí están las cosas importantes para recordar
Dialogue: 0,0:04:36.55,0:04:42.83,Default,,0000,0000,0000,,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
Dialogue: 0,0:04:43.57,0:04:49.22,Default,,0000,0000,0000,,Y entonces, ¿quieres hacer una variable fuera de su bucle draw. Es super importante para que la variable fuera del bucle draw
Dialogue: 0,0:04:51.84,0:04:55.55,Default,,0000,0000,0000,,A continuación, dentro del bucle draw aquí, vamos a cambiar la variable un poco
Dialogue: 0,0:04:55.75,0:05:01.28,Default,,0000,0000,0000,,por lo general mediante el establecimiento a su valor anterior, además de un número, más o menos un número.
Dialogue: 0,0:05:02.14,0:05:07.84,Default,,0000,0000,0000,,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.
Dialogue: 0,0:05:08.12,0:05:11.00,Default,,0000,0000,0000,,Y, eso es todo!