10 Razões para usar o Adobe Edge Animate CC

Adobe Edge Animate

O Adobe Edge Animate tem sido apontado como um substituto para o Adobe Flash. Embora isso possa ser uma ilusão para aqueles que estão prontos para se mover além da era Flash, ainda é muito cedo para fazer essa afirmação. No entanto, o Edge Animate é uma poderosa ferramenta: um software intuitivo que te permite criar animações interativas para a web, iBooks e apps.

Aqui estão dez grandes razões para começar a usar o Edge Animate:

1 – HTML5 , JavaScript e CSS trabalhando em conjunto:
Adobe Edge Animate gera o arquivo final em HTML5, com JavaScript e CSS. Esta é uma grande notícia para os desenvolvedores e designers que não trabalham com os códigos.

A boa notícia para os desenvolvedores é que eles podem editar o código para melhorar suas animações e personalizá-las.

A boa notícia para os designers é que eles podem fazer animações funcionais e eficazes , sem saber uma única linha de código.

2 – O stage já é layout do navegador:
O stage é a parte da interface do Edge Animate onde você faz a maioria do seu trabalho de design.

O que é ótimo sobre o stage é que ele se comporta como uma janela do navegador. O que você visualiza no stage é o que você veria se estivesse com seu projeto publicado e visualizado em um navegador moderno .

Você pode até mesmo visualizar a animação diretamente do stage.

Há algumas limitações: Por exemplo, você não pode visualizar ações , como loops e cliques, no stage. Mas isso é um pequeno obstáculo no na grande quantidade de recursos .

3 – Símbolos reutilizáveis:
O Edge Animate permite criar símbolos. Com símbolos , você pode salvar elementos ou grupos de elementos, e suas ações associadas para reutilização em outros projetos. Por exemplo, se você criar uma apresentação de slides usando o Edge Animate e salvar o projeto como um símbolo , você pode exportá-lo para o seu desktop e , em seguida, importá-lo para um outro projeto do Edge Animate.

Se você prefere um fluxo de trabalho mais rápido, você pode até mesmo copiar e colar um símbolo de um projeto para outro . Símbolos são uma ótima maneira de poupar tempo e energia quando se trabalha com elementos comuns que você gosta reutilizar.

4 – Web design responsivo:
A próxima grande coisa para web design é o que torna ágil ( claro e fácil de usar em uma ampla gama de tipos de dispositivos e tamanhos ) . Apenas alguns sites atualmente pode se gabar de um web design responsivo. Quando você visualizá-los em ação , certamente será impressionante.

Se você pode  criar uma única animação que será visualizada da mesma maneira e com a mesma qualidade em um monitor de 30” ouem uma tela de smartphone de 4″ como a do iPhone.

5 – Importando fontes:
A Adobe sabe que há mais do que apenas as fontes Arial e Helvética. É por isso que eles desenvolveram a ferramenta eficaz para importar de forma simplificada, as fontes de vários sites como as fontes da web do Google , Typekit e muito mais.

6 – Ferramentas de desenho familiares:
Se você já usou uma ferramenta de desenho da Adobe para desenhar um retângulo ou um círculo , você já saberá instantaneamente como fazer isso no Edge Animate, pois temos um Menu de desenho.

A Adobe tornou super fácil a adição de elementos para o palco e, assim você pode criar tudo, desde quadrados até círculos perfeitos (e animar!) . As ferramentas de desenho incluem uma ferramenta de texto, ferramenta retângulo, ferramenta elipse , e muito mais.

7 – Timeline intuitiva:
A Timeline (linha do tempo) é onde você cria as animações com keyframes.  Depois de descobrir como ela funciona, você pode usar a linha de tempo para dar vida às suas animações.

8 – Interatividade:
Você não tem precisa se contentar com animações simples para sentar e assistir passivamente . Oh , não! Você pode clicar ativamente com um mouse, ou adicionar eventos de touch para um tablet, para executar ações diferentes. Por exemplo, de links para disparar loops, e muito mais!

Você pode criar animações tão variadas como um livro de animação para crianças ou até uma página inteira para um restaurante.

9 – Área de trabalho personalizada:
Nem todo mundo trabalha da mesma forma. Nem todo mundo aprecia os mesmos pontos de vista. Com base nisso, a Adobe fez a interface de Edge Animate extremamente personalizável.

Você pode até salvar visualizações personalizadas para uso posterior. Se você acidentalmente fechar um painel e não conseguir encontrá-lo , você sempre poderá reverter para o modo de exibição padrão .

