Aplicaciones Adobe Edge Creative Cloud

• Abril 30, 2024

HTML5, JavaScript y CSS3 se han vuelto casi tan populares como Flash para crear animaciones interactivas para la web, tabletas y teléfonos. Adobe^R Edge Animate y las otras aplicaciones de Edge son un software muy fácil de usar con muchos ajustes preestablecidos para facilitar su trabajo.

La animación de la línea de tiempo sigue siendo la forma más popular de animar y Adobe lo ha hecho más fácil con las nuevas rutas de movimiento de Edge Animate, que pueden imitar los movimientos del mundo real y con la relajación incorporada. Puede agregar fácilmente animación a lo largo de la línea de tiempo con el botón Anclar que agrega marcadores de animación a la línea de tiempo o arrastrando y soltando la posición de los objetos en el escenario que Edge Animate convierte automáticamente en rutas de movimiento. Incluso puede usar el botón Grabar, que registra los cambios que realiza en los objetos en el escenario y los convierte en animación de fotogramas clave. Edge también tiene su propia versión del panel Acciones, que está ordenada y cada acción tiene su propia pestaña en el panel. Probar sus animaciones es fácil con una combinación de Adobe Edge y el navegador Google Chrome.

Si está familiarizado con la animación Flash, notará que agregar interactividad en Edge se asemeja al flujo de trabajo de Flash, ya que puede usar líneas de tiempo anidadas para cada elemento de animación y aplicar fragmentos de código preinstalados para las interacciones y animaciones más comunes. Estos fragmentos de código manejan tanto la animación de reproducción como reproducir, pausar, reanudar y detener, así como crear áreas activas para las acciones básicas de los botones, como hacer clic, pasar el mouse e incluso hipervínculos. Para agregar código personalizado a estos fragmentos de código, puede escribir directamente en el panel Acciones. Por supuesto, puede codificar a mano sus propios HTML5, JavaScript y CSS3 en el panel Acciones. Debido a que este tipo de programación web y de animación a menudo se basa en Bibliotecas JavaScript externas, incluso puede agregar enlaces a estas fuentes externas.

La animación es solo una parte de lo que puede hacer con el grupo de aplicaciones Edge. Uno de los aspectos más importantes del diseño web es crear un sitio web que sea sensible o flexible para todo tipo de pantallas, desde computadoras de escritorio hasta teléfonos móviles. Esto se realiza con consultas de medios y diseños de cuadrícula fluidos, basados ​​en porcentajes, los cuales son parte de las herramientas que se encuentran en Edge Reflow. Edge Reflow es un entorno de trabajo WYSIWYG que genera el código para su proyecto. Este código está actualizado para los últimos estándares web, especialmente WebKit, que cada vez es más compatible con todo, desde páginas web hasta lectores de libros electrónicos.

Crear un diseño en Edge Reflow es tan fácil como dibujar contenedores de div HTML en la cuadrícula con la herramienta Caja y el posicionamiento absoluto de estos divs les permite cambiar el tamaño o la transformación según sea necesario para cada tamaño de pantalla. ¿Como funciona esto? El secreto son las Consultas de medios que puede personalizar dentro del Administrador de consultas de medios configurando los parámetros mínimos y máximos para tres o más resoluciones de pantalla. Estos parámetros determinarán cuándo el diseño se transformará hacia arriba o hacia abajo para el tamaño de pantalla más cercano. Realmente me gustan los marcadores visuales codificados por colores para cada tamaño de pantalla en la parte superior del espacio de trabajo que le ayudan a visualizar cuándo ocurrirán estos cambios.

Una de las características de Edge que ahorra más tiempo es cómo puede reutilizar fácilmente sus estilos CSS3 personalizados en varios proyectos y, por lo tanto, mantener estilos consistentes. Esto también hace que la actualización sea casi automática. Adobe ha hecho de esto una parte de su flujo de trabajo con el panel Edge Reflow Styling. Para mantener las cosas ordenadas, cada estilo, como fondos o bordes, tiene su propia sección individual. Puede controlar el color y otros parámetros, así como la jerarquía de capas, directamente desde estas pestañas. Estos estilos personalizados se convierten automáticamente en reglas de estilo CSS, que luego se pueden copiar / pegar para su reutilización.

En el pasado, para obtener una vista previa de su página web, necesitaba guardar los cambios, cambiar a un navegador web y actualizar la página. Adobe ha reducido el número de estos pasos mediante el uso de una combinación de Edge Inspect y el navegador Chrome. Ahora puede obtener una vista previa de cómo se mostrará su proyecto en múltiples dispositivos desde una computadora de escritorio, tableta o teléfono móvil. Una característica que realmente me gusta es la capacidad de tomar una captura de pantalla de estas vistas previas para enviarlas por correo electrónico a clientes y miembros del equipo o usarlas en Creative Cloud para colaborar.

Finalmente, para aquellos de nosotros que todavía nos gusta trabajar con código sin procesar, Adobe tiene Edge Code. La ventana de código está ordenada con solo unos pocos controles a la izquierda y Edge Code se integra con Google Chrome para darle una vista previa en vivo. Cuando su código se vuelve largo y difícil de manejar, puede profundizar hasta el nivel de elemento individual mediante la función de Edición rápida que enumera todos los estilos adjuntos a un elemento en una ventana superpuesta. Debido a que las aplicaciones Edge son parte de Creative Cloud, puede usar las fuentes web Adobe Edge, las fuentes web de Google y las fuentes Typekit directamente desde Edge Code. Edge Code generará la etiqueta de script de encabezado que extrae la fuente externa.

Como HTML5, JavaScript y CSS3 están reemplazando rápidamente las técnicas de animación más antiguas debido a la popularidad de los dispositivos móviles, estas aplicaciones integradas de Edge, así como su integración con las otras aplicaciones de Adobe, son la próxima generación del flujo de trabajo de diseño y desarrollo de múltiples dispositivos.

Divulgación: no recibí compensación financiera por este artículo. Adobe proporcionó una membresía de Creative Cloud para el propósito de esta revisión.Las opiniones son completamente mías basadas en mi experiencia.

Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: Adobe Illustrator + Microsoft Surface Pro | Adobe Creative Cloud (Abril 2024).