Aplicativos da Creative Cloud da Adobe Edge

• Abril 16, 2024

HTML5, JavaScript e CSS3 tornaram-se quase tão populares quanto o Flash na criação de animação interativa para a Web, tablets e telefones. Adobe^R O Edge Animate e os outros aplicativos Edge são um software muito amigável com muitas predefinições para facilitar o seu trabalho.

A animação da linha de tempo ainda é a maneira mais popular de animar e a Adobe tornou mais fácil com os novos caminhos de movimento do Edge Animate, que podem imitar os movimentos do mundo real e com a facilidade embutida. Você pode adicionar facilmente animação ao longo da linha do tempo com o botão Fixar, que adiciona marcadores de animação à linha do tempo ou arrastar e soltar o posicionamento de objetos no palco que o Edge Animate converte automaticamente em caminhos de movimento. Você pode até usar o botão Gravar, que registra as alterações feitas nos objetos no palco e converte essas alterações em animação do quadro-chave. O Edge também possui sua própria versão do painel Ações, que é organizada, com cada ação tendo sua própria guia no painel. É fácil testar suas animações com uma combinação do Adobe Edge e do navegador Google Chrome.

Se você estiver familiarizado com a animação do Flash, notará que a adição de interatividade no Edge se assemelha ao fluxo de trabalho do Flash, pois é possível usar linhas de tempo aninhadas para cada elemento de animação e aplicar trechos de código pré-instalados para as interações e animações mais comuns. Esses trechos de código lidam com as animações de reprodução, como reproduzir, pausar, retomar e parar, além de criar áreas quentes para as ações básicas dos botões, como clicar, passar o mouse e até hiperlinks. Para adicionar código personalizado a esses trechos de código, você pode digitar diretamente no painel Ações. Obviamente, você pode codificar manualmente seu próprio HTML5, JavaScript e CSS3 no painel Ações. Como esse tipo de programação da Web e de animação geralmente depende de bibliotecas JavaScript externas, você pode até adicionar links a essas fontes externas.

A animação é apenas parte do que você pode fazer com o grupo de aplicativos Edge. Um dos aspectos mais importantes do design da web é a criação de um site responsivo ou flexível para todos os tipos de telas, de desktop a telefones celulares. Isso é feito com consultas de mídia e layouts de grade fluidos com base em porcentagem, que fazem parte das ferramentas encontradas no Edge Reflow. O Edge Reflow é um ambiente de trabalho WYSIWYG que gera o código para o seu projeto. Esse código está atualizado para os mais recentes padrões da web, especialmente o WebKit, que é cada vez mais suportado por tudo, desde páginas da web a leitores de e-books.

Criar um layout no Edge Reflow é tão fácil quanto desenhar contêineres div HTML na grade com a ferramenta Caixa, e o posicionamento absoluto dessas divs permite redimensionar ou transformar conforme necessário para cada tamanho de tela. Como é que isso funciona? O segredo são as Consultas de mídia, que você pode personalizar no Gerenciador de consultas de mídia, definindo os parâmetros mínimo e máximo para três ou mais resoluções de tela. Esses parâmetros determinarão quando o design será alterado para cima ou para baixo para o tamanho de tela mais próximo. Gosto muito dos marcadores visuais codificados por cores para cada tamanho de tela na parte superior da área de trabalho, que ajudam a visualizar quando essas alterações ocorrerão.

Um dos recursos do Edge que economizam tempo é como você pode reutilizar facilmente seus estilos CSS3 personalizados em vários projetos e, assim, manter estilos consistentes. Isso também torna a atualização quase automática. A Adobe fez disso parte do seu fluxo de trabalho com o painel Edge Reflow Styling. Para manter as coisas organizadas, cada estilo, como fundos ou bordas, tem sua própria seção individual. Você pode controlar a cor e outros parâmetros, bem como a hierarquia de camadas, diretamente dessas guias. Esses estilos personalizados são convertidos automaticamente em regras de estilo CSS, que podem ser copiadas / coladas para reutilização.

No passado, para visualizar sua página da web, era necessário salvar as alterações, alternar para um navegador da Web e atualizar a página. A Adobe reduziu o número dessas etapas usando uma combinação do Edge Inspect e do navegador Chrome. Agora você pode visualizar como o seu projeto será exibido em vários dispositivos, do desktop, tablet ao celular. Um recurso que eu realmente gosto é a capacidade de fazer uma captura de tela dessas visualizações para enviar por e-mail a clientes e membros da equipe ou usar na Creative Cloud para colaboração.

Por fim, para quem ainda gosta de trabalhar com código bruto, a Adobe possui o Edge Code. A janela de código é organizada com apenas alguns controles à esquerda e o Edge Code se integra ao Google Chrome para fornecer uma visualização ao vivo. Quando seu código se torna longo e difícil, você pode detalhar o nível de elemento individual usando o recurso Edição Rápida, que lista todos os estilos anexados a um elemento em uma janela de sobreposição. Como os aplicativos Edge fazem parte da Creative Cloud, você pode usar as fontes Adobe Edge Web Fonts, Google Web Fonts e Typekit diretamente de dentro do Edge Code. O Edge Code gerará a tag de script do cabeçalho que extrai a fonte externa.

Como HTML5, JavaScript e CSS3 estão substituindo rapidamente as técnicas de animação mais antigas devido à popularidade dos dispositivos móveis, esses aplicativos Edge integrados e sua integração com outros aplicativos da Adobe são a próxima geração do fluxo de trabalho de design e desenvolvimento de vários dispositivos.

Divulgação: não fui compensado financeiramente por este artigo. A Adobe forneceu uma associação da Creative Cloud para os fins desta revisão.As opiniões são completamente minhas com base na minha experiência.

Direitos autorais 2018 Adobe Systems Incorporated. Todos os direitos reservados. As capturas de tela do produto Adobe foram impressas com permissão da Adobe Systems Incorporated. Adobe, Photoshop, Álbum do Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst e Flash Paper é / são marcas comerciais registradas ou marcas comerciais da Adobe Systems Incorporated nos Estados Unidos e / ou em outros países.

Instruções De Vídeo: 10 Best FREE Adobe Creative Cloud Alternatives (Abril 2024).