10 – Uma ferramenta de animação que qualquer um pode usar:
Edge Animate é uma daquelas ferramentas que muitos tipos diferentes de pessoas podem apreciar. Se você é um designer profissional que não conhece o código, você ainda pode criar animações complexas . Se você é um desenvolvedor que quer adicionar alguns recursos extras a um projeto, então você pode fazer isso também.

Por outro lado, se você é um estudante ou um amador que só quer brincar com algo novo e inovador , então você também não pode deixar de experimentar. Quem sabe? o seu hobby poderia se tornar sua profissão!

Esta é uma tradução e a matéria original está publicada: Por Michael Rohde da Adobe Edge Animate CC For Dummies em http://www.dummies.com/how-to/content/10-reasons-to-use-adobe-edge-animate-cc.html

 

Bjs e até o próximo post!

User_Group_Manager_badge

 

Palestra de Webdesign com tecnologias Adobe CS6

Olá, pessoal 🙂

Hoje ministrei a palestra de Webdesign com as novas tecnologias Adobe CS6.

Sabemos que a tecnologia Adobe é utilizada por 100% dos designers de todo o mundo, grantindo recursos e produtividade, que aliados ao seu potencial criativo, geram trabalhos gráficos de alta qualidade e excelente comunicação.

Estive apresentando a designers e a interessados, o mundo de criatividade e tecnologia, com novo pacote de tecnologias da Adobe, o Creative Suite CS 6.

Nesta palestra mostrei como Designers podem fazer uso dos novos recursos de ícones da tecnologia do design: Dreamweaver, Photoshop, Fireworks, Illustrator e Flash; todos na versão CS6.

Motorola Xoom™A oportunidade gerada pela chegada maciça de Tablets ao mercado foi enfocada, com a demonstração de uma publicação para visualização interativa com a nova ferramenta do Dreamweaver – Fluid Grid Layouts – que nos permite a criação de layouts baseados em escala que se adapta a todos os tamanhos de tela (mobiles, tablets e desktop).

Tivemos  sorteios de brindes da Adobe e da ENG DTP & Multimídia.

Agradeço às pessoas que puderam comparecer!

Beijo grande para todos  😉

Design Responsivo e Design Líquido

Olá, pessoal!

Fala-se muito em Design Responsivo e Design Líquido ou Fluído, e percebo que muita gente confunde os dois conceitos!

“Design fluído, ou design liquido, é uma técnica de desenvolvimento web que também utiliza medidas relativas para que o layout de um site possa aumentar ou diminuir de tamanho de acordo com o tamanho da área de visualização. Bem, nesse sentido é muito semelhante ao design responsivo, mas as as semelhanças acabam por aqui”. (referência:http://blog.popupdesign.com.br/design-responsivo-grids-e-texto/)

No caso do design responsivo, não se trata apenas de esticar ou encolher os elementos visuais do site, e sim de adaptar a experiência de navegação de acordo com as necessidades de cada tipo de mídia. E estas mudanças vão muito além do tamanho do grid.

Recentemente participei do 1o.  treinamento de Design Responsivo/Adaptativo, ministrado na ENG com a minha querida instrutora e amiga, Ana Laura Gomes.

Vou publicar aqui alguns exemplos para resumir o que foi abordado neste treinamento.

Pesquisei e encontrei uma lista com 28 sites pra você testar o layout com design responsivo.

Clique em restaurar na janela de seu browser e diminua a resolução aos poucos que você verá o layout se adaptando.

Divirta-se e inspire-se com o design responsivo, deixando seus projetos mais interativos do que nunca!

http://www.kingshillcars.com/

http://lynnandtonic.com/

http://urban-svensson.com/

http://www.red-root.com/cv/

http://rourkery.com/

http://upperdog.se/

http://designprofessionalism.com/

http://pgrady.com/

http://glitch.com/

http://clearairchallenge.com/

http://dustinsenos.com/

http://staffanstorp.se/

http://trentwalton.com/

http://owltastic.com/

http://buildguild.org/

http://www.dolectures.com/

http://arrrrcamp.be/

http://spigotdesign.com/

http://www.sleepstreet.be/

http://colly.com/

http://stephencaver.com/

http://sasquatchfestival.com/

http://hicksdesign.co.uk/

http://www.andrewrevitt.com/

http://ribot.co.uk/

http://sweethatclub.org/

http://cognition.happycog.com/

http://www.holidaysapart.com/

Beijos e até mais 🙂