Transcripciones
1. Introducción: en este tutorial, quiero guiarte a través de cómo crear una animación básica en adobe animate CC 2019. Tengo mi famosa casita roja justo aquí en Lo que quiero hacer es sacarla de adobe, animar e importarla a WordPress. Tengo ejemplo aquí del producto terminado. Este es un archivo de adobe animate totalmente sensible con este pequeño cuadrado rojo moviéndose a través de la pantalla. Como puedes ver, puedo bajarlo. Aiken tamaño para arriba. Es totalmente receptivo. Y si hago mi navegador aún más grande, simplemente
se queda en su lugar. Te voy a llevar por el proceso de exportar fuera de adobe animate y a WordPress . Estoy usando Virgin cinco. Por lo que voy a crear un archivo de adobe animate html five totalmente responsive y subir en el WordPress que puedes utilizar en tu sitio web. Empecemos
2. Cómo configurar tu proyecto de animación en HTML5: está bien, solo que no te dejaré saber antes de ir demasiado lejos que estoy ejecutando Adobe animate CC 2019. Entonces si estás leyendo 2018 asegúrate de actualizarlo a la versión de millones. Si tienes Creative Cloud, se actualizará casi automáticamente. Así que sí estén atentos. Todo lo que hago está en la nueva versión de Adobe Animate CC 2019. Llevemos al doc allá y salgamos del camino. Lo primero que quiero hacer cuando configuro mi diseño es que quiero asegurarme de que he comprobado la plataforma Escriba mi versión de Animate por alguna razón, y esta podría ser tuya o no podría ser tuya Sigues por defecto a Action Script 3.0 Action script 3.0. Básicamente murió en 2012 cuando Steve Jobs, cuando aún estaba vivo, básicamente dijo, parpadea muerto y mató a la plataforma. Entonces dinero, Eso es lo que hace siete años, Así que básicamente lo que pasó fue que Adobe tuvo que revolver y crear un nuevo formato para Adobe animate, animate,
y lo hicieron en forma de lienzo HTML cinco. Pasaba mucho tiempo viniendo, pero siento que está funcionando genial. Y me encanta lo que han hecho hasta ahora. De acuerdo, entonces el primero en asegurarme de que quiero decir script de acción 3.0 en el lienzo HTML cinco. Ahora puedes establecer thes default si quieres, pero para mi diseño y para también matemáticas fáciles porque soy licenciada en Bellas Artes Mayor. Entonces para mí, las matemáticas pueden ser difíciles. Voy a decir 1000 por 500 después. Rahmani utilizó esto como la relación o el porcentaje de con dos altura. Esto es un 50%. Entonces para mí, es matemática fácil. Si tienes 1000 por 1000 eso está totalmente bien. Pero solo toma nota de esto para bajar el camino. Voy a pegarme con 1000 por 500 html cinco lienzo y crear. Y esa es tu configuración básica para adobe animate asegurándote de que diga cannabis aquí arriba si
crees el formato incorrecto. Entonces si elijo action thrips 3.0, que es esencialmente un archivo rápido, aquí no dirá nada. No dirá lienzo. Entonces si no ves la palabra lienzo, está configurada incorrectamente. El motivo por el que lo estoy haciendo ahora mismo es que no hay manera de cambiar de acción. Guión tres. Básicamente están diciendo qué versión de flash. Entonces si configuras esto incorrectamente desde lienzo a Swift, no
hay vuelta atrás y tienes que reiniciar todo tu diseño. Así que ten en cuenta eso desde el principio,
y estoy haciendo un punto muy grande de ello para asegurarme de que seleccionas lienzo versus script de acción 3.0!
3. Cómo configurar una animación básica: Muy bien, vamos a crear una animación básica en Adobe Animate CC 2019 en el lienzo HTML five. Déjenme cerrar la versión no lona. Voy a dibujar un pequeño rectángulo. Poco son para rectángulo. Y en mi ejemplo sí usé un cuadrado rojo, Así que voy a mantener ese look rojo, voy a mantener la tecla de mayúsculas hacia abajo y simplemente dibujar un cuadrado simple ahora, animado no puedo simplemente mantenerlo en este diseño. En realidad tengo que ponerlo en un clip de película. Entonces en realidad voy a hacer doble clic en esto porque la razón por la que hago doble clic en esta técnica de la vieja escuela y te la voy a mostrar si pongo un trazo alrededor de mi diseño vamos a agregar como un trazo naranja a esto y dibujo este rectángulo ¿Probablemente no lo hagas darse cuenta Uops, Su Vamos a hacerlo de esta manera Si este trazo era su tamaño masivo Si yo solo click, solo consigo el relleno. Pero si hago doble clic,
en realidad en conflicto con el Phil y el trazo. Esto es en realidad de un camino, camino, camino, camino de regreso en los Macromedia e incluso los futuros días de ola. Por eso vuelvo dentro de destello de slash animado que si haces doble clic en tu dibujo te conflictos Whoa, ahí, mi ratoncito mágico en esteroides. Puedo hacer doble clic y conseguir el Phil y el trazo. Ya que no tengo un Phil, por lo general
sigo DoubleClick por si acaso me olvido de Así hago doble clic mucho en esto. Entonces si escuchas un pequeño doble click en el fondo solo notas lo que dio Así voy a controlar Click, y voy a bajar a convertir a símbolo. En realidad tengo un teclado de la vieja escuela aquí en mi escritorio de la computadora que en realidad tiene las
teclas f . Y me encanta porque las llaves f seguían dando vueltas en animate de los Macromedia y de los futuros días de Wave. Gracias, Adobe, por seguir tu famosa regla de que una vez que entra, nunca sale. Pero desgraciadamente, me digrego. Voy a decir convertir a símbolo y voy a decir Plaza Roja Ahora aquí está la cosa se puede notar el nombre del símbolo Podría ser mayúscula. El espacio en minúsculas es lo que quieras. Esto es interno. Parecen preocuparme por el nombre justo aquí por el camino. Estaremos preocupados por los nombres de archivo, pero por aquí mismo puedes comer lo que quieras. Voy a elegir clip de película el botón y er gráfico de una época pasada en los años noventa y los dos miles de clips de película Say Okay, está
bien . Ahora bien, si notas al hacer click en este cuadrado rojo, no
obtienes el punto pequeñito Solo obtienes una línea azul con el punto de registro estando en la parte superior izquierda. Ahora voy a bajar la capa del dedo del pie uno y doble clic. Ahora aquí decir importante ha cambiado de la nueva versión de Animate. Si escribo Plaza Roja y tengo un espacio ahí dentro, en realidad
se va a convertir a un subrayado. Por lo que se va a leer Underscore Square. Hay una caja de alerta que aparece, pero desde entonces he dicho: No me lo sigas mostrando ahora. Por supuesto que estoy impartiendo esta clase, y quería que apareciera. Pero te avisará si no has usado animate antes o pones un espacio ahí dentro, que no permitirá espacios. Esto es una cosa totalmente nueva que ha cambiado en adobe animate CC 2019. Entonces aquí voy a decir Red Underscore Square, pesar de que es lo mismo sólo para asegurarme de que me metí en el lugar correcto. Ahora así es como se crea el marco de animación. Uno va a estar justo aquí. Voy a moverme como oficina del cuadro 1 20 para ser un movimiento lento, y tengo teclas F en mi teclado. Aún así, si no lo
haces, puedes usar una de las pocas formas si golpeo la tecla F six que crea lo que se llama un nuevo
fotograma clave . Si lo deshago, también
puedo controlar, clic y decir, insertar marco clave. El único es que no muestra la tecla F seis aquí mismo, pero todavía puedo ver insertar marco clave y está ahí y la tercera vía está subiendo. Insertar línea de tiempo e insertar. Bueno, ahí está, marco
clave ahora aquí diciendo único. Todavía no muestra la llave F seis. No obstante, la llave F seis seguirá funcionando. Toma la tecla Phantom F seis que acabo de aprender de dos décadas de usar adobe animate slash, slash slash future. Salpicar a la pregunta trivia como siempre volver a más adelante. Entonces voy a crear un marco clave. Y menos, en mi caso, a las 1 20 y así perder de ida y vuelta. Voy a hacer un marco clave sin enmarcar a 40 F seis para mí. Pero también puedes controlar clic,
insertar, insertar, fotograma
clave o insertar línea de tiempo y marco clave también. Se puede hacer una de tres cosas. Iba a poner tres marcos clave básicos arriba, y ahora voy a mover la plaza de ida y vuelta.
4. Crea una animación clásica: todo bien. Ahora que hemos configurado nuestro marco de tres claves, movamos esta plaza de ida y vuelta. Lo que voy a hacer es controlar Click o creo, en la PC Es Ault. Si sí conoce la respuesta, por favor háganme saber los comentarios. Soy una persona de Mac, así que siempre estoy adivinando cuando se trata del lado de PC en cuanto a los atajos y
controles de teclado o si tienes un ratón que son dos clics de ratón, solo
tengo la Montaña Mágica solo tiene uno, pero algunos los ratones tienen que hacerlo. Puedes hacer clic derecho del ratón y tirar de este menú contextual y voy a decir crear clásico Tween. Ahora bien, si has usado adobe animate o flash en el pasado, estás acostumbrado a un color morado más claro. En realidad han cambiado el color. En realidad no estoy muy seguro de por qué. A lo mejor alguna carta estaba cansada del aburrido morado después de 24 años. Por lo que desde entonces se han ido con un tono más oscuro de morado. No te preocupes si estás acostumbrado a ese tono diferente, está bien, mis dos centavos no lo cambiaría, pero de nuevo, no trabajo para Adobe. Entonces lo voy a hacer ahora va a tener esta animación básica. Si deslizo esto hacia atrás sobre los 20 notarás que nada se mueve. Eso se debe a que el marco clave en el fotograma uno y el fotograma clave en el 20 son exactamente iguales. Pero si yo Magic Mouse Hola ahí. Si muevo esto, voy a sostener la tecla de turno. Haga clic y arrastre. Y ahora, si vuelvo a enmarcar una nota que se mueve cada vez tan despacio, no
puedo la tecla enter de mi teclado para previsualizar la velocidad y volver a presionar la tecla enter para detenerla y se mueve. Ahora voy a hacer lo siguiente es voy a repetir ese proceso. Tengo un ratón mágico feliz muy gatillo, al parecer hoy. Entonces voy a controlar click, al
menos en el mío. Lo tengo en 1 20 años. Podría sentirse diferente Si es más rápido, más lento, voy a decir crear clásico Tween y porque a 40 partidos al primer fotograma solo
va a rebotar y ir de ida y vuelta. Entonces si tenía la tecla enter, va a tomar unos segundos, pero va a ir de la derecha atrás del dedo del pie izquierdo y va invariablemente a bucle una
y otra vez. Ahora, una vez más, Aiken, diga loop. Si quiero previsualizar eso, no
voy a ir a quien debería apagar eso. Esa fue una mala idea. No trates de hacer cosas nuevas entre tu rutina habitual, Hayden. Entonces no voy a tener ese bucle configurado. Yo tomo eso de vuelta. Iba a mantenerlo de esta manera, pero por defecto, esto va a dar vueltas y vueltas hasta que diga parar. O sugerí que sólo ocurriera una vez. Yo quiero que esto juegue una y otra vez, Así que voy a mantenerlo justo como es. Pero así es como crear una animación básica dentro de adobe animate CC 2019.
5. Guardar y ver una aparición de la animación: bien, Eso está todo bien y bien. Pero en realidad guardemos este archivo. Eso aún no lo hemos hecho. Y vamos a previsualizarlo. Usando un navegador de nuestra elección, voy a ir a archivar y guardar. Ahora, sí sabes que si lo guardas por primera vez, que el guardar y guardar, como es técnicamente lo mismo,
Así que voy a mandar el de Asa. Siempre soy fan de atajos. Tengo una carpeta llamada Animate Example, y voy a llamar a este nuevo dash rojo dash square. Ahora bien, ten en cuenta que también usé esto son letras minúsculas importantes y no hay espacios. Esto eventualmente se va a convertir en mi nombre de archivo a la hora de subir ing la obra. El equipo tanto PC como Mac no es que sensible, lo que significa que podrías encontrarte con él se llama un falso positivo. Significa que a la computadora no le importa si tienes letras mayúsculas o minúsculas. El Web, especialmente los servidores Web. Donde vamos a poner este trabajo es K sensible. Por lo que tengo una regla en mi aula cuando enseño que todos los nombres de archivo son siempre minúsculas. Notarás un par de cosas en el futuro. Usaremos mayúsculas. Pero en su mayor parte, todos los nombres de archivo siempre serán minúsculas. Y así y tampoco debes tener ningún espacio. Entonces y si quieres conseguir súper técnico, tampoco
debes tener ningún Asterix es ni ningún personaje especial. Así que piensa en letras, números y para tomar el lugar de espacios puedes usar un guión o en subrayado esas reglas de herramientas
económicas que tengo donde diré guión nuevo, cuadrado
Red Dash o nuevo subrayado Red Underscore Square. Entonces vamos a guardar este archivo. Y ahora que está guardado, voy a previsualizar todo este diseño. Esta es una era de retroceso, otra vez. Soy mando y la tecla enter. Y cuando hacen eso en mi otra pantalla de computadora, lo muevo. Tengo un cuadrado rojo moviéndose de ida y vuelta. Esto es lo que se llama host local, así que está jugando en mi computadora local, y puede o no escalar, lo
cual no lo hace. Entonces si lo notas cuando muevo mi navegador, realidad no escala en absoluto. Pero este es solo el primer paso que quiero guardar en vista previa. En el camino, cuanto más tiempo pueda previsualizar significa más veces puedo arreglar rápidamente en caso de que estropee algo. Y cuando estás construyendo diseñando revestimiento, casi
gastas el 90% de tu tiempo depurando y el 10% diseñando. Entonces cuando, como, para hacer cosas que requieran 567 pasos, siempre
compruebo puede funcionar rápidamente para asegurarme de que no me falta un paso o las cosas no funcionan. Al final mismo. Iba a asegurarme a lo largo del proceso que funcione, ya que puedes ver esto moviéndose de ida y vuelta. Entonces lo que me pregunto a continuación es que voy a modificar algunas configuraciones, y voy a hacer que esto represente porque en este momento no responde. No se mueve. Es sólo la forma en que es. Y en la Web, todo debe ser receptivo. No debe ser estático en esta nueva era de la Web, donde tenemos tabletas, computadoras y celulares, que son casi de tamaño tablet en estos días. Pero aún así, quiero asegurarme de que esto se mueve de ida y vuelta en todas las diferentes plataformas, así que hagámoslo a continuación
6. Cómo hacer que el proyecto sea responsive y no hay hoja de sprite: Está bien, pasemos algún tiempo en la configuración de publicación porque tenemos la animación funcionando. Volveré a cambiar a la línea de tiempo, pero tengo que hacer un par de ajustes que quiero hacer para asegurarme de que esto sea totalmente receptivo y exportando de la mejor manera posible. Voy a decir archivo en configuraciones publicadas y cambiar un par de cosas en mi
configuración publicada . Primero voy a pasar a la configuración de imagen. No quiero exportar documento como textura porque quiero que esto exporte la
forma basada en vectores y no se convierta en imágenes. Sí dice mejor rendimiento, mayor tamaño. Me lo pongo común. Desmarque que cuando desmarqué los documentos de textura, luego me pidió que exportara imágenes como activos. Y podrías combinarlas imágenes a pesar de los tramposos? Yo también voy a desmarcar eso. Yo solo tengo una forma basada en vectores, pero y esto es un poco más avanzado para entrar. Pero lo mío es como tener lo que se llama un sistema pasado, que
significa que no quiero animate para ajustar o cambiar o agrupar mis imágenes en lo que se llama una hoja
sprite. Quería dejarlo en paz, así que siempre me aseguro de desmarcar El documento de exportación es textura, y exporto activos de imagen también está descomprobado. Ahora que tengo la configuración de imagen sin marcar, voy a repasar lo básico y esto es importante. Lo que quiero hacer es que quiero hacer responsive. Entonces esta es en realidad una herramienta muy poderosa. Hacer que respondan tanto y escalar para llenar el área visible ajuste a la vista. Lo que esto significa es, si ajusto el navegador ya sea con o por altura, se va a llenar a cualquier lado que toque primero. Por lo que quiero decir, hacer responsive tanto y escalar para llenar el área visible ajuste a la vista. Voy a decir, Publicar en esta de aquí. Y ahora publica mi trabajo en donde guardé mi archivo. Vamos a buscar que voy a ir en una pantalla diferente ya que estoy hablando. Y ahí está. Ahora, en un ejemplo anterior, lo
hice por una clase diferente. Tenía la Plaza Roja, así que me voy a deshacer de Plaza
Roja, Plaza Roja
y Plaza Roja, y ya no necesito imágenes. Entonces si hago doble clic en el nuevo archivo html de Plaza Roja, déjame cerrar mi edición anterior Ahora puedes ver moviéndose de ida y vuelta. Pero aquí hay algo importante. La nueva versión ahora escala en función de dónde se encuentra en el navegador. Ahora bien, si viste en el primer video, sí
puse casitas azules y todos te mostraron también. Lo que hicieron los casillitos azules fue apenas mostrarles los rincones de mi diseño. Pero para esto por casi un Ok, solo
tengo un cuadrado rojo rebotando de ida y vuelta. Y a medida que cambio el tamaño de mi navegador basado en el con o la altura, se mantiene a la vista. Entonces ahora que no tengo animación y la tengo escalable, ahora
movamos estas piezas a nuestro archivo de WordPress y longitud, um, arriba.
7. Sube tu proyecto de animación a tu sitio web: todo bien. Ahora bien, esto requiere un poco de trabajo de tu parte, porque cada sitio web se ha configurado un poco diferente. Entonces lo que estoy usando ya que estoy usando una cosa llamada Cyber Duck. Es una pequeña herramienta gratuita, tanto para Mac como para PC, pero en Cyber Duck tengo justo aquí se puede ver sobre el ciberpato. Ahí está para mantener pato pequeño. Déjame mover el doc, Cyber duck te pide que inicies sesión en tu página web. Y sobre todo, si estás usando un wordpress auto alojado, tendrás acceso a esto. Pero esto podría llevar un poco de trabajo para averiguar cuáles son tus ajustes de FTP. FTP significa protocolo de transferencia de archivos y todos los servidores autoalojados básicos con WordPress deben tener eso a menos que tu palabra o que estás hospedando empresa no te bloquee. Así que ten en cuenta en este paso, es posible que necesites pausar el video mientras vas a averiguar cuáles son tus ajustes. Pero casi todas las herramientas FTP. Entonces en Cyber Doc, me
va a preguntar tres cosas. Y si usas sftp, tendrás un par de configuraciones diferentes justo aquí. También hay cosas para ventanas para backblaze. Para Amazon. Tienes un par de piezas diferentes también En aquí con Dropbox, Google drive, Microsoft todo esto bueno. Pero estoy usando FTP básico o protocolo de transferencia de archivos. Ya he puesto en mi información desde una cuenta de Nautilus Designs, y tengo mi ftp configurado y cierro esta ventana. Puedo ver eso en mi carpeta de inicio,
Mi carpeta de nivel base de WordPress. Tengo un par de carpetas, así que tengo una cosa llamada WordPress cinco para sólo este propósito de demostración. Pero aquí es donde mi WordPress archivó vivir y respirar. Es importante no tocar ninguno de estos archivos o WordPress podría chocar totalmente. Y estoy siendo serio. Está bien. Lo que quiero hacer es crear una carpeta nueva, aunque dentro de Cyber Ducati está las mismas pulsaciones de teclas que el Mac. Por lo que comando turno enemigo Macintosh, donde podría ser controlado en la PC. Si soy incorrecto en el PC, entonces por favor avísame. Voy a crear esto. Pero también voy a seguir mis reglas para nombres de archivos. Voy a decir minúscula animar porque esta es la foto. Todas mis animaciones de Adobe Animate van a ir. Voy a decir crear y arriba pops y nueva carpeta Tenga en cuenta que esto no afectará a ningún proyecto es largo. No tienes un nombre de WordPress llamado Animate en Salonika Page o un Post. También podrías nombrar a este animate dash files o animar cinco archivos HTML, si
acaso podrías tener algo llamado animate. Yo no. Por lo que estoy seguro de nombrarlo solo animar. Voy a encerrarlo. Entonces tuve la foto llamada Animate, y voy a hacer doble clic e ir dentro de esta carpeta. Como se puede ver aquí, dice sitios web slash WordPress discontinua cinco slash animar sin espacios y sin
letras mayúsculas . Lo que quería a continuación es que voy a arrastrar tres cosas o debería decir dos cosas. No tienen carpeta de imágenes. Pero si no tienes carpeta de imágenes que estabas usando o si trajiste una clavija J o un regalo , esas serían las únicas dos imágenes tal vez trayendo un archivo PNG dependiente de lo que estás trayendo que tendrás una carpeta de imágenes. Entonces si tienes eso, selecciona eso. Pero voy a seleccionar solo el script Java y el archivo HTML No necesito el f l A. Si quieres, puedes subir totalmente el archivo f l A si solo quieres mantenerlo para estar a salvo en tu servidor. Pero no vamos a utilizar esto, Entonces el f l A es su archivo de trabajo cuatro. Adobe animar el F L. Una extensión sigue ahí, pesar de que es animada. F l a Flash. Las cosas no cambian. Entonces voy a subir luego esta nueva Plaza Roja. Tenga en cuenta las letras minúsculas, el no espacio para que pueda arrastrar esto hacia arriba a mi software FTP. Este caso Cyber duck Dejar ir traslados. Oye, sube completa. Ya he subido nuevos rojos. Donde html en nuevo punto cuadrado rojo Js para script Java. Ahora vamos a previsualizar esto en un navegador Web.
8. Ver una vista en línea en línea tu proyecto en HTML5: recordar dije hasta probar las cosas muy rápidamente como un hacer las cosas paso a paso. Esta es una de esas cosas. Entonces en mi FTP para mi configuracion, mi carpeta es mi nombre de dominio dot com dot net info dot cualquiera que sea slash sitios web slash WordPress dash cinco slash animate slash nuevos rojos donde esas barras indican nombres de carpetas . Entonces en este caso, mentes Nautilus diseños Voy a decir dash sites, Aiken escriba correctamente webs dash WordPress, dash five, dash, animate y luego no lo siento, no dash Todos esos tiempos slash en este caso, las mentes van a ser nuevo dash rojo dash square que html y f una vista previa lo O te va a dar una respuesta correcta o si a propósito tal vez deletreado con un mayúscula s problemas, y dice, Uops, esa página no se pudo encontrar usando tu aire para, 04 página. Así que ten en cuenta que aquí es donde sí entra la sensibilidad K. El culo de capital es diferente a una S minúscula es largo mientras puedas ver tu proyecto moviéndose ida y
vuelta, estás en el paso correcto para ahora poner esto en un WordPress. El primer paso ist subió el segundo paso es probarlo. Y ahora nuestro tercer y cuarto paso es escribir un poco de código. No te preocupes. Va a estar bien e incorporado a nuestra configuracion de WordPress.
9. Escribir CSS en WordPress: todo bien. Nuestro siguiente paso es ahora toe log in remolque. WordPress, y escribir un poco de CSS para que esto funcione. Ahora, sólo ya sabes, donde estoy. Yo estoy usando miramos las actualizaciones. Yo estoy en un WordPress 5.0 punto tres. No obstante, hice una cosa un poco diferente. Por mucho que me encanta la nueva versión de los posts y páginas de WordPress ¿qué se llama Gutenberg ? Yo sí tengo afinidad con los clásicos. Y así sí instalé un enchufe en ese en este diseño. Yosi arriba. Ahí hay una nueva versión. ¿ Sabes qué? Estoy en la actualización. Siempre está nervioso cuando hago las cosas en vivo en cámara y ojalá vaya a funcionar. Pero en realidad instalé un enchufe llamado el Editor Clásico para este tutorial. Muchos de ustedes estarán en una versión más antigua de WordPress, pero sí saben que pueden hacer esto tanto con la nueva Virgen de la Versión cinco, que tiene una nueva configuración de pago está en publicaciones, pero instalé esta cosa llamada el Editor Clásico. Eso es sólo todo. Pongo una pieza más en también de nota que estoy usando el tema básico 2017. Por lo que podrías tener un look totalmente diferente a tu diseño si tienes un tema diferente. Diferente configuración. Pero tengo un diseño bastante básico establecido en WordPress. Entonces quiero hacer es quiero editar mi CSS ahora CS esque vans para hojas de estilo en cascada. Algunos temas, dependiendo de lo que tengas instalado, tendrán un área CSS personalizada. En este caso, estoy usando la versión básica 2017 y por lo tanto no tengo la capacidad de agregar un área
CSS personalizada dentro de un tema en algún lugar de aquí. Entonces tengo que entrar a mi editor para que esto suceda. Si estás haciendo esto por primera vez, recibirás un mensaje de advertencia que dice:
Oye, Oye, ten cuidado, estás tocando tus archivos. Así que ten cuidado Así también puedes editar tu CSS Este tiró construido en editor CSS. Yo soy una especie de ir un poco de la vieja escuela con este diseño y simplemente yendo con el CSS básico. Una vez más, esto podría ir a algún lugar diferente en tu tema. Por lo tanto, ten en cuenta que este podría no ser el mismo lugar, sino para fines de demostración. Estoy usando una versión muy despojada de WordPress de Onley usando la configuración predeterminada. Por lo que en esta versión 2017 en la hoja de estilo, bajé como la línea 4332. Es mucho CSS. Y aquí voy a bajar como la línea 43 34 monotipos, um, código. Voy a teclear, punto y whoa, Así no es como tienes mis llaves. Animar contenedor. Ahora ten en cuenta que en versiones anteriores de nombres de archivos, dije que no uses letras mayúsculas. Esto depende de ti. Tengo una forma de programación de estilo antiguo donde tengo la primera palabra cuando se trata de CSS. Esto en realidad viene de Flash
Way, de regreso a principios, en realidad, como a mediados de los noventa a los dos miles donde se consideró lo que se llama caso Camel en casos de
camello. Primera palabra minúscula. Segunda palabra, primera letra mayúscula como una joroba de camello. Entonces me verás haciendo eso. En todos mis ejemplos tanto de CSS como CSS va con HTML. Por lo que este periodo representa lo que se llama una clase. Como dije, un poco de codificación. Pero esto es alrededor de seis líneas. Y ya no te preocupes por esto. Alguien que diga periodo animar contenedor. Voy a golpear el espacio y voy a decir soporte rizado abierto, que es la clave derecha de tu peaky y shift el soporte rizado se abre y se cierra. Y lo que golpeo la tecla de retorno lo en denso mi tipo y pone el corchete de cierre un nivel por debajo. Voy a decir posición, pariente de
colon y semi Colon, y les voy a mostrar por qué esto es en unas pocas líneas más de abrigo. No voy a darle algo de espacio por defecto, así que voy a decir margen inferior 10 p x punto y coma Eso solo da un poco de espacio debajo de tu animación para cualquier tipo, cualquier párrafo, cualquier imagen para estar abajo. Esto es opcional. Si no quieres tener un fondo de margen, puedes sacarlo de la derecha. El importante es que tenemos posición relativa, así que voy a tener 10 píxeles o 10 p x y el semi colon. Ahora baja por un par de líneas más y di animado contenedor va a escribir La misma palabra está construida arriba, así que asegúrate de qué? ¿ Cómo se deletrea aquí su palabra de que se deletrea igual abajo? Voy a decir que encuadre y te voy a mostrar por qué en el siguiente video voy a decir que encuadre ningún periodo Mayúscula Guárdalo todo minúscula debes tener I frames deletreados esa manera exacta notado Gire green Si lo hago Mayúscula realmente enmarqué sí me quedo verde lo que debería no suceda Pero por el bien de este propósito, vamos a mantenerlo más bajo Case I frame y repetir el proceso de nuevo Así que voy a decir
soporte rizado abierto . Si escribo la llave correcta Ahí vamos. Llave de retorno. Voy a escribir un par de líneas de código. Voy a decir posición, Colón Absoluto Si puedo deletrearlo justo ahí está. Y semi, Colon que en esa línea, voy a decir top zero left zero con si puedo deletrearlo otra vez con Colón. Wow, Mikey Taping Bueno, estoy hablando no es fuerte de repente. Está bien. Con 100% y altura 100% y semi colon que eso es todo el CSS Tienes que escribir en esta pantalla. Hay una línea más un tipo en la siguiente pantalla. Pero vamos a descomponer esto. Entonces entendemos cómo funciona esto en CSS o en cascada este contenedor animado se va a sentar afuera o alrededor de mi animación, que va a estar dentro de lo que se llama un marco de ojos. Después se va a mover la animación en función del tamaño del contenedor animado, que dice llenar el espacio de con y altura. Sí aparece como un cuadrado porque con un 100% y altura 100%. Pero solo estamos diciendo que llene la caja por todos lados y nos aseguremos de que esa posición esté en la parte superior izquierda y no haya espacio en la parte superior ni en la izquierda. Por lo que es casi sólo restablecer las cosas en la Web. Nosotros restablecemos mucho. Nos disgustan las cosas arriba en la parte superior izquierda. Puedes moverlos por el camino, pero este es el todo el código que tienes que poner dentro de tu zona CSS. No puse en el editor CSS, y podrías tener un área CSS personalizada dentro de tu tema. Pero una vez más, esta es la posición de contenedor animado. Margen relativo inferior animar contenedor I posición de cuadro. Cero superior absoluto izquierdo con 100% y altura 100%. Tenga en cuenta que no olvida que hace clic en actualizar archivo. De lo contrario, esto no se guardará, y todavía no hay forma de previsualizar la configuración. Ya estamos llegando. Vamos a seguir y poner en nuestro diseño en HTML y hacer referencia a estos mismos números en el siguiente video
10. Escribir el HTML: bien, hemos escrito nuestro CSS. Ahora vamos a entrar en su página o un post y enlazar este nuevo cuadrado rojo hacia la prensa Cuando las páginas que voy a decir añadir nuevo y de aquí voy a hacer es voy a decir nueva
Plaza Roja sólo porque ¿por qué no? Vamos a divertirnos un poco. Ahora, una vez más, estoy en el modo clásico Y si estás aquí, asegúrate de cambiar de visual a texto ya que esto realmente importa en el área de texto. Esto es básicamente HTML que Aiken escribe. Si utiliza la versión Gutenberg de la nueva versión de WordPress cinco, sólo
puede cambiar su configuración desde el párrafo dos html. Pero en este caso, estoy trabajando con el editor clásico en visual y texto. Además, dependiendo de si estás usando un tema o no, es posible que
tengas diferentes opciones para poner HTML en este diseño. Pero por el bien de este propósito, me voy a quedar con editor clásico y texto. Voy a escribir lo siguiente. Voy a decir menos que firmar clase Div. Entonces recuerda que teníamos ese periodo antes de que ese periodo en el CSS denota la palabra clase off. Digo que clase es igual y estropeando esto exactamente el mismo contenedor animado utilicé un C mayúscula Voy a decir cotización, fin, cotización en estilo. Ahora, un estilo es lo que se llama un en Lyon CSS Pero esto me permite determinar la relación para la que tengo para crear la caja. Voy a decir estilo igual cita, cita y vuelta adentro Esa cita voy a decir relleno dash bottom colon un cierto porcentaje. Ahora, ¿qué por ciento de distancia? Poner en esto va círculo completo Si vuelvo a Adobe Animate
manera, mucho atrás cuando el con en la altura es una relación Así que voy a escribir en mi calculadora, mostrarte cómo conseguí esto. Vamos a tirar de la calculadora. Ahí vamos. Y ojalá ahí aparezca. Voy a escribir 500 dividir que por 1000 ahora dije antes y como el segundo módulo que me gusta las matemáticas fáciles Y por eso me gustan las matemáticas fáciles. El ratio es de 0.5 o si multiplicamos eso por 100 obtenemos 50%. Entonces sé que si vuelvo ahora a este código, ese porcentaje inferior de relleno es de 50 porque sí usé matemáticas fáciles. El inicio en 1000 por 500. Hacer nota. Es posible que tengas cierto número que no es perfecto. Entonces si tienes, como un cálculo diferente que, digamos, es como 500 por 9 97 solo hazlo a tu bastardo o manteniendo 51% sabiendo que tendrás un poco de espacio abajo. Al no encajar perfectamente, no
puedo apretar 50.1%. Tengo que escribir como 51 o 50 y perder un espacio cada vez que un conjunto cosas arriba. Pienso en el tamaño real con el que estoy trabajando. Entonces esa es una pequeña charla para un simple cálculo. Yo estoy consciente de eso. Patting inferior 50% semi colon que lo bloquea así. CSS. Yo sólo lo escribo aquí mismo porque siempre quiero asegurarme de tener en cuenta cuál es la relación del lienzo de cinco HTML
específico con el que estoy trabajando. Ahora hemos escrito son palmaditas colon inferior, 50 semi colon y cita. Voy a terminar con un corchete cerrado. Siempre que leo HTML, tengo que tener un signo menos que y un símbolo mayor que al principio del final de mi abrigo él y en la llave de retorno en tipo menos que signo enmarco. Ahora ten en cuenta que tiene que ser minúscula para que coincida con la minúscula dentro de mi CSS que
escribí antes voy a decir que enmarque y luego SRC esto significa fuente o yo dedo del pie esencialmente digo el enganchado en estilo fonics cirque SRC igual Signo, cotizar, cotizar y volver a esta zona y luego ir a escribir lo siguiente con Dios, podría deletrearlo correctamente con igual a 1000 que va a coincidir con mi diseño aquí a la
derecha y cerrar altura de cotización igual a 500 y luego cerrar cotización. Y una cosa más voy a decir, sólo porque probablemente debería haber puesto esto dentro de mi CSS y muchas configuraciones por defecto hacen esto. Pero como la mía no lo tiene, ya que tengo un tema muy básico de WordPress, voy a decir estilo otra vez. S t Y l e es igual cita frontera, colon y luego decir cero semi colon cotización y mayor que símbolo. Y entonces tengo que escribir un marco de ojo cerrado diciendo barra que enmarque. A lo mejor ahí vamos y cerrándolo con un símbolo mayor que el límite significa por defecto. Yo los marcos tengo un borde. En realidad son bastante molestos y muchos temas. Y wordpress sacarlo. Pero como estoy usando un tema predeterminado, no
lo hace. Por lo que sólo para fines de exhibición. Sólo voy a mantenerlo así. Y eso divota la cima. Lo que tienes que hacer en HTML es que tienes que abrir lo que se llama etiqueta y cerrar la etiqueta . Entonces si es yo marco en el principio, tengo que decir slash enmarque al final porque esta etiqueta DIV abre esta parte superior, tengo que decir menos que signo slash div. Ahora bien, todo
esto se ve bien, excepto por una pieza crítica, ese Cirque o la fuente. Ahora tengo una ficha de este pequeñito yendo de ida y vuelta de mis diseños Nautilus. Voy a dar click dentro de aquí este Ural o el Localizador Uniforme de Recursos. La gente piensa que es universo o universal, pero es uniforme. Entonces voy a copiar esta tu URL Voy a volver a añadir nueva página. Voy a pegar este código dentro de él y luego voy a decir publicar. Y eso es todo el html que tienes que escribir para que el archivo animado funcione dentro de WordPress
11. ¿¿¿?: Entonces la pregunta que probablemente estás esperando a ver porque ahora hemos pasado por dos módulos, suyo no funciona. ¿ Sabemos si esto realmente logró? No éramos Dio ahora,
sí, sí, realidad no
podía parar y previsualizarlo antes de ahora. Pero aquí está el resultado. Echa un vistazo. Como puedes ver, este pequeño cuadrado rojo rebota de ida y vuelta, y se ve bastante bien. No obstante, ahora
tenemos que ajustar el navegador para ver si lo hace de hecho, escala y he aquí, que esto va de ida y vuelta en escalas más grandes o más pequeñas y mantener la relación. Esa es la pieza más grande de todo, que esto sostendrá el tamaño del diseño general en tamaño perfecto. Entonces si quiero poner diciendo abajo Así que si tuviéramos a mostrar ejemplo de digamos, editar página de nuevo dentro de WordPress y todos dicen que
sí, sí funciona donde si los años no funcionaban Oh no, no
funcionó. Uno de los dos resultados sucederá. Lo bueno de codificar es que va a ser un sí o un no. No hay Tal vez así si pongo algún texto debajo de este marco en una vista previa, una
vez más. ¿ De acuerdo? Sí,
sí funciona o Oh, no, no
funciona que usted concede, e que el tipo sostiene justo debajo del espacio real. No lo mueve por encima ni por debajo. Esa magia vino una vez más cuando pusimos la relación de relleno de estilo inferior 50% a la pieza de WordPress. Por lo que ojalá el tuyo sí funcionara y se lograra magia.
12. Prueba en los navegadores: por lo que estoy ejecutando safari porque estoy en un Macintosh. Pero también quiero ver si funciona y otros navegadores porque nada es peor que
asumir que va a funcionar en todas las plataformas, pero realmente no logrará ese efecto. Por lo que en realidad tengo fuego Fox. Hola, no
puede Asia ¿Cómo estás? Por lo que tengo un largo con safari. Tengo Firefox y chrome porque estoy en un Macintosh. No puedo chequear. Yo como. Eso son sólo las cosas que tengo que asumir. Pero debido a que Chrome sí tiene una cuota de mercado mayoritaria en el mercado de PC, me siento bastante seguro. Pero si pruebo tanto Firefox safari como chrome, estoy logrando y probando a través de múltiples plataformas. Entonces aquí vamos. Aquí está fuego Fox Ver Firefox trabajando junto a safari, tanto los chicos pequeños en movimiento, y ahora es test chrome y chrome lo es, pero ese no es el proyecto correcto en el proyecto correcto. Entonces, ¿qué funciona en cromo? Funciona en Firefox y funciona en safari. Sé ahora que esto funciona a través de todas las plataformas, y si estoy ejecutando ya sea tesis AM sung dispositivos en el móvil porque tienen crone y o el iPhone, que tiene safari, que estos funcionarán en dispositivos móviles como bueno, y así es como puedes crear una animación básica inanimada y ponerla hacia la prensa y para crear un lienzo HTML cinco que puedas usar en los pechos de barrio.
13. En conclusión: Muchísimas gracias por ver todo a este módulo. Siris de transformación y Dobie anime html cinco archivos en salidas nuevas, totalmente responsivas para usar en WordPress. Tengo curiosidad. ¿ De verdad te pusiste trabajando en tu página web? Si es así, envíame la u R l Ponlo en la sección de comentarios Llévame una captura de pantalla. Llévame. Toma una captura de pantalla En vivo y hablando demasiado tiempo. Al parecer quiero saber ¿Funcionó esto para ti? Porque creo que adobe animate es las rodillas de la abeja En este momento animar es caliente. Es divertido. Es tan fresco de usar. Pero la última pregunta es ¿puedes mostrarlo en tu página web? La respuesta es sí. Ahora puedes mostrar html full responsive five compatible. No Swift. Swift no funcionará en dispositivos móviles, especialmente en la comunidad apple en tabletas. Pero HD modificar totalmente responsive técnicas de codificación realmente robustas en wordpress que puedes mostrar a tus amigos y familiares. Entonces tengo curiosidad si hiciste que esto funcionara. Si llegaste a través de todos los módulos, me encantaría escuchar por ti en los comentarios. Por favor, publique una revisión al respecto. Esto significaría el mundo para mí. Gracias Una vez más. Tanto por ver estos videos. Se lo agradezco mucho.
Haydn Adams, Creative Technical Educator
