Construyendo HTML5 con capacidad para responder con Tumult Hype 3 Pro

1. 01 Acerca de este curso: hola y bienvenidos a este curso sobre To Mull Type Now to mull type es un animador de cinco HTML que te permite construir interacciones. Html cinco Interacciones que podrían utilizarse para banners Web. Podrías ser usado para E learning para iBooks, widgets de autor Ah, muchas aplicaciones diferentes que realmente puedes entrar y usar para mull type, pues es muy fácil de usar. También es muy receptivo. Se pueden construir sitios web responsivos, banners responsivos que se adaptarán a cualquier tamaño de pantalla o cualquier dispositivo que esté usando el usuario . Y así es una aplicación muy divertida y es muy Robustas Bueno, así que vamos a entrar y en realidad vamos a sumergirnos y echar un vistazo a lo que puedes hacer con el tipo de mole Ahora, Primero que nada, sigamos adelante y lado y hablar de qué versión de bombo y también de lo que realmente se puede construir Usando bombo. Vamos a echar un vistazo a algunos ejemplos antes de entrar en la herramienta y de hecho empezar usar la herramienta para construir outs. Este tipo de HTML cinco interacciones. Entonces lo primero es, vamos a moult dot com vamos a ir a multi dot com. De acuerdo, Así que una amenaza para moult dot com adelante y arriba en la parte superior. Haga click en Hype Pro. Ahora bajando a High Pro. Esto te dará un poco de información sobre bombo, pro y el tipo de cosas que puedes hacer con él. Pero en lo que quiero enfocarme es en la galería de aquí. Si hago clic en galería y luego bajo, notarás muchos ejemplos diferentes usados en dos maltas o usados para construir ah, muchos ejemplos diferentes que en realidad fueron construidos usando bombo. Entonces vamos a seguir adelante y echar un vistazo a algunos de estos Ahora, ya tengo algunos de estos pullup en mi ficha aquí, así que sólo voy a pasar por él y vamos a hablar de ellos, y luego vamos a entrar en el curso real sobre cómo construir este tipo de cosas. Entonces lo primero es este cohete, por lo que notarás un par de cosas diferentes. Ah, en este cohete. Entonces primero que nada te das cuenta cómo empieza a temblar, y luego como empieza a fumar empieza a salir y luego empieza Teoh empieza a ir y levantarse en el aire y todo, así que eso está usando To mull type. Se pueden utilizar algunas de las características de animación. También puedes usar símbolos para crear tus propias animaciones anidadas. Se puede tener que las cosas crezcan. Se puede hacer que las cosas se vayan más pequeñas. Estos son los tipos de cosas que puedes usar con el tipo tamal. Ahora aquí hay otro ejemplo. Déjenme volver aquí en realidad. Este es el de Castle. Ahora esto está usando algo que sólo está disponible en tumulto, pro y o high pro. Y esa es la física. Permítanme reiniciar eso otra vez. Por lo que notarás en la física aquí en la Cannonball y la Cannonball interactúa con diferentes ladrillos en el castillo. Y entonces esos ladrillos simplemente se caen en pedazos. Y eso es usar la física dentro del tumulto, tipo dos multi pro. Entonces por eso queremos quedarnos con esta sesión de la que vamos a estar hablando. O en esta clase, vamos a estar hablando de la visita son la aplicación hiper pro. Entonces aquí hay otra que me gusta, y esta es una infografía. Entonces si estás hablando de, um, si estás queriendo construir algo que sea más interactivo. Esa es una gráfica en la que entran realmente los usuarios, y hacen clic en Teoh Ver información diferente. Bueno, bombo es una excelente aplicación para construir este tipo de cosas por lo que puedes hacer click en este ítem aquí y notarás el resaltado morado que viene. Y a medida que vengo, creo que empiezo a cambiarse y empezar a moverse en esos aires, cosas diferentes que puedes hacer dentro de diferentes líneas de tiempo de a tipo mull. De acuerdo, así que aquí hay otro ejemplo Ahora esto está incrustado dentro de un sitio web. Entonces aquí, cuanto llego a este sitio web, los sitios web, un sitio web normal. Pero notarás esta animación que empieza a animar las diferentes partes. Um, y puedo entrar, y puedo dar click en estos diferentes elementos aquí. Ahora. Esta parte se hace dentro de Tumulto. Dunn hecho dentro de bombo para que puedas tomarlo, y puedes construir solo diferentes elementos dentro de bombo y luego incrustarlo con tu sitio Web actual, tu WordPress o un HTML normal. O incluso puedes tomar este tipo de interacciones y ponerlo dentro de iBooks author y hacer tu libro un poco más interactivo también. Ahora éste es un poco más complejo. Aquí verás un mundo. Tenemos muchos elementos animados diferentes. Tenemos este avión que pasa volando. Tenemos esta pequeña montaña rusa, um, um, o esta Lo siento, esta camioneta que va pasando por diferentes calles y todo este tren que viene por, Ah, Ah, estos molinos de viento, un montón de diferentes elementos que están pasando aquí y estos en realidad son elementos interactivos. Al hacer clic en diferentes cosas, luego se acercan a diferentes escenas, y luego se puede hacer clic en diferentes elementos allí también. Entonces eso es un montón de animaciones anidadas dentro de bombo. Um, y mucha diferencia tiene escenas que se dicen eso, Así es como te metes en la parte de zoom está en las escenas de aquí. Por lo que ahora aquí hay un banner interactivo. Ahora todos hemos visto este tipo de pancartas, típicamente en el pasado. construyeron con adobe flash, pero ya que ah, muchos navegadores aire no soportan flash. Cualquier más bombo es reja aplicación para construir este tipo de banners y te darás cuenta que es sensible. Por lo que a medida que empiezo a redimensionar mi pantalla, se adaptará automáticamente al nuevo tamaño. Y esa es una característica que es bombo nos da Now. Aquí hay otra pancarta. Vamos a seguir adelante y dar click en esto. Este es un poco más interactivo. En realidad te permite disparar cosas diferentes. Entonces tenemos nuestra pistola aquí. Ah, y luego podemos entrar y dar click en un artículo diferente. Dispárale. Y luego esta pancarta aparece al final. Por lo que hay otro banner que tengo que hacer clic en este icono más, se podía ver. Aquí te dejamos una pequeña diferencia de física que hace y diferentes animaciones que entrarán en diferentes momentos. Entonces ahora éste ¿realmente tienes que interactuar con? Se puede ver. A medida que arrastré hacia la izquierda aquí, Ah sub menú en realidad aparecerá, y ahora puedo hacer clic en diferentes elementos aquí que solo te permite. O eso muestra la capacidad de hypes para agregar drag y basado en el arrastre en diferentes elementos dentro de tu animación. Ahí. Ahora, este me gusta mucho porque tiene, ah, ah, animación cool de tarjeta que se está plegando y así se puede ver se puede hacer ese tipo de animaciones aquí Y ahora todas estas muestras en tipos web se puede en realidad descargar nuestra mayoría de ellos. Se puede descargar donde dice este documento bombo y en realidad se puede abrir y se puede ver exactamente cómo lo construyeron. Por lo que quieren compartir cómo estos diferentes archivos de muestra y compartir cómo lo construyeron para que puedas descargarlo y comprobarlo. Este me gusta mucho porque, um, realidad se puede hacer clic en la planta, ese poder, y levantará diferentes símbolos. Ese es un símbolo anidado que anima las voluntades en. También puedes hacer clic en Fly Solo y eso animará un avión hacia fuera y luego animará al otro plano en el medio. Tienes un montón de diferentes estos iconos de la nube y todo lo que pasa. Um, hay así que solo hay un montón de elementos diferentes con los que estás trabajando aquí. Ahora aquí está ah, OVNI uno donde en realidad se puede hacer clic en la oveja y este OVNI entrará. Y luego me encanta pato esa oveja y puedes dar click en un artículo diferente aquí. Y no importa dónde esté este OVNI que dondequiera que pinches en realidad irá a esa oveja en la que acabas de hacer clic. Entonces y eso es usar muchas líneas de tiempo y las animaciones y cosas así que configuraste dentro de un bombo. Y esos son los tipos de cosas que puedes construir un tipo. Y así te vamos a enseñar lo básico en esta clase cómo puedes empezar. Puedo usar thes, diferentes líneas de tiempo, thes diferentes animaciones y cómo puedes crear tus interacciones responsive y así se adaptarán a los diferentes tamaños de pantalla y todo. Entonces estaremos hablando de ese tipo de cosas. Pero antes que nada, sigamos adelante y comencemos con cómo descargar bombo y cómo empezar a usarlos. 2. 02 Cómo obtener la pe: todo bien. Hay dos formas diferentes en las que puedes conseguir algún tipo viejo. Si vas a moult dot com y luego vienes aquí y otra vez, vamos a estar hablando en esta sesión, vamos a estar hablando de hiper pro. Vamos a dar click en hyper pro, y esto nos da la posibilidad de descargar una prueba gratuita. Si quieres probarlo de forma gratuita. Y si haces clic en prueba gratuita aquí o puedes actualizar desde el tipo tumulto. Si ya has comprado versión anterior de bombo, en realidad puedes actualizar por solo $49 o puedes comprarlo completo por solo $99. Y eso es todo. Una vez, um, y ya sabes, y luego cualquier actualización después de eso, si está en la misma versión, como ahora mismo, es tumulto. Tipo tres. Si van a cuatro, eso podría ser una actualización pagada, pero si van 3.5, eso suele ser una actualización gratuita. que no tengas que preocuparte por gastar dinero cada vez con cada actualización que hagan aquí. Tan bien, entonces si haces click en prueba gratuita o si haces click en estas alturas, Esa es una opción de descargar realmente tipo tumulto. La otra opción es ir realmente por la tienda de aplicaciones a través de la tienda de aplicaciones de Apple. Ahora, tipo Tamal es un Mac basado en la aplicación Lee. Por lo que hay que tener un Mac para poder descargarlo realmente. Um, pero voy a entrar aquí y sólo voy a entrar en el cuadro de búsqueda. Yo quiero teclear en bombo y en cuanto yo pero ahí está, ahí mismo. Bombo tres. Um y ahora aparece con el bombo tres. Y luego hago clic en este Hype tres, y luego lo compro ahí. Ahora, sin embargo, Hype tres aquí es sólo la versión básica de bombo. Entonces básicamente lo estás comprando a través de la tienda de aplicaciones, la versión más pequeña, Pero entonces puedes actualizarla, y luego es la versión completa. Pero hay que descargarlo compras en este, y luego comprar la actualización después. Entonces depende de ti. Si quieres hacer esto, cualquier actualización o cualquier actualización con la que salgan múltiples, pasarán automáticamente por la tienda de aplicaciones. Entonces si te gusta gestionar todos tus APS y todas las actualizaciones a través de la tienda APP. Esta podría ser una buena manera, y también es fácil, bastante fácil si vas a otro Mac para realmente solo entrar en tu área de compras y descargar nuevas versiones de tu APS básicamente y conseguir que tu Mac ya vaya con todos los APS que ya has comprado. Por lo que es una buena manera de asegurarte de que tengas todas tus aplicaciones en un solo lugar. De acuerdo, así que una vez que haya descargado la prueba gratuita todo desde aquí, se descargará en aplicación ya sea a las descargas de podría o a mi escritorio. Y luego solo tengo que arrastrar eso a mi carpeta Aplicaciones, y eso es todo. Una vez que esté en mi carpeta de aplicaciones, entonces puedo bajar aquí y solo puedo dar click en Hype tres ahí mismo. Y así, tan pronto como se lanza el bombo, esta es la primera pantalla que verás, por lo que te inicia con el Proyecto Blink. Tienes tu pantalla blanca aquí, tienes tus diferentes elementos, tu inspector, tus escenas sobre el lado izquierdo, y ahora puedes empezar a crear tus cursos por lo que entraremos en ese siguiente de realmente iniciar un proyecto y trabajar con los archivos ahí 3. 03 Comienza un nuevo proyecto: Muy bien, Así que una vez que tengas bombo en marcha, lo primero que debes hacer es guardar tu proyecto. Para que así lo tengas, sabes exactamente dónde está tu proyecto. Puedes abrir más tarde, y luego solo tienes que golpear command s cada vez que quieras guardar una nueva versión de la misma o guardar la versión actualizada de la misma. Entonces vamos a seguir adelante y simplemente golpear comando s aquí, o puedes subir al archivo y luego bajar a guardar Cualquiera de las formas funciona. Y ahora me está pidiendo que guarde este proyecto en un área determinada. Entonces voy a seguir adelante y solo guardar esto en mi escritorio por ahora. Y vamos a llamar a esta muestra tan pronto como la nombre. Golpeado de muestra. Entrar. Ahora, si vengo a mi escritorio y sigo adelante y cierro eso ahora, si vengo a mi escritorio, entonces tenemos este proyecto de muestra. Ahora, Ese proyecto de muestra. Si fuera a cerrar este hiper proyecto aquí y solo haga doble clic en ese proyecto de muestra que abrirá ese proyecto exactamente cómo guardé un interior de bombo y luego puedo ponerme marcha, y es realmente un rápido, uh, abierto. En realidad no lo haces. No toma mucho tiempo. Simplemente puedes seguir adelante y hacer doble clic en él, subirlo, um, o hacer doble clic en él. Ábrelo y empieza a trabajar con él. Ahora, en cualquier momento que estés trayendo archivos de audio estás trayendo imágenes o cualquier cosa, en realidad lo mantiene dentro de tu recurso es carpeta para que puedas hacer click sobre el lado derecho. Puedes hacer click en tu recurso es carpeta y puedes llegar a todos esos archivos. Entonces, verdad, cuando estás haciendo un seguimiento de esos archivos, quizá quieras llevar una copia de esos en algún lugar. Pero en realidad, más importante es este archivo de proyecto de un solo archivo asegurándose de que tienes ese archivo de proyecto y que guardes ese archivo de proyecto incluso después de que hayas lanzado tu proyecto con el fin de actualizar nuevas versiones de tu proyecto o si lo necesitas para hacer un cambio rápido, abres el archivo del proyecto y luego publica tu proyecto y luego lo subes desde ahí . Entonces ese es el proceso de básicamente mantener ese archivo de proyecto, actualizar ese publicar la salida de ese proyecto y luego subir ese proyecto al sitio Web o importar dentro. iBooks, Author, cualquier Método que realmente vas a entregar esta aplicación bombo aquí. Entonces así es como entras y cómo inicias un nuevo proyecto y cómo se guarda el proyecto en cómo se abre el proyecto, muchacho, en un momento posterior. 4. 04 Explorar la UI: Muy bien ahora, sigamos adelante y exploremos un poco la interfaz de usuario. Familiarizémonos con donde todo es eso. Y así cuando empezamos a construir, estos proyectos estaban familiarizados con dónde llegar a todo. Entonces lo primero que ves cuando inicias un nuevo proyecto y salvaste el proyecto son tus escenas sobre el lado izquierdo. Ahora las escenas es ah, buena manera de separar tu contenido. Entonces si te va a gustar que vimos en ese mapa interactivo en el primer video, si vas a tener el mapa como la escena principal y luego vas a entrar en zoom en partes de ese mapa, bueno, entrarías y crearías nuevas escenas para las que se acercan en partes del mapa en. Y así es como también se puede separar el contenido. Si estás construyendo, digamos que estás construyendo sobre elementos de aprendizaje interactivos, y ese elemento de aprendizaje interactivo tiene diferentes pestañas o información de diferencia Will. Puedes usar estas diferentes escenas para saltar realmente a esos diferentes elementos en la diferente información, solo viniendo y haciendo clic en el icono más que te permitirá crear nuevas escenas . Entraremos más a profundidad con escenas más adelante. Pero lo siguiente son los diseños. Ahora los diseños no se resaltan por defecto. Pero si entro aquí y hago clic en él, entonces se abrirá con los layouts y hablaremos de los layouts más en profundidad. Pero es solo una forma de poder crear diferentes puntos de ruptura sobre Ben. Ajusta tu contenido dependiendo de esos puntos de ruptura. Entonces si quieres que algo se vea completamente diferente en un teléfono que hace una tableta, crearías unos diseños diferentes, y luego usarías ese diseño para crear esos elementos ahí, Um, y reorganizar esos elementos y de manera diferente en los diferentes dispositivos en diferentes puntos de ruptura. Ahora, viniendo por aquí arriba, vamos a entrar en la sección Elementos. Si selecciono el cuadro desplegable en la sección Elementos, tenemos un par de cosas diferentes. Contamos con nuestros elementos de texto donde podemos insertar botones de texto, botones texturizados, imágenes , videos, audiófilos, widgets html para que podamos traer html externo, um, dentro de un bombo y usa eso para incrustar dentro de bombo. Y entonces podemos crear nuestra propia forma para poder hacer rectángulos, rectángulos redondeados y elipses o círculos, básicamente, Y después de eso, tenemos símbolos. Ahora hablaremos de símbolos más en profundidad, pero su manera de crear líneas de tiempo anidadas para que puedas tener incluso saber. Digamos que tu línea de tiempo principal está en pausa. Todavía puedes tener algo tipo de spinning independientemente de tu línea de tiempo principal. Y de nuevo, vimos que en el mapa por donde pasábamos los diferentes trenes y teníamos diferentes , como el carrusel dando vueltas y vueltas. Esos fueron todos anidados son símbolos diferentes, básicamente con sus propias líneas de tiempo corriendo esas diferentes a las animaciones en sus propias líneas de tiempo. Y tú tienes copa. Tienes dos opciones diferentes ahora. Uno es el nuevo símbolo, y otro es un símbolo nuevo y persistente. Ah, hablaremos de eso más en profundidad, pero el símbolo persistente. Si tienes múltiples escenas y creas un símbolo, solo se va a agregar a una de esas escenas. Un símbolo persistente lo agregará automáticamente a cada escena, así que es agradable si tienes un fondo o algo y no quieres copiarlo y pegarlo en cada escena. Agregaremos como símbolo persistente en él estará en cada escena automáticamente. Vas a tener cuidado con eso en caso de que quieras esconderte y mostrar cosas diferentes. Pero si quisieras tener su a través de cada escena automáticamente, esa es la forma en que lo harías. Por lo que el otro elemento es el grupo que hemos desarreglado tenemos llevar al frente traer a atrás esas aplicaciones normales del aire o elementos normales que puedes usar y prácticamente todas las herramientas. Amplía y luego también tenemos una vista previa. Ahora la vista previa usará el valor predeterminado o lo que sea. Tu navegador predeterminado es menos safari. Pero si tus navegadores predeterminados Chrome o algo así, es posible que veas un símbolo de cromo allí. No obstante, también puedes a las mejores prácticas para probar esto y este muchos navegadores como puedas. Ah, y aún se puede ver esta caja desplegable. Y ese cuadro desplegable me permite probarlo en otros navegadores que he instalado en este equipo. Entonces, por ejemplo, Firefox y Chrome, um, y yo podría hacer eso. Simplemente puedo seleccionar básicamente el cuadro desplegable y luego seleccionar Fire boxer chrome, y se previsualizará mi proyecto dentro de ahí. Ahora, una clave de corte corto es Thekla símbolo inter tripulado o comando Intro tecla. Y si seleccionas eso sin siquiera seleccionar viniendo aquí y haciendo clic en ese botón, se previsualizará tu curso para que pueda golpear comando, entrar y luego se abrirá. Lo tengo en mi otra ventana aquí, pero se abrirá con la vista previa y ahí vamos. Por lo que ahora solo puedo presionar comando enter de nuevo y se actualizará cada vez que tenga abierto ahí. El siguiente es mi inspector, Si apago y enciendo mi inspector, es este panel de mano derecha y tiene muchos elementos e inspectores diferentes de los que vamos a estar hablando más a fondo. Entonces, documento Inspector. Ah, aquí es donde agrego sobre acciones. Aquí es donde uso la física en esto es donde agrego en diferentes dar etiquetas a mis diferentes elementos en el escenario. Aquí también es donde hago las cosas flexibles y receptivas y agrego el tamaño de la justicia para mi escenario y todo. Entonces esto es algo con lo que vas a estar trabajando mucho y vas a ir más a la muerte con él Ahora. El otro elemento en al otro lado de la parte superior aquí es el recurso es esto no se resalta por defecto. Pero si selecciono en eso, esto me dará una lista de todo mi recurso es así que cada vez que traigo una imagen, cada vez que traiga un archivo de audio, cada vez que traiga un archivo de video, todos esos se colocarán dentro de mi recurso es carpeta y luego podría simplemente tomar esos elementos aquí, arrastrarlo y soltarlo en este escenario y usarlos una y otra vez a través de múltiples escenas diferentes o algo por el estilo. Aquí también es donde puedo entrar y crear trabajo. Funcionan un guión. Entonces si quería meterme más en profundidad, um, con la capacidad, ese bombo viene por defecto y quería agregar en JavaScript y otros elementos diferentes puedo crear una función aquí, y luego Podría ejecutar esa función en cualquier otra acción cualquier otro disparador o algo el estilo. Puedo crear la función aquí y luego hacer eso. Ahora, agregar un archivo también me permite traer elementos de script Java externos. Ah, así que si tengo si quería usar Green Sock, por ejemplo, o si quería traer otros tipos de JavaScript, bibliotecas Jake Worry. Podría hacer eso dentro de aquí y adjuntar esos archivos aquí y luego aprovechar los de aquí también. Ahora bien, tampoco puedo agregar fuentes. Si tengo unas fuentes personalizadas que quiero hacer, puedo hacer eso. Dentro del recurso está el siguiente elemento es el tiempo real o la etapa en sí aquí. Por lo que esta zona blanca es lo que va a ser visible para el usuario final. Por lo que desea agregar su elemento. Lo reorganizarías y lo diseñarías dentro de aquí. También puedes hacer click en play, y puedes hacer click en record y diferentes elementos directamente desde la línea de tiempo. Um, ahora, por encima de eso, gana el área de la etapa, aunque puedes arrastrar barras de diferencia si querías conseguir un posicionamiento exacto y conseguir diferentes guías inteligentes y todo. Todo lo que tienes que hacer es subir a la regla, clic en ella, arrastrarla hacia abajo, y esto te proporcionará las guías para que puedas arreglar las cosas una línea, las cosas exactamente como lo quieres ahora aquí abajo en la línea de tiempo otra vez, tenemos nuestra jugada. Tenemos nuestro disco, y hablaremos de disco una vez que nos metamos en las animaciones. Ah, tienes la capacidad de modificar la línea de tiempo real para que puedas acercar la línea de tiempo y ponerte realmente en profundidad con tus animaciones y tus fotogramas clave. También tienes diferentes elementos. Una vez que comienzas a insertar cosas, comienzas a agregar diferentes círculos y cuadrados y otras cosas que vas a animar. Puedes seleccionar esas cosas diferentes a lo largo de la línea de tiempo y luego debajo de eso están las propiedades. Ahora, las propiedades son básicamente los elementos que puedes anime una vez que tengas algo seleccionado. Entonces si selecciono algo en mi línea de tiempo, voy a seguir adelante y simplemente crear un elemento aquí para poder mostrarte cómo crear un rectángulo en mi línea de tiempo, Um, o en mi escenario aquí, y tú puedo ver que si no lo tengo seleccionado, um, nada aparece en mis propiedades. Ahora hay un rectángulo en mi capa de línea de tiempo. No obstante, tengo que seleccionar en ese rectángulo para poder ver las propiedades que puedo animar debajo de él. Entonces ahora una vez que haya seleccionado eso, ahora puedo entrar aquí y puedo animar la opacidad. Puedo animar la izquierda, la parte superior la talla que con. Pero también puedo seleccionar este cuadro desplegable y luego anime. Ah, montón entero de otras propiedades. Aquí tenemos contraste, brillo, otras cosas. Todos estos son elementos que puedes enemigos, y hay que tener la imagen o el objeto seleccionado para poder ver esas propiedades . Ahora aquí también puedo alterar la visibilidad para poder apagarla y encenderla. Si sólo quiero enfocarme en ciertos elementos, puedo esconder todo lo demás en. Entonces también puedo bloquearlo para no seleccionarlo accidentalmente y moverlo si lo tengo en el lugar exacto que quiero. Entonces esos airean diferentes elementos que podrías hacer con tu línea de tiempo. Eso es sólo una visión general básica de la interfaz de usuario real. Dentro de tumulto, tipo 5. 05 Previsualización de tu contenido en móvil: todo bien. Hablamos brevemente sobre cómo hablar o salir de vista previa de tu proyecto en el video anterior, pero vamos a hablar un poco más en profundidad sobre cómo hacerlo. Por lo que aquí puedo pasar a la sección de previsualización. Puedo hacer click en este símbolo de safari. Dado que safari es mi navegador predeterminado, puedo soltar aquí la opción para previsualizar en lugar de Firefox o la opción para previsualizar dentro de un chrome. Ahora, un par de cosas más que puedo hacer es si tengo el tipo tumulto refleje aplicación en mi teléfono, que puedes obtener a través de la tienda APP. En realidad puedes enviar la información directamente a tu teléfono. Entonces si entro aquí y selecciono el cuadro desplegable, lo que tengo que hacer es antes que nada, estar en el mismo inalámbrico. Y así en este momento estoy en el inalámbrico. Mi teléfono está en el mismo inalámbrico que mi computadora. Y así como lo tengo aquí y tengo la aplicación jalada aquí, el tipo tumulto refleja. Um, es una aplicación gratuita. Una vez que lo tengo aquí arriba, entonces tengo la opción. Una vez que selecciono la vista previa para realmente previsualizar en ese dispositivo para que pudiera tener esa misma aplicación de reflejo en mi iPad. Y si quería probar eso, puedo hacerlo. Pero por aquí, voy a seguir adelante y basta con dar click en Jeff murciélagos iPhone y luego va a mandar esa información. Se puede ver que se acaba de actualizar automáticamente, y, um, ahí está justo ahí. Ten mi erección. Sé que es un poco difícil de ver ahí, pero tengo mi rectángulo ahí, y en realidad puedo probar todo en mi teléfono directamente. Y eso es todo lo que tengo que hacer es en realidad seleccionar ese cuadro desplegable, tener la aplicación arriba, y luego funciona automáticamente. Y entonces podría empezar a probarlo sin tener que poner esto en algún sitio web o subido y luego ir a navegar Teoh u R l o algo con mi dispositivo y luego probarlo . Esto es mucho más fácil tener la aplicación, que es que el bombo refleje la aplicación descargada en tus diferentes dispositivos, y luego podrías probarla desde ahí 6. 06 Accederás en punto y hacia fuera: cuando estás trabajando con tipo tumulto y quieres acercar diferentes partes y realmente quieres meterte en el fino detalle de tus animaciones, lo cual sucede mucho. Quieres usar la herramienta de zoom te darás cuenta si subes al zoom hacia arriba en la barra superior y seleccionas el cuadro desplegable. Aquí, tendrás muchas opciones preestablecidas diferentes. Entonces consumo en 25 50 75 ah 1 25 todo el camino hasta en 3200%. Ah, y eso te permite conseguirlo realmente detallado y dice Humano en los ciertos elementos tu animación real. O si entro y digo o desplácese hacia abajo un poco más Ah, puedo ver que el acercamiento y alejar tiene una pequeña tecla de acceso directo, que es el comando y que cuanto mayor o menor, um, menos que signo. Entonces si entro aquí en mi área de escenario hit command y luego solo un mayor o menos de lo que se acercará ahora tengo Esos se dispara es otra cosa. Y así en realidad iba a sacar algo más. Tendría que ajustar las teclas de acceso rápido y las teclas de acceso directo en mis preferencias dentro de mis preferencias del sistema para asegurarme de que ninguna otra aplicación esté usando las teclas de método abreviado. Entonces eso es una cosa a tener en cuenta. Pero por ahora, puedo seguir adelante y solo usar el cuadro desplegable para acercar los diferentes elementos. Y ahora, una vez que tenga esto, puedo entrar y simplemente desplazarme alrededor, usé mi ratón para desplazarse y ver esos diferentes elementos aquí. Entonces esa es forma de acercar para llegar realmente a un detalle fino. Alguien examina un poco más. Uh, se puede ver que yo podría entrar derecho a la forma y ver exactamente cómo modificar esa forma o C. De acuerdo, ¿qué pasa con esa forma? Y puedo entrar ahí y ajustarlo, con ello acercando. Y entonces podría alejarme el zoom. Apenas entrar en tu volver al 100% me llevará de vuelta al tamaño real de su Ahora. No he creado ninguna capacidad de respuesta ni nada por el estilo sin embargo hablaremos de eso más adelante . Entonces, ¿qué? En realidad me ven aquí va a ser del tamaño de las animaciones una vez que lo publique. Entonces así es como acercas y como usas la boca en tu proyecto. 7. 07 Trabajar con formas de formas: todo bien. En este video, vamos a estar hablando de los diferentes tipos de formas que puedes usar dentro de tipo tamal . Y básicamente hay tres tipos diferentes de formas. Hay un rectángulo, una herramienta de rectángulo redondeado o elipse o herramienta de círculo. Básicamente, ahora, de esas herramientas puedes entonces entrar y puedes manipular. Después puedes entrar y agregar tus propios colores y otras cosas. Pero esas fueron las tres herramientas básicas, por lo que puedes usar eso para fondos transparentes. Puedes usar eso para ah Grady en color, fondo enviado o cualquier otro tipo de forma que quieras dentro de tipo tumulto. Entonces la forma en que se agrega, um, una forma dentro de tipo tumulto es entrando en el panel de elementos y bajando por debajo esta línea. Aquí en la caja desplegable, hay un rectángulo redondeado rectángulo en un taburete labial. Vamos a seguir adelante y añadir sólo una herramienta de rectángulo. Ahora, con esa herramienta de rectángulo seleccionada, notarás un par de cosas abajo en la parte inferior. Tenemos nuestras propiedades ahora. Estas airean las propiedades que se están afectando que se puede afectar con la animación sobre el objeto que se tiene selectivo, que el objeto que hemos seleccionado actualmente es la herramienta de rectángulo. Ahora bien, si me acerco al lado derecho, que es la ventana de Thean Specter, ahí es donde tengo diferentes elementos que puedo cambiar sobre el rectángulo. Ahora tienes que asegurarte de que tienes ese rectángulo seleccionado, pero notarás esta forma uno, que son los elementos, inspector, inspector, Um, y ese inspector de elementos te permite afectar la forma de el objeto que has seleccionado sobre el color de los diferentes elementos, las propiedades de esa forma. Entonces lo primero que ves es el fondo. Ahora esto me permite seleccionar el cuadro desplegable de Color Teoh Radiance o a imagen si tengo un patrón. Si yo quisiera, como un patrón de madera o algo así, bueno, puedes ir a buscar una imagen de patrón de madera y luego venir a la imagen aquí y luego seleccionar qué imagen realmente quiero reemplazar o estar repitiendo o algo así. Um, el color es un color sólido, o si entro en credencia, me va a tener. Ah, tendrá a colores lo que me permitirá tener un color superior y luego un color inferior. Y entonces puedo ajustar la rotación de ese int Grady también. Sólo compra entrar en el número aquí o simplemente tomar este pequeño círculo en esto, tomar el dial y ajustar el Diallo está bien, Así que me voy a quedar con un color normal. Voy a seleccionar el selector de color, y este es un selector de color manzana estándar para que pueda entrar aquí y ajustar diferentes elementos al respecto si quisiera entrar en el valor hexadecimal. Si tengo un color específico que quiero usar, solo puedo entrar aquí y entrar en el valor hexadecimal justo ahí. Y lo siguiente es la frontera. El borde me permite ajustar la básicamente la barra que da la vuelta al trazo que va alrededor de la forma y yo la un seleccioné para que pueda ver esto un poco mejor. Y se puede ver que es sólo una especie de color gris claro, más oscuro. Voy a seguir adelante y voy a subir el ancho de la misma por arriba el con evento. Ahora lo podía ver un poco mejor. Podía ver este borde alrededor de la forma. Me permite entrar y ajustar esa forma o simplemente delinea la forma. Básicamente Ahora, si quisiera ajustar el radio de esa frontera, puedo entrar aquí y podría subir el radio, y así empieza a hacer una curva un poco redondeada. Pero está afectando sólo el radio. Si quisiera afectar también la frontera, bueno, bueno, ahí es donde tendría que entrar y agregar unos rectángulos redondeados. Simplemente está afectando el radio de la frontera misma. Eso es algo a tener en cuenta ahora. Si quisiera tener sólo ciertas esquinas redondeadas en ciertos objetos o ciertos lados del rectángulo real, ¿simplemente desmarcarán aquí de esa manera, sólo tendrá, um, ciertas áreas y luchar checa aquí y luego puedo ajustar el radio. Yo solo estoy en esa zona para que veas que tomé el radio hacia abajo en la parte superior derecha . Bajé el radio a cero. Ahora que está bajando a cero, todo lo demás tiene una esquina redondeada. Excepto por ese lado. Ese un lado tiene sólo una esquina cuadrada puede enfermar así que ahora, voy a entrar aquí. Um, y puedo ajustar el color del borde real seleccionando este color aquí. Um, en realidad, déjame simplemente cambiarlo de nuevo a todo. Tienes que cambiar este dedo del pie atrás por todo el medio aquí, y voy a cambiar el color del borde sólo seleccionando que es el mismo cuadro desplegable . Sigamos adelante y subiremos esto a un color más oscuro y eso subirá el color ahí. Ahora, al usar tus propias formas en lugar de intentar, como, recrear formas dentro del tipo tamal En lugar de traer imágenes de photoshop o algo así, ayudaremos con el tamaño del archivo. Entonces si quieres hacerlo un poco más pequeño, intenta usar formas y colores justo en el costado de aquí. Y sobre todo con botón esto si pudieras tratar de afectar los botones dentro de tipo tumulto , todavía obtienes toda la funcionalidad de los botones, el estado de desplazamiento sobre el estado abajo y todo. Entonces voy a entrar aquí y ahora puedes cambiar la opacidad de un objeto Si querías hacer esto Ah, poco transparente. Realmente no lo puedo decir ahora, pero si vengo aquí, en realidad es duplicar la forma. Y se podía ver que ahora que he duplicado, si tengo o sobre otra forma, ahí es donde puedo ver eso. Sí, hay alguien pasivamente a ello. Si tomo la opacidad un poco más baja, te darás cuenta de que ahí casi desaparece. Ahora ten en cuenta que hay algún bombo de tiempo, en realidad, ¿haces algo que bombo que signifique, no funciona en algunos navegadores. HaIf realmente te avisará sobre eso. Entonces está este pequeño símbolo amarillo justo encima de la opacidad. Vamos a seguir adelante y dar click en eso ahora nos dice en todos los ochos. No se mostrará la opacidad cuando haya Ah, redondeo de esquina. Ah, fondo radiante o una sombra de caja aplicada. Ahora eso es lo que comí. Entonces si te preocupan todos los ochos, si eso es algo que sabes que estás tratando de abordar, estás tratando de apuntar um, yo e ocho y abajo. Es posible que desee dedo del pie tome eso en consideración. Si sabes que solo te vas a preocupar por es decir nueve y por encima de lo cual consigo nueve tiene mucho más apoyo para cosas. Bueno, entonces, solo ignora que solo puedes seguir adelante y golpear despido, y algunos aún mostrarán esa advertencia. Pero eso es algo que el bombo está tratando de que sepas que decir, Oye, esto no va a funcionar completamente dentro de yo e ocho Si estás tratando de enfocarte en eso, Ok, entonces lo siguiente es la sombra. Adelante y deshacernos de una de esas formas. Sólo nos vamos a quedar con uno por ahora. Voy a subir la opacidad de vuelta a donde estaba al 100% y voy a llevar la sombra. Voy a cambiar algunos elementos diferentes. Ahora, hay un par de cosas diferentes que yo podría hacer con esto. Puedo tomar este pequeño círculo justo en el medio aquí, y puedo ajustarlo solo arrastrando eso y te darás cuenta de que crea esa sombra. Cuanto más lejos voy, más lejos está la sombra, la distancia entre ese cuadrado y la sombra va realmente. Entonces eso me permite ajustar visualmente Dragon drop o puede entrar aquí y simplemente entrar en ciertos números. Si quiero un cierto número, voy a seguir adelante y a decir, Hagamos tres x y hagamos un poco de desenfoque que queremos tener. El asunto con la sombra es sí, básicamente está creando una forma duplicada. Queremos tener un poco de desenfoque a ello, porque eso es típicamente lo que son las sombras. Alguien tenía un cinco, y luego voy a entrar aquí y añadir tres por el porqué. Y ahora cuando entres en el color, ahora el color, me voy a ajustar. Ahora mismo, es un realmente oscuro. Es realmente negro, así que voy a seguir adelante y sólo eso para ser un poco más ligero. Yo quiero que la sombra sólo sea un efecto realmente ligero, y así, ajustando la ligereza de la sombra, así lo hace. No es una sombra tan dura ahí. Ahora puedo entrar aquí, y puedo ajustar algunos de los efectos de filtro ahora en cualquiera de este tipo de efectos. Ten en cuenta que una vez que entramos en la sección de animación de bombo, puedes animar estos diferentes elementos para que puedas animar una sombra que se mueve a través. Si querías simular a un hijo, y a medida que el sol se mueve, las sombras de los diferentes objetos también se mueven. Bueno, se puede animar eso con bombo. Lo mismo con estos filtros. Si querías animar el desenfoque si querías animar la sepia, la saturación, el tono, el brillo, brillo, contraste. Esas eran todas propiedades diferentes que puedes enemigos dentro de tipo tumulto. Y así que eso es solo una cosa a tener en cuenta cuando estás ajustando esta cosa que querías animar , inanimar como la opacidad. Um, eso es lo que va a estos diferentes elementos es lo que estás animando. De acuerdo, para que pueda ajustarme. Estos diferentes artículos jugarán con esos más adelante. Pero si me sale totalmente fuera de control y lo estropeo todo ya que estoy tratando de afectar esto mientras en lugar de tratar de recordar cuáles son los elementos por defecto de diferencia donde pudiera simplemente hacer clic en restablecer filtros a valores predeterminados y eso volverá a la predeterminada filtrarse y luego tenemos un par diferentes otros ítems La siguiente sección es la reflexión que nos permite sumar en un reflejo de cualquier objeto que hayamos seleccionado. Yo puedo hacer la profundidad y luego puedo hacer el offset. Ah, ¿a qué distancia está el reflejo real? Entonces si querías que pareciera que estaba en cierta superficie, y entonces esa superficie era reflexiva y querías hacerlo. Y la reflexión sobre ahí tipo tumulto te permite hacer eso, que de nuevo, también, puedes animar la reflexión para que puedas tener a ese enemigo en animar y hacer cosas diferentes como esa algunas. Muy bien, así que eso son formas. Conoce todo lo que hemos hablado con rectángulos y redondeados dirigiendo nuestros aplica a rectángulos redondeados. Todo lo que hablamos también se aplica a la Ellipse Tal. Ahora la herramienta Elipse no nos da la opción. El único que es diferente no nos da la opción de ajustar el radio porque eso son las injusticias de círculo en la cantidad de radio que es. Entonces ahora. Si quisiera ajustar las formas, puedo seguir adelante y simplemente estirar en las barras de mango, y podría hacer esto lo más ancho y lo más alto que pueda ir, Um, y entonces también puedo, si quisiera mantén las proporciones de la misma, solo mantengo pulsado el botón de turno y luego agarro una de las esquinas y simplemente arrastré eso hacia fuera. Ahora, tan pronto como lo he hecho, ahora se redimensiona es en proporción y mantiene su, Ah, en mis mantiene una proporcional, básicamente, no importa de qué tamaño sea, y puedo hacerlo exactamente del tamaño exacto que quiero algo con la Elipse. Si quisiera agarrar eso y hacerlo un poco más grande, podría hacerlo también. Ahora puedes hacer este tipo de formas. Puedes colgar algunos de ellos. Puedes manipularlos para que puedas obtener el tipo de forma que quieras. Ten eso en cuenta y también ten en cuenta como mencioné antes que entre más formas uses y menos imágenes que estés trayendo, más pequeño será el tamaño del archivo. Ese es uno de los beneficios de tratar de usar formas yo, en lugar de traer tus propias imágenes para todo lo que hay. Entonces pero aún tenemos todos los demás elementos. Cuando se trata de labios, taburetes y rectángulos redondeados, básicamente nos permite mantener todo eso prácticamente igual. Están bien. Entonces así es como se crean formas dentro de tamal, teclea 8. 08 Arreglos: todo bien. Entonces cuando tienes estas diferentes formas en tu escenario y quieres reorganizarlas, hay un par de opciones diferentes que puedes hacer dentro de tipo tumulto. La primera opción es seleccionando estos diferentes elementos. Vamos a seguir adelante en Nestlé sólo para que podamos decir la diferencia aquí. Voy a cambiar el color, cambiar este círculo para leer. Quiero cambiar este rectángulo redondeado a un poco verde, y mantendremos el rectángulo detrás de él, la misma forma. Tan bien, para que veas que el círculo rojo está delante de todo lo demás y tenemos el rectángulo redondeado verde que está en el medio, y luego tenemos el rectángulo grande que está detrás de todo lo demás. Entonces si quería traer esa ronda o eso es un rectángulo, el rectángulo grande delante de todo ahora hay unos atajos que realmente puedo tomar sin tener que bajar a la línea de tiempo y arrastrar eso por encima de todo. Yo puedo hacer eso si tú quisieras. No obstante, arriba en la parte superior hay este botón frontal, y que de Button tomará cualquier objeto que hayas seleccionado y lo traerá al frente automáticamente. Entonces al seleccionar que se lo trajo delante del círculo. Se trae delante del rectángulo redondeado, y ahora eso está en la parte superior de la línea de tiempo. Entonces en la línea de tiempo aquí tenemos ese rectángulo arriba allá arriba. Ahora, lo mismo con traerlo a la espalda es que en realidad se puede ver lo que ese objeto seleccionó. Simplemente puedes golpear allá atrás, y lo llevaremos todo el camino a la espalda detrás de cada objeto. Entonces si tienes una línea de tiempo que es bastante grande y tienes múltiples capas diferentes. Bueno, usando estos botones, si querías tomar un elemento que querías llevarlo al frente, edítalo y luego traerlo a la parte trasera. Esta es una gran opción para que puedas t Sólo tienes que reorganizar esos diferentes artículos. Ahora no hay sólo un adelantamiento. Una vez que salga adelante, otro y todo así es sólo esos dos botones lo traerán adelante todo el camino o lo traerán de vuelta hasta el final. Si solo quisieras hacer una capa a la vez, sin embargo, ahí es donde simplemente bajando a la propia línea de tiempo y arrastrando y reposicionando eso. Simplemente toma esto y muévelo. Lo arreglamos en ese orden donde quiera. Ahí eso funciona un poco mejor, pero así es como arreglas tu cualquier elemento que sea si es una imagen. Si se trata de un video de sus archivos de audio, así es como arreglas tu línea de tiempo, llevas cosas al frente, llevas cosas al fondo o simplemente reorganizándolas ciertas capas a la vez. 9. 09 agrupación: todo bien. Entonces si tengo diferentes objetos que quiero agrupar juntos con el fin de mover esos objetos u ocultar esos objetos todos en una de las veces para que no tenga que pasar por ah, botón que tiene múltiples capas y ocultar individualmente. Si solo quería enfocarme en un elemento, quiero esconderlos individualmente. Simplemente pueden tomar ese grupo, y luego lo puedo ocultar desde ahí sin tener que crear un símbolo. Ahora, símbolo es otra forma de hacerlo. Pero un símbolo simplemente crea una línea de tiempo completamente nueva. No quiero hacer eso con esto. Yo sólo quiero entrar en realidad y agrupar ciertos elementos juntos. Entonces voy a entrar aquí y seleccionar diferentes artículos en el escenario. Entonces quiero seleccionar mi rectángulo redondeado y voy a entrar aquí, y es como el rectángulo grande, y luego voy a subir y dar clic en Grupo. Ahora tomará esos diferentes elementos que he seleccionado dentro de mi línea de tiempo, y lo pondrá al costado de una carpeta. Ahora puedo hacer doble clic en esa carpeta, y puedo cambiar justo a lo que quiera. Entonces digamos que este es el fondo y voy a tener ese fondo aquí y ahora puedo entonces tomar la cosita girada al costado del menú o dentro de la carpeta, y podría seleccionar eso. Y entonces girará todo hacia abajo para que aún pueda ver todos los diferentes elementos dentro de aquí. Pero al menos me permite reorganizar el fondo con sólo arrastrar y soltar ese elemento. Y tiene todas las cosas que hay en ese grupo. Entonces esos son los diferentes elementos. Si quisiera, también puedo entrar aquí y puedo tomar otras cosas. Si quería agregarla dentro de un grupo más adelante, puedo agarrar esto como esta forma de elipse. Si quería agregar esto dentro del fondo, déjame simplemente agarrar eso, cursor sobre el fondo y luego soltarlo. Y ahora que la herramienta Ellipse está ahora dentro del grupo. Si quería entonces cosas de grupo de la ONU. Si decido OK, esto no está funcionando. Vamos adelante y en grupo y que los diferentes elementos que muestren por qué puede seleccionar esa capa de fondo subir a la parte superior y luego hacer clic en grupo. Y luego simplemente nos pondremos en esa carpeta, Tomaremos todos los elementos de esa carpeta y luego unimos grupo un centro comercial, y ahora puedes usarlo dentro de nuestra. Ahora son todas solo capas separadas dentro de tu proyecto de tipo tumulto aquí. Entonces así es como sacas diferentes elementos y agrupa, um, no ponerlos dentro de símbolos, sino cómo agrupa y luego cómo agrega otras cosas al grupo y luego cómo deshace el grupo en un momento posterior. 10. 10 Trabajar con texto: Muy bien, Así que ahora vamos a estar hablando Hablamos de cómo construir formas, cómo usar rectángulos, rectángulos redondeados y cómo usar tus labios. Tenía un grupo esos los arreglan y cosas diferentes como esa. Ahora bien, el agrupamiento en arreglos se aplica a todos los diferentes elementos que se pueden utilizar en el escenario. Entonces si estás usando texto, si estás usando video, si usas un audio o algo por el estilo, todo eso se aplicará, y será lo mismo. Ahora vamos a estar hablando de lo siguiente, cómo usar texto o y luego vamos a hablar de audio y video y cosas diferentes como esa. Entonces Entonces vamos a seguir adelante y primero centrémonos en el texto en cómo insertar texto, cómo usar texto en cómo actualizar texto. Por lo que quiero entrar en la sección de elementos. Voy a seguir adelante y dar clic en el cuadro Miss desplegable y luego seleccionar el texto, y esto agregará un elemento de texto a mi escenario y realmente todo desde aquí. Todo lo que tienen que hacer es empezar a escribir. Entonces sólo voy a insertar un texto. Este es un texto de muestra, y automáticamente sólo tomará ese texto. Sea lo que sea que empieces a escribir y lo estira hasta la longitud del texto. Ahora si quisiera Si entro en texto en el agradable um, quería estirar cierta área de ese texto. Yo también puedo hacer eso. Ahora la diferencia entre simplemente dejar que se llene automáticamente y tomar eso con es ahora el entro aquí o llevarme el con y dimensionarlo automáticamente a eso. Ahora cuando entro aquí y empiezo a escribirlo automáticamente redimensionar una vez que golpeo, entra a ese tamaño ahí para que el tamaño automático lo haga justo cuando empieces a escribir. Ese es el con del tamaño real. Si especificas el tamaño del rectángulo antes de empezar a escribir o el cuadrado, lo que sea y de tu texto, entonces sólo tomará ese tamaño. Y entonces puede como estás escribiendo, eso puede parecer que se ha tomado más tiempo, pero tan pronto como entras, entonces básicamente sólo tomará eso y lo llevará a la siguiente línea también. Entonces voy a seguir adelante y borrar eso por ahora. Pero como yo estaba escribiendo. También hay algo más que surgió. Si entro aquí, sólo nos deshacemos de ese texano en un nuevo texto aquí. Este es un texto de muestra, y como yo estaba escribiendo aquí, te darás cuenta. Justo debajo de este texto hay un pequeño lápiz. Ahora ese lápiz, si hago clic en, se abrirá un poco pop, un pequeño pop ventana abierta y se ve casi igual tiene el mismo texto. Entonces te preguntas por qué ¿Cuál es la diferencia ahí? ¿ Por qué no lo escribo en el escenario? Bueno, la diferencia es que, con esta pequeña ventana emergente, en realidad puedes insertar etiquetas HTML dentro de aquí, y eso usará el ataque. Entonces si quería etiquetar o negrita, por ejemplo, esto es, digamos que queríamos agregar que en lugar de etiquetas fuertes, voy a seguir adelante y solo teclear un impuesto fuerte antes de esto y luego escribir al final de ella. Vamos a seguir adelante y cerrar la etiqueta fuerte y ya te darás cuenta en el texto. Es un poco más difícil de ver en la pantalla, pero dice que esto está en perno ahora. Puede venir aquí y vamos a añadir un poco de descanso. Entonces voy a sumar br slash y luego voy a terminar eso y te das cuenta que automáticamente incluso se sabe dentro de esta pequeña ventana emergente, no hizo diferencia. Pero en lugar del texto real en sí, el renderizado que trajo eso agregó un descanso. Y así trajo esa línea. Um, que entre el cualquier cosa después de que rompa el br, lo llevó a la siguiente línea. Y así ahora en realidad tiene que dentro de aquí, puedes agregar tus propias etiquetas HTML y construir tu propia HD o usar tus propias etiquetas HTML dentro de él tipo de símbolo. Esa es una característica enorme y agradable para poder hacer eso para que puedas darle estilo a ciertos elementos. Si solo querías que cierto texto fuera cierto color. Ella quería que cierto impuesto fuera audaz. Puedes hacer eso dentro de aquí Ahora también puedes entrar seleccionando el texto. Aquí, puedes entrar en la tipografía, Inspector, el inspector de tipografía te permite cambiar diferentes elementos sobre el texto. Entonces si quisieras entrar aquí y audaz y solo ciertos elementos si no te sientes cómodo con HTML. Um y te sientes cómodo con sólo cambiar la ventana del inspector. Tienen razón. La mayoría de las personas son Bueno, puedes simplemente seleccionar los diferentes elementos del texto, y puedes venir aquí y hacer clic en negrita cursiva, subrayar y hacer cosas diferentes. Pero lo que no se puede dio es que no se puede agregar en como, um, en lista de pedidos para que pueda tener, como, un elemento de lista con balas como html normal. Cuando haces eso, eres tú l tag, um, um, o Ally Tag o algo por el estilo. No puedes hacer eso O esta Ah, etiqueta br entera que teníamos una, um no podías hacer eso dentro de, um, dentro de sólo el inspector. Entonces ahí es donde entra en juego el beneficio de poder editar HTML porque puedes hacer eso en lugar de la pequeña ventana emergente que Kansteiner alias dentro seleccionando impuesto y viniendo al inspector de tipografía. Pero no se puede agregar en otro impuesto HTML. Son algunos de los otros elementos que puedes editar dentro de la tipografía, Inspector es la familia Thea Font. Por lo que puedo entrar aquí puede cambiar la familia de fuentes, cualquiera que sea la opción que he seleccionado aquí como aprendimos antes. Si quisieras agregar tus propias fuentes, realidad tendrías que entrar al recurso, bajar al icono más, bajar a la fuente. Y una vez que hayas añadido las fuentes, debería aparecer aquí en esta ventana. Pero puedo ajustar el tamaño puedo ingresar en un tamaño específico de los fondos que quería. También puedo simplemente entrar aquí y seleccionar una talla allí. O podría simplemente entrar aquí y simplemente seleccionar este pequeño deslizador, y eso simplemente simplemente lo arrastrará hacia arriba y lo hará más grande a medida que arrastras hacia arriba o lo hace más pequeño a medida que arrastras hacia abajo. Entonces podría entrar aquí, hacer tus cursivas. También puedes venir en el color. Aquí está el agregar más fuentes donde puede entrar y me permite Teoh, eso es Ah, pega Cancelar por ahora, y vamos a entrar aquí y dar clic en Agregar más fondos y ahora me tiene añadir mi propio cliente. Podría pasar por las fuentes de Google. Puedo agregar cualquier tipo de fuente de Google, o puedo hacer clic en CSS personalizado. Ahora hay muchas fuentes diferentes en los fondos de Google. O si hay fuentes que el año usa la compañía que son fondos específicos, probablemente puedas encontrar algo que similar en las fuentes de Google y luego traer eso ahí. Y si hago click en vamos a entrar aquí y este de aquí. Y si hago clic en Agregar Funt, entonces esa fuente ya ha sido agregada. Y así no puedo recordar dónde creo que es éste o escuchar este Martel. Y entonces esa es la que acabo de agregar. Ahora está en mi selección aquí. Si entro en mi recurso está ahí está justo ahí. Mi fuente ha sido agregada a mi proyecto, y algunas la puedo utilizar como parte de la selección ahí. Es así como tenías fuentes personalizadas ahí. O también puedes entrar y debajo del cuadro desplegable en CSS personalizado, Y esto te permite adjuntar el CSS para cualquier otra fuente. Esa es una fuente muy específica que quieres usar en la cama. HTML. Se puede hacer con eso son html cabeza incrustada para insertar eso, y así es como se agrega su propio fondo personalizado. Ahora podrías hacer las alineaciones, puedes cambiar las alineaciones de izquierda alineadas a solo centro. También se puede hacer izquierda. Tienes razón, justificada o bloqueada justificada también. Si quieres cronometrar el bloque de texto, también puedes hacer espaciado entre letras. Digamos que querías espaciar entre las diferentes letras, y esas son las diferentes letras de las palabras, no sólo las palabras mismas. También puedes agregar espaciado de palabras, por lo que va a haber más espaciado entre las palabras, y también puedes agregar la altura de la línea. ¿ Cuánta altura hay entre la línea por encima de ella entre comparado con la línea por debajo de ella? Eso también se puede ajustar. Ahora eso viene muy bien. Si estás ajustando el tamaño de Thea del botón, es posible que tengas que colocar la etiqueta de texto real del botón. Hablaremos de eso una vez que nos metamos en botones. posible que tengamos que ajustar eso y cambiarlo con tu botón también. Y luego, igual que hicimos con nuestro panel Elementos, donde pudimos ajustar la sombra de los diferentes objetos que habíamos seleccionado, podemos agregar una sombra a nuestras cosas también a nuestras letras. pueda hacer eso haciendo clic en este pequeño icono de círculo y arrastrando eso. Um, también puedo ajustar el desenfoque. Puedo ajustar el color si quería tener poco contraste con el color, um, um, y ajustarlo ahora si no quiero que haya una sombra y simplemente llevar esto de vuelta a cero todos esos elementos diferentes de nuevo a cero y esa sombra tiene ha sido removido. Pero así es como agregas texto, um, e insertas dentro de tu proyecto. Ahora, con ese texto seleccionado, puede entonces animar el texto. Se puede desvanecer en. Puedes moverlo si querías puntos de bala para volar en ciertos momentos. Eso también se puede hacer y dijo que todos aquellos elementos que se aplican a las formas y se aplican a las imágenes también se aplicarán al texto. Y así solo tienes dedo del pie hacer eso una vez que nos metamos en la sección de animación. Pero así es como por ahora como editas tu texto, cómo cambias algo del HTML, algunos de los diferentes elementos, cómo añades tus propias fuentes personalizadas y todo dentro de tumulto, escribe 11. 11 botones: todo bien. A continuación, vamos a estar hablando de cómo trabajar con botones dentro de un bombo. Ahora puedes traer tus propias imágenes si quisieras, pero en el ismo usado como botones y agregar acciones y cosas diferentes como esa. Pero el bombo sí tiene algunos botones por defecto que tienen estados de hover y estados hacia abajo y todo. Entonces si te metes en los elementos, los paneles seleccionan en los elementos que bajan a botón. Esto agregará el botón dentro del interior de tu área de escenario. Ahora puedes ver que hay igual que el texto. Hay un lápiz como encendido. Si selecciono ese ícono de lápiz, en realidad podría formatear ese botón de cualquier manera que quiera la etiqueta de texto dentro de ese botón con solo hacer doble clic en eso y puedo agregar en mis propias etiquetas HTML, igual que hicimos con nuestro texto. Pero si tengo esto seleccionado, notarás algo que es un poco diferente a lo que vimos con su texto es que tenemos 100 estados oprimidos ocho y entonces tenemos un estado normal. Ahora, con esos diferentes ítems seleccionados, puedo cambiar los colores y puedo cambiar los diferentes elementos sobre lo que sea que esté en esos diferentes estados, y eso luego mostrará cada vez que esté rondando y otra vez o siempre que Estoy presionando. Ahora, cuando estás en el móvil, me gusta si estás en un iPad o si estás en Android o algo por el estilo. Ah, el hover no se mostrará. El hover básicamente simplemente ni siquiera será visible. En ese punto, sólo el prensado se mostrará en realidad una vez que lo hayas presionado. Por lo que es importante que actualices los tres estados diferentes para el hover y la prensa y los regalos, los usuarios, algún tipo de indicación de que algo ha sido seleccionado. Entonces voy a entrar aquí bajo el estado normal. Voy a cambiar esos diferentes dos elementos diferentes de los que ya hablamos. Uno de los elementos del primer elemento fue sólo el inspector de elementos, que fue permite cambiar los colores de las formas y las fronteras y cosas diferentes como esa. Bueno, eso es lo mismo con un botón es básicamente estamos trabajando con forma combinada ah, un rectángulo y un elementos de texto combinados, y se puede cambiar dentro del inspector. Podrías cambiar los elementos, inspector, inspector, y puedes cambiar la información del inspector de tipografía para actualizar y hacer que el botón más o menos. Mira, quieras que se vea así que quiero entrar en la sección Elements en primer lugar, cuando sea como el color desplegable y eso va a seguir adelante y solo cambia a un color verde y voy a entrar igual que aprendimos con sus formas. En realidad voy a quitar la frontera. No quiero que la frontera esté ahí. Yo quiero tomar el ancho de la frontera justo arriba. Llévala a cero ahora. También podría tomar este estilo si quisiera tener un estilo, mientras que doble sólido o algo así, podría cambiar eso a ninguno Ambas formas funcionan si solo quieres presionar la flecha abajo para cero o seleccionar el cuadro desplegable y seleccionar ninguna de las dos vías funciona. Entonces quiero entrar en la tipografía y me gusta me gustan los blancos en el fondo de color . Entonces voy a seguir adelante y en realidad cambiar el fondo donde la tipografía sea una etiqueta blanca . Y así con esa etiqueta blanca ahora puedo entrar en realidad se ve un poco borrosa para mi vista. Pero, um lo mantendremos así por ahora. Pero si hago clic en el estado de hover, te darás cuenta de que cualquier cosa que acabo de cambiar en estado normal también pasa al hover y a la fecha de prensa. Lo que necesito hacer es que necesiten diferenciar, diferenciar lo que va a ser diferente con el sin embargo estado lo que va a ser diferente con el estado de prensa. Entonces con los estados hover seleccionados, voy a volver a mi l Es panel de elementos. En realidad cambiaría el color aquí. Sólo voy a hacerlo un poco más oscuro. Y así, cuando en realidad se cierne, se puede ver que cuando en realidad se cierne, se es un poco más oscuro, y cuando se presiona, realidad voy a hacer lo mismo o en realidad haciendo incluso un poco más oscuro que eso. Entonces cuando entras en la sección prensada, cambiaste en el color o seleccionas el color y luego simplemente lo haces aún más oscuro que lo que estaba dentro del hover. Ahora bien, si vuelvo y reviso mi hover, se puede ver que el estado de hover sigue ahí es el mismo color que acabo de seleccionar . Mi estado normal es del mismo color que antes. Entonces, de nuevo, cualquier cosa que cambies en lugar del estado normal se pondrá en cascada en lo que se cierne en la prensa por si acaso. Pero si quisieras tener un objeto diferente, impresionado mientras puedes entrar en el hovered, puedes cambiar, puedes cambiar, entrar a la prensa y cambiar los elementos de diferencia en los elementos, inspector. O puedes entrar y cambiar los diferentes elementos dentro de la tipografía. Y si quieres que en el texto cambie digamos uno que cuando se cierne, quiero que el texto sea un poco audaz. Entonces voy a entrar al hover y voy a entrar y estilizar el perno. Y así ahora pasa el cursor el texto se pone un poco audaz. Pero si vuelvo aquí, el texto no es audaz. Entonces es básicamente me permite diferenciar lo que quiera ahí. Ahora, si entro aquí e inserto, uh, uh, si quería insertar un poco más de texto, puedo entrar aquí y simplemente cambiar la etiqueta y luego tener el texto más allá. Hasta puedo hacer que cambien los cheques al pasar el rato. Um, lo que sea que quisieras hacer ahí. Entonces así es como entras y agregas un botón y decías Cambia los diferentes elementos en el botón. Pero también puedo hacer lo mismo con mi botón texturizado. La única diferencia con mi botón de textura es que puedo entrar aquí y en lugar de un color regular . En realidad es un Grady en color. Y así ahora puedo cambiar los diferentes elementos. Ah, los InTs Grady dentro de mi botón aquí. Entonces cuando un cambio el primer color a especie de un verde más claro segundo color a un verde ligeramente más oscuro. Y ahora voy a cambiar también el 10 la tipografía a, ah, etiqueta blanca. Y así vamos a deshacernos de la frontera. Tenemos un borde ahí, así que cuando cambies el ancho a cero y ahí vamos. Por lo que ahora puedo venir al estado de hover Y vamos a asumir los dos elementos del Estado Portuario en el encendedor. ¿ Qué? Sólo voy a llevarme eso un poco más oscuro y más oscuro. Uno. Sólo voy a hacerlo incluso un poco más oscuro que eso. Y ahí vamos. Entonces ahora si vengo aquí mi hover y mi prensado Hay una ligera diferencia. Probablemente necesito hacerlo un poco más drástico, pero hay una ligera diferencia con mi hover y mi prensa ahí. Ahora digamos que quería una forma muy específica o menos. Yo quería una imagen y quería que dicho tuviera diferentes estados de hover y prensa también. Bueno, con un objeto seleccionado. Todavía no hemos hablado de imágenes, pero con una perilla , objeto seleccionado. En realidad puedo entrar aquí, y puedo venir al menú de edición y bajar a mostrar controles de botón. Al hacer clic en este show button controles, se abrirá con mi normal, mi hover y mi estado de prensa con esta forma. Entonces no es exactamente un botón, pero lo es. Todavía tiene un estado hovered y oprime que puedo habilitar, y luego puede entrar aquí y cambiar los diferentes elementos sobre la forma para habilitar el hover y habilitar la prensa en cualquier forma que quiera, o cualquier imagen que Yo también quiero. También puedo entrar aquí, y si no estoy viendo los elementos HTML puedo entrar a la edición y puedo dar click en, um en ello elementos HTML interno y esa caja papa que vimos antes con las etiquetas y lo el texto ahora aparece en el textura para que en realidad pueda entrar aquí y en mi forma, puedo insertar texto en esa forma. Entonces eso significa que básicamente puedo agregar en etiquetas HTML, y puedo agregar en otros elementos. Incluso puedo hacer un marco de ojos o cualquier tipo de código de inserción o cualquier cosa por el estilo dentro de este HTML, y puedes hacerlo con cualquier objeto en el escenario. Puedes editar el macho HC dentro de su y otra vez eso es yendo a las ediciones y luego entrando ya sea ah, mostrar controles de botón u ocultar controles de botón o entrar en los elementos de edición en nuestro HTML y te permite obtener esos dos artículos con los que hemos trabajado ya tanto con el botón con el texto. Entonces así es como insertas tanto el botón regular como el botón texturizado y cómo tomas una forma casi cualquier y lo conviertes en un botón dentro de un tipo tumulto 12. 12 imágenes: Muy bien, Hemos hablado de formas. Hemos hablado de poder insertar botones y texto y todo al lado del tipo tumulto. Pero no hemos hablado realmente tenía un trabajo con diferentes imágenes que has construido afuera, como en shopper de fotos, Adobe Illustrator o algo así. Entonces en este, vamos a estar hablando de eso, cómo traer una imagen. Y eso es en la misma sección de elementos con la que hemos estado trabajando. Vamos a entrar en los elementos, íbamos a seleccionar el cuadro desplegable, y luego voy a entrar y seleccionar imagen aquí. Ahora todo lo que tienen que hacer es ir a buscar esa imagen. Sólo puedo entrar aquí y en mi escritorio. Tengo Ah, miniatura aquí. Sólo voy a seleccionar abierto. Y se pudo ver que eso ha sido traído en mi área de escenario. Ahora, con eso seleccionado, entonces puedo entrar aquí y simplemente deslizarlo hacia donde quería estar. Esta es una clavija J. Puedo traer regalos de John. Puedo traer archivos PNG diferentes archivos de imagen, y quiero. Ahora desde aquí, puedo entrar y cambiar los diferentes elementos que notarás en el fondo de la imagen que en realidad está configurado. Es Es como una forma. Pero en lugar de que el estilo de relleno sea como un color o ingredientes, en realidad es solo una imagen. Y entonces tenemos una opción diferente para escalar. Para encajar repeticiones, repita verticalmente o repita horizontalmente. Si quisiera tener un patrón o algún tipo de fondo como normalmente lo haces dentro, HTML solo eran una especie de escala para caber. Entonces, ¿qué encaja realmente dentro de mi área de escenario? Y así y entonces no se está repitiendo y qué objeto seleccionado si quería cambiarlo en un momento dado, puedo dar click en Elegir, y luego puedo entrar aquí y digamos, Digamos que no he actualizado J Peg o PNG actualizado. Puedo entrar ahí, seleccionar ese objeto y cambiarlo también. También puedo ajustar la opacidad de los bordes si bajo a la opacidad, ajuste la sombra, el desenfoque y todo. Lo mismo que hiciste con las formas de diferencia que dice ahí los mismos elementos. Ahora lo otro bonito es que podría trabajar con SPG. Nieve. SPG es si te conocen en La diferencia entre J Pigs, P y G's es cuando tomas una clavija J y PNG y lo estiras, en realidad vas a conseguir alguna ización de píxeles. Si la imagen se hizo muy pequeña y empiezas a estirarla, vas a conseguir algún pixel ization. Se va a ver borrosa. Va a parecer distorsionado o algo así. Ahora, con SPG es, en realidad puedes tomar eso y hacerlo tan grande como quieras o un pequeño como quieras. Y no vas a conseguir ningún tipo de distorsión. Entonces si estás trabajando con Illustrator, puedes guardarlo. Así como SPG es. Si estás trabajando con photoshop, se necesita un enfoque un poco diferente o un poco diferente para trabajar con S. P. G ahí. Pero voy a entrar aquí y voy a dar click en el panel Elementos, entrar en imagen y luego entrar en forma. SPG es el archivo que tengo en mi escritorio, y voy a seguir adelante y dar click en abrir. Ahora está mi forma, y lo que puedo dio con la SPG es que podría hacer esa forma realmente grande y se puede ver que no hay ninguna ización de píxeles en absoluto. Y eso es lo lindo de ah, guardar tus archivos. Si estás trabajando con Illustrator recomendando encarecidamente guardar sus S P G si vas a animar esas cosas cantidad inanimada, sí toma un poco más de tamaño de archivo. Entonces si estás si no vas a estar animando a cultivarlos, haciéndolos más pequeños, nada por el estilo, entonces solo guardar el lío de los paquetes P y G o J estará bien ahí. Pero ten en cuenta que cualquier cosa que hagas cualquier tipo de J. Peg o A P y G que quieras tomar utiliza las mismas prácticas que el desarrollo Web normal, por lo que quieres asegurarte de que las guardes para la Web. Dices, optimizarlos tanto como sea posible. Y así ahí Este tamaño de archivo es mucho más pequeño porque cualquier cosa, cualquier imagen así si es una imagen realmente grande y la traes y lo pones tipo de símbolo bien, eso va a hacer que tu proyecto alto sea mucho más grande aún. Entonces quieres que sea pequeño tamaño de archivo lo más pequeño posible, y lo haces típicamente dentro de Photoshop o ilustrador o algo así, um Y luego traerlo dentro de tipo tumulto. Y entonces si entro en recurso es entonces tengo mi Puedes ver justo aquí tengo mi spg allá. Tengo mi clavija J. Um, Y entonces también tengo la opción de hacer referencia o un archivo retina de referencia también. Si quisiera tener una pantalla de retina. Entonces si estoy trabajando en iPad o iPhone y quiero conseguir una pantalla un poco más nítida, puedo hacer eso también. Pero también ten en cuenta que eso sube el tamaño de tu archivo para todo tu proyecto Web allí. Pero si entro aquí y aún no tengo una retina y quería agregar una retina bien, con esta miniatura seleccionada, puedo entrar a la retina a veces, también, y puedo entrar y agregar archivo fuente. Y ahí es donde añadiría la fuente para este pulgar. Ahora, Ahora estas miniaturas ya grandes las no estoy seguro de lo que incluso se llama pulgar ahora, honestamente , um, pero ya es grande para empezar, así que realmente no necesito una retina. Pero si quisiera tener diferentes elementos cuando está en una pantalla de retina. De forma automática sabe tirar en eso y algunos. Entonces solo estoy agregando la fuente ahí. Y ahí vamos. Ahora que tiene se ve más nítido, más limpio en un iPhone o iPad o resolución muy grande. Ah, computadora. Entonces ahí tienes. Es así como insertas imágenes, cómo respondes SPG es cómo lo cambias. También puedes entrar aquí y seleccionar en el objeto que puedes seleccionar. Esto fueron, dice quitar. Cuando ya no la referencia eliminará el objeto para ayudar a acelerar tu código, va a pre cargar esa imagen. Y así, antes de la interacción, nuestra animación incluso comienza a jugar hasta precargada y puede tardar un poco más de carga del dedo del pie . Um, y luego también se optimizó automáticamente al exportar. Entonces si querías optimizar, Pero si encuentras ese viento está optimizado, lo hará. En realidad, no te gusta la distorsión que estás consiguiendo con ella. ¿ Simplemente desmarcarás eso aquí y luego en cualquier momento puedes reemplazar una imagen sin afectar nada de lo que he hecho en mi animación? Entonces digamos que he usado esto y he animado todo es propio lugar, y estoy como, Oh maldita sea. Necesito actualizar esa imagen sin afectar esa imagen ahí. Podría simplemente entrar aquí y reemplazar ah, subir una nueva imagen, y entonces en realidad va a actualizar eso Bueno, lo hice en la forma equivocada. Lo hice en la forma de SPG en su lugar. Cuando un selecto aquí, haga clic en reemplazar Go Thumbnail aquí y luego se pudo ver que parpadeó por un segundo porque actualizó la imagen dondequiera que se utilizó a lo largo del proyecto. Y eso es todo lo que tenía que hacer. Sólo iba ahí, reemplácelo ahí. Um, ahora dentro de mi otra cosa la referencia del dedo dentro de mi recurso es, es que también puedo entrar aquí y tener filtrar esto fuera si quisiera buscar solo imágenes. Si quisiera buscar solo videos, archivos de audio, funciones, fuentes, fuentes, cualquier cosa por el estilo, puedo hacer eso solo entrando aquí o simplemente si mi recurso se vuelve realmente grande, yo podría simplemente empezar a escribir en el Minch, encontrar esa imagen y luego reemplazarla a partir de ahí. Entonces así se trabaja con imágenes. SPG archiva regalos de P y G, J. Paige o algo por el estilo Dentro de ella. Tipo pequeño 13. 13 Audio: Trabajamos con imágenes. Trabajamos con las formas con las que hemos trabajado el texto. Ahora entremos al archivo de audio y luego a continuación hablaremos de video. Entonces con el fin de contestar audio dentro de tu proyecto de tipo templo, simplemente entras en los elementos. PanaM bajan al audio, y luego, con ese audio seleccionado, entonces puedo encontrar el audio en mi escritorio, cual tengo un archivo de muestra aquí Azaz audio dot mp tres. Voy a dar click en abrir y dijo que automáticamente rasga un botón para mí. Ahora ese botón de audio entonces convertirá ese audio en o en realidad no convertir. Pero para poder reproducir el audio, si querías asegurarte de que se reproduzca en todos los dispositivos, puedes ver que aquí está colocado. Dentro de mi recurso está Folder, una carpeta de audio que tiene una referencia al punto de audio MP tres. Bueno, hay un par de cosas más de nuevo para poder jugar en múltiples dispositivos diferentes que probablemente me gustaría convertir o disparar o convertir el archivo de audio en un archivo dot org o dot whv away. Y así puedes hacer como Adobe Edge o lo siento audition adobe. Y para convertir eso sobre también puedes dio audacidad y exportar eso a los diferentes elementos al archivo Ogi o al archivo camino. Y luego una vez que lo hayas hecho para, ya sabes, no interrumpir el proyecto porque ahora mismo no tengo que tener esos archivos. Ahora, en realidad puedo trabajar con los que pueden, um, insertarlos y usar el audio siempre que quiera con el fin de, Pero para antes, me gustaría hacer esto antes de publicar esto para tenerlo, asegúrese de que funciona en todos los dispositivos. Bueno, me gustaría asegurarme de que entre aquí y en mi recurso está seleccionar la slash de audio o g y luego entrar en la fuente de anuncios y luego ir a buscar ese archivo Ogi de esa manera. Sabe que es el mismo archivo de audio, pero es la versión Ogi o es el mismo audiófilo en su versión la w, la versión manera. Pero no tengo que tener los para el desarrollo hasta el momento. Yo solo quiero asegurarme de que los consigo antes de publicar cantidad. Ahora, una vez que el audio está realmente en su lugar crea automáticamente un botón porque el audio necesita algo para poder activarlo. Entonces voy a entrar aquí y así entrar en mis acciones. Todavía no hemos hablado de esto, pero ahora mismo es teatro en está listo para tocar sonido. Y ese sonido va a ser el archivo de audio. Y también puedo este es un spot donde puedo enlazar mi versión MP tres mi versión O G. A, o mi versión de onda si quisiera. Mismo spot. Y si no hago eso, ves estas advertencias que dice OK, Firefox 3.64 punto 5.0 y superior a un nog u wave fuentes de audio requeridas para la reproducción. Entonces como esas advertencias son, ni puedo tener un nog o ausente presentar mi Disney ni uno. Entonces si tengo una manera archivada, entonces podría simplemente vincular eso. Y entonces esa advertencia probablemente desaparecerá después de eso. En ese punto, si quería esto ah, jugar automáticamente, puedo entrar aquí y en mi escena, Inspector, Inspector, cuál es la escena? Um, la escena inicial. Cuando entro en esta página, ¿por qué puede entrar en escena cargar y seleccionar el cuadro desplegable para luego bajar a reproducir sonido. Y si selecciono el de este cuadro desplegable, cuál es el sonido que quiero reproducir, selecciona ahí el archivo de audio. Después seleccionará el Empezará a reproducir el sonido sin que la persona tenga realmente un gatillo. Ese botón. Si tengo una imagen, digamos, Déjame seguir adelante y sólo insertar aquí mi imagen. Sólo voy a traer esa imagen de vuelta la imagen aleatoria y entro aquí e inserto 12 imagen de archivo disco. El inserte esa imagen aquí y luego puedo entrar en las acciones, bajar al ratón, hacer clic, seleccionar el cuadro desplegable para reproducir sonido y luego seleccionar eso y decir: OK, OK, ahí está el archivo de audio. Va a tocar ese sonido. Ah, cuando la persona hace clic en la imagen, así que no es específicamente que no se pueda reproducir, sólo tiene reproducción de audio. Es solo que hay que especificar cuándo se está reproduciendo el audio. No obstante, aún tenemos una advertencia con carga vista. Notarás el cuadro desplegable. Hay una advertencia más que ah, no específica de tener el formato Ogi o el formato visitante, dice aquí mismo. Android 2.3 y ciertos IOS um, elementos que en realidad prácticamente todos los elementos IOS no pueden reproducir automáticamente audio en dispositivos móviles a menos que sea, ah, ah, aplicación web de pantalla de inicio. Entonces si se trata de una web de stream home up, se reproducirá automáticamente. No obstante, IOS necesita o incluso algunas versiones de Android necesitan que el usuario inicie el sonido o inicie algo, y luego el sonido se queja. Después de eso, ya sea ah start button donde normalmente verás en diferentes juegos o interacciones. Ah, botón de inicio cuando hacen clic en iniciar Después de eso, entonces estás bien para iniciar diferentes sonidos y usar diferentes elementos. Es solo que necesita haber algún tipo de entrada de usuario para permitirte hacer eso. Y creo que eso es una restricción Napoli que quieren tres Usuario no solo tener esto esto estos todos estos archivos de audio se está reproduciendo al azar. Quieren que el usuario participe en el archivo de audio lo mismo con el video que no puedes tener en los dispositivos IOS video solo reproduciendo automáticamente su usuario necesita involucrarse con él, y necesitan presionar el botón de reproducción y para que empiece a reproducirse. Entonces así es como realmente entras aquí e insertas audio y cómo usas audio en diferentes disparadores, ya sea la carga de escena para empezar a reproducirse automáticamente. Y de nuevo, probablemente no quisiera hacer eso en IOS, pero así es como querrías hacer eso si solo estás apuntando a escritorios o algo , pero también cómo añades al audio para empezar a reproducirse en Ah Imagen de Preston o cualquier otra cosa por el estilo. Es así como se trabaja con el audio. 14. 14 Video: continuación, vamos a estar hablando de cómo insertar video dentro de tu proyecto. Entonces voy a subir a la sección de elementos, bajar a video, y cuando baje a video, tengo que, um, encontrar mi video, encontrar mi video, que ahora mismo tengo este video de conejito asesino de Monty Python así como esta muestra va a dar clic en abrir aquí y eso va a insertar el video dentro de mi proyecto. Ahora, abajo en la parte inferior, notarás que hay una pista de video. Si entro a mis propiedades, tengo que asegurarme de que esté seleccionada. Voy a estirar esta sección de propiedades y te das cuenta que en realidad puedo ver los diferentes elementos de ese video aquí. Ahora, eso es bonito, porque entonces puedo activar o insertar elementos de línea de tiempo dedo del pie suceden en cierto punto al video. Pero por ahora, ahora mismo, por defecto, no tengo Aún no hemos hablado de esos desencadenantes, así que no me voy a preocupar por eso. Pero eso es sólo algo a tener en cuenta. Ahora, con este panel Elementos seleccionado, um, quiero entrar aquí y en realidad notarás par de elementos diferentes con este panel de elementos seleccionado. El primero es que el video en sí me da un poco de advertencia. Aquí, A dice auto safari móvil. Um, jugadas de auto ignoradas, así que no jugarán auto. Y luego me dice las fuentes de video on fire Fox requeridas para la reproducción. Por lo que en realidad necesito este archivo Oh, gv o este w este archivo Web m. Entonces al igual que el audio, en realidad necesito asegurarme de que tengan los tres formatos diferentes para los diferentes navegadores con el fin de asegurarme de que tome mi proyecto funciona en todos los navegadores. No me aseguré de que esos formatos sean correctos estén formateados en el formato correcto para que yo trabaje con dentro de tipo tumulto. Ahora, codificador Adobe Media permite codificar video para que yo pueda tomar esto. Y antes de eso, he entrado en adobe media encoder y luego convertido a los formatos correctos para poder usarlo dentro de aquí. Y luego tengo un par de diferencia que controla aquí abajo. Tengo este auto play, pero de nuevo IOS ignorará eso. Y luego mostraremos unos botones de juego. En realidad tienen que golpear play Si quería mostrar los controles o no. Si quiero que el usuario pueda controlarlo. Yo puedo hacer eso. Yo quería ser silenciado por defecto. Seiken acaba de seleccionar silenciado. Y si quería bucle una vez que llegue al final del video, ¿regresa al inicio del video y empieza de nuevo? Yo también puedo hacer eso. Entonces si yo quería que esto fuera, ah, una especie de video en bucle y yo quería ser silenciado en segundo plano, sólo tomaremos ese video, lo estiraremos hasta el área completa del escenario aquí y ahora. Yo sólo podría tener este bucle, y va a tener una especie de tu video animado yendo en segundo plano como lo has visto en algunos banners Web allí. Esa es una forma de hacerlo ahí. Pero voy a volver. Trae esto de vuelta a los controles aquí. Y una cosa que vas a notar aquí es que si previsualizo esto en diferentes dispositivos, es depende de los controles dependen del dispositivo o del navegador que realmente estés usando. Entonces y, um, el dispositivo a Así que si estás usando un iPad, va a usar los controles predeterminados que ves en un iPad y iPhone. Lo mismo con mandroid va a usar los controles de jugador por defecto para esa misma cosa estaba lejos. Se va a utilizar los controles por defecto con eso. Entonces si entro aquí, click play here, notarás que hay los controles por defecto y tengo retroceder 30 segundos. También tengo eso yendo a pantalla completa para que pueda entrar a pantalla completa. Y también puedo asegurarme de que este ajuste al auto play también. Entonces así es como entro aquí y solo ajuste diferentes elementos en mi video seleccionando los diferentes objetos aquí y algunos puedo entrar y algunos tienen auto play. Yo lo puedo tener control, mostrar los controles. Puedo tener un silenciado. Puedo tener un bucle en cosas diferentes, pero eso es lo básico de usar video dentro de él para multi pichon también vienen aquí, um, enemigo en la opacidad. También puedo animar Ah, el video puedo tener una mosca adentro si quería Teoh animarlo en animado fuera. Entonces muchos elementos diferentes, los mismos elementos que utilizas con formas normales y diferencia. A archivos de texto y todo así seguirán funcionando de lado de los archivos de video y audio, mientras que no de audio sino botones que tienen archivos de audio adjuntos a él. Entonces así se trabaja con video dentro de su tipo Immel. 15. 15 Widget HTML: el último elemento de lo que vamos a estar hablando dentro de tipo tumulto es el widget html herbal embed. Entonces voy a entrar en la sección Elementos. Yo quiero bajar al widget HTML. Qué hará eso te darás cuenta en la etiqueta aquí, dice widget html en Humo Wedge A se utiliza para mostrar HTML incrustado en tu escena o incrustado en mi marco de un objeto Web diferente por lo que más o menos solo nos da la capacidad de agregar lo que sea código que queremos. Por lo que arriba en el en los elementos, Inspector, tenemos este widget HTML. Puedo hacer clic en este fragmento de código de edición, y si hago clic en el agregar un fragmento de código ahora, esto debería ser familiar. Esto es con lo que estamos trabajando antes, donde realmente podemos escribir el código que queramos. Código Html Ahora. Por lo general, estábamos haciendo sólo diferentes archivos de texto o diferentes elementos de texto, pero realmente podría simplemente poner en una de sus etiquetas que una vez dentro de aquí sólo tenga en cuenta. Es solo algo que, um, um, sea cual sea el código con el que realmente estés trabajando, solo tienes que asegurarte de que si estás haciendo referencia a diferentes objetos, lo hagas en el lugar correcto y todo. Entonces así podemos o editar el HTML justo dentro de ahí, o realmente podemos entrar aquí y dentro de los elementos. Inspector debilita. Tan solo un especificar u R L que queremos usar eso en embed y enmarque código dentro de ahí, por lo que eso es más o menos con el widget HTML es que puedes insertar otro HTML. Puedes enlazar a sitios web o ah, trayendo otros elementos como ese, o puedes contestar en tu propio HTML. Agrega en tu propio marco de ojos o algo así dentro de ah a tipo mull. Ahora lo único bonito de eso es, si solo te especifican en un área determinada para ser ese HTML como un Google Maps o algo así, entonces puedes animar en esos mapas en ciertos momentos, y puedes tener esos sólo en ciertas páginas y todo. Pero así es como usas el widget HTML. Dentro de tumulto, tipo 16. 16 símbolos: Está bien. Entonces lo siguiente de lo que vamos a estar hablando son símbolos dentro de él. Tipo pequeño. Ahora, los símbolos son realmente bonita característica porque te permite tener animaciones anidadas. Si quieres tener ciertos elementos. Digamos que estás usando tu línea de tiempo para saltar a diferentes puntos. Pero querías tener elementos que sean independientes de tu línea de tiempo y todavía se pueden animar continuamente incluso si detuviste tu línea de tiempo. Básicamente en. Vimos que el mismo comienzo cuando yo estaba mostrando los diferentes ejemplos del mapa y ustedes vieron el mapa simplemente tipo de permanecer en un solo lugar. Pero luego viste los diferentes elementos, como el carrusel o el tren que seguía dando vueltas una y otra vez. Esas eran todas líneas de tiempo anidadas dentro de lo de la animación de bombo aquí. Entonces ahora solo me voy a gustar pensar, mantener las cosas básicas. En realidad no voy a construir algo muy complejo aquí. Y así te estás preguntando, OK, ¿cómo llegué hasta a ese lugar para empezar? Simplemente me gusta mantener las cosas con diferentes formas y diferentes elementos realmente básicos. Entonces aprendimos el concepto básico, y luego en otros tutoriales u otros cursos o algo así después de lo básico, después de que sepas hacer solo con formas normales, entonces podemos meternos en las cosas más complejas, como, De acuerdo, ¿cómo construyo esta cosa específica sabiendo que los conceptos básicos que ya conozco, como doe eyed, Entonces toma eso y luego implementa en diferentes áreas y cosas así nos metemos en eso es sólo otra vez. Mi estilo es simplemente seguir con lo básico, seguir con las formas básicas. Entonces, ¿no te estás preguntando cómo incluso llegué a un cierto punto o algo así una vez que he configurado un archivo de muestra o algo así? Muy bien, entonces vamos a entrar aquí y hacer clic en nuevo símbolo. Tienes dos opciones diferentes. Simplemente puedes hacer clic en crear un símbolo completamente nuevo, o puedes crear una forma que se va a convertir en un símbolo. Entonces voy a entrar en un rectángulo, y sólo voy con eso dice, rectángulo seleccionado, va a seleccionar ese símbolo encendido, dice nuevo símbolo de selección. Entonces si tenía múltiples elementos que van a estar animando dentro de ese símbolo, puede que desee seleccionar todos esos elementos y luego entrar en nuevo símbolo de selección. Bueno, voy a dar clic en nuevo símbolo de selección aquí, y realmente no ha cambiado mucho. Notarás en lugar de rectángulo hacia abajo en la línea de tiempo. Ahora dice símbolo, deshazte de mi widget HTML allí. Pero sólo dice símbolo y podría nombrarlo lo que quiera. No obstante, cuando estás queriendo y seguimos trabajando con la línea de tiempo principal en el área principal , no en ningún símbolo en absoluto. Si quería entrar en ese símbolo y luego trabajar con esa línea de tiempo, también puedo hacerlo. Pero para conseguir ese concepto, voy a primero que nada, anima y aún no hemos hablado de animación, pero vamos a hacer sólo un rápido enemigo que venga aquí y simplemente anima. Entonces voy a poner esto en una posición actual, y luego voy a animar. Hice clic en este botón rojo de grabación. Ahora eso va a grabar cualquier movimiento que hice. Ahora muevo este objeto solo para registrar que este es el estado inicial del botón o lo siento del rectángulo, y voy a mover mi cursor o esta línea de tiempo a un segundo, y luego puedo estirar esto sobre Teoh animate al lado derecho por lo que notarás una cosa y otra vez entraremos en profundidad con la animación. Pero notarás esta línea azul que se crea que es theano mation en la línea de tiempo principal . No estamos trabajando dentro de ningún símbolo en absoluto. Ahora, si quisiera entrar en este símbolo y animar algo dentro de ese símbolo que es independiente de la línea de tiempo que acabo de crear mientras podría entrar déjame solo asegurarme de que voy a golpear el stop record primero que nada, pero voy a entrar en este símbolo para entrar en el símbolo tienes que hacer doble clic en el objeto que el propio símbolo. Entonces voy a seleccionar esto un símbolo y te darás cuenta. Ahora tengo esta línea púrpura que aparece en mi línea de tiempo. Esto realmente me da unas migajas de pan para hacerme saber dónde estoy porque puedes tener un símbolo dentro de un símbolo dentro de un símbolo, y puedes conseguirnos profundo. Es lo que quieres básicamente, y esto de nuevo te permite simplemente seguir el rastro sobre ahora porque entré en este símbolo con el rectángulo, um, no tiene nada que acabo de hacer en la línea de tiempo principal porque esto es de lo que acabamos de hacer en la época del Maine. Al igual que ahora puedo crear mis propias animaciones en este punto que continuarán recorriendo una y otra vez aunque la línea de tiempo principal se detenga. Entonces voy a entrar aquí, dar click en el botón de grabación y a alguien que se mueva. De hecho me voy a estirar aquí. Simplemente tomamos esta rotación y voy a venir a mi propiedad de elementos, y yo voy y luego voy a venir a mi rotación. Piensa en mi acción de rotación. Mi rotación está en mis métricas, Inspector. Voy a entrar en mi rotación, y sólo voy a subir esa rotación para ser algo así como, Digamos ah 3 60 Bueno, eso es hacer esto en realidad, uh, al 73. Parece que estamos encendidos y nos acercamos un poco a 72. Probablemente a 70. Ahí vamos. Yo sólo quería mantenerlo en las mismas cajas límite lo que teníamos antes. Y, um, ahora , en realidad, necesitamos empezar este de cero. Disculpe. Necesito mover mi línea de tiempo. Recuerda, vamos a hablar de esto, y una vez que entremos a la sección de animación donde necesitas mover tu dedo del pie de la línea de tiempo un segundo o por mucho tiempo que quieras. Y ahora podemos seguir adelante y tomar esto alrededor de una vez por completo. Y vamos a hacer todo un 3 60 ahí, ahí vamos. Entonces básicamente solo volteó sobre una vez, todo el camino a 360 grados y algunos Eso es todo. Entonces pero tenemos que hacer Una cosa más es que necesitamos bucle el bucle del dedo del pie de animación, la animación que realmente necesitamos para agregar un gatillo. Y con sólo hacer clic en el icono más dentro del diamante, podemos entonces entrar en acción y luego podemos ir a Vamos a bajar a iniciar línea de tiempo y vamos a ir a Línea de tiempo Principal. Entonces adentro. Y aún no hemos hablado de líneas de tiempo múltiples líneas de tiempo. Pero dentro de cada línea de tiempo media o incluso símbolo, tienes diferentes líneas de tiempo. Puedes entrar aquí y lo puedes ver. Ahora mismo. Simplemente tengo una línea de tiempo principal, y esa línea de tiempo principal se va a ejecutar sólo una vez por defecto. Pero lo que quiero hacer es que quiero un bucle que vuelva a correr. Entonces pero todo lo que estoy haciendo aquí está justo dentro de este símbolo on. Entonces estoy haciendo bucle sólo la animación, que es la rotación aquí dentro y para que la línea de tiempo principal no se vea afectada absoluto. De acuerdo, entonces una cosa que hemos fallado en hacer hasta ahora, si odio la vista previa es que la línea de tiempo anidada no se reproduce automáticamente bien, ¿cómo consigo que inicie avión? Entonces una cosa que necesito hacer es en realidad en mi línea de tiempo principal o en mi propia capa principal. Necesito entrar aquí y seleccionar ese símbolo. Y entonces necesito bajar a las propiedades y bajo acciones de símbolo. Necesito hacer clic en este icono más y luego y aparece abrir con esta acción de símbolo. Y luego selecciono el cuadro desplegable para iniciar línea de tiempo. Bueno, va a especificar en qué línea de tiempo está encendida, pero voy a tener múltiples líneas de tiempo aquí. Y cuando el nombre es el que está ahí solo por defecto es la línea de tiempo principal. Entonces voy a asegurarme de que eso sea seleccionado, y eso es más o menos porque estoy hablando con la línea de tiempo del símbolo. No estoy hablando de la cronología general del proyecto. Sólo estoy hablando con la línea de tiempo del símbolo, así que quiero ir a un hit and hit preview ahora y te darás cuenta de que la línea de tiempo, la línea de tiempo principal que hemos detenido porque no estamos haciendo bucle en esa, sino la rotación, una palabra dando vueltas una y otra y otra y otra vez. Se va a seguir animando, y de esa manera tenemos básicamente la línea de tiempo principal. Detenerse e independiente de esa línea de tiempo es otra línea de tiempo que sigue dando vueltas una y otra vez y otra vez así. Entonces esa es la belleza de los símbolos. Ahora, otra diferencia, símbolos persistentes que te permite tomar ese símbolo y más o menos tener una cruzada cualquier nueva escena que realmente crees. Vamos a estar hablando de eso en el próximo video. 17. 17 símbolos persistentes: en el último video, hablamos de símbolos. En este video, vamos a estar hablando de símbolos persistentes. Ahora. La diferencia es más o menos que es lo mismo. Todavía puedes tener, um, animaciones funcionales. Se pueden tener líneas de tiempo independientes entre sí. Y así, incluso si tu línea de tiempo en sí está siendo, tu propia línea de tiempo se está ejecutando en la línea de mientras tanto y tienes otra tiempo que se está haciendo un loop una y otra vez. Ah, eso es lo mismo. La única diferencia con los símbolos persistentes es el hecho de que atraviesa todas las escenas. Entonces si entro aquí y en mi sección de escena, sigamos adelante y solo agreguemos una nueva escena. Al hacer clic en este icono más, va a agregar una escena completamente nueva. Voy a volver a ver uno, y digamos que tengo un trasfondo que va a ser similar, apisado todos los objetos de diferencia. Podemos pensar que OK puede entrar aquí, seleccionar el crear un cabello rectángulo y simplemente estirar ese artículo. Y ahora ese va a ser mi antecedente. Bueno, voy a entrar al panel de elementos, cambiar eso para leer, y ahí vamos. Ahora. Si quisiera que esto pasara por todas las diferentes escenas. Bueno, yo sólo tendría que copiar eso y pegarlo en cada escena que pudiera convertirse en una pesadilla . Y tendrías que dedicar mucho tiempo a eso. Um, si querías básicamente solo de una sola vez, tener que a través de todas tus diferentes escenas hará un símbolo persistente. Entonces voy a entrar aquí y bajo símbolo. Voy a hacer click, hacer nuevo, símbolo persistente de selección, que tengo el rectángulo seleccionado. Y se va Teoh, dame la opción de ver agregado al actual visto o agregado dedo del pie todas las escenas. Bueno, vamos a seguir adelante y añadirlo a todas las escenas y te darás cuenta automáticamente y visto a ella ahora tiene ese símbolo persistente ahí. No tengo que crear. No tengo que hacer nada. Entonces si creo una nueva escena, va a tener ahí de nuevo ese símbolo persistente. Y así que eso es lo bonito es que todavía puedo entrar aquí a esa línea de tiempo o ese símbolo, crear en las animaciones que quiera. Puede tener un fondo animado teniendo diferentes objetos pasando por como lo vimos en ese mapa. Tienes el cuidado vender. Tenías los diferentes elementos animando independientemente de la línea de tiempo principal real. Puedes hacer eso aquí, también, también, pero luego cualquier proyecto o cualquier escena que crees que tenga diferentes objetos volando dentro o volando hacia fuera tiene ese mismo símbolo de fondo realmente útil, característica extremadamente útil que tienes por dentro. Es un tipo de mole que no he visto otro, um, proyectos u otros archivos son aplicaciones como esta misma. De acuerdo, entonces Pero si querías en escenas específicas, esconder este símbolo persistente, bueno, lo tienes en tu línea de tiempo. Aún así, así que solo podrías hacer clic en el, um, globo ocular, y eso realmente lo ocultaría de tu línea de tiempo. Entonces no está dentro de tu tiempo principal ni de esa línea de tiempo, pero es una línea de tiempo cada otra, aunque creo más líneas de tiempo. Las nuevas líneas de tiempo tienen ese símbolo, pero el otro en esa escena específica está escondido ahí ahora. ¿ Algún cambio? ¿ El de las cosas bonitas de los símbolos o símbolos persistentes? ¿ Es más o menos cualquier cambio que hagas en un área pasará por el tablero. Entonces si entro aquí y bajo este símbolo persistente, haga doble clic en él y luego cambie el color a, digamos, verde bien a través de todo lo demás. Todas mis diferencias escenas. Ese proyecto ahora ha cambiado a o eso es un fondo ahora ha cambiado un verde. Si agregué otros elementos entrando en ese símbolo y luego agregando otros elementos como, digamos, un elemento de texto aquí ahora ha agregado eso a todas las instancias de ese símbolo. Entonces si vuelvo a parecer ver uno, bueno, son Innis, está ahí. Entonces básicamente hago mi cambio en un solo spot. Y luego es una cruz en el tablero en todos los elementos, y eso es lo mismo con símbolos solo normales. Si vas a tener un botón que se va a armar, crearemos el botón y luego iremos adelante y luego pondremos ese botón y usaremos ese botón y lo largo de todas tus diferentes escenas. Y si necesitas hacer un cambio a ese botón, digamos que necesitas actualizar los colores que necesitas, actualizar las etiquetas o algo así. Lo cambias en un solo spot, y cuando cambias en un solo spot y luego cascadas a todos los diferentes elementos, esa es otra gran característica de trabajar con símbolos dentro. Es un tipo topo 18. 18 Línea de tiempo principal: vamos a hablar de las principales líneas de tiempo dentro. Es un tipo topo ahora en un nuevo proyecto. Si vienes por el lado izquierdo dentoso aquí un al fondo, te darás cuenta. Si selecciono este cuadro desplegable, hay un par de errores que me permiten saber que es un cuadro desplegable y puedo cambiar entre las diferentes líneas de tiempo disponibles aquí y puedo entrar. Y ahora mismo sólo tengo una línea de tiempo, que es la línea de tiempo principal. Pero en realidad puedo entrar aquí y hacer clic en nuevas líneas de tiempo o ir a editar líneas de tiempo. Otra forma de llegar a mis líneas de tiempo es acercándose a mi inspector y luego yendo a mi escena. Esperar er haciendo click en la escena y luego puedo ajustar o ADM o líneas de tiempo viniendo aquí y dando click en el plus. O puedo seleccionar la línea de tiempo y eliminar esa línea de tiempo también. Entonces una de las cosas de las líneas de tiempo es que básicamente son animaciones opcionales las que podrían suceder para que puedas saltar a diferentes escenas. Puedes tener contenido diferente, diferentes capas también, y puedes tener separado tu contenido incluso con símbolos y todo así. Pero lo que pasa con las líneas de tiempo es que puedes tener estas animaciones opcionales, y eso es realmente lo que las líneas de tiempo, al menos cómo veo las líneas de tiempo es animación opcional. Entonces si alguien hace clic en este botón, puede ejecutar esta línea de tiempo uno. O si alguien hace clic en otro bollo, podría correr línea de tiempo hacia y así sucesivamente. Entonces puedes tener estas cosas de diferencia, básicamente, que estas líneas de tiempo, donde estas opciones se animarán en base a lo que se haga clic o en base a cualquier tipo de condición o algo por el estilo. Entonces no son símbolos persistentes o no son símbolos donde se tiene una especie de animación corriendo en su propia línea de tiempo, y eso está dentro de otra línea de tiempo. Es una línea de tiempo completamente separada donde las cosas pueden ser completamente diferentes. Las cosas pueden suceder dependiendo de lo que se haga clic y lo que no es cobrar o lo pase en ese punto. Entonces, de nuevo, depende de ti. Es si haces clic en una opción que dice relativa aquí mismo, tomará el objeto de donde sea que esté en ese punto, te servirá animado en Main Timeline uno, y luego haces clic en el botón que va a la línea de tiempo a, por ejemplo, Entonces lo llevaría a donde estuviera esa línea de tiempo principal y luego animado a donde esté dentro de una línea de tiempo a. Entonces la mejor opción que puedo ver es básicamente, si querías algo para ir de una manera u otra, y puedes usar una línea de tiempo para animarla de una manera y luego usar otras líneas de tiempo y animar lo animado de otra manera. Nos vamos a sumergir mawr en líneas de tiempo más adelante en este curso. Pero por ahora, eso es al menos una introducción. Ahora mismo, sólo vamos a estar trabajando con la línea de tiempo principal. Entonces vamos al siguiente video y en realidad empecemos a animar algunos objetos. 19. 19 Línea de tiempo de Animaton: Ahora empecemos a animar algunos objetos en nuestro escenario. Ahora hay dos formas diferentes en las que realmente se pueden animar objetos en este escenario dentro de tipo tumulto. Adelante y agreguemos un objeto. Entonces quiero subir a mis elementos, bajar al rectángulo y vamos a seguir adelante y mover este rectángulo. Ahora voy a entrar en mi forma, Inspector o mi elemento, Inspector, quiero cambiar este color sólo para que sea un poco más obvio. Antes era ese gris tan tipo de mezclado en el blanco. Pero ahora que eso está ahí, quiero bajar a mi línea de tiempo principal. Y cuando un doble clic en esto para seguir adelante y renombrar esto y solo voy a decir objeto uno, adelante y click. OK, ahora, de aquí abajo abajo, voy a estirar un poco más esto para que podamos verlo. Pero se puede ver si entro aquí y estiré esta línea de tiempo, puedo ver todos mis objetos aquí, pero luego puedo ver mis propiedades abajo en la parte inferior. Ahora vamos a hablar un poco más sobre cuáles son las propiedades y qué puedes hacer con esto. Entonces ahora, por ahora, solo voy a seguir adelante y bajar a mis propiedades y puedo dar click en plus para el origen que queda en la parte superior de origen. Entonces eso es básicamente de izquierda a derecha. Esa va a ser la izquierda. Si vas a animarlo de izquierda a derecha o incluso de derecha a izquierda sigues usando esta opción , y luego arriba es, , y luego arriba es, si vas a animar de abajo o de arriba a abajo o de abajo a arriba, entonces es de cualquier manera, básicamente vas a usar estos dos elementos. Entonces con el fin de iniciar un liners de tiempo para iniciar un fotograma clave, entonces vengo aquí y muevo mi línea de tiempo aquí abajo. Esto usando este depurador, y lo voy a mover al punto de que realmente quiero iniciar esta animación. Entonces voy a seguir adelante y dar clic en plus para este icono de diamante y ese va a ser el plus . De acuerdo, voy a animar mi izquierda y luego voy a ir adelante y golpear. Además, para Animate Top está bien, así que eso arranca mi animación. Aquí es de donde va a empezar. Entonces ahora de aquí voy a seguir adelante y mover un poco mi marco clave. Y ahora puedo mover mi objeto a otra ubicación y luego dar clic en plus otra vez y luego más nuevo también. Ahora en realidad no se anima sobre automáticamente. En realidad tengo que entrar y asegurarme de que esto suceda automáticamente. Eso se puede ver. De hecho, a veces cuando lo hago de esta manera, ni siquiera registra que lo he trasladado a otro lugar. Entonces necesito volver a él y luego moverlo de nuevo a donde estaba antes. Ahora bien, si quisiera obtener las dimensiones exactas, podría entrar aquí, entrar a mis métricas, entrar a la izquierda y entrar en el ancho llegando a la cima, llegando a la altura. Y en realidad podría entrar y conseguir esto exactamente donde quiero que se posicione desde el principio . Y luego si quería pasarlo hasta el final. Ahora puedo ajustar la colocación del mismo extremo también, por lo que crea automáticamente Esta ah Tween básicamente entre un fotograma clave y el otro marco clave contra. A veces no registra el primer fotograma clave, por lo que puede que tengas que moverlo un poco en el primer cuadro vino para que se registre y luego lo mueva, mueva el fregador un poco y luego mueva su objeto hacia donde quieres que se anime, también. Entonces si sigo adelante y golpeo el juego en esto, se puede ver que hace una pausa por un segundo, y luego toca el objeto. Ahora, en lugar de tener que insertar estos fotogramas clave para cada vez que quiero animar algo, hay una manera más fácil. Y ahí está este botón de grabación. Entonces voy a seguir adelante y seleccionar esta línea de tiempo o esta animación para la izquierda. Voy a golpear borrar, y ella pudo ver eso. Ahora así como la parte superior e inferior. Yo quiero seguir adelante y seleccionar esa también y golpear, borrar. Y así en este momento, en este punto, no tengo animaciones en absoluto. Entonces la forma más fácil de hacer esto es en realidad agarrar el botón de grabación, hacer clic en el botón de grabación y luego mover mi fregador por aquí y se puede ver que un dos muy comienzo de esto. Este es el comienzo mismo de la línea de tiempo y así en realidad puedo mover este punto. OK, ¿ dónde quiero que empiece esta animación en el frente mismo de esta animación. Y entonces puedo mover el fregador. OK, ¿ dónde quiero que esto termine? Y así establecí esos dos puntos. Y si en cuanto establezco esos dos puntos, todo lo que tienen que hacer es realmente mover mi objeto y se puede ver que automáticamente registra el fotograma clave frontal y el último fotograma clave. Y tiene esta animación en el tiempo que empecé, este marco clave aquí mismo comenzó en esta animación. Y entonces cuando lo terminé, que es justo aquí ahora podría estirar esto. Podría hacerlo más pequeño. Yo también lo puedo hacer más grande, pero solo es animar las mismas propiedades que va de una ubicación a la misma ubicación. No importa la cantidad de tiempo que se tarda en hacerlo, simplemente no lo hace automáticamente. Lo bonito del registro es solo el hecho de que no tengo que hacer clic en el cuadro de clave de agregar . Cada vez que quería empezar. Entonces voy a seguir adelante y sólo tienes que hacer clic en el registro de la ONU o detener el registro. Entonces cuando mueva mi cursor y voy a volver a hacer clic en el botón de grabación Ahora puedo mover mi punto de partida para estar en otro lugar. Sigamos adelante y movamos esto para que sean tres segundos, y luego voy a mover mi fregador para estar cerca de cinco segundos ahí. Ahora, si me muevo con los que están en su lugar ahora, puedo seguir adelante y mover mis objetos a otro lugar. Y se puede ver que se detiene un segundo porque empecé una nueva línea de tiempo o empecé una nueva animación a los tres segundos. Y luego terminé esa animación a cinco segundos. Y así lo hace para mí automáticamente para que pueda seguir adelante y simplemente golpear, parar grabar otra vez y luego hacer lo mismo. Entonces si quería volver a mover mi fregador, puedo animar esto tantas veces como quiera. Puedo entrar aquí en otros elementos, animar esos elementos también. Entonces así es como empiezo con la animación, tanto haciéndolo por mi cuenta en los fotogramas clave, como en realidad usando el botón de grabación para grabar también mi animación 20. 20 animaciones de relajación: Por lo que en el último video hablamos de animar a lo largo de tu línea de tiempo. Ahora ya tengo aquí una animación para empezar. Si tomo mi fregador y quiero previsualizar esa animación, podría simplemente moverla a izquierda y derecha aquí, y pude ver que va del lado izquierdo al lado derecho, una animación bastante simple ahí. Si no veo mis propiedades abajo en la parte inferior, podría seguir adelante y seleccionar ese objeto, y ahora podría ver la animación. Lo único que realmente anima es la propiedad izquierda, y va de izquierda a derecha ahora. Lo bueno de esto es que en realidad puedes agregar a lo que se llama flexibilización, que la flexibilización agrega un inicio realista, por lo que en realidad no se mantiene la misma velocidad todo el tiempo. Si tienes malestar dentro, eso es pensar en entrar y salir como inicio y fin. Entonces si agrego en el East End, eso significa que va a tener esta facilidad desde el principio. Al inicio, si agrego algo que diga que está fuera, entonces va a tener esta facilidad o esta desaceleración al final porque es fácil salir, así que está en medios inicio facilidad fuera significa terminar ahora. Si seleccionas algo que diga que está dentro y fuera, entonces ambos se aliviará al principio, y se aliviará al final. Entonces, ¿de qué estoy hablando cuando digo facilidad? Bueno, si querías seleccionar la opción, puedo seguir adelante y seleccionar este año. Puedo acercarme al lado derecho y seleccionar esta opción aquí donde dice que está adentro y afuera y me va a dar una caja pop up de diferentes cosas que realmente puedo elegir de aquí u otra manera de llegar a ese mismo menú es haciendo doble click en el animación. Y si quisiera atar esto a uno muy específico que puedo hacer doble click sobre él sobre el lado derecho en realidad aplicaré esa misma flexibilización a todas las diferentes propiedades que están animadas. Por lo que esto me permite ponerme muy específico con ellos. Entonces si entro aquí, puedo seleccionar. Si quiero que esto sea instantáneo y se puede ver que no hay desaceleración, no hay empezar un poco lento y luego volverse más rápido. Simplemente sucede la misma velocidad todo el tiempo. Um y luego lineal es en realidad instantáneo simplemente sucede. No hay animación en absoluto. Simplemente sucede instantáneamente. Simplemente salta a la nueva zona. Lineal básicamente solo dirá OK, se mantiene la misma velocidad en el inicio mismo y al final, facilidad en, digamos Ok, Cualquiera que sea la facilidad que aplique sucederá al principio. Pero no sucederá al final. Se va a quedar igual y se puede ver esto con la gráfica. Es como que se mantiene igual hacia el final. Easy out se mantendrá igual al principio. Pero entonces un poco más despacio al final, está dentro y fuera estofará ambos. Básicamente, empezará despacio el principio mismo, y luego irá despacio al final también. Entonces tengo cosas como rebote donde se puede ver que tipo de rebotes. Si quería conseguir un basquetbol y quería que el basquetbol en sí pareciera que está rebotando, puedo hacer este tipo elástico de rebota su marca y luego vuelve a ella similar a rebotar. Simplemente rebota hacia atrás y luego de vuelta básicamente dice: Vale, Vale, va a rebasar su marca, pero luego poco a poco volver también. Ahora lo bonito de cualquiera de estas opciones que elijo, te darás cuenta de que tengo estas barras justo aquí que realmente puedo agarrar. Y puedo ajustar esto como quiera, por lo que puedo personalizar estas facilidad que facilidad de entrada y de salida de cualquier manera que yo quiera. Ahora un par de opciones más que tengo es que puedes ver que si selecciono on easy out, por ejemplo, puedo entrar y puedo elegir Cubic Quad Court, membrillo visto o Expo o Cirque. Ahora estos básicamente sólo me dan diferentes opciones. Entonces si entro aquí, puedo ver cómo cambiará realmente la gráfica, dependiendo de lo que realmente haya seleccionado. Entonces si hay algo que me gusta un poco más de lo que puedo entrar aquí y dar click en Expo, puedo entrar aquí, click en Cirque o algo así. Entonces es que básicamente dice, um, es realmente una preferencia, así que lo que más te guste, puedes seguir adelante y probarlo. Hit play y podías ver que empezó realmente rápido y luego simplemente un poco más lento al final. Si ese es el efecto busco genial. Es así como lo aplico. Si yo eso no es exactamente lo que busco, que pueda volver aquí, doble click en esto y luego elegir una opción diferente y conseguir algo mawr aliándose a lo que busco ahí para que veas que uno es un poco más lento y empieza normal, y luego sólo se pone un poco más lento hacia el final. Entonces así es como aplicas en esto, básicamente cualquiera de las propiedades que animas. Por lo que ahora mismo esto sólo se aplicó Teoh el origen que quedó. Pero si tienes cosas como el tamaño, altura, el ancho o algo así, puedes aplicar esta facilidad dentro o fuera a cualquiera de esas animaciones de propiedad 21. 21 Animar otras propiedades: hasta este punto. Sólo tenemos movimiento animado. Animamos de un lado del escenario a otro lado del escenario. Ahora vamos a estar hablando de animar otras propiedades para que veas que ya tengo esta animación. Podría entrar aquí y en realidad podría agregar más propiedades. los que tengo opciones. Las opciones que tengo en este momento son opacidad izquierda, bombo superior y látigo. Hay otras propiedades que también puedo ajustar viniendo aquí hacia dice Propiedades. Puedo seleccionar este cuadro desplegable, mover un poco el ratón hacia abajo y se puede ver que hay un montón de otras propiedades que realmente puedo ajustar. Puedo ajustar la imagen de fondo. Puedo animar la imagen de fondo. Cualquiera de estas opciones son cosas que puedo animar para poder agregar a mi animación. Sí voy a ajustar el brillo que tamaño de fuente, la familia de fuentes. Se puede cambiar la familia de fuentes animada de un fondo a otro tipo de letra. Básicamente es justo lo que quieras. Cualquiera que sea el estilo que quieras, puedo animar la frontera. Puedo animar el color del borde en la parte inferior en el borde del radio del borde izquierdo con también . Si quería un borde de cierto tamaño, también puedo hacer eso. Puedo animar la audacia, el color de fondo. También puedo animar palmaditas si quería que hubiera más saturación de relleno. CPL. Um Ah, muchas cosas diferentes. Línea textil. Si quería ir del centro a la izquierda justificada, toca a ti también la altura de línea Inter html. Entonces estos son todos los diferentes tipos de opciones de subasta que puedo usar para poder entrar aquí y solo seleccionar la que quiero, y luego podría seguir adelante y animarlo desde ahí. No obstante, sólo me voy a quedar con los que están aquí por ahora. Entonces voy a seguir adelante y animemos esto. Yo quiero que esto se desvanezca así que va a ser la opacidad va a ser cero para empezar, y luego se va a animar a totalmente transparente. Entonces voy a o entonces eso va a animar a estar completamente, van a seguir adelante y dar click en añadir un fotograma clave. Yo quiero venir a. Está bien. En este punto, quería estar plenamente ahí es cuando tenía otro fotograma clave ahora va a volver aquí y seleccionar este marco clave, y luego voy a entrar aquí y voy a cambiar la opacidad. Entonces cuando entra en los elementos, inspector aquí y aquí es donde cambié la visibilidad. Por lo que quiero seguir adelante y seleccionar esta visibilidad para que sea cero. No necesito que eso sea al final, porque cuando creé este marco clave, la opacidad para este objeto ya estaba establecida 200% por lo que ya tenía esas propiedades. Pero ahora que lo he animado desde el principio, se puede ver que simplemente básicamente, como tomo mi exfoliante, quítalo de izquierda a derecha. Se puede ver que se ha ido completamente al principio, pero empieza a desvanecerse al final de esto. Ahora, podría hacer lo mismo con la altura, así que voy a seguir adelante y seleccionar la altura, y voy a asegurarme de crear algunos fotogramas clave sobre el bombo construido al principio y al final. Ahora lo que voy a hacer con la altura no va a seguir adelante y sólo estirar un poco esto y se puede ver que se anima automáticamente desde el principio hasta el final, y se puede ver que empieza a hacerse más grande. Yo podría hacer lo mismo con el con. Sigamos adelante y solo agreguemos un marco clave con azotado al principio. Agrega un marco clave al final para el ancho y sigamos adelante y solo cambiemos esto el con un poco también, para que veas que empieza como una caja pequeña y empieza a crecer a una caja más grande. Yo también puedo hacer esto en acta. Sigamos adelante y eliminemos esto tal como aprendimos en el último video. No tenemos que crear esos fotogramas clave que en realidad podría golpear récord aquí. Adelante y vamos a mover esto alrededor de cómo es. Sigamos adelante y movamos esto hasta el final de la animación, y luego voy a seguir adelante y solo mantén pulsado el botón de turno. Estira esto hacia fuera y puedes ver que automáticamente creó esa animación el tamaño para la altura y el tamaño para el ancho. Y así ahora si entro aquí, se puede ver que se crece de más pequeño a más grande en el botón de registro. Básicamente, solo ayuda a ahorrar tiempo, puedes ver Bien, empieza desde aquí. Y luego en este punto, y quiero que seas algo diferente y puedas ajustar el color. Vas a sólo otros elementos. Vamos a seguir adelante y basta con pulsar el botón de color o el botón de grabación. Ven aquí y voy a chuck cambiar el color de fondo para que sea un rojo para que veas que el color empieza a cambiar realmente. Por lo que empieza verde. Sé que realmente no lo podemos ver con capacidades, Así que vamos a deshacernos de esa opacidad por ahora. Y vamos a subir el en las propiedades hasta la capacidad para que puedas ver en el principio mismo que empieza en un verde. Pero empieza a cambiar de color, y al final, se da la vuelta para leer. Entonces así es como automáticamente solo presionar el botón de grabación viniendo a mis propiedades automáticamente agregó esta propiedad de color de fondo a mi animación. Y ahí está. Y así ahora puedo empezar. Casi cualquier cosa que haya terminado en la sección de propiedades en el lado derecho me permite animarlo para que pueda iniciarlo en un solo color. Los cambios a un color diferente comenzaron en un tamaño cambia a otro tamaño en animate . Esa sombra anima otros objetos, como radio de borde o esquinas para algo. Si quería ir algo de un cuadrado a un círculo, puedo animar eso también. Por lo que muchas posibilidades distantes, diferentes. Pero así es como se agregan propiedades adicionales y cómo se utiliza la herramienta de registro para poder animar esas propiedades o incluso la herramienta de marco clave para poder animar esas propiedades también. 22. 22 cuadros clave de cambio: Digamos que después de animar algo, necesito volver y necesito Teoh un solo de estas propiedades o cualquiera para ajustar un cierto elemento sobre esa propiedad o marco clave. Will. Puedes entrar y seleccionar el objeto para luego volver a mis propiedades y puedo seleccionar una de estas propiedades. Y si muevo mi fregador aquí en un momento determinado, en realidad puedo tomar y seleccionar. Si selecciono este elemento arriba, seleccionará todas mis propiedades. Pero si entro aquí abajo y selecciono solo un fotograma clave, puedo ajustar ese marco clave. Y podría decir, OK, el tamaño va a tardar un poco más, lo que significa que toda la animación va a pasar justo ahí. Pero entonces el tamaño realmente va a seguir animando ahí. Podría incluso entrar aquí y agregar un marco clave adicional para poder mover mi fregador al punto de que quiera tenerlo. Voy a seguir adelante y seleccionar eso aquí y luego voy a venir a estos diamante con el plus y luego dar clic en eso y ahora eso va a ser un nuevo marco clave. El importante a tener en cuenta con los fotogramas clave es que los fotogramas clave significa que algo diferente va a suceder ahora el Tween o la animación va de un punto a otro pasando de un punto, algo parece un diferencia o algo mira de cierta manera y luego ir a otro fotograma clave, lo que significa que ahora se va a ver de esta manera. Va a tener una nueva altura. Hay nuevos, con o cualquier cosa y luego entre automáticamente anima bien de esto cómo se veía de aquí a cómo se ve nuevo después del final de esta animación para que Tween suceda automáticamente. Ahora, si quisiera agregar marcos clave adicionales y está bien, en este punto va a saltar hasta aquí y luego en este punto va a saltar a sus podemos entrar aquí y puedo agregar esos fotogramas clave y se puede ver eso en la altura, hagámoslo en realidad un poco más pequeño. Entonces en este punto, realidad nos va a ir un poco más pequeños. Y luego tan pronto como llegue a este marco clave, ahora va a animar al más grande para que pueda tener algo animado en pequeño. Y luego en cuanto llegue a cierta zona, entonces puedo tenerla enemiga o estirar un poco más también. Ah, muchas posibilidades diferentes. Pero así es como puedo entrar aquí, y puedo animar este fotograma clave, e incluso puedo entrar y arrastrarlo hasta donde quiera. Puedo estirar esto. Si quería ser un poco más largo, puedes estirar este fotograma clave hacia fuera si quería que la primera animación fuera un poco más rápida en la altura y luego un poco más larga Después de que ocurra esa animación. Depende de ti. Pero así es como insertas nuevos fotogramas clave, marcos clave adicionales. Podría entrar aquí e incluso seleccionar que ese es Ah punto de marco clave y luego simplemente sentarse borrar. Y entonces tomará ese marco clave que empezó o en el medio, y simplemente lo eliminaré por completo. Y ahora sólo se está animando de este marco clave a ese marco clave otra vez. Los fotogramas clave son cuando ocurre algo diferente o algo diferente o se ve diferente en un determinado punto, o algunas propiedades han cambiado o algo así. Ese es un marco clave. Y luego cualquier cosa en el medio. Esta barra es básicamente la animación pasando de ese único fotograma clave de cómo se ve ese marco clave a este nuevo marco clave y cómo se ve ese nuevo marco clave. Y vamos a enemigos lo que fuera esa propiedad al principio, a la animación o a esa propiedad, cómo se ve al final, no tengo que animarla. Si no quiero a Teoh, en realidad podrías apagar las animaciones, y así simplemente salta automáticamente a cierto punto. Pero eso realmente no es animador. Eso es básicamente cambiar las propiedades en un momento determinado. Entonces así es como al menos trabajas con los diferentes marcos clave. Añade nuevos fotogramas clave y ajusta también tu tiempo de tus fotogramas clave 23. 23 animaciones duplicadas: otra cosa que tal vez quieras hacer. Puede que desee copiar tu animación que hiciste en un objeto y pegarla en otro objeto. Si entro aquí y agrego un objeto completamente nuevo, sigamos adelante y agreguemos este círculo aquí. Quiero cambiar el color de fondo para que sea un color de diferencia aquí. Y entonces lo que voy a hacer es que voy a seleccionar este objeto a la plaza, y voy a seguir adelante y seleccionar la animación. Si quiero toda la animación, una copia sobre una condición como esa animación hit command, ve y luego ven aquí y selecciona mi círculo y luego pulsa Comando V y eso lo pegará . Pero la cosa es, se anima a la misma anchura y altura, el mismo origen que se deja y arriba. Entonces realmente está detrás de ese objeto. Pero si necesitaba, entonces deshazte de la plaza. Puedo seguir adelante y borra el cuadrado aquí, y se puede ver que ahora se ha cambiado al círculo, y como tenía un color específico, también cambia el color. Pero ahora tengo ese círculo automáticamente y lo hice. Si necesitaba cambiar el objeto, si necesitaba un cambio, un cierto elemento y luego esa animación que me tomé el tiempo para crear. En ese elemento, solo lo copio y lo pego, cual es bonito. Si tu encuadre de alambre y aún no tienes exactamente todos los visuales, puedes seguir adelante y configurar algunas casillas de solo por ahora. Y luego. Una vez que obtienes los visuales, puedes copiar los visuales de esa caja o la animación de esa caja, y luego puedes pagar en el visual que realmente obtienes. También puedes simplemente hacerlo en ciertos elementos de línea. Si entro aquí y selecciono ese elemento de línea, podría copiar esa animación de línea. Ven aquí a unos objetos diferentes, y vamos a seguir adelante y solo ritmo esa animación de forro. Por lo que no pegó todo. Simplemente pegó esa propiedad que animé. Si solo quiero esa misma animación en esta animación es de izquierda a derecha. Si sólo quisiera esa misma animación en ese objeto, podría hacerlo también. Otra opción es que podría venir aquí, click derecho sobre él, bajar a duplicar, y eso duplicará mis objetos. Entonces es exactamente el mismo objeto, y todas las animaciones sucederán o permanecerán igual. Pero se puede ver eso porque estoy en el principio mismo. Si hago este objeto un poco más pequeño, todavía va a animar a este punto de punto de marco clave. Entonces no pude mover esto un poco más, y ahora va a tardar un poco más en esa animación. Entonces así es como copias animaciones que has hecho dedo un objeto y lo pegas a otro objeto. 24. 24 trayectorias de movimiento: ahora, una cosa que quizá quiera hacer es, como estoy animando objetos, quizá quiera ajustar la curva del objeto real en lugar de tener sólo un recluso de izquierda a derecha. Quizás quieras que suba un poco y luego baje un poquito también. Se puede hacer eso con un objeto, alguien para entrar aquí y simplemente crear un nuevo rectángulo en el que voy a entrar y seleccionar el color para que sea un color diferente. Y luego voy a seguir adelante y animar esto. Voy a dar click en el botón de grabación. Vamos a mover esto a dos segundos y luego vamos a moverlo hacia el lado derecho. Ahora te das cuenta de que como la tengo sobre esta barra azul, en realidad me permite. Destaca un poco y me deja saber que podría seleccionar esto y puedo agregar básicamente un punto que lo curva para que pueda simplemente seleccionar eso aquí y luego moverlo un poco más y luego me permite ajustar la curva de esa animación, y me da algunos manillar que en realidad puedo estirar esto un poco más. Si quisiera ser más curvo en el lado derecho o si quisiera ser más curvo en el lado izquierdo, podría hacer eso. Y entonces puedo angular la curva también. Ahora, esto básicamente me pone realmente Ah, gran detalle de cómo o control sobre estos sobre esta animación, puedo entrar aquí y tuve otros puntos también. Entonces si quería tener una especie de curva hacia arriba y luego hacia abajo en como, una ola, puedo hacer eso automáticamente también. Entonces esto sólo me da la capacidad de crear esta curva. Y ahora, si voy adelante y golpeo juego, podría ver que ese objeto anima a lo largo de ese Kurt. Ahora, otra cosa que tal vez quieras hacer es que quieras tener este objeto,Por ejemplo, Por ejemplo, si tratabas de animar un pájaro o algo así, posible que quieras que ese objeto siga la curva. Y así la cabeza de ese objeto, si es un pájaro, en realidad bajará y tendrá más sentido que el cuerpo o la barriga del pájaro. Sólo tienes que bajar también. Por lo que puede que desee alinearse con esa animación. Podrías hacer eso dentro de las propiedades viniendo a las propiedades aquí y luego viniendo a la rotación y haciendo clic en la rotación sigue Motion Path. Ahora bajo esto, esto está bajo las métricas, inspector bajando a la sección de rotación y simplemente seleccionando esta opción. Ya puedes ver si vengo y golpeo el juego, eso es rectángulo o esa plaza básicamente seguirá el camino. Este es un giro muy agudo, así que salté un poco. Pero seguirá el camino de esa animación, y eso es todo lo que tenían que ver con Select Us Now. Podría animar que la rotación yo mismo si quisiera y crear algunos puntos clave si quisiera conseguir realmente fino detalle de cómo sucede eso la rotación, Pero en este caso, esto es lo suficientemente bueno para poder seguir adelante y simplemente irme. Aquel seleccionado en rotación sigue la trayectoria de movimiento, y luego seguirá automáticamente esa trayectoria de movimiento. Y así cuando previsualizo esto, este animado este objeto HTML está básicamente animado a lo largo de este camino, y así es como hago el pase de movimiento dentro de tumulto, tipo 25. 25 filtros CSS: ahora, una de las cosas que quizá quieras animar son los filtros CSS. Esto es un poco diferente a los filtros normales o propiedades normales porque a veces estos filtros, depende del navegador que en realidad se esté viendo en algún momento. Estos filtros en realidad no funcionan, pero lo que quiero decir con esto es que sigamos adelante y pinchemos en el botón de grabación. Voy a seguir adelante y mover mi fregadora aquí a dos segundos, y luego voy a seguir adelante y vamos a pasar esto. deshizo un poco de mi botón de registro. Alguien mueva esto, pero voy a entrar en los elementos, Inspector, voy a desplazarme hacia abajo a ella dice efectos de filtro. Ahora, aquí es donde puedo ajustar el desenfoque. Puedo ajustar el IPC, sin embargo puedo ajustar la saturación, Aiken solo el matiz y todo así. Ahora que lo mismo es lo que ya hemos estado animando. Entonces la parte superior, la altura, el ancho y todo así prácticamente es lo mismo. No obstante, una cosa que verás está terminada en el lado derecho. ¿ Es esta advertencia? Si hago clic en esa advertencia, me lo hará saber. Hey, este es CSS tres filtros y sus no soportados por thes navegadores, que son navegadores bastante antiguos. Pero eso es sólo algo a tener en cuenta. Si no te preocupa eso, entonces puedes seguir adelante y simplemente quedarte este año. Pero una palabra de precaución es no hacer que esta animación sea crucial para tu aplicación real que estás construyendo este sitio web que estás construyendo. Porque si estás usando esto y por alguna razón tus usuarios están en uno de estos navegadores más antiguos , incluso yo e. 11 o algo así, entonces esta animación no funcionará exactamente como no lo hiciste. Entonces eso es sólo una cosa a tener en cuenta. Teoh, ten conocimiento de esa advertencia. Echa un vistazo a esa advertencia y si estás bien sin previo aviso, entonces puedes seguir adelante y continuar. Si no lo estás, quizá quieras pensar en animar algo diferente o tener algún otro tipo de color de propiedad. Lo que sea que quisieras hacer. Ah, que eso cambie bien, Así que así es como al menos una palabra de advertencia cuando estás usando estaban animando filtros CSS 26. 26 acciones de línea temporal: en el último apartado. Hablamos de animaciones en este apartado. Vamos a estar hablando de acciones ahora, las acciones son una pieza de código o pieza de lógica que sucederá en un determinado momento de la tiempo. O puede suceder cuando se hace clic en algo o podría suceder en otros tipo de determinación en rotación o arrastre o algo por el estilo. Entonces vamos a estar cubriendo cómo crear esas acciones y cómo agregar esas acciones. Dos objetos diferentes en tu línea de tiempo. Entonces en este video, vamos a estar ante todo, hablando de las acciones de la línea de tiempo, las acciones de la línea de tiempo sucederán en cierto punto dentro de la línea de tiempo. Por lo que una vez que alcanza los cinco segundos o una vez que alcanzas es de dos segundos, puedes ejecutar algún tipo de corridas de código, algún tipo de lógica. Se puede pausar la línea de tiempo. Se puede continuar con la línea de tiempo cuando se hace clic en algo. Utkan. Básicamente, incluso puedes controlar la línea de tiempo ya que algo se arrastra o muchas posibilidades diferentes para elegir. Entonces otra vez, para que sea simple, no te vamos a mostrar algo complejo. Tienen que averiguar cómo se construyó. Simplemente lo voy a mantener Elementos simples exploran algunas de estas opciones que puedes entrar y puedes usar para crear este tipo de acciones. Entonces, primer lugar, en primer lugar,para poder ver las diferentes acciones de línea de tiempo que puedes hacer, quiero seguir adelante y entrar en mi muestra de bombo aquí. Tan solo un lienzo en blanco. Si solo querías iniciar un nuevo proyecto, puedes. Voy a seguir adelante y añadir un elemento, sólo un elemento rectángulo. Ahora voy a cambiar el color de fondo de esta escena. Entonces estoy bajo las escenas propiedades. Voy a pasar al fondo, seleccionar el cuadro desplegable a un color verde aquí y seguir adelante. Y animemos esto como aprendimos en nuestro último video. Adelante y da click en el botón de grabación y puedes ver que aquí tenemos la línea de salida . Puedo mover eso a donde quiera y luego también están terminando línea. Sigamos adelante y movamos esos 23 segundos, y luego puedo seguir adelante y simplemente arrastrarlo sosteniendo el botón de cambio hacia abajo para conseguir una línea recta , y vamos a arrastrar eso al otro lado del escenario. ahora, eso es lo único que quiero hacer por esta pequeña animación. Entonces voy a seguir adelante y sólo desmarcar el botón de grabación. Y ahora tenemos nuestra animación yendo desde el lado izquierdo de arena del escenario. Hacer el lado derecho del escenario. Ahora. Lo que quiero hacer es añadir aquí un gatillo de línea de tiempo. Entonces si en medio de la línea de tiempo lo que va a pasar es que va a pausar la línea de tiempo, así que va a pas justo en el medio, y no va a continuar esa línea de tiempo. En orden de agregar un gatillo de línea de tiempo, me acerco al lado izquierdo, derecha donde dice Línea de tiempo Principal y sigo adelante y hago click en este diamante que tiene un plus en el medio Eso es básicamente agregar un fotograma clave o, en este caso, una acción de línea de tiempo en este código, como sucederá tan pronto como mi fregador, que es esta barra blanca. Puedo colocar esto donde quiera. Ahí es donde ocurrirá la acción. Y voy a seguir adelante y dar clic en esta nueva acción y se abrirá esta acción de línea de tiempo. Puedo seguir adelante y seleccionar el cuadro desplegable Y entonces estas son mis acciones predeterminadas que puedo hacerlo por aquí. Y puede que no se parezca mucho, pero hay algunas de las acciones que puedes dio ofrecer mucha flexibilidad, como correr, como correr, conducir un guión o desencadenar un comportamiento personalizado, o reproducir sonido o iniciar una determinada línea de tiempo o algo así así. Entonces voy a entrar aquí. También puedo saltar a cierta escena. Puedo seguir adelante e iniciar la línea de tiempo Línea de tiempo Positiva. E incluso puedo especificar de qué línea de tiempo en mi hablar, porque sobre el lado derecho en mis propiedades de escenario, recordarán que podemos tener varias líneas de tiempo diferentes, que es básicamente varios tipos diferentes de posibles animaciones. Y puedo activar esas posibles animaciones, dependiendo de cierta lógica o ciertos puntos de la línea de tiempo que obtengan dos o la línea de tiempo principal . Por lo que ahí hay muchas posibilidades diferentes. Entonces voy a seguir adelante y pausar línea de tiempo, y la voy a dejar en donde dice Timeline es la línea de tiempo principal, y ese es más o menos él. Entonces si necesito volver a eso y modificarlo más tarde, todo lo que tienen que hacer es hacer doble clic en ese diamante, y se abrirá con mi acción de línea de tiempo que puedo modificar más adelante. Adelante y previsualicemos eso. Entonces voy a golpear, Save. Voy a golpear comando enter para previsualizarlo y se puede ver que la animación se detiene justo en el medio para que no me permita continuar ni nada por el estilo, aunque haga clic en él. Si traté de hacer algo, no va a continuar. Tengo que desencadenar de alguna manera que la animación o la acción para continuar con algo más . Puedo activar eso con un click de botón o algo así como un botón de reproducción o algo así . Y así aprenderemos de eso en el próximo video. Cómo agregar en acción a un objeto. Pero así es como se agrega en acción a la línea de tiempo cuando Teoh llega a cierto punto dentro de la línea de tiempo, y podría volver aquí a HeIP y podría tener varias acciones diferentes que jugarán a lo largo de mi línea de tiempo. Entonces si quisiera colocar ciertos audiófilos en ciertos puntos, podría hacerlo con acciones de línea de tiempo. Entonces en el siguiente video, vamos a seguir adelante y hablar de cómo continuar con esta animación. Una vez que se hace clic en este rectángulo 27. 27 acciones de objetos: Está bien. Por lo que en el último video, hablamos de acciones de línea de tiempo. Pero en este video, vamos a estar hablando de los diferentes tipos de acciones que puedes agregar a los objetos . Entonces si quiero agregar en acción cuando se hace clic en esto para continuar con la línea de tiempo, simplemente selecciono este objeto. Y luego vengo aquí a mi zona de inspector, asegurarme de que esto esté habilitado. Si no lo ves, asegúrate de dar click en donde dice Inspector, arriba en la parte superior. Y luego me voy a acercar No a mi escena, Inspector, como hemos estado explorando en videos anteriores. Voy a venir a aquí donde son mis acciones. Inspector, ¿esta mano es básicamente? Y esto, básicamente son las diferentes acciones que puedo aplicar. Y puedes ver aquí donde digo con click del ratón, esto básicamente estará en un dispositivo móvil. Este será un toque en el ratón hacia abajo. Esto será cuando empiece a tocar cuando empiecen a tocarlo antes de levantarse, y luego al ratón arriba, en realidad será el toque. Y en cuanto levantaron, por lo que cualquiera de ese tipo de acciones. Si lo hago en el propio dispositivo o si está en el escritorio, solo será un simple clic del ratón o así sucesivamente. Si se trata de un escritorio, esto básicamente no se aplicará a este código. No se aplicará a los dispositivos táctiles. Pero si quería ejecutar código en el mouse sobre cuando se cierne sobre o cuando es mi ratón realmente sale del lado del objeto, puedo ejecutar algún código allí también. También puedo hacer en drag o entrevista. Port significa que tan pronto como esta escena realmente se haga visible, también puedo ejecutar alguna lógica. O cuando esta escena se sale o se deja, dejas esta escena a una escena diferente. También puedes ejecutar algún código, así que voy a seguir adelante. Basta con hacer un simple clic del ratón y seguir adelante y dar click en esto. Además cuando quiera agregar en acción y voy a seleccionar el cuadro desplegable y notarás que el cuadro desplegable es el mismo que teníamos en nuestra acción de línea de tiempo. Estas son las diferentes opciones por defecto para nuestras acciones dentro de tipo tumulto, así que quiero seguir adelante y decir, OK, OK, una vez que hagan clic en él, solo quiero continuar con la línea de tiempo. Por lo que pausa la línea de tiempo automáticamente en nuestra acción de línea de tiempo. Pero ahora quiero continuar esa línea de tiempo. ¿ Y a qué hora quiero continuar la línea de tiempo? Bueno, va a ser la línea de tiempo principal, la única línea de tiempo que tengo. Y luego también puedo hacer clic en play en reversa y luego darte la opción de poder reiniciar tiempo si es necesario también. Entonces si quería que esto jugara pero y volver a donde estaba antes, podría hacer esa opción también. Pero eso es más o menos todo lo que quiero hacer por esa. Y se podía ver eso. ¿ Y si selecciono aquí en mi escenario? Estas acciones en realidad se muestran aquí donde es todo el escenario. Podría agregar algunas acciones a todo el escenario solo seleccionando en cualquier lugar del área gris . Admitirás que eso significa que cuando haga clic en cualquiera de los escenarios, podría pausar la línea de tiempo y luego reiniciar la línea de tiempo si fuera necesario. También podría venir aquí y tan bien en el ratón sobre el escritorio mismo. Podría haber disparado algo también, pero voy a seguir adelante. Y si necesito volver aquí, todavía puede gustarle esto. Vuelve aquí y modifica esta acción. Adelante y previsualice esto. Alguien adelante y golpea comando entrar. Se puede ver que se detiene en medio de esa línea de tiempo, pero si sigo adelante y hago clic en esto, ahora continuará esa línea de tiempo. Ahora hemos agregado con éxito en acción a ese objeto dentro de tipo tumulto. Entonces volvamos a bombear. Y ahora sigamos adelante y exploremos un par de cosas más. Si selecciono este objeto, también puedo agregar en varios otros tipos de acciones en las que hago clic. Además, puedes ver que agrega una acción adicional. Entonces si quería seguir adelante y sumar más acciones, también puedo hacer eso. Entonces Pero en el siguiente video, vamos a estar hablando de quitar estas acciones, reorganizar estas acciones si es necesario, también 28. 28 Cómo eliminar acciones: está bien, Así que en el último par de videos, hablamos de acciones de línea de tiempo, y hablamos de agregar acciones a objetos. Ahora, ¿qué pasa si necesito quitar esas acciones? Vienes aquí, y si selecciono esto, realmente no puedo simplemente seguir adelante y golpear. Eliminar. Tienes que entrar aquí y bajo la acción, seleccionar el cuadro desplegable e ir a quitar, y eso va a quitar sólo esa acción para que pueda entrar aquí. Y si tengo varias, ven en una de las veces y quita esas diferentes acciones. Entonces simplemente no es visible. Por lo que quería asegurarme de que eso al menos se señalara que puedes venir en cualquier acción que añadas. Si decides que no quieres tener esa acción, puedes entrar aquí y seleccionar la acción, cuadro desplegable y bajar para quitar. O si decides que quieres cambiarlo de, digamos, un salto a ver acción a otra acción. Puedes bajar aquí y cambiarlo a una acción diferente y luego llenar la diferente información para hacer esa nueva acción Así que así es al menos como eliminas esa acción del objeto. Tienes que asegurarte de que las oportunidades estén seleccionadas o entrando en mi línea de tiempo, puedo deslizar este cuadro desplegable y bajar para quitar o en la línea de tiempo. Es un poco diferente porque podría seleccionar esa línea de tiempo y podría presionar el botón de borrar en la línea de tiempo. Pero no puedes hacer eso aquí, o ni siquiera puedes hacerlo en este escenario porque eliminarás todo el objeto. Por lo que sí tienes que seleccionar el cuadro desplegable para bajar para eliminar el objeto. Entonces así es como eliminas diferentes acciones dentro, es un tipo topo. 29. 29 Explorar las acciones defectuosas: en este video. Yo solo quería explorar algunas de las diferentes acciones que realmente puedes usar dentro. Es un pase múltiple. Por lo que estas airen las acciones por defecto hablarán de acciones JavaScript personalizadas más adelante. Pero así es al menos como entras y agregas algunas de esas acciones. Entonces voy a entrar aquí y bajo el clic del ratón. Quiero seguir adelante y dar click en el icono más, y voy a bajar aquí para saltar a parecer cuando haga clic en Saltar a Visto Esto realidad me permitirá saltar a un específico visto por defecto. Es sólo la siguiente escena. Si querías saltar automáticamente a la siguiente escena , estará ahí. O bien puede seleccionar el cuadro desplegable para ver primero, visto por última vez. O aquí es donde nos va a dar mucho diferente. Visto todas las diferentes escenas disponibles. Ahora mismo, sólo tenemos una escena sobre el lado izquierdo. Podría hacer doble clic en esto Y vamos a nombrar a esta escena una. Y puedo venir aquí a este ícono plus en una nueva escena, y vamos a nombrar esta escena. Claro, también deletreo bien ver, Y quiero volver aquí. Bueno, antes de que hagamos eso, solo asegurémonos de saber que hemos saltado a la escena. Entonces cuando seleccionas el texto aquí y dices que esto se ve para seguir adelante y escribir eso ahí dentro y ahora volviendo a uno visto, quiero entrar en este rectángulo, y ahora se va a saltar a escena, que es el siguiente escena. Pero si quería saltar, especificar una escena específica y entrar aquí y seleccionar esa escena o simplemente puedo decir OK, bueno, su siguiente escena, sólo voy a saltar a la siguiente escena ahora también podemos seleccionar la transición, que será la transición. Fade cruzado instantáneo, swap, empuje a la izquierda, empuje a la derecha, empuje de arriba a abajo. Y eso es una especie de la animación, los efectos de paralaje que obtienes cuando quieres pasar de una página a otra página. Entonces sigamos adelante, y voy a cambiar esto para empujar de abajo a arriba, y voy a ahorrar eso. Adelante y previsualizarlo. Y ahora voy a seleccionar en esta plaza de aquí, y se puede ver que esa escena ahora está empujada desde abajo, y ahora está empujada o arriba hasta arriba. Y hasta podría volver a parecer que vamos a seguir adelante y en la escena, también. Si quisiera tener, como, como, un botón de retroceso o algo así. Sigamos adelante y solo seleccionemos este rectángulo doble click sobre él y digamos de nuevo obviamente, tal vez quiera tener Ah, vamos a traer un botón aquí. Esto podría ser un poco mejor. Muy bien, así que nos vamos a quedar aquí atrás y ahora lo que va a pasar es con este click del ratón. Adelante y golpeemos, además de saltar a ver y vamos a decir escena anterior y todo esto va a ir a lugar de abajo a arriba. Esto va a ser de arriba a abajo. Y así va a si va a volver, va a ser de arriba a abajo como si estuviera animando de nuevo arriba. Entonces voy a seguir adelante y previsualizar este click en esta plaza. Se animará a la siguiente escena, y luego puedo dar click en Backend animará de nuevo a esa escena para que puedas tener diferentes secciones ese tipo de corrida paralaje a través de una página a otra, pueden estar pensando, ¿ Por qué sólo está en una sección? Es porque esto no es realmente receptivo aún podrías venir aquí y seleccionar bajo la escena Propiedades seleccionar la escala que será 100% y las alturas para ser 100% en el con 100% en el bombo. Y ahora solo puedo seguir adelante y golpear save, y se puede ver que se estira un poco más. Pero si vuelvo a golpear esta plaza, toda la página en realidad animará desde arriba de abajo hacia arriba y luego también lo mismo. Si hago clic atrás, esto animará hacia atrás. Hablaremos de la capacidad de respuesta y cómo se puede adjuntar esto a ciertas áreas o anclar en ciertas áreas en un video diferente. Pero así es como lo cambiarías a, ah, ah, 100% si quisieras tener toda la ventana, toda la zona se anima de abajo a arriba. Entonces sigamos adelante y exploremos un par de cosas más, Así que voy a volver al panel de acciones. Vamos a cambiar esto para ejecutar script Java. Ahora, JavaScript es funcionalidad de ladrón que puedes ejecutar y hablaremos más de esto en profundidad . Pero si quería seguir adelante y crear una nueva función, Aiken, adelante. Al igual que esa opción. Y ahora se puede ver aquí función titulada. Puedo colocar código JavaScript dentro de aquí, así que en realidad podría decir alerta y ese color va a saludar. Entonces si guardo eso cuando se hace clic en esto, en realidad va a alertar. Hola. Entonces voy a seguir adelante y previsualizar este click en esta plaza y ahora están mis alertas. Dice Hola. Puedo seguir adelante y golpear cerca ahí para poder ejecutar JavaScript. Y hay muchas otras cosas que puedes conseguir. Se puede navegar a diferentes páginas. Se pueden tener variables y otras cosas dentro del JavaScript, que aprenderán en un video posterior. Déjame seguir adelante y cambiar esto a vamos a volver para activar el comportamiento personalizado. Pero yo quiero ir a ti ¿Estoy aquí? Y así vamos a seguir adelante y sólo tirar hacia arriba aprendiendo dojo punto redes un ritmo que estás l volviendo a bombo. Voy a pasar eso justo aquí. Entonces copié la URL de Safari y la pego ahí dentro pero quería abrir esto en una nueva ventana. Podría, o simplemente dejarlo sin control si quisieras sacarlo de la ventana actual. En realidad, vamos a abrirla desde una nueva ventana. Así que adelante y golpea, guarda y luego haz click en esta plaza y puedes ver que abre una ventana completamente nueva a lo que estuvieras bien, que en realidad he adjuntado ahí. Eso es genial. Entonces sigamos adelante y probemos algo diferente. Se puede ver el correo electrónico compuesto. Es Ah, puedes tener este correo electrónico derecho a una persona específica si quisiera. Entonces Jeff, al aprender dodo dot net, podría tener un tema. También podría tener algo de texto corporal aquí, y luego cuando esto suceda realmente, sigamos adelante y golpeemos la vista previa. No estoy seguro si mi cliente de correo está arriba, pero sigamos adelante y previsualice. Sí, está tirando de mis correos electrónicos. Se puede ver que se dirige automáticamente a Jeff consiguió mi línea de asunto de muestra. No puse nada bien sí me puse algo en el textil del cuerpo tiene que mirar por qué eso no es punto ahí adentro. Pero así es como al menos entras y agregas el lugar de correo electrónico de componer. El sonido te permitirá adjuntar un sonido que no he traído a ningún sonido. Entraremos en sonido más tarde, pero tendría que traer el MP 30 G. A y el archivo wave Now. El motivo es porque esto básicamente se está preparando para estar en cualquier navegador para ser compatible con cualquier navegador. Por lo que necesitas traer el MP 30 G A y el archivo way para que se reproduzca en los diferentes navegadores disponibles. Yo quería bucear. Yo también puedo hacer eso. Stop Sound es lo mismo. Inicio línea de tiempo lo hará. Básicamente ya aprendimos sobre la pausa y continuar. Empezar con cronología voluntad. Si no tengo una línea de tiempo jugada por defecto, puedo empezar en un determinado punto o ir a una línea de tiempo un principal o tiempo dentro de la línea de tiempo . Puedo seleccionar qué hora es, y luego puedo entrar aquí y en segundos. En realidad voy a decir que saltaré a cinco segundos y eso saltará automáticamente a cinco segundos en lugar de la línea de tiempo. Entonces eso es algunos de los valores por defecto. Diferentes azúcares irán. Vuelve al script de trabajo de ejecución y sumérgete más en el JavaScript de ejecución más tarde. Pero eso es por lo menos algunos de los disparadores predeterminados disponibles dentro de tipo tumulto. 30. 30 Acción de arrastrado: otro elemento cool al que quiero presentarte es el sonido del elemento drag. El elemento drag permite hacer un par de cosas diferentes. Entonces quiero entrar aquí. Y en primer lugar, voy a crear una animación para mis objetos. Quiero dar click en estos Record bajando a mi línea de tiempo, y voy a seguir adelante y estira los tres segundos y luego vamos a animar eso de izquierda a derecha. Entonces ahora a partir de aquí es quiero crear otro objeto que controlará esa animación. Voy a seguir adelante y dar clic en la A ni en el registro de stop, y voy a entrar y seleccionar este rectángulo aquí. Vamos a crear un nuevo rectángulo y estirar esto para que sea cierta área abajo en la parte inferior. Entonces una vez que tengamos este objeto, ahora podemos entrar aquí y seleccionar este cuadro desplegable, y podemos decir línea de tiempo de control. ¿ Qué va a hacer esto es qué línea de tiempo queremos controlar? Bueno, esa va a ser la línea de tiempo principal. ¿ Quieres dedo del pie controlar el acceso horizontal por dragón lo horizontalmente, O queremos controlarlo. Si arrastramos hacia arriba y hacia abajo verticalmente, esa es otra opción que podemos hacer. También podemos tener un ir hacia adelante o podemos tener un ir hacia atrás en base a nuestra línea de tiempo. Entonces cambiaré eso y también la velocidad. Y entonces esta es opción el cambio. O podrías hacer velocidad así como continuar después de arrastre después de arrastrarme. ¿ Quieres que el impulso continúe después de eso? Entonces veamos qué hace esto. Quiero seguir adelante y guardarlo y luego previsualizarlo y se podía ver que la línea de tiempo todavía se reproducirá . Pero si entro aquí y selecciono en arrastre, estoy dando clic y arrastrando esto a cualquier parte dentro de mi línea de tiempo, puede ver que la línea de tiempo está controlada por esta zona de arrastre para que pueda entrar aquí y especie de moverla si quisiera. Y se puede ver que estoy soltando en este momento, y sólo una especie de gestos y mantiene ese impulso en marcha. No hace todo el camino. Ah, puedo entrar aquí y simplemente moverlo. formas quiero ahora, podría hacerlo de esa manera en la que simplemente estoy deslizando mi dedo a través de que controlando esta línea de tiempo o la otra opción es entrar aquí. Hagamos esto un poco más pequeño, y no sólo vamos a controlar la línea de tiempo, sino que también vamos a seleccionar y añadir un nuevo arrastre. Selecciona este cuadro desplegable y vamos a bajar aquí y decir, Elemento de control, posición, control, elemento Posición significa que va a arrastrar ese objeto con el escenario mismo o empecé con los dedos, Así que voy a ir adelante y golpear pasante de Command para que toque la animación. Pero lo que puedo hacer es a medida que la animación empieza a reproducirse, en realidad puedo hacer clic y arrastrar ese objeto, y se puede ver que realmente controla ese objeto en función de lo que tengo. Dondequiera que este objeto que estoy arrastrando se encuentre en el acceso horizontal para poder controlarlo en la línea de tiempo donde estoy deslizando mi dedo a través, o puede controlarlo aquí arrastrando realmente el objeto. Ahora, algunas aplicaciones. Es posible que puedas hacer esto si quisieras tener una línea de tiempo. Animación como una diferencia. Si estás tratando de explicar diferentes puntos en una línea de tiempo, puedes hacer que el usuario haga clic en su dedo o toque su dedo y arrastre a lo largo de la línea de tiempo y tener diferentes animaciones comiencen a jugar. En base a esa línea de tiempo, si no quieres que la animación o la línea de tiempo comiencen a reproducirse automáticamente, puedes detener eso, y luego solo está controlado por tu arrastre real. Entonces así es como haces algunos arrastrando dentro de tipo pequeño. Si quisieras tener algún tipo de lógica que tan pronto como la sueltes en algún lugar, determinará si se cae sobre un área determinada y luego hacer alguna otra lógica que realmente tendría que ejecutarse. Deja caer un guión y así tendrías que entrar y determinar la posición y otras cosas, y entraremos en más de guión de trabajo más adelante. No quiero sumergirme en eso ahora mismo, pero esas son las dos opciones que tienes, que o bien son línea de tiempo controlada eran posición del elemento de control, y luego la tercera opción entrará más adelante, que es el script de trabajo de ejecución. Y así es como usas algunos de los diferentes tipos de acciones dentro de un tipo tumulto 31. 31 Timy y de tiempo: Ahora vamos a estar hablando de líneas de tiempo. Timelines nos da la opción de poder crear opciones de diferencia o diferentes resultados para el usuario. Entonces sigamos adelante y empecemos con un nuevo proyecto aquí. Voy a seguir adelante y salvar este proyecto. Eso es sólo un proyecto de parpadeo por ahora. Voy a guardarlo en mi escritorio, y sólo vamos a llamar a esto líneas de tiempo y seguir adelante y golpear Guardar su. Ahora voy a entrar a los elementos y bajar a sólo erigir. Sólo necesitamos algo con lo que trabajar aquí. Entonces cuando sigas adelante y muevas eso al lado izquierdo y vamos a crear múltiples líneas de tiempo para esto pero con el fin de tener las opciones para ir a estas diferentes líneas de tiempo, lo que quiero dio es mucho crear dos botones que diga Timeline uno o línea de tiempo a porque hay que poder activar la línea de tiempo en algún lugar. Podría activarlo con la acción de la línea de tiempo aquí. Parece que ya tengo uno. Quiero seguir adelante y eliminar eso, pero puedo desencadenar con la acción de línea de tiempo Oregon trigger con algún tipo de entrada de usuario , como un botón Así que voy a entrar aquí a los elementos. Yo quiero seguir adelante y dar click en añadir un botón y vamos a llamar a esta línea de tiempo uno, y vamos a venir aquí. Simplemente ponlo en el lado inferior izquierdo. Voy a seguir adelante e insertar un nuevo botón y vamos a llamar a esta una línea de tiempo para que estos aire van a ser nuestras dos opciones aquí que puedo seleccionar y que esto vaya a Línea de tiempo uno o línea de tiempo a ahora, en mi línea de tiempo principal o mi principal. Sí, mi línea de tiempo principal aquí. Puedo tener esta opción anima y hacer lo que necesite. Entonces voy a seguir adelante y sólo que esto animates empiece desde el principio y luego anime hacia el lado derecho y eso es todo. Si golpeo guardar y luego previsualizar, notarás mi opción. Mi rectángulo simplemente anima hacia el lado derecho. Genial. Eso es lo que necesitamos para empezar. Entonces vamos a seguir adelante y solo hits paran en el disco ahí. Pero ahora vamos a venir a nuestras propiedades vistas, y eso se acabó. Si no lo ves, tienes que hacer clic en el inspector ven a la segunda opción aquí, visto inspector y luego bajar a ella, dice cronogramas de animación. El 1er 1 con el que hemos estado trabajando. ¿ Ves eso? Dice Línea de tiempo Principal, Pero podemos venir aquí y podemos añadir líneas de tiempo adicionales. Si hago clic en el botón más, sigamos adelante y llamemos a esta línea de tiempo Uno solo así fueron consistentes con los botones aquí abajo. Vamos a seguir adelante y añadir una nueva línea de tiempo y vamos a decir línea de tiempo a otra vez. A mí me gusta pensar en estos como tipo de, como elegir tus propias aventuras o resultados opcionales a esta animación para que pueda tener diferentes animaciones basadas en la entrada del usuario. Entonces en línea de tiempo parece que me perdí cinturón que puedes hacer doble clic en él para cambiar el texto si querías. Quiero seguir adelante y seleccionar Línea de tiempo uno. Voy a seleccionar este rectángulo por aquí, clic en el botón de grabación, mover mi fregador durante un par de segundos y luego mover esto hacia abajo al lado izquierdo inferior aquí. Entonces esa es Timeline uno. Esa opción sucederá, y así vamos a seguir adelante y seleccionar línea de tiempo en realidad parece que todavía estaba en línea de tiempo a Oh , me olvidé de hacer. Una cosa es que me olvidé de seleccionar realmente esto y dar click en show time line. Si no haces eso, entonces realmente estarás trabajando con la línea de tiempo en la que estabas antes. Entonces ahora estoy a tiempo Línea uno. Hagamos lo mismo ahí. Alguien haga clic en registro, mueva mi fregador un poco y luego baje hasta el lado inferior izquierdo. Eso se puede vender. A ver que tengo una duración de dos segundos y 20.27. Eso significa que esa es la línea de tiempo que acaba de verse afectada. Entonces estoy bien ahí. Al hacer clic en Detener registro, ven a la línea de tiempo para hacer clic en línea Showtime, y ahora puedes ver en línea de tiempo a Realmente no hay opciones de línea de tiempo aquí, así que voy a dar clic en registro aquí, y luego me voy a mover mi cuadrado justo abajo al lado inferior derecho ahí para que puedas ver si eso ahora está tomando 2.20 segundos. Y así voy a seguir adelante y golpear. Detener registro. Ahora solo vamos a previsualizar esto por ahora, y se puede ver que en realidad no pasa nada en este punto. Es si hago clic en Línea de tiempo uno o tiempo como a nada pasa porque no he activado esos para que realmente aparezcan. Entonces voy a seguir adelante y volver aquí y vamos a ir a la línea de tiempo principal Haga clic en línea Showtime, y voy a venir a Timeline uno aquí. El timeline un botón y voy a llegar a mis acciones, inspector. Se acercó a nuestros dice en el click del ratón, Haga clic en el plus, Y iban a seleccionar una opción para iniciar línea de tiempo. Ahora, ¿qué línea de tiempo o vamos a empezar? Bueno, en este caso, realidad vamos a empezar Línea de tiempo uno. Si se selecciona esto, se iniciará la línea de tiempo uno. Ahora puede seguir adelante y seleccionar lo mismo para que una línea de tiempo nos guste que ese botón salte por aquí, también. Donde dice iniciar línea de tiempo y seleccionar el cuadro desplegable a línea de tiempo a Ahora estos aire sólo opciones que estas líneas de tiempo se jugarán si estos botones aire seleccionado. Por lo que vamos a seguir adelante y golpear save y se podría ver la línea de tiempo principal juega muy bien. Pero si sigo adelante y golpeo la línea de tiempo uno realmente lo tomará de su ubicación anterior porque ese fue el fin de los tiempos, como la línea de tiempo principal y la muevo a la ubicación que definimos para Línea de tiempo uno. 32. 32 Lineamientos de tiempo relativos: Bueno, vamos a ver qué pasa si hacemos click en línea de tiempo para que puedas ver que salta de nuevo a donde estaba antes y luego lo mueve hacia abajo en ese punto. Entonces más o menos lo que pasa es que ignora Timeline uno, la ubicación que fue esa en el tiempo Línea uno y solo dice: Oh, Oh, bueno, aquí es donde empezaba antes y la mueve hacia abajo si quieres hacer Si se movió por aquí para, luego pasar hacia el lado derecho, Bueno, es un simple, es un simple, sólo hacer clic en marcar Marcar. Si vuelvo a mi escena, Inspector, puedo seguir adelante y sólo hacer de esta línea de tiempo una. Si selecciono eso, acabamos de golpear show timeline solo para asegurarnos de que esa sea la indicada. Sí, esa es la que tenemos. Por lo que quiero dar clic en este botón relativo, y luego voy a seguir adelante y dar clic en el botón relativo para línea de tiempo a también. Si golpeo la vista previa de guardado ahora puedes ver que sucede lo mismo en la línea de tiempo principal por Click Timeline. Pasará una misma cosa, pero lo que pasará a tiempo, como dos es que lo tomará de esta ubicación y lo trasladará a esa ubicación final que fue que era eso antes de hacer lo mismo con la línea de tiempo una vez. Entonces si hago clic en Línea de tiempo uno, lo tomará de su ubicación actual y lo moverá. Por eso me gusta pensar en ello como elegir tu propia aventura o diferentes opciones que puedes seleccionarla en base a la entrada del usuario. Se puede tener un enemigo basado en dos ubicaciones diferentes o en diferentes, y luego incluso se puede activar que estas diferentes cosas sucedan en la línea de tiempo también. Entonces si vuelvo a la línea de tiempo principal, vamos a dar click en la línea Showtime. Voy a bajar aquí y en este gatillo de línea de tiempo, voy a seguir adelante y añadir una acción de línea de tiempo. Y esa acción va a iniciar línea de tiempo, y vamos a seguir adelante e iniciar Línea de tiempo uno. Entonces ahora el usuario ni siquiera tiene que ingresar que yo podría ir adelante y golpear, guardarlo, animará otra vez y luego empezará automáticamente a animar hacia el lado izquierdo. Esa también es una forma que podrías si quisieras secuenciar tus líneas de tiempo y no tenerlas todas en la línea de tiempo principal y querías hacer una línea de tiempo, tocar esta otra, tocar esta otra, y luego una vez que eso esté hecho, jugar esta línea de tiempo, es como que los separe. Eso también lo puedes hacer, así que solo depende de ti en eso. Pero así es como se crean nuevas líneas de tiempo y cómo se activan esas líneas de tiempo, tanto a través de la entrada del usuario como a través de las acciones de la línea de tiempo. 33. 33 Timeline de bucleado: ¿ Y si quisieras recorrer tu línea de tiempo y que empiece una y otra vez? A menos que un usuario realmente detenga la línea de tiempo, Bueno, esa es una opción que debilita hacer. Entonces voy a seguir adelante y venir aquí al ejemplo anterior que teníamos. Teníamos un par de líneas de tiempo diferentes, pero ya no necesito esas líneas de tiempo extra. Y no necesito estos botones extra. Voy a quedarme con uno de los botones, y en realidad voy a decir stop animation que va a detener la animación. Aparte de eso, va a seguir dando vueltas una y otra vez. Yo quiero deshacerme de esta anterior que tenía antes de esta acción de línea de tiempo. Vamos a añadir otro aquí en un segundo, pero sólo quería deshacerme de eso. Entonces ahora mismo, si sigo adelante y previsualizo esto, debería ser enemigo. Pero entonces sólo se detendrá en ese punto. Entonces y lo que quiero hacer es que quiero un bucle una y otra vez. Entonces apenas comienza. Se detiene y se inicia y todo automáticamente. Entonces voy a seguir adelante y al final de esta animación, así que sólo voy a asegurarme de que mis fregadores al final de la propia animación. Voy a agregar una acción de línea de tiempo, y esa acción va a seguir adelante y decir, Start timeline, main timeline. Entonces ahora si voy adelante y golpeo, guardo y vista previa, va a llegar a ese punto y luego va a empezar automáticamente de nuevo. Si quisiera, también podría jugar esto en reversa. Vamos a seguir adelante y solo haga doble clic en eso y se podría ver esto como jugar en reversa. Entonces voy a seguir adelante y golpear, guardar y previsualizar, y va a llevar eso y va a animarlo de vuelta a donde estaba antes. Entonces se va a conseguir este efecto rebotante. Notamos que una vez que llega al revés, no hay acción para realmente volver a empezar. Entonces qué voy a hacer si quisiera tener una especie de rebote de ida y vuelta, voy a añadir una nueva acción de línea de tiempo, y voy a seguir adelante y golpear inicio timeline, y esta vez no necesito hacer una obra en reversa. Simplemente va a empezar línea de tiempo ahí, así que va a rebotar todo el camino hacia el lado derecho yo iba a volver al lado izquierdo. Va a golpear esa nueva acción y luego rebotar de vuelta. Entonces ahora tenemos que especie de bucle infinito de ir y venir. Puede haber algunas veces en las que quieras que pueda haber. En ocasiones no queremos eso, así que o quieres darle al usuario la capacidad de detener la animación. Entonces ahora vamos a volver a la bomba aquí. Voy a seleccionar esta acción, venir a las acciones de mi ratón, y en lugar de iniciar línea de tiempo, realidad voy a seleccionar el cuadro desplegable para pausar la luz de tiempo. Entonces ahora si golpeo Pause Timeline, ¿ qué línea de tiempo quiero pausar? Bueno, voy a pausar la línea de tiempo principal. Y así ahora sigamos adelante y hits adelanto. Se puede ver que nuestra animación comienza a dar un bucle de ida y vuelta. Bueno, sigamos adelante y golpeemos Detener animación y se podía ver que la animación se detiene muerta en sus pistas. Bueno, ¿cómo empecé de nuevo? Bueno, puedo entrar aquí, y puedo voy adelante y añadir un botón nuevo si quería. Sigamos adelante y agreguemos un nuevo botón que diga Iniciar animación, Y podríamos hacer un simple gatillo para continuar la línea de tiempo. Y si quisiera saltar a cierto punto de la línea de tiempo, en realidad podría ir al tiempo de la línea de tiempo en línea de tiempo y decir: Vale, Vale, ir a esta cierta cantidad de segundos. Entonces voy a seguir adelante y golpear, Guardar aquí, golpear vista previa, detener la animación, Pero luego hacer clic en Iniciar la animación para volver a iniciarla para poder tener toda esta animación. Puedo darle al usuario la capacidad de pausar la animación para detener la animación y luego reanudarla cuando quiera volver a. Y así es como lo haces a través de estos diferentes controles y también como realmente darías bucle a tu animación si quisieras un bucle ah continuo de animaciones o algún tipo de voluntad como que siga animando o algún tipo de humo que siga animar. Querías un bucle del dedo una y otra vez. Eso se puede hacer a través de estos disparadores de línea de tiempo 34. 34 escenas: todo bien. De lo siguiente que vamos a estar hablando son escenas. Ahora, las escenas están dentro de tipo tumulto y son básicamente páginas diferentes que puedes navegar Teoh Así puedes entrar aquí y en la pantalla principal aquí. Si vengo a la izquierda por dentro, puedo dar click en escenas aquí, y esto me dará una lista de todas las diferentes escenas disponibles para mí dentro de este proyecto. Ahora la primera escena es una escena sin título. Y si quiero esto o si quiero navegar a esto más adelante, quizá quiera cambiar eso por algo que tenga un poco más de sentido. Entonces, solo llamémoslo Escena principal. Y entonces ahora puedo entrar aquí y pueden añadir nuevas escenas. Por lo que voy a dar clic en este icono más para agregar otra escena, y se puede ver que agrega otra sin título vista. Entonces sigamos adelante y nombremos esto parece y luego creamos uno más que diga parecer tres. Ahora, el contenido que tienes onside dentro de una escena no siempre se transfiere a otra escena. Entonces si entro aquí y hago click en el rectángulo. Tengo mi propia línea de tiempo para esto, y tengo la mía propia. Simplemente vamos a estirar esto fuera de ella. Entonces tengo mi propia línea de tiempo con mis propios objetos aquí. Y si llego a parecer que ahí tengo. Ese es el objeto que estaba en la escena principal no está en esta escena. Entonces, a diferencia de las líneas de tiempo, si vuelvo a la escena principal y entro a la escena, inspector, inspector, diferencia de las líneas de tiempo donde comparte los mismos objetos que están en el escenario a través de todas las diferentes líneas de tiempo, las escenas mismas no comparten ningún contenido. A menos que hagas de algo un símbolo persistente, un símbolo persistente significa que estará en una escena, y luego irá automáticamente a cada escena en cascada a cada escena individual. O bien puedes especificar qué escenas no lo tienen y manos sobre una escena por escena. Pero eso depende de ti. Pero en lo principal visto, al menos tienes. Ese es un objeto aquí, y se puede trabajar con este objeto. Pero cuando estás listo para pasar a algo con completamente diferente fuera, ahí es donde crearías una nueva escena. Entonces voy a seguir adelante y borrar eso por ahora. ¿ De acuerdo? En realidad borró mi principal visto. Entonces quiero seguir adelante y volver a crear esa escena, y puedo arrastrar y soltar esas escenas, organizarlas como quiero Teoh. Entonces sigamos adelante y llame a esta escena principal, y voy a insertar algo de texto. Voy a darle la pregunta al usuario. ¿ Cuál es la mejor respuesta? Voy a seguir adelante y posicionar eso en el medio y vamos a seleccionar rectángulo y vamos a seguir adelante un inserto en los labios aquí y voy a darle una pregunta al usuario aquí y en base a su elección, les voy a mostrar Ah, elección o les voy a mostrar la respuesta. Entonces en la primera escena, o en realidad parecen aquí, voy a seguir adelante e insertar un texto y decir: Correcto. Eso fue un rectángulo. Y sólo para tener un poco más de sentido, vamos aquí. Y cambiemos eso para seleccionar el rectángulo. Entonces ahora aquí su reto es seleccionar el rectángulo, y luego si seleccionan, va a llegar a éste. Si no seleccionan eso, entonces les va a dar respuesta de Lo siento, cómo eso no fue correcto. Muy bien, escena tan simple. Pero de nuevo, es más trabajar a través de la lógica para asegurarnos de que entendemos lo que tiene que pasar aquí. Entonces voy a seguir adelante y volver aquí y voy a insertar un gatillo que si esto es seleccionado, va a ir a ver, si esto es seleccionado, en realidad va a ir a ver tres. Entonces voy a seguir adelante y seleccionar ese objeto. Ven aquí al panel de acciones, ven a mi ratón, click, y luego cuando es como la acción para saltar a visto y podría seleccionar el cuadro desplegable para ver. Y luego lo siguiente es, voy a seleccionar la Elipse, y voy a venir aquí en inacción para saltar a ver, y este va a ser visto tres. Si sólo quisiera ir a la siguiente escena, podría hacer eso. Si quiero ir a la primera escena, puede hacer eso. Lo último que puedo hacer eso Pero en este caso, específicamente voy a ir a ver tres. No quiero seleccionar la última vista aquí, incluso saber qué es, la última escena. No quiero seleccionar eso porque puedo agregar otras páginas más adelante. Ahora, si sigo adelante y golpeo, guardo y previsualización, puedes ver aquí está mi opción. Puedo seleccionar el rectángulo que dice, Correcto. Ese fue el rectángulo Vamos adelante y golpeamos, Refrescar para volver ahora. Si selecciono Elipse, seleccionará la elipse o irá a la opción Elipse. Están geniales. Entonces eso está funcionando muy bien. Entonces eso está funcionando. Y así en el siguiente video, vamos a estar hablando de la transición de una escena a otra y de las diferentes opciones que puedes hacer para eso. 35. 35 Transistions de escena: En el último video, hablamos de crear nuevas escenas y desencadenar con un clic de botón o una acción del ratón para ir a una escena determinada. Ahora lo que vamos a hacer es que vamos a hacer la transición a la escena porque actualmente, si seleccionas uno de estos objetos, sólo va a esa escena. Entonces, ¿y si quisieras hacer la transición que se deseaban, algún tipo de efecto de animación de efecto paralaje que va a la siguiente escena? Bueno, hay algunas opciones que podemos elegir. Entonces si selecciono esta opción y vuelvo a ella, dice en el ratón Click, me gusta esta opción donde dice transición y puedo ver que Aiken vaya a un fade cruz, use un swap de fade cruzado o este push realmente me permite conseguir eso efecto de paralaje para que pueda ir empujar de izquierda a derecha, empujar dedo derecho izquierdo, empujar de abajo a arriba o empujar de arriba a abajo. Y así quiero seguir adelante y seleccionar uno de esos y luego hits, guardar y previsualizar. Selecciona una de esas opciones, y puedes ver que empuja eso de arriba a abajo. Puede que quiera tener un código abajo como si va de una escena a otra hoja de arriba a abajo. Entonces voy a seguir adelante y seleccionar ese seguro de abajo a arriba y luego seguir adelante y golpear vista previa y se podría ver que anima hacia fuera. Y la nueva escena se anima ahora por los antecedentes. Puede que no pueda ver eso muy bien, así que sigamos adelante y cambiemos el color de tesis een. Aquí. Quiero seguir adelante y cambiar el color de fondo a un verde y luego en escena a voy a cambiar el color de fondo a algún tono de rojo. Ahora, si golpeo save, se puede ver que toda la escena aquí está ahí, y como la veo, se desplaza y entra la nueva escena. Ahora es rojo, una cosa a tener en cuenta. Eso si cambias el color de fondo de la primera página. De hecho heredará ser el trasfondo de todo ello. Si haces click en esto y la nueva página entra con un color diferente, el exterior seguirá siendo de mal color, por lo que si hago click en habilidad, se aplicará eso al 100%. Y luego, si entro me parece, quiero asegurarme de que esta escala también se aplique al 100% ahí. Y así ahora si sigo adelante y golpeo vista previa, haga clic en ese rectángulo, entonces esas páginas enteras se van a deslizar y las nuevas páginas van a entrar. Entonces no es sólo esa sección, va a ocupar el 100%. Entonces así es como al menos haces la transición o aplicas una transición para pasar de una página a otra página dentro de un tipo tamal. 36. 36 tiendes activadas en las Transistions: ya hemos hablado de cómo toe agregar un gatillo usando el panel de acciones. Y así al hacer clic en esto, navegará a la página siguiente o cómo desencadenar a una escena diferente, no sólo a la siguiente escena en sí. Pero quiero hablar de un gatillo más que puedes hacer para poder activar estas transiciones de entrenamiento a otra escena. Entonces quiero entrar en escena, inspector, inspector, y cuando un desplazamiento aquí abajo y notarás que en Deslizar a la izquierda, desliza derecha, desliza hacia arriba y desliza hacia abajo. Tenemos ciertos azúcares que no aplican a objeto específico sino que aplican a cualquier parte de la escena. Básicamente, y esta es una gran manera de especialmente para móviles, para permitir que la navegación sea simplemente intuitiva, para poder deslizar hacia arriba y deslizar hacia abajo. Entonces voy a seguir adelante y seleccionar o dice, Desliza hacia arriba. Voy a seleccionar el gatillo y voy a saltar a una escena y voy a seguir adelante y seleccionar la escena específica que dice Escena dos, y voy a seguir adelante y mantenerla en push bottom to top, y luego también puedo cambiar el duración aquí está bien, por lo que puedes decidir cuánto tiempo tardará esto en pasar de una escena a otra escena. Voy a golpear, guardar y golpear la vista previa, y ahora voy a deslizar hacia arriba y se podría ver en cuanto me desliza hacia arriba. Así que hice clic y arrastré de arriba de abajo a arriba y automáticamente desliza o transiciona automáticamente como si mi propio deslizar esa animación, esa transición. Entonces voy a entrar aquí y hacer lo mismo con esta escena. Entonces ahora estoy en escena para quiero deslizar hacia abajo para volver a esa página. Entonces quiero seguir adelante y ahorrar saltó a parecer, y luego voy a decir, visto escena principal. Y ahora va a ir en lugar de abajo a arriba. Va a ser de arriba a abajo. Entonces de esa manera es la propia navegación. Si bajé una vez, no quiero que vuelva a bajar para volver a una página y quería ir de donde está actualmente de vuelta a la cima aquí. Entonces voy a deslizar hacia abajo, y luego voy a seguir adelante y deslizar hasta aquí. Me va a llevar de vuelta a donde estaba la escena antes. Entonces solo una forma de crear esta navegación, de pasar de una escena a otra y conseguir que ese tipo de efecto de paralaje vaya como si estuviera pasando de una sección a otra. Entonces así es como lo haces y lo dices tipo tumulto. 37. 37 Percentage de etapas basado en el porcentaje en la base de la en el porcentaje: Está bien. Ahora vamos a estar hablando de formas en que puedes hacer que tus aplicaciones de tipo tumulto respondan, por lo que se adapta a los diferentes tamaños de pantalla. Es redimensionamiento es donde los anclajes a diferentes partes de la pantalla también. Pero el punto clave es que simplemente no se queda del mismo tamaño que cambia y una respuesta a las diferentes pantallas de dispositivos. Ahora hay una manera de poder crear diseños, que, que, en otras palabras, son como puntos de ruptura diciendo: Vale, Vale, ahora esto va a desaparecer. A este tamaño, esto va a venir a este tamaño. Esto va a verse un poco diferente a este tamaño. Hay forma de hacer eso. Pero antes de entrar en esa parte, voy a estar hablando de solo cómo aprovechar realmente y que tu escenario aproveche toda la pantalla. Entonces, en primer lugar, voy a seguir adelante y contestar un texto o un elemento de forma, vengo al rectángulo, y solo vamos a colocar este tipo de en el lado derecho del escenario por defecto. Si previsualizo esto, verás que está configurado para arriba en el lado derecho. Es una especie de en medio de la caja misma. Es algo así por aquí porque esto en este momento, tamaño actual es de 600 por 400 esto se establece en mis propiedades de escena sobre en mi área de inspector, y en realidad no va más allá de eso. Entonces si sigo adelante y redimensiono esto, ve y toma eso, puedes ver que no responde o no se adapta a los diferentes tamaños. Se mantiene prácticamente del mismo tamaño. Podemos cambiar eso dentro de tipo tamal. Apenas entrando en escena, inspector y en el tamaño de la pantalla, se puede seleccionar el cuadro desplegable. Puedes ver los diferentes tamaños de pantalla disponibles si estás intentando apuntar inicialmente a un tamaño determinado. Pero si querías que esto se adaptara a toda la pantalla, todo lo que tienes que hacer es hacer clic en esta casilla de verificación de escala justo al lado del ancho y la casilla de verificación de escala justo al lado de la altura. Ahora, lo que sucederá es que si guardo esto en vista previa lo, notarás que en realidad se movió hacia el lado izquierdo. El motivo por el cual es porque esto ahora se ha vuelto receptivo. Por lo que ocupa toda la pantalla. Realmente no podemos decir eso sólo con el fondo blanco. Podemos decir eso sin embargo, si entro aquí y cambio el fondo a un color diferente. Entonces voy a cambiar ese golpe de fondo, entrar, y ahora se puede ver que está adaptado al al más reciente o ahora está tomando la pantalla completa . Ah, y así la página completa en sí tiene el nuevo tamaño. Si entro aquí y quería que Teoh creara un layout diferente, sí tengo esto responsivamente fuera, pero entraremos en esa sección en los próximos videos. Pero por ahora, voy a seguir adelante y sólo seleccionar este objeto. Te diste cuenta de que este objeto en realidad no responde en función de mi tamaño porque eso no es una base porcentual y su ancla a la caída de la mordida D. Está anclado a la parte superior y al lado izquierdo de la pantalla para que en realidad no se adapte ni fluya con el lado derecho de la pantalla. Si estaba re dimensionando esto a la izquierda, puede ver que tipo de se mantiene igual o está en el mismo lugar del lado izquierdo, pero no hace eso en el lado derecho. Si quería que esto estuviera anclado al lado derecho, puedo entrar en mis métricas aquí, y puedo acercarme al diseño flexible y notarás que tengo la opción de pin y tamaño. Por lo que esto me permite en realidad fijar esto a los derechos, la izquierda, la parte superior o a la inferior. Yo puedo hacer los tres. Aiken hacer los cuatro que pude hacerle a Aiken hacer uno. Es bastante flexible ahí, Así que voy a ir adelante y golpear, guardar y previsualizar, y notarás que tipo de cambios tanto para el lado izquierdo como para el derecho. Está anclando de esta manera. Está anclando a la izquierda, y está anclando en la parte superior. No obstante, no está anclando en la parte inferior. Si quisiera que anclara en la parte inferior o alfiler en la parte inferior, podría hacer eso. Se puede ver que tipo de me da una vista previa diciendo que esto va a ser en el medio y se va a adaptar a los diferentes tamaños por lo que cambia cuando subo y abajo cambia cuando voy a la izquierda y a la derecha y así sucesivamente. Entonces esas fueron diferentes formas en las que puedo adaptar eso o penitencia Si lo hiciera, si lo quisiera, mayormente quedarme en el lado derecho de la pantalla. Puedo hacer clic en el pin de la izquierda y solo asegurarme de que eso esté desmarcado. Está desmarcado cuando es gris, se comprueba cuando es azul, y ahora si golpeo la vista previa de ahorro, se puede ver eso sobre el lado izquierdo. Si tipo de ajuste que prácticamente se queda igual. No obstante, cuando ajuste el lado derecho, sí se adapta y se queda sobre el lado derecho. Por lo que puedo arreglar cosas en ciertas áreas y tener cosas siempre en un área determinada aquí . No sólo puedo hacer eso con el posicionamiento donde los pasadores, sino que también lo puedo hacer con el dimensionamiento para que veas estas dos flechas yendo a la izquierda y y dos flechas subiendo y bajando. Si quería ajustar y que el ancho sea un porcentaje, ¿por qué simplemente puede seleccionar esta opción? Y se podía ver que estas flechas ahora se han puesto de relieve. También puedo seleccionar las flechas superior e inferior, y ahora se estirará tanto, um, um, el ancho sabio y la altura sabia. Si sigo adelante y golpeo guardar en vista previa, mi caja ahora se ha vuelto un poco más grande. Al cambiar el tamaño de mi pantalla, se puede ver que la caja cambiará de tamaño dependiendo de mi ancho y altura de mi navegador. Por lo que al hacer todo esto puedes tener cosas que se hacen más pequeñas, hacen más grandes que ancla o pin a ciertos lados de tu pantalla. No cambia de contenido. No puedo decir Bien, una vez que llegue a este punto, ven aquí. Ahí es donde entrarán en juego los diferentes diseños una vez que nos metamos en los diseños. Pero esto al menos permite crear cierta capacidad de respuesta y tener las cosas ancladas a ciertas ubicaciones también. Si vengo aquí y selecciono esta opción, se puede ver que aquí tengo algunas opciones más para el comportamiento de escala. Puedo seleccionar este cuadro desplegable. Puedo ver encogimiento para caber o expandir para llenar. Si hago clic en encoger para encajar aquí, vamos adelante y re tamaños y puedes ver que se queda un poco más proporcional en lugar estirar el con él lo mantiene en su proporción ahí si quieres. Si ese es el efecto deseado, puedes hacerlo o expandirte para rellenar. Se puede ver que hace algo similar aquí, justo de la forma en que como que lo hace en segundo plano. Puedes hacer expandirte para sentir, o podrías hacer encogerte para encajar, o puedes mantenerlo. Es por defecto si se estira, pero eso estirará tanto el ancho como la altura también. Entonces así es como haces parte de la escala en y ajustas tu pantalla para que se ajuste automáticamente a los navegadores de diferentes tamaños. Y así es como haces algunos diseños flexibles con diferentes objetos. Esto se puede hacer con texto. Puedes hacer esto con elementos de diferencia, botones y cosas como esas y esto cambiará automáticamente el tamaño de los elementos de posición en ciertas áreas. Entonces puedes empezar si querías Ah, cambia en función del tamaño de la pantalla. Ahí es donde empezarás a agregar puntos de ruptura o empezarás a agregar diferentes diseños por lo que entraremos en ese video en el siguiente video de cómo crear diferentes diseños y adaptar tu contenido en función del tamaño de la pantalla 38. 38 crea diferentes diseños: diferentes diseños: en el último video, hablamos de ajustar su tamaño de pantalla para responder automáticamente y no solo tomar. Oppa establece tamaño pero en realidad ocupa el tamaño de todo tu navegador. Pero puede que haya momentos en los que necesites ajustar tu contenido en función de los diseños. Entonces ahí es donde entra en juego la opción de layouts sobre el lado superior izquierdo. Si selecciono esa opción, me da un nuevo panel llamado Layouts. Si quería ocultar escenas por ahora, puedo seguir adelante y desmarcar escenas y solo tener mi opción de diseño ahora por defecto. Este es el diseño inicial que me dan, pero puedo subir aquí y puedo agregar nuevos diseños, y puedo renombrar este layout también. Entonces voy a llamar a este por defecto, y voy a seguir adelante y dar clic en el icono más, y me da la opción de ajustar o crear. El tamaño se basa en el iPhone, el iPad en Portrait, el iPad en Paisaje y luego escritorio también. este momento estamos alrededor de 600 así que estamos un poco en el medio estaban en realidad entre el iPhone y el iPad. En un principio, eso quizá quiera diseñar el retrato del iPad. Es posible que deseemos diseñar el paisaje del iPad y así sucesivamente. Entonces sigamos adelante y justo antes que nada, empecemos con el retrato del iPad y me va a decir cuál es el punto de ruptura IHS y el punto de ruptura ahora mismo es 7 68 Voy a seguir adelante y dar click en agregar un layout. Ahora, esto funcionará para cualquier cosa que llegue a ese tamaño de alrededor de 7 68 Así que las tabletas android básicamente, ya que estás trabajando con un Mac, creo que por eso solo tienen ahí los tamaños IOS. Pero cualquier cosa que llegue a este punto, como si se trata de una tableta androide, cambiará automáticamente el tamaño o en que estos puntos de ruptura sucedan a ese cierto tamaño. Entonces voy a alejarme. Esto es algo grande, y así que voy a subir mi zoom en la parte superior y alejar para poder ver un poco más de mi escenario para que veas que este es el tamaño de retrato del iPad. Y así cualquier cosa que haga aquí realmente se adaptará o cambiará dependiendo de ese tamaño, así que puedes ver aquí mismo el predeterminado si vuelvo a cambiar está terminado en el lado derecho , pero el retrato del iPad ahora está sobre el lado izquierdo. Entonces si golpeo la vista previa de ahorro, se puede ver el lado izquierdo eran un poco más grande que lo que un iPad o que los 600. Entonces lo que va a pasar es cuando empiezo a redimensionar y llego a ese 600 punto, se puede ver que mi objeto ha cambiado, y ahora está tomando este layout en lugar de este otro layout. Y así si quería ponerme muy específico, puedo entrar aquí y añadir un paisaje iPad aquí. Adelante y sumamos murciélagos y ves que aún tiene mis contenidos de más. Pero ahora puedo decir, OK, bueno, en modo paisaje, ahora se va a terminar en la parte inferior derecha. Puedo ajustar el tamaño, puedo ajustar el ingenio, y se podía ver que no afecta el tamaño ni el ancho de mi otro objeto. Bueno, ¿qué pasa si tengo una animación? Bueno, vamos a entrar aquí. Añadamos una animación. Y sólo voy a mover mi cursor. Mi, um, barra de fregadero hacia el lado derecho y mueve esto hacia adelante y golpea desmarcar en eso. Entonces si vengo aquí al retrato del iPad, notarás que la animación no sucede. Por lo que tengo diferentes opciones de línea de tiempo que estos diferentes tamaños y puede crear una experiencia específica real para el retrato del iPad o una experiencia específica para el paisaje del iPad o experiencia específica para el iPad o el iPhone o escritorio Now. Por lo general, el tamaño inicial del bombo es muy pequeño. 600. Entonces en realidad me gusta deshacerme de ese diseño. Aiken, derecha, click en él e ir a eliminar maquetación. Y luego me gusta mantenerlo en iPad Landscape iPad retrato en un escritorio ahí dentro, uno para los tamaños más grandes. Y luego quiero seguir adelante y agregar un iPhone Aquí otra vez, no lo hace. Básicamente cualquier teléfono Android que vaya a llegar a este punto. Puedes seguir adelante y aún así desarrollarlo para este tamaño, y luego cualquier teléfono Android va a aprovechar este tamaño. No es específico para el iPhone, lo que significa que este tamaño sólo va a funcionar en el iPhone para que pueda entrar aquí y redimensionar esto y decir OK en el iPhone. Ahí vamos. Podemos seguir adelante y se va a ver así. Entonces voy a golpear seguro y previsualizar, y te voy a mostrar un ejemplo aquí. Eso en realidad me va a dejar entrar aquí muy rápido y te voy a mostrar cómo previsualizar esto en diferentes dispositivos. Si estás usando safari, si estás usando chrome, es un poco diferente. Pero en safari, si golpeas el comando de opción son al mismo tiempo, realidad va a entrar en una vista previa aquí, y puedes ver cómo se va a ver esto en los diferentes tamaños. Por lo que tenemos un iPhone S e Tenemos un iPhone seis. Tenemos un iPhone seis. Plus. Si vuelvo a hacer clic en ese ícono, va a rotar eso a un tamaño diferente. Si vengo aquí al iPad Mini cuatro en Paisaje, se puede ver que nuestra animación sucede. Bueno, vamos a rotar eso al modo retrato, y ya puedes ver ahora esto es lo que va a parecer un retrato. Ahora. El iPad Mini cuatro y el iPad Air dos son prácticamente del mismo tamaño. Entonces si me cambio por aquí, esto me permite ver cómo va a quedar en el paisaje. Esto es lo que se va a ver en el modo retrato. También puedo venir en el iPad pro, y puedo subir a diferentes tamaños también. Sí tiene una barra de arrastre en el lado izquierdo, izquierda por aquí, lado derecho aquí y luego la parte inferior. Entonces si tengo un tamaño de pantalla muy específico que quería probar, puedo hacer eso también. ¿ Ahora qué? ¿ Cómo se llega a este tipo de cosas Dentro de un cromo? Si estás acostumbrado a usar chrome, ¿ entrarás aquí donde vas a ver y luego bajarás a desarrollador, vendrás a ver las herramientas de fuente o desarrollador? Voy a ir a herramientas de desarrollador aquí, y voy a hacer clic en esta barra de pestañas o barra de herramientas del dispositivo de alternar, y esto realmente me permitirá ajustar mi diferente tamaño de revisión mis diferentes tamaños aquí. Entonces yo de 56 más seis iPad, iPad, pro y Galaxy nexus y otras cosas. Si hago clic en eso, se puede ver lo que eres diferencia contenido va a ser con eso. Si usas chrome, típicamente solo uso safari. Pero si estás usando cromo, esa es una buena manera del dedo del pie. Para hacer eso también. Para salir de ella, solo tienes que hacer clic en Opción Comando son de nuevo, y eso te sacará de esa zona de vista previa. Entonces así es como se crean los diferentes diseños, y se agregan nuevos diseños para los diferentes tamaños de tabletas y escritorios y teléfonos en el siguiente. Hablaremos de crear un tamaño personalizado si sabes que estás intentando apuntar a diferentes dispositivos. Y no es uno de estos diferentes tamaños, y querías crear uno personalizado. Vamos a hablar de eso en el próximo video. 39. 39 Modificar los puntos de interrupción: Por lo que en los últimos videos, hablamos de ajustar tu pantalla por lo que automáticamente aprovecha todo el tamaño de pantalla . Hablamos de crear un nuevo diseño para que puedas obtener contenido específico para diseños específicos en los diferentes diseños que están disponibles por defecto. Pero, ¿qué pasa si tienes un diseño muy personalizado o querías? Digamos, entre iPad, retrato y iPhone, querías tener un diseño para iPhone six plus o algo así. Bueno, ahí es donde puedes entrar en los diseños, y en realidad puedes agregar un nuevo diseño con solo decir Break point con venir aquí y ajustarlo con digamos, Ok, bueno, yo quieren tener algo en abouts 500 500 sí y entonces puedo entrar aquí y decir: Bien, ahora esto es de 500 a 7 68 Va a tener este layout. También puedo venir aquí por en mi escena, inspector ajustando o agregando el nuevo diseño responsive. Puedo entrar aquí y decir Añadir nuevo diseño y hará lo mismo para que pueda agregar en los diseños del iPad los diseños del escritorio. Si no los he tenido ya. O puedes entrar aquí y tamaño de injusticia y guardar 500 click en añadir nuevo diseño. Ahora admitirá el diseño entre mi iPhone y mi retrato de iPad, y puedo venir aquí y decir: Vale, bueno, bueno, esto va a ser el iPhone seis plus o el iPhone siete plus o, ya sabes, sea cual sea el tamaño que tenga en su momento. Entonces ahora tengo esto. Y si quisiera, podría venir aquí y ajustar la altura. Si quisiera tener la altura inicial, sea algo. Pero la báscula aprovecha más o menos la altura. Entonces eso va a ser el 100% del bombo de todos modos, Así que no tienes que ponerte muy específico. Al menos hay que llevarlo al punto inicial diciendo: OK, OK, aquí es donde va a estar esto. Otra cosa que quizá quieras aprovechar es venir al retrato del iPad . Vamos a seguir adelante y entrar en nuestra a nuestras métricas. Inspector, es posible que desee bajar realmente y ajustar la izquierda la parte superior a la altura, o ahí con inicialmente. Por lo que viene la izquierda por el lado izquierdo. Esto en realidad se ajustará desde la izquierda, y esta va a ser la colocación inicial, pesar de que esto está anclado en el lado derecho, todavía ajustas la colocación inicial sobre el lado izquierdo ahora, por lo que eso es sólo algo a tener en cuenta que incluso saber que está anclado a la derecha. Se va a posicionar originalmente en eso, por lo que siempre hay que colocarlo originalmente en algún momento. Pero cuando se esté adaptando o redimensionando a toda la pantalla, solo ten en cuenta. Eso es Ah, dondequiera que coloques, va a ser inicial, y va a ser un porcentaje en ese punto de eso desde tu cosa inicial, va a ser ese porcentaje 40. 40 acciones de JavaScript: hemos repasado muchas de las partes de poder animar tus diferentes objetos, pudiendo ajustar algunos de los ajustes dentro de tipo tumulto. Ahora vamos a estar hablando de agregar alguna funcionalidad personalizada usando acciones de JavaScript dentro. Es de tipo topo. Entonces tengo un proyecto de muestra aquí. Simplemente voy a seguir adelante y guardar esto en mi escritorio. Sólo voy a llamarlo muestra otra vez. A mí me preocupa más solo un poco de bajar la funcionalidad, y entonces esperemos que más adelante, y los videos de entrenamiento tendrán diferentes ejemplos por los que se puede trabajar. Pero voy a seguir adelante y acaba de golpear save here, y luego voy a entrar y crear un elemento. Voy a bajar y despejar, click en rectángulo. Y de esa manera sólo tenemos algo con que trabajar en el escenario. Ahora, para agregar un código JavaScript personalizado en un escenario o en cualquier objeto de diferencia, necesitas entrar ya sea en la escena, inspector, o necesitas entrar en las acciones, Inspector. Si entro en escena, Inspector, Inspector, es donde puede entrar y agregar acciones a en ver carga vista al deslizar a la izquierda en, deslizar a la derecha, deslizar hacia arriba, abajo y así sucesivamente. Entonces si quería tener algún código JavaScript personalizado en uno de esos elementos o una de esas acciones que puedan hacer eso aquí, voy a seguir adelante, solo tienes que seleccionar este objeto. Y quiero que este código se ejecute tan pronto como este seleccione en él. Entonces voy a venir aquí y seleccionar este ratón o las acciones que mano acciones inspector, y voy a venir y decir, OK, OK, vamos a que esto suceda en los clics del ratón Quiero dar click en Plus seleccionar la gota caja y voy a bajar a ejecutar JavaScript. Queremos ejecutar algún javascript. Ahora lo que pasa está dentro de mi recurso es que te darás cuenta tan pronto como crea una función de JavaScript lo va a agregar. Dentro de mi recurso es porque lo bonito de esto es que puedo reutilizar esta función de JavaScript con cualquier botón o cualquier elemento que sea realmente lo llame. Entonces una vez que esa función creativa, es reutilizable. En el interior, es un pase múltiple, así que vamos a bajar y seleccionar este cuadro desplegable. Si ya hubiera creado una función realmente mostraría aquí las diferentes funciones . Pero en este caso, voy a seguir adelante y solo dar clic en nueva función, porque aún no tengo nada comenzado. Y esto es lo que muestra sus espectáculos. Aquí, pops, abre una nueva pestaña, pero vuelve a aquí a sin título Visto este testamento. Esto me permite volver a la línea de tiempo, y notarás que en el recurso es que ahora tenemos esta función sin título. No obstante, si vuelvo del dedo del pie función titulada, lo primero que quiero hacer es querer nombrar esta función. Ahora, esto es que estás trabajando con todo tu código que hace falta ir dentro de esta función. Y así vamos a seguir adelante y sólo nombrarlo algo que doble clic donde diga función sin título. Y sólo voy a nombrar a esta muestra funks o litera, um, y tener esa visa. Vamos a añadirle el uno, porque vamos a añadir varias funciones, pero sólo vamos a seguir adelante y añadirle eso aquí. No, está pasando en un par de parámetros. Ah, bombo, elementos de documentos y panel de eventos. Este no es un curso de guión laboral. Y así, si quieres aprender todo sobre JavaScript? Te recomiendo encarecidamente que vuelvas a aprender dojo dot nets y te inscribas en nuestro curso de JavaScript allí. Entonces voy a seguir adelante y entrar aquí y sólo vamos a hacer una simple alerta. Entonces voy a hacer abrir Príncipe Estos paréntesis cierran, comillas abiertas, cierran cotizaciones y sólo vamos a decir, Hey, sólo vamos a alertar a un simple Hey allá ahora. Lo que va a pasar es que si vuelvo a mi derechohabiente visto, notarás que la función dentro del recurso es realmente ha cambiado. Por lo que eso se actualizará dependiendo de la pestaña aquí también. Se actualizará dependiendo de lo que lo llamé aquí mismo que se aplican las mismas reglas con JavaScript. Eres funciones tienen que ser un solo nombre. No pueden tener espacios ni nada por el estilo. Entonces solo sigue esos mismos métodos en cuanto a lo que estás nombrando. Está bien, así que vamos a seguir adelante y a ver si esto funciona. Voy a golpear, guardar, guardar, y luego voy a previsualizar esto, y tan pronto como haga clic en él es cuando sucederá esa función y se puede ver aquí es mi función javascript la que hace sus simples alertas justo dentro de ahí , sin embargo, quizá quieras agregar funcionalidad adicional además de solo alertar si querías, hay mucho que puedes dio si necesito volver a esta función. Por alguna razón, si esa pestaña está cerrada, podría volver al recurso es y hacer doble clic en esto o dar clic abajo en su fuente. No obstante, la forma más rápida que encuentro es solo haciendo clic en esto y luego haciendo clic en esta flecha aquí y que en realidad se abrirá en la nueva pestaña y me llevará de vuelta a esa función . Hay mucho que puedes hacer con el JavaScript, pero necesitas saber hacer referencia a tus documentos en agria tus elementos dentro de tipo tumulto . Y lo bonito de ello es que dice que estamos aquí. OK, El elemento es el documento HT macho que activó la función. Entonces lo que sea que desencadenó esta función que serán los elementos. El evento es Theo evento que se activó esta función. Básicamente, si se trata de un evento de mouse o un tap o algo así, podrías determinar eso y usarlo como tipo de si y declaraciones si lo necesitabas. No obstante, es posible que no conozcas todo lo demás aquí, así que abajo en la parte inferior. Tenemos una lista de diferentes recursos es que en realidad se puede hacer. Vamos a repasar varios de estos en el próximo par de videos, pero por ahora, solo quiero que sepas cómo entrar realmente y agregar uno de esos. Por lo que necesitas En primer lugar, coloca tu cursor en algún lugar dentro de la función y luego encuentra el que quieras. Entonces sigamos adelante y digamos, Um bueno, vamos a seguir adelante y decir documento I d Aquí sólo tenemos que ver con esto es el que yo quiero. Quiero seguir adelante y hacer doble clic en él y lo notarás ahora, coloca ese código dentro de esa función si lo necesitaba. Puedo agregar una variable y decir muestra mucho igual al documento bombo. Y entonces de esa manera, si lo pongo dentro de un muy negro y luego alerta, es alguien que diga barra de muestra de alerta. Y ahora, si golpeo la vista previa, va a alertar a este índice. Contenedor de guión bajo bombo de subrayado. Entonces muchos elementos diferentes que vamos a repasar cómo hacer algunos de estos. Se puede iniciar y detener la línea de tiempo. Se pueden obtener elementos por. Se puede conseguir la propiedad. A continuación, puede establecer la propiedad de un determinado elemento para que sea opacidad cero. Si quisieras esconderte y mostrar cosas, si querías entrar y saltar a la siguiente escena a través del JavaScript, podrías hacerlo. Si querías pausar la línea de tiempo si querías iniciar la línea de tiempo. Algunas de estas cosas es lo mismo que lo que una acción sería seo. Puede haber casos que no queremos hacerlo, pero quizá quieras tener un elemento condicional diciendo, Si esto está jugando bien, entonces detente esto, o si esta es la duración de esto es cierta cantidad, luego deja eso o juega. Eso es o hacer algo así. Por lo que es útil en algunas situaciones poder hacer referencia a este código. Entonces solo voy a repasar los próximos videos de pareja y te vamos a mostrar cómo hacer un par de estos, empezando por el documento cómo puedes trabajar con el documento consiguiendo el I d o estableciendo un I D y cómo puedes establecer algunos diferentes propiedades de elementos, por lo que vamos a seguir adelante y empezar con eso en el siguiente video. 41. 41 eventos de documento: en el último video, hablamos de crear esta función a partir de una acción de ratón. Y así en este video, solo vamos a seguir adelante y explorar algunos de los elementos de código de diferencia que podemos hacer aquí abajo, las diferentes cosas de código Hansen que tenemos disponibles para nosotros ahora si quisiera, como aprendiste en el último video, si solo haces doble clic en algo, si querías usar eso y entonces puedes modificarlo a partir de ahí. Pero lo primero que quiero hacer es que ya hablamos un poco del documento llamado Dr Night. El recurso es carpeta y funciones. Realmente no uso esos ah lot. Ahí están. Si necesitas a Teoh, refiéralos un poco más. Y si esto no te da suficiente información sobre con qué vas a estar trabajando , hay un botón más info el cual se abrirá con una documentación para tipo tumulto, y entra un poco más de profundidad de lo que puedas quieren usar para, como, las líneas de tiempo, cómo inicias estas diferentes líneas de tiempo o algo así. Entonces eso es solo algo a tener en cuenta es que puedes hacer click en él y conseguir un poco más leer un poco más allá. Pero si eres como yo, me gusta ver cosas en acción. Entonces sigamos adelante y exploremos algo de esto. Voy a primero que nada, venir a conseguir elemento por i d Así que en realidad podemos conseguir un elemento específico si vamos a hablar con un elemento, sobre todo si vamos a ocultar cierto elemento. Ese no es el elemento en el que se hizo clic porque te darás cuenta aquí sí que tenemos el elemento pasando en. Entonces si estamos hablando sólo con este elemento, entonces todo lo que necesitamos hacer es referirlo por elemento. Pero si vamos a estar hablando con otro elemento, bueno, entonces necesitamos entrar realmente. Y necesitamos conseguir los elementos y necesitamos identificar eso Entonces esto es útil para ese tipo de cosas. Entonces voy a seguir adelante y hacer doble click en esto y luego puedes verlo dice hype document dot get element by I D. Y luego dentro de comillas está I. D. Bueno, realmente no hay un elemento que se llame yo d ahí fuera así que realmente necesitamos entrar a nuestra escena y necesitamos crear un elemento que tenga un I d. Así que voy a entrar y crear este círculo y puedes darle un 90 a los elementos viniendo a la ventana del inspector por aquí en el lado derecho. Y este es en realidad el inspector de identidad y vamos a bajar ahora mismo. Dice nombre para mostrar. Eso es lo que se muestra aquí mismo. Yo puedo cambiar eso aquí. O podría darle a esto un elemento único. Yo d y así todos los elementos. No puede tener la misma clase que no puede o no puede tener la misma d más de un elemento. Necesitas darle uno único. Si quisieras hablar con varias cosas todas a la vez, ¿lo puedes hacer por nombre de clase, y así puedes darle un montón de nombres de clase diferentes y referirlo de esa manera. Pero en este caso, sólo vamos a estar hablando con este solo ítem específico porque los eventos que se están llamando están en este elemento. Entonces no estamos hablando con ese específico. Vamos a hablar con otra cosa, Así que voy a seguir adelante y solo llamar a este círculo y luego voy a golpear, guardar y volver a mi función de muestra. Uno aquí y vamos a decir, Bueno, esto va a ser círculo. Vamos a hablar con ese círculo. Entonces Pero lo bueno es que si quisiera referirme a esto dentro de otros elementos, si voy a agregar más código, probablemente sea más fácil colocar esto dentro de una variable. Y así vamos a decir circulo igual y luego tener eso justo después. Entonces ahora, a partir de ahora, puedo seguir adelante y usar el círculo de referencia, y estará hablando de estos elementos en el escenario. Entonces esa es una forma de referenciar realmente el i D. Pero también podemos conseguir las diferentes propiedades sobre eso yo d Así que voy a seguir adelante y hacer doble clic en esto aquí. Y así vamos a decir documento bombo, obtener propiedad del elemento y de qué elemento vamos a hablar. Bueno, no vamos a hablar del que se pinchó. En realidad vamos a hablar de este círculo, Así que quiero seguir adelante y hacer doble clic en eso. Y entonces qué nombre de propiedad vamos a hacer? Bueno, vamos a decir izquierda. Entonces vamos a conseguir la propiedad de la izquierda. ¿ Cuál es la propiedad izquierda? Yo quiero saber. Bueno, para mí, si lo previsuo aquí y hago clic en eso realmente no veo eso porque no estoy haciendo nada con esa información. Entonces necesito hacer algo con esa información. Entonces, solo sigamos adelante y envolveremos esto dentro de una simple alerta. Quiero tener unas alertas que se abrirán con la propiedad del elemento ahí. Entonces voy a envolver los documentos de bombo caliente, obtiene el círculo de propiedad del elemento y todo dentro de paréntesis y paréntesis de alerta. Ahí. Voy a golpear, guardar, guardar, y luego previsualizar. Y si hago clic en él, te darás cuenta esto dice, 445. Esa es la propiedad izquierda para esto. Y así puedo reunir alguna información sobre diferentes elementos en mi escenario. Ahí es donde se vuelve útil. Y luego, si muero, entonces puedo agregar declaraciones como si la propiedad get elements circle left es mayor que esto, entonces haz eso. Y así puedes agregar algunas cosas condicionales dentro de ahí, que, para hacer eso, lo colocaría dentro de otra variable. Me voy a deshacer de eso. Alertan los paréntesis abiertos, cierren paréntesis ahí, y luego voy a salvar nuestro círculo igual a la izquierda y decir, OK, esa va a ser propiedad de la izquierda aquí. Y luego vamos a seguir adelante y decir, si el círculo que queda es mayor o igual a 500 bien, entonces vamos a alertar. Así que di, yo, lo siento. Menos que encendido. Eso es lo que esto es menos que si el círculo izquierdo es menor o igual a 500 entonces citas O hacer eso, voy a probar una cosa aquí sólo para ver si podemos hacerlo sin las cotizaciones. Y sin embargo podemos para que tú lo puedas hacer. Las cotizaciones serán una cadena que en este caso, funciona. Um, pero si quisieras tener el valor exacto del de la propiedad, entonces lo haría sin las cuerdas ahí. Entonces ahora si quisiera hacer más grande que entonces podría hacer como, ah, ah, 200 aquí, y se podía ver 445 es mayor que Y eso es lo útil de conseguir estas propiedades de elemento colocándolas, y así en ese momento, ajustando la lógica, y eso es algo que no puedes hacer solo con los disparadores normales dentro. Es de tipo topo. Entonces sigamos adelante y hagamos una cosa más. Vamos a establecer en realidad la propiedad del elemento. Ya no necesito esto porque acabo de conseguirlo. Pero voy a seguir adelante y decir: Oye, círculo, círculo, vamos a establecer tu propiedad de elemento viniendo aquí para establecer la propiedad del elemento. Cuando un doble clic en eso y vamos a decir documento dot set element property y no estamos hablando con el elemento, el que hicimos clic. En realidad vamos a estar hablando con el círculo. Entonces voy a copiar eso y pegarlo aquí. ¿ Y de qué nombre de propiedad vamos a hablar? Bueno, ¿cuáles son las opciones aquí abajo? Me dice cuáles son las opciones, dice arriba a la izquierda con altura, rotación, escala Z, escala X y opacidad e índice Z. Si quería traer cosas ah, arriba la capa o abajo la capa, puedo usar el Índice Z. Sólo vamos a decir izquierda y luego el valor aquí mismo. Bueno, ¿qué valor queremos? Bueno, vamos a decir que van a ser 100 y queremos que esto se apodere o dos enemigos. Si no lo hacemos, sólo podemos tomar eso. Este es el número de segundos, y podríamos bajar eso a cero, y eso sucederá al instante. Si lo hacemos, entonces vamos a seguir adelante y solo dejaremos eso a la 1.0, que es un segundo. Y entonces puedo decir, Aquí está mi facilidad de entrada y salida así que podría hacer simplemente facilidad de entrada, facilidad de salida si quería eso para burlarse o él le agrega algo de flexibilización a eso. Entonces voy a seguir adelante en solo una vista previa sobre esto, y en cuanto haga clic en él, notarás que mi círculo se anima desde el lado derecho hacia el izquierdo y lateral, y eso me permite ponerme un poco más específico con él. Y entonces puedo elegir animar varias cosas todas a la vez y de esa manera, el tiempo como y correr por sí mismo. Y entonces esto me permite activar esta animación cuando yo quiera ahí. Entonces eso es una cosa útil al respecto. Ahora. Hay algunas otras cosas para que puedas desencadenar un comportamiento personalizado. Si tienes otro comportamiento en alguna parte, puedes desencadenar eso. Realmente no tiendo a usar tanto o no me he topado con ninguna situación en la que he usado eso y realmente fuera si es necesario. Si querías explorar un poco más, puedes echarle un vistazo a eso también. Pero así es como se trabaja con el documento. Cómo obtienes algunos de los elementos en el escenario, cómo actualizas algunas de las propiedades en el escenario también. Um, y será cómo animas esas propiedades al siguiente valor también. 42. 42 referentes en JavaScript: Está bien. Entonces la última sección de la que voy a estar hablando es el símbolo Instancias Ahora, las instancias de símbolos si realmente vienes y echas un vistazo a la línea de tiempo y los diferentes símbolos aquí mismo u obtienes elementos. Perdón. Si miras las líneas de tiempo y también escenas, cualquier cosa que esté dentro de los símbolos, Dice básicamente cómo hacer referencia a un símbolo por I d. Por nombre también. Y luego puedes Esto te mostrará cómo iniciar realmente una línea de tiempo de un símbolo cómo continuar una línea de tiempo, cómo obtener la duración de la línea de tiempo dentro de un símbolo cómo ver si ese símbolo está jugando o no cosas tan diferentes que tú puede hacer. Pero los símbolos son un poco diferentes a lo que son los elementos. Entonces solo estás referenciando esto de una manera un poco diferente. Entonces vamos a seguir adelante y volver a uno visto aquí, y vamos a convertir uno de estos objetos en un símbolo. Entonces antes que nada, voy a hacer un objeto de diferencia aquí. Sólo para que tengamos algo un poco diferente, va a hacerlo más pequeño, y voy a cambiar el color de esto a unos colores diferentes. Entonces sigamos adelante y cambiémoslo a como un verde aquí y voy a dar click derecho en esto y realidad voy a querer salir al símbolo y luego ir a él. Perdón, este grupo deshacer. Yo quiero hacer seleccionar eso, ir a nuevo símbolo de selección y eso va a crear un símbolo para mí. Entonces, como aprendimos en videos anteriores, si te saltas esos videos por alguna razón, recomiendo encarecidamente volver a la sección de símbolos. Pero los símbolos tienen diferentes líneas de tiempo dentro de ella. Entonces si hago doble clic en él, me llevará a ese símbolo. Y si estiro un poco más la línea de tiempo aquí, se puede ver que ahí está mi símbolo. Ahí están mis diferentes propiedades y así sucesivamente. Entonces estoy aquí. Esta barra morada me permite saber en qué símbolo estoy. Estoy dentro de este símbolo, y voy a seguir adelante y solo crear una animación para la segunda animación aquí, y vamos a simplemente seguir adelante y vamos a tener este movimiento hacia el lado izquierdo derecho ahí, y eso es más o menos. Entonces si voy adelante y golpeo, guardo y luego entro, notarás que ese símbolo, la animación de ese símbolo, se está reproduciendo dentro del símbolo mismo. Porque si salgo de eso esa animación en sí, no está en el es en la hora principal. Linus lejos se puede ver aquí, pero en realidad es la animación. No puedo cambiar esa animación sin entrar en el símbolo mismo, haciendo doble clic en él y luego entrando ahí en el símbolo. Entonces si por alguna razón al mismo tiempo que quiero pausar esta animación o hacer algo con esta animación, también puede que quiera referirme a esta animación misma. Yo podría hacer eso. Y antes que nada, tienes que darle una I. D. Así que cuando entras al inspector de identidad y voy a darle a esto un yo d. De Green Square y ahora voy a entrar en mi función de muestra, Y si no ves eso, puedes seguir adelante y seleccionar este objeto aquí, entrar en tu panel de acciones y luego hacer clic en la flecha y que se mostrará en la función de muestra . Ahora lo que necesito hacer es hacer referencia a ese símbolo. Entonces llego a la sección de símbolos y voy a seguir adelante y primero de todo, crear de nuestro y vamos a decir Plaza Verde igual Y entonces voy a hacer doble clic Dónde dice obtener símbolo por d asegurarme de que me hagan clic aquí y allá vamos. Voy a cambiar el i d a Plaza Verde. Y eso es lo que le di al I. D. Dentro del inspector de identidad. Y así ahora puedo referirme a eso y hablar con esa plaza verde sólo escribiendo aquí Green Square. Ahora, puedo hacer más de uno si quisiera. Si quería hablar con varias instancias diferentes s así que voy a seguir adelante y decir, OK, OK, nombre de símbolo. Si hay algún tipo de nombre de símbolo, puedo hablar con cada símbolo que obtenga símbolos que puedes usar varias veces. Y si querías hablar con todos ellos, puedes hacerlo así también. Y así el siguiente objeto es Obtener instancia simple Si quería obtener una instancia de símbolo por cierto nombre, un nombre de símbolo devuelve el nombre del símbolo si quería obtener eso si quería obtener un elemento y un lado del símbolo porque el símbolo en sí podría tener varios elementos. se puede hacer. En este caso, sólo vamos a bajar. Se puede iniciar la línea de tiempo, y se puede pausar la línea de tiempo. Ahora, tengo que saber el nombre de la línea de tiempo. Entonces voy a volver a entrar en este símbolo, y voy a entrar en ratones. Yo quiero entrar en mi símbolo, inspector. Y se puede ver que el inspector de símbolos dice línea de tiempo principal. Y así voy a seguir adelante y acaba de entrar en mi función de muestra y bajar la línea, y vamos a hacer una pausa. Doble click en eso. Voy a Seguro que bajan la línea aquí cuando un doble clic en Pausa Línea de tiempo. Y voy a reemplazar eso por la línea de tiempo principal. Ya veremos. ¿ Qué símbolo vamos a conseguir? Vamos a decir Plaza Verde. Ah, lo siento. No reemplaces esa primera parte por Green Square y sigamos adelante y solo tienes que hacer click en eso y ya puedes ver ahora está pausado. Entonces tengo que reemplazar esa primera parte. Pero sólo dice pausa, Timeline nombrado, y vamos a nombrar la línea de tiempo en sí está en línea de tiempo principal, así que vamos a posicionar esa línea de tiempo. Podemos entonces continuar la línea de tiempo. Podemos ir a cierto tiempo en la línea de tiempo como aprendimos en la anterior. Podemos obtener la duración. Podemos ver si está jugando, pero es solo que hay que hacer referencia a esto de una manera diferente. Tienes que conseguir el símbolo de una manera diferente a lo que hiciste con los elementos. Y una vez que haces eso, puedes hacer prácticamente lo mismo con lo que estás trabajando antes de que todavía puedas cambiarte . En las propiedades de los diferentes elementos se puede entrar y obtener esos elementos dentro del símbolo y ajustar la propiedad izquierda. Ajuste de capacidad. Ajusta casi todo lo que necesites para obtener con esta instancia de símbolo. Todo lo que tienes que hacer es escribir. Si fuera a hacer clic aquí, entra y di instancia simple. Claro, hago clic arriba su instancia de símbolo y obtengo ese elemento, y luego simplemente básicamente tengo que definir qué elemento quiero conseguir algunos. Es así como se trabaja con símbolos ahí. Otra cosa que nota está dentro de tu inspector de símbolos, puedes cambiar este símbolo de estándar a persistente, persistente, básicamente ajustado. Por lo que en realidad puedes tener esto a través de múltiples escenas de diferencia o múltiples páginas diferentes , escenas, lo que sea que necesites con eso, pero más o menos. Todo lo demás es igual, y te permite entrar y hacer referencia a ese símbolo con tus funciones con tu script de trabajo ahí. 43. 43 Timeline n Scene JavaScript: en esta siguiente sección. Yo quiero hablar de escenas y líneas de tiempo. Por lo que estas son dos cosas diferentes que puedes hacer dentro de tipo tumulto para navegar a una escena determinada o para iniciar una determinada línea de tiempo, depositar cierta línea de tiempo, o incluso comprobar si una determinada línea de tiempo es llana. Y así vamos a seguir adelante y sólo explorar un par de esos. Y así lo primero que seguimos en la misma función donde tenemos la escena titulada y tenemos este rectángulo que básicamente está activando esta función. Me deshice de conseguir esto. Todavía tengo el elemento que d justo ahí. Pero me deshice de referirme a eso por ahora. Entonces vamos a seguir adelante y con el fin de saltar a otra escena o para ir a otra escena, necesito venir y asegurarme de que aquí se muestre el panel de escenas de mayo. Haga clic en el icono más y luego siga adelante y cree una nueva escena. Entonces, solo sigamos adelante y nombremos esta escena. Un doble clic en esto y voy a decir escena uno, y luego voy a nombrar al siguiente parece, y ahora lo que vamos a hacer es en escena a solo voy a añadir un texto diciendo que esto se ve a Solo para que sepamos que hemos navegado a que parecen ahora de nuevo, se puede entrar y se puede añadir en ah, a través de estos eventos se puede agregar en un ir a escena. Pero hacerlo a través del guión de trabajo te permitió al dedo agregar un poco más de funcionalidad diciendo, Bueno, tienen que hacer clic en esto y esto antes de que realmente sigan. Entonces esto es algo donde puede llegar útil para hacer esto todavía, pero agregándole algo más de lógica. Entonces voy a seguir adelante y bajo la sección de escena, voy a decir actual nombre visto cuando un doble clic en eso. Y luego vamos a colocar esto dentro de una variable. En realidad, solo coloquemos esto dentro de alertas para que podamos ver cuál es el nombre de las corrientes vistas, y luego se podría ver que alertará visto uno, y de esa manera Toe nos hace saber que esa es la escena, y podemos correr alguna lógica diciendo, si se ve uno hacer esto si parece hacer esto y así sucesivamente. Entonces sigamos adelante y deshacernos de eso. Entonces aquí y el siguiente es un espectáculo visto de nombre, y esto nos permitirá ir a cierta escena, e incluso nos permite ir a o especificar la transición o el fade cruzado para que se pueda ver el aquí, dice K. Visto transición Cruz desvanecida. Bueno, ¿qué otras opciones tenemos? Estas son las diferentes opciones que tenemos disponibles. Difuminado cruzado, cambiar deslizar o lo siento Intercambiar empujado de abajo hacia arriba. Y esas fueron las mismas opciones que tenemos Podemos definir en el número de segundos que se tarda en ir realmente a eso. Ahora sí tenemos que especificar los nombres de la escena, Así que quiero seguir adelante y decir ver dos y luego vamos a golpear. Vamos a dar click en eso y ahora se va a ir a parecer, y se puede ver que se hizo el cruz desvaneció Vaid de una escena a la siguiente escena. Al hacer eso Javascript allá Ahora, si no sabes cuál va a ser la siguiente escena, no tienes que especificar el nombre. Específicamente, se puede ir y dar click en el siguiente espectáculo siguiente escena y esto irá a la siguiente escena y se podría especificar también la transición. O conduces anterior visto esto bien, Así que vamos a seguir adelante y deshacernos de ese doble clic en escena anterior y que irá a la escena anterior. Entonces eso es básicamente sólo ser las escenas. Y de nuevo, el se puede hacer esto a través de los disparadores y lo dijo tipo pequeño con el poder real de la misma es que se puede especificar una lógica añadida adicional. JavaScript adicional comprueba variables para ver si se ha hecho clic en algo antes de ejecutar realmente esa transición. Entonces ese es el beneficio rial a eso. Si quisieras agregar en alguna lógica condicional ahí, Así que sigamos adelante y hablemos de líneas de tiempo. Ahora, Ahora, líneas de tiempo, si se dan cuenta de nuevo en nuestro inspector visto, si entro a la escena Inspector aquí, aquí es donde puedo agregar en líneas de tiempo adicionales. Por lo que quiero seguir adelante y crear una nueva línea de tiempo y vamos a llamar a esta línea de tiempo para y en línea de tiempo para asegurarme de dar clic en línea Showtime. Voy a seguir adelante y dar clic en registro y sólo mover esto por aquí mi círculo aquí, y eso va a tomar unos cuatro segundos. Genial. Sigamos adelante y volvamos a la línea de tiempo principal Haz clic en mostrar Línea de tiempo. Pero si golpeo, entra esa línea de tiempo en realidad no juega. Entonces volvamos a esta función de muestra y vamos a seguir adelante y decir, Start timeline nombrado y quiero doble clic en eso. Y básicamente va a querer ese nombre de línea de tiempo al que le llamamos Línea de tiempo, y puedes hacerlo en adelante o puedes hacerlo en reversa está bien, así que voy a seguir adelante y golpear guardar en vista previa. Y ahora, cuanto haga clic en eso, iniciará esa línea de tiempo. Ahora puedo volver aquí y decir: Bueno, Bueno, si esa vez, avión Linus. Entonces volvamos aquí y empecemos una línea de tiempo principal. Vamos a agregar una animación a la línea de tiempo principal, y voy a decir que esto realmente se va a mover aquí arriba, y eso va a estar en mi línea de tiempo principal. Bueno, ahora sigamos adelante, y quiero pausar que si se hace clic en esto, vamos a pausar esto en lugar de ir a la o jugar a la otra línea de tiempo. Deseo a positivos línea de tiempo actual. Entonces, vamos a deshacernos de ese código aquí atrás. Adelante y golpea. Elimina eso y vamos a hacer doble clic donde dice Pausa, Línea de tiempo lo hará qué tiempo después, vamos a hacer una pausa. Esa va a ser la línea de tiempo principal. Entonces dentro de las cotizaciones, quiero decir Línea de tiempo Principal y asegurarme de que tengo ese espacio por volver a mi visto mi nombre de línea de tiempo sí tiene ese espacio también. Entonces ahora vete. Adelante y golpea, ahorra en vista previa. Y ya ves, si hago clic en esto en medio de la animación,se pausará, se pausará, y luego puedo activarlo para que se reproduzca de nuevo si es necesario. Entonces esa es otra opción para pausar. También tenemos línea de tiempo continua, y así así lo hará. Básicamente, si es pausa, continúa la línea de tiempo si es necesario, o puede ir a un tiempo específico en la línea de tiempo. Esto es útil si quieres saltar a cierto punto. Ah, sabemos que el nombre de la línea de tiempo va a ser la línea de tiempo principal y luego vamos a saltar a , digamos, dos segundos. Y cuando golpeé la vista previa de ahorro, haga clic en este real rapido y se podía ver que tipo de salto. Si vuelvo a hacer clic en esto, se puede ver que salta de nuevo a eso a segunda línea de tiempo. Aquí es donde te metes realmente no hay una función desplegable para este tipo de cosas. Por lo que aquí es donde puedes entrar en alguna funcionalidad adicional. Entonces línea de tiempo actual nombró su tiempo actual y línea de tiempo Esto básicamente, si colocamos esto dentro de una variable y guardamos nuestro tiempo actual es igual y luego vamos hacer doble clic en esto ¿Qué? Vamos a conseguir la hora actual en la línea de tiempo principal, y ahora voy a alertar a la hora actual. Y ahora, si hago clic en esto que lo pueden ver alertas aquí. Y aquí es donde puedo decir empezar a agregar algunas funcionalidades adicionales. Bueno, si el tiempo de las corrientes es menor o igual a dos segundos, entonces cuando se haga clic en esto, vamos a alertar a la línea de tiempo no terminada. Ahora bien, si sigo adelante y golpeo la vista previa, se puede ver la línea de tiempo no termina arranques o desencadena en ese punto. Pero si luego vuelvo a hacer clic en él, realidad no pasa nada. Porque ahora el tiempo actual es de más de dos segundos dentro de esa línea de tiempo. Bueno, echemos un vistazo a la siguiente opción. Digamos que la duración de la línea de tiempo. Entonces vamos a decir, OK, OK, vamos a alertar este abrir paréntesis cercanos y luego con mi cursor en medio de mis paréntesis. Y cuando hace doble clic en estos puntos de venta, esa fue la equivocada. Vamos a decir duración para la línea de tiempo, y esto va a alertar la duración de la línea de tiempo principal. Entonces no importa cuando haga clic en que sólo va a alertar, se establece en seis puntos a la duración de esa línea de tiempo. Pero esto también me permite decir Ok, si la duración es en un momento determinado y si la hora actual es, ya sabes, terminado con la duración de lo que podría hacer alguna otra lógica también. Por lo que la dirección actual para la línea de tiempo, esto es básicamente decir que va hacia adelante está yendo hacia atrás. Eso me permite conseguir algo de información ahí, pero entonces la final es la es llana si quiero comprobar para ver si es llano, si no está jugando que ejecutar alguna lógica, pero vamos a seguir adelante y hacer doble click en eso y se puede ver documento es línea de tiempo llana y llama, Y vamos a decir en realidad vamos a decir línea de tiempo uno. Vuelve aquí y asegúrate de que ese es el nombre de la línea de tiempo a lo que los sin nombre y vamos a revisar para ver si eso es claro. Si no es que vamos a hacer otra cosa. Entonces vamos a decir, Sólo vamos a alertar que Así pongo esto entre paréntesis. ¿ Es llano? Me va a dar un verdadero o falso ahi hit, save y podías ver que dice faltas. Ahora lo que voy a hacer es en cambio, si es culpa y así sigamos adelante y coloquemos esto en una variable para que podamos trabajar con ella un poco mejor. Entonces voy a ahorrar lejana línea de tiempo a avión igual y luego vamos a decir que está jugando ahí y luego voy a decir si línea de tiempo a avión es igual a entonces lo que vamos a dio es que vamos a jugar esas líneas de tiempo cuando regrese y escuche, Comienza línea de tiempo con nombre y vamos a decir línea de tiempo a, y vamos a empezar eso en ese momento si no está jugando, así que no está jugando ahora mismo. Si sigo adelante y presiono este botón, se puede ver que se inició esa línea de tiempo. No tengo la opción para relativo seleccionado. Entonces voy a seguir adelante y sólo seleccionar ambos para que sean relativos y ahora golpear vista previa y puedes ver que empieza a animarse. Y es el relativo dondequiera que la posición fuera esa. Entonces ahora se anima automáticamente con esa línea de tiempo. Por lo que básicamente agregando esta funcionalidad de script de trabajo diferente con el con las líneas de tiempo de las escenas básicamente solo obtiene muchos más detalles, y se puede agregar más condiciones a su interior de tipo de símbolo. Entonces ese es el verdadero beneficio de poder hacer este tipo de cosas. 44. 44 Funciones reutilizables: Si has creado una función y quieres reutilizar esa función en diferentes instancias, cuando se hace clic en otra cosa y no quieres tener que reescribir el código, ¿puedes entrar. Y si esa función está dentro del recurso es carpeta aquí para que veas que tengo esto. Una muestra de funk. Uno dentro del recurso es si también quiero activar esa misma cosa cuando se hace clic en esto aquí, puedo entrar y dar click en el ratón. Las acciones bajan al clic del ratón, seleccionan el cuadro desplegable para ejecutar JavaScript, y luego puedo seleccionar el Dropbox para ejecutar este funk de muestra. Una es, eso es lo bonito es que, una vez que hayas configurado esta función, realmente podrías activar esa función de cualquier manera. Se puede activar esa función cuando se arrastra. Se puede activar cuando se pasa el ratón, puede activar cuando se toca a. Puedes desencadenar cuando es cuando eso se deslizó y cosas diferentes como esa puedes simplemente ejecutar esa misma función. Pero esa es solo una forma sencilla de decir básicamente OK, una vez que haya creado esta función, voy a activar esa misma función varias veces diferentes 45. 45: una de las cosas bonitas de dos multi guisantes puedes traer otras bibliotecas JavaScript externas desde cualquier lugar básicamente desde calcetín verde de J Query y otros elementos que quieras traer y usar esa funcionalidad. Eso es parte de esa biblioteca JavaScript dentro. Se trata de un multi fosos. Una característica muy agradable dedo del pie. ¿ Tengo ganas de mostrarte cómo hacer eso? Entonces voy a traer una de las estándar, que es básicamente J query. Yo quiero ir. Adelante y ven aquí y fui a j query dot com y luego a la sección de descargas. Y esto me permite descargar. Y seleccioné la descarga. Producción comprimida Jay Query 3.1 punto uno. Si es una posterior, esto seguirá funcionando. Si es una anterior , seguirá funcionando también. Pero eso lo descargué a mi escritorio. Por lo que tengo este Jake Preocupación 3.1 punto uno hombres dot Js. Entonces voy a entrar aquí y volver al tipo tumulto y dentro de tipo tumulto vamos a entrar en el recurso es panel. Vamos a hacer clic en este icono más y vamos a decir add y JavaScript o Add file y vamos a entrar aquí seleccionar al J. Corey Mobile una estrella, no Jaqui Mobile, solo regular Jake Preocupación. Y ahora que básicamente se ha sumado a nuestro recurso es. Pero si selecciono en esto, notarás que dice incluir en Document Head. Esto significa que se va Teoh adjuntar esto. Si previsualizo esto, sigamos adelante y veamos esto. Y cuando haga clic derecho, vaya a inspeccionar elementos cuando llegue a la cabeza y notará aquí mismo tenemos un guión que está adjunto que va al índice de punto hiper o Hypo Resource es slash. Y luego está RJ Query Mobile uno. Al seleccionar eso básicamente y asegurarnos de que esto se seleccione para incluir en el cabezal del documento, ahora podemos usar esa función Jake Worry en cualquiera o cómo la referenciamos para objetos en cualquier ubicación, cualquier script Java que usamos. Entonces voy a entrar aquí, y todavía tengo mi muestra funk uno aquí, y voy a seguir adelante y usar la forma estándar de referenciar y objeto en la consulta J. Si recuerdas, este círculo tiene un i d. Le dimos un yo d de círculo. Entonces en lugar de referirlo como, um bombo lo hace, vamos a seguir adelante y referenciarlo como hace Jaqui si ya estás familiarizado con esto . Entonces vamos a dar un signo de dólar, abrir paréntesis de cierre y luego dentro de cotizaciones. Vamos a seguir adelante y hacer una etiqueta hash, que es este es un I d con el que estamos hablando. Si fuera una clase que agregamos, agregaríamos el punto Pero en este caso, vamos a decir hashtag y luego vamos a decir circle ese es el nombre del I D. Vamos a hacer un simple escondite de puntos que es una función de cantera J para ocultar. Eso es ah, eso es elemento. Básicamente, el objeto cualquiera que tenga que yo d. Así que voy a seguir adelante y golpear guardar en vista previa, y en cuanto haga clic en esto, notarás que el círculo ya se ha ido. Y así si quisiera, podría hacer un ta ir a esconderse. Puedo hacer un show que podría hacer si es visible o no, y así puedo hacer lo que sea que J. Corey funciones con las que ya estoy familiarizado dentro de tipo tumulto. Y así eso suma mucha funcionalidad adicional. Algunas de mis bibliotecas JavaScript favoritas son que tienes calcetín verde. Tienes a Jake cansado y hay un montón de outs por ahí. Pero esos son mi tipo de favorito de los dos primeros que me gusta mucho. Entonces así es como usas Jake Preocupación dentro de tipo tamal o cualquier biblioteca JavaScript adicional y lo dijo tipo pequeño. 46. 46 Variables globales: Ahora vamos a estar hablando de variables globales porque en este momento ya lo hemos hecho en videos anteriores donde hemos creado dentro de nuestro JavaScript Ah, variable local, Same var. Vamos a seguir adelante y digamos Numb equivale a cinco. Y ahí vamos que crea, ah, variable llamada numb, y ponemos un valor a cinco. Pero el problema es que si ejecuto otra función en alguna parte, en realidad no va a poder acceder a esta variable. Entonces si entro aquí y digamos, Bueno, Bueno, esa función se va a ejecutar aquí. Entonces vamos a alertar a este entumecido aquí. Y si ejecuto esa función, se puede ver alerta cinco grandes. Eso funciona. Pero intentemos acceder a ese mismo desde una nueva función. Entonces cuando entres en mis acciones y en realidad voy a crear una nueva función y vamos a volver a llamar a esta alerta, depende de ti. Qué, ahí lo nombra. Pero sigamos adelante y solo tratemos de alertas. Cinco. Ya que ya ha sido creado o alerta, entumecido por lo que va a funcionar. Se ha creado la variable. No obstante, cuando hago clic en el círculo, pasa nada porque no sabe qué alertar. Y así vamos a seguir adelante y entrar. Y en esta función de muestra, vamos a hacer una cosa al entumecido. En realidad vamos a decir punto de ventana Numb equivale a cinco. Y ahora, si entro aquí y doy clic en esto, dirá cinco allá. Pero ahora, si hago clic en el círculo, ahorrará cinco también. Entonces, básicamente, lo que estoy haciendo es sólo decir, Hey, ventana, que es toda la ventana o la ventana de nivel superior. Vamos a crear una variable llamada Numb, y va a igualar cinco y como la he creado allí una vez, trato de volver a usarla porque la he creado ahí. Una vez que intento volver a usarlo, puedo si solo quiero tenerlo al principio, en lugar de tener una función que se ejecute tan pronto como haga clic. Podría entrar aquí yendo a mi escena, inspector y bajar aquí y dar click en carga de escena. Podemos seguir adelante y ejecutar una función que crea las variables que vamos a utilizar a lo largo de todas las páginas o a lo largo de las diferentes escenas y todo o las funciones de diferencia y cosas así Eso es realmente todo lo que necesitas hacer para una variable global, sólo diciendo ventana punto numb equivale a cinco, y luego una vez que hayas creado eso, puedes usar esa variable en cualquier función, cualquier ubicación dentro de tu proyecto. 47. 47 Publicar tu proyecto: todo bien. Entonces, cuando estés listo para llevar esto a un sitio web en algún lugar, no puedes simplemente llevar el archivo del proyecto con el que hemos estado trabajando y subirlo a un sitio web en algún lugar. Necesitas realmente publicarlo en, uh, uh, archivo html así como sus archivos de apoyo, y luego tomar eso y subirlo a una muestra o a un sitio web en algún lugar. Y entonces tus usuarios navegarán a ese sitio web o puedes colocar el contenido en algún lugar, como dentro de un curso de e-learning o algo así. Es sólo que básicamente, tiene que ser exportado hacia fuera. Este archivo de proyecto es sólo para edición. Sí quieres guardarlo para futuras ediciones más adelante, pero básicamente esta bilis misma no se puede previsualizar cuando alguien no tiene el bombo, tumulto o ese pequeño tipo de proyecto. Entonces para hacer eso es una vez que tengas este proyecto, solo sigamos adelante. Simplemente tengo un proyecto en blanco de muestra. Voy a crear algún contenido, y luego lo voy a exportar por aquí. Entonces voy a golpear, guardar, salir a archivar y bajar a exportar como HTML cinco. Ahora puedo ir a exportar su película si no tengo elementos interactivos donde botón en el que se hace clic o algo con lo que se tiene que interactuar, y es sólo una animación. Entonces realmente puedo exportarlo como video animado GIF o secuencia PNG. Y así, si querías conseguir algo simplemente rápido como un GIF animado por algo así, entonces en realidad puedes hacer animadas dentro de tipo tumulto y exportarlo como regalo o un video o algo así. Pero en este caso, lo voy a exportar como html cinco. Vamos a hablar de las diferentes opciones en el diferente video. Pero por ahora, sólo voy a seguir adelante y llegar a Folder, y vamos a asegurarnos de que estas opciones aire seleccionado donde se guardará en archivo html. Se incluirán los contenidos de texto para los motores de búsqueda, y por lo que podría ser buscada por los diferentes por la diferencia Motores web como Google y otras cosas. Y luego voy a crear esto dentro de una carpeta adjunta. Si no tengo eso dentro de una carpeta adjunta, lo que sucederá es que en realidad pagará colocar todos los archivos a un lado de mi o en mi escritorio , y haría mi escritorio muy abarrotado. Entonces quiero asegurarme de que esto esté incluido y luego voy a seguir adelante y pegarle a Save y ya está. Entonces lo que pasó si vuelvo aquí es que se creó esta carpeta para mí llamada Sample y si hago doble clic en ella, ahora va a decir muestra ese archivo HTML y luego tengo mi muestra. Ese recurso de bombo está dentro de aquí, que tiene mis archivos GIF. Tiene mis archivos JavaScript, cualquier archivo adjunto que hice. Si me gustara un adjunto de consulta J o algo así, tendría eso dentro de ahí. Ahora, lo bueno de esto es que en realidad puedo entrar, y puedo actualizar el código más tarde. Si quisiera abrir esto dentro de un editor de texto o algo así. Si nos he jalado dentro de como, texto sublime, te darás cuenta. Aquí está mi editor HTML. Tengo mi CSS justo aquí y luego tengo este contenedor así que hablaremos de por qué este contenedor es útil en un video posterior. Pero por ahora, esto es al menos donde realmente puedes tomar este, um, contenedor. O podrías llegar al archivo HTML y puedes actualizarlo más tarde. Entonces ese es el archivo del paquete. Tomarías ambos archivos subidos a un sitio web en algún lugar y luego apuntarías a tus usuarios a ese sitio web, y luego pueden experimentar la interacción que creaste dentro de tipo tumulto. 48. 48 Importar la himbres: ¿ ahora qué? Si realmente quieres tomar tu contenido, ¿quieres incrustarlo dentro de algún otro archivo HTML? Entonces quieres tener algún otro tipo de envoltura o algo así, y luego colocar esto dentro de ese archivo HTML. Entonces lo que vamos a hacer es que en realidad vamos a tirar hacia arriba en texto sublime, que es un editor de texto, y voy a seguir adelante y voy a salvar A como si estuviera creando un sitio web, un sitio web estándar. Voy a crear una carpeta, y solo voy a llamar a este ejemplo, y luego dentro de ahí, voy a crear un archivo html index dot y luego voy a empezar a crear, solo, como muestra html hit, ingrese sitios web de muestra ahora dentro de la etiqueta de cuerpo. Simplemente voy a empezar a crear algunos elementos diferentes. 1er 1 Solo voy a crear un párrafo. Esto es en ejemplo, Riggio, tal vez como un rumbo también. Y ahí vamos. Entonces si fuera a seguir adelante y previsualizar esto ahora mismo, quiero subir al ejemplo. Haga doble clic en archivo html index dot, y voy a traer esto por aquí, y se puede ver que tiene mi HTML estándar y mi edad a mi párrafo también. Pero no tiene ningún tipo de estilo, Así que no vamos a hablar de esto. No es una clase sobre CSS ni nada por el estilo. Entonces solo vamos a volver al texto sublime y te voy a mostrar, en realidad, realidad, cómo tomar el contenido de tu proyecto tipo tumulto y colocarlo dentro de cualquier otro HTML . Entonces voy a volver aquí y sólo voy a ocultar todo, y vamos a tomar el proyecto de muestra que se exportó de bombo, y quiero agarrar el punto de muestra Hype resource is folder y voy a copiar eso en la ubicación de mi sitio web. Y así donde quiera que esté tu sitio web, esta carpeta al menos necesita estar dentro de ahí. También voy a abrir la muestra ese archivo html dentro de texto sublime, y también voy a asegurarme de que ese es mi archivo de índice se abra también. Entonces vamos a seguir adelante y sólo una especie de redimensionar estos dos. Y cuando termine Regulus. Entonces estamos en el mismo proyecto. Ahí vamos. Entonces ahora tengo mi html de muestra y mi índice de punto html. Ahora quiero que el proyecto de bombo para jugar se coloque dentro de este índice punto html. Entonces quiero entrar en el archivo HTML que se envuelve dentro de cuando se produjo el tipo de tumulto . Y voy a seguir adelante y copiar este código aquí mismo. Y te dice, copiaron exactamente estas líneas de código en tus documentos. Y aquí es donde el final el ejemplar va a seguir adelante y copiar eso. Ven a mi índice ese archivo html. Yo quiero bajar un par de líneas y luego solo golpear pegar ahí. Ahora ese va a ser el contenido de mi archivo HTML, mi proyecto de bombo. Básicamente, y eso es todo lo que tengo que hacer si vuelvo a este índice ese archivo HTML, que era mi nuevo sitio web. Tengo punto pegado en el bombo de muestra Resource is folder, y también he agregado el archivo HTML ese fragmento de código en el archivo html punto índice. Ahora, si hago doble clic en él, notaste que mi archivo HTML normal sigue ahí, y luego tengo mi proyecto de bombo justo debajo de él por lo que automáticamente toma apuestas colocadas dentro del otro contenido también. Entonces la otra opción que tienes dentro de dos multi cabreado para exportar como un, um, um, archivo y O Un archivo m es en realidad un básicamente un gestor de proyectos de adobe envuelto o archivo adobe . Ese es un solo archivo que puedes importar dentro de Dreamweaver, donde puedes importar dentro de Si estás usando adobe cautivate o algo así, es solo adobes forma de agacharlo y luego importarlo a sus sitios web o a su estructura, básicamente, y así puedes usar thes archivos externos y luego usarla y publicarla de esa manera. Entonces eso es sólo algo a tener en cuenta. En el siguiente video, vamos a estar hablando de iBooks y cómo tomar realmente el contenido que construiste y luego exportaste cuatro iBooks y cómo importar a iBooks y usarlo dentro de iBooks. Autor 49. 49 iBooks Autor: una de las cosas bonitas que hace el tipo pequeño para su uso. Permite exportar contenido fácilmente Al autor de iBooks Ahora, iBooks author es una aplicación de Apple que permite a profesores o instructores crear sus propios libros de texto. Pero para ir más allá de lo normal sólo tipo de página Turner y le permite crear elementos interactivos , cuestionarios interactivos sobre insertar otras cosas como videos o imágenes o archivos de audio y cosas dedo del pie para traer el libro en sí Toe life. Ahora una cosa agradable a punto de mull tipo es que el iBooks Author te permite importar archivos HTML y podrías construir tus propios archivos HTML. , Pero para conseguirlo dentro de iBooks author, necesitarías saber cómo comprimirlo. También necesitas tener algunos archivos extra. Es necesario saber cómo tomar una captura de pantalla para y colocarla en un lugar determinado y nombrar también en una cosa determinada. Entonces hay mucho que tiene que entrar en crear ese es y luego empaquetarlo para que se pudiera trabajar para que pudiera importarse dentro de ah ibooks author. Y entonces qué bombo hace por uso cuando se crea esta interacción. Puedes exportarlo y ya se lo cerró para ti, y solo podrías importarlo justo a mis libros por ahí. Por lo que es una buena manera de crear las interacciones dentro. Yo libro por ahí y exporto cantidad y los uso por dentro. iBooks. Autor. Por lo que tengo esta interacción de muestra aquí. En realidad no es mucho es sólo una animación. Entonces déjame seguir adelante y arrastrar esto, y tengo estas animaciones que tipo de animaciones animan de un lado del escenario al otro lado del escenario, y cuando se hace clic en uno, salta al otro escenario. Entonces otra vez, no está pasando mucho ahí, pero al menos nos dará una idea de cómo tomar un archivo de contenido que hemos hecho dentro de tipo tumulto y exportarlo antes de que los autores de libro. Voy a seguir adelante, seguir adelante y subir al archivo, bajar a exportar como html cinco y luego venir a dashboard o iBooks, widget de autor. Entonces si hago clic en eso, voy a seguir adelante y ponerle nombre. Lo que sea. Quiero guardarlo en mi escritorio y luego dar clic en seguro. Eso es todo. Si vengo a mi escritorio, déjame seguir adelante y esconder eso. Si vengo a mi escritorio. Este es ahora mi autor de iBooks. Widget listo. También es el tablero. Si utilizas tu dashboard todo para su Mac, en realidad puedes instalar esto como una interacción dentro de tu panel. Personalmente no uso mucho el tablero, así que no voy a hacer eso ahora mismo, pero este archivo de paquete está listo para que lo importe justo dentro de iBooks. Autor. Entonces voy a sacar hacia arriba el autor de iBooks, y aún no tengo mucho creado en este libro de autor de iBooks, pero voy a llegar a widgets, y voy a bajar a donde dice html. Y en cuanto hago click en HTML, me permite colocar este archivo HTML en la ubicación que quería ser para el libro. Y luego voy a decir, juega en la página juega a pantalla completa o juega automáticamente. Y así ahora, básicamente, estas eran sólo las diferentes opciones que puedo elegir. Es como cualquier aplicación de Mac. Tienes tu ventana de inspector aquí, y luego voy a ir al widget html cinco, clic en elegir y luego mover eso un poco. Ahora puedo elegir ese html cinco, ¿cuál es este archivo de paquete? Haga clic en insertar. Y se necesita una captura de pantalla para mí automáticamente dentro de un tipo de templo. Y esa es la captura de pantalla que se acostumbra. Por lo que el alumno en realidad no verá cuando estén mirando esto dentro de sus iBooks. Eso no verá esta interacción hasta que entren en ella y tengan que tocarla para entrar realmente en ella. Entonces voy a seguir adelante y previsualizar esto, y si tuviera un iPad enchufado, en realidad me daría la opción de seleccionar mi iPad. Y todo lo que tengo que hacer es tirar hacia arriba por libros en mi iPad. Pero en este caso, voy a seguir adelante y basta con dar click en vista previa aquí y luego dar clic. OK, sigamos adelante y solo cerremos eso por ahora Y ahora puedo expandir esto y ahí está mi animación que creé y lo configuré tipo de símbolo su animación. Y también es interactivo, así que puedo usar esto para colocarlo dentro de iBooks author y hacer que el contenido interactivo ayude a los alumnos a interactuar un poco más y a aprender los conceptos con los que están trabajando . Ah, y puedes usar el tipo de tumulto para poder crear este tipo de interacciones e insertarlas dentro de iBooks author. 50. 50 Inspector de documentos: ahora en este video están en esta sección. Vamos a estar hablando de los diferentes paneles de inspector y de las diferentes opciones que puedes usar en las que realmente no hemos podido sumergirnos profundamente. Entonces, básicamente vamos a hablar de algunas de las diferentes opciones. Entonces por el lado derecho, solo asegúrate de que tus inspectores mostrando en el primer video esta sección vamos a estar hablando del inspector de documentos. Entonces en este momento, este título de página HTML se genera automáticamente, Pero puedes ir adelante y sobrescribir eso solo escribiendo algún título de página. El resto de opciones de pareja se puede mostrar indicador de carga ya que esto realmente se está cargando. No lo sé. Podría ser demasiado rápido para mostrarlo localmente aquí, pero como eso se está cargando, en realidad mostrará una barra de carga como los videos cargando o algo así. Si querías que eso sucediera, entonces puedes seguir adelante y dar click en eso, hacer que el fondo sea transparente. Entonces si hay un fondo, entonces en realidad puedes hacer eso transparente. Vamos a seguir adelante y tratar de cambiar el color y ver si esto funciona aquí. Si sigo adelante y golpeo la vista previa, notarás que llena toda la pantalla. Pero si hago clic en un fondo de maquillaje transparente, entonces te das cuenta de que no llena toda la pantalla y Onley básicamente el fondo en sí, aunque sea verde, va a ser transparente. Entonces si colocas esto en un sitio web en algún lugar, eso no va a tener antecedentes. Cualquiera que sea el fondo que usaste en ese sitio web, bueno, entonces se lleva a cabo. Y así es sólo un básicamente cualquier cosa que inserte aquí seguirá estando ahí. Y pude ver que poner el fondo en sí no va a tener ningún efecto. Y va a ocupar el lugar de dondequiera que esté donde se coloque el contenido. Entonces esa es sólo otra opción. Van a volver aquí y cambiar esto de nuevo a un color blanco allá. ¿ De acuerdo? Y ahora vamos a volver a mi documento. Specter, lo siguiente es crear efectivo de aplicación fuera de línea. Entonces si esto básicamente se va a cobrar, o si el usuario va a mirar este sitio web fuera de línea más tarde, entonces quieres crear ese efectivo y así puede ahorrar donde estaban a tomar y guardar diferentes informaciones al respecto. Si quisiera meterme en la cabeza. HTML. Esto sí me permite entrar aquí, y en realidad podría adjuntar un archivo de script de trabajo que está usando un cdn. Entonces si quiero, un cdn es básicamente solo un hosting para diferentes bibliotecas JavaScript. Y así si quería colocar eso dentro de aquí dentro de la etiqueta de cabeza o si quería adjuntar mi propio CSS, puedo hacer eso dentro de este archivo de cabeza. También puedes hacerlo dentro del recurso se dobla como aprendimos. Pero si querías meterte directamente en ese archivo html de cabeza, este es el lugar para hacerlo. El siguiente es las opciones avanzadas. Proteja sus enlaces externos y o sus estilos externos, y por lo tanto los usuarios no pueden llegar a. Básicamente lo va a modificar una especie de cambio de una manera que esté encriptada. Ah usado Web kick graphics aceleración. Por lo que cualquier navegador que utilice Web kit esto utilizará la aceleración gráfica para que desempeñe un poco mejor posición con CSS top e left. Entonces en lugar de posicionarse con la X e Y, va a usar los valores superior e izquierdo en su lugar. Y así opciones móviles Básicamente el puerto de vista con va a ser el documento con o lo puedes hacer en base al dispositivo con o al dispositivo. Ah, bombo. Ahora, el documento con es básicamente lo que estableces como el ajuste que aquí mismo van a ser 600. Pero si vas a documentar con, básicamente va a establecer el tamaño del puerto de vista en esa escala inicial. Esto es más para, como, si se va a usar para móviles, sí quieres asegurarte de que eso esté seleccionado porque eso asegurará que se renderiza en los teléfonos de alta resolución que renderiza correctamente. Y esto es que permite al usuario escalar si quieres que puedan jubilarse o no. Si no quieres que puedan pellizcar, simplemente desmarque eso. Ahora esto sí me da una advertencia diciendo Hey on android. Prevenir el escalado del usuario no es cuando se aparece que en pan de jengibre impide que el escalado del usuario no se admite. Entonces los panes de jengibre un poco viejos, así que realmente no importa. Ah, use eventos táctiles muestran en el clic del ratón. Básicamente va a decir Ok si tengo un click, también va a ser un toque. Si desmarco eso, te darás cuenta de que normalmente dice like o tap aquí. Por lo que dice en el clic del ratón. No tiene esa opción de tap, así que en realidad no va a ser viable en un dispositivo móvil, así que realmente no veo por qué no usar eso. Entonces si selecciono que puedes ver aquí es tap, touch, start, touch, end y cosas así. Y luego aquí mismo, pantalla de inicio Aplicación web. Básicamente, esto me permite. Si quería guardar esto en la pantalla de inicio, puedo establecer la barra de estado. Si se vuelve a lanzar, puedo configurar la barra de estado en translúcida o negra o predeterminada, Y así cuando vuelva a abrir la pantalla a pantalla completa, es que va a ser nos vamos a deshacer de la barra de estado o cambiar el color y luego también muestran advertencias de compatibilidad E compatibles con el navegador. Esto si quiero ajustarme a algunos de los navegadores y decir, OK, OK, realmente no voy a apoyar Mac Safari en nada anterior a 6.0 punto cinco, y así que no me muestres esas advertencias. Eso no va a funcionar en su misma cosa con i e Es si realmente no vas a apoyar nada, porque Microsoft realmente ya no soporta yo e ocho. Entonces si realmente no estás preocupado por eso, pues bueno, ya no me muestres esas advertencias. Si solo vas a apoyar, 11 o algo así o tienes 10 y luego también ibooks autor, Justo lo que sea. El último ISS. Um, entonces te dará esas advertencias si no va a funcionar en iBooks author para que ese aire solo ajustes para el documento en su conjunto esos aires, las diferentes opciones que puedes elegir y puedes comprobar estas apagado y encendido dentro del documento, Inspector. 51. 51 inspector de escenas: Está bien. El siguiente panel inspector. Es el inspector de escena. Entonces si me desplazo hasta aquí y subo a la escena, Inspector, ya hemos trabajado mucho con la escena, inspector. Entonces no voy a cubrir todo, porque ya hablamos de escalar. Hablamos de sumar nuevos puntos de descanso. Trabajamos mucho con líneas de tiempo y todo. Pero un par de cosas a tener en cuenta, aunque que realmente no nos sumergimos en lo profundo es que puedes establecer el tamaño inicial de la escena al que quieras. Entonces si vas a apuntar inicialmente a sitios web ah, grandes o medianos, entonces podrías seleccionar eso más y va automáticamente Y cuando me aleje aquí, pero es automáticamente lo van a poner en el 1000 por 5 40 Y eso va para apuntar ese es dispositivo. O si quería apuntar al paisaje del iPad, entonces va a configurar el 10 24 por 7 68 y va a establecer automáticamente el tamaño predeterminado de eso O si me desplazo hacia atrás y vuelvo al valor predeterminado y tiene 600 por 400. Este es el tamaño predeterminado con el que comienza cualquier aplicación de tipo tumulto, pero podría entrar aquí y ajustarme realmente a lo que quisiera para el tamaño predeterminado otra vez. Ten en cuenta que puedes agregar nuevos puntos de ruptura y diferentes diseños basados en el tamaño que quieras ahí. Pero inicialmente tienes que tener un tamaño establecido para empezar. Otro par de cosas que quiero mencionar aquí está en carga de escena. Si quería ejecutar algún script Java y quería crear algunas variables, típicamente las variables globales que puede estar utilizando es mejor hacerlo en la carga de escena. Y así si hago clic en este icono más, voy a entrar aquí y ejecutar JavaScript. Vamos a crear una nueva función, y voy a llamar a esta función Solo carga variables. Y una de las cosas bonitas que me gusta de poder simplemente tener diferentes funciones aquí y allá está puedo separar mi código. En lugar de tener un archivo JavaScript grande y largo. A mí me gusta separarme en diferentes secciones y solo usar esas en ciertos momentos. Entonces aquí es donde entraría y haría los puntos de la ventana. Numb equivale a cinco. El valor inicial de eso. Y ahora va a ser una variable global que se puede usar casi en cualquier lugar de cualquier, uh, uh, cualquier ubicación, cualquier función de JavaScript que se llame más adelante. Podría simplemente tener esta función tan pronto como se cargue que luego puedo usar esa variable en diferentes archivos JavaScript o funciones de Jim Duda JavaScript o algo así . Y así también, si quería algo Teoh descargar o cambiar cuando cambie Santos Aiken hacer eso. Mantén el descanso. Si hago clic en Tecla presionada, me permite saltar a una escena determinada. Me permite ir a ah, ¿cómo puedo cambiar eso en base a las acciones que hemos aprendido? Pero esto es básicamente solo tener en cuenta esta es cualquier tecla presionada. Si quisieras crear un comportamiento personalizado, podrías hacer eso, Um, pero ahora mismo, solo tienes que pulsar hacia abajo, aguantar tecla tecla tecla o lo siento, Deslizar hacia la izquierda, deslizar hacia la derecha. Y eso es simplemente deslizarse en cualquier lugar. Si desliza alguna en cualquier ubicación o algo por el estilo, va a hacer algún tipo de acción o algo así, y luego la última es arrastrar al arrastrar. Se va a hacer alguna ubicación o hacer algo de acción también. Si arrastro un determinado elemento, puedo controlar la línea de tiempo o puedo eliminar Lo sentimos, ejecutar script de trabajo o hacer algo. Por lo que ahora el arrastre. Si arrastro un elemento Ah, y tú controlas la línea de tiempo por Dragón. Ya nos enteramos de eso en un video anterior. Entonces si quisieras sumergirte en eso, te recomiendo volver a ese video en algunas de nuestras secciones anteriores. Pero ese es el inspector de escena que realmente es el más. lo que estarás trabajando es con los tamaños agregando diseños desnudos y luego agregando código en escena o funcionalidad vista o deslizamientos o algo similar para navegar de una escena a otra. 52. 52 Inspector de métricas: en el siguiente video, vamos a estar hablando de las métricas, Inspector. Ahora las métricas, inspector, ya hemos trabajado con los lotes. Por lo que hemos hecho la colocación. Hemos hecho el ancho de la báscula. También hemos hecho los diseños flexibles y no hemos hecho tanto de la rotación ni del origen de la transformación ni del desbordamiento de contenido. Entonces voy a hablar un poco de eso y en esta sección, para que sepas qué puedes hacer con esos? Por lo que en primer lugar el flotador de contenido, permite definir un área si va más allá de cierto elemento o cierto ancho y altura, ya que ¿cómo se controla? Y así, en este caso, voy a entrar aquí y sólo para mostrarte, voy a dar clic en estos elementos de texto aquí, y voy a venir a agarrar algún texto de Laura Ipsen y alguien a quien ya tengo esto arriba. Sólo voy a agarrar un párrafo aquí, voy a copiar eso, entrar en tipo tumulto, y luego simplemente pegar eso ahí. Entonces vamos a redimensionar esto un poco más y voy a ir con este seleccionado ven a las métricas como el cuadro desplegable, y aquí es donde tengo la opción para barras de desplazamiento ocultas o autos, Crowbars, ardilla auto barras de desplazamiento es que sólo indicará si es más largo que un área determinada que creará automáticamente ese desplazamiento. Pero te das cuenta aquí mismo Este texto en realidad va más allá de lo que esta anchura y altura es para que pueda arreglarlo y, ya sabes, un par de maneras diferentes en realidad puedo entrar aquí y ajustar el ancho y la altura si quería. Entonces la parte superior en la altura justo aquí, si quisiera ajustar eso, y entonces tomaría toda la pantalla, puedo ajustar esto, Pero realmente, lo que quiero hacer es que quiero crear solo un cierto área para ser el cuadro de texto, y cualquier cosa más allá de eso es sólo una especie de scroll herbal. Entonces si estás en un ipad, puedes simplemente bajar un poco para ver el resto del texto. Y ahora mismo, con este desbordamiento de contenido establecido como visible, ese no va a ser el caso. Por lo que en realidad necesito seleccionar ya sea barras de desplazamiento automático o barras de ardilla, y eso definirá cualquier cosa más allá de ese punto. El ancho o el bombo se va Teoh ser creado con las barras de desplazamiento. Yo quiero seguir adelante y golpear save en vista previa y notarás mi tipo de corte de texas. Pero eso está bien, porque eso puede desplazarse hacia abajo. Y si estás en un iPad, puedes usar el dedo para una especie de deslizar hacia abajo también. No sólo se puede hacer eso con texto, sino que también se puede hacer con elementos agrupados. Entonces voy a seguir adelante y crear un par de artículos diferentes. Entonces voy a crear un rectángulo, entrar y crea un círculo aquí. Y luego voy a entrar y crear un elemento de texto. Déjame realmente crear ese elemento de texto más adelante. Sigamos adelante y solo seleccionemos estos ítems. Estoy presionando el botón de turno. Voy a dar click derecho y luego ir al grupo. Y así ahora en mi línea de tiempo, vamos a expandir eso un poco más para que veas que tiene una carpeta con el grupo dentro de ahí. Con ese grupo seleccionado, voy a seguir adelante y seleccionar algún texto y asegurarme de que el Texas realmente se colocó dentro del grupo y voy a seguir adelante y mover este texto un poco, pero voy a tener un exterior del grupo cuando lo tengamos por debajo del grupo. Ahora, con el grupo seleccionado, voy a volver al contenido, desbordar y seleccionar las barras de desplazamiento, y ahora no es visible ahí. Pero si sigo adelante y golpeo la vista previa, puedo desplazarme hacia abajo y ver cualquiera que sea el texto ahí abajo. Por lo que eso permite definir un grupo para encontrar ciertos elementos y luego crear una barra de desplazamiento para ver los elementos si van más allá del ancho y alto que realmente has definido. Y así una de las cosas de las que quiero hablar es de que quiero hablar de la rotación y del origen de la transformación. Pero ese es el contenido visible. Uno adelante y golpeó la delantera aquí. Voy a venir y luego inserta otro rectángulo, y cuando empiezo a rotar, te darás cuenta en cuanto empiece, puedes usar el ángulo de Z. también puedo usar el ángulo de por qué una X hablará de esos más tarde, pero notarás que ese tipo de rota en el medio. Este Punto Central, como estoy girando, está directamente en el medio. Eso se debe a que el origen transformado aquí. El desplazamiento X en el offset estadounidense blanco en 50 50 pone ese desplazamiento. O ahí es donde el punto medio transformado Punto Medio está directamente en el medio mismo. Si quisiera que esto fuera justo en una esquina, podría decir, OK, OK, 100% y luego ir a compensar ¿Por qué? ¿ 100%? Y entonces, ¿qué pasará? Tan pronto como empiezo a rotar esto, notarás que está en la esquina superior derecha ahí. Porque no sólo está la X por ahí, sino que el por qué está por ahí y asumió como la giro gira en la esquina. Simplemente depende de cómo quieras realmente transformar o animar estos diferentes objetos. Si yo estaba animando la rotación, así es como anima. No en el medio, pero animaría en la esquina. Depende de ti cómo quieres que eso rote. Simplemente depende de qué objeto estés trabajando en realidad dentro de tipo tumulto. Ahora, otra cosa de la que quiero hablar es de tres. ¿ Por qué rotación? lo que notan podría conseguir algunos tres efectos D y puedo obtener algunos efectos X s 03 d con los valores X e Y tanto. Pero una cosa a tener en cuenta es que hay muchos navegadores que no soportan eso. Por lo que solo depende si estás segmentando y son en su mayoría los navegadores más antiguos. Pero si estás apuntando a los navegadores más antiguos por alguna razón, como yo e ocho o nueve, entonces quieres mantenerte alejado de esos. Si estás apuntando a los nuevos navegadores más recientes, como Chrome o safari o algo así, entonces puedes seguir adelante y usar esos. Ahí sólo hay algo que tener en cuenta. Pero así fue como usaste el inspector de métricas, dentro de tipo tumulto. 53. 53 Inspector de elementos: De acuerdo, entonces ahora vamos a estar hablando de esta forma, inspector. Ahora esta forma o el elemento esperar, er también lo llamo la forma Inspector porque tiene las formas para el icono. Pero este es el elemento esperar er, y esto resaltará en cuanto tenga algún tipo de elementos seleccionados, y me da las diferentes opciones para ese elemento. Entonces voy a entrar e insertar un botón, por ejemplo, y las opciones para ese botón están seleccionadas cuando realmente tengo ese botón seleccionado, o vuelve a la forma, y las opciones para eso están seleccionadas aquí también. Hay un par de opciones diferentes. Puedes seleccionar el cuadro desplegable aquí para que el fondo sea un color sólido, seleccionando el color para elegir qué color deseas. O podrías hacer ingredientes también, cuales tendrán dos colores. Y puedes ajustar el ángulo de ese radiante en lo que quieras. O también puedes insertar una imagen y hacer que esa imagen sea tu fondo, un fondo repetido o algo así. Entonces en los botones, lo mismo. Podrás tener InTs Grady para tu botón. Si lo quisieras. Podrías tener una imagen para tu botón. Lo que sea que necesites para dio en eso si seleccionas ninguno como la sensación, solo tendrá el contorno. Por lo que te diste cuenta. Ahora tengo el justo el contorno mismo tipo de ese hueco. Si quisiera cambiar el color, podemos cambiar este dedo blanco aquí. Y si mi fondo era de un color más oscuro ese es de color hueco ahí. Te permite cambiar eso y luego puedo entrar en el texto y cambiar el color ahí también . Ahora un par de cosas más, algo adelante y simplemente borra el botón. Por ahora, solo trabajemos con la forma va a darle la vuelta a solo un color sólido y un par cosas que podemos cambiar en la siguiente sección es el borde. Para que podamos ajustar el borde con podemos ajustar el color del borde. También podemos ajustar el estilo de borde. Por lo que hemos punteado grupo de tablero sus configuraciones típicas allí. Entonces no voy a repasar todos ellos. Si quisiera deshacerme de las fronteras y sólo podría poner eso a cero y ahora la frontera ya no está ahí. Si quisiera ajustar el radio, puedo subir aquí y ajustar el radio de ese borde también. Para que puedas ver. Y ahora tenemos las esquinas redondeadas. Entonces voy a entrar. Y si quería ajustar el radio sólo para una esquina, puedo seleccionar en esta zona la esquina de una y justo arriba eso un poco más también. Por lo que ahora consigo una buena forma. Todavía tengo las esquinas redondeadas en las otras porque cuando ajusté esto en el medio, tenía todas estas opciones selectas se ajustan esto en el medio. Entonces básicamente los ajusté a todos. Pero si selecciono solo uno de ellos, entonces solo estoy seleccionando uno de ellos. Puedo definir ese radio sólo para uno específico. Entonces voy a ir manos así en el medio aquí. Voy a llegar a la siguiente sección, que es visibilidad. Esta habilidad me permite ajustar las dos cosas en primer lugar, la opacidad si quería hacer esto transparente, pero también la pantalla. Por lo que la pantalla en sí es una de las propiedades en la animación. Si te desplazas hacia abajo, puedes bajar y agregar la pantalla para que realmente puedas en tu línea de tiempo, apagar y encender las cosas a medida que va creciendo. Por alguna razón, si querías no mostrar desde el principio, puedo seleccionar un marco clave, venir a mostrar y seleccionar eso en oculto. Entonces cuando llegue a cuatro segundos. Si solo quería aparecer que puedo entrar aquí, selecciona el marco clave y luego selecciona esta espalda demasiado visible. A pesar de que parece que tiene una animación, realmente no es la docena de pantalla enemiga. Eso es más de la opacidad que animará si pudiera ver justo a continuación. Aquí tenemos la opacidad, pero la pantalla no anime. Tan pronto como golpea el siguiente fotograma clave, aparece, Y así también puedes usar eso. Si estás usando JavaScript, puedes cambiar el elemento de visualización, y puedes cambiar eso a visible u oculto y ajustarlo según sea necesario allí. Pero esa es la siguiente sección ahí, y luego también tienes la capacidad de crear una sombra para que puedas subir la sombra añadiendo algunos valores X e Y. También puedes agregar los valores de desenfoque si querías desenfocar un poco más y luego cambiar el color de cómo quieres. Por lo que cambiar de color a una especie de gris más claro hace que parezca un poco más transparente. Y entonces incluso puedes ajustar la opacidad si querías y conseguir algunos efectos de sombra fríos ahí, o si no querías simplemente introducirla ahí. En realidad puedes usar este bonito dragger de sombras, y esto en realidad te permitirá arrastrar tanto la distancia del valor X como Y. Y puedes simplemente arrastrar eso a la ubicación que quieres ahí. Y luego finalmente, tienes un par de cosas diferentes que filtran opciones. Vamos a seguir adelante y sólo deshacerse de la sombra. Solo bajemos estos a cero y así tienes borrosa F sepia. Tienes saturación. Tienes matiz, brillo, contraste cuando te estás metiendo en estas cosas un par de cosas que tienen en cuenta que muchas de estas cosas solo depende del navegador. Así que solo asegúrate cuando estás empezando a trabajar en esto, estás mirando los filtros, asegurándote de que no sea un navegador, que trabajes con los lotes o estás intentando apuntar o algo así. Por lo tanto, ten eso en cuenta. Pero en realidad es sólo una especie de ajuste aquí. Ya sea el primer plano o el fondo. Se puede ajustar un par de esos, y luego lo último es el reflejo. Voy a añadir un reflejo a cualquier objeto. Puedo agregar la profundidad de la reflexión, como cuánto muestra esta reflexión ese objeto. Y también puedo agregar el offset ¿A qué distancia hay? Entonces si quería algún tipo de superficie reflectante fuera de estos diferentes objetos, puedo agregar una reflexión en cualquier momento. Entonces esas son algunas de las opciones que puedes hacer con el elemento Inspector sobre en tu panel de inspector dentro de un tipo de templo 54. 54 Inspector de física: en este video, vamos a estar hablando sólo de una simple introducción a la física y las diferentes cosas que puedes hacer con la física. Ahora espero tener en tiempo posterior diferentes tutoriales sobre cómo usar la física para construir diferentes tipos de juegos. Esto es solo acción desinteresada a cómo empezar con el tipo térmico y cómo empezar con la física misma. Entonces si entro aquí y entro en los elementos, puedo seleccionar el cuadro desplegable y simplemente hacer un círculo aquí. Entonces quiero seguir adelante y seleccionar un círculo y voy a tener eso sólo un poco arriba en la parte superior ahora, por defecto. El círculo no hace nada en este punto. Entonces voy a seguir adelante y añadir algo de física a ese círculo. Por lo que seleccionamos el cuadro desplegable y bajamos a dinámico. Y lo que sucederá en cuanto seleccione que para ser dinámico es que la física misma comenzará a aplicarse. Ahora puedo hacer un par de cosas con vistas como puedo decir, OK, lo rápido que quiero que esto forzado realmente suceda para poder ajustar esto a ser Vamos a probar 100 por ejemplo, y se puede ver que sucede realmente rápido que es básicamente la fuerza. Esa es la fuerza de gravedad es básicamente realmente fuerte en ese punto. Pero por defecto es simplemente dejarlo en uno así que solo tipo de caídas a un ritmo normal. Lo siguiente que podría hacer es que puedo ajustar el ángulo, por lo que por defecto es 180. Pero sigamos adelante y tratemos de ajustar esto a, como, 90 o algo por ahí. Por lo que 90. Y lo que sucederá es que ahora el ángulo en sí es que dice el punto de gravedad es de esta manera 90 grados en lugar de los 180. Bueno, sugerí pasar por el lado izquierdo, y se puede ver que ahora cae también a la izquierda, puedas ajustar cómo lo hace eso en la escena por defecto. Y así otra cosa que puedes usar puedes controlar la gravedad con la inclinación de tu dispositivo. Entonces si voy aquí y en realidad estoy en un iPhone o un teléfono Android o cualquier cosa, enrealidad puedo, realidad puedo, con la inclinación al control de mi dispositivo, donde realmente cae la gravedad donde hace que esa bola caiga en sí misma. Lo que permite crear algún tipo fresco de interactivo usando el acelerómetro usando crea, um, um, contenidos interactivos ahí algunos. Vale, así que voy a seguir adelante y ajustar esto hacia atrás 280 entonces vamos a subir aquí y ajustar un par de cosas es, digamos que quiero que esto se quede dentro de mi escena y adelante y golpee um, rectángulo aquí, y voy a tener este tipo de interactuar o rebotar de este rectángulo justo ahora. Algo así como un bar. Si yo fuera solo para golpear ese hit saving preview, se puede ver que pasa justo a través para que algo interactúe con esto. Esto realmente necesita llamarse estático o cambiarse a estático por lo que interactúa sin movimiento . Y de esa manera, lo que pasa es que es sólo una especie de rebotes en su contra. Un par de cosas que puedo hacer es densidad es básicamente lo pesada que es esta cosa. Entonces cuando interactúa ella empuja otras cosas. ¿ Va a ser un buen empujón como un empuje pesado, o simplemente va a ser una especie de empuje ligero? Hay un par de cosas que puedes hacer, o simplemente en la densidad. Voy a entrar aquí y en esa pelota. Voy a Es como el efecto de rebote y sólo como que ajuste eso. Entonces puedes ver que el equilibrio es realmente hinchable ahora, así que va a rebotar por un tiempo. Va a tomar un tiempo en especie de rebote hacia abajo también. Pero si quería ajustar eso para ser extremadamente hinchable, también puedo ajustar eso un poco más alto también. Y la fricción es un arrastre de aire es una especie de arrastre de aire es fricción ladrón con el aire. Es, casi lo pienso como si la pelota está cayendo y hay un ventilador abajo, ¿ese ventilador dependiendo de cómo la fuerza de ese ventilador pueda hacer que el balón caiga un poco más? O puede causar que los Balti ni siquiera caigan en absoluto o algo así. Entonces eso es lo que el aire drag icis. ¿ Cuál es la fricción al aire? Si hace viento, entonces vas a que las bolas no caigan tan rápido en sí mismo, así que puedes ajustar ese tipo de cosas ahora, dependiendo del ángulo de tu pantalla, quizá también quieras, o el ángulo de tu objetos. Entrémonos en el elemento, Inspector. Aquí en realidad métricas, inspector. Y ajustemos un poco el ángulo de esta barra. Se puede ver aquí la pelota como que rebotará un poco de ella y se rodará. O si tengo una animación a esto, sigamos adelante y solo golpeamos récord y luego tener este tipo de enemigo un poco más, y se puede ver que el tipo de animación giró un poco y rebotar el balón para que incluso pudieras desencadenar esa animación basada en un clic y tener el inicio de un juego de tipo de interacción con él. Si no quiero que el balón salga de la pantalla en absoluto, ¿por qué tendría que crear varios tipos de rectángulos aquí y sigamos adelante y entonces lo que puedo hacer es que pudiera tomar cada uno de estos rectángulos sosteniendo el botón de turno viniendo a mi inspectores de física como esos todos para ser estáticos pero también entran en mi espectro de elementos y hacen cero la opacidad así que en realidad no veo eso en sí mismo, pero se puede ver que es es interactuar con él. Pero el usuario en realidad no lo ve, por lo que tipo de lo contiene en esa caja. Bueno, voy a volver a hacer clic en esto, esta pequeña barra giratoria, y voy a añadir un gatillo para seguir adelante y empezar de nuevo la línea de tiempo. Entonces vamos a decir, iniciar línea de tiempo y va a ser línea de tiempo principal y luego jugar a la inversa. Por lo que ahora cuando hago clic en él boom, lo vuelve a tocar en reversa. Por lo que solo puedes empezar a interactuar con estos objetos usando los elementos estáticos. Eso es esencialmente lo que es la física. Si esto estuviera en un dispositivo y yo tuviera ese control, ¿qué inclinación? Me permitiría también usar mi dispositivo para tipo de controlarlo, tener que rebotar por ahí también. Pero eso es una introducción, una pequeña introducción a la física otra vez, con la esperanza de tener tutoriales para ir más a profundidad de la física más adelante. Pero por ahora, esto al menos te hace empezar con cómo empezar a jugar con el inspector de física 55. 55 Inspector de identidad: El último panel inspector del que vamos a estar hablando es Theo Identity Inspector Panel. El panel inspector de identidad se encuentra en la última pestaña de la sección de inspectores, y hay un par de cosas que puedes hacer con esto. Se puede ver que en este momento no tengo realmente ningún lugar para hacer click, pero si selecciono este ítem, me permite agregar un par de cosas puedo agregar texto alternativo. Y eso es bueno para si hay algún tipo de lector de pantalla de lector de texto o algo así , esto describirá qué es este elemento. Por lo que es una buena práctica a cualquier elemento que tengas en el escenario agregar algún texto alternativo para tener en cuenta los lectores de pantalla para aquellas personas que no pueden ver y esto agregará, el lector de pantalla básicamente describirá lo que pongas aquí básicamente, y lo otro está incluido en la navegación por teclado. Esto también es importante para diferentes teclados. Um, si alguien necesita tabular a través de algo para llegar a cierto contenido, entonces querrías aumentar o incluir esto en la navegación del teclado si necesitan llegar a él, sobre todo si necesitan interactuar con él si necesitan dar click en él o si necesitan Teoh Navigate o para leerlo o algo por el estilo, así y entonces puedes decidir. De acuerdo, ¿cuál es el tabulador? ¿ Índice? Significa que el primer ítem del índice va a ser la primera pestaña. El segundo elemento va a ser segundo tabulador y así sucesivamente. Para que puedas decidir cuándo realmente sucede eso. Y luego lo siguiente es el nombre para mostrar el nombre para mostrar. Nos hemos enterado de esto en ah, par de videos anteriores. Pero se puede ver aquí el nombre de Ellipse justo aquí. Este será en realidad el nombre para mostrar. Puedo cambiar esto por lo que yo quiera. Mi nombre, esa muestra. Notarás que la línea de tiempo en realidad dice muestra también. Otra cosa que puedo hacer es que puedo darle un I. D.único D. Aprendimos de esto mayormente en la sección de JavaScript. Entonces si quieres hacer referencia a la sección javascript, puedes hacerlo. O si vas a adjuntar un archivo CSS externo o si vas a adjuntar un script de trabajo externo violento, quieres hablar con varios elementos en el escenario Bueno, puedes darle a esto un nombre de clase también. Entonces si quieres que le dé a esto un nombre de clase un círculo, entonces cada vez que haga referencia o agregue algún CSS externo a esa clase, aprovechará lo que sea que sea. Por lo que cualquier imagen de fondo o cualquier color o bordes o cualquier cosa que hagas en el CSS o hagas dentro del JavaScript se llevará a cabo con ese nombre de clase. Entonces eso es esencialmente todo. Es así como se trabaja con el inspector de identidad. En el interior, es de tipo topo. 56. 56 Conclusión: Yo sólo quería decir gracias por tomarse el tiempo para pasar por esto a mull tipo curso. Ojalá, te esté dando la introducción que necesitas para poder empezar con el tipo térmico. Sé que todavía hay mucho que se puede aprender. Espero tener más ejemplos y ojalá algunos archivos de inicio que confinaste en el aprendizaje Joe joe dot net. Y de esa manera puedes descargar algunos de estos archivos de ejemplo y empezar con algunos archivos de ayuda más en publicaciones de bloque y todo así. Así que echa un vistazo a mi página web en aprender Joe joe dot nets para obtener archivos más útiles. Pero gracias. Gracias por tomar este curso en hacerlo todo el camino hasta el final. Por lo que sólo quería decir gracias. Y si tienes alguna otra pregunta, siéntete libre de contactarme al learning dojo dot net