WEBVTT 00:00:01.106 --> 00:00:02.703 Hay varias maneras de hacer que algo se vea animado, 00:00:03.193 --> 00:00:05.233 Pero el principio basico es el mismo. 00:00:05.243 --> 00:00:07.133 Si tomas un conjunto de fotos 00:00:07.133 --> 00:00:09.733 en la que cada una es solo un poco diferente a la primera 00:00:09.733 --> 00:00:11.463 y moverte entre ellas lo mas rapido posible 00:00:11.463 --> 00:00:13.273 se vera como si tu dibijo se estuviera moviendo 00:00:13.273 --> 00:00:15.893 Alla en los viejos tiempos,se hacian estos dibijos a mano. 00:00:16.166 --> 00:00:19.626 y se tardaban tanto tiempo en hacer 3 segunods de animacion. 00:00:19.703 --> 00:00:22.113 Agraciadamente, vivimos en el futuro. 00:00:22.826 --> 00:00:25.776 Es bien facil hacer una animacion sencilla haciendolo con codigos. 00:00:26.126 --> 00:00:27.516 Y les mostraré como! 00:00:27.785 --> 00:00:30.995 A la derecha ves un carrito hermoso y un trasfondo amarillo encantador 00:00:31.474 --> 00:00:34.294 y si, si yo diseñe este carrito, gracias. 00:00:34.933 --> 00:00:38.113 Bueno, aqui ves en este bellos trasfondo 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 (). 00:00:42.518 --> 00:00:47.248 y aqui en la variable de "x" le damos la posicion de 10 00:00:47.467 --> 00:00:49.441 y cambiamos el valor 00:00:49.441 --> 00:00:51.371 y hace que el carro se mueva de atras adelante. 00:00:51.863 --> 00:00:52.803 Traelo hasta el 10 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. 00:00:57.603 --> 00:01:00.073 Así, parece que este primer rectángulo es para el fondo 00:01:00.073 --> 00:01:01.853 Y este rectángulo es para la parte superior. 00:01:02.401 --> 00:01:04.901 Y entonces aquí estamos haciendo lo mismo con las ruedas 00:01:04.901 --> 00:01:06.971 Establecemos el color de relleno y dibujamos dos elipses 00:01:06.971 --> 00:01:08.431 Uno en x 25 00:01:08.629 --> 00:01:10.099 Y en x + 75 00:01:10.187 --> 00:01:12.527 Y finalmente llegamos a las cosas nuevas. NOTE Paragraph 00:01:12.672 --> 00:01:15.002 Esta cosa aquí se llama definición de una función. 00:01:15.002 --> 00:01:16.692 Tú lo aprenderás más adelante 00:01:16.692 --> 00:01:19.332 Así que por ahora basta con memorizar lo que tenemos aqui. 00:01:19.332 --> 00:01:23.392 Las cosas importantes que anotar son esta palabra 'draw' y estas llaves. 00:01:24.142 --> 00:01:25.042 Esta llave de apertura aqui. 00:01:25.062 --> 00:01:26.092 Y esta llave de cierre aqui. 00:01:26.746 --> 00:01:29.956 Todo esto es lo que llamamos el draw loop, o el bucle de animación. 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 00:01:35.000 --> 00:01:36.340 Es por eso que se llama bucle 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. 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 00:01:45.300 --> 00:01:47.510 Para que las imagenes se repitan una y otra vez. 00:01:47.600 --> 00:01:51.290 Asi que vamos a hacer eso. Lo que are sera mover todo el codigo del dibujo. 00:01:51.290 --> 00:01:53.470 Y plop hacia abajo dentro de mi bucle 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" 00:02:02.193 --> 00:02:05.363 Y ahora se que todo este codigo esta dentro de las llaves 00:02:05.754 --> 00:02:09.754 Pero tu dirás, todo esto esta exactamente lo mismo, nada ha cambiado. 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 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 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 00:02:28.177 --> 00:02:30.677 No ha cambiado nada, claro, no vamos a ver ninguna animación. 00:02:31.030 --> 00:02:34.150 Y es que dibuja los rectangulos y circulos encima de los anteriores. 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. 00:02:40.305 --> 00:02:42.055 Si quiero que mi coche avance 00:02:42.565 --> 00:02:45.165 Yo debería cambiar el valor de esta variable x, verdad? 00:02:45.165 --> 00:02:47.245 SI, justo como lo hace... 11 00:02:47.696 --> 00:02:50.846 ¡¡Ah!! ¡¡No!! Pero ahora esto sólo va a ser 11 solo una vez. 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? 00:02:57.413 --> 00:02:59.103 Bien, miren este truco de magia 00:02:59.366 --> 00:03:02.286 Recuerde, esta 'var x' hace una nueva variable. 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. 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. 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 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, 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', 00:03:38.270 --> 00:03:41.190 entonces esto siempre va a ser 11. Y aquí está donde entra la magia . 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. 00:03:52.885 --> 00:03:54.375 Si!! esta funcionando!! 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 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. 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, 00:04:11.954 --> 00:04:15.554 y luego presione 'restart' para que pueda ver mi coche nuevo ... 00:04:15.900 --> 00:04:17.820 Hurra! Esta perfecto! 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, 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 ... 00:04:28.504 --> 00:04:32.264 Aquí esta! Que sea positivo de nuevo, gritos 00:04:33.320 --> 00:04:34.480 ... ahí va. 00:04:34.637 --> 00:04:36.277 Así que aquí están las cosas importantes para recordar 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 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 00:04:51.838 --> 00:04:55.554 A continuación, dentro del bucle draw aquí, vamos a cambiar la variable un poco 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. 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. 00:05:08.120 --> 00:05:11.000 Y, eso es todo!